refactor component

src/components/components-install.js

@@ -3,6 +3,7 @@ import Base from './base.component.vue';
 import Form from './form/form.component.vue';
 import Control from './form/control.component.vue';
 import Spinner from './utils/spinner.component.vue';
+import ItemSelect from "./utils/item.select.component.vue";
 import Select from './form/select.component.vue';
 import Radio from './form/radio.component.vue';
 import Navigation from './navigation/navigation.component.vue';
@@ -15,8 +16,7 @@ import ExceptionModal from './modal/exception-modal.component.vue';
 import TablePaginator from './table/paginator.component.vue';
 import TableAction from "./table/table.action.component.vue";
 import TableFilter from "./table/table.filter.component.vue";
-import TableFilterItem from "./table/table.filter.item.component.vue";
-import TableFilterSelect from "./table/table.filter.select.component.vue";
+import TableFilterColumn from "./table/table.filter.column.component.vue";
 import TableFilterValue from "./table/table.filter.value.component.vue";
 import Dummy from './dummy.component.vue';
 import Modal from './modal/modal.component.vue';
@@ -27,6 +27,7 @@ const fohnComponents = [
   {name: 'flat-pickr', def:  flatPickr},
   {name: 'fohn-vue', def:  Base},
   {name: 'fohn-spinner', def:  Spinner},
+  {name: 'fohn-item-select', def:  ItemSelect},
   {name: 'fohn-form', def:  Form},
   {name: 'fohn-control', def:  Control},
   {name: 'fohn-select', def:  Select},
@@ -40,8 +41,7 @@ const fohnComponents = [
   {name: 'fohn-table-paginator', def:  TablePaginator},
   {name: 'fohn-table-action', def:  TableAction},
   {name: 'fohn-table-filter', def:  TableFilter},
-  {name: 'fohn-table-filter-item', def:  TableFilterItem},
-  {name: 'fohn-table-filter-select', def:  TableFilterSelect},
+  {name: 'fohn-table-filter-column', def:  TableFilterColumn},
   {name: 'fohn-table-filter-value', def:  TableFilterValue},
   {name: 'fohn-modal', def:  Modal},
   {name: 'fohn-ui-exception', def:  ExceptionModal},

src/components/table/table.filter.item.component.vue → src/components/table/table.filter.column.component.vue

@@ -1,8 +1,8 @@
 <script>
 
 /**
- * Hold the current filter item.
- * filterValue contains the id of the column, the operator and a value.
+ * Single column filtering management.
+ * User can select a column, an operator to act on the selected column and a value.
  *
  * Columns contains an array of column definition to be filtered.
  * - column definition is an object:
@@ -20,9 +20,10 @@
  *
  */
 import {computed, ref, toRefs} from "vue";
+import {useFindIndexDefault} from "../utils/composable/utils";
 
 export default {
-  name: 'fohn-table-filter-item',
+  name: 'fohn-table-filter-column',
   props: {
     columns : {
       type: Array,
@@ -32,27 +33,26 @@ export default {
       type: Array,
       default: () => [],
     },
-    filterValue: {
-      type: Object,
-      default: () => {}
+    filteredColumns: {
+      type: Array,
+      default: () => []
     },
   },
 
   setup(props, { attrs, slots, emit }) {
 
-    const {columns, operators, filterValue} = toRefs(props);
-    const currentColumnIdx = ref(0);
+    const {columns, operators, filteredColumns} = toRefs(props);
+    // const currentColumnIdx = ref(0);
     const currentOperatorIdx = ref(0);
-    const itemValue = ref(filterValue.value.value);
-
-    // Get initial column idx from filterValue if any.
-    const initalColunmIdx = columns.value.findIndex( (column) => column.id === filterValue.value.column);
-    currentColumnIdx.value = initalColunmIdx > 0 ? initalColunmIdx : 0;
+    const columnValue = ref();
 
+    // Get initial column idx from filteredColumn if any.
+    // eslint-disable-next-line max-len
+    const currentColumnIdx = ref(useFindIndexDefault(columns.value, (column) => column.id === filteredColumns.value.column));
 
+    // Get columnDef and id base on current idx value.
     const columnDef = computed (() => columns.value[currentColumnIdx.value]);
-    const itemLabel = computed (() => columnDef.value.label);
-
+    const columnId = computed (() => columnDef.value.id);
 
     /** Filter operators base on column data type */
     const typeOperators = computed( () => {
@@ -61,18 +61,18 @@ export default {
       })
     });
 
-    const initialOperatorIdx = typeOperators.value.findIndex( (operator) => operator.id === filterValue.value.operator);
-    currentOperatorIdx.value = initialOperatorIdx > 0 ? initialOperatorIdx : 0;
+    // eslint-disable-next-line max-len
+    currentOperatorIdx.value = useFindIndexDefault(typeOperators.value, (operator) => operator.id === filteredColumns.value.operator);
 
-    const itemOperator = computed (() => typeOperators.value[currentOperatorIdx.value].label);
+    const columnOperator = computed (() => typeOperators.value[currentOperatorIdx.value].id);
 
     /** Get what type of component is required for setting filter value. */
-    const itemComponent = computed ( () => {
+    const columnComponent = computed ( () => {
       const component = {
         id: columnDef.value.componentName,
         props : columnDef.value.props,
       }
-      component.props.value = itemValue.value;
+      component.props.value = columnValue.value;
 
       return component;
     });
@@ -84,21 +84,20 @@ export default {
     const setColumn = (idx, column) => {
       currentColumnIdx.value = idx;
       currentOperatorIdx.value = 0;
-      itemValue.value = '';
+      columnValue.value = '';
     }
 
-    const setOperator = (idx, operator) => {
+    const setOperator = (idx) => {
       currentOperatorIdx.value = idx;
     }
 
     const setValue = (value) => {
-      itemValue.value = value;
+      columnValue.value = value;
     }
 
-    return {itemLabel,
-      itemOperator,
-      itemValue,
-      itemComponent,
+    return {columnId,
+      columnOperator,
+      columnComponent,
       columns,
       typeOperators,
       setColumn,
@@ -111,10 +110,9 @@ export default {
 
 <template>
   <slot
-      :itemLabel="itemLabel"
-      :itemOperator="itemOperator"
-      :itemValue="itemValue"
-      :itemComponent="itemComponent"
+      :columnId="columnId"
+      :columnOperator="columnOperator"
+      :columnComponent="columnComponent"
       :columns="columns"
       :typeOperators="typeOperators"
       :setColumn="setColumn"

src/components/table/table.filter.select.component.vue → src/components/utils/item.select.component.vue

@@ -1,14 +1,15 @@
 <script>
 /**
- * Select input.
- * Use for selecting filter column or filter column operator.
+ * Allow selecting an item from an array of object: [{id: 'id', label: 'label'}...].
+ * The internal value is the id of the selected item but display is the label.
  */
 
-import {onMounted, ref, toRefs, watch} from "vue";
+import {computed, onMounted, ref, toRefs, watch} from "vue";
 import {useDebounceFn} from "@vueuse/core";
+import {useFindIndexDefault} from "./composable/utils";
 
 export default {
-  name: 'fohn-table-filter-select',
+  name: 'fohn-item-select',
   emits: ['onItemSelect'],
   props: {
     initValue: String,
@@ -23,10 +24,10 @@ export default {
     const isActive = ref(false);
     const inputContainer = ref();
     const inputEl = ref();
-    const value = ref(initValue.value);
+    const currentIdx = ref(useFindIndexDefault(items.value, (i) => i.id === initValue.value));
 
     watch(initValue, (newVal) => {
-      value.value = newVal;
+      currentIdx.value = useFindIndexDefault(items.value, (i) => i.id === newVal);
     })
 
     const toggleSelect = () => {
@@ -37,9 +38,13 @@ export default {
       isActive.value = false;
     }, 200);
 
+    const value = computed( () => {
+      return items.value[currentIdx.value].label;
+    });
+
     const selectItem = (idx) => {
       inputEl.value.focus();
-      value.value = items.value[idx].label;
+      currentIdx.value = idx;
       emit('onItemSelect', idx, items.value[idx].id);
       closeSelect();
     }