Skip to content

Commit

Permalink
Internationalize edit-type-dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@cdauth
cdauth committed Apr 4, 2024
1 parent 899ce29 commit d60455d
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 73 deletions.
68 changes: 68 additions & 0 deletions frontend/src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,74 @@
"functions-description": "Mathematical functions",
"min-max-description": "Smallest/highest value"
},
"edit-type-dialog": {
"delete-field-title": "Delete field",
"delete-field-message": "Do you really want to delete the field “{{fieldName}}”?",
"delete-field-button": "Delete",
"create-type-error": "Error creating type",
"save-type-error": "Error saving type",
"field-update-error": "Error updating field",
"field-disappeared-error": "The field cannot be found on the type anymore.",
"unique-field-name-error": "Multiple fields cannot have the same name.",
"title": "Edit Type",
"name": "Name",
"type": "Type",
"type-marker": "Marker",
"type-line": "Line",
"styles-introduction": "These styles are applied when a new object of this type is created. If “Fixed” is enabled, the style is applied to all objects of this type and cannot be changed for an individual object anymore. For more complex style control, dropdown or checkbox fields can be configured below to change the style based on their selected value.",
"default-colour": "Default colour",
"fixed": "Fixed",
"default-size": "Default size",
"default-icon": "Default icon",
"default-shape": "Default shape",
"default-width": "Default width",
"default-stroke": "Default stroke",
"default-route-mode": "Default routing mode",
"legend": "Legend",
"show-in-legend": "Show in legend",
"show-in-legend-description": "An item for this type will be shown in the legend. Any fixed style attributes are applied to it. Dropdown or checkbox fields that control the style generate additional legend items.",
"field-name": "Name",
"field-type": "Type",
"field-default-value": "Default value",
"field-delete": "Delete",
"field-type-input": "Text field",
"field-type-textarea": "Text area",
"field-type-dropdown": "Dropdown",
"field-type-checkbox": "Checkbox",
"field-edit": "Edit",
"field-reorder": "Reorder",
"field-add": "Add"
},
"edit-type-dropdown-dialog": {
"delete-option-title": "Delete option",
"delete-option-message": "Do you really want to delete the option “{{option.value}}”?",
"delete-option-button": "Delete",
"unique-value-error": "Multiple options cannot have the same label.",
"no-options-error": "Controlling fields need to have at least one option.",
"title-checkbox": "Edit Checkbox",
"title-dropdown": "Edit Dropdown",
"ok-button": "OK",
"control": "Control",
"control-interpolation-marker": "marker",
"control-interpolation-line": "line",
"control-colour": "Control {{type}} colour",
"control-size": "Control {{type}} size",
"control-icon": "Control {{type}} icon",
"control-shape": "Control {{type}} shape",
"control-width": "Control {{type}} width",
"control-stroke": "Control {{type}} stroke",
"option": "Option",
"label": "Label (for legend)",
"colour": "Colour",
"size": "Size",
"icon": "Icon",
"shape": "Shape",
"width": "Width",
"stroke": "Stroke",
"option-remove": "Remove",
"option-reorder": "Reorder",
"option-add": "Add"
},
"modal-dialog": {
"close": "Close",
"cancel": "Cancel",
Expand Down
99 changes: 54 additions & 45 deletions frontend/src/lib/components/edit-type-dialog/edit-type-dialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,13 @@
import { injectContextRequired, requireClientContext } from "../facil-map-context-provider/facil-map-context-provider.vue";
import ValidatedField from "../ui/validated-form/validated-field.vue";
import StrokePicker from "../ui/stroke-picker.vue";
import { useI18n } from "../../utils/i18n";
const context = injectContextRequired();
const client = requireClientContext(context);
const toasts = useToasts();
const i18n = useI18n();
const props = defineProps<{
typeId: ID | "createMarkerType" | "createLineType";
Expand Down Expand Up @@ -93,10 +95,10 @@
async function deleteField(field: Field): Promise<void> {
if (!await showConfirm({
title: "Delete field",
message: `Do you really want to delete the field “${field.name}”?`,
title: i18n.t("edit-type-dialog.delete-field-title"),
message: i18n.t("edit-type-dialog.delete-field-message", { fieldName: field.name }),
variant: "danger",
okLabel: "Delete"
okLabel: i18n.t("edit-type-dialog.delete-field-button")
}))
return;
Expand All @@ -116,7 +118,11 @@
modalRef.value?.modal.hide();
} catch (err) {
toasts.showErrorToast(`fm${context.id}-edit-type-error`, isCreate.value ? "Error creating type" : "Error saving type", err);
toasts.showErrorToast(
`fm${context.id}-edit-type-error`,
isCreate.value ? i18n.t("edit-type-dialog.create-type-error") : i18n.t("edit-type-dialog.save-type-error"),
err
);
}
}
Expand All @@ -126,21 +132,26 @@
function handleUpdateField(field: Field) {
const idx = type.value.fields.indexOf(editField.value!);
if (idx === -1)
toasts.showErrorToast(`fm${context.id}-edit-type-dropdown-error`, "Error updating field", new Error("The field cannot be found on the type anymore."));
if (idx === -1) {
toasts.showErrorToast(
`fm${context.id}-edit-type-dropdown-error`,
i18n.t("edit-type-dialog.field-update-error"),
new Error(i18n.t("edit-type-dialog.field-disappeared-error"))
);
}
type.value.fields[idx] = field;
}
function validateFieldName(name: string) {
if (type.value.fields.filter((field) => field.name == name).length > 1) {
return "Multiple fields cannot have the same name.";
return i18n.t("edit-type-dialog.unique-field-name-error");
}
}
</script>

<template>
<ModalDialog
title="Edit Type"
:title="i18n.t('edit-type-dialog.title')"
class="fm-edit-type"
:isModified="isModified"
:isCreate="isCreate"
Expand All @@ -149,7 +160,7 @@
@hidden="emit('hidden')"
>
<div class="row mb-3">
<label :for="`${id}-name-input`" class="col-sm-3 col-form-label">Name</label>
<label :for="`${id}-name-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.name")}}</label>
<ValidatedField
:value="type.name"
:validators="[validateRequired, getZodValidator(typeValidator.update.shape.name)]"
Expand All @@ -165,16 +176,16 @@
</div>

<div class="row mb-3">
<label :for="`${id}-type-input`" class="col-sm-3 col-form-label">Type</label>
<label :for="`${id}-type-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.type")}}</label>
<div class="col-sm-9">
<select
:id="`${id}-type-input`"
v-model="type.type"
class="form-select"
disabled
>
<option value="marker">Marker</option>
<option value="line">Line</option>
<option value="marker">{{i18n.t("edit-type-dialog.type-marker")}}</option>
<option value="line">{{i18n.t("edit-type-dialog.type-line")}}</option>
</select>
</div>
</div>
Expand All @@ -183,14 +194,12 @@
<hr/>

<p class="text-muted">
These styles are applied when a new object of this type is created. If “Fixed” is enabled, the style is applied to all objects
of this type and cannot be changed for an individual object anymore. For more complex style control, dropdown or checkbox fields
can be configured below to change the style based on their selected value.
{{i18n.t("edit-type-dialog.styles-introduction")}}
</p>

<template v-if="resolvedCanControl.includes('colour')">
<div class="row mb-3">
<label :for="`${id}-default-colour-input`" class="col-sm-3 col-form-label">Default colour</label>
<label :for="`${id}-default-colour-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-colour")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -207,7 +216,7 @@
:id="`${id}-default-colour-fixed`"
v-model="type.colourFixed"
/>
<label :for="`${id}-default-colour-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-colour-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -217,7 +226,7 @@

<template v-if="resolvedCanControl.includes('size')">
<div class="row mb-3">
<label :for="`${id}-default-size-input`" class="col-sm-3 col-form-label">Default size</label>
<label :for="`${id}-default-size-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-size")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -235,7 +244,7 @@
:id="`${id}-default-size-fixed`"
v-model="type.sizeFixed"
/>
<label :for="`${id}-default-size-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-size-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -245,7 +254,7 @@

<template v-if="resolvedCanControl.includes('symbol')">
<div class="row mb-3">
<label :for="`${id}-default-symbol-input`" class="col-sm-3 col-form-label">Default icon</label>
<label :for="`${id}-default-symbol-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-icon")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -262,7 +271,7 @@
:id="`${id}-default-symbol-fixed`"
v-model="type.symbolFixed"
/>
<label :for="`${id}-default-symbol-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-symbol-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -272,7 +281,7 @@

<template v-if="resolvedCanControl.includes('shape')">
<div class="row mb-3">
<label :for="`${id}-default-shape-input`" class="col-sm-3 col-form-label">Default shape</label>
<label :for="`${id}-default-shape-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-shape")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -289,7 +298,7 @@
:id="`${id}-default-shape-fixed`"
v-model="type.shapeFixed"
/>
<label :for="`${id}-default-shape-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-shape-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -299,7 +308,7 @@

<template v-if="resolvedCanControl.includes('width')">
<div class="row mb-3">
<label :for="`${id}-default-width-input`" class="col-sm-3 col-form-label">Default width</label>
<label :for="`${id}-default-width-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-width")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -317,7 +326,7 @@
:id="`${id}-default-width-fixed`"
v-model="type.widthFixed"
/>
<label :for="`${id}-default-width-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-width-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -327,7 +336,7 @@

<template v-if="resolvedCanControl.includes('stroke')">
<div class="row mb-3">
<label :for="`${id}-default-stroke-input`" class="col-sm-3 col-form-label">Default stroke</label>
<label :for="`${id}-default-stroke-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-stroke")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -344,7 +353,7 @@
:id="`${id}-default-stroke-fixed`"
v-model="type.strokeFixed"
/>
<label :for="`${id}-default-stroke-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-stroke-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -354,7 +363,7 @@

<template v-if="resolvedCanControl.includes('mode')">
<div class="row mb-3">
<label :for="`${id}-default-mode-input`" class="col-sm-3 col-form-label">Default routing mode</label>
<label :for="`${id}-default-mode-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.default-route-mode")}}</label>
<div class="col-sm-9">
<div class="row align-items-center">
<div class="col-sm-9">
Expand All @@ -371,7 +380,7 @@
:id="`${id}-default-mode-fixed`"
v-model="type.modeFixed"
/>
<label :for="`${id}-default-mode-fixed`" class="form-check-label">Fixed</label>
<label :for="`${id}-default-mode-fixed`" class="form-check-label">{{i18n.t("edit-type-dialog.fixed")}}</label>
</div>
</div>
</div>
Expand All @@ -383,7 +392,7 @@
</template>

<div class="row mb-3">
<label :for="`${id}-show-in-legend-input`" class="col-sm-3 col-form-label">Legend</label>
<label :for="`${id}-show-in-legend-input`" class="col-sm-3 col-form-label">{{i18n.t("edit-type-dialog.legend")}}</label>
<div class="col-sm-9">
<div class="form-check fm-form-check-with-label">
<input
Expand All @@ -392,23 +401,23 @@
:id="`${id}-show-in-legend-input`"
v-model="type.showInLegend"
/>
<label :for="`${id}-show-in-legend-input`" class="form-check-label">Show in legend</label>
<label :for="`${id}-show-in-legend-input`" class="form-check-label">{{i18n.t("edit-type-dialog.show-in-legend")}}</label>
</div>
<div class="form-text">
An item for this type will be shown in the legend. Any fixed style attributes are applied to it. Dropdown or checkbox fields that control the style generate additional legend items.
{{i18n.t("edit-type-dialog.show-in-legend-description")}}
</div>
</div>
</div>

<h2>Fields</h2>
<div class="table-responseive">
<div class="table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr>
<th style="width: 35%; min-width: 150px">Name</th>
<th style="width: 35%; min-width: 120px">Type</th>
<th style="width: 35%; min-width: 150px">Default value</th>
<th>Delete</th>
<th style="width: 35%; min-width: 150px">{{i18n.t("edit-type-dialog.field-name")}}</th>
<th style="width: 35%; min-width: 120px">{{i18n.t("edit-type-dialog.field-type")}}</th>
<th style="width: 35%; min-width: 150px">{{i18n.t("edit-type-dialog.field-default-value")}}</th>
<th>{{i18n.t("edit-type-dialog.field-delete")}}</th>
<th></th>
</tr>
</thead>
Expand Down Expand Up @@ -440,32 +449,32 @@
<td>
<div class="input-group">
<select class="form-select" v-model="field.type">
<option value="input">Text field</option>
<option value="textarea">Text area</option>
<option value="dropdown">Dropdown</option>
<option value="checkbox">Checkbox</option>
<option value="input">{{i18n.t("edit-type-dialog.field-type-input")}}</option>
<option value="textarea">{{i18n.t("edit-type-dialog.field-type-textarea")}}</option>
<option value="dropdown">{{i18n.t("edit-type-dialog.field-type-dropdown")}}</option>
<option value="checkbox">{{i18n.t("edit-type-dialog.field-type-checkbox")}}</option>
</select>
<template v-if="['dropdown', 'checkbox'].includes(field.type)">
<button type="button" class="btn btn-secondary" @click="editDropdown(field)">Edit</button>
<button type="button" class="btn btn-secondary" @click="editDropdown(field)">{{i18n.t("edit-type-dialog.field-edit")}}</button>
</template>
</div>
</td>
<td class="text-center">
<FieldInput :field="field" v-model="field.default" ignore-default></FieldInput>
</td>
<td class="td-buttons">
<button type="button" class="btn btn-secondary" @click="deleteField(field)">Delete</button>
<button type="button" class="btn btn-secondary" @click="deleteField(field)">{{i18n.t("edit-type-dialog.field-delete")}}</button>
</td>
<td class="td-buttons">
<button type="button" class="btn btn-secondary fm-drag-handle"><Icon icon="resize-vertical" alt="Reorder"></Icon></button>
<button type="button" class="btn btn-secondary fm-drag-handle"><Icon icon="resize-vertical" :alt="i18n.t('edit-type-dialog.field-reorder')"></Icon></button>
</td>
</tr>
</template>
</Draggable>
<tfoot>
<tr>
<td colspan="4">
<button type="button" class="btn btn-secondary" @click="createField()"><Icon icon="plus" alt="Add"></Icon></button>
<button type="button" class="btn btn-secondary" @click="createField()"><Icon icon="plus" :alt="i18n.t('edit-type-dialog.field-add')"></Icon></button>
</td>
<td class="move"></td>
</tr>
Expand Down
Loading

0 comments on commit d60455d

Please sign in to comment.