Afficher les patients suggérés et ajouter un sélecteur urgent/non urgent

2025-09-26 00:24:59 +00:00 · 2025-07-04 07:45:33 +00:00
parent 06e8264dde
commit 3df4043eb9
24 changed files with 1539 additions and 1121 deletions
--- a/src/Bundle/ChillMainBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillMainBundle/Resources/public/types.ts
@@ -10,6 +10,11 @@ export interface Civility {
    // TODO
 }

+export interface Household {
+    type: "household";
+    id: number;
+}
+
 export interface Job {
    id: number;
    type: "user_job";
@@ -48,16 +53,10 @@ export interface User {
    label: string;
    // todo: mainCenter; mainJob; etc..
 }
-
-// TODO : Add missing household properties
-export interface Household {
-    type: "household";
-    id: number;
-}
-
 export interface ThirdParty {
    type: "thirdparty";
    id: number;
+    text: string;
    firstname: string;
    name: string;
    email: string;
@@ -228,3 +227,61 @@ export interface WorkflowAttachment {
 export interface PrivateCommentEmbeddable {
    comments: Record<number, string>;
 }
+
+// API Exception types
+export interface TransportExceptionInterface {
+    name: string;
+}
+
+export interface ValidationExceptionInterface
+    extends TransportExceptionInterface {
+    name: "ValidationException";
+    error: object;
+    violations: string[];
+    titles: string[];
+    propertyPaths: string[];
+}
+
+export interface AccessExceptionInterface extends TransportExceptionInterface {
+    name: "AccessException";
+    violations: string[];
+}
+
+export interface NotFoundExceptionInterface
+    extends TransportExceptionInterface {
+    name: "NotFoundException";
+}
+
+export interface ServerExceptionInterface extends TransportExceptionInterface {
+    name: "ServerException";
+    message: string;
+    code: number;
+    body: string;
+}
+
+export interface ConflictHttpExceptionInterface
+    extends TransportExceptionInterface {
+    name: "ConflictHttpException";
+    violations: string[];
+}
+
+export type ApiException =
+    | ValidationExceptionInterface
+    | AccessExceptionInterface
+    | NotFoundExceptionInterface
+    | ServerExceptionInterface
+    | ConflictHttpExceptionInterface;
+
+export interface Modal {
+    showModal: boolean;
+    modalDialogClass: string;
+}
+
+export interface Selected {
+    result: UserGroupOrUser;
+}
+
+export interface addNewEntities {
+    selected: Selected[];
+    modal: Modal;
+}
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue
@@ -1,142 +1,272 @@
 <template>
-    <ul :class="listClasses" v-if="picked.length && displayPicked">
-        <li v-for="p in picked" @click="removeEntity(p)" :key="p.type + p.id">
-            <span class="chill_denomination">{{ p.text }}</span>
-        </li>
-    </ul>
-    <ul class="record_actions">
-        <li class="add-persons">
-            <add-persons
-                :options="addPersonsOptions"
-                :key="uniqid"
-                :buttonTitle="translatedListOfTypes"
-                :modalTitle="translatedListOfTypes"
-                ref="addPersons"
-                @addNewPersons="addNewEntity"
+    <div class="grey-card">
+        <ul :class="listClasses" v-if="picked.length && displayPicked">
+            <li
+                v-for="p in picked"
+                @click="removeEntity(p)"
+                :key="p.type + p.id"
            >
-            </add-persons>
-        </li>
-    </ul>
-    <ul class="list-suggest add-items inline">
-        <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
-            <span>{{ s.text }}</span>
-        </li>
-    </ul>
+                <span
+                    :class="getBadgeClass(p)"
+                    class="chill_denomination"
+                    :style="getBadgeStyle(p)"
+                >
+                    {{ p.text }}
+                </span>
+            </li>
+        </ul>
+        <ul class="record_actions">
+            <li class="add-persons">
+                <add-persons
+                    :options="addPersonsOptions"
+                    :key="uniqid"
+                    :buttonTitle="translatedListOfTypes"
+                    :modalTitle="translatedListOfTypes"
+                    @addNewPersons="addNewEntity"
+                >
+                </add-persons>
+            </li>
+        </ul>
+
+        <ul class="badge-suggest add-items inline" style="float: right">
+            <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
+                <span :class="getBadgeClass(s)" :style="getBadgeStyle(s)">
+                    {{ s.text }}
+                </span>
+            </li>
+        </ul>
+    </div>
 </template>

-<script>
+<script lang="ts" setup>
+import { ref, computed, defineProps, defineEmits, defineComponent } from "vue";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
-import { appMessages } from "./i18n";
+import { Entities, EntityType, SearchOptions } from "ChillPersonAssets/types";
+import {
+    PICK_ENTITY_MODAL_TITLE,
+    PICK_ENTITY_USER,
+    PICK_ENTITY_USER_GROUP,
+    PICK_ENTITY_PERSON,
+    PICK_ENTITY_THIRDPARTY,
+    trans,
+} from "translator";
+import { addNewEntities } from "ChillMainAssets/types";

-export default {
-    name: "PickEntity",
-    props: {
-        multiple: {
-            type: Boolean,
-            required: true,
-        },
-        types: {
-            type: Array,
-            required: true,
-        },
-        picked: {
-            required: true,
-        },
-        uniqid: {
-            type: String,
-            required: true,
-        },
-        removableIfSet: {
-            type: Boolean,
-            default: true,
-        },
-        displayPicked: {
-            // display picked entities.
-            type: Boolean,
-            default: true,
-        },
-        suggested: {
-            type: Array,
-            default: [],
-        },
-        label: {
-            type: String,
-            required: false,
-        },
-    },
-    emits: ["addNewEntity", "removeEntity", "addNewEntityProcessEnded"],
+defineComponent({
    components: {
        AddPersons,
    },
-    data() {
-        return {
-            key: "",
-        };
-    },
-    computed: {
-        addPersonsOptions() {
-            return {
-                uniq: !this.multiple,
-                type: this.types,
-                priority: null,
-                button: {
-                    size: "btn-sm",
-                    class: "btn-submit",
-                },
-            };
-        },
-        translatedListOfTypes() {
-            if (this.label !== "") {
-                return this.label;
-            }
+});
+const props = defineProps<{
+    multiple: boolean;
+    types: EntityType[];
+    picked: Entities[];
+    uniqid: string;
+    removableIfSet?: boolean;
+    displayPicked?: boolean;
+    suggested?: Entities[];
+    label?: string;
+}>();

-            let trans = [];
-            this.types.forEach((t) => {
-                if (this.$props.multiple) {
-                    trans.push(appMessages.fr.pick_entity[t].toLowerCase());
-                } else {
-                    trans.push(
-                        appMessages.fr.pick_entity[t + "_one"].toLowerCase(),
-                    );
-                }
-            });
+const emits = defineEmits<{
+    (e: "addNewEntity", payload: { entity: Entities }): void;
+    (e: "removeEntity", payload: { entity: Entities }): void;
+    (e: "addNewEntityProcessEnded"): void;
+}>();

-            if (this.$props.multiple) {
-                return (
-                    appMessages.fr.pick_entity.modal_title + trans.join(", ")
-                );
-            } else {
-                return (
-                    appMessages.fr.pick_entity.modal_title_one +
-                    trans.join(", ")
-                );
-            }
-        },
-        listClasses() {
-            return {
-                "list-suggest": true,
-                "remove-items": this.$props.removableIfSet,
-            };
-        },
-    },
-    methods: {
-        addNewSuggested(entity) {
-            this.$emit("addNewEntity", { entity: entity });
-        },
-        addNewEntity({ selected, modal }) {
-            selected.forEach((item) => {
-                this.$emit("addNewEntity", { entity: item.result });
-            }, this);
-            this.$refs.addPersons.resetSearch(); // to cast child method
-            modal.showModal = false;
-            this.$emit("addNewEntityProcessEnded");
-        },
-        removeEntity(entity) {
-            if (!this.$props.removableIfSet) {
-                return;
-            }
-            this.$emit("removeEntity", { entity: entity });
-        },
-    },
-};
+const addPersons = ref();
+
+const addPersonsOptions = computed(
+    () =>
+        ({
+            uniq: !props.multiple,
+            type: props.types,
+            priority: null,
+            button: {
+                size: "btn-sm",
+                class: "btn-submit",
+            },
+        }) as SearchOptions,
+);
+
+const translatedListOfTypes = computed(() => {
+    if (props.label !== undefined && props.label !== "") {
+        return props.label;
+    }
+
+    const translatedTypes = props.types.map((type: EntityType) => {
+        switch (type) {
+            case "user":
+                return trans(PICK_ENTITY_USER, {
+                    count: props.multiple ? 2 : 1,
+                });
+            case "person":
+                return trans(PICK_ENTITY_PERSON, {
+                    count: props.multiple ? 2 : 1,
+                });
+            case "third_party":
+                return trans(PICK_ENTITY_THIRDPARTY, {
+                    count: props.multiple ? 2 : 1,
+                });
+            case "user_group":
+                return trans(PICK_ENTITY_USER_GROUP, {
+                    count: props.multiple ? 2 : 1,
+                });
+        }
+    });
+
+    return `${trans(PICK_ENTITY_MODAL_TITLE, {
+        count: props.multiple ? 2 : 1,
+    })} ${translatedTypes.join(", ")}`;
+});
+
+const listClasses = computed(() => ({
+    "badge-suggest": true,
+    "remove-items": props.removableIfSet !== false,
+    inline: true,
+}));
+
+function addNewSuggested(entity: Entities) {
+    emits("addNewEntity", { entity });
+}
+
+function addNewEntity({ selected }: addNewEntities) {
+    Object.values(selected).forEach((item) => {
+        emits("addNewEntity", { entity: item.result });
+    });
+    addPersons.value?.resetSearch();
+
+    emits("addNewEntityProcessEnded");
+}
+
+function removeEntity(entity: Entities) {
+    if (props.removableIfSet === false) {
+        return;
+    }
+    emits("removeEntity", { entity });
+}
+
+function getBadgeClass(entities: Entities) {
+    if (entities.type !== "user_group") {
+        return entities.type;
+    }
+    return "";
+}
+
+function getBadgeStyle(entities: Entities) {
+    if (entities.type === "user_group") {
+        return [
+            `ul.badge-suggest li > span {
+                color: ${entities.foregroundColor}!important;
+                border-bottom-color: ${entities.backgroundColor};
+        }`,
+        ];
+    }
+    return [];
+}
 </script>
+
+<style lang="scss" scoped>
+.grey-card {
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 1.5rem;
+    min-height: 160px;
+}
+
+.btn-check:checked + .btn,
+:not(.btn-check) + .btn:active,
+.btn:first-child:active,
+.btn.active,
+.btn.show {
+    color: white;
+    box-shadow: 0 0 0 0.2rem var(--bs-chill-green);
+    outline: 0;
+}
+
+.as-user-group {
+    display: inline-block;
+}
+ul.badge-suggest {
+    list-style-type: none;
+    padding-left: 0;
+    margin-bottom: 0px;
+}
+ul.badge-suggest li > span {
+    white-space: normal;
+    text-align: start;
+    margin-bottom: 3px;
+}
+
+ul.badge-suggest.inline li {
+    display: inline-block;
+    margin-right: 0.2em;
+}
+ul.badge-suggest.add-items li {
+    position: relative;
+}
+ul.badge-suggest.add-items li span {
+    cursor: pointer;
+    padding-left: 2rem;
+}
+ul.badge-suggest.add-items li span:hover {
+    color: #ced4da;
+}
+ul.badge-suggest.add-items li > span:before {
+    font: normal normal normal 13px ForkAwesome;
+    margin-right: 1.8em;
+    content: "\f067";
+    color: var(--bs-success);
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0.75rem;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+ul.badge-suggest.remove-items li {
+    position: relative;
+}
+ul.badge-suggest.remove-items li span {
+    cursor: pointer;
+    padding-left: 2rem;
+}
+ul.badge-suggest.remove-items li span:hover {
+    color: #ced4da;
+}
+ul.badge-suggest.remove-items li > span:before {
+    font: normal normal normal 13px ForkAwesome;
+    margin-right: 1.8em;
+    content: "\f1f8";
+    color: var(--bs-danger);
+    position: absolute;
+    display: block;
+    top: 50%;
+    left: 0.75rem;
+    -webkit-transform: translateY(-50%);
+    -moz-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+ul.badge-suggest li > span {
+    margin: 0.2rem 0.1rem;
+    display: inline-block;
+    padding: 0 1em 0 2.2em !important;
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+    border-bottom-width: 3px;
+    border-bottom-style: solid;
+    border-radius: 6px;
+    font-size: 0.75em;
+    font-weight: 700;
+}
+
+ul.badge-suggest li > span.person {
+    border-bottom-color: #43b29d;
+}
+ul.badge-suggest li > span.thirdparty {
+    border-bottom-color: rgb(198.9, 72, 98.1);
+}
+</style>
--- a/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
+++ b/src/Bundle/ChillMainBundle/translations/messages+intl-icu.fr.yaml
@@ -156,3 +156,31 @@ renderbox:
    no_current_address: "Sans adresse actuellement"
    new_household: "Nouveau ménage"
    no_members_yet: "Aucun membre actuellement"
+
+pick_entity:
+    add: "Ajouter"
+    modal_title: >-
+        {count, plural,
+            one {Indiquer un}
+            other {Ajouter des}
+        }
+    user: >-
+        {count, plural,
+            one {Utilisateur}
+            other {Utilisateurs}
+        }
+    user_group: >-
+        {count, plural,
+            one {Groupe d'utilisateur}
+            other {Groupes d'utilisateurs}
+        }
+    person: >-
+        {count, plural,
+            one {Usager}
+            other {Usagers}
+        }
+    thirdparty: >-
+        {count, plural,
+            one {Tiers}
+            other {Tiers}
+        }