resource-document-panel.component.html

<div id="resource-document-panel">

  <mat-toolbar class="mat-elevation-z2" style="min-height: 50px !important;">
    <mat-toolbar-row class="smp-toolbar-row" style="justify-content: space-between;min-height: 50px !important;">

      <button id="validateResource_id" mat-raised-button
              color="primary"
              matTooltip="Validate resource"
              [disabled]="emptyDocument"
              (click)="onDocumentValidateButtonClicked()"
      >
        <mat-icon>check_circle</mat-icon>
        <span>Validate</span>
      </button>
      <button id="GenerateResource_id" mat-raised-button
              color="primary"
              matTooltip="Generate resource"

              (click)="onGenerateButtonClicked()"
      >
        <mat-icon>add_circle</mat-icon>
        <span>Generate</span>
      </button>
      <button id="documentWizard_id" mat-raised-button
              color="primary"
              matTooltip="Show document wizard dialog"
              *ngIf="showWizardDialog"
              (click)="onShowDocumentWizardDialog()"
      >
        <mat-icon>code_block</mat-icon>
        <span>Document wizard</span>
      </button>
      <span style="flex: 1 1 auto;"></span>

      <div [formGroup]="documentForm"
           style="float: right;  vertical-align:middle;display: flex;align-items: center;justify-content: center; gap:0.4em;padding-right: 10px">
        <span style="font-size: 0.8em">Show version:</span>
        <select matNativeControl style="width: 100px; border-bottom: grey solid 1px"
                placeholder="All document version"
                matTooltip="Select version to display."
                formControlName="payloadVersion"
                id="document version_id"
                (change)="onSelectionDocumentVersionChanged()"
        >
          <option *ngFor="let version of getDocumentVersions"
                  [value]="version"
          >
            {{version}}
          </option>
        </select>

        <span style="font-size: 0.8em">Created on:</span>
          <input id="payloadCreatedOn_id"
                 matInput [ngxMatDatetimePicker]="payloadCreatedOnPicker"
                 formControlName="payloadCreatedOn"
                 readonly>
          <mat-datepicker-toggle matSuffix [for]="payloadCreatedOnPicker" style="visibility: hidden"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker #payloadCreatedOnPicker [showSpinners]="true" [showSeconds]="false"
                                   [hideTime]="false"></ngx-mat-datetime-picker>

      </div>
    </mat-toolbar-row>
  </mat-toolbar>
  <div class="panel">

    <div style="display: flex;flex-direction: row;width: 100%">
      <smp-titled-label style="flex-grow: 1" title="Resource identifier:"
                        value="{{resource?.identifierValue}}"></smp-titled-label>
      <smp-titled-label style="flex-grow: 1" title="Resource scheme:"
                        value="{{resource?.identifierScheme}}"></smp-titled-label>
    </div>
    <div style="display: flex;flex-direction: row;width: 100%">
      <smp-titled-label style="flex-grow: 1" title="Document name:" value="{{_document?.name}}"></smp-titled-label>
      <smp-titled-label style="flex-grow: 1" title="Document mimeType:"
                        value="{{_document?.mimeType}}"></smp-titled-label>
      <smp-titled-label style="flex-grow: 1" title="Current document version:"
                        value="{{_document?.currentResourceVersion}}"></smp-titled-label>
    </div>
  </div>

  <div [formGroup]="documentForm" style="width: 100%; display: flex; flex-direction: column; flex:1; gap:0.5em ">
    <div
      style="display:block; overflow: auto;flex: 2;align-self: stretch; flex-direction: column;background-color: #FCFCFCBB; border: ridge 3px #b0bec5"
      (click)="onEditPanelClick()"
    >
      <ngx-codemirror #codemirror
                      formControlName="payload"
                      [options]="codemirrorOptions"
                      ngDefaultControl
      ></ngx-codemirror>
    </div>
    <mat-toolbar class="mat-elevation-z2" style="flex-grow: 0">
      <mat-toolbar-row class="smp-toolbar-row">
        <button id="cancel_id" mat-raised-button color="primary"
                [disabled]="cancelButtonDisabled"
                (click)="onDocumentResetButtonClicked()">
          <mat-icon>cancel</mat-icon>
          <span>Cancel</span>
        </button>
        <button id="saveResource_id" mat-raised-button
                color="primary"
                matTooltip="Validate resource"
                [disabled]="saveButtonDisabled"
                (click)="onSaveButtonClicked()"
        >
          <mat-icon>save</mat-icon>
          <span>Save</span>
        </button>
      </mat-toolbar-row>
    </mat-toolbar>
  </div>
</div>