Filter on Units

deploy.yaml

@@ -13,6 +13,8 @@ hosts:
     remote_user: deployer
     branch: newlook
     deploy_path: '/var/www/html/ikea'
+    bin/php: /usr/bin/php81
+
 
 tasks:
   build:

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({
@@ -428,6 +452,15 @@ const submit = () => {
                 </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>
 
@@ -477,6 +510,14 @@ const submit = () => {
   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>