I have used this module for display data in table one thing that I don't understand is how I can render image in the cell??
I wondered so I google it and found that we can use custom component in ng2-smart-table but still there is one loophole in this (or maybe I don't understand properly? ) I am storing my all data in local storage I managed to add button in the cell and also open the popup for choosing the option( galary/camera ) but I don't know or I can't figure it out how can I display in the cell??
so anyone with any idea??
putting some code for reference
1) Home.ts ( only the code that is req )
settings = {
filter: false,
sort: false,
external: 'external',
edit: {
editButtonContent: 'Edit', // 'Modifier',
saveButtonContent: 'Save', // 'Enregistrer',
cancelButtonContent: 'Cancel', // 'Annuler',
confirmSave: true
},
add: {
addButtonContent: 'Add a sample', // Ajouter un prélèvement
createButtonContent: 'Validate', // Valider
cancelButtonContent: 'Cancel', // Annuler,
confirmCreate: true
},
delete: {
deleteButtonContent: 'Remove', // 'Supprimer',
confirmDelete: true
},
actions: {
columnTitle: ''
},
mode: 'inline',
columns: {
list: {
title: 'List A/B/C',
editor: {
type: 'textarea'
}
},
status: {
title: 'ABX',
editor: {
type: 'textarea',
}
},
paper: {
title: 'Préco',
editor: {
type: 'textarea'
}
},
image: {
title: 'Photo',
filter: false,
type: 'custom',
renderComponent: ButtonImageComponent,
defaultValue: 'Photo',
editor: {
type: 'custom',
component: ButtonImageComponent,
},
}
}
};
2) Home.html
<ng2-smart-table [settings]="settings" (deleteConfirm)="onDeleteConfirm($event)" [source]="data" (editConfirm)="onEditConfirm($event)"
(createConfirm)="onCreateConfirm($event)"></ng2-smart-table>
3) Button Component.ts ( Custome button that I have added at the last column)
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ActionSheetController, Platform, Events } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
@Component({
selector: 'app-button-image',
templateUrl: './button-image.component.html',
styleUrls: ['./button-image.component.scss'],
})
export class ButtonImageComponent implements OnInit {
base64Image: any ;
constructor(public actionSheetController: ActionSheetController,public event: Events, public platform: Platform, public camera: Camera) { }
ngOnInit() {}
async presentActionSheet() {
const actionSheet = await this.actionSheetController.create({
header: 'Option',
buttons: [{
text: 'Take photo',
role: 'destructive',
icon: !this.platform.is('ios') ? 'ios-camera-outline' : null,
handler: () => {
this.captureImage(false);
}
}, {
text: 'Choose photo from Gallery',
icon: !this.platform.is('ios') ? 'ios-images-outline' : null,
handler: () => {
this.captureImage(true);
}
}]
});
await actionSheet.present();
}
async captureImage(useAlbum: boolean) {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
...useAlbum ? {sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM} : {}
};
const imageData = await this.camera.getPicture(options);
this.base64Image = `data:image/jpeg;base64,${imageData}`;
this.event.publish('image:selectes', this.base64Image);
// this.photos.unshift(this.base64Image);
}
}
4) And its HTML
<ion-button (click)="presentActionSheet()">Select</ion-button>
Finally, I figure it out. :)
generatePDF(localData) {
this.showLoader('Creating PDF');
// tslint:disable-next-line: prefer-const
let externalDataRetrievedFromServer = [];
localData.Tabledata.forEach(element => {
externalDataRetrievedFromServer.push(element);
});
const column = ['Numéro de prélèvement', 'Niveau', 'Pièce', 'Support', 'Matériaux / produit', 'Amiante',
'FCR', 'Délais urgent', 'List A/B/C',
'Etat de conversion', 'Préco', 'Résultats labo', 'Photo'];
const dd = {
pageSize: 'A2',
pageOrientation: 'landscape',
content: [
{
alignment: 'justify',
columns: [
{
text: localData.HeaderData.le !== undefined ? 'Le : ' + moment(localData.HeaderData.le).format('DD/MM/YYYY') : '',
style: 'header', margin: [0, 20],
}
]
},
externalDataRetrievedFromServer.length > 0 ? this.table(externalDataRetrievedFromServer, column) : {}
],
styles: {
header: {
fontSize: 18,
bold: true
},
subheader: {
fontSize: 15,
bold: true
},
quote: {
italics: true
},
small: {
fontSize: 8
}
}
};
this.pdfObj = pdfMake.createPdf(dd);
if (this.plt.is('cordova')) {
setTimeout(() => {
this.hideLoader();
}, 500);
} else {
setTimeout(() => {
this.hideLoader();
}, 500);
this.pdfObj.download();
}
}
buildTableBody(data, columns) {
const body = [];
const column_local = ['numero', 'niveau', 'piece', 'support',
'materiaux', 'amiante', 'fcr', 'delais', 'list', 'etat', 'preco', 'resultats' , 'image'];
body.push(columns);
data.forEach( (row) => {
let dataRow = [];
column_local.forEach( (column) => {
if (column === 'image') {
if (row[column]) {
dataRow.push({
// tslint:disable-next-line: max-line-length
image: row[column],
fit: [250, 250],
alignment: 'center',
});
} else {
dataRow.push({});
}
} else {
dataRow.push(row[column]);
}
});
body.push(dataRow);
});
return body;
}
table(data, columns) {
return {
layout: 'lightHorizontalLines', // optional
table: {
headerRows: 1,
// widths: [100, 'auto', 'auto', 'auto','auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
widths: ['auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto', 'auto'],
body: this.buildTableBody(data, columns)
}
};
}