Finalize user select and tweak API for convenience

Add contact_email to the API response when searching user to display Gravatar Icon inside the Creators vSelect

Filter user that are already been selected to not appear in the vSelect

Update creators doesn't trigger the 'Unsaved change'

Add toggleable creators to cell type, and try to limit creator display names

pydatalab/src/pydatalab/routes/v0_1/items.py

@@ -996,6 +996,7 @@ def search_users():
                     "_id": 1,
                     "identities": 1,
                     "display_name": 1,
+                    "contact_email": 1,
                 }
             },
         ]

webapp/src/components/CellInformation.vue

@@ -25,11 +25,8 @@
               <FormattedRefcode :refcode="Refcode" />
             </div>
           </div>
-          <div class="form-group col-md-3 col-sm-3 col-6 pb-3 pr-2">
-            <label id="cell-creators">Creators</label>
-            <div aria-labelledby="cell-creators" class="mx-auto">
-              <Creators :creators="ItemCreators" :size="36" />
-            </div>
+          <div class="form-group col-md-3 col-sm-3 col-6 pb-3">
+            <ToggleableCreatorsFormGroup v-model="ItemCreators" :refcode="Refcode" />
           </div>
           <div class="col-md-6 col-sm-7 pr-2">
             <ToggleableCollectionFormGroup v-model="Collections" />
@@ -115,7 +112,7 @@ import TableOfContents from "@/components/TableOfContents";
 import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import ToggleableCollectionFormGroup from "@/components/ToggleableCollectionFormGroup";
-import Creators from "@/components/Creators";
+import ToggleableCreatorsFormGroup from "@/components/ToggleableCreatorsFormGroup";
 import { cellFormats } from "@/resources.js";
 
 export default {
@@ -127,7 +124,7 @@ export default {
     ItemRelationshipVisualization,
     FormattedRefcode,
     ToggleableCollectionFormGroup,
-    Creators,
+    ToggleableCreatorsFormGroup,
   },
   props: {
     item_id: {

webapp/src/components/UserSelect.vue

@@ -2,7 +2,7 @@
   <vSelect
     ref="selectComponent"
     v-model="value"
-    :options="users"
+    :options="filteredUsers"
     multiple
     label="immutable_id"
     :filterable="false"
@@ -56,6 +56,10 @@ export default {
         this.$emit("update:modelValue", newValue);
       },
     },
+    filteredUsers() {
+      const selectedUserIds = this.modelValue.map((user) => user.immutable_id);
+      return this.users.filter((user) => !selectedUserIds.includes(user.immutable_id));
+    },
   },
   methods: {
     async debouncedAsyncSearch(query, loading) {

webapp/src/store/index.js

@@ -205,7 +205,11 @@ export default createStore({
       //requires the following fields in payload:
       // item_id, item_data
       Object.assign(state.all_item_data[payload.item_id], payload.item_data);
-      state.saved_status_items[payload.item_id] = false;
+      if (payload.item_data.creators && state.saved_status_items[payload.item_id] == true) {
+        state.saved_status_items[payload.item_id] = true;
+      } else {
+        state.saved_status_items[payload.item_id] = false;
+      }
     },
     updateCollectionData(state, payload) {
       //requires the following fields in payload: