angular-osf/src/app/features/collections/components/add-to-collection/collection-metadata-step/collection-metadata-step.component.html at 366375502dd54cb1b9cb5ed607b298329a487d7c · CenterForOpenScience/angular-osf · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<p-step-item
  [pTooltip]="isDisabled() ? ('collections.addToCollection.tooltipMessage' | translate) : ''"
  tooltipPosition="top"
  class="p-4"
  [value]="targetStepValue()"
>
  <p-step [value]="targetStepValue()" [disabled]="isDisabled()">
    <ng-template #content>
      <div class="flex flex-column gap-4 w-full">
        <h3>{{ 'collections.addToCollection.collectionMetadata' | translate }}</h3>

        @if (!isDisabled() && stepperActiveValue() !== targetStepValue()) {
          @if (collectionMetadataSaved()) {
            @if (isCedarMode()) {
              @if (cedarTemplate()) {
                <cedar-artifact-viewer
                  #cedarViewer
                  [config]="cedarViewerConfig"
                  [templateObject]="cedarTemplate()!.attributes.template"
                  [instanceObject]="cedarFormData()"
                ></cedar-artifact-viewer>
              }
            }

            @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
              <div>
                <p class="font-bold">{{ filterEntry.labelKey | translate }}</p>

                <p class="mt-2">
                  {{ collectionMetadataForm().get(filterEntry.key)?.value }}
                </p>
              </div>
            }
          }

          <p-button
            class="align-self-end"
            severity="secondary"
            [label]="'common.buttons.clickToEdit' | translate"
            (onClick)="handleEditStep()"
          ></p-button>
        }
      </div>
    </ng-template>
  </p-step>

  <p-step-panel [value]="targetStepValue()" class="p-0">
    <ng-template class="m-0" #content let-activateCallback="activateCallback">
      <form [formGroup]="collectionMetadataForm()" class="grid row-gap-2 mt-3">
        @for (filterEntry of availableFilterEntries(); track filterEntry.key) {
          <div class="flex flex-column gap-1 col-12 md:col-6">
            <label [for]="filterEntry.key">{{ filterEntry.labelKey | translate }}</label>
            <p-select
              [id]="filterEntry.key"
              [options]="filterEntry.options"
              [formControlName]="filterEntry.key"
              [placeholder]="filterEntry.labelKey | translate"
              appendTo="body"
            ></p-select>
          </div>
        }
      </form>

      @if (isCedarMode()) {
        @if (cedarTemplate()) {
          <div class="cedar-editor-container mt-3">
            <cedar-embeddable-editor
              #cedarEditor
              [config]="cedarConfig"
              [templateObject]="cedarTemplate()!.attributes.template"
              [metadata]="cedarFormData()"
              (change)="onCedarChange($event)"
              (keyup)="onCedarChange($event)"
            ></cedar-embeddable-editor>
          </div>

          <div class="flex justify-content-end gap-3 mt-4">
            <p-button
              severity="info"
              [label]="'common.buttons.discardChanges' | translate"
              (onClick)="handleDiscardChanges()"
            />
            <p-button
              [label]="'common.buttons.saveAndContinue' | translate"
              [disabled]="!collectionMetadataForm().valid"
              (onClick)="handleSaveCedarMetadata()"
            />
          </div>
        } @else {
          <p class="mt-3">{{ 'collections.addToCollection.cedarFormNotAvailable' | translate }}</p>
        }
      } @else {
        <div class="flex justify-content-end gap-3 mt-4">
          <p-button
            severity="info"
            [label]="'common.buttons.discardChanges' | translate"
            (onClick)="handleDiscardChanges()"
          />
          <p-button
            [label]="'common.buttons.saveAndContinue' | translate"
            [disabled]="!collectionMetadataForm().valid"
            (onClick)="handleSaveMetadata()"
          />
        </div>
      }
    </ng-template>
  </p-step-panel>
</p-step-item>