Filter on Units

resources/js/Pages/IkeaRoot.vue

@@ -41,6 +41,8 @@ const countryHash = ref([]);
 const countryCurrency = ref({});
 const showItemFilter = ref(false);
 const showDescFilter = ref(false);
+const showUnitsFilter = ref(false);
+
 const rates = ref([]);
 const options_items = ref([]);
 const itemCode = ref(null);
@@ -100,6 +102,13 @@ const filterOptions = computed(() => {
       criteria: descCriteria.value,
     });
   }
+  if (unitsCriteria.value != 'All' && unitsCriteria.value != null) {
+    filterOptionsArray.push({
+      field: 'units',
+      comparison: '=',
+      criteria: unitsCriteria.value,
+    });
+  }
   return filterOptionsArray;
 });
 
@@ -131,8 +140,23 @@ let uniqDesc = computed(() => {
   return output;
 });
 
+let uniqUnits = computed(() => {
+  var output = ['All',];
+  var keys = [];
+  options_items.value.forEach((element) => {
+    var key = element.units;
+    if (keys.indexOf(key) === -1) {
+      keys.push(key);
+      output.push(element.units);
+    }
+  });
+  console.log('OUT3', output);
+  return output;
+});
+
 const productsCriteria = ref(uniqProducts.value[0]);
 const descCriteria = ref(uniqDesc.value[0]);
+const unitsCriteria = ref(uniqUnits.value[0]);
 
 const type = 'GeoChart';
 const form = useForm({
@@ -418,15 +442,24 @@ 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>
+            </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>
+            <template #header-units="header">
+              <div class="filter-column">
+                <img :src="filterimg" class="filter-icon" @click.stop="showUnitsFilter = !showUnitsFilter" />
+                {{ header.text }}
+                <div class="filter-menu filter-menu-units" v-if="showUnitsFilter">
+                  <multiselect v-model="unitsCriteria" :options="uniqUnits"></multiselect>
+                </div>
+              </div>
             </template>
           </EasyTable>
         </div>
@@ -472,11 +505,19 @@ const submit = () => {
   position: absolute;
   top: 40px;
   width: 328px;
- 
+
   background-color: #fff;
   border: 1px solid #e0e0e0;
 
 }
+
+.filter-menu-units {
+  padding: 5px 5px;
+  z-index: 1;
+  position: absolute;
+  top: 40px;
+  width: 128px;
+}
 </style>
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>