PB-2027: fix drawing marker/text test

packages/viewer/src/api/icon.api.ts

@@ -3,12 +3,7 @@ import axios from 'axios'
 import { fromString } from 'ol/color'
 
 import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
-import {
-    type FeatureStyleColor,
-    type FeatureStyleSize,
-    LARGE,
-    RED,
-} from '@/utils/featureStyleUtils'
+import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
 
 /**
  * Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
  *
  * @returns A full URL to this icon on the service-icons backend
  */
-export function generateIconURL(
-    icon: DrawingIcon,
-    iconColor: FeatureStyleColor = RED,
-    iconSize: FeatureStyleSize = LARGE
-) {
+export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
     const rgb = fromString(iconColor.fill)
-    return icon.imageTemplateURL
-        .replace('{icon_set_name}', icon.iconSetName)
-        .replace('{icon_name}', icon.name)
-        .replace('{icon_scale}', iconSize.iconScale + 'x')
-        .replace('{r}', `${rgb[0]}`)
-        .replace('{g}', `${rgb[1]}`)
-        .replace('{b}', `${rgb[2]}`)
+    return (
+        icon.imageTemplateURL
+            .replace('{icon_set_name}', icon.iconSetName)
+            .replace('{icon_name}', icon.name)
+            // we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
+            .replace('{icon_scale}', LARGE.iconScale + 'x')
+            .replace('{r}', `${rgb[0]}`)
+            .replace('{g}', `${rgb[1]}`)
+            .replace('{b}', `${rgb[2]}`)
+    )
 }
 
 /**

packages/viewer/src/modules/infobox/components/styling/DrawingStyleMediaLink.vue

@@ -2,8 +2,10 @@
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import { MediaType } from '@/modules/infobox/DrawingStyleMediaTypes.enum'
-import TextInput, { type TextInputValidateResult } from '@/utils/components/TextInput.vue'
+import TextInput from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const { mediaType, urlLabel, descriptionLabel } = defineProps<{
@@ -17,8 +19,8 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
-const generatedMediaLink = ref<string | undefined>(undefined)
-const linkDescription = ref<string | undefined>(undefined)
+const generatedMediaLink = ref<string>()
+const linkDescription = ref<string>()
 const isFormValid = ref<boolean>(false)
 const activateValidation = ref<boolean>(false)
 
@@ -87,7 +89,7 @@ function validateForm(): boolean {
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult): void {
+function onUrlValidate(result: ValidationResult): void {
     isFormValid.value = result.valid
 }
 </script>
@@ -117,14 +119,14 @@ function onUrlValidate(result: TextInputValidateResult): void {
                 placeholder="paste_url"
                 :validate="validateUrl"
                 data-cy="drawing-style-media-url"
-                @keydown.enter="addLink()"
+                @keydown.enter="addLink"
                 @validate="onUrlValidate"
             >
                 <button
                     class="btn btn-default btn-outline-group rounded-0 rounded-end"
                     type="button"
                     data-cy="drawing-style-media-generate-button"
-                    @click="addLink()"
+                    @click="addLink"
                 >
                     {{ t('add') }}
                 </button>

packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileLocalTab.vue

@@ -4,6 +4,8 @@ import type { ErrorMessage } from '@swissgeo/log/Message'
 import log from '@swissgeo/log'
 import { computed, ref } from 'vue'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
@@ -17,12 +19,12 @@ const { active = false } = defineProps<{
     active?: boolean
 }>()
 
+const selectedFile = defineModel<File | undefined>({ default: undefined })
+
 // Reactive data
 const loadingFile = ref(false)
-const selectedFile = ref<File | undefined>()
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref(false)
-const activateValidation = ref(false)
 const importSuccessMessage = ref('')
 
 const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
@@ -31,7 +33,6 @@ const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
 async function loadFile() {
     importSuccessMessage.value = ''
     errorFileLoadingMessage.value = undefined
-    activateValidation.value = true
     loadingFile.value = true
 
     if (isFormValid.value && selectedFile.value) {
@@ -52,8 +53,8 @@ async function loadFile() {
     loadingFile.value = false
 }
 
-function validateForm(valid: boolean) {
-    isFormValid.value = valid
+function validateForm(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 </script>
 
@@ -74,8 +75,7 @@ function validateForm(valid: boolean) {
             required
             :accepted-file-types="acceptedFileTypes"
             :placeholder="'no_file'"
-            :activate-validation="activateValidation"
-            :invalid-marker="!!errorFileLoadingMessage"
+            :force-invalid="!!errorFileLoadingMessage"
             :invalid-message="errorFileLoadingMessage?.msg"
             :invalid-message-extra-params="errorFileLoadingMessage?.params"
             :valid-message="importSuccessMessage"

packages/viewer/src/modules/menu/components/advancedTools/ImportFile/ImportFileOnlineTab.vue

@@ -4,15 +4,13 @@ import { ErrorMessage, WarningMessage } from '@swissgeo/log/Message'
 import { type ComponentPublicInstance, computed, onMounted, ref, useTemplateRef, watch } from 'vue'
 
 import type { ActionDispatcher } from '@/store/types'
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
 
 import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
 import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
 import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
 import useUIStore from '@/store/modules/ui'
-import TextInput, {
-    type TextInputExposed,
-    type TextInputValidateResult,
-} from '@/utils/components/TextInput.vue'
+import TextInput, { type TextInputExposed } from '@/utils/components/TextInput.vue'
 import { isValidUrl } from '@/utils/utils'
 
 const dispatcher: ActionDispatcher = {
@@ -27,14 +25,14 @@ const uiStore = useUIStore()
 
 const { handleFileSource } = useImportFile()
 
-// Reactive data
+const fileUrl = defineModel<string>({ default: '' })
+
 const isLoading = ref<boolean>(false)
-const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
-const fileUrl = ref<string>('')
 const importSuccessMessage = ref<string>('')
 const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
 const isFormValid = ref<boolean>(false)
-const activateValidation = ref<boolean>(false)
+
+const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
 
 const buttonState = computed<'loading' | 'default'>(() => (isLoading.value ? 'loading' : 'default'))
 
@@ -54,9 +52,7 @@ onMounted(() => {
     }
 })
 
-// Methods
-
-function validateUrl(url?: string): TextInputValidateResult {
+function validateUrl(url?: string): ValidationResult {
     if (!url) {
         return { valid: false, invalidMessage: 'no_url' }
     } else if (!isValidUrl(url)) {
@@ -66,12 +62,11 @@ function validateUrl(url?: string): TextInputValidateResult {
 }
 
 function validateForm() {
-    activateValidation.value = true
     return isFormValid.value
 }
 
-function onUrlValidate(result: TextInputValidateResult) {
-    isFormValid.value = result.valid
+function onUrlValidate(validation: ValidationResult) {
+    isFormValid.value = validation.valid
 }
 
 function onUrlChange() {
@@ -132,8 +127,7 @@ async function loadFile() {
                 required
                 class="mb-2"
                 placeholder="import_file_url_placeholder"
-                :activate-validation="activateValidation"
-                :invalid-marker="!!errorFileLoadingMessage"
+                :force-invalid="!!errorFileLoadingMessage"
                 :invalid-message="errorFileLoadingMessage?.msg"
                 :invalid-message-params="errorFileLoadingMessage?.params"
                 :valid-message="importSuccessMessage"

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

@@ -6,6 +6,7 @@ import { computed, type ComputedRef, nextTick, ref, useTemplateRef, watch } from
 import { useI18n } from 'vue-i18n'
 
 import type { ActionDispatcher } from '@/store/types'
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
 
 import sendFeedback, { ATTACHMENT_MAX_SIZE, KML_MAX_SIZE } from '@/api/feedback.api'
 import { getKmlUrl } from '@/api/files.api'
@@ -84,7 +85,7 @@ const request = ref({
     completed: false,
 })
 const shortLink = ref('')
-const activateValidation = ref(false)
+const userHasTriedToSubmit = ref(false)
 const isMessageValid = ref(false)
 // by default attachment and email are valid as they are optional
 const isAttachmentValid = ref(true)
@@ -118,15 +119,10 @@ watch(
     { deep: true }
 )
 
-// Methods
-
-function validate() {
-    activateValidation.value = true
-    return isFormValid.value
-}
-
 async function sendReportProblem() {
-    if (!validate() && validationResult.value) {
+    userHasTriedToSubmit.value = true
+
+    if (!isFormValid.value && validationResult.value) {
         // scrolling down to make sure the message with validation result is visible to the user
         validationResult.value.scrollIntoView()
         return
@@ -168,7 +164,6 @@ async function sendReportProblem() {
 }
 
 function closeAndCleanForm() {
-    activateValidation.value = false
     showReportProblemForm.value = false
 
     // reset the state
@@ -183,16 +178,16 @@ function closeAndCleanForm() {
     }
 }
 
-function onTextValidate(valid: boolean) {
-    isMessageValid.value = valid
+function onTextValidate(validation: ValidationResult) {
+    isMessageValid.value = validation.valid
 }
 
-function onAttachmentValidate(valid: boolean) {
-    isAttachmentValid.value = valid
+function onAttachmentValidate(validation: ValidationResult) {
+    isAttachmentValid.value = validation.valid
 }
 
-function onEmailValidate(valid: boolean) {
-    isEmailValid.value = valid
+function onEmailValidate(validation: ValidationResult) {
+    isEmailValid.value = validation.valid
 }
 
 async function generateShortLink() {
@@ -282,7 +277,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                 class="my-2"
                 :class="{
                     'is-valid': feedback.category,
-                    'is-invalid': !feedback.category && activateValidation,
+                    'is-invalid': !feedback.category && userHasTriedToSubmit,
                 }"
                 @selectItem="selectItem"
             />
@@ -308,7 +303,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     :disabled="request.pending"
                     required
                     data-cy="report-problem-text-area"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     invalid-message="feedback_empty_warning"
                     @validate="onTextValidate"
                 />
@@ -351,7 +346,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     label="feedback_mail"
                     :disabled="request.pending"
                     :description="'no_email_feedback'"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     data-cy="report-problem-email"
                     @validate="onEmailValidate"
                 />
@@ -363,7 +358,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
                     label="feedback_attachment"
                     :accepted-file-types="acceptedFileTypes"
                     :placeholder="'feedback_placeholder'"
-                    :activate-validation="activateValidation"
+                    :validate-when-pristine="userHasTriedToSubmit"
                     :disabled="request.pending"
                     :max-file-size="ATTACHMENT_MAX_SIZE"
                     data-cy="report-problem-file"
@@ -388,7 +383,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
             </div>
             <SendActionButtons
                 class="text-end"
-                :class="{ 'is-invalid': !isFormValid && activateValidation }"
+                :class="{ 'is-invalid': !isFormValid && userHasTriedToSubmit }"
                 :is-disabled="request.pending"
                 :is-pending="request.pending"
                 @send="sendReportProblem"

packages/viewer/src/modules/menu/components/help/feedback/FeedbackButton.vue

@@ -3,6 +3,8 @@ import log from '@swissgeo/log'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import type { ValidationResult } from '@/utils/composables/useFieldValidation'
+
 import sendFeedbackApi from '@/api/feedback.api'
 import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
 import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
@@ -111,12 +113,12 @@ function closeAndCleanForm() {
     request.value.completed = false
 }
 
-function onTextValidate(valid: boolean) {
-    isMessageValid.value = valid
+function onTextValidate(validation: ValidationResult) {
+    isMessageValid.value = validation.valid
 }
 
-function onEmailValidate(valid: boolean) {
-    isEmailValid.value = valid
+function onEmailValidate(validation: ValidationResult) {
+    isEmailValid.value = validation.valid
 }
 </script>
 

packages/viewer/src/store/modules/drawing/actions/closeDrawing.ts

@@ -43,7 +43,6 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
             await debounceSaveDrawing({ debounceTime: 0, retryOnError: false })
         }
 
-
         if (this.layer.config) {
             // flagging the layer as not edited anymore (not displayed on the map by the drawing module anymore)
             if (isOnlineMode(this.onlineMode)) {