Restore features after merging

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

@@ -1,14 +1,18 @@
 <template>
   <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">
-            <span
-                v-if="'me' === p"
-                class="chill_denomination current-user updatedBy"
-            >{{ trans(USER_CURRENT_USER) }}</span
-            >
+      <li
+        v-for="p in picked"
+        @click="removeEntity(p)"
+        :key="p === 'me' ? 'me' : p.type + p.id"
+      >
         <span
-            v-else
+          v-if="'me' === p"
+          class="chill_denomination current-user updatedBy"
+          >{{ trans(USER_CURRENT_USER) }}</span
+        >
+        <span
+          v-else
           :class="getBadgeClass(p)"
           class="chill_denomination"
           :style="getBadgeStyle(p)"
@@ -19,17 +23,17 @@
     </ul>
     <ul class="record_actions">
       <li v-if="isCurrentUserPicker" class="btn btn-sm btn-misc">
-            <label class="flex items-center gap-2">
-                <input
-                    :checked="picked.indexOf('me') >= 0 ? true : null"
-                    ref="itsMeCheckbox"
-                    :type="multiple ? 'checkbox' : 'radio'"
-                    @change="selectItsMe"
-                />
-                {{ trans(USER_CURRENT_USER) }}
-            </label>
-        </li>
-        <li class="add-persons">
+        <label class="flex items-center gap-2">
+          <input
+            :checked="isMePicked"
+            ref="itsMeCheckbox"
+            :type="multiple ? 'checkbox' : 'radio'"
+            @change="selectItsMe($event as InputEvent)"
+          />
+          {{ trans(USER_CURRENT_USER) }}
+        </label>
+      </li>
+      <li class="add-persons">
         <add-persons
           :options="addPersonsOptions"
           :key="uniqid"
@@ -42,7 +46,11 @@
     </ul>
 
     <ul class="badge-suggest add-items inline" style="float: right">
-      <li v-for="s in suggested" :key="s.id" @click="addNewSuggested(s)">
+      <li
+        v-for="s in suggested"
+        :key="s.type + s.id"
+        @click="addNewSuggested(s)"
+      >
         <span :class="getBadgeClass(s)" :style="getBadgeStyle(s)">
           {{ s.text }}
         </span>
@@ -52,16 +60,28 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineProps, defineEmits, defineComponent } from "vue";
+import {
+  ref,
+  computed,
+  defineProps,
+  defineEmits,
+  defineComponent,
+  withDefaults,
+} from "vue";
 import AddPersons from "ChillPersonAssets/vuejs/_components/AddPersons.vue";
-import { Entities, EntityType, SearchOptions } from "ChillPersonAssets/types";
+import {
+  Entities,
+  EntitiesOrMe,
+  EntityType,
+  SearchOptions,
+} from "ChillPersonAssets/types";
 import {
   PICK_ENTITY_MODAL_TITLE,
   PICK_ENTITY_USER,
   PICK_ENTITY_USER_GROUP,
   PICK_ENTITY_PERSON,
   PICK_ENTITY_THIRDPARTY,
-    USER_CURRENT_USER,
+  USER_CURRENT_USER,
   trans,
 } from "translator";
 import { addNewEntities } from "ChillMainAssets/types";
@@ -71,25 +91,28 @@ defineComponent({
     AddPersons,
   },
 });
-const props = defineProps<{
-  multiple: boolean;
-  types: EntityType[];
-  picked: Entities[];
-  uniqid: string;
-  removableIfSet?: boolean;
-  displayPicked?: boolean;
-  suggested?: Entities[];
-  label?: string;
-  isCurrentUserPicker: boolean // must default to false
-}>();
+const props = withDefaults(
+  defineProps<{
+    multiple: boolean;
+    types: EntityType[];
+    picked: EntitiesOrMe[];
+    uniqid: string;
+    removableIfSet?: boolean;
+    displayPicked?: boolean;
+    suggested?: Entities[];
+    label?: string;
+    isCurrentUserPicker?: boolean;
+  }>(),
+  { isCurrentUserPicker: false },
+);
 
 const emits = defineEmits<{
-  (e: "addNewEntity", payload: { entity: Entities }): void;
-  (e: "removeEntity", payload: { entity: Entities }): void;
+  (e: "addNewEntity", payload: { entity: EntitiesOrMe }): void;
+  (e: "removeEntity", payload: { entity: EntitiesOrMe }): void;
   (e: "addNewEntityProcessEnded"): void;
 }>();
 
-const itsMeCheckbox = ref(null);
+const itsMeCheckbox = ref<null | HTMLInputElement>(null);
 const addPersons = ref();
 
 const addPersonsOptions = computed(
@@ -105,6 +128,8 @@ const addPersonsOptions = computed(
     }) as SearchOptions,
 );
 
+const isMePicked = computed<boolean>(() => props.picked.indexOf("me") >= 0);
+
 const translatedListOfTypes = computed(() => {
   if (props.label !== undefined && props.label !== "") {
     return props.label;
@@ -142,10 +167,12 @@ const listClasses = computed(() => ({
   inline: true,
 }));
 
-const selectItsMe = (event) =>
-    event.target.checked ? addNewSuggested("me") : removeEntity("me");
+const selectItsMe = (event: InputEvent) => {
+  const target = event.target as HTMLInputElement;
+  target.checked ? addNewSuggested("me") : removeEntity("me");
+};
 
-function addNewSuggested(entity: Entities) {
+function addNewSuggested(entity: EntitiesOrMe) {
   emits("addNewEntity", { entity });
 }
 
@@ -158,32 +185,31 @@ function addNewEntity({ selected }: addNewEntities) {
   emits("addNewEntityProcessEnded");
 }
 
-
-const removeEntity = (entity) => {
-    if (!props.removableIfSet) return;
-    if (entity === "me" && itsMeCheckbox.value) {
-        itsMeCheckbox.value.checked = false;
-    }
-    emits("removeEntity", { entity });
+const removeEntity = (entity: EntitiesOrMe) => {
+  if (!props.removableIfSet) return;
+  if (entity === "me" && itsMeCheckbox.value) {
+    itsMeCheckbox.value.checked = false;
+  }
+  emits("removeEntity", { entity });
 };
 
 function getBadgeClass(entities: Entities) {
-    if (entities.type !== "user_group") {
-        return entities.type;
-    }
-    return "";
+  if (entities.type !== "user_group") {
+    return entities.type;
+  }
+  return "";
 }
 
 function getBadgeStyle(entities: Entities) {
-    if (entities.type === "user_group") {
-        return [
-            `ul.badge-suggest li > span {
+  if (entities.type === "user_group") {
+    return [
+      `ul.badge-suggest li > span {
                 color: ${entities.foregroundColor}!important;
                 border-bottom-color: ${entities.backgroundColor};
         }`,
-        ];
-    }
-    return [];
+    ];
+  }
+  return [];
 }
 </script>
 
@@ -291,7 +317,7 @@ ul.badge-suggest li > span.thirdparty {
   border-bottom-color: rgb(198.9, 72, 98.1);
 }
 .current-user {
-    color: var(--bs-body-color);
-    background-color: var(--bs-chill-l-gray) !important;
+  color: var(--bs-body-color);
+  background-color: var(--bs-chill-l-gray) !important;
 }
 </style>