tabulator filter working

src/ui/client/builder/test_bans.py

@@ -25,8 +25,8 @@ bans = [
     },
 ]
 
-reasons = ["all", "antibot", "test"]
-remains = ["all", "hour(s)", "day(s)"]
+reasons = ["antibot", "test"]
+remains = ["hour(s)", "day(s)"]
 
 builder = bans_builder(bans, reasons, remains)
 

src/ui/client/dashboard/components/Widget/Button.vue

@@ -201,6 +201,8 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
+  checkDisplay();
+
   // Case modal, add accessibility data
   if (typeof props.modal === "object") {
     btnEl.value.setAttribute("aria-controls", btn.modalId);

src/ui/client/dashboard/components/Widget/Tabulator.vue

@@ -136,7 +136,6 @@ const props = defineProps({
 const tableEl = ref(null); //reference to your table element
 
 const table = reactive({
-  test: true,
   instance: null,
   filters: {},
   columns: props.columns,
@@ -256,11 +255,6 @@ onMounted(() => {
     }, 100);
   });
 });
-
-onUnmounted(() => {
-  table.instance.destroy();
-  table.instance = null;
-});
 </script>
 
 <template>
@@ -281,6 +275,7 @@ onUnmounted(() => {
       :buttons="props.actionsButtons"
     />
     <div
+      v-show="table.customRender"
       :class="[props.isStriped ? 'striped' : '']"
       ref="tableEl"
       data-is="table-content"

src/ui/client/dashboard/utils/tabulator.js

@@ -223,6 +223,7 @@ function applyTableFilter(tableInstance, filters) {
   // loop on dict filters
   const filtersSend = [];
   for (const [key, filter] of Object.entries(filters)) {
+    const filters = [];
     const inpType = filter.setting.inpType;
     const filterType = filter.type;
     const value = filter.value;
@@ -236,8 +237,9 @@ function applyTableFilter(tableInstance, filters) {
     if (filterType === "number") value = +value;
     if (filterType === "regex") value = new RegExp(value, "i");
     for (let i = 0; i < fields.length; i++) {
-      filtersSend.push({ field: fields[i], type: filterType, value: value });
+      filters.push({ field: fields[i], type: filterType, value: value });
     }
+    filtersSend.push(filters);
   }
   tableInstance.setFilter(filtersSend);
 }
@@ -251,17 +253,15 @@ function applyTableFilter(tableInstance, filters) {
 function overrideDefaultFilters() {
   //
   const getRightKey = (rowValue) => {
-    const buttons = rowValue?.buttons
-      ? rowValue?.buttons?.map((btn) => btn.text).join(" ")
-      : null;
-
-    return (
+    const value =
+      rowValue?.buttons?.map((btn) => btn.data.text).join(" ") ||
       rowValue?.setting?.value ||
-      rowValue?.value.toLowerCase() ||
-      rowValue?.text.toLowerCase() ||
+      rowValue?.value?.toLowerCase() ||
+      rowValue?.text?.toLowerCase() ||
       buttons ||
-      rowValue
-    );
+      "";
+
+    return value;
   };
 
   return {

src/ui/client/input.css

@@ -1426,33 +1426,33 @@ body {
 }
 
 .btn.active:not([disabled]) {
-  @apply shadow-md brightness-90 dark:shadow-md dark:brightness-75;
+  @apply shadow-md !brightness-75 dark:shadow-md dark:!brightness-75;
 }
 
 /* BTN SIZE */
 
 .btn.tab {
-  @apply px-3 py-2.5;
+  @apply px-3 py-2.5 text-lg;
 }
 
 .btn.xl {
-  @apply px-6 py-3;
+  @apply px-6 py-3 text-lg;
 }
 
 .btn.lg {
-  @apply px-4 py-2.5;
+  @apply px-4 py-2.5 text-lg;
 }
 
 .btn.normal {
-  @apply px-3 py-2;
+  @apply px-3 py-2 text-base;
 }
 
 .btn.sm {
-  @apply px-2 py-1;
+  @apply px-2 py-1 text-sm;
 }
 
 .btn.xs {
-  @apply px-1 py-0.5;
+  @apply px-1 py-0.5 text-sm;
 }
 
 .btn-svg {