Merge pull request #7210 from lasniscinote/gl_SCI_10363

(fix) Item card - dropdown and checklist [SCI-10363]

app/assets/stylesheets/shared_styles/constants/fonts.scss

@@ -61,6 +61,8 @@ $sn-icon-check: "\e95f";
   background-size: contain;
   height: 1rem;
   width: 1rem;
+  min-height: 1rem;
+  min-width: 1rem;
 
   &.unchecked {
     background-image: asset-url("checkbox/default.svg");

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -504,7 +504,8 @@ export default {
         '.modal',
         '.dp__instance_calendar',
         '.label-printing-progress-modal',
-        '.atwho-view'
+        '.atwho-view',
+        '.sn-select-dropdown'
       ];
 
       const excludeSelectors = ['#myModuleRepositoryFullViewModal'];

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue

@@ -4,29 +4,25 @@
       {{ colName }}
     </div>
     <div v-if="canEdit">
-      <checklist-select
-        @change="changeSelected"
-        @update="update"
-        :initialSelectedValues="selectedValues"
-        :shouldUpdateWithoutValues="true"
-        :withButtons="true"
-        :withEditCursor="true"
-        ref="ChecklistSelector"
-        :options="checklistItems"
-        :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
-        className="h-[38px] !pl-3"
-        optionsClassName="max-h-[300px]"
-      ></checklist-select>
+      <select-dropdown
+        @change="handleChange"
+        :options="availableChecklistItems"
+        :value="selectedChecklistItemsIds"
+        :with-checkboxes="true"
+        :multiple="true"
+        :clearable="true"
+        :size="'sm'"
+        >
+      </select-dropdown>
     </div>
-    <div v-else-if="selectedChecklistItems?.length > 0"
+    <div v-else-if="computedArrOfItemObjects && computedArrOfItemObjects.length > 0"
          class="text-sn-dark-grey font-inter text-sm font-normal leading-5 w-[370px] overflow-x-auto flex flex-wrap gap-1">
-      <span v-for="(checklistItem, index) in selectedChecklistItems"
+      <span v-for="(checklistItem, index) in computedArrOfItemObjects"
             :key="index"
             :id="`checklist-item-${index}`"
             class="flex w-fit break-words">
         {{
-          index + 1 === selectedChecklistItems.length
+          index + 1 === computedArrOfItemObjects.length
             ? checklistItem?.label
             : `${checklistItem?.label} |`
         }}
@@ -40,15 +36,13 @@
 </template>
 
 <script>
-import ChecklistSelect from '../../shared/legacy/checklist_select.vue';
+import SelectDropdown from '../../shared/select_dropdown.vue';
 import repositoryValueMixin from './mixins/repository_value.js';
 
 export default {
   name: 'RepositoryChecklistValue',
   mixins: [repositoryValueMixin],
-  components: {
-    'checklist-select': ChecklistSelect
-  },
+  components: { 'select-dropdown': SelectDropdown },
   props: {
     data_type: String,
     colId: Number,
@@ -61,16 +55,26 @@ export default {
     return {
       id: null,
       isLoading: false,
-      checklistItems: [],
-      selectedChecklistItems: [],
-      selectedValues: []
+      availableChecklistItems: [],
+      selectedChecklistItemsIds: []
     };
   },
   mounted() {
     this.fetchChecklistItems();
-    if (this.colVal) {
-      this.selectedChecklistItems = Array.isArray(this.colVal) ? this.colVal : [this.colVal];
-      this.selectedValues = this.selectedChecklistItems.map((item) => item?.value);
+    if (this.colVal && Array.isArray(this.colVal)) {
+      this.selectedChecklistItemsIds = this.colVal.map((item) => String(item.value));
+    }
+  },
+  computed: {
+    computedArrOfItemObjects() {
+      const arrOfItemObjects = this.selectedChecklistItemsIds.map((id) => {
+        const matchingItem = this.availableChecklistItems.find((item) => item[0] === id);
+        return {
+          id: matchingItem ? matchingItem[0] : null,
+          label: matchingItem ? matchingItem[1] : null
+        };
+      });
+      return arrOfItemObjects;
     }
   },
   methods: {
@@ -79,20 +83,18 @@ export default {
 
       $.get(this.optionsPath, (data) => {
         if (Array.isArray(data)) {
-          this.checklistItems = data.map((option) => {
-            const { value, label } = option;
-            return { id: value, label };
-          });
+          this.availableChecklistItems = data.map((option) => [String(option.value), option.label]);
           return false;
         }
 
-        this.checklistItems = [];
+        this.availableChecklistItems = [];
       }).always(() => {
         this.isLoading = false;
       });
     },
-    changeSelected(selectedChecklistItems) {
-      this.selectedChecklistItems = selectedChecklistItems;
+    handleChange(selectedChecklistItemsIds) {
+      this.selectedChecklistItemsIds = selectedChecklistItemsIds;
+      this.update(selectedChecklistItemsIds);
     }
   }
 };

app/javascript/vue/repository_item_sidebar/repository_values/RepositoryListValue.vue

@@ -11,6 +11,8 @@
         :value="selected"
         :options="options"
         :searchable="true"
+        :clearable="true"
+        :size="'sm'"
         :placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :no-options-placeholder="i18n.t('repositories.item_card.dropdown_placeholder')"
         :data-e2e="'e2e-IF-repoItemSBcustomColumns-input' + colId"

app/javascript/vue/shared/select_dropdown.vue

@@ -253,7 +253,7 @@ export default {
     },
     query() {
       if (this.optionsUrl) this.fetchOptions();
-    },
+    }
   },
   methods: {
     renderLabel(option) {
@@ -299,7 +299,7 @@ export default {
         if (this.newValue.includes(value)) {
           this.newValue = this.newValue.filter((v) => v !== value);
         } else {
-          this.newValue.push(value);
+          this.newValue = [...this.newValue, value];
         }
       } else {
         this.newValue = value;