Add Desc Filter

resources/js/Pages/IkeaRoot.vue

@@ -40,6 +40,7 @@ const products = ref([]);
 const countryHash = ref([]);
 const countryCurrency = ref({});
 const showItemFilter = ref(false);
+const showDescFilter = ref(false);
 const rates = ref([]);
 const options_items = ref([]);
 const itemCode = ref(null);
@@ -92,6 +93,13 @@ const filterOptions = computed(() => {
       criteria: productsCriteria.value,
     });
   }
+  if (descCriteria.value != 'All' && descCriteria.value != null) {
+    filterOptionsArray.push({
+      field: 'desc',
+      comparison: '=',
+      criteria: descCriteria.value,
+    });
+  }
   return filterOptionsArray;
 });
 
@@ -109,7 +117,23 @@ let uniqProducts = computed(() => {
   return output;
 });
 
+let uniqDesc = computed(() => {
+  var output = ['All',];
+  var keys = [];
+  options_items.value.forEach((element) => {
+    var key = element.desc;
+    if (keys.indexOf(key) === -1) {
+      keys.push(key);
+      output.push(element.desc);
+    }
+  });
+  console.log('OUT2', output);
+  return output;
+});
+
 const productsCriteria = ref(uniqProducts.value[0]);
+const descCriteria = ref(uniqDesc.value[0]);
+
 const type = 'GeoChart';
 const form = useForm({
   countries: '',
@@ -394,6 +418,15 @@ const submit = () => {
                   <multiselect v-model="productsCriteria" :options="uniqProducts"></multiselect>
                 </div>
               </div>
+              </template>
+              <template #header-desc="header">
+                <div class="filter-column">
+                  <img :src="filterimg" class="filter-icon" @click.stop="showDescFilter = !showDescFilter" />
+                  {{ header.text }}
+                  <div class="filter-menu filter-sport-menu" v-if="showDescFilter">
+                    <multiselect v-model="descCriteria" :options="uniqDesc"></multiselect>
+                  </div>
+                </div>
             </template>
           </EasyTable>
         </div>