Add type to emails and identifiers

app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js

@@ -64,10 +64,27 @@ export default {
       const type = types.filter((item) => ppadr_id == item.id)
 
       return {
-        'value': type[0].value,
-        'desplay_name': type[0].display_name
+        'id': type?.[0]?.id,
+        'value': type?.[0]?.value,
+        'display_name': type?.[0]?.display_name
       }
     },
+    constructEmailCsv(emailList) {
+      const emailWithType = emailList.map( (mail) => {
+          return mail.mail + " (" + this.app.types?.find((t) => t.id == mail.type_id)?.display_name + ")"
+        }
+      )
+
+      return emailWithType.join(",")
+    },
+    constructIdentifierCsv(identifierList) {
+      const emailWithType = identifierList.map( (ident) => {
+          return ident.identifier + " (" + this.app.types?.find((t) => t.id == ident.type_id)?.display_name + ")"
+        }
+      )
+
+      return emailWithType.join(",")
+    },
     async searchPeople(event) {
       this.loading = true;
       this.error = null;
@@ -79,8 +96,6 @@ export default {
         `identifier=${event.query}` +
         `&mail=${event.query}` +
         `&name=${event.query}` +
-        `&identype=${this.identifierType.value}` +
-        `&mailtype=${this.emailType.value}` +
         `&limit=10`
 
       // todo: The backend need to verify the settings. Else through bad request exception
@@ -121,15 +136,16 @@ export default {
 
       // todo: Add fetch more data at the end of the options list
       return data?.People?.map((item) => {
+        debugger
        return {
          "value": item.id,
          "label": `${item?.primary_name?.given} ${item?.primary_name?.family}`,
-         "email": item?.email_addresses?.map((ma) => ma.mail)?.join(","),
-         "emailPretty": this.shortenString(item?.email_addresses?.map((ma) => ma.mail)?.join(",")),
+         "email": this.constructEmailCsv(item?.email_addresses),
+         "emailPretty": this.shortenString(this.constructEmailCsv(item?.email_addresses)),
          "emailLabel": "Email: ",
-         "identifier": item?.identifiers?.[0].identifier,
-         "identifierPretty": this.shortenString(item?.identifiers?.[0].identifier),
-         "identifierLabel": `Identifier: `
+         "identifier": this.constructIdentifierCsv(item?.identifiers),
+         "identifierPretty": this.shortenString(this.constructIdentifierCsv(item?.identifiers)),
+         "identifierLabel": "Identifier: "
         }
       })
     },
@@ -152,18 +168,19 @@ export default {
       :placeholder="this.txt['autocomplete.people.placeholder']"
       :loading="loading"
       :delay="500"
+      forceSelection
       @item-select="setPerson">
       <template #option="slotProps">
         <div class="cm-ac-item">
           <div class="cm-ac-item-primary cm-ac-name">{{ slotProps.option.label }} (ID: {{ slotProps.option.value }})</div>
           <div class="cm-ac-subitems">
             <div class="cm-ac-subitem cm-ac-email" v-if="slotProps.option.email">
               <span class="cm-ac-label" v-if="slotProps.option.emailLabel">{{ slotProps.option.emailLabel }}</span>
-              <span class="cm-ac-value">{{ slotProps.option.emailPretty }}</span>
+              <span class="cm-ac-value">{{ slotProps.option.email }}</span>
             </div>
             <div class="cm-ac-subitem cm-ac-id" v-if="slotProps.option.identifier">
               <span class="cm-ac-label" v-if="slotProps.option.identifierLabel">{{ slotProps.option.identifierLabel }}</span>
-              <span class="cm-ac-value">{{ slotProps.option.identifierPretty }}</span>
+              <span class="cm-ac-value">{{ slotProps.option.identifier }}</span>
             </div>
           </div>
         </div>