feat: add placeholder to title field in form

geonetwork · Feb 4, 2025 · 4e95905 · 4e95905
1 parent 9ef5bd8
commit 4e95905
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 103 deletions.
diff --git a/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html b/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html
@@ -11,10 +11,7 @@
     <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
   </ng-container>
   <ng-template #withGenericWrapper>
-    <gn-ui-form-field-wrapper
-      [label]="config.labelKey! | translate"
-      [hint]="config.hintKey! | translate"
-    >
+    <gn-ui-form-field-wrapper [label]="config.labelKey! | translate" [hint]="config.hintKey! | translate">
       <ng-container *ngTemplateOutlet="fieldContent"></ng-container>
     </gn-ui-form-field-wrapper>
   </ng-template>
@@ -24,94 +21,56 @@
   <ng-container [ngSwitch]="model">
     <ng-container *ngSwitchCase="'title'">
       <div class="flex flex-row flex-start items-center gap-3 mb-[12px]">
-        <textarea
-          #titleInput
-          cdkTextareaAutosize
-          #autosize="cdkTextareaAutosize"
-          cdkAutosizeMinRows="1"
-          data-test="recordTitleInput"
-          class="grow font-title text-3xl font-normal overflow-hidden"
+        <textarea #titleInput cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1"
+          data-test="recordTitleInput" class="grow font-title text-3xl font-normal overflow-hidden"
           (change)="valueChange.emit($event.target.value)"
-          >{{ valueAsString }}</textarea
-        >
+          [placeholder]="'editor.record.form.field.title.placeholder' | translate">{{ valueAsString }}</textarea>
         <div class="flex flex-row justify-between self-start mt-0.5">
-          <span
-            class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
-            (click)="focusTitleInput()"
-            >edit</span
-          >
-          <span
-            *ngIf="config.hintKey"
-            class="material-symbols-outlined gn-ui-icon-small m-2"
-            [matTooltip]="config.hintKey! | translate"
-            matTooltipPosition="above"
-          >
+          <span class="material-symbols-outlined gn-ui-icon-small m-2 cursor-pointer"
+            (click)="focusTitleInput()">edit</span>
+          <span *ngIf="config.hintKey" class="material-symbols-outlined gn-ui-icon-small m-2"
+            [matTooltip]="config.hintKey! | translate" matTooltipPosition="above">
             help
           </span>
         </div>
       </div>
     </ng-container>
     <ng-container *ngSwitchCase="'abstract'">
-      <gn-ui-form-field-rich
-        [label]="config.labelKey! | translate"
-        [hint]="config.hintKey! | translate"
-        [value]="valueAsString"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-rich>
+      <gn-ui-form-field-rich [label]="config.labelKey! | translate" [hint]="config.hintKey! | translate"
+        [value]="valueAsString" (valueChange)="valueChange.emit($event)"></gn-ui-form-field-rich>
     </ng-container>
     <ng-container *ngSwitchCase="'overviews'">
-      <gn-ui-form-field-overviews
-        [metadataUuid]="uniqueIdentifier"
-        [value]="valueAsOverviews"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-overviews>
+      <gn-ui-form-field-overviews [metadataUuid]="uniqueIdentifier" [value]="valueAsOverviews"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-overviews>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceIdentifier'">
-      <gn-ui-form-field-simple
-        [type]="'text'"
-        [value]="valueAsString"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-simple>
+      <gn-ui-form-field-simple [type]="'text'" [value]="valueAsString"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceCreated'">
-      <gn-ui-form-field-date
-        [value]="valueAsDate"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-date>
+      <gn-ui-form-field-date [value]="valueAsDate" (valueChange)="valueChange.emit($event)"></gn-ui-form-field-date>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceUpdated'">
-      <gn-ui-form-field-date
-        [value]="valueAsDate"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-date>
+      <gn-ui-form-field-date [value]="valueAsDate" (valueChange)="valueChange.emit($event)"></gn-ui-form-field-date>
     </ng-container>
     <ng-container *ngSwitchCase="'updateFrequency'">
-      <gn-ui-form-field-update-frequency
-        [value]="valueAsUpdateFrequency"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-update-frequency>
+      <gn-ui-form-field-update-frequency [value]="valueAsUpdateFrequency"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-update-frequency>
     </ng-container>
     <ng-container *ngSwitchCase="'temporalExtents'">
-      <gn-ui-form-field-temporal-extents
-        [value]="valueAsTemporalExtents"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-temporal-extents>
+      <gn-ui-form-field-temporal-extents [value]="valueAsTemporalExtents"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-temporal-extents>
     </ng-container>
     <ng-container *ngSwitchCase="'spatialExtents'">
       <gn-ui-form-field-spatial-extent></gn-ui-form-field-spatial-extent>
     </ng-container>
     <ng-container *ngSwitchCase="'keywords'">
-      <gn-ui-form-field-keywords
-        [value]="valueAsKeywords"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-keywords>
+      <gn-ui-form-field-keywords [value]="valueAsKeywords"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-keywords>
     </ng-container>
     <ng-container *ngSwitchCase="'licenses'">
-      <gn-ui-form-field-license
-        [label]="config.labelKey! | translate"
-        [recordConstraints]="valueAsConstraints"
-        (recordConstraintsChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-license>
+      <gn-ui-form-field-license [label]="config.labelKey! | translate" [recordConstraints]="valueAsConstraints"
+        (recordConstraintsChange)="valueChange.emit($event)"></gn-ui-form-field-license>
     </ng-container>
 
     <ng-container *ngSwitchCase="'legalConstraints'">
@@ -121,44 +80,28 @@
       <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container>
     </ng-container>
     <ng-container *ngSwitchCase="'otherConstraints'">
-      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container
-    ></ng-container>
+      <ng-container *ngTemplateOutlet="formFieldConstraints"></ng-container></ng-container>
     <ng-template #formFieldConstraints>
-      <gn-ui-form-field-constraints
-        [label]="config.labelKey"
-        [value]="valueAsConstraints"
-        [constraintType]="model"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-constraints
-    ></ng-template>
+      <gn-ui-form-field-constraints [label]="config.labelKey" [value]="valueAsConstraints" [constraintType]="model"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-constraints></ng-template>
 
     <ng-container *ngSwitchCase="'contactsForResource'">
-      <gn-ui-form-field-contacts-for-resource
-        [value]="valueAsIndividuals"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-contacts-for-resource>
+      <gn-ui-form-field-contacts-for-resource [value]="valueAsIndividuals"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-contacts-for-resource>
     </ng-container>
     <ng-container *ngSwitchCase="'contacts'">
-      <gn-ui-form-field-contacts
-        [value]="valueAsIndividuals"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-contacts>
+      <gn-ui-form-field-contacts [value]="valueAsIndividuals"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-contacts>
     </ng-container>
     <ng-container *ngSwitchCase="'onlineResources'">
-      <gn-ui-form-field-online-resources
-        *ngIf="modelSpecifier === 'onlineResourceType:!link'"
-        [metadataUuid]="uniqueIdentifier"
-        [value]="valueAsOnlineResources"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-online-resources>
+      <gn-ui-form-field-online-resources *ngIf="modelSpecifier === 'onlineResourceType:!link'"
+        [metadataUuid]="uniqueIdentifier" [value]="valueAsOnlineResources"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-online-resources>
     </ng-container>
     <ng-container *ngSwitchCase="'onlineResources'">
-      <gn-ui-form-field-online-link-resources
-        *ngIf="modelSpecifier === 'onlineResourceType:link'"
-        [metadataUuid]="uniqueIdentifier"
-        [value]="valueAsOnlineResources"
-        (valueChange)="valueChange.emit($event)"
-      ></gn-ui-form-field-online-link-resources>
+      <gn-ui-form-field-online-link-resources *ngIf="modelSpecifier === 'onlineResourceType:link'"
+        [metadataUuid]="uniqueIdentifier" [value]="valueAsOnlineResources"
+        (valueChange)="valueChange.emit($event)"></gn-ui-form-field-online-link-resources>
     </ng-container>
   </ng-container>
 
@@ -172,4 +115,4 @@
       </ng-container>
     </ng-container>
   </ng-container>
-</ng-template>
+</ng-template>
diff --git a/translations/de.json b/translations/de.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "Zeitlicher Umfang",
   "editor.record.form.field.title": "Metadaten-Titel",
+  "editor.record.form.field.title.placeholder": "Geben Sie einen Titel ein",
   "editor.record.form.field.uniqueIdentifier": "Eindeutige Kennung (ID)",
   "editor.record.form.field.updateFrequency": "Aktualisierungshäufigkeit",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "Der Dienst konnte aufgrund von CORS-Beschränkungen nicht erreicht werden",
   "wfs.unreachable.http": "Der Dienst hat einen HTTP-Fehler zurückgegeben",
   "wfs.unreachable.unknown": "Der Dienst konnte nicht erreicht werden"
-}
+}
diff --git a/translations/en.json b/translations/en.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "Spatial extents",
   "editor.record.form.field.temporalExtents": "Temporal extents",
   "editor.record.form.field.title": "Metadata title",
+  "editor.record.form.field.title.placeholder": "Enter a title",
   "editor.record.form.field.uniqueIdentifier": "Unique identifier",
   "editor.record.form.field.updateFrequency": "Update frequency",
   "editor.record.form.license.cc-by": "Creative Commons CC-BY",
@@ -576,4 +577,4 @@
   "wfs.unreachable.cors": "The service could not be reached due to CORS limitations",
   "wfs.unreachable.http": "The service returned an HTTP error",
   "wfs.unreachable.unknown": "The service could not be reached"
-}
+}
diff --git a/translations/es.json b/translations/es.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "",
   "editor.record.form.field.title": "",
+  "editor.record.form.field.title.placeholder": "Introduzca un título",
   "editor.record.form.field.uniqueIdentifier": "",
   "editor.record.form.field.updateFrequency": "",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "",
   "wfs.unreachable.http": "",
   "wfs.unreachable.unknown": ""
-}
+}
diff --git a/translations/fr.json b/translations/fr.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "Étendue spatiale",
   "editor.record.form.field.temporalExtents": "Étendue temporelle",
   "editor.record.form.field.title": "Titre",
+  "editor.record.form.field.title.placeholder": "Saisir un titre",
   "editor.record.form.field.uniqueIdentifier": "Identifiant unique",
   "editor.record.form.field.updateFrequency": "Fréquence de mise à jour",
   "editor.record.form.license.cc-by": "",
@@ -576,4 +577,4 @@
   "wfs.unreachable.cors": "Le service n'est pas accessible en raison de limitations CORS",
   "wfs.unreachable.http": "Le service a retourné une erreur HTTP",
   "wfs.unreachable.unknown": "Le service n'est pas accessible"
-}
+}
diff --git a/translations/it.json b/translations/it.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "",
   "editor.record.form.field.title": "",
+  "editor.record.form.field.title.placeholder": "Inserisci un titolo",
   "editor.record.form.field.uniqueIdentifier": "",
   "editor.record.form.field.updateFrequency": "",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "Il servizio non è accessibile a causa di limitazioni CORS",
   "wfs.unreachable.http": "Il servizio ha restituito un errore HTTP",
   "wfs.unreachable.unknown": "Il servizio non è accessibile"
-}
+}
diff --git a/translations/nl.json b/translations/nl.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "",
   "editor.record.form.field.title": "",
+  "editor.record.form.field.title.placeholder": "Voer een titel in",
   "editor.record.form.field.uniqueIdentifier": "",
   "editor.record.form.field.updateFrequency": "",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "",
   "wfs.unreachable.http": "",
   "wfs.unreachable.unknown": ""
-}
+}
diff --git a/translations/pt.json b/translations/pt.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "",
   "editor.record.form.field.title": "",
+  "editor.record.form.field.title.placeholder": "Insira um título",
   "editor.record.form.field.uniqueIdentifier": "",
   "editor.record.form.field.updateFrequency": "",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "",
   "wfs.unreachable.http": "",
   "wfs.unreachable.unknown": ""
-}
+}
diff --git a/translations/sk.json b/translations/sk.json
@@ -242,6 +242,7 @@
   "editor.record.form.field.spatialExtents": "",
   "editor.record.form.field.temporalExtents": "",
   "editor.record.form.field.title": "",
+  "editor.record.form.field.title.placeholder": "Zadajte názov",
   "editor.record.form.field.uniqueIdentifier": "",
   "editor.record.form.field.updateFrequency": "",
   "editor.record.form.license.cc-by": "",
@@ -557,4 +558,4 @@
   "wfs.unreachable.cors": "Službu nemožno dosiahnuť z dôvodu obmedzení CORS",
   "wfs.unreachable.http": "Služba vrátila chybu HTTP",
   "wfs.unreachable.unknown": "So službou sa nedalo spojiť"
-}
+}