MORE-Platform#428: update componentDialog and correct some incorrect property previews

Author: iaigner

src/components/dialog/ComponentDialog.vue

@@ -76,6 +76,7 @@ Licensed under the Elastic License 2.0. */
 
   const title = ref(component.title);
   const purpose = ref(component.purpose);
+   const participantTitle = ref(component.participantTitle);
   const participantInfo = ref(component.participantInfo);
   const properties: Ref<Property<any>[]> = ref(
     factory.properties
@@ -255,7 +256,7 @@ Licensed under the Elastic License 2.0. */
       const returnComponent = {
         templateId: component.templateId,
         title: title.value,
-        purpose: purpose.value,
+        participantTitle: participantTitle.value,
         participantInfo: participantInfo.value,
         observationGroupIds: selectedObservationGroups.value?.length
           ? selectedObservationGroups.value.map((id: string) => parseInt(id))
@@ -475,7 +476,10 @@ Licensed under the Elastic License 2.0. */
         @remove-scheduler="removeScheduler"
       />
 
-      <div class="col-span-8 col-start-0">
+      <div
+        v-if="componentType === 'observation'"
+        class="col-span-8 col-start-0"
+      >
         <h5 class="mb-2">{{ $t('study.props.purpose') }}</h5>
         <Textarea
           v-model="purpose"
@@ -485,6 +489,23 @@ Licensed under the Elastic License 2.0. */
           :disabled="!editable"
         ></Textarea>
       </div>
+      <div
+        v-if="componentType === 'goalTemplate'"
+        class="col-span-8 mt-6 mb-3 h-[1px] w-full bg-gray-300"
+      />
+      <div v-if="componentType === 'goalTemplate'" class="col-span-8 col-start-0">
+        <h5 class="mb-2">{{ $t('study.props.participantTitle') }}*</h5>
+        <InputText
+          v-model="participantTitle"
+          type="text"
+          required
+          :placeholder="$t('study.placeholder.participantTitle', {
+            type: $t(`global.labels.${componentType}`),
+          })"
+          class="w-full"
+          :disabled="!editable"
+        ></InputText>
+      </div>
       <div class="col-span-8 col-start-0">
         <h5 :class="getError('participantInfo') ? 'mb-1' : 'mb-2'">
           {{ $t('study.props.participantInfo') }}*

src/components/dialog/shared/StringTemplatePropertyInput.vue

@@ -137,7 +137,14 @@
         {{ $t(property.name) }}
       </h6>
     </div>
-
+    <div
+      v-if="
+        property.description && property.description !== 'inputModel.enterValue'
+      "
+      class="text-xs text-gray-500"
+    >
+      {{ $t(property.description) }}
+    </div>
     <div v-if="isEditing" class="mb-4">
       <div
         class="relative mb-2 flex items-center justify-between rounded border border-gray-300 bg-gray-50 p-4"
@@ -197,14 +204,6 @@
         />
       </div>
     </div>
-    <div
-      v-if="
-        property.description && property.description !== 'inputModel.enterValue'
-      "
-      class="text-xs text-gray-500"
-    >
-      {{ $t(property.description) }}
-    </div>
   </div>
 </template>
 

src/i18n/de.json

@@ -134,7 +134,9 @@
       "leavePage": "Möchten Sie die Seite wirklich verlassen?",
       "dataHealth": "Datenqualität",
       "searchPlaceholder": "Suchen...",
-      "warning": "Warnung"
+      "warning": "Warnung",
+      "goalTemplate": "Ziel",
+      "observation": "Datenerhebung"
     },
     "placeholder": {
       "all": "Alle",
@@ -624,7 +626,7 @@
         "partOfTemplate": "Teil der Vorschau",
         "goal-preview": {
           "name": "Ziel Vorschau",
-          "description": "Das Ziel wird auf der App folgendermaßen angezeigt:",
+          "description": "Das Ziel wird auf der App folgendermaßen angezeigt",
           "partOfTemplate": "Teil der Vorschau"
         },
         "goal": {
@@ -1333,7 +1335,8 @@
       "participantInfoInput": "Stellen Sie Informationen für Ihre Studienteilnehmer:innen bereit. Dies Beschreibung wird den Teilnehmern:innen auf der App angezeigt.",
       "purposeInput": "Stellen Sie eine kurze Beschreibung Ihres Forschungszwecks für Ihre Studien-Mitarbeiter bereit.",
       "selectLanguage": "Sprache auswählen",
-      "titleInput": "Bitte geben Sie einen kurzen Titel ein."
+      "titleInput": "Bitte geben Sie einen kurzen Titel ein.",
+      "participantTitle": "Dieser Titel scheint als {type}-Titel für die Teilnehmer:innen auf der App auf."
     },
     "plural": "Studien",
     "props": {
@@ -1353,7 +1356,8 @@
       "groups": "Gruppen",
       "observationGroup": "Datenerhebungs-Gruppe {size}",
       "studyId": "Studien-ID",
-      "title": "Titel"
+      "title": "Titel",
+      "participantTitle": "App Titel"
     },
     "roles": {
       "admin": "Studien-Administrator",

src/i18n/en.json

@@ -134,7 +134,9 @@
       "leavePage": "Do you really want to leave the page?",
       "dataHealth": "Data health",
       "searchPlaceholder": "Search...",
-      "warning": "Warning"
+      "warning": "Warning",
+      "goalTemplate": "Goal",
+      "observation": "Observation"
     },
     "placeholder": {
       "all": "All",
@@ -1333,7 +1335,8 @@
       "participantInfoInput": "Please provide information for your studies participants. This description will be visible on the participant's app.",
       "purposeInput": "Please provide a short description of your research purpose for your collaborators.",
       "selectLanguage": "Select a language",
-      "titleInput": "Please provide a short title."
+      "titleInput": "Please provide a short title.",
+      "participantTitle": "This title is shown as {type}-title on the app."
     },
     "plural": "Studies",
     "props": {
@@ -1352,7 +1355,8 @@
       "studyGroup": "Study group {size}",
       "observationGroup": "Observation group {size}",
       "studyId": "Study ID",
-      "title": "Title"
+      "title": "Title",
+      "participantTitle": "App title"
     },
     "roles": {
       "admin": "Study Administrator",