Restore features after merging

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

@@ -1,7 +1,11 @@
 <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">
+      <li
+        v-for="p in picked"
+        @click="removeEntity(p)"
+        :key="p === 'me' ? 'me' : p.type + p.id"
+      >
         <span
           v-if="'me' === p"
           class="chill_denomination current-user updatedBy"
@@ -21,10 +25,10 @@
       <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"
+            :checked="isMePicked"
             ref="itsMeCheckbox"
             :type="multiple ? 'checkbox' : 'radio'"
-                    @change="selectItsMe"
+            @change="selectItsMe($event as InputEvent)"
           />
           {{ trans(USER_CURRENT_USER) }}
         </label>
@@ -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,9 +60,21 @@
 </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,
@@ -71,25 +91,28 @@ defineComponent({
     AddPersons,
   },
 });
-const props = defineProps<{
+const props = withDefaults(
+  defineProps<{
     multiple: boolean;
     types: EntityType[];
-  picked: Entities[];
+    picked: EntitiesOrMe[];
     uniqid: string;
     removableIfSet?: boolean;
     displayPicked?: boolean;
     suggested?: Entities[];
     label?: string;
-  isCurrentUserPicker: boolean // must default to false
+    isCurrentUserPicker?: boolean;
-}>();
+  }>(),
+  { isCurrentUserPicker: false },
+);
 
 const emits = defineEmits<{
-  (e: "addNewEntity", payload: { entity: Entities }): void;
+  (e: "addNewEntity", payload: { entity: EntitiesOrMe }): void;
-  (e: "removeEntity", payload: { entity: Entities }): 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) =>
+const selectItsMe = (event: InputEvent) => {
-    event.target.checked ? addNewSuggested("me") : removeEntity("me");
+  const target = event.target as HTMLInputElement;
+  target.checked ? addNewSuggested("me") : removeEntity("me");
+};
 
-function addNewSuggested(entity: Entities) {
+function addNewSuggested(entity: EntitiesOrMe) {
   emits("addNewEntity", { entity });
 }
 
@@ -158,8 +185,7 @@ function addNewEntity({ selected }: addNewEntities) {
   emits("addNewEntityProcessEnded");
 }
 
-
+const removeEntity = (entity: EntitiesOrMe) => {
-const removeEntity = (entity) => {
   if (!props.removableIfSet) return;
   if (entity === "me" && itsMeCheckbox.value) {
     itsMeCheckbox.value.checked = false;

src/Bundle/ChillPersonBundle/Resources/public/types.ts

@@ -1,4 +1,3 @@
-import { StoredObject } from "ChillDocStoreAssets/types";
 import {
   Address,
   Center,
@@ -276,14 +275,16 @@ export type Entities = (UserGroup | User | Person | Thirdparty | Household) & {
   profession?: string;
 };
 
-export type Result = Entities & {
+export type EntitiesOrMe = "me" | Entities;
+
+export type AddPersonResult = Entities & {
   parent?: Entities | null;
 };
 
 export interface Suggestion {
   key: string;
   relevance: number;
-  result: Result;
+  result: AddPersonResult;
 }
 
 export interface SearchPagination {

src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/AddPersons.vue

@@ -37,9 +37,7 @@
               id="search-persons"
               name="query"
               v-model="query"
-                            :placeholder="
+              :placeholder="trans(ADD_PERSONS_SEARCH_SOME_PERSONS)"
-                                trans(ADD_PERSONS_SEARCH_SOME_PERSONS)
-                            "
               ref="searchRef"
             />
             <i class="fa fa-search fa-lg" />
@@ -56,10 +54,7 @@
               <a v-if="suggestedCounter > 2" @click="selectAll">
                 {{ trans(ACTION_CHECK_ALL) }}
               </a>
-                            <a
+              <a v-if="selectedCounter > 0" @click="resetSelection">
-                                v-if="selectedCounter > 0"
-                                @click="resetSelection"
-                            >
                 <i v-if="suggestedCounter > 2"> • </i>
                 {{ trans(ACTION_RESET) }}
               </a>
@@ -95,9 +90,7 @@
                 (options.type.includes('person') ||
                   options.type.includes('thirdparty'))
               "
-                            :button-text="
+              :button-text="trans(ONTHEFLY_CREATE_BUTTON, { q: query })"
-                                trans(ONTHEFLY_CREATE_BUTTON, { q: query })
-                            "
               :allowed-types="options.type"
               :query="query"
               action="create"
@@ -151,7 +144,7 @@ import {
 import {
   Suggestion,
   Search,
-    Result as OriginalResult,
+  AddPersonResult as OriginalResult,
   SearchOptions,
 } from "ChillPersonAssets/types";
 
@@ -281,10 +274,7 @@ function setQuery(q: string) {
         loadSuggestions(suggested.results);
       })
       .catch((error: DOMException) => {
-                if (
+        if (error instanceof DOMException && error.name === "AbortError") {
-                    error instanceof DOMException &&
-                    error.name === "AbortError"
-                ) {
           // Request was aborted, ignore
           return;
         }