Outline one approach to handling the people picker of type 'field'

Ioannis · Jan 31, 2025 · 51e5d06 · 51e5d06
1 parent 1c70f97
commit 51e5d06
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 70 deletions.
diff --git a/app/src/View/Helper/VueHelper.php b/app/src/View/Helper/VueHelper.php
@@ -74,6 +74,7 @@ class VueHelper extends Helper {
       'add.member',
       'add.owner',
       'autocomplete.pager.show.more',
+      'autocomplete.people.desc',
       'autocomplete.people.label',
       'autocomplete.people.placeholder',
       'close',

diff --git a/app/templates/element/form/infoDiv/autocomplete.php b/app/templates/element/form/infoDiv/autocomplete.php
@@ -41,7 +41,4 @@
   formParams:     $formParams ?? []
 );
 ?>
-<div class="field-desc field-autocomplete-desc">
-  <span class="material-symbols-outlined">info</span>
-  <span><?= __d('operation','autocomplete.people.desc',['2']) ?></span>
-</div>
+
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1821,6 +1821,10 @@ ul.form-list .cm-time-picker-vals li {
   text-decoration: underline;
   background-color: var(--cmg-color-bg-002);
 }
+.cm-ac-change-btn {
+  padding: 0.25em 0.5em !important;
+  margin-left: 1em;
+}
 .item-with-type {
   display: grid;
   grid-template-columns: 1fr 1fr;

diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -284,75 +284,86 @@ export default {
     }
   },
   template: `
-    <label v-if="hasAutoCompleteLabel" class="mr-2" :for="this.options.htmlId">{{ this.autoCompleteLabel }}</label>
-    <MiniLoader :isLoading="loading" :classes="getMiniLoaderClasses"/>
-    <AutoComplete 
-      v-model="person"
-      inputClass="cm-autocomplete"
-      :inputId="this.options.htmlId"
-      :inputProps="this.options.inputProps"
-      :placeholder="this.txt['operation.autocomplete.people.placeholder']"
-      panelClass="cm-autocomplete-panel"
-      optionLabel="label"
-      optionDisabled="isMember"
-      :minLength="this.options.minLength"
-      :delay="500"
-      loadingIcon=null
-      :suggestions="this.people" 
-      forceSelection
-      @complete="searchPeople"
-      @show="calculateDisabled"
-      @keyup.arrow-down="onListNavigate"
-      @keyup.arrow-up="onListNavigate"
-      @item-select="setPerson">
-      <template #option="slotProps">
-        <div class="cm-ac-item">
-          <div class="cm-ac-item-primary">
-            <div class="cm-ac-name">
-              <!-- XXX The input field will be updated with the option.label value. Here we only need the full name -->
-              <span class="cm-ac-name-value" v-if="slotProps.option.isMember" v-html="slotProps.option.fullName"></span>
-              <span class="cm-ac-name-value" v-else v-html="this.highlightedquery(slotProps.option.fullName, query)"></span>
-              <span class="mr-1 badge bg-success" v-if="slotProps.option.isMember">{{ this.txt['controller.GroupMembers'] }}</span>
+    <div class="cm-autocomplete-container" v-if="this.options.inputProps.dataPersonid">
+      <a href="#">{{ this.options.inputProps.name }}</a>
+      <button class="btn btn-primary btn-sm cm-ac-change-btn">change</button>
+    </div>
+    <div class="cm-autocomplete-container" v-else>
+      <label v-if="hasAutoCompleteLabel" class="mr-2" :for="this.options.htmlId">{{ this.autoCompleteLabel }}</label>
+      <MiniLoader :isLoading="loading" :classes="getMiniLoaderClasses"/>
+      
+      <AutoComplete 
+        v-model="person"
+        inputClass="cm-autocomplete"
+        :inputId="this.options.htmlId"
+        :inputProps="this.options.inputProps"
+        :placeholder="this.txt['operation.autocomplete.people.placeholder']"
+        panelClass="cm-autocomplete-panel"
+        optionLabel="label"
+        optionDisabled="isMember"
+        :minLength="this.options.minLength"
+        :delay="500"
+        loadingIcon=null
+        :suggestions="this.people" 
+        forceSelection
+        @complete="searchPeople"
+        @show="calculateDisabled"
+        @keyup.arrow-down="onListNavigate"
+        @keyup.arrow-up="onListNavigate"
+        @item-select="setPerson">
+        <template #option="slotProps">
+          <div class="cm-ac-item">
+            <div class="cm-ac-item-primary">
+              <div class="cm-ac-name">
+                <!-- XXX The input field will be updated with the option.label value. Here we only need the full name -->
+                <span class="cm-ac-name-value" v-if="slotProps.option.isMember" v-html="slotProps.option.fullName"></span>
+                <span class="cm-ac-name-value" v-else v-html="this.highlightedquery(slotProps.option.fullName, query)"></span>
+                <span class="mr-1 badge bg-success" v-if="slotProps.option.isMember">{{ this.txt['controller.GroupMembers'] }}</span>
+              </div>
+              <div class="cm-ac-item-id">
+                ID: {{ slotProps.option.itemId }}
+              </div>
             </div>
-            <div class="cm-ac-item-id">
-              ID: {{ slotProps.option.itemId }}
+            <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">
+                  <ItemWithType
+                    v-for="item in slotProps.option.email" 
+                    :item="item"
+                    kind="email"  
+                    :query="query"
+                    :highlightedquery="highlightedquery"
+                    :isMember="slotProps.option.isMember"
+                  />
+                </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">
+                  <ItemWithType 
+                    v-for="item in slotProps.option.identifier"
+                    :query="query"
+                    :item="item"
+                    kind="identifier"
+                    :highlightedquery="highlightedquery"
+                    :isMember="slotProps.option.isMember"
+                  />
+                </span>
+              </div>
             </div>
           </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">
-                <ItemWithType
-                  v-for="item in slotProps.option.email" 
-                  :item="item"
-                  kind="email"  
-                  :query="query"
-                  :highlightedquery="highlightedquery"
-                  :isMember="slotProps.option.isMember"
-                />
-              </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">
-                <ItemWithType 
-                  v-for="item in slotProps.option.identifier"
-                  :query="query"
-                  :item="item"
-                  kind="identifier"
-                  :highlightedquery="highlightedquery"
-                  :isMember="slotProps.option.isMember"
-                />
-              </span>
-            </div>
+        </template>
+        <template #footer="slotProps" v-if="hasMorePages">
+          <div class="cm-ac-pager">
+            <a href="#" @click="this.fetchMorePeople()">{{ this.txt['operation.autocomplete.pager.show.more'] }}</a>
           </div>
-        </div>
-      </template>
-      <template #footer="slotProps" v-if="hasMorePages">
-        <div class="cm-ac-pager">
-          <a href="#" @click="this.fetchMorePeople()">{{ this.txt['operation.autocomplete.pager.show.more'] }}</a>
-        </div>
-      </template>
-    </AutoComplete>
+        </template>
+      </AutoComplete>
+      <div v-if="this.options.type == 'field'" class="field-desc field-autocomplete-desc">
+        <span class="material-symbols-outlined">info</span>
+        <span>{{ this.txt['operation.autocomplete.people.desc'] }}</span>
+      </div>
+    </div>
   `
 }