Add filters

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
 
   rules: {
     'vue/multi-word-component-names': 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
   },
 
   overrides: [

components/src/widgets/complexTable/widget.spec.js

@@ -87,6 +87,50 @@ describe('ComplexTable widget', () => {
         expect(result).toEqual(false);
       });
     });
+
+    describe('#filterableHeaders', () => {
+      it('returns the subarray of filterable headers', () => {
+        const wrapper = mount(ComplexTable, {
+          propsData: {
+            totalItems: 35,
+            items: ['hh'],
+            headers: [
+              {value: 'name', text: 'Name', filterable: true},
+              {value: 'lastName', text: 'Lastname', filterable: true},
+              {value: 'age', text: 'Age'},
+            ],
+          },
+        })
+
+        result = wrapper.vm.filterableHeaders;
+
+        expect(result).toEqual([{"filterable": true, "text": "Name", "value": "name"}, {"filterable": true, "text": "Lastname", "value": "lastName"}]);
+      });
+    });
+
+    describe('#cleanFiltersApplied', () => {
+      it('returns a list of filters applied with value', () => {
+        const wrapper = mount(ComplexTable, {
+          propsData: {
+            totalItems: 35,
+            items: ['hh'],
+            headers: [
+              {value: 'name', text: 'Name', filterable: true},
+              {value: 'lastName', text: 'Lastname', filterable: true},
+              {value: 'age', text: 'Age'},
+            ],
+          },
+        })
+
+        wrapper.get('ui-button').trigger('click')
+        const filterableItems = wrapper.findAll('.filter-item ui-textfield')
+        filterableItems[0].trigger('input', { detail: ['my name'] })
+
+        result = wrapper.vm.cleanFiltersApplied;
+
+        expect(result).toEqual({ name: 'my name' });
+      });
+    });
   });
 
   describe('methods', () => {
@@ -124,6 +168,34 @@ describe('ComplexTable widget', () => {
       });
     });
 
+    describe('#applyFilters', () => {
+      it('emits filtersApplied event', () => {
+        const wrapper = mount(ComplexTable, {
+          propsData: {
+            totalItems: 35,
+            items: ['hh'],
+            headers: [
+              {value: 'name', text: 'Name', filterable: true},
+              {value: 'lastName', text: 'Lastname', filterable: true},
+              {value: 'age', text: 'Age'},
+            ],
+          },
+        })
+
+        wrapper.get('ui-button').trigger('click')
+        const filterableItems = wrapper.findAll('.filter-item ui-textfield')
+        filterableItems[0].trigger('input', { detail: ['my name'] })
+
+        result = wrapper.vm.applyFilters();
+
+        expect(wrapper.emitted('filtersApplied')).toEqual([[
+          {
+            name: 'my name',
+          }
+        ]])
+      });
+    });
+
     describe('#prepareItems', () => {
       it('returns the first 10 items', () => {
         const itemsList = ['1','2','3','4','5','6','7','8','9','10','11','12'];

components/src/widgets/complexTable/widget.vue

@@ -1,4 +1,46 @@
 <template>
+  <ui-menu>
+    <ui-button
+      slot="trigger"
+      :disabled="filterableHeaders.length === 0"
+      background-color="#fff"
+      color="#161616"
+      height="26px"
+      width="80px"
+      class="filter-trigger"
+    >
+      <ui-icon
+        icon-name="googleFilterListBaseline"
+        size="14"
+        color="#757575"
+      />
+      <span>Filter</span>
+    </ui-button>
+
+    <div
+      slot="content"
+      class="items-list"
+    >
+      <div
+        v-for="header in filterableHeaders"
+        :key="header.name"
+        class="filter-item"
+      >
+        <span class="text">{{ header.text }}</span>
+        <ui-textfield @input="val => filterInput(header.value, val)" />
+      </div>
+      <ui-button
+        height="26px"
+        width="80px"
+        class="filter-btn"
+        @clicked="applyFilters"
+      >
+        <div class="btn-text">
+          Filter
+        </div>
+      </ui-button>
+    </div>
+  </ui-menu>
   <ui-table
     :headers="props.headers"
     :fixed="fixed"
@@ -37,15 +79,21 @@
 </template>
 
 <script setup>
-import { computed, watch } from 'vue';
+import { computed, watch, reactive } from 'vue';
 import table from '~widgets/table/widget.vue';
 import button from '~widgets/button/widget.vue';
+import menu from '~widgets/menu/widget.vue';
+import textfield from '~widgets/textfield/widget.vue';
+import icon from '~widgets/icon/widget.vue';
 import registerWidget from '~core/registerWidget';
 
 registerWidget('ui-table', table);
 registerWidget('ui-button', button);
+registerWidget('ui-menu', menu);
+registerWidget('ui-textfield', textfield);
+registerWidget('ui-icon', icon);
 
-const emit = defineEmits(['previousClicked', 'nextClicked', 'itemsLoaded']);
+const emit = defineEmits(['previousClicked', 'nextClicked', 'itemsLoaded', 'filtersApplied']);
 const ITEMS_PER_PAGE = 10;
 const props = defineProps({
   headers: {
@@ -72,13 +120,25 @@ const props = defineProps({
   },
 });
 
+const filtersApplied = reactive({})
+
 const totalPages = computed(() => Math.ceil(props.totalItems / ITEMS_PER_PAGE))
 const previousButtonDisabled = computed(() => props.currentPage === 1)
 const nextButtonDisabled = computed(() => props.currentPage === totalPages.value)
+const filterableHeaders = computed(() => props.headers.filter(header => header.filterable))
 
-const previousClicked = () => emit('previousClicked');
+const cleanFiltersApplied = computed(() => Object.keys(filtersApplied).reduce((obj, k) => {
+  if (filtersApplied[k] !== '') obj[k] = filtersApplied[k];
+  return obj;
+}, {}))
 
+const previousClicked = () => emit('previousClicked');
 const nextClicked = () => emit('nextClicked');
+const applyFilters = () => emit('filtersApplied', cleanFiltersApplied.value);
+
+const filterInput = (field, e) => {
+  filtersApplied[field] = e.detail[0]
+}
 
 const prepareItems = (items) => {
   return items.slice(0, ITEMS_PER_PAGE)
@@ -90,6 +150,41 @@ watch(() => props.items, function(newItems) {
 </script>
 
 <style lang="stylus" scoped>
+.filter-trigger {
+  span {
+    text-transform: uppercase;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    font-size: 12px;
+    margin-left: 4px;
+  }
+}
+
+.items-list {
+  position: relative;
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-radius: 2px;
+  padding: 8px;
+  box-shadow: 0 4px 20px 0 #00000040;
+  z-index: 1;
+
+  .filter-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+
+    .text {
+      width: 50%
+    }
+  }
+
+  .filter-btn {
+    margin-left: auto;
+  }
+}
 .buttons-container {
   display: flex;
   align-items: center;