mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-09-28 17:44:58 +00:00
Merge remote-tracking branch 'origin/ticket-app-master' into ticket-app-master
This commit is contained in:
@@ -1,12 +1,15 @@
|
||||
import { StoredObject } from "ChillDocStoreAssets/types";
|
||||
import {
|
||||
Address,
|
||||
Center,
|
||||
Civility,
|
||||
DateTime,
|
||||
Household,
|
||||
ThirdParty,
|
||||
User,
|
||||
UserGroup,
|
||||
WorkflowAvailable,
|
||||
} from "../../../ChillMainBundle/Resources/public/types";
|
||||
import { StoredObject } from "../../../ChillDocStoreBundle/Resources/public/types";
|
||||
|
||||
export interface Person {
|
||||
id: number;
|
||||
@@ -41,3 +44,61 @@ export interface AccompanyingPeriodWorkEvaluationDocument {
|
||||
workflows_availables: WorkflowAvailable[];
|
||||
workflows: object[];
|
||||
}
|
||||
|
||||
export type Entities = (UserGroup | User | Person | ThirdParty | Household) & {
|
||||
address?: Address | null;
|
||||
kind?: string;
|
||||
text?: string;
|
||||
profession?: string;
|
||||
};
|
||||
|
||||
export type Result = Entities & {
|
||||
parent?: Entities | null;
|
||||
};
|
||||
|
||||
export interface Suggestion {
|
||||
key: string;
|
||||
relevance: number;
|
||||
result: Result;
|
||||
}
|
||||
|
||||
export interface SearchPagination {
|
||||
first: number;
|
||||
items_per_page: number;
|
||||
next: number | null;
|
||||
previous: number | null;
|
||||
more: boolean;
|
||||
}
|
||||
|
||||
export interface Search {
|
||||
count: number;
|
||||
pagination: SearchPagination;
|
||||
results: Suggestion[];
|
||||
}
|
||||
|
||||
export interface SearchOptions {
|
||||
uniq: boolean;
|
||||
type: string[];
|
||||
priority: number | null;
|
||||
button: {
|
||||
size: string;
|
||||
class: string;
|
||||
type: string;
|
||||
display: string;
|
||||
};
|
||||
}
|
||||
|
||||
export class MakeFetchException extends Error {
|
||||
sta: number;
|
||||
txt: string;
|
||||
violations: unknown | null;
|
||||
|
||||
constructor(txt: string, sta: number, violations: unknown | null = null) {
|
||||
super(txt);
|
||||
this.name = "ValidationException";
|
||||
this.sta = sta;
|
||||
this.txt = txt;
|
||||
this.violations = violations;
|
||||
Object.setPrototypeOf(this, MakeFetchException.prototype);
|
||||
}
|
||||
}
|
||||
|
@@ -1,7 +1,15 @@
|
||||
import { Search, SearchOptions } from "ChillPersonAssets/types";
|
||||
|
||||
/*
|
||||
* Build query string with query and options
|
||||
*/
|
||||
const parametersToString = ({ query, options }) => {
|
||||
const parametersToString = ({
|
||||
query,
|
||||
options,
|
||||
}: {
|
||||
query: string;
|
||||
options: SearchOptions;
|
||||
}) => {
|
||||
let types = "";
|
||||
options.type.forEach(function (type) {
|
||||
types += "&type[]=" + type;
|
||||
@@ -16,11 +24,13 @@ const parametersToString = ({ query, options }) => {
|
||||
* @query string - the query to search for
|
||||
* @deprecated
|
||||
*/
|
||||
const searchPersons = ({ query, options }, signal) => {
|
||||
console.err("deprecated");
|
||||
let queryStr = parametersToString({ query, options });
|
||||
let url = `/fr/search.json?name=person_regular&${queryStr}`;
|
||||
let fetchOpts = {
|
||||
export function searchPersons(
|
||||
{ query, options }: { query: string; options: SearchOptions },
|
||||
signal: AbortSignal,
|
||||
): Promise<Search> {
|
||||
const queryStr = parametersToString({ query, options });
|
||||
const url = `/fr/search.json?name=person_regular&${queryStr}`;
|
||||
const fetchOpts = {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json;charset=utf-8",
|
||||
@@ -34,7 +44,7 @@ const searchPersons = ({ query, options }, signal) => {
|
||||
}
|
||||
throw Error("Error with request resource response");
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/*
|
||||
* Endpoint v.2 chill_main_search_global
|
||||
@@ -43,15 +53,16 @@ const searchPersons = ({ query, options }, signal) => {
|
||||
* @param query string - the query to search for
|
||||
*
|
||||
*/
|
||||
const searchEntities = ({ query, options }, signal) => {
|
||||
let queryStr = parametersToString({ query, options });
|
||||
let url = `/api/1.0/search.json?${queryStr}`;
|
||||
export function searchEntities(
|
||||
{ query, options }: { query: string; options: SearchOptions },
|
||||
signal: AbortSignal,
|
||||
): Promise<Search> {
|
||||
const queryStr = parametersToString({ query, options });
|
||||
const url = `/api/1.0/search.json?${queryStr}`;
|
||||
return fetch(url, { signal }).then((response) => {
|
||||
if (response.ok) {
|
||||
return response.json();
|
||||
}
|
||||
throw Error("Error with request resource response");
|
||||
});
|
||||
};
|
||||
|
||||
export { searchPersons, searchEntities };
|
||||
}
|
@@ -6,48 +6,39 @@
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods.ts";
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
|
||||
export default {
|
||||
name: "SetReferrer",
|
||||
props: {
|
||||
suggested: {
|
||||
type: Array,
|
||||
required: false,
|
||||
//default: [],
|
||||
},
|
||||
periodId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
const props = defineProps({
|
||||
suggested: {
|
||||
type: Array,
|
||||
required: false,
|
||||
// default: [],
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
/*suggested: [
|
||||
{id: 5, text: 'Robert'}, {id: 8, text: 'Monique'},
|
||||
]*/
|
||||
};
|
||||
periodId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
emits: ["referrerSet"],
|
||||
methods: {
|
||||
setReferrer: function (ref) {
|
||||
const url = `/api/1.0/person/accompanying-course/${this.periodId}.json`;
|
||||
const body = {
|
||||
type: "accompanying_period",
|
||||
user: { id: ref.id, type: ref.type },
|
||||
};
|
||||
});
|
||||
|
||||
return makeFetch("PATCH", url, body)
|
||||
.then((response) => {
|
||||
this.$emit("referrerSet", ref);
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
const emit = defineEmits(["referrerSet"]);
|
||||
|
||||
function setReferrer(ref) {
|
||||
const url = `/api/1.0/person/accompanying-course/${props.periodId}.json`;
|
||||
const body = {
|
||||
type: "accompanying_period",
|
||||
user: { id: ref.id, type: ref.type },
|
||||
};
|
||||
|
||||
return makeFetch("PATCH", url, body)
|
||||
.then(() => {
|
||||
emit("referrerSet", ref);
|
||||
})
|
||||
.catch((error) => {
|
||||
throw error;
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
@@ -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;
|
||||
|
@@ -3,87 +3,80 @@
|
||||
<label>
|
||||
<div>
|
||||
<input
|
||||
v-bind:type="type"
|
||||
:type="type"
|
||||
v-model="selected"
|
||||
name="item"
|
||||
v-bind:id="item"
|
||||
v-bind:value="setValueByType(item, type)"
|
||||
:id="item.key"
|
||||
:value="setValueByType(item, type)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<suggestion-person
|
||||
v-if="item.result.type === 'person'"
|
||||
v-bind:item="item"
|
||||
>
|
||||
</suggestion-person>
|
||||
:item="item"
|
||||
></suggestion-person>
|
||||
|
||||
<suggestion-third-party
|
||||
v-if="item.result.type === 'thirdparty'"
|
||||
@newPriorSuggestion="newPriorSuggestion"
|
||||
v-bind:item="item"
|
||||
>
|
||||
</suggestion-third-party>
|
||||
:item="item"
|
||||
></suggestion-third-party>
|
||||
|
||||
<suggestion-user v-if="item.result.type === 'user'" v-bind:item="item">
|
||||
</suggestion-user>
|
||||
<suggestion-user
|
||||
v-if="item.result.type === 'user'"
|
||||
:item="item"
|
||||
></suggestion-user>
|
||||
|
||||
<suggestion-user-group
|
||||
v-if="item.result.type === 'user_group'"
|
||||
v-bind:item="item"
|
||||
>
|
||||
></suggestion-user-group
|
||||
>
|
||||
:item="item"
|
||||
></suggestion-user-group>
|
||||
|
||||
<suggestion-household
|
||||
v-if="item.result.type === 'household'"
|
||||
v-bind:item="item"
|
||||
>
|
||||
</suggestion-household>
|
||||
:item="item"
|
||||
></suggestion-household>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SuggestionPerson from "./TypePerson";
|
||||
import SuggestionThirdParty from "./TypeThirdParty";
|
||||
import SuggestionUser from "./TypeUser";
|
||||
import SuggestionHousehold from "./TypeHousehold";
|
||||
import SuggestionUserGroup from "./TypeUserGroup";
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
|
||||
export default {
|
||||
name: "PersonSuggestion",
|
||||
components: {
|
||||
SuggestionPerson,
|
||||
SuggestionThirdParty,
|
||||
SuggestionUser,
|
||||
SuggestionHousehold,
|
||||
SuggestionUserGroup,
|
||||
},
|
||||
props: ["item", "search", "type"],
|
||||
emits: ["updateSelected", "newPriorSuggestion"],
|
||||
computed: {
|
||||
selected: {
|
||||
set(value) {
|
||||
//console.log('value', value);
|
||||
this.$emit("updateSelected", value);
|
||||
},
|
||||
get() {
|
||||
return this.search.selected;
|
||||
},
|
||||
},
|
||||
isChecked() {
|
||||
return this.search.selected.indexOf(this.item) === -1 ? false : true;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
setValueByType(value, type) {
|
||||
return type === "radio" ? [value] : value;
|
||||
},
|
||||
newPriorSuggestion(response) {
|
||||
this.$emit("newPriorSuggestion", response);
|
||||
},
|
||||
},
|
||||
};
|
||||
// Components
|
||||
import SuggestionPerson from "./TypePerson.vue";
|
||||
import SuggestionThirdParty from "./TypeThirdParty.vue";
|
||||
import SuggestionUser from "./TypeUser.vue";
|
||||
import SuggestionHousehold from "./TypeHousehold.vue";
|
||||
import SuggestionUserGroup from "./TypeUserGroup.vue";
|
||||
|
||||
// Types
|
||||
import { Result, Suggestion } from "ChillPersonAssets/types";
|
||||
|
||||
const props = defineProps<{
|
||||
item: Suggestion;
|
||||
search: { selected: Suggestion[] };
|
||||
type: string;
|
||||
}>();
|
||||
const emit = defineEmits(["updateSelected", "newPriorSuggestion"]);
|
||||
|
||||
// v-model for selected
|
||||
const selected = computed({
|
||||
get: () => props.search.selected,
|
||||
set: (value) => emit("updateSelected", value),
|
||||
});
|
||||
|
||||
const isChecked = computed(
|
||||
() => props.search.selected.indexOf(props.item) !== -1,
|
||||
);
|
||||
|
||||
function setValueByType(value: Suggestion, type: string) {
|
||||
return type === "radio" ? [value] : value;
|
||||
}
|
||||
|
||||
function newPriorSuggestion(response: Result) {
|
||||
emit("newPriorSuggestion", response);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
@@ -1,26 +1,25 @@
|
||||
<template>
|
||||
<div class="container household">
|
||||
<household-render-box
|
||||
<HouseholdRenderBox
|
||||
:household="item.result"
|
||||
:is-address-multiline="false"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="right_actions">
|
||||
<badge-entity :entity="item.result" :options="{ displayLong: true }" />
|
||||
<BadgeEntity :entity="item.result" :options="{ displayLong: true }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup lang="ts">
|
||||
import { defineProps } from "vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import HouseholdRenderBox from "ChillPersonAssets/vuejs/_components/Entity/HouseholdRenderBox.vue";
|
||||
import { Suggestion } from "ChillPersonAssets/types";
|
||||
|
||||
export default {
|
||||
name: "SuggestionHousehold",
|
||||
components: {
|
||||
BadgeEntity,
|
||||
HouseholdRenderBox,
|
||||
},
|
||||
props: ["item"],
|
||||
};
|
||||
interface TypeHouseholdProps {
|
||||
item: Suggestion;
|
||||
}
|
||||
|
||||
defineProps<TypeHouseholdProps>();
|
||||
</script>
|
||||
|
@@ -4,11 +4,11 @@
|
||||
<person-text :person="item.result" />
|
||||
</span>
|
||||
<span class="birthday" v-if="hasBirthdate">
|
||||
{{ $d(item.result.birthdate.datetime, "short") }}
|
||||
{{ formatDate(item.result.birthdate?.datetime, "short") }}
|
||||
</span>
|
||||
<span class="location" v-if="hasAddress">
|
||||
{{ item.result.current_household_address.text }} -
|
||||
{{ item.result.current_household_address.postcode.name }}
|
||||
{{ item.result.current_household_address?.text }} -
|
||||
{{ item.result.current_household_address?.postcode?.name }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -18,26 +18,38 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineProps } from "vue";
|
||||
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
|
||||
|
||||
export default {
|
||||
name: "SuggestionPerson",
|
||||
components: {
|
||||
OnTheFly,
|
||||
BadgeEntity,
|
||||
PersonText,
|
||||
},
|
||||
props: ["item"],
|
||||
computed: {
|
||||
hasBirthdate() {
|
||||
return this.item.result.birthdate !== null;
|
||||
},
|
||||
hasAddress() {
|
||||
return this.item.result.current_household_address !== null;
|
||||
},
|
||||
},
|
||||
};
|
||||
function formatDate(dateString: string | undefined, format: string) {
|
||||
if (!dateString) return "";
|
||||
// Use Intl.DateTimeFormat or your preferred formatting here
|
||||
const date = new Date(dateString);
|
||||
if (format === "short") {
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
return date.toString();
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
item: {
|
||||
result: {
|
||||
id: number | string;
|
||||
birthdate: { datetime: string } | null;
|
||||
current_household_address: {
|
||||
text: string;
|
||||
postcode: { name: string };
|
||||
} | null;
|
||||
// add other fields as needed
|
||||
};
|
||||
};
|
||||
}>();
|
||||
|
||||
const hasBirthdate = computed(() => props.item.result.birthdate !== null);
|
||||
const hasAddress = computed(
|
||||
() => props.item.result.current_household_address !== null,
|
||||
);
|
||||
</script>
|
||||
|
@@ -7,13 +7,13 @@
|
||||
<span class="name"> {{ item.result.text }} </span>
|
||||
<span class="location">
|
||||
<template v-if="hasAddress">
|
||||
{{ getAddress.text }} -
|
||||
{{ getAddress.postcode.name }}
|
||||
{{ getAddress?.text }} -
|
||||
{{ getAddress?.postcode?.name }}
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="tpartyparent" v-if="hasParent">
|
||||
<span class="name"> > {{ item.result.parent.text }} </span>
|
||||
<span class="name"> > {{ item.result.parent?.text }} </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -30,11 +30,72 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from "vue";
|
||||
import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import { makeFetch } from "ChillMainAssets/lib/api/apiMethods";
|
||||
import { useToast } from "vue-toast-notification";
|
||||
import { ThirdParty } from "ChillMainAssets/types";
|
||||
import { Result, Suggestion } from "ChillPersonAssets/types";
|
||||
|
||||
interface TypeThirdPartyProps {
|
||||
item: Suggestion;
|
||||
}
|
||||
|
||||
const props = defineProps<TypeThirdPartyProps>();
|
||||
|
||||
const emit = defineEmits<(e: "newPriorSuggestion", payload: unknown) => void>();
|
||||
|
||||
const onTheFly = ref<InstanceType<typeof OnTheFly> | null>(null);
|
||||
const toast = useToast();
|
||||
|
||||
const hasAddress = computed(() => {
|
||||
if (props.item.result.address !== null) {
|
||||
return true;
|
||||
}
|
||||
if (props.item.result.parent !== null) {
|
||||
if (props.item.result.parent) {
|
||||
return props.item.result.parent.address !== null;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const hasParent = computed(() => {
|
||||
return props.item.result.parent !== null;
|
||||
});
|
||||
|
||||
const getAddress = computed(() => {
|
||||
if (props.item.result.address !== null) {
|
||||
return props.item.result.address;
|
||||
}
|
||||
if (props.item.result.parent && props.item.result.parent.address !== null) {
|
||||
return props.item.result.parent.address;
|
||||
}
|
||||
return null;
|
||||
});
|
||||
|
||||
function saveFormOnTheFly({ data }: { data: ThirdParty }) {
|
||||
makeFetch("POST", "/api/1.0/thirdparty/thirdparty.json", data)
|
||||
.then((response: unknown) => {
|
||||
const result = response as Result;
|
||||
emit("newPriorSuggestion", result);
|
||||
if (onTheFly.value) onTheFly.value.closeModal();
|
||||
})
|
||||
.catch((error: unknown) => {
|
||||
const errorResponse = error as { name: string; violations: string[] };
|
||||
if (errorResponse.name === "ValidationException") {
|
||||
for (let v of errorResponse.violations) {
|
||||
if (toast) toast.open({ message: v });
|
||||
}
|
||||
} else {
|
||||
if (toast) toast.open({ message: "An error occurred" });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// i18n config (if needed elsewhere)
|
||||
const i18n = {
|
||||
messages: {
|
||||
fr: {
|
||||
@@ -46,59 +107,9 @@ const i18n = {
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: "SuggestionThirdParty",
|
||||
components: {
|
||||
OnTheFly,
|
||||
BadgeEntity,
|
||||
},
|
||||
props: ["item"],
|
||||
emits: ["newPriorSuggestion"],
|
||||
defineExpose({
|
||||
i18n,
|
||||
computed: {
|
||||
hasAddress() {
|
||||
if (this.$props.item.result.address !== null) {
|
||||
return true;
|
||||
}
|
||||
if (this.$props.item.result.parent !== null) {
|
||||
return this.$props.item.result.parent.address !== null;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
hasParent() {
|
||||
return this.$props.item.result.parent !== null;
|
||||
},
|
||||
getAddress() {
|
||||
if (this.$props.item.result.address !== null) {
|
||||
return this.$props.item.result.address;
|
||||
}
|
||||
if (this.$props.item.result.parent.address !== null) {
|
||||
return this.$props.item.result.parent.address;
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
saveFormOnTheFly({ data }) {
|
||||
makeFetch("POST", "/api/1.0/thirdparty/thirdparty.json", data)
|
||||
.then((response) => {
|
||||
this.$emit("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" });
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@@ -1,31 +1,31 @@
|
||||
<template>
|
||||
<div class="container usercontainer">
|
||||
<div class="user-identification">
|
||||
<user-render-box-badge :user="item.result" />
|
||||
<UserRenderBoxBadge :user="item.result" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_actions">
|
||||
<badge-entity :entity="item.result" :options="{ displayLong: true }" />
|
||||
<BadgeEntity :entity="item.result" :options="{ displayLong: true }" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts" setup>
|
||||
import { computed, defineProps } from "vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
|
||||
import { Suggestion } from "ChillPersonAssets/types";
|
||||
|
||||
export default {
|
||||
name: "SuggestionUser",
|
||||
components: {
|
||||
UserRenderBoxBadge,
|
||||
BadgeEntity,
|
||||
},
|
||||
props: ["item"],
|
||||
computed: {
|
||||
hasParent() {
|
||||
return this.$props.item.result.parent !== null;
|
||||
},
|
||||
},
|
||||
};
|
||||
interface TypeUserProps {
|
||||
item: Suggestion;
|
||||
}
|
||||
|
||||
const props = defineProps<TypeUserProps>();
|
||||
|
||||
const hasParent = computed(() => props.item.result.parent !== null);
|
||||
|
||||
defineExpose({
|
||||
hasParent,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
@@ -1,25 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ResultItem,
|
||||
UserGroup,
|
||||
} from "../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import UserRenderBoxBadge from "ChillMainAssets/vuejs/_components/Entity/UserRenderBoxBadge.vue";
|
||||
import UserGroupRenderBox from "ChillMainAssets/vuejs/_components/Entity/UserGroupRenderBox.vue";
|
||||
|
||||
interface TypeUserGroupProps {
|
||||
item: ResultItem<UserGroup>;
|
||||
}
|
||||
|
||||
const props = defineProps<TypeUserGroupProps>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="container user-group-container">
|
||||
<div class="user-group-identification">
|
||||
<user-group-render-box
|
||||
:user-group="props.item.result"
|
||||
></user-group-render-box>
|
||||
<user-group-render-box :user-group="props.item.result as UserGroup" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_actions">
|
||||
@@ -27,4 +9,16 @@ const props = defineProps<TypeUserGroupProps>();
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { UserGroup } from "../../../../../../ChillMainBundle/Resources/public/types";
|
||||
import UserGroupRenderBox from "ChillMainAssets/vuejs/_components/Entity/UserGroupRenderBox.vue";
|
||||
import { Suggestion } from "ChillPersonAssets/types";
|
||||
|
||||
interface TypeUserGroupProps {
|
||||
item: Suggestion;
|
||||
}
|
||||
|
||||
const props = defineProps<TypeUserGroupProps>();
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
@@ -5,11 +5,11 @@
|
||||
<!-- identifier -->
|
||||
<div v-if="isHouseholdNew()" class="h4">
|
||||
<i class="fa fa-home" />
|
||||
{{ $t("new_household") }}
|
||||
{{ trans(RENDERBOX_NEW_HOUSEHOLD) }}
|
||||
</div>
|
||||
<div v-else class="h4">
|
||||
<i class="fa fa-home" />
|
||||
{{ $t("household_number", { number: household.id }) }}
|
||||
{{ trans(RENDERBOX_HOUSEHOLD_NUMBER, { number: household.id }) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-col">
|
||||
@@ -18,7 +18,7 @@
|
||||
<li
|
||||
v-if="hasCurrentMembers"
|
||||
class="members"
|
||||
:title="$t('current_members')"
|
||||
:title="trans(RENDERBOX_CURRENT_MEMBERS)"
|
||||
>
|
||||
<span
|
||||
v-for="m in currentMembers()"
|
||||
@@ -42,9 +42,9 @@
|
||||
</person-render-box>
|
||||
</span>
|
||||
</li>
|
||||
<li v-else class="members" :title="$t('current_members')">
|
||||
<li v-else class="members" :title="trans(RENDERBOX_CURRENT_MEMBERS)">
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("no_members_yet") }}
|
||||
{{ trans(RENDERBOX_NO_MEMBERS_YET) }}
|
||||
</p>
|
||||
</li>
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
</li>
|
||||
<li v-else>
|
||||
<span class="chill-no-data-statement">{{
|
||||
$t("no_current_address")
|
||||
trans(RENDERBOX_NO_CURRENT_ADDRESS)
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -65,89 +65,82 @@
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import PersonRenderBox from "ChillPersonAssets/vuejs/_components/Entity/PersonRenderBox.vue";
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import {
|
||||
trans,
|
||||
RENDERBOX_NEW_HOUSEHOLD,
|
||||
RENDERBOX_HOUSEHOLD_NUMBER,
|
||||
RENDERBOX_CURRENT_MEMBERS,
|
||||
RENDERBOX_NO_MEMBERS_YET,
|
||||
RENDERBOX_NO_CURRENT_ADDRESS,
|
||||
} from "translator";
|
||||
|
||||
const i18n = {
|
||||
messages: {
|
||||
fr: {
|
||||
household_number: "Ménage n°{number}",
|
||||
current_members: "Membres actuels",
|
||||
no_current_address: "Sans adresse actuellement",
|
||||
new_household: "Nouveau ménage",
|
||||
no_members_yet: "Aucun membre actuellement",
|
||||
holder: "titulaire",
|
||||
},
|
||||
},
|
||||
};
|
||||
const props = defineProps({
|
||||
household: { type: Object, required: true },
|
||||
isAddressMultiline: { type: Boolean, default: false },
|
||||
});
|
||||
|
||||
export default {
|
||||
name: "HouseholdRenderBox",
|
||||
props: ["household", "isAddressMultiline"],
|
||||
components: {
|
||||
PersonRenderBox,
|
||||
AddressRenderBox,
|
||||
},
|
||||
i18n,
|
||||
computed: {
|
||||
isMultiline() {
|
||||
return typeof this.isAddressMultiline !== "undefined"
|
||||
? this.isAddressMultiline
|
||||
: false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
hasCurrentMembers() {
|
||||
return this.household.current_members_id.length > 0;
|
||||
},
|
||||
currentMembers() {
|
||||
let members = this.household.members
|
||||
.filter((m) => this.household.current_members_id.includes(m.id))
|
||||
.sort((a, b) => {
|
||||
const orderA = a.position ? a.position.ordering : 0;
|
||||
const orderB = b.position ? b.position.ordering : 0;
|
||||
const isMultiline = computed(() =>
|
||||
typeof props.isAddressMultiline !== "undefined"
|
||||
? props.isAddressMultiline
|
||||
: false,
|
||||
);
|
||||
|
||||
if (orderA < orderB) {
|
||||
return -1;
|
||||
}
|
||||
if (orderA > orderB) {
|
||||
return 1;
|
||||
}
|
||||
if (a.holder && !b.holder) {
|
||||
return -1;
|
||||
}
|
||||
if (!a.holder && b.holder) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
function hasCurrentMembers() {
|
||||
return props.household.current_members_id.length > 0;
|
||||
}
|
||||
|
||||
if (this.household.new_members !== undefined) {
|
||||
this.household.new_members
|
||||
.map((m) => {
|
||||
m.is_new = true;
|
||||
return m;
|
||||
})
|
||||
.forEach((m) => {
|
||||
members.push(m);
|
||||
});
|
||||
function currentMembers() {
|
||||
let members = props.household.members
|
||||
.filter((m) => props.household.current_members_id.includes(m.id))
|
||||
.sort((a, b) => {
|
||||
const orderA = a.position ? a.position.ordering : 0;
|
||||
const orderB = b.position ? b.position.ordering : 0;
|
||||
|
||||
if (orderA < orderB) {
|
||||
return -1;
|
||||
}
|
||||
if (orderA > orderB) {
|
||||
return 1;
|
||||
}
|
||||
if (a.holder && !b.holder) {
|
||||
return -1;
|
||||
}
|
||||
if (!a.holder && b.holder) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
|
||||
return members;
|
||||
},
|
||||
currentMembersLength() {
|
||||
return this.household.current_members_id.length;
|
||||
},
|
||||
isHouseholdNew() {
|
||||
return !Number.isInteger(this.household.id);
|
||||
},
|
||||
hasAddress() {
|
||||
return this.household.current_address !== null;
|
||||
},
|
||||
},
|
||||
};
|
||||
if (props.household.new_members !== undefined) {
|
||||
props.household.new_members
|
||||
.map((m) => {
|
||||
m.is_new = true;
|
||||
return m;
|
||||
})
|
||||
.forEach((m) => {
|
||||
members.push(m);
|
||||
});
|
||||
}
|
||||
|
||||
return members;
|
||||
}
|
||||
|
||||
function currentMembersLength() {
|
||||
return props.household.current_members_id.length;
|
||||
}
|
||||
|
||||
function isHouseholdNew() {
|
||||
return !Number.isInteger(props.household.id);
|
||||
}
|
||||
|
||||
function hasAddress() {
|
||||
return props.household.current_address !== null;
|
||||
}
|
||||
defineExpose(currentMembersLength);
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
@@ -23,7 +23,7 @@
|
||||
</a>
|
||||
|
||||
<!-- use person-text here to avoid code duplication ? TODO -->
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<span class="firstname">{{ person.firstName + " " }}</span>
|
||||
<span class="lastname">{{ person.lastName }}</span>
|
||||
<span v-if="person.suffixText" class="suffixtext"
|
||||
> {{ person.suffixText }}</span
|
||||
@@ -63,13 +63,11 @@
|
||||
:title="birthdate"
|
||||
>
|
||||
{{
|
||||
$t(
|
||||
person.gender
|
||||
? `renderbox.birthday.${person.gender.genderTranslation}`
|
||||
: "renderbox.birthday.neutral",
|
||||
) +
|
||||
trans(birthdateTranslation) +
|
||||
" " +
|
||||
$d(birthdate, "text")
|
||||
new Intl.DateTimeFormat("fr-FR", {
|
||||
dateStyle: "long",
|
||||
}).format(birthdate)
|
||||
}}
|
||||
</time>
|
||||
|
||||
@@ -78,7 +76,17 @@
|
||||
:datetime="person.deathdate"
|
||||
:title="person.deathdate"
|
||||
>
|
||||
{{ $d(birthdate) }} - {{ $d(deathdate) }}
|
||||
{{
|
||||
new Intl.DateTimeFormat("fr-FR", {
|
||||
dateStyle: "long",
|
||||
}).format(birthdate)
|
||||
}}
|
||||
-
|
||||
{{
|
||||
new Intl.DateTimeFormat("fr-FR", {
|
||||
dateStyle: "long",
|
||||
}).format(deathdate)
|
||||
}}
|
||||
</time>
|
||||
|
||||
<time
|
||||
@@ -86,12 +94,18 @@
|
||||
:datetime="person.deathdate"
|
||||
:title="person.deathdate"
|
||||
>
|
||||
{{ $t("renderbox.deathdate") + " " + deathdate }}
|
||||
{{
|
||||
trans(RENDERBOX_DEATHDATE) +
|
||||
" " +
|
||||
new Intl.DateTimeFormat("fr-FR", {
|
||||
dateStyle: "long",
|
||||
}).format(deathdate)
|
||||
}}
|
||||
</time>
|
||||
|
||||
<span v-if="options.addAge && person.birthdate" class="age">{{
|
||||
$tc("renderbox.years_old", person.age)
|
||||
}}</span>
|
||||
<span v-if="options.addAge && person.birthdate" class="age">
|
||||
({{ trans(RENDERBOX_YEARS_OLD, { n: person.age }) }})
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -111,13 +125,13 @@
|
||||
:is-multiline="isMultiline"
|
||||
/>
|
||||
<p v-else class="chill-no-data-statement">
|
||||
{{ $t("renderbox.household_without_address") }}
|
||||
{{ trans(RENDERBOX_HOUSEHOLD_WITHOUT_ADDRESS) }}
|
||||
</p>
|
||||
<a
|
||||
v-if="options.addHouseholdLink === true"
|
||||
:href="getCurrentHouseholdUrl"
|
||||
:title="
|
||||
$t('persons_associated.show_household_number', {
|
||||
trans(PERSONS_ASSOCIATED_SHOW_HOUSEHOLD_NUMBER, {
|
||||
id: person.current_household_id,
|
||||
})
|
||||
"
|
||||
@@ -125,14 +139,14 @@
|
||||
<span class="badge rounded-pill bg-chill-beige">
|
||||
<i
|
||||
class="fa fa-fw fa-home"
|
||||
/><!--{{ $t('persons_associated.show_household') }}-->
|
||||
/><!--{{ trans(PERSONS_ASSOCIATED_SHOW_HOUSEHOLD) }}-->
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("renderbox.no_data") }}
|
||||
{{ trans(RENDERBOX_NO_DATA) }}
|
||||
</p>
|
||||
</li>
|
||||
|
||||
@@ -148,9 +162,9 @@
|
||||
>
|
||||
<i class="fa fa-li fa-map-marker" />
|
||||
<div v-if="addr.address">
|
||||
<span class="item-key"
|
||||
>{{ $t("renderbox.residential_address") }}:</span
|
||||
>
|
||||
<span class="item-key">
|
||||
{{ trans(RENDERBOX_RESIDENTIAL_ADDRESS) }}:
|
||||
</span>
|
||||
<div style="margin-top: -1em">
|
||||
<address-render-box
|
||||
:address="addr.address"
|
||||
@@ -159,7 +173,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="addr.hostPerson" class="mt-3">
|
||||
<p>{{ $t("renderbox.located_at") }}:</p>
|
||||
<p>{{ trans(RENDERBOX_LOCATED_AT) }}:</p>
|
||||
<span class="chill-entity entity-person badge-person">
|
||||
<person-text
|
||||
v-if="addr.hostPerson"
|
||||
@@ -173,7 +187,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="addr.hostThirdParty" class="mt-3">
|
||||
<p>{{ $t("renderbox.located_at") }}:</p>
|
||||
<p>{{ trans(RENDERBOX_LOCATED_AT) }}:</p>
|
||||
<span class="chill-entity entity-person badge-thirdparty">
|
||||
<third-party-text
|
||||
v-if="addr.hostThirdParty"
|
||||
@@ -196,32 +210,32 @@
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-envelope-o" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("renderbox.no_data") }}
|
||||
{{ trans(RENDERBOX_NO_DATA) }}
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li v-if="person.mobilenumber">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<a :href="'tel: ' + person.mobilenumber">{{
|
||||
person.mobilenumber
|
||||
}}</a>
|
||||
<a :href="'tel: ' + person.mobilenumber">
|
||||
{{ person.mobilenumber }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-mobile" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("renderbox.no_data") }}
|
||||
{{ trans(RENDERBOX_NO_DATA) }}
|
||||
</p>
|
||||
</li>
|
||||
<li v-if="person.phonenumber">
|
||||
<i class="fa fa-li fa-phone" />
|
||||
<a :href="'tel: ' + person.phonenumber">{{
|
||||
person.phonenumber
|
||||
}}</a>
|
||||
<a :href="'tel: ' + person.phonenumber">
|
||||
{{ person.phonenumber }}
|
||||
</a>
|
||||
</li>
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-phone" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("renderbox.no_data") }}
|
||||
{{ trans(RENDERBOX_NO_DATA) }}
|
||||
</p>
|
||||
</li>
|
||||
|
||||
@@ -240,7 +254,7 @@
|
||||
<li v-else-if="options.addNoData">
|
||||
<i class="fa fa-li fa-long-arrow-right" />
|
||||
<p class="chill-no-data-statement">
|
||||
{{ $t("renderbox.no_data") }}
|
||||
{{ trans(RENDERBOX_NO_DATA) }}
|
||||
</p>
|
||||
</li>
|
||||
<slot name="custom-zone" />
|
||||
@@ -262,7 +276,7 @@
|
||||
<span
|
||||
v-if="options.isHolder"
|
||||
class="fa-stack fa-holder"
|
||||
:title="$t('renderbox.holder')"
|
||||
:title="trans(RENDERBOX_HOLDER)"
|
||||
>
|
||||
<i class="fa fa-circle fa-stack-1x text-success" />
|
||||
<i class="fa fa-stack-1x">T</i>
|
||||
@@ -274,7 +288,7 @@
|
||||
<span
|
||||
v-if="options.isHolder"
|
||||
class="fa-stack fa-holder"
|
||||
:title="$t('renderbox.holder')"
|
||||
:title="trans(RENDERBOX_HOLDER)"
|
||||
>
|
||||
<i class="fa fa-circle fa-stack-1x text-success" />
|
||||
<i class="fa fa-stack-1x">T</i>
|
||||
@@ -285,131 +299,120 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
import { ISOToDate } from "ChillMainAssets/chill/js/date";
|
||||
import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
|
||||
import GenderIconRenderBox from "ChillMainAssets/vuejs/_components/Entity/GenderIconRenderBox.vue";
|
||||
import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
|
||||
import PersonText from "ChillPersonAssets/vuejs/_components/Entity/PersonText.vue";
|
||||
import ThirdPartyText from "ChillThirdPartyAssets/vuejs/_components/Entity/ThirdPartyText.vue";
|
||||
import {
|
||||
trans,
|
||||
RENDERBOX_HOLDER,
|
||||
RENDERBOX_NO_DATA,
|
||||
RENDERBOX_DEATHDATE,
|
||||
RENDERBOX_HOUSEHOLD_WITHOUT_ADDRESS,
|
||||
RENDERBOX_RESIDENTIAL_ADDRESS,
|
||||
RENDERBOX_LOCATED_AT,
|
||||
RENDERBOX_BIRTHDAY_MAN,
|
||||
RENDERBOX_BIRTHDAY_WOMAN,
|
||||
RENDERBOX_BIRTHDAY_UNKNOWN,
|
||||
RENDERBOX_BIRTHDAY_NEUTRAL,
|
||||
PERSONS_ASSOCIATED_SHOW_HOUSEHOLD_NUMBER,
|
||||
RENDERBOX_YEARS_OLD,
|
||||
} from "translator";
|
||||
|
||||
export default {
|
||||
name: "PersonRenderBox",
|
||||
components: {
|
||||
AddressRenderBox,
|
||||
GenderIconRenderBox,
|
||||
BadgeEntity,
|
||||
PersonText,
|
||||
ThirdPartyText,
|
||||
const props = defineProps({
|
||||
person: {
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
person: {
|
||||
required: true,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
render: {
|
||||
type: String,
|
||||
},
|
||||
returnPath: {
|
||||
type: String,
|
||||
},
|
||||
showResidentialAddresses: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: false,
|
||||
},
|
||||
computed: {
|
||||
isMultiline: function () {
|
||||
if (this.options.isMultiline) {
|
||||
return this.options.isMultiline;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
birthdate: function () {
|
||||
if (
|
||||
this.person.birthdate !== null ||
|
||||
this.person.birthdate === "undefined"
|
||||
) {
|
||||
return ISOToDate(this.person.birthdate.datetime);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
deathdate: function () {
|
||||
if (
|
||||
this.person.deathdate !== null ||
|
||||
this.person.birthdate === "undefined"
|
||||
) {
|
||||
return new Date(this.person.deathdate.datetime);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
altNameLabel: function () {
|
||||
let altNameLabel = "";
|
||||
this.person.altNames.forEach(
|
||||
(altName) => (altNameLabel += altName.label),
|
||||
);
|
||||
return altNameLabel;
|
||||
},
|
||||
altNameKey: function () {
|
||||
let altNameKey = "";
|
||||
this.person.altNames.forEach((altName) => (altNameKey += altName.key));
|
||||
return altNameKey;
|
||||
},
|
||||
getUrl: function () {
|
||||
return `/fr/person/${this.person.id}/general`;
|
||||
},
|
||||
getCurrentHouseholdUrl: function () {
|
||||
let returnPath = this.returnPath ? `?returnPath=${this.returnPath}` : ``;
|
||||
return `/fr/person/household/${this.person.current_household_id}/summary${returnPath}`;
|
||||
},
|
||||
render: {
|
||||
type: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
returnPath: {
|
||||
type: String,
|
||||
},
|
||||
showResidentialAddresses: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "ChillMainAssets/module/bootstrap/shared";
|
||||
@import "ChillPersonAssets/chill/scss/mixins";
|
||||
@import "ChillMainAssets/chill/scss/chill_variables";
|
||||
|
||||
.lastname:before {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:first-child {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
div.item-col:first-child {
|
||||
width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
const birthdateTranslation = computed(() => {
|
||||
if (props.person.gender) {
|
||||
const { genderTranslation } = props.person.gender;
|
||||
switch (genderTranslation) {
|
||||
case "man":
|
||||
return RENDERBOX_BIRTHDAY_MAN;
|
||||
case "woman":
|
||||
return RENDERBOX_BIRTHDAY_WOMAN;
|
||||
case "neutral":
|
||||
return RENDERBOX_BIRTHDAY_NEUTRAL;
|
||||
case "unknown":
|
||||
return RENDERBOX_BIRTHDAY_UNKNOWN;
|
||||
default:
|
||||
return RENDERBOX_BIRTHDAY_UNKNOWN;
|
||||
}
|
||||
} else {
|
||||
return RENDERBOX_BIRTHDAY_UNKNOWN;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
.age {
|
||||
margin-left: 0.5em;
|
||||
const isMultiline = computed(() => {
|
||||
return props.options?.isMultiline || false;
|
||||
});
|
||||
|
||||
&:before {
|
||||
content: "(";
|
||||
const birthdate = computed(() => {
|
||||
if (
|
||||
props.person.birthdate !== null &&
|
||||
props.person.birthdate !== undefined &&
|
||||
props.person.birthdate.datetime
|
||||
) {
|
||||
return ISOToDate(props.person.birthdate.datetime);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
|
||||
&:after {
|
||||
content: ")";
|
||||
const deathdate = computed(() => {
|
||||
if (
|
||||
props.person.deathdate !== null &&
|
||||
props.person.deathdate !== undefined &&
|
||||
props.person.deathdate.datetime
|
||||
) {
|
||||
return new Date(props.person.deathdate.datetime);
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
});
|
||||
|
||||
const altNameLabel = computed(() => {
|
||||
let altNameLabel = "";
|
||||
(props.person.altNames || []).forEach(
|
||||
(altName) => (altNameLabel += altName.label),
|
||||
);
|
||||
return altNameLabel;
|
||||
});
|
||||
|
||||
const altNameKey = computed(() => {
|
||||
let altNameKey = "";
|
||||
(props.person.altNames || []).forEach(
|
||||
(altName) => (altNameKey += altName.key),
|
||||
);
|
||||
return altNameKey;
|
||||
});
|
||||
|
||||
const getUrl = computed(() => {
|
||||
return `/fr/person/${props.person.id}/general`;
|
||||
});
|
||||
|
||||
const getCurrentHouseholdUrl = computed(() => {
|
||||
let returnPath = props.returnPath ? `?returnPath=${props.returnPath}` : ``;
|
||||
return `/fr/person/household/${props.person.current_household_id}/summary${returnPath}`;
|
||||
});
|
||||
</script>
|
||||
|
@@ -2,65 +2,65 @@
|
||||
<span v-if="isCut">{{ cutText }}</span>
|
||||
<span v-else class="person-text">
|
||||
<span class="firstname">{{ person.firstName }}</span>
|
||||
<!-- display: inline -->
|
||||
<span class="lastname"> {{ person.lastName }}</span>
|
||||
<span v-if="person.altNames && person.altNames.length > 0" class="altnames">
|
||||
<!-- display: inline -->
|
||||
<span :class="'altname altname-' + altNameKey"
|
||||
> ({{ altNameLabel }})</span
|
||||
>
|
||||
</span>
|
||||
<!-- display: inline -->
|
||||
<span v-if="person.suffixText" class="suffixtext"
|
||||
> {{ person.suffixText }}</span
|
||||
>
|
||||
<!-- display: inline -->
|
||||
<span
|
||||
class="age"
|
||||
v-if="
|
||||
this.addAge && person.birthdate !== null && person.deathdate === null
|
||||
"
|
||||
> {{ $tc("renderbox.years_old", person.age) }}</span
|
||||
v-if="addAge && person.birthdate !== null && person.deathdate === null"
|
||||
> {{ trans(RENDERBOX_YEARS_OLD, person.age) }}</span
|
||||
>
|
||||
<span v-else-if="this.addAge && person.deathdate !== null"> (‡)</span>
|
||||
<span v-else-if="addAge && person.deathdate !== null"> (‡)</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonText",
|
||||
props: {
|
||||
person: {
|
||||
required: true,
|
||||
},
|
||||
isCut: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
addAge: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
altNameLabel: function () {
|
||||
let altNameLabel = "";
|
||||
this.person.altNames.forEach(
|
||||
(altName) => (altNameLabel += altName.label),
|
||||
);
|
||||
return altNameLabel;
|
||||
},
|
||||
altNameKey: function () {
|
||||
let altNameKey = "";
|
||||
this.person.altNames.forEach((altName) => (altNameKey += altName.key));
|
||||
return altNameKey;
|
||||
},
|
||||
cutText: function () {
|
||||
let more = this.person.text.length > 15 ? "…" : "";
|
||||
return this.person.text.slice(0, 15) + more;
|
||||
},
|
||||
},
|
||||
};
|
||||
<script lang="ts" setup>
|
||||
import { computed, toRefs } from "vue";
|
||||
import { trans, RENDERBOX_YEARS_OLD } from "translator";
|
||||
|
||||
interface AltName {
|
||||
label: string;
|
||||
key: string;
|
||||
}
|
||||
|
||||
interface Person {
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
altNames: AltName[];
|
||||
suffixText?: string;
|
||||
birthdate: string | null;
|
||||
deathdate: string | null;
|
||||
age: number;
|
||||
text: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
person: Person;
|
||||
isCut?: boolean;
|
||||
addAge?: boolean;
|
||||
}>();
|
||||
|
||||
const { person, isCut = false, addAge = true } = toRefs(props);
|
||||
|
||||
const altNameLabel = computed(() => {
|
||||
if (!person.value.altNames) return "";
|
||||
return person.value.altNames.map((a: AltName) => a.label).join("");
|
||||
});
|
||||
|
||||
const altNameKey = computed(() => {
|
||||
if (!person.value.altNames) return "";
|
||||
return person.value.altNames.map((a: AltName) => a.key).join("");
|
||||
});
|
||||
|
||||
const cutText = computed(() => {
|
||||
if (!person.value.text) return "";
|
||||
const more = person.value.text.length > 15 ? "…" : "";
|
||||
return person.value.text.slice(0, 15) + more;
|
||||
});
|
||||
</script>
|
||||
|
@@ -17,7 +17,7 @@
|
||||
isMultiline: true,
|
||||
}"
|
||||
:show-residential-addresses="true"
|
||||
></person-render-box>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -27,10 +27,10 @@
|
||||
class="form-control form-control-lg"
|
||||
id="lastname"
|
||||
v-model="lastName"
|
||||
:placeholder="$t('person.lastname')"
|
||||
:placeholder="trans(PERSON_MESSAGES_PERSON_LASTNAME)"
|
||||
@change="checkErrors"
|
||||
/>
|
||||
<label for="lastname">{{ $t("person.lastname") }}</label>
|
||||
<label for="lastname">{{ trans(PERSON_MESSAGES_PERSON_LASTNAME) }}</label>
|
||||
</div>
|
||||
|
||||
<div v-if="queryItems">
|
||||
@@ -50,10 +50,12 @@
|
||||
class="form-control form-control-lg"
|
||||
id="firstname"
|
||||
v-model="firstName"
|
||||
:placeholder="$t('person.firstname')"
|
||||
:placeholder="trans(PERSON_MESSAGES_PERSON_FIRSTNAME)"
|
||||
@change="checkErrors"
|
||||
/>
|
||||
<label for="firstname">{{ $t("person.firstname") }}</label>
|
||||
<label for="firstname">{{
|
||||
trans(PERSON_MESSAGES_PERSON_FIRSTNAME)
|
||||
}}</label>
|
||||
</div>
|
||||
|
||||
<div v-if="queryItems">
|
||||
@@ -86,12 +88,14 @@
|
||||
-->
|
||||
<div class="form-floating mb-3">
|
||||
<select class="form-select form-select-lg" id="gender" v-model="gender">
|
||||
<option selected disabled>{{ $t("person.gender.placeholder") }}</option>
|
||||
<option selected disabled>
|
||||
{{ trans(PERSON_MESSAGES_PERSON_GENDER_PLACEHOLDER) }}
|
||||
</option>
|
||||
<option v-for="g in config.genders" :value="g.id" :key="g.id">
|
||||
{{ g.label }}
|
||||
</option>
|
||||
</select>
|
||||
<label>{{ $t("person.gender.title") }}</label>
|
||||
<label>{{ trans(PERSON_MESSAGES_PERSON_GENDER_TITLE) }}</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -99,12 +103,14 @@
|
||||
v-if="showCenters && config.centers.length > 1"
|
||||
>
|
||||
<select class="form-select form-select-lg" id="center" v-model="center">
|
||||
<option selected disabled>{{ $t("person.center.placeholder") }}</option>
|
||||
<option selected disabled>
|
||||
{{ trans(PERSON_MESSAGES_PERSON_CENTER_PLACEHOLDER) }}
|
||||
</option>
|
||||
<option v-for="c in config.centers" :value="c" :key="c.id">
|
||||
{{ c.name }}
|
||||
</option>
|
||||
</select>
|
||||
<label>{{ $t("person.center.title") }}</label>
|
||||
<label>{{ trans(PERSON_MESSAGES_PERSON_CENTER_TITLE) }}</label>
|
||||
</div>
|
||||
|
||||
<div class="form-floating mb-3">
|
||||
@@ -114,64 +120,50 @@
|
||||
v-model="civility"
|
||||
>
|
||||
<option selected disabled>
|
||||
{{ $t("person.civility.placeholder") }}
|
||||
{{ trans(PERSON_MESSAGES_PERSON_CIVILITY_PLACEHOLDER) }}
|
||||
</option>
|
||||
<option v-for="c in config.civilities" :value="c.id" :key="c.id">
|
||||
{{ localizeString(c.name) }}
|
||||
</option>
|
||||
</select>
|
||||
<label>{{ $t("person.civility.title") }}</label>
|
||||
<label>{{ trans(PERSON_MESSAGES_PERSON_CIVILITY_TITLE) }}</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="birthdate"
|
||||
><i class="fa fa-fw fa-birthday-cake"></i
|
||||
></span>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control form-control-lg"
|
||||
id="chill_personbundle_person_birthdate"
|
||||
name="chill_personbundle_person[birthdate]"
|
||||
v-model="birthDate"
|
||||
aria-describedby="birthdate"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="phonenumber"
|
||||
><i class="fa fa-fw fa-phone"></i
|
||||
></span>
|
||||
<span class="input-group-text" id="phonenumber">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
</span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="phonenumber"
|
||||
:placeholder="$t('person.phonenumber')"
|
||||
:aria-label="$t('person.phonenumber')"
|
||||
:placeholder="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
|
||||
:aria-label="trans(PERSON_MESSAGES_PERSON_PHONENUMBER)"
|
||||
aria-describedby="phonenumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="mobilenumber"
|
||||
><i class="fa fa-fw fa-mobile"></i
|
||||
></span>
|
||||
<span class="input-group-text" id="mobilenumber">
|
||||
<i class="fa fa-fw fa-mobile"></i>
|
||||
</span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="mobilenumber"
|
||||
:placeholder="$t('person.mobilenumber')"
|
||||
:aria-label="$t('person.mobilenumber')"
|
||||
:placeholder="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
|
||||
:aria-label="trans(PERSON_MESSAGES_PERSON_MOBILENUMBER)"
|
||||
aria-describedby="mobilenumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text" id="email"
|
||||
><i class="fa fa-fw fa-at"></i
|
||||
></span>
|
||||
<span class="input-group-text" id="email">
|
||||
<i class="fa fa-fw fa-at"></i>
|
||||
</span>
|
||||
<input
|
||||
class="form-control form-control-lg"
|
||||
v-model="email"
|
||||
:placeholder="$t('person.email')"
|
||||
:aria-label="$t('person.email')"
|
||||
:placeholder="trans(PERSON_MESSAGES_PERSON_EMAIL)"
|
||||
:aria-label="trans(PERSON_MESSAGES_PERSON_EMAIL)"
|
||||
aria-describedby="email"
|
||||
/>
|
||||
</div>
|
||||
@@ -183,22 +175,21 @@
|
||||
v-model="showAddressForm"
|
||||
name="showAddressForm"
|
||||
/>
|
||||
<label class="form-check-label">{{
|
||||
$t("person.address.show_address_form")
|
||||
}}</label>
|
||||
<label class="form-check-label">
|
||||
{{ trans(PERSON_MESSAGES_PERSON_ADDRESS_SHOW_ADDRESS_FORM) }}
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
v-if="action === 'create' && showAddressFormValue"
|
||||
class="form-floating mb-3"
|
||||
>
|
||||
<p>{{ $t("person.address.warning") }}</p>
|
||||
<add-address
|
||||
<p>{{ trans(PERSON_MESSAGES_PERSON_ADDRESS_WARNING) }}</p>
|
||||
<AddAddress
|
||||
:context="addAddress.context"
|
||||
:options="addAddress.options"
|
||||
:addressChangedCallback="submitNewAddress"
|
||||
ref="addAddress"
|
||||
>
|
||||
</add-address>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning" v-if="errors.length">
|
||||
@@ -208,8 +199,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from "vue";
|
||||
import {
|
||||
getCentersForPersonCreation,
|
||||
getCivilities,
|
||||
@@ -220,286 +211,256 @@ import {
|
||||
import PersonRenderBox from "../Entity/PersonRenderBox.vue";
|
||||
import AddAddress from "ChillMainAssets/vuejs/Address/components/AddAddress.vue";
|
||||
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";
|
||||
import {
|
||||
trans,
|
||||
PERSON_MESSAGES_PERSON_LASTNAME,
|
||||
PERSON_MESSAGES_PERSON_FIRSTNAME,
|
||||
PERSON_MESSAGES_PERSON_GENDER_PLACEHOLDER,
|
||||
PERSON_MESSAGES_PERSON_GENDER_TITLE,
|
||||
PERSON_MESSAGES_PERSON_CENTER_PLACEHOLDER,
|
||||
PERSON_MESSAGES_PERSON_CENTER_TITLE,
|
||||
PERSON_MESSAGES_PERSON_CIVILITY_PLACEHOLDER,
|
||||
PERSON_MESSAGES_PERSON_CIVILITY_TITLE,
|
||||
PERSON_MESSAGES_PERSON_PHONENUMBER,
|
||||
PERSON_MESSAGES_PERSON_MOBILENUMBER,
|
||||
PERSON_MESSAGES_PERSON_EMAIL,
|
||||
PERSON_MESSAGES_PERSON_ADDRESS_SHOW_ADDRESS_FORM,
|
||||
PERSON_MESSAGES_PERSON_ADDRESS_WARNING,
|
||||
} from "translator";
|
||||
|
||||
export default {
|
||||
name: "OnTheFlyPerson",
|
||||
props: ["id", "type", "action", "query"],
|
||||
//emits: ['createAction'],
|
||||
components: {
|
||||
PersonRenderBox,
|
||||
AddAddress,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
person: {
|
||||
type: "person",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
altNames: [],
|
||||
addressId: null,
|
||||
center: null,
|
||||
},
|
||||
config: {
|
||||
altNames: [],
|
||||
civilities: [],
|
||||
centers: [],
|
||||
genders: [],
|
||||
},
|
||||
showCenters: false, // NOTE: must remains false if the form is not in create mode
|
||||
showAddressFormValue: false,
|
||||
addAddress: {
|
||||
options: {
|
||||
button: {
|
||||
text: { create: "person.address.create_address" },
|
||||
size: "btn-sm",
|
||||
},
|
||||
title: { create: "person.address.create_address" },
|
||||
},
|
||||
context: {
|
||||
target: {}, // boilerplate for getting the address id
|
||||
edit: false,
|
||||
addressId: null,
|
||||
defaults: window.addaddress,
|
||||
},
|
||||
},
|
||||
errors: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
firstName: {
|
||||
set(value) {
|
||||
this.person.firstName = value;
|
||||
},
|
||||
get() {
|
||||
return this.person.firstName;
|
||||
},
|
||||
},
|
||||
lastName: {
|
||||
set(value) {
|
||||
this.person.lastName = value;
|
||||
},
|
||||
get() {
|
||||
return this.person.lastName;
|
||||
},
|
||||
},
|
||||
gender: {
|
||||
set(value) {
|
||||
this.person.gender = { id: value, type: "chill_main_gender" };
|
||||
},
|
||||
get() {
|
||||
return this.person.gender ? this.person.gender.id : null;
|
||||
},
|
||||
},
|
||||
civility: {
|
||||
set(value) {
|
||||
this.person.civility = { id: value, type: "chill_main_civility" };
|
||||
},
|
||||
get() {
|
||||
return this.person.civility ? this.person.civility.id : null;
|
||||
},
|
||||
},
|
||||
birthDate: {
|
||||
set(value) {
|
||||
if (this.person.birthdate) {
|
||||
this.person.birthdate.datetime = value + "T00:00:00+0100";
|
||||
} else {
|
||||
this.person.birthdate = { datetime: value + "T00:00:00+0100" };
|
||||
}
|
||||
},
|
||||
get() {
|
||||
return this.person.birthdate
|
||||
? this.person.birthdate.datetime.split("T")[0]
|
||||
: "";
|
||||
},
|
||||
},
|
||||
phonenumber: {
|
||||
set(value) {
|
||||
this.person.phonenumber = value;
|
||||
},
|
||||
get() {
|
||||
return this.person.phonenumber;
|
||||
},
|
||||
},
|
||||
mobilenumber: {
|
||||
set(value) {
|
||||
this.person.mobilenumber = value;
|
||||
},
|
||||
get() {
|
||||
return this.person.mobilenumber;
|
||||
},
|
||||
},
|
||||
email: {
|
||||
set(value) {
|
||||
this.person.email = value;
|
||||
},
|
||||
get() {
|
||||
return this.person.email;
|
||||
},
|
||||
},
|
||||
showAddressForm: {
|
||||
set(value) {
|
||||
this.showAddressFormValue = value;
|
||||
},
|
||||
get() {
|
||||
return this.showAddressFormValue;
|
||||
},
|
||||
},
|
||||
center: {
|
||||
set(value) {
|
||||
console.log("will set center", value);
|
||||
this.person.center = { id: value.id, type: value.type };
|
||||
},
|
||||
get() {
|
||||
const center = this.config.centers.find(
|
||||
(c) => this.person.center !== null && this.person.center.id === c.id,
|
||||
);
|
||||
const props = defineProps({
|
||||
id: [String, Number],
|
||||
type: String,
|
||||
action: String,
|
||||
query: String,
|
||||
});
|
||||
|
||||
console.log("center get", center);
|
||||
const person = reactive({
|
||||
type: "person",
|
||||
lastName: "",
|
||||
firstName: "",
|
||||
altNames: [],
|
||||
addressId: null,
|
||||
center: null,
|
||||
gender: null,
|
||||
civility: null,
|
||||
birthdate: null,
|
||||
phonenumber: "",
|
||||
mobilenumber: "",
|
||||
email: "",
|
||||
});
|
||||
|
||||
return typeof center === "undefined" ? null : center;
|
||||
},
|
||||
},
|
||||
genderClass() {
|
||||
switch (this.person.gender) {
|
||||
case "woman":
|
||||
return "fa-venus";
|
||||
case "man":
|
||||
return "fa-mars";
|
||||
case "both":
|
||||
return "fa-neuter";
|
||||
case "unknown":
|
||||
return "fa-genderless";
|
||||
default:
|
||||
return "fa-genderless";
|
||||
}
|
||||
},
|
||||
genderTranslation() {
|
||||
switch (this.person.gender.genderTranslation) {
|
||||
case "woman":
|
||||
return "person.gender.woman";
|
||||
case "man":
|
||||
return "person.gender.man";
|
||||
case "neutral":
|
||||
return "person.gender.neutral";
|
||||
case "unknown":
|
||||
return "person.gender.unknown";
|
||||
default:
|
||||
return "person.gender.unknown";
|
||||
}
|
||||
},
|
||||
feminized() {
|
||||
return this.person.gender === "woman" ? "e" : "";
|
||||
},
|
||||
personAltNamesLabels() {
|
||||
return this.person.altNames.map((a) => (a ? a.label : ""));
|
||||
},
|
||||
queryItems() {
|
||||
return this.query ? this.query.split(" ") : null;
|
||||
const config = reactive({
|
||||
altNames: [],
|
||||
civilities: [],
|
||||
centers: [],
|
||||
genders: [],
|
||||
});
|
||||
|
||||
const showCenters = ref(false);
|
||||
const showAddressFormValue = ref(false);
|
||||
const errors = ref([]);
|
||||
|
||||
const addAddress = reactive({
|
||||
options: {
|
||||
button: {
|
||||
text: { create: "person.address.create_address" },
|
||||
size: "btn-sm",
|
||||
},
|
||||
title: { create: "person.address.create_address" },
|
||||
},
|
||||
mounted() {
|
||||
getPersonAltNames().then((altNames) => {
|
||||
this.config.altNames = altNames;
|
||||
});
|
||||
getCivilities().then((civilities) => {
|
||||
if ("results" in civilities) {
|
||||
this.config.civilities = civilities.results;
|
||||
}
|
||||
});
|
||||
getGenders().then((genders) => {
|
||||
if ("results" in genders) {
|
||||
console.log("genders", genders.results);
|
||||
this.config.genders = genders.results;
|
||||
}
|
||||
});
|
||||
if (this.action !== "create") {
|
||||
this.loadData();
|
||||
context: {
|
||||
target: {},
|
||||
edit: false,
|
||||
addressId: null,
|
||||
defaults: window.addaddress,
|
||||
},
|
||||
});
|
||||
|
||||
const firstName = computed({
|
||||
get: () => person.firstName,
|
||||
set: (value) => {
|
||||
person.firstName = value;
|
||||
},
|
||||
});
|
||||
const lastName = computed({
|
||||
get: () => person.lastName,
|
||||
set: (value) => {
|
||||
person.lastName = value;
|
||||
},
|
||||
});
|
||||
const gender = computed({
|
||||
get: () => (person.gender ? person.gender.id : null),
|
||||
set: (value) => {
|
||||
person.gender = { id: value, type: "chill_main_gender" };
|
||||
},
|
||||
});
|
||||
const civility = computed({
|
||||
get: () => (person.civility ? person.civility.id : null),
|
||||
set: (value) => {
|
||||
person.civility = { id: value, type: "chill_main_civility" };
|
||||
},
|
||||
});
|
||||
const birthDate = computed({
|
||||
get: () => (person.birthdate ? person.birthdate.datetime.split("T")[0] : ""),
|
||||
set: (value) => {
|
||||
if (person.birthdate) {
|
||||
person.birthdate.datetime = value + "T00:00:00+0100";
|
||||
} else {
|
||||
// console.log('show centers', this.showCenters);
|
||||
getCentersForPersonCreation().then((params) => {
|
||||
this.config.centers = params.centers.filter((c) => c.isActive);
|
||||
this.showCenters = params.showCenters;
|
||||
// console.log('centers', this.config.centers)
|
||||
// console.log('show centers inside', this.showCenters);
|
||||
if (this.showCenters && this.config.centers.length === 1) {
|
||||
this.person.center = this.config.centers[0];
|
||||
}
|
||||
});
|
||||
person.birthdate = { datetime: value + "T00:00:00+0100" };
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
localizeString,
|
||||
checkErrors() {
|
||||
this.errors = [];
|
||||
if (this.person.lastName === "") {
|
||||
this.errors.push("Le nom ne doit pas être vide.");
|
||||
}
|
||||
if (this.person.firstName === "") {
|
||||
this.errors.push("Le prénom ne doit pas être vide.");
|
||||
}
|
||||
if (!this.person.gender) {
|
||||
this.errors.push("Le genre doit être renseigné");
|
||||
}
|
||||
if (this.showCenters && this.person.center === null) {
|
||||
this.errors.push("Le centre doit être renseigné");
|
||||
}
|
||||
},
|
||||
loadData() {
|
||||
getPerson(this.id).then(
|
||||
(person) =>
|
||||
new Promise((resolve) => {
|
||||
this.person = person;
|
||||
//console.log('get person', this.person);
|
||||
resolve();
|
||||
}),
|
||||
);
|
||||
},
|
||||
onAltNameInput(event) {
|
||||
const key = event.target.id;
|
||||
const label = event.target.value;
|
||||
let updateAltNames = this.person.altNames.filter((a) => a.key !== key);
|
||||
updateAltNames.push({ key: key, label: label });
|
||||
this.person.altNames = updateAltNames;
|
||||
},
|
||||
addQueryItem(field, queryItem) {
|
||||
switch (field) {
|
||||
case "lastName":
|
||||
this.person.lastName = this.person.lastName
|
||||
? (this.person.lastName += ` ${queryItem}`)
|
||||
: queryItem;
|
||||
break;
|
||||
case "firstName":
|
||||
this.person.firstName = this.person.firstName
|
||||
? (this.person.firstName += ` ${queryItem}`)
|
||||
: queryItem;
|
||||
break;
|
||||
}
|
||||
},
|
||||
submitNewAddress(payload) {
|
||||
this.person.addressId = payload.addressId;
|
||||
},
|
||||
});
|
||||
const phonenumber = computed({
|
||||
get: () => person.phonenumber,
|
||||
set: (value) => {
|
||||
person.phonenumber = value;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
});
|
||||
const mobilenumber = computed({
|
||||
get: () => person.mobilenumber,
|
||||
set: (value) => {
|
||||
person.mobilenumber = value;
|
||||
},
|
||||
});
|
||||
const email = computed({
|
||||
get: () => person.email,
|
||||
set: (value) => {
|
||||
person.email = value;
|
||||
},
|
||||
});
|
||||
const showAddressForm = computed({
|
||||
get: () => showAddressFormValue.value,
|
||||
set: (value) => {
|
||||
showAddressFormValue.value = value;
|
||||
},
|
||||
});
|
||||
const center = computed({
|
||||
get: () => {
|
||||
const c = config.centers.find(
|
||||
(c) => person.center !== null && person.center.id === c.id,
|
||||
);
|
||||
return typeof c === "undefined" ? null : c;
|
||||
},
|
||||
set: (value) => {
|
||||
person.center = { id: value.id, type: value.type };
|
||||
},
|
||||
});
|
||||
|
||||
<style lang="scss" scoped>
|
||||
div.flex-table {
|
||||
div.item-bloc {
|
||||
div.item-row {
|
||||
div.item-col:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
const genderClass = computed(() => {
|
||||
switch (person.gender && person.gender.id) {
|
||||
case "woman":
|
||||
return "fa-venus";
|
||||
case "man":
|
||||
return "fa-mars";
|
||||
case "both":
|
||||
return "fa-neuter";
|
||||
case "unknown":
|
||||
return "fa-genderless";
|
||||
default:
|
||||
return "fa-genderless";
|
||||
}
|
||||
});
|
||||
|
||||
const genderTranslation = computed(() => {
|
||||
switch (person.gender && person.gender.genderTranslation) {
|
||||
case "woman":
|
||||
return PERSON_MESSAGES_PERSON_GENDER_WOMAN;
|
||||
case "man":
|
||||
return PERSON_MESSAGES_PERSON_GENDER_MAN;
|
||||
case "neutral":
|
||||
return PERSON_MESSAGES_PERSON_GENDER_NEUTRAL;
|
||||
case "unknown":
|
||||
return PERSON_MESSAGES_PERSON_GENDER_UNKNOWN;
|
||||
default:
|
||||
return PERSON_MESSAGES_PERSON_GENDER_UNKNOWN;
|
||||
}
|
||||
});
|
||||
const feminized = computed(() =>
|
||||
person.gender && person.gender.id === "woman" ? "e" : "",
|
||||
);
|
||||
const personAltNamesLabels = computed(() =>
|
||||
person.altNames.map((a) => (a ? a.label : "")),
|
||||
);
|
||||
const queryItems = computed(() =>
|
||||
props.query ? props.query.split(" ") : null,
|
||||
);
|
||||
|
||||
function checkErrors() {
|
||||
errors.value = [];
|
||||
if (person.lastName === "") {
|
||||
errors.value.push("Le nom ne doit pas être vide.");
|
||||
}
|
||||
if (person.firstName === "") {
|
||||
errors.value.push("Le prénom ne doit pas être vide.");
|
||||
}
|
||||
if (!person.gender) {
|
||||
errors.value.push("Le genre doit être renseigné");
|
||||
}
|
||||
if (showCenters.value && person.center === null) {
|
||||
errors.value.push("Le centre doit être renseigné");
|
||||
}
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
getPerson(props.id).then((p) => {
|
||||
Object.assign(person, p);
|
||||
});
|
||||
}
|
||||
|
||||
function onAltNameInput(event) {
|
||||
const key = event.target.id;
|
||||
const label = event.target.value;
|
||||
let updateAltNames = person.altNames.filter((a) => a.key !== key);
|
||||
updateAltNames.push({ key: key, label: label });
|
||||
person.altNames = updateAltNames;
|
||||
}
|
||||
|
||||
function addQueryItem(field, queryItem) {
|
||||
switch (field) {
|
||||
case "lastName":
|
||||
person.lastName = person.lastName
|
||||
? (person.lastName += ` ${queryItem}`)
|
||||
: queryItem;
|
||||
break;
|
||||
case "firstName":
|
||||
person.firstName = person.firstName
|
||||
? (person.firstName += ` ${queryItem}`)
|
||||
: queryItem;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function submitNewAddress(payload) {
|
||||
person.addressId = payload.addressId;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getPersonAltNames().then((altNames) => {
|
||||
config.altNames = altNames;
|
||||
});
|
||||
getCivilities().then((civilities) => {
|
||||
if ("results" in civilities) {
|
||||
config.civilities = civilities.results;
|
||||
}
|
||||
});
|
||||
getGenders().then((genders) => {
|
||||
if ("results" in genders) {
|
||||
config.genders = genders.results;
|
||||
}
|
||||
});
|
||||
if (props.action !== "create") {
|
||||
loadData();
|
||||
} else {
|
||||
getCentersForPersonCreation().then((params) => {
|
||||
config.centers = params.centers.filter((c) => c.isActive);
|
||||
showCenters.value = params.showCenters;
|
||||
if (showCenters.value && config.centers.length === 1) {
|
||||
person.center = config.centers[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
dl {
|
||||
dd {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
div.form-check {
|
||||
label {
|
||||
margin-left: 0.5em !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
});
|
||||
|
||||
defineExpose(genderClass, genderTranslation, feminized, birthDate);
|
||||
</script>
|
||||
|
@@ -198,3 +198,59 @@ accompanying_course_evaluation_document:
|
||||
|
||||
accompanying_period_work:
|
||||
title: Action d'accompagnement (n°{id}) - {action_title}
|
||||
|
||||
add_persons:
|
||||
title: "Ajouter des usagers"
|
||||
suggested_counter: >-
|
||||
{count, plural,
|
||||
=0 {Pas de résultats}
|
||||
=1 {1 résultat}
|
||||
other {# résultats}
|
||||
}
|
||||
selected_counter: >-
|
||||
{count, plural,
|
||||
=1 {1 sélectionné}
|
||||
other {# sélectionnés}
|
||||
}
|
||||
search_some_persons: "Rechercher des personnes.."
|
||||
|
||||
item:
|
||||
type_person: "Usager"
|
||||
type_user: "TMS"
|
||||
type_thirdparty: "Tiers professionnel"
|
||||
type_household: "Ménage"
|
||||
|
||||
person:
|
||||
firstname: "Prénom"
|
||||
lastname: "Nom"
|
||||
born:
|
||||
man: "Né le"
|
||||
woman: "Née le"
|
||||
neutral: "Né·e le"
|
||||
center_id: "Identifiant du centre"
|
||||
center_type: "Type de centre"
|
||||
center_name: "Territoire"
|
||||
phonenumber: "Téléphone"
|
||||
mobilenumber: "Mobile"
|
||||
altnames: "Autres noms"
|
||||
email: "Courriel"
|
||||
gender:
|
||||
title: "Genre"
|
||||
placeholder: "Choisissez le genre de l'usager"
|
||||
woman: "Féminin"
|
||||
man: "Masculin"
|
||||
neutral: "Neutre, non binaire"
|
||||
unknown: "Non renseigné"
|
||||
undefined: "Non renseigné"
|
||||
civility:
|
||||
title: "Civilité"
|
||||
placeholder: "Choisissez la civilité"
|
||||
address:
|
||||
create_address: "Ajouter une adresse"
|
||||
show_address_form: "Ajouter une adresse pour un usager non suivi et seul dans un ménage"
|
||||
warning: "Un nouveau ménage va être créé. L'usager sera membre de ce ménage."
|
||||
center:
|
||||
placeholder: "Choisissez un centre"
|
||||
title: "Centre"
|
||||
|
||||
error_only_one_person: "Une seule personne peut être sélectionnée !"
|
||||
|
@@ -1505,3 +1505,48 @@ my_parcours_filters:
|
||||
parcours_intervening: Intervenant
|
||||
is_open: Parcours ouverts
|
||||
is_closed: Parcours clôturés
|
||||
|
||||
person_messages:
|
||||
add_persons:
|
||||
title: "Ajouter des usagers"
|
||||
suggested_counter: "Pas de résultats | 1 résultat | {count} résultats"
|
||||
selected_counter: " 1 sélectionné | {count} sélectionnés"
|
||||
search_some_persons: "Rechercher des personnes.."
|
||||
item:
|
||||
type_person: "Usager"
|
||||
type_user: "TMS"
|
||||
type_thirdparty: "Tiers professionnel"
|
||||
type_household: "Ménage"
|
||||
person:
|
||||
firstname: "Prénom"
|
||||
lastname: "Nom"
|
||||
born:
|
||||
man: "Né le"
|
||||
woman: "Née le"
|
||||
neutral: "Né·e le"
|
||||
center_id: "Identifiant du centre"
|
||||
center_type: "Type de centre"
|
||||
center_name: "Territoire"
|
||||
phonenumber: "Téléphone"
|
||||
mobilenumber: "Mobile"
|
||||
altnames: "Autres noms"
|
||||
email: "Courriel"
|
||||
gender:
|
||||
title: "Genre"
|
||||
placeholder: "Choisissez le genre de l'usager"
|
||||
woman: "Féminin"
|
||||
man: "Masculin"
|
||||
neutral: "Neutre, non binaire"
|
||||
unknown: "Non renseigné"
|
||||
undefined: "Non renseigné"
|
||||
civility:
|
||||
title: "Civilité"
|
||||
placeholder: "Choisissez la civilité"
|
||||
address:
|
||||
create_address: "Ajouter une adresse"
|
||||
show_address_form: "Ajouter une adresse pour un usager non suivi et seul dans un ménage"
|
||||
warning: "Un nouveau ménage va être créé. L'usager sera membre de ce ménage."
|
||||
center:
|
||||
placeholder: "Choisissez un centre"
|
||||
title: "Centre"
|
||||
error_only_one_person: "Une seule personne peut être sélectionnée !"
|
||||
|
Reference in New Issue
Block a user