People Picker UI updates (CFM-411)

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')
         ]
       ],
     ]]);

app/templates/Dashboards/configuration.php

@@ -56,19 +56,13 @@
         </li>
       <?php endforeach; // $vv_configuration_menu_items ?>
     </ul>
-
-    <h2 class="config-subtitle mb-2"><?= __d('menu','co.configuration') ?></h2>
-    <p class="menu-panel-links-desc"><?= __d('menu','co.configuration.desc') ?></p>
   <?php endif; // $vv_platform_menu_items ?>
 
-  <?php if(empty($vv_platform_menu_items)): ?>
-    <h2 class="config-subtitle mb-2"><?= __d('menu','co.configuration') ?></h2>
-  <?php endif; ?>
-
-  <ul id="configuration-menu" class="config-menu">
-    <?php foreach($vv_configuration_menu_items as $label => $cfg): ?>
+  <h2 class="config-subtitle mb-2"><?= __d('menu','co.registries') ?></h2>
+  <ul id="registries-menu" class="config-menu">
+    <?php foreach($vv_registries_menu_items as $label => $cfg): ?>
       <li>
-        <?php 
+        <?php
           $linkContent =  '<em class="material-icons" aria-hidden="true">' . $cfg['icon'] . '</em>'
             . '<span class="menu-title">' . $label . '</span>';
           print $this->Html->link(
@@ -77,16 +71,16 @@
              'controller' => $cfg['controller'],
              'action'     => $cfg['action'],
              '?'          => ['co_id' => $vv_cur_co->id]],
-             ['escape' => false]
-            ); 
+            ['escape' => false]
+          );
         ?>
       </li>
-    <?php endforeach; // $vv_configuration_menu_items ?>
+    <?php endforeach; // $vv_registries_menu_items ?>
   </ul>
-  
-  <h2 class="config-subtitle mb-2"><?= __d('menu','co.registries') ?></h2>
-  <ul id="registries-menu" class="config-menu">
-    <?php foreach($vv_registries_menu_items as $label => $cfg): ?>
+
+  <h2 class="config-subtitle mb-2"><?= __d('menu','co.artifacts') ?></h2>
+  <ul id="artifacts-menu" class="config-menu">
+    <?php foreach($vv_artifacts_menu_items as $label => $cfg): ?>
       <li>
         <?php
           $linkContent =  '<em class="material-icons" aria-hidden="true">' . $cfg['icon'] . '</em>'
@@ -101,14 +95,17 @@
           );
         ?>
       </li>
-    <?php endforeach; // $vv_registries_menu_items ?>
+    <?php endforeach; // $vv_artifacts_menu_items ?>
   </ul>
 
-  <h2 class="config-subtitle mb-2"><?= __d('menu','co.artifacts') ?></h2>
-  <ul id="artifacts-menu" class="config-menu">
-    <?php foreach($vv_artifacts_menu_items as $label => $cfg): ?>
+  <h2 class="config-subtitle mb-2"><?= __d('menu','co.configuration') ?></h2>
+<!-- can we toss tihs localization?
+  <p class="menu-panel-links-desc"><?= __d('menu','co.configuration.desc') ?></p>
+  -->
+  <ul id="configuration-menu" class="config-menu">
+    <?php foreach($vv_configuration_menu_items as $label => $cfg): ?>
       <li>
-        <?php
+        <?php 
           $linkContent =  '<em class="material-icons" aria-hidden="true">' . $cfg['icon'] . '</em>'
             . '<span class="menu-title">' . $label . '</span>';
           print $this->Html->link(
@@ -117,11 +114,11 @@
              'controller' => $cfg['controller'],
              'action'     => $cfg['action'],
              '?'          => ['co_id' => $vv_cur_co->id]],
-            ['escape' => false]
-          );
+             ['escape' => false]
+            ); 
         ?>
       </li>
-    <?php endforeach; // $vv_artifacts_menu_items ?>
+    <?php endforeach; // $vv_configuration_menu_items ?>
   </ul>
 </section>
 

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>

app/webroot/css/co-base.css

@@ -1013,7 +1013,7 @@ ul.form-list li.alert-banner .co-alert {
   color: var(--cmg-color-body-txt);
   margin-right: 0.5em;
 }
-#artifacts-menu {
+#configuration-menu {
   border-bottom: none;
 }
 h2.config-subtitle {
@@ -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;

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>

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 }}