1277 refacto use symfony translation

This commit is contained in:
Boris Waaub
2025-06-16 10:59:42 +00:00
committed by Julien Fastré
parent 377ae9a9dc
commit a8dd1b3548
47 changed files with 2646 additions and 2400 deletions

View File

@@ -2,21 +2,23 @@
<a
class="btn"
:class="getClassButton"
:title="$t(buttonTitle || '')"
:title="buttonTitle"
@click="openModal"
>
<span v-if="displayTextButton">{{ $t(buttonTitle || "") }}</span>
<span v-if="displayTextButton">{{ buttonTitle }}</span>
</a>
<teleport to="body">
<modal
v-if="modal.showModal"
:modal-dialog-class="modal.modalDialogClass"
@close="modal.showModal = false"
v-if="showModal"
@close="closeModal"
:modal-dialog-class="modalDialogClass"
:show="showModal"
:hide-footer="false"
>
<template #header>
<h3 class="modal-title">
{{ $t(modalTitle) }}
{{ modalTitle }}
</h3>
</template>
@@ -24,15 +26,19 @@
<div class="modal-body">
<div class="search">
<label class="col-form-label" style="float: right">
{{ $tc("add_persons.suggested_counter", suggestedCounter) }}
{{
trans(ADD_PERSONS_SUGGESTED_COUNTER, {
count: suggestedCounter,
})
}}
</label>
<input
id="search-persons"
name="query"
v-model="query"
:placeholder="$t('add_persons.search_some_persons')"
ref="search"
:placeholder="trans(ADD_PERSONS_SEARCH_SOME_PERSONS)"
ref="searchRef"
/>
<i class="fa fa-search fa-lg" />
<i
@@ -46,15 +52,19 @@
<div class="count">
<span>
<a v-if="suggestedCounter > 2" @click="selectAll">
{{ $t("action.check_all") }}
{{ trans(ACTION_CHECK_ALL) }}
</a>
<a v-if="selectedCounter > 0" @click="resetSelection">
<i v-if="suggestedCounter > 2"> </i>
{{ $t("action.reset") }}
{{ trans(ACTION_RESET) }}
</a>
</span>
<span v-if="selectedCounter > 0">
{{ $tc("add_persons.selected_counter", selectedCounter) }}
{{
trans(ADD_PERSONS_SELECTED_COUNTER, {
count: selectedCounter,
})
}}
</span>
</div>
</div>
@@ -63,7 +73,7 @@
<template #body>
<div class="results">
<person-suggestion
v-for="item in this.selectedAndSuggested.slice().reverse()"
v-for="item in selectedAndSuggested.slice().reverse()"
:key="itemKey(item)"
:item="item"
:search="search"
@@ -80,7 +90,7 @@
(options.type.includes('person') ||
options.type.includes('thirdparty'))
"
:button-text="$t('onthefly.create.button', { q: query })"
:button-text="trans(ONTHEFLY_CREATE_BUTTON, { q: query })"
:allowed-types="options.type"
:query="query"
action="create"
@@ -94,333 +104,335 @@
<template #footer>
<button
class="btn btn-create"
@click.prevent="$emit('addNewPersons', { selected, modal })"
@click.prevent="
() => {
$emit('addNewPersons', { selected: selectedComputed });
query = '';
closeModal();
}
"
>
{{ $t("action.add") }}
{{ trans(ACTION_ADD) }}
</button>
</template>
</modal>
</teleport>
</template>
<script>
import Modal from "ChillMainAssets/vuejs/_components/Modal";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import PersonSuggestion from "./AddPersons/PersonSuggestion";
<script setup lang="ts">
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import Modal from "ChillMainAssets/vuejs/_components/Modal.vue";
import { ref, reactive, computed, nextTick, watch, shallowRef } from "vue";
import PersonSuggestion from "./AddPersons/PersonSuggestion.vue";
import { searchEntities } from "ChillPersonAssets/vuejs/_api/AddPersons";
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
export default {
name: "AddPersons",
components: {
Modal,
PersonSuggestion,
OnTheFly,
},
props: ["buttonTitle", "modalTitle", "options"],
emits: ["addNewPersons"],
data() {
return {
modal: {
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
},
search: {
query: "",
previousQuery: "",
currentSearchQueryController: null,
suggested: [],
selected: [],
priorSuggestion: {},
},
};
},
computed: {
query: {
set(query) {
return this.setQuery(query);
},
get() {
return this.search.query;
},
},
queryLength() {
return this.search.query.length;
},
suggested() {
return this.search.suggested;
},
suggestedCounter() {
return this.search.suggested.length;
},
selected() {
return this.search.selected;
},
selectedCounter() {
return this.search.selected.length;
},
selectedAndSuggested() {
this.addPriorSuggestion();
const uniqBy = (a, key) => [
...new Map(a.map((x) => [key(x), x])).values(),
];
let union = [
...new Set([
...this.suggested.slice().reverse(),
...this.selected.slice().reverse(),
]),
];
return uniqBy(union, (k) => k.key);
},
getClassButton() {
let size =
typeof this.options.button !== "undefined" &&
typeof this.options.button.size !== "undefined"
? this.options.button.size
: "";
let type =
typeof this.options.button !== "undefined" &&
typeof this.options.button.type !== "undefined"
? this.options.button.type
: "btn-create";
return size ? size + " " + type : type;
},
displayTextButton() {
return typeof this.options.button !== "undefined" &&
typeof this.options.button.display !== "undefined"
? this.options.button.display
: true;
},
checkUniq() {
if (this.options.uniq === true) {
return "radio";
}
return "checkbox";
},
priorSuggestion() {
return this.search.priorSuggestion;
},
hasPriorSuggestion() {
return this.search.priorSuggestion.key ? true : false;
},
},
methods: {
openModal() {
this.modal.showModal = true;
this.$nextTick(function () {
this.$refs.search.focus();
import {
trans,
ADD_PERSONS_SUGGESTED_COUNTER,
ADD_PERSONS_SEARCH_SOME_PERSONS,
ADD_PERSONS_SELECTED_COUNTER,
ONTHEFLY_CREATE_BUTTON,
ACTION_CHECK_ALL,
ACTION_RESET,
ACTION_ADD,
} from "translator";
import {
Suggestion,
Search,
Result as OriginalResult,
SearchOptions,
} from "ChillPersonAssets/types";
// Extend Result type to include optional addressId
type Result = OriginalResult & { addressId?: number };
const props = defineProps({
suggested: { type: Array as () => Suggestion[], default: () => [] },
selected: { type: Array as () => Suggestion[], default: () => [] },
buttonTitle: { type: String, required: true },
modalTitle: { type: String, required: true },
options: { type: Object as () => SearchOptions, required: true },
});
defineEmits(["addNewPersons"]);
const showModal = ref(false);
const modalDialogClass = ref("modal-dialog-scrollable modal-xl");
const modal = shallowRef({
showModal: false,
modalDialogClass: "modal-dialog-scrollable modal-xl",
});
const search = reactive({
query: "" as string,
previousQuery: "" as string,
currentSearchQueryController: null as AbortController | null,
suggested: props.suggested as Suggestion[],
selected: props.selected as Suggestion[],
priorSuggestion: {} as Partial<Suggestion>,
});
const searchRef = ref<HTMLInputElement | null>(null);
const onTheFly = ref<InstanceType<typeof OnTheFly> | null>(null);
const query = computed({
get: () => search.query,
set: (val) => setQuery(val),
});
const queryLength = computed(() => search.query.length);
const suggestedCounter = computed(() => search.suggested.length);
const selectedComputed = computed(() => search.selected);
const selectedCounter = computed(() => search.selected.length);
const getClassButton = computed(() => {
let size = props.options?.button?.size ?? "";
let type = props.options?.button?.type ?? "btn-create";
return size ? size + " " + type : type;
});
const displayTextButton = computed(() =>
props.options?.button?.display !== undefined
? props.options.button.display
: true,
);
const checkUniq = computed(() =>
props.options.uniq === true ? "radio" : "checkbox",
);
const priorSuggestion = computed(() => search.priorSuggestion);
const hasPriorSuggestion = computed(() => !!search.priorSuggestion.key);
const itemKey = (item: Suggestion) => item.result.type + item.result.id;
function addPriorSuggestion() {
if (hasPriorSuggestion.value) {
// Type assertion is safe here due to the checks above
search.suggested.unshift(priorSuggestion.value as Suggestion);
search.selected.unshift(priorSuggestion.value as Suggestion);
newPriorSuggestion(null);
}
}
const selectedAndSuggested = computed(() => {
addPriorSuggestion();
const uniqBy = (a: Suggestion[], key: (item: Suggestion) => string) => [
...new Map(a.map((x) => [key(x), x])).values(),
];
let union = [
...new Set([
...search.suggested.slice().reverse(),
...search.selected.slice().reverse(),
]),
];
return uniqBy(union, (k: Suggestion) => k.key);
});
function openModal() {
showModal.value = true;
nextTick(() => {
if (searchRef.value) searchRef.value.focus();
});
}
function closeModal() {
showModal.value = false;
}
function setQuery(q: string) {
search.query = q;
// Clear previous search if any
if (search.currentSearchQueryController) {
search.currentSearchQueryController.abort();
search.currentSearchQueryController = null;
}
if (q === "") {
loadSuggestions([]);
return;
}
// Debounce delay based on query length
const delay = q.length > 3 ? 300 : 700;
setTimeout(() => {
// Only search if query hasn't changed in the meantime
if (q !== search.query) return;
search.currentSearchQueryController = new AbortController();
searchEntities(
{ query: q, options: props.options },
search.currentSearchQueryController.signal,
)
.then((suggested: Search) => {
loadSuggestions(suggested.results);
})
.catch((error: DOMException) => {
if (error instanceof DOMException && error.name === "AbortError") {
// Request was aborted, ignore
return;
}
throw error;
});
},
setQuery(query) {
this.search.query = query;
}, delay);
}
setTimeout(
function () {
if (query === "") {
this.loadSuggestions([]);
return;
}
if (query === this.search.query) {
if (this.search.currentSearchQueryController !== null) {
this.search.currentSearchQueryController.abort();
}
this.search.currentSearchQueryController = new AbortController();
searchEntities(
{ query, options: this.options },
this.search.currentSearchQueryController.signal,
)
.then(
(suggested) =>
new Promise((resolve) => {
this.loadSuggestions(suggested.results);
resolve();
}),
)
.catch((error) => {
if (error instanceof DOMException) {
if (error.name === "AbortError") {
console.log("request aborted due to user continue typing");
return;
}
}
function loadSuggestions(suggestedArr: Suggestion[]) {
search.suggested = suggestedArr;
search.suggested.forEach((item) => {
item.key = itemKey(item);
});
}
throw error;
});
}
}.bind(this),
query.length > 3 ? 300 : 700,
);
},
loadSuggestions(suggested) {
this.search.suggested = suggested;
this.search.suggested.forEach(function (item) {
item.key = this.itemKey(item);
}, this);
},
updateSelected(value) {
//console.log('value', value);
this.search.selected = value;
},
resetSearch() {
this.resetSelection();
this.resetSuggestion();
},
resetSuggestion() {
this.search.query = "";
this.search.suggested = [];
},
resetSelection() {
this.search.selected = [];
},
selectAll() {
this.search.suggested.forEach(function (item) {
this.search.selected.push(item);
}, this);
},
itemKey(item) {
return item.result.type + item.result.id;
},
addPriorSuggestion() {
// console.log('prior suggestion', this.priorSuggestion);
if (this.hasPriorSuggestion) {
// console.log('addPriorSuggestion',);
this.suggested.unshift(this.priorSuggestion);
this.selected.unshift(this.priorSuggestion);
function updateSelected(value: Suggestion[]) {
search.selected = value;
}
this.newPriorSuggestion(null);
}
},
newPriorSuggestion(entity) {
// console.log('newPriorSuggestion', entity);
if (entity !== null) {
let suggestion = {
key: entity.type + entity.id,
relevance: 0.5,
result: entity,
};
this.search.priorSuggestion = suggestion;
// console.log('search priorSuggestion', this.search.priorSuggestion);
this.addPriorSuggestion(suggestion);
} else {
this.search.priorSuggestion = {};
}
},
saveFormOnTheFly({ type, data }) {
console.log(
"saveFormOnTheFly from addPersons, type",
type,
", data",
function resetSuggestion() {
search.query = "";
search.suggested = [];
}
function resetSelection() {
search.selected = [];
}
function resetSearch() {
resetSelection();
resetSuggestion();
}
function selectAll() {
search.suggested.forEach((item) => {
search.selected.push(item);
});
}
function newPriorSuggestion(entity: Result | null) {
if (entity !== null) {
let suggestion = {
key: entity.type + entity.id,
relevance: 0.5,
result: entity,
};
search.priorSuggestion = suggestion;
} else {
search.priorSuggestion = {};
}
}
async function saveFormOnTheFly({
type,
data,
}: {
type: string;
data: Result;
}) {
try {
if (type === "person") {
const responsePerson: Result = await makeFetch(
"POST",
"/api/1.0/person/person.json",
data,
);
if (type === "person") {
makeFetch("POST", "/api/1.0/person/person.json", data)
.then((responsePerson) => {
this.newPriorSuggestion(responsePerson);
this.$refs.onTheFly.closeModal();
newPriorSuggestion(responsePerson);
if (onTheFly.value) onTheFly.value.closeModal();
if (null !== data.addressId) {
const household = {
type: "household",
};
const address = {
id: data.addressId,
};
makeFetch("POST", "/api/1.0/person/household.json", household)
.then((responseHousehold) => {
const member = {
concerned: [
{
person: {
type: "person",
id: responsePerson.id,
},
start_date: {
// TODO: use date.ts methods (low priority)
datetime: `${new Date().toISOString().split("T")[0]}T00:00:00+02:00`,
},
holder: false,
comment: null,
},
],
destination: {
type: "household",
id: responseHousehold.id,
},
composition: null,
};
return makeFetch(
"POST",
"/api/1.0/person/household/members/move.json",
member,
)
.then((_response) => {
makeFetch(
"POST",
`/api/1.0/person/household/${responseHousehold.id}/address.json`,
address,
)
.then((_response) => {
console.log(_response);
})
.catch((error) => {
if (error.name === "ValidationException") {
for (let v of error.violations) {
this.$toast.open({ message: v });
}
} else {
this.$toast.open({ message: "An error occurred" });
}
});
})
.catch((error) => {
if (error.name === "ValidationException") {
for (let v of error.violations) {
this.$toast.open({ message: v });
}
} else {
this.$toast.open({ message: "An error occurred" });
}
});
})
.catch((error) => {
if (error.name === "ValidationException") {
for (let v of error.violations) {
this.$toast.open({ message: v });
}
} else {
this.$toast.open({ message: "An error occurred" });
}
});
}
})
.catch((error) => {
if (error.name === "ValidationException") {
for (let v of error.violations) {
this.$toast.open({ message: v });
}
} else {
this.$toast.open({ message: "An error occurred" });
}
});
} else if (type === "thirdparty") {
makeFetch("POST", "/api/1.0/thirdparty/thirdparty.json", data)
.then((response) => {
this.newPriorSuggestion(response);
this.$refs.onTheFly.closeModal();
})
.catch((error) => {
if (error.name === "ValidationException") {
for (let v of error.violations) {
this.$toast.open({ message: v });
}
} else {
this.$toast.open({ message: "An error occurred" });
}
});
if (data.addressId != null) {
const household = { type: "household" };
const address = { id: data.addressId };
try {
const responseHousehold: Result = await makeFetch(
"POST",
"/api/1.0/person/household.json",
household,
);
const member = {
concerned: [
{
person: {
type: "person",
id: responsePerson.id,
},
start_date: {
datetime: `${new Date().toISOString().split("T")[0]}T00:00:00+02:00`,
},
holder: false,
comment: null,
},
],
destination: {
type: "household",
id: responseHousehold.id,
},
composition: null,
};
await makeFetch(
"POST",
"/api/1.0/person/household/members/move.json",
member,
);
try {
const _response = await makeFetch(
"POST",
`/api/1.0/person/household/${responseHousehold.id}/address.json`,
address,
);
console.log(_response);
} catch (error) {
console.error(error);
}
} catch (error) {
console.error(error);
}
}
},
} else if (type === "thirdparty") {
const response: Result = await makeFetch(
"POST",
"/api/1.0/thirdparty/thirdparty.json",
data,
);
newPriorSuggestion(response);
if (onTheFly.value) onTheFly.value.closeModal();
}
} catch (error) {
console.error(error);
}
}
watch(
() => props.selected,
(newSelected) => {
search.selected = newSelected;
},
};
{ deep: true },
);
watch(
() => props.suggested,
(newSuggested) => {
search.suggested = newSuggested;
},
{ deep: true },
);
watch(
() => modal,
(val) => {
showModal.value = val.value.showModal;
modalDialogClass.value = val.value.modalDialogClass;
},
{ deep: true },
);
defineExpose({
resetSearch,
showModal,
});
</script>
<style lang="scss">
@@ -438,7 +450,6 @@ div.body-head {
input {
width: 100%;
padding: 1.2em 1.5em 1.2em 2.5em;
//margin: 1em 0;
}
i {
position: absolute;