Skip to content

Commit 5f30e01

Browse files
pakbpakb
authored
Merge pull request #1512 from geoadmin/feat-PB-2027-fix-marker-text-test
PB-2027: fix drawing marker/text test
2 parents e3706f4 + 4c84aa6 commit 5f30e01

File tree

20 files changed

+606
-566
lines changed

20 files changed

+606
-566
lines changed

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

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ import axios from 'axios'
33
import { fromString } from 'ol/color'
44

55
import { getViewerDedicatedServicesBaseUrl } from '@/config/baseUrl.config'
6-
import {
7-
type FeatureStyleColor,
8-
type FeatureStyleSize,
9-
LARGE,
10-
RED,
11-
} from '@/utils/featureStyleUtils'
6+
import { type FeatureStyleColor, LARGE, RED } from '@/utils/featureStyleUtils'
127

138
/**
149
* Generate an icon URL from its template. If no iconScale is given, the default scale 1 will be
@@ -17,19 +12,18 @@ import {
1712
*
1813
* @returns A full URL to this icon on the service-icons backend
1914
*/
20-
export function generateIconURL(
21-
icon: DrawingIcon,
22-
iconColor: FeatureStyleColor = RED,
23-
iconSize: FeatureStyleSize = LARGE
24-
) {
15+
export function generateIconURL(icon: DrawingIcon, iconColor: FeatureStyleColor = RED) {
2516
const rgb = fromString(iconColor.fill)
26-
return icon.imageTemplateURL
27-
.replace('{icon_set_name}', icon.iconSetName)
28-
.replace('{icon_name}', icon.name)
29-
.replace('{icon_scale}', iconSize.iconScale + 'x')
30-
.replace('{r}', `${rgb[0]}`)
31-
.replace('{g}', `${rgb[1]}`)
32-
.replace('{b}', `${rgb[2]}`)
17+
return (
18+
icon.imageTemplateURL
19+
.replace('{icon_set_name}', icon.iconSetName)
20+
.replace('{icon_name}', icon.name)
21+
// we always use the LARGE icon scale and resize the icon with the <IconStyle><scale> property in KMLs
22+
.replace('{icon_scale}', LARGE.iconScale + 'x')
23+
.replace('{r}', `${rgb[0]}`)
24+
.replace('{g}', `${rgb[1]}`)
25+
.replace('{b}', `${rgb[2]}`)
26+
)
3327
}
3428

3529
/**

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
import { ref } from 'vue'
33
import { useI18n } from 'vue-i18n'
44
5+
import type { ValidationResult } from '@/utils/composables/useFieldValidation'
6+
57
import { MediaType } from '@/modules/infobox/DrawingStyleMediaTypes.enum'
6-
import TextInput, { type TextInputValidateResult } from '@/utils/components/TextInput.vue'
8+
import TextInput from '@/utils/components/TextInput.vue'
79
import { isValidUrl } from '@/utils/utils'
810
911
const { mediaType, urlLabel, descriptionLabel } = defineProps<{
@@ -17,8 +19,8 @@ const emit = defineEmits<{
1719
}>()
1820
1921
const { t } = useI18n()
20-
const generatedMediaLink = ref<string | undefined>(undefined)
21-
const linkDescription = ref<string | undefined>(undefined)
22+
const generatedMediaLink = ref<string>()
23+
const linkDescription = ref<string>()
2224
const isFormValid = ref<boolean>(false)
2325
const activateValidation = ref<boolean>(false)
2426
@@ -87,7 +89,7 @@ function validateForm(): boolean {
8789
return isFormValid.value
8890
}
8991
90-
function onUrlValidate(result: TextInputValidateResult): void {
92+
function onUrlValidate(result: ValidationResult): void {
9193
isFormValid.value = result.valid
9294
}
9395
</script>
@@ -117,14 +119,14 @@ function onUrlValidate(result: TextInputValidateResult): void {
117119
placeholder="paste_url"
118120
:validate="validateUrl"
119121
data-cy="drawing-style-media-url"
120-
@keydown.enter="addLink()"
122+
@keydown.enter="addLink"
121123
@validate="onUrlValidate"
122124
>
123125
<button
124126
class="btn btn-default btn-outline-group rounded-0 rounded-end"
125127
type="button"
126128
data-cy="drawing-style-media-generate-button"
127-
@click="addLink()"
129+
@click="addLink"
128130
>
129131
{{ t('add') }}
130132
</button>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import type { ErrorMessage } from '@swissgeo/log/Message'
44
import log from '@swissgeo/log'
55
import { computed, ref } from 'vue'
66
7+
import type { ValidationResult } from '@/utils/composables/useFieldValidation'
8+
79
import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
810
import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
911
import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
@@ -17,12 +19,12 @@ const { active = false } = defineProps<{
1719
active?: boolean
1820
}>()
1921
22+
const selectedFile = defineModel<File | undefined>({ default: undefined })
23+
2024
// Reactive data
2125
const loadingFile = ref(false)
22-
const selectedFile = ref<File | undefined>()
2326
const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
2427
const isFormValid = ref(false)
25-
const activateValidation = ref(false)
2628
const importSuccessMessage = ref('')
2729
2830
const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
@@ -31,7 +33,6 @@ const buttonState = computed(() => (loadingFile.value ? 'loading' : 'default'))
3133
async function loadFile() {
3234
importSuccessMessage.value = ''
3335
errorFileLoadingMessage.value = undefined
34-
activateValidation.value = true
3536
loadingFile.value = true
3637
3738
if (isFormValid.value && selectedFile.value) {
@@ -52,8 +53,8 @@ async function loadFile() {
5253
loadingFile.value = false
5354
}
5455
55-
function validateForm(valid: boolean) {
56-
isFormValid.value = valid
56+
function validateForm(validation: ValidationResult) {
57+
isFormValid.value = validation.valid
5758
}
5859
</script>
5960

@@ -74,8 +75,7 @@ function validateForm(valid: boolean) {
7475
required
7576
:accepted-file-types="acceptedFileTypes"
7677
:placeholder="'no_file'"
77-
:activate-validation="activateValidation"
78-
:invalid-marker="!!errorFileLoadingMessage"
78+
:force-invalid="!!errorFileLoadingMessage"
7979
:invalid-message="errorFileLoadingMessage?.msg"
8080
:invalid-message-extra-params="errorFileLoadingMessage?.params"
8181
:valid-message="importSuccessMessage"

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

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,13 @@ import { ErrorMessage, WarningMessage } from '@swissgeo/log/Message'
44
import { type ComponentPublicInstance, computed, onMounted, ref, useTemplateRef, watch } from 'vue'
55
66
import type { ActionDispatcher } from '@/store/types'
7+
import type { ValidationResult } from '@/utils/composables/useFieldValidation'
78
89
import ImportFileButtons from '@/modules/menu/components/advancedTools/ImportFile/ImportFileButtons.vue'
910
import generateErrorMessageFromErrorType from '@/modules/menu/components/advancedTools/ImportFile/parser/errors/generateErrorMessageFromErrorType.utils'
1011
import useImportFile from '@/modules/menu/components/advancedTools/ImportFile/useImportFile.composable'
1112
import useUIStore from '@/store/modules/ui'
12-
import TextInput, {
13-
type TextInputExposed,
14-
type TextInputValidateResult,
15-
} from '@/utils/components/TextInput.vue'
13+
import TextInput, { type TextInputExposed } from '@/utils/components/TextInput.vue'
1614
import { isValidUrl } from '@/utils/utils'
1715
1816
const dispatcher: ActionDispatcher = {
@@ -27,14 +25,14 @@ const uiStore = useUIStore()
2725
2826
const { handleFileSource } = useImportFile()
2927
30-
// Reactive data
28+
const fileUrl = defineModel<string>({ default: '' })
29+
3130
const isLoading = ref<boolean>(false)
32-
const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
33-
const fileUrl = ref<string>('')
3431
const importSuccessMessage = ref<string>('')
3532
const errorFileLoadingMessage = ref<ErrorMessage | undefined>()
3633
const isFormValid = ref<boolean>(false)
37-
const activateValidation = ref<boolean>(false)
34+
35+
const fileUrlInput = useTemplateRef<ComponentPublicInstance<TextInputExposed>>('fileUrlInput')
3836
3937
const buttonState = computed<'loading' | 'default'>(() => (isLoading.value ? 'loading' : 'default'))
4038
@@ -54,9 +52,7 @@ onMounted(() => {
5452
}
5553
})
5654
57-
// Methods
58-
59-
function validateUrl(url?: string): TextInputValidateResult {
55+
function validateUrl(url?: string): ValidationResult {
6056
if (!url) {
6157
return { valid: false, invalidMessage: 'no_url' }
6258
} else if (!isValidUrl(url)) {
@@ -66,12 +62,11 @@ function validateUrl(url?: string): TextInputValidateResult {
6662
}
6763
6864
function validateForm() {
69-
activateValidation.value = true
7065
return isFormValid.value
7166
}
7267
73-
function onUrlValidate(result: TextInputValidateResult) {
74-
isFormValid.value = result.valid
68+
function onUrlValidate(validation: ValidationResult) {
69+
isFormValid.value = validation.valid
7570
}
7671
7772
function onUrlChange() {
@@ -132,8 +127,7 @@ async function loadFile() {
132127
required
133128
class="mb-2"
134129
placeholder="import_file_url_placeholder"
135-
:activate-validation="activateValidation"
136-
:invalid-marker="!!errorFileLoadingMessage"
130+
:force-invalid="!!errorFileLoadingMessage"
137131
:invalid-message="errorFileLoadingMessage?.msg"
138132
:invalid-message-params="errorFileLoadingMessage?.params"
139133
:valid-message="importSuccessMessage"

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

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { computed, type ComputedRef, nextTick, ref, useTemplateRef, watch } from
66
import { useI18n } from 'vue-i18n'
77
88
import type { ActionDispatcher } from '@/store/types'
9+
import type { ValidationResult } from '@/utils/composables/useFieldValidation'
910
1011
import sendFeedback, { ATTACHMENT_MAX_SIZE, KML_MAX_SIZE } from '@/api/feedback.api'
1112
import { getKmlUrl } from '@/api/files.api'
@@ -84,7 +85,7 @@ const request = ref({
8485
completed: false,
8586
})
8687
const shortLink = ref('')
87-
const activateValidation = ref(false)
88+
const userHasTriedToSubmit = ref(false)
8889
const isMessageValid = ref(false)
8990
// by default attachment and email are valid as they are optional
9091
const isAttachmentValid = ref(true)
@@ -118,15 +119,10 @@ watch(
118119
{ deep: true }
119120
)
120121
121-
// Methods
122-
123-
function validate() {
124-
activateValidation.value = true
125-
return isFormValid.value
126-
}
127-
128122
async function sendReportProblem() {
129-
if (!validate() && validationResult.value) {
123+
userHasTriedToSubmit.value = true
124+
125+
if (!isFormValid.value && validationResult.value) {
130126
// scrolling down to make sure the message with validation result is visible to the user
131127
validationResult.value.scrollIntoView()
132128
return
@@ -168,7 +164,6 @@ async function sendReportProblem() {
168164
}
169165
170166
function closeAndCleanForm() {
171-
activateValidation.value = false
172167
showReportProblemForm.value = false
173168
174169
// reset the state
@@ -183,16 +178,16 @@ function closeAndCleanForm() {
183178
}
184179
}
185180
186-
function onTextValidate(valid: boolean) {
187-
isMessageValid.value = valid
181+
function onTextValidate(validation: ValidationResult) {
182+
isMessageValid.value = validation.valid
188183
}
189184
190-
function onAttachmentValidate(valid: boolean) {
191-
isAttachmentValid.value = valid
185+
function onAttachmentValidate(validation: ValidationResult) {
186+
isAttachmentValid.value = validation.valid
192187
}
193188
194-
function onEmailValidate(valid: boolean) {
195-
isEmailValid.value = valid
189+
function onEmailValidate(validation: ValidationResult) {
190+
isEmailValid.value = validation.valid
196191
}
197192
198193
async function generateShortLink() {
@@ -282,7 +277,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
282277
class="my-2"
283278
:class="{
284279
'is-valid': feedback.category,
285-
'is-invalid': !feedback.category && activateValidation,
280+
'is-invalid': !feedback.category && userHasTriedToSubmit,
286281
}"
287282
@selectItem="selectItem"
288283
/>
@@ -308,7 +303,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
308303
:disabled="request.pending"
309304
required
310305
data-cy="report-problem-text-area"
311-
:activate-validation="activateValidation"
306+
:validate-when-pristine="userHasTriedToSubmit"
312307
invalid-message="feedback_empty_warning"
313308
@validate="onTextValidate"
314309
/>
@@ -351,7 +346,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
351346
label="feedback_mail"
352347
:disabled="request.pending"
353348
:description="'no_email_feedback'"
354-
:activate-validation="activateValidation"
349+
:validate-when-pristine="userHasTriedToSubmit"
355350
data-cy="report-problem-email"
356351
@validate="onEmailValidate"
357352
/>
@@ -363,7 +358,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
363358
label="feedback_attachment"
364359
:accepted-file-types="acceptedFileTypes"
365360
:placeholder="'feedback_placeholder'"
366-
:activate-validation="activateValidation"
361+
:validate-when-pristine="userHasTriedToSubmit"
367362
:disabled="request.pending"
368363
:max-file-size="ATTACHMENT_MAX_SIZE"
369364
data-cy="report-problem-file"
@@ -388,7 +383,7 @@ function selectItem(dropdownItem: DropdownItem<string>) {
388383
</div>
389384
<SendActionButtons
390385
class="text-end"
391-
:class="{ 'is-invalid': !isFormValid && activateValidation }"
386+
:class="{ 'is-invalid': !isFormValid && userHasTriedToSubmit }"
392387
:is-disabled="request.pending"
393388
:is-pending="request.pending"
394389
@send="sendReportProblem"

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import log from '@swissgeo/log'
33
import { computed, nextTick, ref, useTemplateRef } from 'vue'
44
import { useI18n } from 'vue-i18n'
55
6+
import type { ValidationResult } from '@/utils/composables/useFieldValidation'
7+
68
import sendFeedbackApi from '@/api/feedback.api'
79
import HeaderLink from '@/modules/menu/components/header/HeaderLink.vue'
810
import SendActionButtons from '@/modules/menu/components/help/common/SendActionButtons.vue'
@@ -111,12 +113,12 @@ function closeAndCleanForm() {
111113
request.value.completed = false
112114
}
113115
114-
function onTextValidate(valid: boolean) {
115-
isMessageValid.value = valid
116+
function onTextValidate(validation: ValidationResult) {
117+
isMessageValid.value = validation.valid
116118
}
117119
118-
function onEmailValidate(valid: boolean) {
119-
isEmailValid.value = valid
120+
function onEmailValidate(validation: ValidationResult) {
121+
isEmailValid.value = validation.valid
120122
}
121123
</script>
122124

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ export default async function closeDrawing(this: DrawingStore, dispatcher: Actio
4343
await debounceSaveDrawing({ debounceTime: 0, retryOnError: false })
4444
}
4545

46-
4746
if (this.layer.config) {
4847
// flagging the layer as not edited anymore (not displayed on the map by the drawing module anymore)
4948
if (isOnlineMode(this.onlineMode)) {

0 commit comments

Comments
 (0)