UI updates to People Picker (CFM-411)

Ioannis · Aug 23, 2024 · 1a67e2a · 1a67e2a
1 parent ecee6c7
commit 1a67e2a
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 16 deletions.
diff --git a/app/templates/CoSettings/fields.inc b/app/templates/CoSettings/fields.inc
@@ -117,7 +117,8 @@ if($vv_action == 'edit') {
           ],
         ],
         'person_picker_display_types' => [
-          'singleRowItem' => true
+          'singleRowItem' => true,
+          'fieldLabel' => __d('field', 'CoSettings.person_picker_display_types')
         ]
       ],
     ]]);

diff --git a/app/templates/element/form/infoDiv/grouped.php b/app/templates/element/form/infoDiv/grouped.php
@@ -42,10 +42,10 @@
       unset($fieldArguments['singleRowItem']);
     }
     ?>
-  <div class="subfield subfield-cols <?= $classes ?>">
-    <div class="field-col">
-    <?= $this->Field->formField($fieldName, ...$fieldArguments) ?>
+    <div class="subfield subfield-cols <?= $classes ?>">
+      <div class="field-col">
+      <?= $this->Field->formField($fieldName, ...$fieldArguments) ?>
+      </div>
     </div>
-  </div>
   <?php endforeach; ?>
 </div>
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1635,27 +1635,39 @@ ul.form-list .cm-time-picker-vals li {
 .cm-autocomplete-panel {
   overflow-y: scroll;
   max-height: 50vh !important;
+  max-width: 800px;
 }
 .cm-autocomplete-panel ul {
   padding: 0;
   margin: 0;
   background-color: var(--cmg-color-body-bg);
   border: 1px solid var(--cmg-color-bg-008);
 }
-.cm-autocomplete-panel li {
+.cm-autocomplete-panel .cm-ac-item {
   padding: 1em;
+}
+.cm-autocomplete-panel li {
   list-style: none;
   border-collapse: collapse;
   border-bottom: 1px solid var(--cmg-color-bg-006);
 }
-.cm-autocomplete-panel li[data-p-focus=true] {
-  background-color: var(--cmg-color-bg-001);
-  box-shadow: inset 0 0 0.5em var(--cmg-color-btn-bg-001);
+.cm-autocomplete-panel li[data-p-focus="true"] {
+  background-color: var(--cmg-color-highlight-002);
+  box-shadow: inset 0 0 0.1em var(--cmg-color-highlight-007);
+  cursor: pointer;
+}
+.cm-autocomplete-panel li[data-p-focus="true"] > .cm-ac-item-is-member {
+  background-color: var(--cmg-color-body-bg);
+  box-shadow: inset 0 0 0.1em var(--cmg-color-highlight-007);
+  cursor: default;
 }
 .cm-autocomplete-panel .cm-ac-subitems {
   font-size: 0.9em;
   margin-left: 1em;
 }
+.cm-ac-item .badge {
+  margin-left: 1em;
+}
 .cm-ac-subitem {
   display: grid;
   grid-template-columns: 1fr 8fr;

diff --git a/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js b/app/webroot/js/comanage/components/autocomplete/cm-autocomplete-people.js
@@ -133,7 +133,10 @@ export default {
 
       return emailWithType.join(", ")
     },
-    highlightedquery(str, query) {
+    highlightedquery(str, query, isMember) {
+      if(isMember) {
+        return str
+      }
       const pattern = new RegExp(query, "i")
       const matchingstr = str?.match(pattern)?.pop()
       if(matchingstr != undefined && matchingstr != "") {
@@ -171,13 +174,17 @@ export default {
          "emailLabel": this.txt['email'] + ": ",
          "identifier": this.filterByIdentifierType(item?.identifiers),
          "identifierPretty": this.shortenString(this.constructIdentifierCsv(this.filterByIdentifierType(item?.identifiers))),
-         "identifierLabel": this.txt['Identifiers'] + ": "
+         "identifierLabel": this.txt['Identifiers'] + ": ",
+         "isMember": item?._matchingData?.GroupMembers?.id ? true : false
         }
       })
     },
     setPerson() {
+      if(this.person.isMember) { 
+        return false;
+      }
       if(this.options.type == 'default') {
-        this.options.inputProps.dataPersonid = this.person.value
+        this.options.inputProps.dataPersonid = this.person.value;
       } else if(this.options.type == 'field') {
         // The picker is part of a standard form field
         const field = document.getElementById(this.options.fieldName);
@@ -246,9 +253,11 @@ export default {
       @complete="searchPeople"
       @item-select="setPerson">
       <template #option="slotProps">
-        <div class="cm-ac-item">
+        <div :class="slotProps.option.isMember?'cm-ac-item cm-ac-item-is-member':'cm-ac-item'" :disabled="slotProps.option.isMember?'disabled':'false'">
           <div class="cm-ac-item-primary cm-ac-name">
-            <span v-html="this.highlightedquery(slotProps.option.label, query)"></span></div>
+            <span v-html="this.highlightedquery(slotProps.option.label, query, slotProps.option.isMember)"></span>
+            <span class="mr-1 badge bg-success" v-if="slotProps.option.isMember">{{ this.txt['GroupMembers'] }}</span>
+          </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>
@@ -259,6 +268,7 @@ export default {
                   kind="email"  
                   :query="query"
                   :highlightedquery="highlightedquery"
+                  :isMember="slotProps.option.isMember"
                 />
               </span>
             </div>
@@ -271,6 +281,7 @@ export default {
                   :item="item"
                   kind="identifier"
                   :highlightedquery="highlightedquery"
+                  :isMember="slotProps.option.isMember"
                 />
               </span>
             </div>

diff --git a/app/webroot/js/comanage/components/autocomplete/item-with-type.js b/app/webroot/js/comanage/components/autocomplete/item-with-type.js
@@ -29,7 +29,8 @@ export default {
     item: Object,
     kind: '',
     query: '',
-    highlightedquery: Object
+    highlightedquery: Object,
+    isMember: ''
   },
   inject: ['app'],
   computed: {
@@ -52,7 +53,7 @@ export default {
   template: `
     <div :class="itemClasses">
       <span class="value">
-        <span v-html="highlightedquery(this.val, query)"></span>
+        <span v-html="highlightedquery(this.val, query, this.isMember)"></span>
       </span>
       <span v-if="app.cosettings[0].person_picker_display_types" class="type">
        {{ this.type }}