likert-row-edit-dialog.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FileService } from 'common/services/file.service';
import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
import { TextLabel } from 'common/models/elements/element';

@Component({
  selector: 'aspect-likert-row-edit-dialog',
  template: `
    <mat-dialog-content fxLayout="column">
      <aspect-rich-text-editor-simple [(content)]="newLikertRow.rowLabel.text">
      </aspect-rich-text-editor-simple>

      <mat-form-field [style.margin-top.px]="15">
        <mat-label>{{'id' | translate }}</mat-label>
        <input matInput type="text" [(ngModel)]="newLikertRow.id">
      </mat-form-field>

      <mat-checkbox [(ngModel)]="newLikertRow.readOnly">
        {{'propertiesPanel.readOnly' | translate }}
      </mat-checkbox>

      <mat-form-field appearance="fill">
        <mat-label>{{'preset' | translate }}</mat-label>
        <mat-select [(ngModel)]="newLikertRow.value">
          <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
          <mat-option *ngFor="let column of data.options; let i = index" [value]="i">
            {{column.text}} (Index: {{i}})
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>{{'verticalButtonAlignment' | translate }}</mat-label>
        <mat-select [(ngModel)]="newLikertRow.verticalButtonAlignment">
          <mat-option *ngFor="let option of ['auto', 'center']"
                      [value]="option">
            {{ option | translate }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <div fxLayout="row" fxLayoutAlign="space-between center">
        <div fxLayout="column" fxLayoutGap="10px">
          <button mat-raised-button (click)="loadImage()">
            {{ 'loadImage' | translate }}</button>
          <button mat-raised-button (click)="newLikertRow.rowLabel.imgSrc = null">
            {{ 'removeImage' | translate }}</button>
          <mat-form-field>
            <mat-label>{{'imagePosition' | translate }}</mat-label>
            <mat-select [(ngModel)]="newLikertRow.rowLabel.imgPosition">
              <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
                          [value]="option">
                {{ option | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>

        <img [src]="newLikertRow.rowLabel.imgSrc"
             [style.object-fit]="'scale-down'" [width]="200">
      </div>

    </mat-dialog-content>

    <mat-dialog-actions>
      <button mat-button [mat-dialog-close]="newLikertRow">
        {{'save' | translate }}
      </button>
      <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
    </mat-dialog-actions>
  `,
  styles: [
    'mat-checkbox {margin-bottom: 15px;}'
  ]
})
export class LikertRowEditDialogComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, options: TextLabel[] }) { }

  newLikertRow = {
    ...this.data.row,
    rowLabel: { ...this.data.row.rowLabel }
  };

  async loadImage(): Promise<void> {
    this.newLikertRow.rowLabel.imgSrc = await FileService.loadImage();
  }
}