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/label-interfaces';

@Component({
  selector: 'aspect-likert-row-edit-dialog',
  template: `
    <mat-dialog-content>
      <div class="fx-column-start-stretch">
        <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"
                        [innerHTML]="'<span>' + column.text + ' (Index: ' + i + ')</span>' | safeResourceHTML">
            </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 class="fx-row-space-between-center">
          <div class="fx-column-start-stretch fx-fix-gap-10">
            <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>
          <aspect-text-image-panel [label]="newLikertRow.rowLabel"></aspect-text-image-panel>
        </div>
      </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;
     }

     .fx-column-start-stretch {
       box-sizing: border-box;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: stretch;
     }

     .fx-row-space-between-center {
       box-sizing: border-box;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
     }

     .fx-fix-gap-10 {
       gap: 10px;
     }

     aspect-text-image-panel {
       margin-left: auto;
       margin-right: auto;
     }
  `]
})
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();
  }
}