frontend/src/app/components/editor/database/renderers/boolean-renderer.component.ts

import {ICellRendererAngularComp} from 'ag-grid-angular';
import {Component} from '@angular/core';
import {ICellRendererParams} from 'ag-grid-community';
import {EditorService} from '../../../../service/editor.service';

@Component({
    selector: 'editor-boolean-renderer',
    template: `
        <ng-container *ngIf="!checkbox">{{ display }}</ng-container>
        <div *ngIf="checkbox" style="width: 100%; text-align: center; padding-top: 3px;">
            <ion-checkbox [checked]="params.value" (ionChange)="onChecked($event)" [disabled]="!editorService.canEdit()"></ion-checkbox>
        </div>
    `,
    styles: [`
        :host {
            width: 100%;
            height: 100%;
            display: inline-block;
        }
    `],
})
export class BooleanRendererComponent implements ICellRendererAngularComp {
    public params: ICellRendererParams;
    public emptyValue = '';
    public trueValue = 'True';
    public falseValue = 'False';
    public checkbox = false;

    public checked = false;

    constructor(
        public editorService: EditorService,
    ) { }

    agInit(params: ICellRendererParams): void {
        console.log('bool renderer', this);
        this.params = params;

        // @ts-ignore
        if ( this.params.colDef._parentEditorUUID ) {
            // @ts-ignore
            this.editorService = this.editorService.getEditor(this.params.colDef._parentEditorUUID)
        }

        // @ts-ignore
        this.checkbox = params.colDef.additionalData.labelType === 'checkbox';

        if ( !this.checkbox ) {
            // @ts-ignore
            const labelType = params.colDef.additionalData.labelType.split('_').map(x => x.charAt(0).toUpperCase() + x.slice(1));
            this.trueValue = labelType[0];
            this.falseValue = labelType[1];
        }
    }

    public get display() {
        if ( this.params.value === true ) {
            return this.trueValue;
        } else if ( this.params.value === false ) {
            return this.falseValue;
        } else {
            return this.emptyValue;
        }
    }

    refresh(params: any): boolean {
        return false;
    }

    onChecked($event) {
        const checked = !this.params.value;
        const colId = this.params.column.getColId();
        this.params.node.setDataValue(colId, checked);
    }
}