Skip to content

Commit d7a8296

Browse files
sommerfesommerfe
committed
PB-2064: refactor code
1 parent 4507978 commit d7a8296

File tree

2 files changed

+148
-71
lines changed

2 files changed

+148
-71
lines changed

‎packages/viewer/src/modules/drawing/components/DrawingToolbox.vue‎

Lines changed: 136 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import debounce from '@/utils/debounce'
2727
const dispatcher: ActionDispatcher = { name: 'DrawingToolbox.vue' }
2828
2929
const emits = defineEmits<{
30-
removeLastPoint: [void];
30+
removeLastPoint: [void]
3131
closeDrawing: [void]
3232
}>()
3333
@@ -162,106 +162,195 @@ const debounceSaveDrawingName = debounce(saveDrawingName, 200)
162162

163163
<template>
164164
<teleport to=".drawing-toolbox-in-menu">
165-
<DrawingHeader v-if="uiStore.isDesktopMode" :is-closing-in-toolbox="isClosingDrawing" @close="closeDrawing" />
165+
<DrawingHeader
166+
v-if="uiStore.isDesktopMode"
167+
:is-closing-in-toolbox="isClosingDrawing"
168+
@close="closeDrawing"
169+
/>
166170
<div :class="[{ 'drawing-toolbox-closed': !drawMenuOpen }, 'drawing-toolbox']">
167-
<div class="card drawing-toolbox-content rounded-bottom rounded-top-0 rounded-start-0 text-center shadow-lg"
168-
:class="{ 'rounded-bottom-0': uiStore.isPhoneMode }">
169-
<GeoadminTooltip :tooltip-content="tooltipText" placement="bottom" :disabled="!showNoActiveKmlWarning">
170-
<div v-if="online" class="d-flex justify-content-center align-items-center mx-4 mt-3 gap-2">
171-
<label for="drawing-name" class="text-nowrap">
171+
<div
172+
class="card drawing-toolbox-content rounded-bottom rounded-top-0 rounded-start-0 text-center shadow-lg"
173+
:class="{ 'rounded-bottom-0': uiStore.isPhoneMode }"
174+
>
175+
<GeoadminTooltip
176+
:tooltip-content="tooltipText"
177+
placement="bottom"
178+
:disabled="!showNoActiveKmlWarning"
179+
>
180+
<div
181+
v-if="online"
182+
class="d-flex justify-content-center align-items-center mx-4 mt-3 gap-2"
183+
>
184+
<label
185+
for="drawing-name"
186+
class="text-nowrap"
187+
>
172188
{{ t('file_name') }}
173189
</label>
174-
<input id="drawing-name" v-model="drawingName" type="text" class="form-control"
175-
data-cy="drawing-toolbox-file-name-input" :placeholder="`${t('draw_layer_label')}`"
176-
:disabled="!layersStore.activeKmlLayer" />
190+
<input
191+
id="drawing-name"
192+
v-model="drawingName"
193+
type="text"
194+
class="form-control"
195+
data-cy="drawing-toolbox-file-name-input"
196+
:placeholder="`${t('draw_layer_label')}`"
197+
:disabled="!layersStore.activeKmlLayer"
198+
/>
177199
</div>
178200
</GeoadminTooltip>
179201

180202
<div class="card-body position-relative container">
181-
<div class="row justify-content-start g-2" :class="{ 'row-cols-2': uiStore.isDesktopMode }">
182-
<div v-for="featureType in Object.values(EditableFeatureTypes)" :key="featureType" class="col"
183-
:class="{
184-
'd-grid': uiStore.isPhoneMode,
185-
'd-block': uiStore.isDesktopMode,
186-
}">
187-
<DrawingToolboxButton :feature-type="featureType"
188-
:is-active="drawingStore.edit.featureType === featureType"
189-
:data-cy="`drawing-toolbox-mode-button-${featureType}`"
190-
@set-drawing-mode="selectDrawingMode" />
203+
<div
204+
class="row justify-content-start g-2"
205+
:class="{ 'row-cols-2': uiStore.isDesktopMode }"
206+
>
207+
<div
208+
v-for="featureType in Object.values(EditableFeatureTypes)"
209+
:key="featureType"
210+
class="col"
211+
:class="{
212+
'd-grid': uiStore.isPhoneMode,
213+
'd-block': uiStore.isDesktopMode,
214+
}"
215+
>
216+
<DrawingToolboxButton
217+
:feature-type="featureType"
218+
:is-active="drawingStore.edit.featureType === featureType"
219+
:data-cy="`drawing-toolbox-mode-button-${featureType}`"
220+
@set-drawing-mode="selectDrawingMode"
221+
/>
191222
</div>
192-
<button v-if="uiStore.isPhoneMode"
193-
class="btn d-flex align-items-center justify-content-center col-2"
194-
data-cy="drawing-toolbox-close-button" @click="closeDrawing">
223+
<button
224+
v-if="uiStore.isPhoneMode"
225+
class="btn d-flex align-items-center justify-content-center col-2"
226+
data-cy="drawing-toolbox-close-button"
227+
@click="closeDrawing"
228+
>
195229
<FontAwesomeIcon icon="times" />
196230
</button>
197231
</div>
198232
<div class="row mt-1">
199233
<div class="col">
200-
<div v-show="drawingStateMessage"
201-
class="d-flex justify-content-center my-md-1 drawing-toolbox-drawing-state"
202-
:class="{ 'text-danger': isDrawingStateError }">
234+
<div
235+
v-show="drawingStateMessage"
236+
class="d-flex justify-content-center my-md-1 drawing-toolbox-drawing-state"
237+
:class="{ 'text-danger': isDrawingStateError }"
238+
>
203239
{{ drawingStateMessage }}
204240
</div>
205241
</div>
206242
</div>
207243
<div class="row g-2">
208244
<div class="col d-grid">
209-
<button :disabled="drawingStore.isDrawingEmpty" class="btn-light btn"
210-
data-cy="drawing-toolbox-delete-button" @click="showClearConfirmationModal = true">
245+
<button
246+
:disabled="drawingStore.isDrawingEmpty"
247+
class="btn-light btn"
248+
data-cy="drawing-toolbox-delete-button"
249+
@click="showClearConfirmationModal = true"
250+
>
211251
{{ t('delete') }}
212252
</button>
213253
</div>
214254
<div class="col d-grid">
215255
<DrawingExporter :is-drawing-empty="drawingStore.isDrawingEmpty" />
216256
</div>
217-
<div v-if="online" class="col d-grid">
218-
<button type="button" class="btn btn-light" :disabled="drawingStore.isDrawingEmpty || !layersStore.activeKmlLayer
219-
" data-cy="drawing-toolbox-share-button" @click="showShareModal = true">
257+
<div
258+
v-if="online"
259+
class="col d-grid"
260+
>
261+
<button
262+
type="button"
263+
class="btn btn-light"
264+
:disabled="
265+
drawingStore.isDrawingEmpty || !layersStore.activeKmlLayer
266+
"
267+
data-cy="drawing-toolbox-share-button"
268+
@click="showShareModal = true"
269+
>
220270
{{ t('share') }}
221271
</button>
222272
</div>
223273
</div>
224-
<div v-if="isDrawingLineOrMeasure || isAllowDeleteLastPoint" class="row mt-2">
274+
<div
275+
v-if="isDrawingLineOrMeasure || isAllowDeleteLastPoint"
276+
class="row mt-2"
277+
>
225278
<div class="col d-grid">
226-
<button data-cy="drawing-delete-last-point-button" class="btn btn-outline-danger"
227-
@click="onDeleteLastPoint">
279+
<button
280+
data-cy="drawing-delete-last-point-button"
281+
class="btn btn-outline-danger"
282+
@click="onDeleteLastPoint"
283+
>
228284
{{ t('draw_button_delete_last_point') }}
229285
</button>
230286
</div>
231287
</div>
232-
<div v-if="uiStore.isDesktopMode && online" class="row mt-2">
233-
<div class="col text-muted text-center" data-cy="drawing-toolbox-disclaimer">
288+
<div
289+
v-if="uiStore.isDesktopMode && online"
290+
class="row mt-2"
291+
>
292+
<div
293+
class="col text-muted text-center"
294+
data-cy="drawing-toolbox-disclaimer"
295+
>
234296
<!-- eslint-disable vue/no-v-html-->
235297
<small v-html="t('share_file_disclaimer')" />
236298
<!-- eslint-enable vue/no-v-html-->
237299
</div>
238300
</div>
239301
</div>
240302
</div>
241-
<div v-if="uiStore.isDesktopMode" class="text-center">
242-
<button class="button-open-close-draw-menu btn btn-dark rounded-0 rounded-bottom m-auto ps-4 pe-4"
243-
data-cy="menu-button" @click="drawMenuOpen = !drawMenuOpen">
303+
<div
304+
v-if="uiStore.isDesktopMode"
305+
class="text-center"
306+
>
307+
<button
308+
class="button-open-close-draw-menu btn btn-dark rounded-0 rounded-bottom m-auto ps-4 pe-4"
309+
data-cy="menu-button"
310+
@click="drawMenuOpen = !drawMenuOpen"
311+
>
244312
<FontAwesomeIcon :icon="drawMenuOpen ? 'caret-up' : 'caret-down'" />
245313
<span class="ms-2">{{ t(drawMenuOpen ? 'close_menu' : 'open_menu') }}</span>
246314
</button>
247315
</div>
248316
</div>
249-
<ModalWithBackdrop v-if="showClearConfirmationModal" show-confirmation-buttons fluid
250-
confirm-key="confirm_delete" confirm-icon="far fa-trash-alt" @close="onCloseClearConfirmation">
317+
<ModalWithBackdrop
318+
v-if="showClearConfirmationModal"
319+
show-confirmation-buttons
320+
fluid
321+
confirm-key="confirm_delete"
322+
confirm-icon="far fa-trash-alt"
323+
@close="onCloseClearConfirmation"
324+
>
251325
<div class="mb-2">
252326
{{ t('confirm_remove_all_features') }}
253327
</div>
254328
<div class="alert alert-warning">
255-
<FontAwesomeIcon class="me-1" icon="warning" />
329+
<FontAwesomeIcon
330+
class="me-1"
331+
icon="warning"
332+
/>
256333
{{ t('confirm_no_cancel') }}
257334
</div>
258335
</ModalWithBackdrop>
259-
<ModalWithBackdrop v-if="showShareModal" fluid :title="t('share')" @close="showShareModal = false">;
336+
<ModalWithBackdrop
337+
v-if="showShareModal"
338+
fluid
339+
:title="t('share')"
340+
@close="showShareModal = false"
341+
>
260342
<SharePopup :kml-layer="layersStore.activeKmlLayer" />
261343
</ModalWithBackdrop>
262-
<ModalWithBackdrop v-if="showNotSharedDrawingWarningModal" ; fluid :title="t('warning')"
263-
@close="onCloseWarningModal()">;
264-
<ShareWarningPopup :kml-layer="layersStore.activeKmlLayer" @accept="onAcceptWarningModal()" />
344+
<ModalWithBackdrop
345+
v-if="showNotSharedDrawingWarningModal"
346+
fluid
347+
:title="t('warning')"
348+
@close="onCloseWarningModal()"
349+
>
350+
<ShareWarningPopup
351+
:kml-layer="layersStore.activeKmlLayer"
352+
@accept="onAcceptWarningModal()"
353+
/>
265354
</ModalWithBackdrop>
266355
</teleport>
267356
</template>
@@ -283,18 +372,15 @@ $zindex-drawing-toolbox: -1;
283372
.button-open-close-draw-menu {
284373
height: $openCloseButtonHeight;
285374
}
286-
287375
&-mode-selector {
288376
margin: 0.5rem 0;
289377
display: grid;
290378
grid-template: 1fr / 1fr 1fr 1fr 1fr;
291379
gap: 0.25rem;
292380
}
293-
294381
&-disclaimer {
295382
display: none;
296383
}
297-
298384
&-drawing-state {
299385
color: #d3d3d3;
300386
font-size: 12px;
@@ -311,15 +397,12 @@ $zindex-drawing-toolbox: -1;
311397
.drawing-toolbox-content {
312398
transition: opacity $animation-time;
313399
}
314-
315400
&-closed {
316401
transform: translate(0px, calc(-100% + #{$openCloseButtonHeight}));
317-
318402
.drawing-toolbox-content {
319403
opacity: 0;
320404
}
321405
}
322-
323406
&-disclaimer {
324407
display: block;
325408
}
@@ -333,4 +416,4 @@ $zindex-drawing-toolbox: -1;
333416
gap: 0.5rem 2rem;
334417
}
335418
}
336-
</style>
419+
</style>

‎packages/viewer/src/utils/composables/useFieldValidation.ts‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ComputedRef, Ref } from 'vue'
22

3-
import { computed, onMounted, reactive, ref, toRef, watch } from 'vue'
3+
import { computed, onMounted, ref, toRef, watch } from 'vue'
44

55
export interface ValidationResult {
66
valid: boolean
@@ -92,7 +92,7 @@ export function useFieldValidation<T extends string | File>(
9292
const activateValidation = toRef(props, 'activateValidation')
9393
const required = toRef(props, 'required')
9494
const validMessage = toRef(props, 'validMessage')
95-
const validation = reactive<ValidationResult>({ valid: true, invalidMessage: '' })
95+
const validation = ref<ValidationResult>({ valid: true, invalidMessage: '' })
9696

9797
// Helper function to check if value is empty
9898
const isEmpty = (value?: T): boolean => {
@@ -107,7 +107,7 @@ export function useFieldValidation<T extends string | File>(
107107

108108
// Computed properties
109109
const isValid = computed(() => {
110-
return validation.valid
110+
return validation.value.valid
111111
})
112112
const invalidMarker = computed(() => {
113113
if (!activateValidation.value) {
@@ -117,7 +117,6 @@ export function useFieldValidation<T extends string | File>(
117117
if (props.invalidMarker !== undefined) {
118118
_invalidMarker = _invalidMarker || !!props.invalidMarker
119119
}
120-
console.log('Computed invalid marker:', _invalidMarker)
121120
return _invalidMarker
122121
})
123122
const validMarker = computed(() => {
@@ -137,7 +136,7 @@ export function useFieldValidation<T extends string | File>(
137136
if (props.invalidMessage) {
138137
return props.invalidMessage
139138
}
140-
return validation.invalidMessage
139+
return validation.value.invalidMessage
141140
})
142141

143142
// Watches
@@ -155,23 +154,18 @@ export function useFieldValidation<T extends string | File>(
155154
})
156155

157156
function validate(): void {
158-
const customResult = customValidate()
159-
160-
validation.valid = customResult.valid
161-
validation.invalidMessage = customResult.invalidMessage
162-
157+
validation.value = customValidate()
163158
if (required.value && isEmpty(value.value)) {
164-
validation.valid = false
165-
validation.invalidMessage = requiredInvalidMessage
159+
validation.value = {
160+
valid: false,
161+
invalidMessage: requiredInvalidMessage,
162+
}
166163
}
167-
if (props.validate && validation.valid) {
164+
if (props.validate && validation.value.valid) {
168165
// Run user custom validation
169-
const validateResult = props.validate(value.value)
170-
validation.valid = validateResult.valid
171-
validation.invalidMessage = validateResult.invalidMessage
166+
validation.value = props.validate(value.value)
172167
}
173-
174-
emits('validate', validation.valid)
168+
emits('validate', validation.value.valid)
175169
}
176170

177171
function onFocus(event: Event, inFocus: boolean): void {

0 commit comments

Comments
 (0)