FOU-19003 : Create a NEW VIEW for cases Part Filters

resources/jscomposition/base/buttons/OutlineButton.vue

@@ -2,9 +2,8 @@
   <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`"
-    @click="onClick"
-  >
+      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>
 </template>

resources/jscomposition/base/form/Dropdown.vue

@@ -1,18 +1,17 @@
 <template>
-  <div class="tw-relative">
+  <div
+    ref="inputRef"
+    class="tw-relative">
     <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 +21,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>
+                  class="tw-flex tw-py-2 tw-px-4 transition duration-300">
+                  {{ option.label || option.value }}
+                </span>
               </slot>
             </li>
           </slot>
@@ -63,9 +60,8 @@
 
 <script>
 import {
-  defineComponent, ref, computed, onMounted, onUnmounted,
+  defineComponent, ref, computed, onMounted, onUnmounted, nextTick,
 } from "vue";
-
 /**
  * <Dropdown
  *  animation="fade"
@@ -95,7 +91,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() {
@@ -115,19 +114,42 @@ export default defineComponent({
       },
     });
 
-    const onClick = (option, index) => {
+    const onClick = (option) => {
       show.value = false;
       data.value = option;
 
       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) {
+        // If the container has scroll, we add their offsets
+        if (container.scrollTop || container.scrollLeft) {
+          topPosition += container.scrollTop;
+        }
+        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 +163,10 @@ export default defineComponent({
     return {
       show,
       data,
+      inputRef,
       optionsModel,
+      top,
+      widthContainer,
       onClick,
       toogleShow,
     };
@@ -151,59 +176,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);
 }

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,19 +10,24 @@
             :key="index"
             :columns="columns"
             :column="column">
-            <slot :name="`theader-${column.header}`"> </slot>
+            <slot :name="`theader-${column.field}`" />
+            <template #filter>
+              <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>
@@ -35,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,
@@ -66,7 +61,7 @@ export default defineComponent({
       default: () => ({}),
     },
   },
-  setup(props, { emit }) {
+  setup() {
     return {};
   },
 });

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() }}
         </slot>
       </div>
+
+      <div class="tw-h-auto tw-flex tw-items-center">
+        <slot name="filter" />
+      </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>
@@ -38,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)) {