From 1dfb22d25d30a54d1b95d8fcab584477c110eb25 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Thu, 19 Sep 2024 16:49:02 -0400
Subject: [PATCH 1/4] FOUR-19003: Create a NEW VIEW for cases Part Filters

---
 .../base/buttons/OutlineButton.vue            |   2 +-
 .../jscomposition/base/form/Dropdown.vue      | 128 +++++++++++-------
 .../jscomposition/base/table/BaseTable.vue    |   5 +-
 .../jscomposition/base/table/THeader.vue      |  14 +-
 .../jscomposition/base/ui/AppPopover.vue      |  22 ++-
 .../cases/casesDetail/config/columns.js       |  12 +-
 .../cases/casesMain/CasesDataSection.vue      |  22 ++-
 .../cases/casesMain/config/columns.js         |  52 +++++--
 .../system/table/FilterableTable.vue          |  39 ++++++
 .../system/table/cell/ParticipantsCell.vue    |   6 +-
 .../system/table/filter/FilterColumn.vue      |  89 ++++++++++++
 .../system/table/filter/FooterButtons.vue     |  27 ++++
 .../system/table/filter/SortingButtons.vue    |  28 ++++
 .../system/table/filter/index.js              |  11 ++
 .../table/filter/operator/BetweenOperator.vue |  47 +++++++
 .../table/filter/operator/FilterOperator.vue  | 125 +++++++++++++++++
 .../table/filter/operator/InOperator.vue      |  63 +++++++++
 .../table/filter/operator/InputOperator.vue   |  16 +++
 .../system/table/filter/operator/index.js     |  11 ++
 .../table/filter/operator/operatorConfig.js   |  37 +++++
 resources/jscomposition/system/table/index.js |   9 +-
 21 files changed, 687 insertions(+), 78 deletions(-)
 create mode 100644 resources/jscomposition/system/table/FilterableTable.vue
 create mode 100644 resources/jscomposition/system/table/filter/FilterColumn.vue
 create mode 100644 resources/jscomposition/system/table/filter/FooterButtons.vue
 create mode 100644 resources/jscomposition/system/table/filter/SortingButtons.vue
 create mode 100644 resources/jscomposition/system/table/filter/index.js
 create mode 100644 resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
 create mode 100644 resources/jscomposition/system/table/filter/operator/FilterOperator.vue
 create mode 100644 resources/jscomposition/system/table/filter/operator/InOperator.vue
 create mode 100644 resources/jscomposition/system/table/filter/operator/InputOperator.vue
 create mode 100644 resources/jscomposition/system/table/filter/operator/index.js
 create mode 100644 resources/jscomposition/system/table/filter/operator/operatorConfig.js

diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
index 3b492172de..2787b4c871 100644
--- a/resources/jscomposition/base/buttons/OutlineButton.vue
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -3,7 +3,7 @@
     type="button"
     :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
         tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
-    @click="onClick"
+    @click.prevent.stop="onClick"
   >
     <slot />
   </button>
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 1e28d9eff9..2a7407bcb8 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,18 +1,16 @@
 <template>
-  <div class="tw-relative">
+  <div
+    class="tw-relative"
+    ref="inputRef">
     <slot
       v-bind="{
         toogleShow,
-        data
+        data,
       }"
-      name="input"
-    >
+      name="input">
       <button
-        class="tw-flex tw-w-full tw-justify-between tw-items-center
-          tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg
-          focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
-        @click.prevent.stop="toogleShow"
-      >
+        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        @click.prevent.stop="toogleShow">
         <span>{{ data?.label || data?.value }} </span>
 
         <i class="fas fa-chevron-down" />
@@ -22,36 +20,34 @@
     <transition :name="animation">
       <div
         v-if="show"
-        class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
-      >
+        class="tw-fixed tw-mt-1 tw-rounded-lg tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300"
+        :style="{ width: `${widthContainer}px`, top: `${top}px` }">
         <ul class="tw-list-none tw-overflow-hidden tw-rounded">
           <slot
             name="options"
             v-bind="{
               options: optionsModel,
               data,
-              onClick
-            }"
-          >
+              onClick,
+            }">
             <li
-              v-for="(option, index ) in optionsModel"
+              v-for="(option, index) in optionsModel"
               :key="index"
               class="hover:tw-bg-gray-200"
-              @click.prevent.stop="onClick(option, index)"
-            >
+              @click.prevent.stop="onClick(option, index)">
               <slot
                 name="option"
                 v-bind="{
                   option,
-                  data
-                }"
-              >
+                  data,
+                }">
                 <span
                   :class="{
-                    'tw-bg-gray-300': option?.value === data?.value
+                    'tw-bg-gray-300': option?.value === data?.value,
                   }"
                   class="tw-flex tw-py-2 tw-px-4 transition duration-300"
-                >{{ option.label || option.value }}</span>
+                  >{{ option.label || option.value }}</span
+                >
               </slot>
             </li>
           </slot>
@@ -62,10 +58,7 @@
 </template>
 
 <script>
-import {
-  defineComponent, ref, computed, onMounted, onUnmounted,
-} from "vue";
-
+import { defineComponent, ref, computed, onMounted, onUnmounted, nextTick } from "vue";
 /**
  * <Dropdown
  *  animation="fade"
@@ -95,7 +88,10 @@ export default defineComponent({
   },
   emits: ["input", "change"],
   setup(props, { emit }) {
+    const inputRef = ref();
     const show = ref(false);
+    const widthContainer = ref(100);
+    const top = ref(0);
 
     const data = computed({
       get() {
@@ -122,12 +118,37 @@ export default defineComponent({
       emit("change", option);
     };
 
+    const calculatePosition = () => {
+      const rect = inputRef.value?.getBoundingClientRect();
+
+      widthContainer.value = rect.width || 100;
+
+      let container = inputRef.value.parentElement;
+      let topPosition = 0;
+
+      while (container && container !== document.body) {
+        // Si el container tiene scroll, sumamos sus desplazamientos
+        if (container.scrollTop || container.scrollLeft) {
+          topPosition = topPosition + container.scrollTop;
+          // left += container.scrollLeft;
+        }
+        // Continuamos subiendo en la jerarquía de containeres
+        container = container.parentElement;
+      }
+
+      top.value = inputRef.value.offsetTop - topPosition;
+    };
+
     const addBodyListener = () => {
       show.value = false;
     };
 
-    const toogleShow = () => {
-      show.value = !show.value;
+    const toogleShow = ($event) => {
+      calculatePosition($event);
+
+      nextTick(() => {
+        show.value = !show.value;
+      });
     };
 
     onMounted(() => {
@@ -141,7 +162,10 @@ export default defineComponent({
     return {
       show,
       data,
+      inputRef,
       optionsModel,
+      top,
+      widthContainer,
       onClick,
       toogleShow,
     };
@@ -151,59 +175,71 @@ export default defineComponent({
 
 <style scoped>
 /* Animations */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .1s;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.1s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
 /* Slide-in-up animation*/
-.slide-in-up-enter-active, .slide-in-up-leave-active {
-  transition: all .5s;
+.slide-in-up-enter-active,
+.slide-in-up-leave-active {
+  transition: all 0.5s;
   transform: translateY(0);
 }
-.slide-in-up-enter, .slide-in-up-leave-to {
+.slide-in-up-enter,
+.slide-in-up-leave-to {
   opacity: 0;
   transform: translateY(20px);
 }
 
 /* Slide-in-right animation*/
-.slide-in-right-enter-active, .slide-in-right-leave-active {
-  transition: all .5s;
+.slide-in-right-enter-active,
+.slide-in-right-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-right-enter, .slide-in-right-leave-to {
+.slide-in-right-enter,
+.slide-in-right-leave-to {
   opacity: 0;
   transform: translateX(20px);
 }
 
 /* Slide-in-left animation*/
-.slide-in-left-enter-active, .slide-in-left-leave-active {
-  transition: all .5s;
+.slide-in-left-enter-active,
+.slide-in-left-leave-active {
+  transition: all 0.5s;
   transform: translateX(0);
 }
-.slide-in-left-enter, .slide-in-left-leave-to {
+.slide-in-left-enter,
+.slide-in-left-leave-to {
   opacity: 0;
   transform: translateX(-20px);
 }
 
 /* Scale animation*/
-.scale-enter-active, .scale-leave-active {
-  transition: all .5s;
+.scale-enter-active,
+.scale-leave-active {
+  transition: all 0.5s;
   transform: scale(1);
 }
-.scale-enter, .scale-leave-to {
+.scale-enter,
+.scale-leave-to {
   opacity: 0;
   transform: scale(0);
 }
 
 /* Rotate animation*/
-.rotate-enter-active, .rotate-leave-active {
-  transition: all .5s;
+.rotate-enter-active,
+.rotate-leave-active {
+  transition: all 0.5s;
   transform: scale(1) rotate(-360deg);
 }
-.rotate-enter, .rotate-leave-to {
+.rotate-enter,
+.rotate-leave-to {
   opacity: 0;
   transform: scale(0) rotate(360deg);
 }
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index bb53201379..c74be48117 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -9,7 +9,10 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.header}`"> </slot>
+            <slot :name="`theader-${column.field}`"> </slot>
+            <template #filter>
+              <slot :name="`theader-filter-${column.field}`"></slot>
+            </template>
           </THeader>
         </tr>
       </thead>
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index cd10c14b54..a3b9938105 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -1,17 +1,21 @@
 <template>
   <th>
-    <div class="tw-flex tw-justify-between">
+    <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap tw-justify-between">
       <div
-        class="tw-w-full tw-relative tw-py-4 tw-px-3 tw-text-left
-         tw-overflow-hidden tw-whitespace-nowrap tw-text-ellipsis"
+        class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
         :style="{ width: width + 'px' }">
         <slot>
-          {{ getValue() }}
+            {{ getValue() }}
         </slot>
       </div>
+
+      <div class="tw-h-auto tw-flex tw-items-center">
+        <slot name="filter"></slot>
+      </div>
+
       <div
         :class="{ '!tw-cursor-col-resize': column.resizable }"
-        class="tw-w-[10px] tw-cursor-default tw-border-r tw-border-gray-400"
+        class="tw-w-[5px] tw-cursor-default tw-border-r tw-border-gray-400"
         @mousedown="column.resizable ? columnResize.startResize($event) : null">
         &nbsp;
       </div>
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
index 306646a0b6..5be63b8495 100644
--- a/resources/jscomposition/base/ui/AppPopover.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -87,6 +87,13 @@ export default {
             calculatedPosition.value = "top";
             top = wrapperRect.top - tooltipRect.height - 10;
           }
+
+          const leftaux = wrapperRect.left - tooltipRect.width - 10;
+          // Verify space left
+          if (leftaux < 0) {
+            calculatedPosition.value = "right-bottom";
+            left = wrapperRect.right + 100;
+          }
           break;
         case "left":
           top = wrapperRect.top + wrapperRect.height / 2 - tooltipRect.height / 2;
@@ -126,6 +133,12 @@ export default {
       visible.value = false;
     };
 
+    const clickIntoPopover = (event) => {
+      if (!tooltipWrapper.value.contains(event.target)) {
+        hideTooltip();
+      }
+    };
+
     // Recalculated position when property visible changes
     const unwatch = watch(
       () => props.value,
@@ -143,11 +156,11 @@ export default {
         showTooltip();
       }
 
-      !props.hover && document.body.addEventListener("click", hideTooltip);
+      !props.hover && document.body.addEventListener("click", clickIntoPopover);
     });
 
     onUnmounted(() => {
-      !props.hover && document.body.removeEventListener("click", hideTooltip);
+      document.body.removeEventListener("click", clickIntoPopover);
       unwatch();
     });
 
@@ -190,4 +203,9 @@ export default {
 .tooltip-content.right {
   transform: translateY(-50%);
 }
+
+.tooltip-content.right-bottom {
+  transform: translateY(-50%);
+  transform: translateX(-50%);
+}
 </style>
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index 21f34b20e1..bb70601a8b 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,5 +1,8 @@
-import BadgeContainer from "../../casesMain/components/BadgeContainer.vue";
-import AvatarContainer from "../../casesMain/components/AvatarContainer.vue";
+import {
+  ParticipantsCell,
+  StatusCell,
+} from "../../../system/index";
+
 
 export default {};
 
@@ -29,8 +32,7 @@ const assignedColumn = () => ({
   field: "assigned",
   header: "Assigned",
   resizable: true,
-  width: 200,
-  cellRenderer: () => AvatarContainer,
+  width: 200
 });
 
 const dueDateColumn = () => ({
@@ -67,7 +69,7 @@ const statusColumn = () => ({
   header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => BadgeContainer,
+  cellRenderer: () => StatusCell,
 });
 
 const startedColumn = () => ({
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 382e9ea959..9da5779142 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -1,10 +1,21 @@
 <template>
-  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+  <div
+    class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
     <CaseFilter />
 
     <BadgesSection v-model="badgesData" />
 
-    <BaseTable :columns="columnsConfig" :data="data" class="tw-grow tw-overflow-y-scroll" />
+    <FilterableTable
+      :columns="columnsConfig"
+      :data="data"
+      class="tw-grow tw-overflow-y-scroll">
+    </FilterableTable>
+
+    <!-- <BaseTable :columns="columnsConfig" :data="data" class="tw-grow tw-overflow-y-scroll">
+      <template v-for="(column, index) in columnsConfig" v-slot:[`theader-filter-${column.field}`]>
+        <FilterColumn></FilterColumn>
+      </template>
+    </BaseTable>   -->
 
     <Pagination />
   </div>
@@ -13,11 +24,12 @@
 import { defineComponent, ref, onMounted } from "vue";
 import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
-import { BaseTable, Pagination } from "../../base";
+import { Pagination } from "../../base";
 import { getColumns } from "./config/columns";
 import { Breadcrums } from "../../system";
 import { badges } from "./config/badges";
 import { getData, getAllData } from "./api";
+import { FilterableTable } from "../../system";
 
 export default defineComponent({
   props: {
@@ -29,9 +41,9 @@ export default defineComponent({
   components: {
     CaseFilter,
     BadgesSection,
-    BaseTable,
     Pagination,
     Breadcrums,
+    FilterableTable,
   },
   setup(props, { emit }) {
     const badgesData = ref(badges);
@@ -39,7 +51,7 @@ export default defineComponent({
     const data = ref();
 
     onMounted(async () => {
-      data.value = await getAllData({type: props.listId, page:15});
+      data.value = await getAllData({ type: props.listId, page: 15 });
 
       columnsConfig.value = getColumns(props.listId);
     });
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 69110dd672..1fca4a6b08 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,4 +1,3 @@
-import AvatarContainer from "../components/AvatarContainer.vue";
 import {
   CaseTitleCell,
   TruncatedOptionsCell,
@@ -34,13 +33,14 @@ export default {};
 /**
  * Example Column
  * field: String
- * headerName: String
+ * header: String
  * headerFormatter: callback
  * resizable: Boolean
  * visible: Callback
  * formatter: Callback - Build the value in the cell
  * width: Number
  * cellRenderer: Object Vue to custom the cell
+ * filter: This attribute is optional
  */
 
 // My cases: [Case#, Case Title, Process, Task, Participants, Status, Started, Completed]
@@ -51,79 +51,111 @@ export default {};
 
 export const caseNumberColumn = () => ({
   field: "case_number",
-  headerName: "Case #",
+  header: "Case #",
   resizable: true,
   width: 100,
+  filter:{
+    type:'string',
+    operators:['=','>','>=','in','between']
+  }
 });
 
 export const caseTitleColumn = () => ({
   field: "case_title",
-  headerName: "Case Title",
+  header: "Case Title",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return CaseTitleCell;
   },
+  filter:{
+    type:'string',
+    operators:['=','>','>=','in','between']
+  }
 });
 
 export const processColumn = () => ({
   field: "processes",
-  headerName: "Process",
+  header: "Process",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return TruncatedOptionsCell;
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const taskColumn = () => ({
   field: "tasks",
-  headerName: "Task",
+  header: "Task",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return TruncatedOptionsCell;
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const participantsColumn = () => ({
   field: "participants",
-  headerName: "Participants",
+  header: "Participants",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return ParticipantsCell;
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const statusColumn = () => ({
   field: "case_status",
-  headerName: "Status",
+  header: "Status",
   resizable: true,
   width: 200,
   cellRenderer: () => {
     return StatusCell;
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const startedColumn = () => ({
   field: "initiated_at",
-  headerName: "Started",
+  header: "Started",
   resizable: true,
   width: 200,
   formatter: (row, column, columns) => {
     return formatDate(row.initiated_at, "datetime");
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const completedColumn = () => ({
   field: "completed_at",
-  headerName: "Completed",
+  header: "Completed",
   resizable: true,
   width: 200,
   formatter: (row, column, columns) => {
     return formatDate(row.completed_at, "datetime");
   },
+  filter:{
+    type:'string',
+    operators:['=']
+  }
 });
 
 export const getColumns = (type) => {
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
new file mode 100644
index 0000000000..538377f6a9
--- /dev/null
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -0,0 +1,39 @@
+<template>
+  <BaseTable
+    :columns="columns"
+    :data="data"
+    class="tw-grow tw-overflow-y-scroll">
+    <template
+      v-for="(column, index) in columns"
+      v-slot:[`theader-filter-${column.field}`]>
+      <FilterColumn
+        v-if="column.filter"
+        :filter="column.filter"></FilterColumn>
+    </template>
+  </BaseTable>
+</template>
+<script>
+import { defineComponent } from "vue";
+import { BaseTable } from "../../base";
+import FilterColumn from "./filter/FilterColumn.vue";
+
+export default defineComponent({
+  components: {
+    BaseTable,
+    FilterColumn,
+  },
+  props: {
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index ae7ba0a69e..56e2655cf2 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+  <div
+    class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
     <div
       v-for="(participant, index) in participants"
       class="tw-group">
@@ -14,7 +15,8 @@
         </AppAvatar>
 
         <template #content>
-          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+          <div
+            class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
             {{ participant.name }}
           </div>
         </template>
diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/FilterColumn.vue
new file mode 100644
index 0000000000..23752e268e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/FilterColumn.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <AppPopover
+      v-model="show"
+      :hover="false"
+      position="bottom">
+      <i
+        class="hover:tw-cursor-pointer tw-px-1 fas fa-ellipsis-v"
+        @click.prevent.stop="onClick"></i>
+
+      <template #content>
+        <div
+          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+          <SortingButtons
+            @asc="onAsc"
+            @desc="onDesc" />
+
+          <div class="tw-grow tw-overflow-auto tw-space-y-4">
+            <FilterOperator
+              ref="filterOperatorsRef"
+              v-model="filterOperator"
+              :operators="filter.operators"
+              @change="(e) => onChangeFilterOperator(e)">
+            </FilterOperator>
+          </div>
+
+          <FooterButtons />
+        </div>
+      </template>
+    </AppPopover>
+  </div>
+</template>
+<script>
+import { defineComponent, computed, ref, onMounted } from "vue";
+import { AppPopover, OutlineButton } from "../../../base/index";
+import SortingButtons from "./SortingButtons.vue";
+import FilterOperator from "./operator/FilterOperator.vue";
+import FooterButtons from "./FooterButtons.vue";
+
+// interface FilterInterface {
+//   operators = []; // Array
+//   type = null; // String
+// }
+
+export default defineComponent({
+  components: {
+    AppPopover,
+    SortingButtons,
+    FilterOperator,
+    OutlineButton,
+    FooterButtons,
+  },
+  props: {
+    filter: Object // FilterInterface,
+  },
+  setup(props, { emit }) {
+    const show = ref(false);
+    const filterOperator = ref({
+      operator: "=",
+      id: new Date().getTime(),
+      value: null,
+      type: "string",
+    });
+
+    const onClick = () => {
+      show.value = !show.value;
+    };
+
+    const onAsc = () => {};
+
+    const onDesc = () => {};
+
+    const onChangeFilterOperator = (element) => {
+      filterOperator.value.value = element;
+    };
+
+    onMounted(() => {});
+
+    return {
+      show,
+      filterOperator,
+      onClick,
+      onAsc,
+      onDesc,
+      onChangeFilterOperator,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/FooterButtons.vue b/resources/jscomposition/system/table/filter/FooterButtons.vue
new file mode 100644
index 0000000000..7c21d26f89
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/FooterButtons.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="tw-flex tw-space-x-2 tw-justify-end tw-font-semibold">
+    <OutlineButton class="!tw-py-2">
+      <span>Cancel</span>
+    </OutlineButton>
+
+    <OutlineButton class="!tw-py-2">
+      <span>Clear</span>
+    </OutlineButton>
+
+    <OutlineButton class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700">
+      <span>Apply</span>
+    </OutlineButton>
+  </div>
+</template>
+<script>
+import { OutlineButton } from "../../../base/index";
+import { defineComponent } from "vue";
+export default defineComponent({
+  components: {
+    OutlineButton,
+  },
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/SortingButtons.vue b/resources/jscomposition/system/table/filter/SortingButtons.vue
new file mode 100644
index 0000000000..8fb8f65b34
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/SortingButtons.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
+    <div
+      class="tw-space-x-2 tw-inline-flex tw-items-center tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('asc')">
+      <i class="fas fa-sort-amount-up-alt"></i>
+
+      <span>{{ "Sort Ascending" }}</span>
+    </div>
+
+    <div
+      class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      @click="$emit('desc')">
+      <i class="fas fa-sort-amount-down"></i>
+
+      <span>{{ "Sort Descending" }}</span>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent} from "vue";
+
+export default defineComponent({
+  setup(props, { emit }) {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/index.js b/resources/jscomposition/system/table/filter/index.js
new file mode 100644
index 0000000000..1ff2b3e291
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/index.js
@@ -0,0 +1,11 @@
+import FilterColumn from "./FilterColumn.vue";
+import FooterButtons from "./FooterButtons.vue";
+import SortingButtons from "./SortingButtons.vue";
+
+export * from "./operator";
+
+export {
+  FilterColumn,
+  FooterButtons,
+  SortingButtons
+};
\ No newline at end of file
diff --git a/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
new file mode 100644
index 0000000000..ee6e5646df
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="tw-flex tw-space-x-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      :placeholder="placeholder"
+      v-model="inputs[index].value"
+      @change="onChange()"
+      type="text"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"  />
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  emits: ["change"],
+  props:{
+    placeholder: {
+      type: String,
+      default: ()=> ('value')
+    }
+  },
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
new file mode 100644
index 0000000000..fbd89c5b7c
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="tw-space-y-2 tw-text-xs">
+    <slot name="header"></slot>
+
+    <Dropdown
+      v-model="operator"
+      @change="onChangeOperator"
+      :options="operatorsModel">
+    </Dropdown>
+
+    <component
+      placeholder="Type value"
+      class="tw-flex-1"
+      :is="operatorType?.component()"
+      @change="(e) => $emit('change', e)" />
+  </div>
+</template>
+<script>
+import { Dropdown } from "../../../../base";
+import { defineComponent, computed, ref, onMounted } from "vue";
+import { getOperatorType } from "./operatorConfig";
+
+const defaultOperators = [
+  {
+    value: "=",
+    label: "=",
+  },
+  {
+    value: ">",
+    label: ">",
+  },
+  {
+    value: ">=",
+    label: ">=",
+  },
+  {
+    value: "<",
+    label: ">",
+  },
+  {
+    value: "<=",
+    label: "<=",
+  },
+  {
+    value: "between",
+    label: "between",
+  },
+  {
+    value: "in",
+    label: "in",
+  },
+  {
+    value: "contains",
+    label: "contains",
+  },
+  {
+    value: "regex",
+    label: "regex",
+  },
+];
+
+export default defineComponent({
+  components: {
+    Dropdown,
+  },
+  props: {
+    /**
+     * operator: "="
+     * value: null
+     * type: 'string' || 'number'
+     * 
+     * {
+        operator: String,
+        value: Object,
+        type: String,
+      }
+     */
+    value: {
+      type: [Array, Object],
+    },
+    operators: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const operatorsModel = ref(defaultOperators);
+
+    const model = computed(() => {
+      return props.value;
+    });
+
+    const operator = ref({
+      value: "=",
+      label: "=",
+    });
+
+    const operatorType = ref();
+
+    const onChangeOperator = (val) => {
+      operatorType.value = getOperatorType(val.value, "string");
+    };
+
+    onMounted(() => {
+      operatorType.value = getOperatorType();
+
+      operatorsModel.value = 
+      defaultOperators.filter((op) => {
+        if (!props.operators.length) {
+          return op;
+        }
+
+        return props.operators.includes(op.value);
+      });
+    });
+
+    return {
+      operator,
+      operatorType,
+      operatorsModel,
+      onChangeOperator,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/operator/InOperator.vue
new file mode 100644
index 0000000000..abe9b0267b
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/InOperator.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="tw-space-y-2 tw-items-center">
+    <div
+      class="tw-flex tw-space-x-1 tw-items-center"
+      v-for="(element, index) in inputs"
+      :key="index">
+      <input
+        type="text"
+        v-model="inputs[index].value"
+        @change="onChange"
+        class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600" />
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300 tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-plus"
+          @click.prevent.stop="addInput" />
+      </span>
+
+      <span
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300 tw-border tw-border-color-gray-400">
+        <i
+          class="fas fa-minus"
+          @click.prevent.stop="removeInput(index)" />
+      </span>
+    </div>
+  </div>
+</template>
+<script>
+import { defineComponent, computed, ref } from "vue";
+export default defineComponent({
+  setup(props, {emit}) {
+    const inputs = ref([
+      {
+        id: new Date().getTime(),
+        value: null,
+      },
+    ]);
+
+    const addInput = () => {
+      inputs.value.push({
+        id: new Date().getTime(),
+        value: null,
+      });
+    };
+
+    const removeInput = (index) => {
+      inputs.value.splice(index, 1);
+    };
+
+    const onChange = ()=>{
+      emit('change',inputs.value)
+    }
+
+    return {
+      inputs,
+      addInput,
+      removeInput,
+      onChange
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/InputOperator.vue b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
new file mode 100644
index 0000000000..575b09c65f
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
@@ -0,0 +1,16 @@
+<template>
+  <input
+    type="text"
+    @change="$emit('change', $event.target.value)"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900
+      tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+      focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600" />
+</template>
+<script>
+import { defineComponent} from "vue";
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/index.js b/resources/jscomposition/system/table/filter/operator/index.js
new file mode 100644
index 0000000000..93165aec8e
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/index.js
@@ -0,0 +1,11 @@
+import BetweenOperator from "./BetweenOperator.vue";
+import FilterOperator from "./FilterOperator.vue";
+import InOperator from "./InOperator.vue";
+import InputOperator from "./InputOperator.vue";
+
+export {
+  BetweenOperator,
+  FilterOperator,
+  InOperator,
+  InputOperator
+}
diff --git a/resources/jscomposition/system/table/filter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
new file mode 100644
index 0000000000..b484b09b60
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
@@ -0,0 +1,37 @@
+
+import InputOperator from "./InputOperator.vue"
+import BetweenOperator from "./BetweenOperator.vue"
+import InOperator from "./InOperator.vue"
+import { shallowRef } from "vue"
+
+const operatorType = [
+  {
+    operator: ['=', '>', '<', '>=', '<=', 'contains', 'regex'],
+    type: ['number', 'string'],
+    component: () => {
+      return InputOperator
+    },
+  },
+  {
+    operator: ['between'],
+    type: ['number', 'string'],
+    component: () => {
+      return BetweenOperator
+    },
+  },
+  {
+    operator: ['in'],
+    type: ['number', 'string'],
+    component: () => {
+      return InOperator
+    },
+  }
+]
+
+export const getOperatorType = (operator = '=', type = 'string') => {
+  const response = operatorType.find(e => {
+    return e.operator.includes(operator) && e.type.includes(type)
+  })
+
+  return response
+}
\ No newline at end of file
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index 08ba296b39..9ac9fbe088 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1 +1,8 @@
-export * from "./cell/index"
\ No newline at end of file
+import FilterableTable from "./FilterableTable.vue"
+
+export * from "./cell/index"
+export * from "./filter/index"
+
+export {
+  FilterableTable
+}
\ No newline at end of file

From ac601ade198efc1fefe4f847fa4f42e08cfa9887 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 20 Sep 2024 10:26:29 -0400
Subject: [PATCH 2/4] FOUR-19003: Create a NEW VIEW for cases Part Filters

---
 .../cases/casesMain/config/columns.js         | 48 +++++++++----------
 .../system/table/filter/FilterColumn.vue      | 17 ++++---
 .../filter/operator/DateBetweenOperator.vue   | 47 ++++++++++++++++++
 .../table/filter/operator/DateOperator.vue    | 16 +++++++
 .../table/filter/operator/FilterOperator.vue  | 47 +++++++++---------
 .../system/table/filter/operator/index.js     |  6 ++-
 .../table/filter/operator/operatorConfig.js   | 21 ++++++--
 7 files changed, 141 insertions(+), 61 deletions(-)
 create mode 100644 resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
 create mode 100644 resources/jscomposition/system/table/filter/operator/DateOperator.vue

diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 1fca4a6b08..9658a44978 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -54,9 +54,9 @@ export const caseNumberColumn = () => ({
   header: "Case #",
   resizable: true,
   width: 100,
-  filter:{
-    type:'string',
-    operators:['=','>','>=','in','between']
+  filter: {
+    type: 'string',
+    operators: ['=', '>', '>=', 'in', 'between']
   }
 });
 
@@ -68,9 +68,9 @@ export const caseTitleColumn = () => ({
   cellRenderer: () => {
     return CaseTitleCell;
   },
-  filter:{
-    type:'string',
-    operators:['=','>','>=','in','between']
+  filter: {
+    type: 'string',
+    operators: ['=', '>', '>=', 'in', 'between']
   }
 });
 
@@ -82,9 +82,9 @@ export const processColumn = () => ({
   cellRenderer: () => {
     return TruncatedOptionsCell;
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'string',
+    operators: ['=']
   }
 });
 
@@ -96,9 +96,9 @@ export const taskColumn = () => ({
   cellRenderer: () => {
     return TruncatedOptionsCell;
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'string',
+    operators: ['=']
   }
 });
 
@@ -110,9 +110,9 @@ export const participantsColumn = () => ({
   cellRenderer: () => {
     return ParticipantsCell;
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'string',
+    operators: ['=']
   }
 });
 
@@ -124,9 +124,9 @@ export const statusColumn = () => ({
   cellRenderer: () => {
     return StatusCell;
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'string',
+    operators: ['=']
   }
 });
 
@@ -138,9 +138,9 @@ export const startedColumn = () => ({
   formatter: (row, column, columns) => {
     return formatDate(row.initiated_at, "datetime");
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'datetime',
+    operators: ['between', '>', '>=', '<', '<=']
   }
 });
 
@@ -152,9 +152,9 @@ export const completedColumn = () => ({
   formatter: (row, column, columns) => {
     return formatDate(row.completed_at, "datetime");
   },
-  filter:{
-    type:'string',
-    operators:['=']
+  filter: {
+    type: 'datetime',
+    operators: ['between', '>', '>=', '<', '<=']
   }
 });
 
diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/FilterColumn.vue
index 23752e268e..b90ae8b0c5 100644
--- a/resources/jscomposition/system/table/filter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/FilterColumn.vue
@@ -18,8 +18,8 @@
           <div class="tw-grow tw-overflow-auto tw-space-y-4">
             <FilterOperator
               ref="filterOperatorsRef"
-              v-model="filterOperator"
               :operators="filter.operators"
+              :type="filter.type"
               @change="(e) => onChangeFilterOperator(e)">
             </FilterOperator>
           </div>
@@ -37,11 +37,6 @@ import SortingButtons from "./SortingButtons.vue";
 import FilterOperator from "./operator/FilterOperator.vue";
 import FooterButtons from "./FooterButtons.vue";
 
-// interface FilterInterface {
-//   operators = []; // Array
-//   type = null; // String
-// }
-
 export default defineComponent({
   components: {
     AppPopover,
@@ -51,15 +46,19 @@ export default defineComponent({
     FooterButtons,
   },
   props: {
-    filter: Object // FilterInterface,
+    // FilterInterface {
+    //   operators = []  Array
+    //   type = null String
+    // }
+    filter: Object,
   },
   setup(props, { emit }) {
     const show = ref(false);
+
+    // Model that saves the values
     const filterOperator = ref({
-      operator: "=",
       id: new Date().getTime(),
       value: null,
-      type: "string",
     });
 
     const onClick = () => {
diff --git a/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
new file mode 100644
index 0000000000..d5367c2a2d
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="tw-flex tw-flex-col tw-space-y-2">
+    <input
+      v-for="(element, index) in inputs"
+      :key="index"
+      :placeholder="placeholder"
+      v-model="inputs[index].value"
+      @change="onChange()"
+      type="datetime-local"
+      class="tw-p-2 tw-rounded-md tw-border-0
+        tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+        focus:tw-ring-2 focus:tw-ring-inset"  />
+  </div>
+</template>
+<script>
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  emits: ["change"],
+  props:{
+    placeholder: {
+      type: String,
+      default: ()=> ('value')
+    }
+  },
+  setup(props, { emit }) {
+    const inputs = ref([
+      {
+        id: "from",
+        value: null,
+      },
+      {
+        id: "to",
+        value: null,
+      },
+    ]);
+
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
+
+    return {
+      inputs,
+      onChange,
+    };
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
new file mode 100644
index 0000000000..42e0ebd8ae
--- /dev/null
+++ b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <input
+      type="datetime-local"
+      class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600"
+      @change="$emit('change', $event.target.value)" />
+  </div>
+</template>
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
diff --git a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
index fbd89c5b7c..1cfa71d20f 100644
--- a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
@@ -12,7 +12,7 @@
       placeholder="Type value"
       class="tw-flex-1"
       :is="operatorType?.component()"
-      @change="(e) => $emit('change', e)" />
+      @change="onChangeValue" />
   </div>
 </template>
 <script>
@@ -64,32 +64,18 @@ export default defineComponent({
     Dropdown,
   },
   props: {
-    /**
-     * operator: "="
-     * value: null
-     * type: 'string' || 'number'
-     * 
-     * {
-        operator: String,
-        value: Object,
-        type: String,
-      }
-     */
-    value: {
-      type: [Array, Object],
-    },
     operators: {
       type: Array,
       default: () => [],
     },
+    type: {
+      type: String,
+      default: () => "string", // string , number , datetime
+    },
   },
   setup(props, { emit }) {
     const operatorsModel = ref(defaultOperators);
 
-    const model = computed(() => {
-      return props.value;
-    });
-
     const operator = ref({
       value: "=",
       label: "=",
@@ -98,20 +84,32 @@ export default defineComponent({
     const operatorType = ref();
 
     const onChangeOperator = (val) => {
-      operatorType.value = getOperatorType(val.value, "string");
+      operatorType.value = getOperatorType(val.value, props.type);
     };
 
-    onMounted(() => {
-      operatorType.value = getOperatorType();
+    // Get the values of the input, datetime, between etc and emit the change to the parent
+    const onChangeValue = (e) => {
+      emit("change", {
+        operator: operator.value.value,
+        value: e,
+      });
+    };
 
-      operatorsModel.value = 
-      defaultOperators.filter((op) => {
+    onMounted(() => {
+      //Selecting the operators to show in dropdown
+      operatorsModel.value = defaultOperators.filter((op) => {
         if (!props.operators.length) {
           return op;
         }
 
         return props.operators.includes(op.value);
       });
+
+      // Load first operator with its components
+      operatorType.value = getOperatorType(
+        operatorsModel.value[0].value,
+        props.type
+      );
     });
 
     return {
@@ -119,6 +117,7 @@ export default defineComponent({
       operatorType,
       operatorsModel,
       onChangeOperator,
+      onChangeValue,
     };
   },
 });
diff --git a/resources/jscomposition/system/table/filter/operator/index.js b/resources/jscomposition/system/table/filter/operator/index.js
index 93165aec8e..31951815dc 100644
--- a/resources/jscomposition/system/table/filter/operator/index.js
+++ b/resources/jscomposition/system/table/filter/operator/index.js
@@ -2,10 +2,14 @@ import BetweenOperator from "./BetweenOperator.vue";
 import FilterOperator from "./FilterOperator.vue";
 import InOperator from "./InOperator.vue";
 import InputOperator from "./InputOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from './DateBetweenOperator.vue'
 
 export {
   BetweenOperator,
   FilterOperator,
   InOperator,
-  InputOperator
+  InputOperator,
+  DateOperator,
+  DateBetweenOperator
 }
diff --git a/resources/jscomposition/system/table/filter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
index b484b09b60..961c40c405 100644
--- a/resources/jscomposition/system/table/filter/operator/operatorConfig.js
+++ b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
@@ -2,11 +2,12 @@
 import InputOperator from "./InputOperator.vue"
 import BetweenOperator from "./BetweenOperator.vue"
 import InOperator from "./InOperator.vue"
-import { shallowRef } from "vue"
+import DateOperator from "./DateOperator.vue"
+import DateBetweenOperator from "./DateBetweenOperator.vue"
 
 const operatorType = [
   {
-    operator: ['=', '>', '<', '>=', '<=', 'contains', 'regex'],
+    operator: ["=", '>', '<', '>=', '<=', 'contains', 'regex'],
     type: ['number', 'string'],
     component: () => {
       return InputOperator
@@ -25,7 +26,21 @@ const operatorType = [
     component: () => {
       return InOperator
     },
-  }
+  },
+  {
+    operator: ['<', '<=', '>', '>='],
+    type: ['datetime'],
+    component: () => {
+      return DateOperator
+    },
+  },
+  {
+    operator: ['between'],
+    type: ['datetime'],
+    component: () => {
+      return DateBetweenOperator
+    },
+  },
 ]
 
 export const getOperatorType = (operator = '=', type = 'string') => {

From 324c30e2cec7102c0f36d18760fe52c22cb88f65 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 20 Sep 2024 10:40:30 -0400
Subject: [PATCH 3/4] FOUR-19003: Create a NEW VIEW for cases Part Filters

---
 .../jscomposition/base/buttons/OutlineButton.vue    |  3 +--
 resources/jscomposition/base/form/Dropdown.vue      |  4 +---
 .../cases/casesMain/CasesDataSection.vue            |  6 ------
 .../system/table/cell/ParticipantsCell.vue          |  6 ++----
 .../system/table/filter/FooterButtons.vue           |  9 +++++----
 .../system/table/filter/SortingButtons.vue          | 12 ++++++++----
 .../system/table/filter/operator/DateOperator.vue   |  7 ++++---
 .../system/table/filter/operator/InOperator.vue     | 13 ++++++++++---
 8 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
index 2787b4c871..0c13ab7494 100644
--- a/resources/jscomposition/base/buttons/OutlineButton.vue
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -3,8 +3,7 @@
     type="button"
     :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
         tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
-    @click.prevent.stop="onClick"
-  >
+    @click.prevent.stop="onClick">
     <slot />
   </button>
 </template>
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 2a7407bcb8..84ab51f68d 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -127,12 +127,10 @@ export default defineComponent({
       let topPosition = 0;
 
       while (container && container !== document.body) {
-        // Si el container tiene scroll, sumamos sus desplazamientos
+        // If the container has scroll, we add their offsets 
         if (container.scrollTop || container.scrollLeft) {
           topPosition = topPosition + container.scrollTop;
-          // left += container.scrollLeft;
         }
-        // Continuamos subiendo en la jerarquía de containeres
         container = container.parentElement;
       }
 
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 9da5779142..2515b9d6e8 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -11,12 +11,6 @@
       class="tw-grow tw-overflow-y-scroll">
     </FilterableTable>
 
-    <!-- <BaseTable :columns="columnsConfig" :data="data" class="tw-grow tw-overflow-y-scroll">
-      <template v-for="(column, index) in columnsConfig" v-slot:[`theader-filter-${column.field}`]>
-        <FilterColumn></FilterColumn>
-      </template>
-    </BaseTable>   -->
-
     <Pagination />
   </div>
 </template>
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index 56e2655cf2..ae7ba0a69e 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -1,6 +1,5 @@
 <template>
-  <div
-    class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
+  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
     <div
       v-for="(participant, index) in participants"
       class="tw-group">
@@ -15,8 +14,7 @@
         </AppAvatar>
 
         <template #content>
-          <div
-            class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
+          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
             {{ participant.name }}
           </div>
         </template>
diff --git a/resources/jscomposition/system/table/filter/FooterButtons.vue b/resources/jscomposition/system/table/filter/FooterButtons.vue
index 7c21d26f89..1410c7a96a 100644
--- a/resources/jscomposition/system/table/filter/FooterButtons.vue
+++ b/resources/jscomposition/system/table/filter/FooterButtons.vue
@@ -1,15 +1,16 @@
 <template>
   <div class="tw-flex tw-space-x-2 tw-justify-end tw-font-semibold">
     <OutlineButton class="!tw-py-2">
-      <span>Cancel</span>
+      <span>{{ $t("Cancel") }}</span>
     </OutlineButton>
 
     <OutlineButton class="!tw-py-2">
-      <span>Clear</span>
+      <span>{{ $t("Clear") }}</span>
     </OutlineButton>
 
-    <OutlineButton class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700">
-      <span>Apply</span>
+    <OutlineButton
+      class="!tw-py-2 tw-bg-gray-500 tw-text-white hover:tw-bg-gray-700">
+      <span>{{ $t("Apply") }}</span>
     </OutlineButton>
   </div>
 </template>
diff --git a/resources/jscomposition/system/table/filter/SortingButtons.vue b/resources/jscomposition/system/table/filter/SortingButtons.vue
index 8fb8f65b34..ad0d42e551 100644
--- a/resources/jscomposition/system/table/filter/SortingButtons.vue
+++ b/resources/jscomposition/system/table/filter/SortingButtons.vue
@@ -1,19 +1,23 @@
 <template>
   <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
     <div
-      class="tw-space-x-2 tw-inline-flex tw-items-center tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      class="tw-space-x-2 tw-inline-flex tw-items-center
+        tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset 
+        tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
       @click="$emit('asc')">
       <i class="fas fa-sort-amount-up-alt"></i>
 
-      <span>{{ "Sort Ascending" }}</span>
+      <span>{{ $t("Sort Ascending") }}</span>
     </div>
 
     <div
-      class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
+      class="tw-space-x-2 -tw-ml-px tw-inline-flex tw-items-center
+        tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300
+        hover:tw-bg-gray-100 focus:tw-z-10"
       @click="$emit('desc')">
       <i class="fas fa-sort-amount-down"></i>
 
-      <span>{{ "Sort Descending" }}</span>
+      <span>{{ $t("Sort Descending") }}</span>
     </div>
   </div>
 </template>
diff --git a/resources/jscomposition/system/table/filter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
index 42e0ebd8ae..7facc0d66d 100644
--- a/resources/jscomposition/system/table/filter/operator/DateOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
@@ -1,10 +1,11 @@
 <template>
-  <div>
     <input
       type="datetime-local"
-      class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600"
+      class="tw-px-2 tw-block tw-w-full tw-rounded-md
+        tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1
+          tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
+          focus:tw-ring-2 focus:tw-ring-inset"
       @change="$emit('change', $event.target.value)" />
-  </div>
 </template>
 <script>
 import { defineComponent } from "vue";
diff --git a/resources/jscomposition/system/table/filter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/operator/InOperator.vue
index abe9b0267b..04ee9281d0 100644
--- a/resources/jscomposition/system/table/filter/operator/InOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/InOperator.vue
@@ -8,17 +8,24 @@
         type="text"
         v-model="inputs[index].value"
         @change="onChange"
-        class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600" />
+        class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0
+          tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset
+          tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2
+          focus:tw-ring-inset focus:tw-ring-indigo-600" />
 
       <span
-        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300 tw-border tw-border-color-gray-400">
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+          tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+          tw-border tw-border-color-gray-400">
         <i
           class="fas fa-plus"
           @click.prevent.stop="addInput" />
       </span>
 
       <span
-        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300 tw-border tw-border-color-gray-400">
+        class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
+        tw-flex tw-items-center tw-rounded-md hover:tw-bg-gray-300
+        tw-border tw-border-color-gray-400">
         <i
           class="fas fa-minus"
           @click.prevent.stop="removeInput(index)" />

From 885e27e51a62e330eb8c46ee9dcd6416c6dfa7cf Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 20 Sep 2024 13:06:49 -0400
Subject: [PATCH 4/4] FOUR-19003: Create a NEW VIEW for cases Part Filters

---
 .../base/buttons/OutlineButton.vue            |  2 +-
 .../jscomposition/base/form/Dropdown.vue      | 23 ++---
 .../jscomposition/base/table/BaseTable.vue    | 26 ++----
 .../jscomposition/base/table/THeader.vue      |  8 +-
 .../jscomposition/base/ui/AppPopover.vue      | 28 +++----
 .../cases/casesDetail/config/columns.js       |  4 +-
 .../cases/casesMain/CasesDataSection.vue      | 23 +++--
 .../cases/casesMain/CasesMain.vue             | 15 ++--
 .../cases/casesMain/config/columns.js         | 84 ++++++++-----------
 .../system/table/FilterableTable.vue          |  3 +-
 .../system/table/cell/CaseTitleCell.vue       |  7 +-
 .../system/table/cell/ParticipantsCell.vue    | 19 +++--
 .../system/table/filter/FilterColumn.vue      | 17 ++--
 .../system/table/filter/FooterButtons.vue     |  3 +-
 .../system/table/filter/SortingButtons.vue    | 10 +--
 .../system/table/filter/index.js              |  4 +-
 .../table/filter/operator/BetweenOperator.vue | 15 ++--
 .../filter/operator/DateBetweenOperator.vue   | 15 ++--
 .../table/filter/operator/DateOperator.vue    |  9 +-
 .../table/filter/operator/FilterOperator.vue  | 17 ++--
 .../table/filter/operator/InOperator.vue      | 24 +++---
 .../table/filter/operator/InputOperator.vue   |  7 +-
 .../system/table/filter/operator/index.js     |  6 +-
 .../table/filter/operator/operatorConfig.js   | 63 ++++++--------
 resources/jscomposition/system/table/index.js | 10 +--
 25 files changed, 207 insertions(+), 235 deletions(-)

diff --git a/resources/jscomposition/base/buttons/OutlineButton.vue b/resources/jscomposition/base/buttons/OutlineButton.vue
index 0c13ab7494..d27a27ec11 100644
--- a/resources/jscomposition/base/buttons/OutlineButton.vue
+++ b/resources/jscomposition/base/buttons/OutlineButton.vue
@@ -2,7 +2,7 @@
   <button
     type="button"
     :class="`tw-flex tw-rounded-lg tw-border tw-border-${color}-300 tw-text-${color}-500
-        tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
+      tw-space-x-2 tw-px-3 tw-py-3 hover:tw-bg-${color}-200 tw-justify-center tw-items-center`"
     @click.prevent.stop="onClick">
     <slot />
   </button>
diff --git a/resources/jscomposition/base/form/Dropdown.vue b/resources/jscomposition/base/form/Dropdown.vue
index 84ab51f68d..6c2e839aad 100644
--- a/resources/jscomposition/base/form/Dropdown.vue
+++ b/resources/jscomposition/base/form/Dropdown.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="tw-relative"
-    ref="inputRef">
+    ref="inputRef"
+    class="tw-relative">
     <slot
       v-bind="{
         toogleShow,
@@ -9,7 +9,8 @@
       }"
       name="input">
       <button
-        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
+        class="tw-flex tw-w-full tw-justify-between tw-items-center tw-py-2 tw-px-3 tw-ring-1 tw-ring-inset
+        tw-ring-gray-300 tw-rounded-lg focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-primary-400"
         @click.prevent.stop="toogleShow">
         <span>{{ data?.label || data?.value }} </span>
 
@@ -45,9 +46,9 @@
                   :class="{
                     'tw-bg-gray-300': option?.value === data?.value,
                   }"
-                  class="tw-flex tw-py-2 tw-px-4 transition duration-300"
-                  >{{ option.label || option.value }}</span
-                >
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+                  {{ option.label || option.value }}
+                </span>
               </slot>
             </li>
           </slot>
@@ -58,7 +59,9 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, onMounted, onUnmounted, nextTick } from "vue";
+import {
+  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
+} from "vue";
 /**
  * <Dropdown
  *  animation="fade"
@@ -111,7 +114,7 @@ export default defineComponent({
       },
     });
 
-    const onClick = (option, index) => {
+    const onClick = (option) => {
       show.value = false;
       data.value = option;
 
@@ -127,9 +130,9 @@ export default defineComponent({
       let topPosition = 0;
 
       while (container && container !== document.body) {
-        // If the container has scroll, we add their offsets 
+        // If the container has scroll, we add their offsets
         if (container.scrollTop || container.scrollLeft) {
-          topPosition = topPosition + container.scrollTop;
+          topPosition += container.scrollTop;
         }
         container = container.parentElement;
       }
diff --git a/resources/jscomposition/base/table/BaseTable.vue b/resources/jscomposition/base/table/BaseTable.vue
index c74be48117..85961890bf 100644
--- a/resources/jscomposition/base/table/BaseTable.vue
+++ b/resources/jscomposition/base/table/BaseTable.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
+  <div
+    class="tw-w-full tw-relative tw-text-gray-600 tw-text-sm
       tw-border tw-rounded-xl tw-border-gray-300 tw-overflow-hidden tw-overflow-x-auto">
     <table class="tw-w-full tw-border-collapse">
       <thead class="tw-border-b tw-sticky tw-top-0 tw-z-10 tw-bg-gray-100">
@@ -9,22 +10,24 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.field}`"> </slot>
+            <slot :name="`theader-${column.field}`" />
             <template #filter>
-              <slot :name="`theader-filter-${column.field}`"></slot>
+              <slot :name="`theader-filter-${column.field}`" />
             </template>
           </THeader>
         </tr>
       </thead>
       <tbody>
-        <TRow v-for="(row, indexRow) in data" :key="indexRow">
+        <TRow
+          v-for="(row, indexRow) in data"
+          :key="indexRow">
           <TCell
             v-for="(column, indexColumn) in columns"
             :key="indexColumn"
             :columns="columns"
             :column="column"
             :row="row">
-            <slot :name="`tcell-${indexRow}-${column.field}`"> </slot>
+            <slot :name="`tcell-${indexRow}-${column.field}`" />
           </TCell>
         </TRow>
       </tbody>
@@ -38,17 +41,6 @@ import THeader from "./THeader.vue";
 import TRow from "./TRow.vue";
 import TCell from "./TCell.vue";
 
-function generateUniqueId(length = 8) {
-  const charset =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  let uniqueId = "";
-  for (let i = 0; i < length; i++) {
-    const randomIndex = Math.floor(Math.random() * charset.length);
-    uniqueId += charset[randomIndex];
-  }
-  return uniqueId;
-}
-
 export default defineComponent({
   components: {
     THeader,
@@ -69,7 +61,7 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { emit }) {
+  setup() {
     return {};
   },
 });
diff --git a/resources/jscomposition/base/table/THeader.vue b/resources/jscomposition/base/table/THeader.vue
index a3b9938105..a23f096302 100644
--- a/resources/jscomposition/base/table/THeader.vue
+++ b/resources/jscomposition/base/table/THeader.vue
@@ -5,12 +5,12 @@
         class="tw-py-4 tw-px-3 tw-text-left tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
         :style="{ width: width + 'px' }">
         <slot>
-            {{ getValue() }}
+          {{ getValue() }}
         </slot>
       </div>
 
       <div class="tw-h-auto tw-flex tw-items-center">
-        <slot name="filter"></slot>
+        <slot name="filter" />
       </div>
 
       <div
@@ -42,9 +42,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const columnResize = columnResizeComposable(props.column);
 
-    const width = computed(() => {
-      return props.column.width || 200;
-    });
+    const width = computed(() => props.column.width || 200);
 
     const getValue = () => {
       if (isFunction(props.column?.headerFormatter)) {
diff --git a/resources/jscomposition/base/ui/AppPopover.vue b/resources/jscomposition/base/ui/AppPopover.vue
index 5be63b8495..729717638a 100644
--- a/resources/jscomposition/base/ui/AppPopover.vue
+++ b/resources/jscomposition/base/ui/AppPopover.vue
@@ -1,19 +1,19 @@
 <template>
   <div
-    class="tooltip-wrapper"
     ref="tooltipWrapper"
+    class="tooltip-wrapper"
     @mouseenter="($event) => hover && showTooltip($event)"
     @mouseleave="($event) => hover && hideTooltip($event)">
-    <slot name="default"></slot>
+    <slot name="default" />
     <div
       v-if="visible"
+      ref="tooltip"
       class="tooltip-content"
       :style="{
         top: `${tooltipPosition.top}px`,
         left: `${tooltipPosition.left}px`,
       }"
-      :class="calculatedPosition"
-      ref="tooltip">
+      :class="calculatedPosition">
       <slot name="content">
         {{ content }}
       </slot>
@@ -22,7 +22,9 @@
 </template>
 
 <script>
-import { ref, watch, onMounted, nextTick, onUnmounted, computed } from "vue";
+import {
+  ref, watch, onMounted, nextTick, onUnmounted, computed,
+} from "vue";
 
 export default {
   props: {
@@ -50,13 +52,11 @@ export default {
     const visible = props.hover
       ? ref(false)
       : computed({
-          get: () => {
-            return props.value;
-          },
-          set: (val) => {
-            emit("input", val);
-          },
-        });
+        get: () => props.value,
+        set: (val) => {
+          emit("input", val);
+        },
+      });
     const calculatedPosition = ref(props.position);
 
     const calculatePosition = () => {
@@ -115,7 +115,7 @@ export default {
           break;
       }
 
-      //Verify if tooltip leaves the viewport
+      // Verify if tooltip leaves the viewport
       top = Math.max(10, Math.min(top, viewportHeight - tooltipRect.height - 10));
       left = Math.max(10, Math.min(left, viewportWidth - tooltipRect.width - 10));
 
@@ -148,7 +148,7 @@ export default {
         } else {
           hideTooltip();
         }
-      }
+      },
     );
 
     onMounted(() => {
diff --git a/resources/jscomposition/cases/casesDetail/config/columns.js b/resources/jscomposition/cases/casesDetail/config/columns.js
index bb70601a8b..a2a1477a5d 100644
--- a/resources/jscomposition/cases/casesDetail/config/columns.js
+++ b/resources/jscomposition/cases/casesDetail/config/columns.js
@@ -1,9 +1,7 @@
 import {
-  ParticipantsCell,
   StatusCell,
 } from "../../../system/index";
 
-
 export default {};
 
 // Column for Task
@@ -32,7 +30,7 @@ const assignedColumn = () => ({
   field: "assigned",
   header: "Assigned",
   resizable: true,
-  width: 200
+  width: 200,
 });
 
 const dueDateColumn = () => ({
diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 2515b9d6e8..51e1526489 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -8,8 +8,7 @@
     <FilterableTable
       :columns="columnsConfig"
       :data="data"
-      class="tw-grow tw-overflow-y-scroll">
-    </FilterableTable>
+      class="tw-grow tw-overflow-y-scroll" />
 
     <Pagination />
   </div>
@@ -20,26 +19,24 @@ import CaseFilter from "./components/CaseFilter.vue";
 import BadgesSection from "./components/BadgesSection.vue";
 import { Pagination } from "../../base";
 import { getColumns } from "./config/columns";
-import { Breadcrums } from "../../system";
-import { badges } from "./config/badges";
-import { getData, getAllData } from "./api";
 import { FilterableTable } from "../../system";
+import { badges } from "./config/badges";
+import { getAllData } from "./api";
 
 export default defineComponent({
-  props: {
-    listId: {
-      type: String,
-      default: () => "myCases",
-    },
-  },
   components: {
     CaseFilter,
     BadgesSection,
     Pagination,
-    Breadcrums,
     FilterableTable,
   },
-  setup(props, { emit }) {
+  props: {
+    listId: {
+      type: String,
+      default: () => "myCases",
+    },
+  },
+  setup(props) {
     const badgesData = ref(badges);
     const columnsConfig = ref();
     const data = ref();
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index 1535407048..7bdc904212 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -1,14 +1,15 @@
 <template>
   <div class="tw-w-full tw-space-y-4 tw-flex-col tw-flex tw-grow">
-    <Breadcrums :pages="pages"/>
+    <Breadcrums :pages="pages" />
 
-    <div class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl 
-      tw-border-gray-200 tw-border tw-space-y-4 tw-flex tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
+    <div
+      class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl
+      tw-border-gray-200 tw-border tw-space-y-4 tw-flex
+      tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
       <AppCounters
-        class="tw-w-full"
         v-model="countersData"
+        class="tw-w-full"
         @change="onChangeCounter" />
-
       <RouterView :key="route.fullPath" />
     </div>
   </div>
@@ -34,7 +35,7 @@ export default defineComponent({
     const pages = ref([]);
 
     const onChangeCounter = (counter) => {
-      if (typeof counter.url == "function") {
+      if (typeof counter.url === "function") {
         return counter.url();
       }
 
@@ -47,7 +48,7 @@ export default defineComponent({
     onMounted(async () => {
       const resCounters = await getCounters();
       const currentCounter = countersData.value.find((counter) => counter.url === route.path);
-      
+
       countersData.value = formatCounters(resCounters);
       pages.value = [
         configHomeBreadcrum(),
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 9658a44978..40b201cfcf 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -1,17 +1,17 @@
+import moment from "moment";
 import {
   CaseTitleCell,
   TruncatedOptionsCell,
   ParticipantsCell,
   StatusCell,
 } from "../../../system/index";
-import moment from "moment";
 
 const formatDate = (value, format) => {
   let config = "DD/MM/YYYY hh:mm";
   if (
-    typeof ProcessMaker !== "undefined" &&
-    ProcessMaker.user &&
-    ProcessMaker.user.datetime_format
+    typeof ProcessMaker !== "undefined"
+    && ProcessMaker.user
+    && ProcessMaker.user.datetime_format
   ) {
     if (format === "datetime") {
       config = ProcessMaker.user.datetime_format;
@@ -55,9 +55,9 @@ export const caseNumberColumn = () => ({
   resizable: true,
   width: 100,
   filter: {
-    type: 'string',
-    operators: ['=', '>', '>=', 'in', 'between']
-  }
+    type: "string",
+    operators: ["=", ">", ">=", "in", "between"],
+  },
 });
 
 export const caseTitleColumn = () => ({
@@ -65,13 +65,11 @@ export const caseTitleColumn = () => ({
   header: "Case Title",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return CaseTitleCell;
-  },
+  cellRenderer: () => CaseTitleCell,
   filter: {
-    type: 'string',
-    operators: ['=', '>', '>=', 'in', 'between']
-  }
+    type: "string",
+    operators: ["=", ">", ">=", "in", "between"],
+  },
 });
 
 export const processColumn = () => ({
@@ -79,13 +77,11 @@ export const processColumn = () => ({
   header: "Process",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return TruncatedOptionsCell;
-  },
+  cellRenderer: () => TruncatedOptionsCell,
   filter: {
-    type: 'string',
-    operators: ['=']
-  }
+    type: "string",
+    operators: ["="],
+  },
 });
 
 export const taskColumn = () => ({
@@ -93,13 +89,11 @@ export const taskColumn = () => ({
   header: "Task",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return TruncatedOptionsCell;
-  },
+  cellRenderer: () => TruncatedOptionsCell,
   filter: {
-    type: 'string',
-    operators: ['=']
-  }
+    type: "string",
+    operators: ["="],
+  },
 });
 
 export const participantsColumn = () => ({
@@ -107,13 +101,11 @@ export const participantsColumn = () => ({
   header: "Participants",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return ParticipantsCell;
-  },
+  cellRenderer: () => ParticipantsCell,
   filter: {
-    type: 'string',
-    operators: ['=']
-  }
+    type: "string",
+    operators: ["="],
+  },
 });
 
 export const statusColumn = () => ({
@@ -121,13 +113,11 @@ export const statusColumn = () => ({
   header: "Status",
   resizable: true,
   width: 200,
-  cellRenderer: () => {
-    return StatusCell;
-  },
+  cellRenderer: () => StatusCell,
   filter: {
-    type: 'string',
-    operators: ['=']
-  }
+    type: "string",
+    operators: ["="],
+  },
 });
 
 export const startedColumn = () => ({
@@ -135,13 +125,11 @@ export const startedColumn = () => ({
   header: "Started",
   resizable: true,
   width: 200,
-  formatter: (row, column, columns) => {
-    return formatDate(row.initiated_at, "datetime");
-  },
+  formatter: (row, column, columns) => formatDate(row.initiated_at, "datetime"),
   filter: {
-    type: 'datetime',
-    operators: ['between', '>', '>=', '<', '<=']
-  }
+    type: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
+  },
 });
 
 export const completedColumn = () => ({
@@ -149,13 +137,11 @@ export const completedColumn = () => ({
   header: "Completed",
   resizable: true,
   width: 200,
-  formatter: (row, column, columns) => {
-    return formatDate(row.completed_at, "datetime");
-  },
+  formatter: (row, column, columns) => formatDate(row.completed_at, "datetime"),
   filter: {
-    type: 'datetime',
-    operators: ['between', '>', '>=', '<', '<=']
-  }
+    type: "datetime",
+    operators: ["between", ">", ">=", "<", "<="],
+  },
 });
 
 export const getColumns = (type) => {
diff --git a/resources/jscomposition/system/table/FilterableTable.vue b/resources/jscomposition/system/table/FilterableTable.vue
index 538377f6a9..2af1e92220 100644
--- a/resources/jscomposition/system/table/FilterableTable.vue
+++ b/resources/jscomposition/system/table/FilterableTable.vue
@@ -8,7 +8,8 @@
       v-slot:[`theader-filter-${column.field}`]>
       <FilterColumn
         v-if="column.filter"
-        :filter="column.filter"></FilterColumn>
+        :key="index"
+        :filter="column.filter"/>
     </template>
   </BaseTable>
 </template>
diff --git a/resources/jscomposition/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
index 07c430d5c2..f1e0f96701 100644
--- a/resources/jscomposition/system/table/cell/CaseTitleCell.vue
+++ b/resources/jscomposition/system/table/cell/CaseTitleCell.vue
@@ -4,18 +4,21 @@
       v-if="row.case_title_formatted"
       class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
       :style="{ width: column.width + 'px' }"
-      v-html="row.case_title_formatted" />
+      v-html="row.case_title_formatted" 
+      />
     <slot
       v-else
       :columns="columns"
       :column="column"
-      :row="row">
+      :row="row"
+    >
       {{ getValue() }}
     </slot>
   </div>
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
   props: {
     columns: {
diff --git a/resources/jscomposition/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
index ae7ba0a69e..4d00a596bb 100644
--- a/resources/jscomposition/system/table/cell/ParticipantsCell.vue
+++ b/resources/jscomposition/system/table/cell/ParticipantsCell.vue
@@ -2,16 +2,18 @@
   <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
     <div
       v-for="(participant, index) in participants"
+      :key="index"
       class="tw-group">
       <AppPopover
         position="bottom"
-        :hover="true">
+        :hover="true"
+      >
         <AppAvatar
-          :key="index"
+
           :class="`${participant.color}`"
           :initials="participant.name[0]"
-          class="tw-cursor-pointer">
-        </AppAvatar>
+          class="tw-cursor-pointer"
+        />
 
         <template #content>
           <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
@@ -23,7 +25,8 @@
 
     <span
       v-if="participants.length == 1"
-      class="tw-px-2">
+      class="tw-px-2"
+    >
       {{ participants[0].name }}
     </span>
   </div>
@@ -43,9 +46,7 @@ const colors = [
   "tw-bg-purple-500",
 ];
 
-const getRandomInt = (max) => {
-  return Math.floor(Math.random() * max);
-};
+const getRandomInt = (max) => Math.floor(Math.random() * max);
 
 export default defineComponent({
   components: {
@@ -66,7 +67,7 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { emit }) {
+  setup(props) {
     const participants = computed(() => {
       const response = props.row[props.column.field].map((e) => ({
         ...e,
diff --git a/resources/jscomposition/system/table/filter/FilterColumn.vue b/resources/jscomposition/system/table/filter/FilterColumn.vue
index b90ae8b0c5..aa5718a5cb 100644
--- a/resources/jscomposition/system/table/filter/FilterColumn.vue
+++ b/resources/jscomposition/system/table/filter/FilterColumn.vue
@@ -6,11 +6,12 @@
       position="bottom">
       <i
         class="hover:tw-cursor-pointer tw-px-1 fas fa-ellipsis-v"
-        @click.prevent.stop="onClick"></i>
+        @click.prevent.stop="onClick" />
 
       <template #content>
         <div
-          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between tw-font-normal tw-bg-white tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
+          class="tw-shadow-md tw-text-xs tw-p-4 tw-h-60 tw-space-y-2 tw-flex tw-flex-col tw-justify-between
+            tw-font-normal tw-bg-white tw-text-gray-600tw-overflow-hidden tw-rounded-lg tw-border tw-border-gray-300">
           <SortingButtons
             @asc="onAsc"
             @desc="onDesc" />
@@ -20,8 +21,7 @@
               ref="filterOperatorsRef"
               :operators="filter.operators"
               :type="filter.type"
-              @change="(e) => onChangeFilterOperator(e)">
-            </FilterOperator>
+              @change="(e) => onChangeFilterOperator(e)" />
           </div>
 
           <FooterButtons />
@@ -31,8 +31,8 @@
   </div>
 </template>
 <script>
-import { defineComponent, computed, ref, onMounted } from "vue";
-import { AppPopover, OutlineButton } from "../../../base/index";
+import { defineComponent, ref } from "vue";
+import { AppPopover } from "../../../base/index";
 import SortingButtons from "./SortingButtons.vue";
 import FilterOperator from "./operator/FilterOperator.vue";
 import FooterButtons from "./FooterButtons.vue";
@@ -42,7 +42,6 @@ export default defineComponent({
     AppPopover,
     SortingButtons,
     FilterOperator,
-    OutlineButton,
     FooterButtons,
   },
   props: {
@@ -52,7 +51,7 @@ export default defineComponent({
     // }
     filter: Object,
   },
-  setup(props, { emit }) {
+  setup() {
     const show = ref(false);
 
     // Model that saves the values
@@ -73,8 +72,6 @@ export default defineComponent({
       filterOperator.value.value = element;
     };
 
-    onMounted(() => {});
-
     return {
       show,
       filterOperator,
diff --git a/resources/jscomposition/system/table/filter/FooterButtons.vue b/resources/jscomposition/system/table/filter/FooterButtons.vue
index 1410c7a96a..7f733e2859 100644
--- a/resources/jscomposition/system/table/filter/FooterButtons.vue
+++ b/resources/jscomposition/system/table/filter/FooterButtons.vue
@@ -15,8 +15,9 @@
   </div>
 </template>
 <script>
-import { OutlineButton } from "../../../base/index";
 import { defineComponent } from "vue";
+import { OutlineButton } from "../../../base/index";
+
 export default defineComponent({
   components: {
     OutlineButton,
diff --git a/resources/jscomposition/system/table/filter/SortingButtons.vue b/resources/jscomposition/system/table/filter/SortingButtons.vue
index ad0d42e551..bfc4d66f76 100644
--- a/resources/jscomposition/system/table/filter/SortingButtons.vue
+++ b/resources/jscomposition/system/table/filter/SortingButtons.vue
@@ -2,10 +2,10 @@
   <div class="tw-flex tw-justify-center tw-text-gray-500 tw-text-xs">
     <div
       class="tw-space-x-2 tw-inline-flex tw-items-center
-        tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset 
+        tw-rounded-l-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset
         tw-ring-gray-300 hover:tw-bg-gray-100 focus:tw-z-10"
       @click="$emit('asc')">
-      <i class="fas fa-sort-amount-up-alt"></i>
+      <i class="fas fa-sort-amount-up-alt" />
 
       <span>{{ $t("Sort Ascending") }}</span>
     </div>
@@ -15,17 +15,17 @@
         tw-rounded-r-md tw-px-3 tw-py-2 tw-ring-1 tw-ring-inset tw-ring-gray-300
         hover:tw-bg-gray-100 focus:tw-z-10"
       @click="$emit('desc')">
-      <i class="fas fa-sort-amount-down"></i>
+      <i class="fas fa-sort-amount-down" />
 
       <span>{{ $t("Sort Descending") }}</span>
     </div>
   </div>
 </template>
 <script>
-import { defineComponent} from "vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
-  setup(props, { emit }) {
+  setup() {
     return {};
   },
 });
diff --git a/resources/jscomposition/system/table/filter/index.js b/resources/jscomposition/system/table/filter/index.js
index 1ff2b3e291..7f7682fb96 100644
--- a/resources/jscomposition/system/table/filter/index.js
+++ b/resources/jscomposition/system/table/filter/index.js
@@ -7,5 +7,5 @@ export * from "./operator";
 export {
   FilterColumn,
   FooterButtons,
-  SortingButtons
-};
\ No newline at end of file
+  SortingButtons,
+};
diff --git a/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
index ee6e5646df..19182999e8 100644
--- a/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/BetweenOperator.vue
@@ -3,25 +3,26 @@
     <input
       v-for="(element, index) in inputs"
       :key="index"
-      :placeholder="placeholder"
       v-model="inputs[index].value"
-      @change="onChange()"
+      :placeholder="placeholder"
       type="text"
       class="tw-p-2 tw-rounded-md tw-border-0
         tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
-        focus:tw-ring-2 focus:tw-ring-inset"  />
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
   </div>
 </template>
 <script>
 import { defineComponent, ref } from "vue";
+
 export default defineComponent({
-  emits: ["change"],
-  props:{
+  props: {
     placeholder: {
       type: String,
-      default: ()=> ('value')
-    }
+      default: () => ("value"),
+    },
   },
+  emits: ["change"],
   setup(props, { emit }) {
     const inputs = ref([
       {
diff --git a/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
index d5367c2a2d..f89cfb1a6f 100644
--- a/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/DateBetweenOperator.vue
@@ -3,25 +3,26 @@
     <input
       v-for="(element, index) in inputs"
       :key="index"
-      :placeholder="placeholder"
       v-model="inputs[index].value"
-      @change="onChange()"
+      :placeholder="placeholder"
       type="datetime-local"
       class="tw-p-2 tw-rounded-md tw-border-0
         tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
-        focus:tw-ring-2 focus:tw-ring-inset"  />
+        focus:tw-ring-2 focus:tw-ring-inset"
+      @change="onChange()">
   </div>
 </template>
 <script>
 import { defineComponent, ref } from "vue";
+
 export default defineComponent({
-  emits: ["change"],
-  props:{
+  props: {
     placeholder: {
       type: String,
-      default: ()=> ('value')
-    }
+      default: () => ("value"),
+    },
   },
+  emits: ["change"],
   setup(props, { emit }) {
     const inputs = ref([
       {
diff --git a/resources/jscomposition/system/table/filter/operator/DateOperator.vue b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
index 7facc0d66d..ffa69b243e 100644
--- a/resources/jscomposition/system/table/filter/operator/DateOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/DateOperator.vue
@@ -1,14 +1,15 @@
 <template>
-    <input
-      type="datetime-local"
-      class="tw-px-2 tw-block tw-w-full tw-rounded-md
+  <input
+    type="datetime-local"
+    class="tw-px-2 tw-block tw-w-full tw-rounded-md
         tw-border-0 tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1
           tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
           focus:tw-ring-2 focus:tw-ring-inset"
-      @change="$emit('change', $event.target.value)" />
+    @change="$emit('change', $event.target.value)">
 </template>
 <script>
 import { defineComponent } from "vue";
+
 export default defineComponent({
   setup() {
     return {};
diff --git a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
index 1cfa71d20f..8e7641af48 100644
--- a/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/FilterOperator.vue
@@ -1,23 +1,24 @@
 <template>
   <div class="tw-space-y-2 tw-text-xs">
-    <slot name="header"></slot>
+    <slot name="header" />
 
     <Dropdown
       v-model="operator"
-      @change="onChangeOperator"
-      :options="operatorsModel">
-    </Dropdown>
+      :options="operatorsModel"
+      @change="onChangeOperator" />
 
     <component
+      :is="operatorType?.component()"
       placeholder="Type value"
       class="tw-flex-1"
-      :is="operatorType?.component()"
       @change="onChangeValue" />
   </div>
 </template>
 <script>
+import {
+  defineComponent, ref, onMounted,
+} from "vue";
 import { Dropdown } from "../../../../base";
-import { defineComponent, computed, ref, onMounted } from "vue";
 import { getOperatorType } from "./operatorConfig";
 
 const defaultOperators = [
@@ -96,7 +97,7 @@ export default defineComponent({
     };
 
     onMounted(() => {
-      //Selecting the operators to show in dropdown
+      // Selecting the operators to show in dropdown
       operatorsModel.value = defaultOperators.filter((op) => {
         if (!props.operators.length) {
           return op;
@@ -108,7 +109,7 @@ export default defineComponent({
       // Load first operator with its components
       operatorType.value = getOperatorType(
         operatorsModel.value[0].value,
-        props.type
+        props.type,
       );
     });
 
diff --git a/resources/jscomposition/system/table/filter/operator/InOperator.vue b/resources/jscomposition/system/table/filter/operator/InOperator.vue
index 04ee9281d0..b12b073084 100644
--- a/resources/jscomposition/system/table/filter/operator/InOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/InOperator.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="tw-space-y-2 tw-items-center">
     <div
-      class="tw-flex tw-space-x-1 tw-items-center"
       v-for="(element, index) in inputs"
-      :key="index">
+      :key="index"
+      class="tw-flex tw-space-x-1 tw-items-center">
       <input
-        type="text"
         v-model="inputs[index].value"
-        @change="onChange"
+        type="text"
         class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0
           tw-py-2 tw-text-gray-900 tw-shadow-sm tw-ring-1 tw-ring-inset
           tw-ring-gray-300 placeholder:tw-text-gray-400 focus:tw-ring-2
-          focus:tw-ring-inset focus:tw-ring-indigo-600" />
+          focus:tw-ring-inset focus:tw-ring-indigo-600"
+        @change="onChange">
 
       <span
         class="tw-h-5 tw-w-6 tw-text-[10px] tw-justify-center
@@ -34,9 +34,11 @@
   </div>
 </template>
 <script>
-import { defineComponent, computed, ref } from "vue";
+
+import { defineComponent, ref } from "vue";
+
 export default defineComponent({
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     const inputs = ref([
       {
         id: new Date().getTime(),
@@ -55,15 +57,15 @@ export default defineComponent({
       inputs.value.splice(index, 1);
     };
 
-    const onChange = ()=>{
-      emit('change',inputs.value)
-    }
+    const onChange = () => {
+      emit("change", inputs.value);
+    };
 
     return {
       inputs,
       addInput,
       removeInput,
-      onChange
+      onChange,
     };
   },
 });
diff --git a/resources/jscomposition/system/table/filter/operator/InputOperator.vue b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
index 575b09c65f..82ea3fc6b0 100644
--- a/resources/jscomposition/system/table/filter/operator/InputOperator.vue
+++ b/resources/jscomposition/system/table/filter/operator/InputOperator.vue
@@ -1,13 +1,14 @@
 <template>
   <input
     type="text"
-    @change="$emit('change', $event.target.value)"
     class="tw-px-2 tw-block tw-w-full tw-rounded-md tw-border-0 tw-py-2 tw-text-gray-900
       tw-shadow-sm tw-ring-1 tw-ring-inset tw-ring-gray-300 placeholder:tw-text-gray-400
-      focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600" />
+      focus:tw-ring-2 focus:tw-ring-inset focus:tw-ring-indigo-600"
+    @change="$emit('change', $event.target.value)">
 </template>
 <script>
-import { defineComponent} from "vue";
+import { defineComponent } from "vue";
+
 export default defineComponent({
   setup() {
     return {};
diff --git a/resources/jscomposition/system/table/filter/operator/index.js b/resources/jscomposition/system/table/filter/operator/index.js
index 31951815dc..b1c78c6c8e 100644
--- a/resources/jscomposition/system/table/filter/operator/index.js
+++ b/resources/jscomposition/system/table/filter/operator/index.js
@@ -3,7 +3,7 @@ import FilterOperator from "./FilterOperator.vue";
 import InOperator from "./InOperator.vue";
 import InputOperator from "./InputOperator.vue";
 import DateOperator from "./DateOperator.vue";
-import DateBetweenOperator from './DateBetweenOperator.vue'
+import DateBetweenOperator from "./DateBetweenOperator.vue";
 
 export {
   BetweenOperator,
@@ -11,5 +11,5 @@ export {
   InOperator,
   InputOperator,
   DateOperator,
-  DateBetweenOperator
-}
+  DateBetweenOperator,
+};
diff --git a/resources/jscomposition/system/table/filter/operator/operatorConfig.js b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
index 961c40c405..366769d6c4 100644
--- a/resources/jscomposition/system/table/filter/operator/operatorConfig.js
+++ b/resources/jscomposition/system/table/filter/operator/operatorConfig.js
@@ -1,52 +1,39 @@
-
-import InputOperator from "./InputOperator.vue"
-import BetweenOperator from "./BetweenOperator.vue"
-import InOperator from "./InOperator.vue"
-import DateOperator from "./DateOperator.vue"
-import DateBetweenOperator from "./DateBetweenOperator.vue"
+import InputOperator from "./InputOperator.vue";
+import BetweenOperator from "./BetweenOperator.vue";
+import InOperator from "./InOperator.vue";
+import DateOperator from "./DateOperator.vue";
+import DateBetweenOperator from "./DateBetweenOperator.vue";
 
 const operatorType = [
   {
-    operator: ["=", '>', '<', '>=', '<=', 'contains', 'regex'],
-    type: ['number', 'string'],
-    component: () => {
-      return InputOperator
-    },
+    operator: ["=", ">", "<", ">=", "<=", "contains", "regex"],
+    type: ["number", "string"],
+    component: () => InputOperator,
   },
   {
-    operator: ['between'],
-    type: ['number', 'string'],
-    component: () => {
-      return BetweenOperator
-    },
+    operator: ["between"],
+    type: ["number", "string"],
+    component: () => BetweenOperator,
   },
   {
-    operator: ['in'],
-    type: ['number', 'string'],
-    component: () => {
-      return InOperator
-    },
+    operator: ["in"],
+    type: ["number", "string"],
+    component: () => InOperator,
   },
   {
-    operator: ['<', '<=', '>', '>='],
-    type: ['datetime'],
-    component: () => {
-      return DateOperator
-    },
+    operator: ["<", "<=", ">", ">="],
+    type: ["datetime"],
+    component: () => DateOperator,
   },
   {
-    operator: ['between'],
-    type: ['datetime'],
-    component: () => {
-      return DateBetweenOperator
-    },
+    operator: ["between"],
+    type: ["datetime"],
+    component: () => DateBetweenOperator,
   },
-]
+];
 
-export const getOperatorType = (operator = '=', type = 'string') => {
-  const response = operatorType.find(e => {
-    return e.operator.includes(operator) && e.type.includes(type)
-  })
+export const getOperatorType = (operator = "=", type = "string") => {
+  const response = operatorType.find((e) => e.operator.includes(operator) && e.type.includes(type));
 
-  return response
-}
\ No newline at end of file
+  return response;
+};
diff --git a/resources/jscomposition/system/table/index.js b/resources/jscomposition/system/table/index.js
index 9ac9fbe088..26f3b8ab32 100644
--- a/resources/jscomposition/system/table/index.js
+++ b/resources/jscomposition/system/table/index.js
@@ -1,8 +1,8 @@
-import FilterableTable from "./FilterableTable.vue"
+import FilterableTable from "./FilterableTable.vue";
 
-export * from "./cell/index"
-export * from "./filter/index"
+export * from "./cell/index";
+export * from "./filter/index";
 
 export {
-  FilterableTable
-}
\ No newline at end of file
+  FilterableTable,
+};