Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdauth
cdauth committed Nov 12, 2023
1 parent a7b7693 commit 44c16a2
Show file tree
Hide file tree
Showing 43 changed files with 1,125 additions and 975 deletions.
1 change: 1 addition & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@
"@types/pluralize": "^0.0.33",
"happy-dom": "^12.10.3",
"rimraf": "^5.0.5",
"sass": "^1.69.5",
"svgo": "^3.0.3",
"ts-node": "^10.9.1",
"typescript": "^5.2.2",
Expand Down
39 changes: 24 additions & 15 deletions frontend/src/lib/components/edit-filter-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
import { filterHasError } from "facilmap-utils";
import ModalDialog from "./ui/modal-dialog.vue";
import { computed, ref } from "vue";
import vValidity from "./ui/validated-form/validity";
import { injectContextRequired, requireClientContext, requireMapContext } from "./facil-map-context-provider/facil-map-context-provider.vue";
import ValidatedField from "./ui/validated-form/validated-field.vue";
const context = injectContextRequired();
const mapContext = requireMapContext(context);
Expand All @@ -18,9 +18,9 @@
const types = computed(() => Object.values(client.value.types));
const validationError = computed(() => {
return filterHasError(filter.value)?.message;
});
function validateFilter(filter: string) {
return filterHasError(filter)?.message;
}
const isModified = computed(() => {
return filter.value != (mapContext.value.filter ?? "");
Expand All @@ -44,17 +44,26 @@
>
<p>Here you can set an advanced expression to show/hide certain markers/lines based on their attributes. The filter expression only applies to your view of the map, but it can be persisted as part of a saved view or a shared link.</p>

<div :class="{ 'was-validated': filter }">
<textarea
class="form-control text-monospace"
v-model="filter"
rows="5"
v-validity="validationError"
></textarea>
<div class="invalid-feedback" v-if="validationError">
<pre>{{validationError}}</pre>
</div>
</div>
<ValidatedField
:value="filter"
:validators="[
validateFilter
]"
:reportValid="!!filter"
immediate
>
<template #default="slotProps">
<textarea
class="form-control text-monospace"
v-model="filter"
rows="5"
:ref="slotProps.inputRef"
></textarea>
<div class="invalid-feedback" v-if="slotProps.validationError">
<pre>{{slotProps.validationError}}</pre>
</div>
</template>
</ValidatedField>

<hr />

Expand Down
6 changes: 2 additions & 4 deletions frontend/src/lib/components/edit-line-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@
toasts.showErrorToast(`fm${context.id}-edit-line-error`, "Error saving line", err);
}
}
const colourValidationError = computed(() => validateRequired(line.value.colour));
</script>

<template>
Expand Down Expand Up @@ -92,7 +90,7 @@
<ColourPicker
:id="`${id}-colour-input`"
v-model="line.colour"
:validationError="colourValidationError"
:validators="[validateRequired]"
></ColourPicker>
</div>
</div>
Expand All @@ -105,7 +103,7 @@
<WidthPicker
:id="`${id}-width-input`"
v-model="line.width"
class="fm-form-range-with-label"
class="fm-custom-range-with-label"
></WidthPicker>
</div>
</div>
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/lib/components/edit-marker-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,6 @@
toasts.showErrorToast(`fm${context.id}-edit-marker-error`, "Error saving marker", err);
}
}
const colourValidationError = computed(() => validateRequired(marker.value.colour));
</script>

<template>
Expand All @@ -85,7 +83,7 @@
<ColourPicker
:id="`${id}-colour-input`"
v-model="marker.colour"
:validationError="colourValidationError"
:validators="[validateRequired]"
></ColourPicker>
</div>
</div>
Expand All @@ -98,7 +96,7 @@
<SizePicker
:id="`${id}-size-input`"
v-model="marker.size"
class="fm-form-range-with-label"
class="fm-custom-range-with-label"
></SizePicker>
</div>
</div>
Expand Down
164 changes: 68 additions & 96 deletions frontend/src/lib/components/edit-type-dialog/edit-type-dialog.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { Field, ID, Type } from "facilmap-types";
import { canControl, getUniqueId, validateRequired, validations } from "../../utils/utils";
import { canControl, getUniqueId, validateRequired } from "../../utils/utils";
import { mergeTypeObject } from "./edit-type-utils";
import { cloneDeep, isEqual } from "lodash-es";
import { useToasts } from "../ui/toasts/toasts.vue";
Expand All @@ -16,9 +16,9 @@
import EditTypeDropdownDialog from "./edit-type-dropdown-dialog.vue";
import { computed, ref, watch } from "vue";
import ModalDialog from "../ui/modal-dialog.vue";
import vValidity, { vValidityContext } from "../ui/validated-form/validity";
import { showConfirm } from "../ui/alert.vue";
import { injectContextRequired, requireClientContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
import ValidatedField from "../ui/validated-form/validated-field.vue";
const context = injectContextRequired();
const client = requireClientContext(context);
Expand Down Expand Up @@ -121,60 +121,11 @@
type.value.fields[idx] = field;
}
const nameValidationError = computed(() => validateRequired(type.value.name));
const typeValidationError = computed(() => validateRequired(type.value.type));
const defaultColourValidationError = computed(() => {
if (type.value.colourFixed) {
return validateRequired(type.value.defaultColour);
} else {
return undefined;
function validateFieldName(name: string) {
if (type.value.fields.filter((field) => field.name == name).length > 1) {
return "Multiple fields cannot have the same name.";
}
});
const defaultSizeValidationError = computed(() => {
if (type.value.sizeFixed) {
return validateRequired(type.value.defaultSize);
} else {
return undefined;
}
});
const defaultSymbolValidationError = computed(() => {
if (type.value.symbolFixed) {
return validateRequired(type.value.defaultSymbol);
} else {
return undefined;
}
});
const defaultShapeValidationError = computed(() => {
if (type.value.shapeFixed) {
return validateRequired(type.value.defaultShape);
} else {
return undefined;
}
});
const defaultWidthValidationError = computed(() => {
if (type.value.widthFixed) {
return validateRequired(type.value.defaultWidth);
} else {
return undefined;
}
});
const defaultModeValidationError = computed(() => {
if (type.value.modeFixed) {
return validateRequired(type.value.defaultMode);
} else {
return undefined;
}
});
const fieldValidationErrors = computed(() => type.value.fields.map((field) => ({
name: validations(field.name, [
validateRequired,
(name) => {
if (type.value.fields.filter((field) => field.name == name).length > 1) {
return "Multiple fields cannot have the same name.";
}
}
])
})));
}
</script>

<template>
Expand All @@ -183,37 +134,49 @@
class="fm-edit-type"
:isModified="isModified"
:isCreate="isCreate"
:stackLevel="1"
ref="modalRef"
@submit="$event.waitUntil(save())"
@hidden="emit('hidden')"
>
<div class="row mb-3">
<label :for="`${id}-name-input`" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-9" v-validity-context>
<input class="form-control" :id="`${id}-name-input`" v-model="type.name" v-validity="nameValidationError" />
<div class="invalid-feedback">
{{nameValidationError}}
</div>
</div>
<ValidatedField
:value="type.name"
:validators="[validateRequired]"
class="col-sm-9 position-relative"
>
<template #default="slotProps">
<input class="form-control" :id="`${id}-name-input`" v-model="type.name" :ref="slotProps.inputRef" />
<div class="invalid-tooltip">
{{slotProps.validationError}}
</div>
</template>
</ValidatedField>
</div>

<div class="row mb-3">
<label :for="`${id}-type-input`" class="col-sm-3 col-form-label">Type</label>
<div class="col-sm-9" v-validity-context>
<select
:id="`${id}-type-input`"
v-model="type.type"
class="form-select"
:disabled="!isCreate"
v-validity="typeValidationError"
>
<option value="marker">Marker</option>
<option value="line">Line</option>
</select>
<div class="invalid-feedback">
{{typeValidationError}}
</div>
</div>
<ValidatedField
:value="type.type"
:validators="[validateRequired]"
class="col-sm-9 position-relative"
>
<template #default="slotProps">
<select
:id="`${id}-type-input`"
v-model="type.type"
class="form-select"
:disabled="!isCreate"
:ref="slotProps.inputRef"
>
<option value="marker">Marker</option>
<option value="line">Line</option>
</select>
<div class="invalid-tooltip">
{{slotProps.validationError}}
</div>
</template>
</ValidatedField>
</div>

<template v-if="resolvedCanControl.length > 0">
Expand All @@ -234,7 +197,7 @@
<ColourPicker
:id="`${id}-default-colour-input`"
v-model="type.defaultColour"
:validationError="defaultColourValidationError"
:validators="type.colourFixed ? [validateRequired] : []"
></ColourPicker>
</div>
<div class="col-sm-3">
Expand Down Expand Up @@ -262,11 +225,12 @@
<SizePicker
:id="`${id}-default-size-input`"
v-model="type.defaultSize"
:validationError="defaultSizeValidationError"
:validators="type.sizeFixed ? [validateRequired] : []"
class="fm-custom-range-with-label"
></SizePicker>
</div>
<div class="col-sm-3">
<div class="form-check">
<div class="form-check fm-form-check-with-label">
<input
type="checkbox"
class="form-check-input"
Expand All @@ -290,7 +254,7 @@
<SymbolPicker
:id="`${id}-default-symbol-input`"
v-model="type.defaultSymbol"
:validationError="defaultSymbolValidationError"
:validators="type.symbolFixed ? [validateRequired] : []"
></SymbolPicker>
</div>
<div class="col-sm-3">
Expand Down Expand Up @@ -318,7 +282,7 @@
<ShapePicker
:id="`${id}-default-shape-input`"
v-model="type.defaultShape"
:validationError="defaultShapeValidationError"
:validators="type.shapeFixed ? [validateRequired] : []"
></ShapePicker>
</div>
<div class="col-sm-3">
Expand Down Expand Up @@ -346,11 +310,12 @@
<WidthPicker
:id="`${id}-default-width-input`"
v-model="type.defaultWidth"
:validationError="defaultWidthValidationError"
:validators="type.widthFixed ? [validateRequired] : []"
class="fm-custom-range-with-label"
></WidthPicker>
</div>
<div class="col-sm-3">
<div class="form-check">
<div class="form-check fm-form-check-with-label">
<input
type="checkbox"
class="form-check-input"
Expand All @@ -374,7 +339,7 @@
<RouteMode
:id="`${id}-default-mode-input`"
v-model="type.defaultMode"
:validationError="defaultModeValidationError"
:validators="type.modeFixed ? [validateRequired] : []"
></RouteMode>
</div>
<div class="col-sm-3">
Expand Down Expand Up @@ -432,18 +397,25 @@
handle=".fm-drag-handle"
itemKey="(field: any) => type.fields.indexOf(field)"
>
<template #item="{ element: field, index: idx }">
<template #item="{ element: field }">
<tr>
<td v-validity-context>
<input
class="form-control"
v-model="field.name"
v-validity="fieldValidationErrors[idx].name"
/>
<div class="invalid-feedback">
{{fieldValidationErrors[idx].name}}
</div>
</td>
<ValidatedField
tag="td"
class="position-relative"
:value="field.name"
:validators="[validateRequired, validateFieldName]"
>
<template #default="slotProps">
<input
class="form-control"
v-model="field.name"
:ref="slotProps.inputRef"
/>
<div class="invalid-tooltip">
{{slotProps.validationError}}
</div>
</template>
</ValidatedField>
<td>
<div class="input-group">
<select class="form-select" v-model="field.type">
Expand Down
Loading

0 comments on commit 44c16a2

Please sign in to comment.