PB-1327: Refactored 'DropdownItem' to translate the button title internally

src/modules/drawing/components/DrawingExporter.vue

@@ -1,28 +1,30 @@
 <script setup>
 import { saveAs } from 'file-saver'
 import { computed, inject, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
 import { generateGpxString, generateKmlString } from '@/modules/drawing/lib/export-utils'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { generateFilename } from '@/utils/utils'
 
-const exportOptions = [new DropdownItem('kml', 'KML'), new DropdownItem('gpx', 'GPX')]
+/** @type {DropdownItem[]} */
+const exportOptions = [
+    { id: 'kml', title: 'KML' },
+    { id: 'gpx', title: 'GPX' },
+]
 
 const drawingLayer = inject('drawingLayer')
 
-const exportSelection = ref('KML')
+const exportSelection = ref(exportOptions[0].title)
 
-const i18n = useI18n()
 const store = useStore()
 
 const projection = computed(() => store.state.position.projection)
 const isDrawingEmpty = computed(() => store.getters.isDrawingEmpty)
 const activeKmlLayer = computed(() => store.getters.activeKmlLayer)
 
 function onExportOptionSelected(dropdownItem) {
-    exportSelection.value = dropdownItem.value
+    exportSelection.value = dropdownItem.title
     exportDrawing()
 }
 function exportDrawing() {
@@ -47,13 +49,13 @@ function exportDrawing() {
 
 <template>
     <DropdownButton
-        :title="i18n.t('export_kml')"
+        title="export_kml"
         :current-value="exportSelection"
         :items="exportOptions"
         :disabled="isDrawingEmpty"
         with-toggle-button
         data-cy="drawing-toolbox-export-button"
-        @select:item="onExportOptionSelected"
+        @select-item="onExportOptionSelected"
         @click="exportDrawing()"
     />
 </template>

src/modules/i18n/index.js

@@ -55,6 +55,9 @@ const i18n = createI18n({
     messages: languages,
     legacy: false,
     datetimeFormats,
+    // no error if missing translation, just display the input untranslated.
+    missingWarn: false,
+    fallbackWarn: false,
 })
 
 export default i18n

src/modules/infobox/components/styling/DrawingStyleIconSelector.vue

@@ -14,7 +14,7 @@
                     :items="iconSetDropdownItems"
                     :current-value="currentIconSet"
                     data-cy="drawing-style-icon-set-button"
-                    @select:item="changeDisplayedIconSet"
+                    @select-item="changeDisplayedIconSet"
                 />
             </div>
         </div>
@@ -84,7 +84,7 @@ import EditableFeature from '@/api/features/EditableFeature.class'
 import { SUPPORTED_LANG } from '@/modules/i18n/index'
 import DrawingStyleColorSelector from '@/modules/infobox/components/styling/DrawingStyleColorSelector.vue'
 import DrawingStyleSizeSelector from '@/modules/infobox/components/styling/DrawingStyleSizeSelector.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import { MEDIUM } from '@/utils/featureStyleUtils'
 import log from '@/utils/logging'
@@ -142,16 +142,17 @@ export default {
                   })
                 : ''
         },
+        /** @returns {DropdownItem[]} */
         iconSetDropdownItems() {
             return this.iconSets.map((iconSet) => {
-                return new DropdownItem(
-                    iconSet.name,
-                    this.i18n.t(`modify_icon_category_${iconSet.name}_label`, 1, {
+                return {
+                    id: iconSet.name,
+                    title: this.i18n.t(`modify_icon_category_${iconSet.name}_label`, 1, {
                         locale: iconSet.language,
                     }),
-                    iconSet,
-                    `modify_icon_category_${iconSet.name}_label`
-                )
+                    value: iconSet,
+                    description: `modify_icon_category_${iconSet.name}_label`,
+                }
             })
         },
     },

src/modules/infobox/components/styling/DrawingStyleSizeSelector.vue

@@ -1,23 +1,27 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
 <template>
     <div>
         <label class="form-label" for="drawing-style-text-size-selector">
-            {{ $t('modify_text_size_label') }}
+            {{ t('modify_text_size_label') }}
         </label>
         <DropdownButton
             id="drawing-style-text-size-selector"
             data-cy="drawing-style-size-selector"
             :current-value="currentSize"
-            :title="$t(sizeLabel)"
+            :title="sizeLabel"
             :items="dropdownItems"
-            @select:item="onSizeSelect"
+            @select-item="onSizeSelect"
         />
     </div>
 </template>
 
 <script>
-import { useI18n } from 'vue-i18n'
-
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import { allStylingSizes, FeatureStyleSize } from '@/utils/featureStyleUtils'
 
 export default {
@@ -29,12 +33,6 @@ export default {
         },
     },
     emits: ['change'],
-    setup() {
-        const i18n = useI18n()
-        return {
-            i18n,
-        }
-    },
     data() {
         return {
             sizes: allStylingSizes,
@@ -47,9 +45,10 @@ export default {
             }
             return this.currentSize.label
         },
+        /** @returns {DropdownItem[]} */
         dropdownItems() {
             return this.sizes.map((size) => {
-                return new DropdownItem(size.label, this.i18n.t(size.label), size)
+                return { id: size.label, title: size.label, value: size }
             })
         },
     },

src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue

@@ -13,7 +13,7 @@ import AbstractLayer from '@/api/layers/AbstractLayer.class'
 import KMLLayer from '@/api/layers/KMLLayer.class'
 import { allKmlStyles } from '@/api/layers/KmlStyles.enum'
 import MenuActiveLayersListItemTimeSelector from '@/modules/menu/components/activeLayers/MenuActiveLayersListItemTimeSelector.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import ErrorButton from '@/utils/components/ErrorButton.vue'
 import TextTruncate from '@/utils/components/TextTruncate.vue'
 import ThirdPartyDisclaimer from '@/utils/components/ThirdPartyDisclaimer.vue'
@@ -70,8 +70,9 @@ const transparencySlider = ref(null)
 const currentKmlStyle = ref(layer.value?.style ?? null)
 const id = computed(() => layer.value.id)
 
+/** @type {ComputedRef<DropdownItem[]>} */
 const kmlStylesAsDropdownItems = computed(() =>
-    allKmlStyles.map((style) => new DropdownItem(style, style.toLowerCase(), style))
+    allKmlStyles.map((style) => ({ id: style, title: style.toLowerCase(), value: style }))
 )
 
 const isLocalFile = computed(() => store.getters.isLocalFile(layer.value))
@@ -338,7 +339,7 @@ function changeStyle(newStyle) {
                         :items="kmlStylesAsDropdownItems"
                         :current-value="currentKmlStyle"
                         small
-                        @select:item="changeStyle"
+                        @select-item="changeStyle"
                     />
                 </div>
             </div>

src/modules/menu/components/help/ReportProblemButton.vue

@@ -8,7 +8,7 @@ import { createShortLink } from '@/api/shortlink.api'
 import { FEEDBACK_EMAIL_SUBJECT } from '@/config/feedback.config'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
-import DropdownButton, { DropdownItem } from '@/utils/components/DropdownButton.vue'
+import DropdownButton from '@/utils/components/DropdownButton.vue'
 import EmailInput from '@/utils/components/EmailInput.vue'
 import FileInput from '@/utils/components/FileInput.vue'
 import SimpleWindow from '@/utils/components/SimpleWindow.vue'
@@ -22,27 +22,28 @@ const acceptedFileTypes = ['.kml', '.gpx', '.pdf', '.zip', '.jpg', '.jpeg', '.km
 
 const i18n = useI18n()
 const store = useStore()
+/** @type {DropdownItem[]} */
 const feedbackCategories = [
-    new DropdownItem(
-        'feedback_category_background_map',
-        i18n.t('feedback_category_background_map'),
-        'feedback_category_background_map'
-    ),
-    new DropdownItem(
-        'feedback_category_thematic_map',
-        i18n.t('feedback_category_thematic_map'),
-        'feedback_category_thematic_map'
-    ),
-    new DropdownItem(
-        'feedback_category_application_service',
-        i18n.t('feedback_category_application_service'),
-        'feedback_category_application_service'
-    ),
-    new DropdownItem(
-        'feedback_category_other',
-        i18n.t('feedback_category_other'),
-        'feedback_category_other'
-    ),
+    {
+        id: 'background_map',
+        title: 'feedback_category_background_map',
+        value: 'background_map',
+    },
+    {
+        id: 'thematic_map',
+        title: 'feedback_category_thematic_map',
+        value: 'thematic_map',
+    },
+    {
+        id: 'application_service',
+        title: 'feedback_category_application_service',
+        value: 'application_service',
+    },
+    {
+        id: 'other',
+        title: 'feedback_category_other',
+        value: 'other',
+    },
 ]
 
 const props = defineProps({
@@ -149,6 +150,7 @@ async function sendReportProblem() {
 function closeAndCleanForm() {
     activateValidation.value = false
     showReportProblemForm.value = false
+    feedback.value.category = null
     feedback.value.message = null
     feedback.value.email = null
     feedback.value.file = null
@@ -220,28 +222,26 @@ function selectItem(dropdownItem) {
         :hide="showDrawingOverlay"
         initial-position="top-right"
         movable
+        data-cy="report-problem-window"
         @close="closeAndCleanForm"
     >
         <div v-if="!request.completed" class="report-problem" data-cy="report-problem-form">
             <div class="mb-2 fw-bold">
                 {{ i18n.t('feedback_category') }}
             </div>
-            <div
+            <DropdownButton
+                label="feedback_description"
+                :title="feedback.category ?? 'select_category'"
+                :current-value="feedback.category"
+                :items="feedbackCategories"
+                data-cy="report-problem-category"
                 class="my-2"
                 :class="{
                     'is-valid': feedback.category,
                     'is-invalid': !feedback.category && activateValidation,
                 }"
-                data-cy="report-feedback-category-dropdown"
-            >
-                <DropdownButton
-                    label="feedback_description"
-                    :title="i18n.t(feedback.category ?? 'select_category')"
-                    :current-value="feedback.category"
-                    :items="feedbackCategories"
-                    @select:item="selectItem"
-                />
-            </div>
+                @select-item="selectItem"
+            />
             <div class="invalid-feedback" data-cy="text-area-input-invalid-feedback">
                 {{ i18n.t('category_not_selected_warning') }}
             </div>
@@ -253,7 +253,7 @@ function selectItem(dropdownItem) {
                     label="feedback_description"
                     :disabled="request.pending"
                     required
-                    data-cy="report-problem"
+                    data-cy="report-problem-text-area"
                     :activate-validation="activateValidation"
                     invalid-message="feedback_empty_warning"
                     @validate="onTextValidate"
@@ -292,7 +292,7 @@ function selectItem(dropdownItem) {
                     :disabled="request.pending"
                     :description="'no_email_feedback'"
                     :activate-validation="activateValidation"
-                    data-cy="report-problem"
+                    data-cy="report-problem-email"
                     @validate="onEmailValidate"
                 />
             </div>
@@ -306,7 +306,7 @@ function selectItem(dropdownItem) {
                     :activate-validation="activateValidation"
                     :disabled="request.pending"
                     :max-file-size="ATTACHMENT_MAX_SIZE"
-                    data-cy="report-problem"
+                    data-cy="report-problem-file"
                     @validate="onAttachmentValidate"
                 />
             </div>