- CHG: Unification of trait headings.

- ADD: Added trait image to all trait headings. - ADD: Added a 'grid' vs 'list' selector to trial creation. - CHG: Removed the 'column' section from trial setup if 'list' type is selected. -
cropgeeks · Nov 11, 2024 · a6fbfc0 · a6fbfc0
1 parent c89b842
commit a6fbfc0
Show file tree

Hide file tree

Showing 11 changed files with 191 additions and 105 deletions.
diff --git a/src/components/TraitHeading.vue b/src/components/TraitHeading.vue
@@ -2,14 +2,40 @@
   <span :style="{ color: trait.color }">
     <TraitIcon :trait="trait" />
     <span class="mx-1">{{ trait.name }}</span>
-    <b-badge variant="light">{{ traitTypeText }}</b-badge>
-    <IBiCardText class="text-muted ms-1" v-b-tooltip="trait.description" v-if="trait.description" />
+    <b-badge class="mx-1" variant="light">{{ traitTypeText }}</b-badge>
+    <IBiCardText class="text-muted mx-1" v-b-tooltip="trait.description" v-if="showDescription && trait.description" />
+    <BPopover
+      v-if="trait.hasImage && traitImageConfig.priorityShareCode && traitImageConfig.serverUrl"
+      custom-class="trait-image"
+      :click="true"
+      :close-on-hide="true"
+      ref="traitImagePopover"
+    >
+      <b-img @click="$refs.traitImageModal.show()" fluid-grow :src="`${traitImageConfig.serverUrl}trait/${traitImageConfig.priorityShareCode}/${trait.id}/img`" crossorigin="anonymous" />
+      <template #target>
+        <b-badge class="mx-1" variant="light">
+          <IBiImage />
+        </b-badge>
+      </template>
+    </BPopover>
+
+    <b-modal
+      v-if="trait.hasImage"
+      ref="traitImageModal"
+      :fullscreen="true"
+      hide-footer
+      hide-header
+      no-fade
+      @show="$refs.traitImagePopover.hide()">
+      <b-img fluid-grow class="fullscreen-image" @click="$refs.traitImageModal.hide()" :src="`${traitImageConfig.serverUrl}trait/${traitImageConfig.priorityShareCode}/${trait.id}/img`" crossorigin="anonymous" />
+    </b-modal>
   </span>
 </template>
 
 <script>
 import TraitIcon from '@/components/icons/TraitIcon.vue'
-import { getTraitTypeText } from '@/plugins/misc'
+import { getTrialCached } from '@/plugins/datastore';
+import { getPriorityShareCode, getServerUrl, getTraitTypeText } from '@/plugins/misc'
 
 export default {
   components: {
@@ -27,9 +53,30 @@ export default {
     short: {
       type: Boolean,
       default: false
+    },
+    showDescription: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
+    traitImageConfig: function () {
+      const trial = getTrialCached()
+
+      if (trial) {
+        return {
+          serverUrl: getServerUrl(trial),
+          priorityShareCode: getPriorityShareCode(trial)
+        }
+      }
+    },
+    priorityShareCode: function () {
+      if (this.trial && this.trial.shareStatus !== TRIAL_STATE_NOT_SHARED) {
+        return this.trial.shareCodes.ownerCode || this.trial.shareCodes.editorCode || this.trial.shareCodes.viewerCode
+      } else {
+        return null
+      }
+    },
     traitTypeText: function () {
       if (this.trait) {
         return getTraitTypeText(this.trait, this.short)
@@ -42,5 +89,17 @@ export default {
 </script>
 
 <style>
+.trait-image {
+  max-width: 100vw;
+  max-height: 100vh;
+  height: auto;
+}
 
+@media (min-width: 992px) {
+  .trait-image {
+    max-width: 50vw;
+    max-height: 50vh;
+    height: auto;
+  }
+}
 </style>
diff --git a/src/components/TraitInputSection.vue b/src/components/TraitInputSection.vue
@@ -4,34 +4,14 @@
 
     <h4 class="d-flex justify-content-between align-items-center">
       <span class="d-flex align-items-center flex-wrap">
-        <span :style="{ color: trait.color }" class="trait-name">
-          <TraitIcon :trait="trait" />
-          <span class="mx-1">{{ trait.name }}</span>
-        </span>
-        <span>
-          <b-badge class="mx-1 trait-data-type" variant="light">{{ getTraitTypeText(trait, true) }}</b-badge>
-          <b-badge class="mx-1 trait-allow-repeats" variant="light" v-b-tooltip="$t(trait.allowRepeats ? 'tooltipTraitAllowRepeatsTrue' : 'tooltipTraitAllowRepeatsFalse')">
-            <IBiRepeat v-if="trait.allowRepeats" />
-            <IBiRepeat1 v-else />
-          </b-badge>
-          <b-badge class="mx-1 trait-set-size" variant="light" v-b-tooltip="$t('tooltipTraitSetSize')">
-            <IBiSegmentedNav :style="{ transform: 'rotate(90deg)' }" /> {{ $n(trait.setSize || 1) }}
-          </b-badge>
-          <BPopover
-            v-if="trait.hasImage && priorityShareCode && serverUrl"
-            custom-class="trait-image"
-            @shown="addLightbox"
-            :click="true"
-            :close-on-hide="true"
-          >
-            <b-img @click="$refs.traitImageModal.show()" fluid-grow :src="`${serverUrl}trait/${priorityShareCode}/${trait.id}/img`" crossorigin="anonymous" />
-            <template #target>
-              <b-badge class="mx-1" variant="light">
-                <IBiImage />
-              </b-badge>
-            </template>
-          </BPopover>
-        </span>
+        <TraitHeading :trait="trait" :showDescription="false" />
+        <b-badge class="mx-1 trait-allow-repeats" variant="light" v-b-tooltip="$t(trait.allowRepeats ? 'tooltipTraitAllowRepeatsTrue' : 'tooltipTraitAllowRepeatsFalse')">
+          <IBiRepeat v-if="trait.allowRepeats" />
+          <IBiRepeat1 v-else />
+        </b-badge>
+        <b-badge class="mx-1 trait-set-size" variant="light" v-b-tooltip="$t('tooltipTraitSetSize')">
+          <IBiSegmentedNav :style="{ transform: 'rotate(90deg)' }" /> {{ $n(trait.setSize || 1) }}
+        </b-badge>
       </span>
       <b-button-group>
         <b-button @click="showHistoryModal" v-b-tooltip="$t('tooltipViewTraitDataHistory')" :disabled="!hasHistoricData" class="trait-history"><IBiClockHistory /></b-button>
@@ -57,16 +37,6 @@
     </b-form-group>
 
     <TraitDataHistoryModal @data-changed="$emit('data-changed')" :editable="editable" :cell="{ row: cell.row, column: cell.column, displayName: cell.displayName }" :trial="trial" :trait="trait" :measurements="cellTraitMeasurements" ref="traitDataHistoryModal" v-if="hasHistoricData && cellTraitMeasurements" @hidden="cellTraitMeasurements = null" />
-
-    <b-modal
-      v-if="trait.hasImage"
-      ref="traitImageModal"
-      :fullscreen="true"
-      hide-footer
-      hide-header
-      no-fade>
-      <b-img fluid-grow class="fullscreen-image" @click="$refs.traitImageModal.hide()" :src="`${serverUrl}trait/${priorityShareCode}/${trait.id}/img`" crossorigin="anonymous" />
-    </b-modal>
   </section>
 </template>
 
@@ -76,6 +46,7 @@ import { coreStore } from '@/store'
 
 import TraitIcon from '@/components/icons/TraitIcon.vue'
 import TraitInput from '@/components/TraitInput.vue'
+import TraitHeading from '@/components/TraitHeading.vue'
 import TraitDataHistoryModal from '@/components/modals/TraitDataHistoryModal.vue'
 
 import { getTraitTypeText } from '@/plugins/misc'
@@ -120,29 +91,6 @@ export default {
       'storeShowFullTraitDescription',
       'storeServerUrl'
     ]),
-    serverUrl: function () {
-      if (this.trial) {
-        let baseUrl = this.trial.remoteUrl || this.storeServerUrl
-
-        if (!baseUrl.endsWith('/')) {
-          baseUrl += '/'
-        }
-        if (!baseUrl.endsWith('api/')) {
-          baseUrl += 'api/'
-        }
-
-        return baseUrl
-      } else {
-        return null
-      }
-    },
-    priorityShareCode: function () {
-      if (this.trial && this.trial.shareStatus !== TRIAL_STATE_NOT_SHARED) {
-        return this.trial.shareCodes.ownerCode || this.trial.shareCodes.editorCode || this.trial.shareCodes.viewerCode
-      } else {
-        return null
-      }
-    },
     hasHistoricData: function () {
       // Check if there's at least one measurement for the trait id
       return this.cell && this.trait && this.cell.measurements && this.cell.measurements[this.trait.id] && this.cell.measurements[this.trait.id].length > 0

diff --git a/src/components/TrialLayoutComponent.vue b/src/components/TrialLayoutComponent.vue
@@ -12,8 +12,6 @@
 
         <b-container>
           <TrialLayoutDimensionComponent :layout="layout" v-if="layout" ref="trialLayoutDimensionComponent" @layout-changed="updateLayout" />
-
-          <div class="border border-warning text-center my-3 p-2"><IBiExclamationTriangleFill class="text-warning" /> {{ $t('pageTrialLayoutDimensionsFielDHubNotice') }}</div>
         </b-container>
       </b-tab>
       <b-tab :disabled="!hasDimensions">

diff --git a/src/components/TrialLayoutDimensionComponent.vue b/src/components/TrialLayoutDimensionComponent.vue
@@ -1,7 +1,30 @@
 <template>
   <div v-if="internal">
-    <p>{{ $t('pageTrialLayoutDimensionsText') }}</p>
     <b-row>
+      <b-col :cols=12 :md=6 class="mb-3">
+        <b-button :variant="layoutType === 'grid' ? 'primary' : 'outline-dark'" class="w-100 d-flex flex-column align-items-center" @click="setLayoutType('grid')">
+          <h1>
+            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-grid-3x3" viewBox="0 0 16 16">
+              <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5zM1.5 1a.5.5 0 0 0-.5.5V5h4V1zM5 6H1v4h4zm1 4h4V6H6zm-1 1H1v3.5a.5.5 0 0 0 .5.5H5zm1 0v4h4v-4zm5 0v4h3.5a.5.5 0 0 0 .5-.5V11zm0-1h4V6h-4zm0-5h4V1.5a.5.5 0 0 0-.5-.5H11zm-1 0V1H6v4z"/>
+            </svg>
+          </h1>
+          <span>{{ $t('pageTrialLayoutDimensionsGrid') }}</span>
+        </b-button>
+      </b-col>
+
+      <b-col :cols=12 :md=6 class="mb-3">
+        <b-button :variant="layoutType === 'list' ? 'primary' : 'outline-dark'" class="w-100 d-flex flex-column align-items-center" @click="setLayoutType('list')">
+          <h1>
+            <IBiLayoutThreeColumns :style="{ transform: 'rotate(-90deg)' }" />
+          </h1>
+          <span>{{ $t('pageTrialLayoutDimensionsList') }}</span>
+        </b-button>
+      </b-col>
+
+      <b-col cols=12>
+        <p>{{ $t(layoutType === 'grid' ? 'pageTrialLayoutDimensionsTextGrid' : 'pageTrialLayoutDimensionsTextList') }}</p>
+      </b-col>
+
       <b-col cols=12 md=6>
         <!-- Field layout rows -->
         <b-form-group label-for="rows" :description="$t('formLabelDescriptionRows')" >
@@ -34,37 +57,41 @@
         </b-collapse>
       </b-col>
       <b-col cols=12 md=6>
-        <!-- Field layout cols -->
-        <b-form-group label-for="columns" :description="$t('formLabelDescriptionColumns')">
-          <template v-slot:label>
-            <IBiLayoutThreeColumns /> <span>{{ $t('formLabelSetupColumns') }}</span>
-          </template>
-          <b-form-input :disabled="!editValuesAllowed" id="columns" type="number" :min="1" required lazy v-model.number.lazy="internal.columns" />
-        </b-form-group>
+        <div v-if="layoutType === 'grid'">
+          <!-- Field layout cols -->
+          <b-form-group label-for="columns" :description="$t('formLabelDescriptionColumns')">
+            <template v-slot:label>
+              <IBiLayoutThreeColumns /> <span>{{ $t('formLabelSetupColumns') }}</span>
+            </template>
+            <b-form-input :disabled="!editValuesAllowed" id="columns" type="number" :min="1" required lazy v-model.number.lazy="internal.columns" />
+          </b-form-group>
 
-        <b-form-group :label="$t('formLabelSettingsColumnOrder')" :description="$t('formDescriptionSettingsColumnOrder')" label-for="columnOrder">
-          <b-button-group class="w-100">
-            <b-button variant="outline-secondary" :pressed="internal.columnOrder === DISPLAY_ORDER_LEFT_TO_RIGHT" @click="toggleColumnOrder(DISPLAY_ORDER_LEFT_TO_RIGHT)"><IBiSortNumericDown :style="{ transform: 'rotate(270deg)' }" /> {{ $t('buttonLeftToRight') }}</b-button>
-            <b-button variant="outline-secondary" :pressed="internal.columnOrder === DISPLAY_ORDER_RIGHT_TO_LEFT" @click="toggleColumnOrder(DISPLAY_ORDER_RIGHT_TO_LEFT)"><IBiSortNumericUpAlt :style="{ transform: 'rotate(270deg)' }" /> {{ $t('buttonRightToLeft') }}</b-button>
-          </b-button-group>
-        </b-form-group>
+          <b-form-group :label="$t('formLabelSettingsColumnOrder')" :description="$t('formDescriptionSettingsColumnOrder')" label-for="columnOrder">
+            <b-button-group class="w-100">
+              <b-button variant="outline-secondary" :pressed="internal.columnOrder === DISPLAY_ORDER_LEFT_TO_RIGHT" @click="toggleColumnOrder(DISPLAY_ORDER_LEFT_TO_RIGHT)"><IBiSortNumericDown :style="{ transform: 'rotate(270deg)' }" /> {{ $t('buttonLeftToRight') }}</b-button>
+              <b-button variant="outline-secondary" :pressed="internal.columnOrder === DISPLAY_ORDER_RIGHT_TO_LEFT" @click="toggleColumnOrder(DISPLAY_ORDER_RIGHT_TO_LEFT)"><IBiSortNumericUpAlt :style="{ transform: 'rotate(270deg)' }" /> {{ $t('buttonRightToLeft') }}</b-button>
+            </b-button-group>
+          </b-form-group>
 
-        <b-form-checkbox switch v-model="showColumnLabels"> {{ $t('buttonShowLabels') }}</b-form-checkbox>
+          <b-form-checkbox switch v-model="showColumnLabels"> {{ $t('buttonShowLabels') }}</b-form-checkbox>
 
-        <b-collapse v-model="showColumnLabels">
-          <b-form-checkbox switch v-model="editColumnLabels" v-if="editLabelsAllowed"> {{ $t('buttonEditLabels') }}</b-form-checkbox>
-          <draggable :list="internal.columnLabels" :item-key="e => e" tag="div" handle=".drag-handle" class="d-flex flex-row flex-wrap">
-            <template #item="{ element, index }">
-              <b-badge class="flex-fill border" :key="`column-label-${element}`">
-                <input v-if="editColumnLabels" :style="{ width: (`${internal.columnLabels[index]}`.length + 2) + 'em' }" class="form-control d-inline lh-1 p-1" required trim type="number" v-model.number.lazy.trim="internal.columnLabels[index]" />
-                <span v-else>{{ element }}</span>
-                <IBiGripVertical class="drag-handle ms-2" />
-              </b-badge>
-            </template>
-          </draggable>
-        </b-collapse>
+          <b-collapse v-model="showColumnLabels">
+            <b-form-checkbox switch v-model="editColumnLabels" v-if="editLabelsAllowed"> {{ $t('buttonEditLabels') }}</b-form-checkbox>
+            <draggable :list="internal.columnLabels" :item-key="e => e" tag="div" handle=".drag-handle" class="d-flex flex-row flex-wrap">
+              <template #item="{ element, index }">
+                <b-badge class="flex-fill border" :key="`column-label-${element}`">
+                  <input v-if="editColumnLabels" :style="{ width: (`${internal.columnLabels[index]}`.length + 2) + 'em' }" class="form-control d-inline lh-1 p-1" required trim type="number" v-model.number.lazy.trim="internal.columnLabels[index]" />
+                  <span v-else>{{ element }}</span>
+                  <IBiGripVertical class="drag-handle ms-2" />
+                </b-badge>
+              </template>
+            </draggable>
+          </b-collapse>
+        </div>
       </b-col>
     </b-row>
+
+    <div v-if="layoutType === 'grid'" class="border border-warning text-center my-3 p-2"><IBiExclamationTriangleFill class="text-warning" /> {{ $t('pageTrialLayoutDimensionsFielDHubNotice') }}</div>
   </div>
 </template>
 
@@ -129,10 +156,20 @@ export default {
       showRowLabels: false,
       showColumnLabels: false,
       editRowLabels: false,
-      editColumnLabels: false
+      editColumnLabels: false,
+      layoutType: 'grid'
     }
   },
   methods: {
+    setLayoutType: function (type) {
+      this.layoutType = type
+
+      if (type === 'list') {
+        this.internal.columns = 1
+        this.internal.columnOrder = DISPLAY_ORDER_LEFT_TO_RIGHT
+        this.showColumnLabels = false
+      }
+    },
     toggleRowOrder: function (order) {
       this.internal.rowOrder = order
       this.internal.rowLabels = this.internal.rowLabels.concat().reverse()
@@ -143,6 +180,10 @@ export default {
     },
     forceUpdate: function () {
       this.internal = JSON.parse(JSON.stringify(this.layout))
+
+      if (this.internal.rows > 1 && this.internal.columns === 1) {
+        this.layoutType = 'list'
+      }
     }
   },
   mounted: function () {

diff --git a/src/components/modals/TrialModificationModal.vue b/src/components/modals/TrialModificationModal.vue
@@ -95,11 +95,7 @@
               <b-col class="mb-3" cols=12 md=6 v-for="trait in traits" :key="`trait-section-${trait.id}`">
                 <h4 class="d-flex justify-content-between align-items-center">
                   <span :style="{ color: trait.color }">
-                    <TraitIcon :trait="trait" />
-                    <span class="mx-1">{{ trait.name }}</span>
-                    <b-badge class="mx-1" variant="light" v-if="trait.hasImage">
-                      <IBiImage />
-                    </b-badge>
+                    <TraitHeading :trait="trait" />
                   </span>
                   <b-button-group>
                     <span class="d-inline-block" tabindex="0" v-b-tooltip:hover="canUploadTraitImage ? '' : $t('tooltipTraitImageUploadTrialNotShare')">
@@ -170,7 +166,7 @@ import UploadTraitImageModal from '@/components/modals/UploadTraitImageModal.vue
 import TrialLayoutCorners from '@/components/TrialLayoutCorners.vue'
 import MarkerSetup from '@/components/MarkerSetup.vue'
 import LayoutFeedbackModal from '@/components/modals/LayoutFeedbackModal.vue'
-import TraitIcon from '@/components/icons/TraitIcon.vue'
+import TraitHeading from '@/components/TraitHeading.vue'
 import { isGeographyValid, isGeographyAllNull } from '@/plugins/location'
 import { updateTrialProperties, getTrialGroups } from '@/plugins/idb'
 
@@ -186,7 +182,7 @@ export default {
     LayoutFeedbackModal,
     MarkerSetup,
     TrialLayoutCorners,
-    TraitIcon
+    TraitHeading
   },
   data: function () {
     return {

diff --git a/src/plugins/changelog/de_DE.json b/src/plugins/changelog/de_DE.json
@@ -584,6 +584,11 @@
         "type": "bugfix",
         "title": "Führende/anhängende Leerzeichen",
         "text": "Behebt einen Fehler bei dem führende oder angängende Leerzeichen in Eingabefeldern automatisch entfernt werden."
+      },
+      {
+        "type": "bugfix",
+        "title": "Sprachwechsler",
+        "text": "Behebt einen Fehler beim Wechseln der Sprache. GridScore behält jetzt wieder die ausgewählte Sprache zwischen Sitzungen."
       }
     ]
   }

diff --git a/src/plugins/changelog/en_GB.json b/src/plugins/changelog/en_GB.json
@@ -584,6 +584,11 @@
         "type": "bugfix",
         "title": "Leading/trailing spaces",
         "text": "Fixed issues with the automatic removal of leading and trailing spaces in input fields."
+      },
+      {
+        "type": "bugfix",
+        "title": "Language switching",
+        "text": "Fixed persistence of language switching. GridScore will now remember your language selection between sessions again."
       }
     ]
   }