Frontend: display and behavior of pickUserOrMe form field

src/Bundle/ChillMainBundle/Resources/public/module/pick-entity/index.js

@@ -12,6 +12,11 @@ function loadDynamicPicker(element) {
   let apps = element.querySelectorAll('[data-module="pick-dynamic"]');
 
   apps.forEach(function (el) {
+    let suggested;
+    let as_id;
+    let submit_on_adding_new_entity;
+    let label;
+    let isCurrentUserPicker;
     const isMultiple = parseInt(el.dataset.multiple) === 1,
       uniqId = el.dataset.uniqid,
       input = element.querySelector(
@@ -22,12 +27,13 @@ function loadDynamicPicker(element) {
         ? JSON.parse(input.value)
         : input.value === "[]" || input.value === ""
           ? null
-          : [JSON.parse(input.value)],
-      suggested = JSON.parse(el.dataset.suggested),
-      as_id = parseInt(el.dataset.asId) === 1,
-      submit_on_adding_new_entity =
-        parseInt(el.dataset.submitOnAddingNewEntity) === 1,
-      label = el.dataset.label;
+          : [JSON.parse(input.value)];
+    suggested = JSON.parse(el.dataset.suggested);
+    as_id = parseInt(el.dataset.asId) === 1;
+    submit_on_adding_new_entity =
+      parseInt(el.dataset.submitOnAddingNewEntity) === 1;
+    label = el.dataset.label;
+    isCurrentUserPicker = uniqId.startsWith("pick_user_or_me_dyn");
 
     if (!isMultiple) {
       if (input.value === "[]") {
@@ -44,6 +50,7 @@ function loadDynamicPicker(element) {
         ':uniqid="uniqid" ' +
         ':suggested="notPickedSuggested" ' +
         ':label="label" ' +
+        ':isCurrentUserPicker="isCurrentUserPicker" ' +
         '@addNewEntity="addNewEntity" ' +
         '@removeEntity="removeEntity" ' +
         '@addNewEntityProcessEnded="addNewEntityProcessEnded"' +
@@ -61,6 +68,7 @@ function loadDynamicPicker(element) {
           as_id,
           submit_on_adding_new_entity,
           label,
+          isCurrentUserPicker
         };
       },
       computed: {
@@ -89,7 +97,8 @@ function loadDynamicPicker(element) {
                 const ids = this.picked.map((el) => el.id);
                 input.value = ids.join(",");
               }
-              console.log(entity);
+              console.log(this.picked)
+              // console.log(entity);
             }
           } else {
             if (

src/Bundle/ChillMainBundle/Resources/public/vuejs/PickEntity/PickEntity.vue

@@ -1,10 +1,22 @@
 <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>
+<!--            todo: use translations-->
+            <span v-if="'me' === p" class="chill_denomination">utilisateur courant</span>
+            <span v-else class="chill_denomination">{{ p.text }}</span>
         </li>
     </ul>
     <ul class="record_actions">
+        <li>
+            <label class="flex items-center gap-2">
+                <input
+                    ref="itsMeCheckbox"
+                    :type="multiple ? 'checkbox' : 'radio'"
+                    @change="selectItsMe"
+                />
+                Utilisateur courant {{ currentUser }}
+            </label>
+        </li>
         <li class="add-persons">
             <add-persons
                 :options="addPersonsOptions"
@@ -27,6 +39,7 @@
 <script>
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
 import { appMessages } from "./i18n";
+import { trans } from "translator";
 
 export default {
     name: "PickEntity",
@@ -63,6 +76,10 @@ export default {
             type: String,
             required: false,
         },
+        isCurrentUserPicker: {
+            type: Boolean,
+            default: false
+        }
     },
     emits: ["addNewEntity", "removeEntity", "addNewEntityProcessEnded"],
     components: {
@@ -113,6 +130,7 @@ export default {
             }
         },
         listClasses() {
+            console.log(this.isCurrentUserPicker)
             return {
                 "list-suggest": true,
                 "remove-items": this.$props.removableIfSet,
@@ -120,6 +138,13 @@ export default {
         },
     },
     methods: {
+        selectItsMe(event) {
+            if (event.target.checked) {
+                this.addNewSuggested('me')
+            } else {
+                this.removeEntity('me')
+            }
+        },
         addNewSuggested(entity) {
             this.$emit("addNewEntity", { entity: entity });
         },
@@ -135,6 +160,11 @@ export default {
             if (!this.$props.removableIfSet) {
                 return;
             }
+            if ('me' === entity) {
+                if (this.$refs.itsMeCheckbox) {
+                    this.$refs.itsMeCheckbox.checked = false;
+                }
+            }
             this.$emit("removeEntity", { entity: entity });
         },
     },