@fy-/fws-vue 2.1.5 → 2.1.7

package/components/fws/DataTable.vue

@@ -1,208 +1,211 @@
 <script setup lang="ts">
-import { onMounted, ref, onUnmounted, watch } from "vue";
 import {
   ArrowDownIcon,
-  ArrowUpIcon,
   ArrowDownTrayIcon,
-} from "@heroicons/vue/24/solid";
-import DefaultPaging from "../ui/DefaultPaging.vue";
-import DefaultInput from "../ui/DefaultInput.vue";
-import { useEventBus } from "../../composables/event-bus";
-import { useRest } from "../../composables/rest";
-import { useRoute } from "vue-router";
-import { useStorage } from "@vueuse/core";
+  ArrowUpIcon,
+} from '@heroicons/vue/24/solid'
+import { useStorage } from '@vueuse/core'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useEventBus } from '../../composables/event-bus'
+import { useRest } from '../../composables/rest'
+import DefaultInput from '../ui/DefaultInput.vue'
+import DefaultPaging from '../ui/DefaultPaging.vue'
+
 interface DefaultStringObject {
-  [key: string]: string;
+  [key: string]: string
 }
 interface DefaultAnyObject {
-  [key: string]: any;
+  [key: string]: any
 }
 interface DefaultBoolObject {
-  [key: string]: boolean;
+  [key: string]: boolean
 }
 interface SortingField {
-  field: string;
-  direction: string;
+  field: string
+  direction: string
 }
-const eventBus = useEventBus();
-const currentPage = ref<number>(1);
-const route = useRoute();
-const data = ref<any[]>([]);
-const paging = ref<any>(undefined);
+const eventBus = useEventBus()
+const currentPage = ref<number>(1)
+const route = useRoute()
+const data = ref<any[]>([])
+const paging = ref<any>(undefined)
 const perPageOptions = [
-  ["10", "10"],
-  ["25", "25"],
-  ["50", "50"],
-  ["100", "100"],
-];
+  ['10', '10'],
+  ['25', '25'],
+  ['50', '50'],
+  ['100', '100'],
+]
 const props = withDefaults(
   defineProps<{
-    id: string;
-    headers: DefaultStringObject;
-    sortables?: DefaultBoolObject;
-    showHeaders?: boolean;
-    exportableColumns?: string[];
-    csvFormatColumns?: Record<string, (value: any) => string>;
-    defaultPerPage?: number;
-    filtersData: DefaultAnyObject;
-    apiPath: string;
-    defaultSort?: SortingField;
-    restFunction?: Function | null;
+    id: string
+    headers: DefaultStringObject
+    sortables?: DefaultBoolObject
+    showHeaders?: boolean
+    exportableColumns?: string[]
+    csvFormatColumns?: Record<string, (value: any) => string>
+    defaultPerPage?: number
+    filtersData: DefaultAnyObject
+    apiPath: string
+    defaultSort?: SortingField
+    restFunction?: Function | null
   }>(),
   {
     showHeaders: true,
     sortables: () => ({}),
     exportableColumns: () => [],
     csvFormatColumns: () => ({}),
-    exportableName: "default",
+    exportableName: 'default',
     defaultPerPage: 25,
-    defaultSort: () => ({ field: "Created", direction: "DESC" }),
+    defaultSort: () => ({ field: 'Created', direction: 'DESC' }),
     restFunction: null,
   },
-);
-const rest = useRest();
-const restFunction = props.restFunction ?? rest;
-const perPage = useStorage<number>(`${props.id}PerPage`, props.defaultPerPage);
+)
+const rest = useRest()
+const restFunction = props.restFunction ?? rest
+const perPage = useStorage<number>(`${props.id}PerPage`, props.defaultPerPage)
 const currentSort = useStorage<SortingField>(
   `${props.id}CurrentSort`,
   props.defaultSort,
-);
-const getData = async (page: number = 1) => {
-  eventBus.emit("main-loading", true);
-  if (route.query.page) page = parseInt(route.query.page.toString());
-  const sort: any = {};
-  sort[currentSort.value.field] = currentSort.value.direction;
+)
+async function getData(page: number = 1) {
+  eventBus.emit('main-loading', true)
+  if (route.query.page) page = Number.parseInt(route.query.page.toString())
+  const sort: any = {}
+  sort[currentSort.value.field] = currentSort.value.direction
   const requestParams = {
     ...props.filtersData,
-    sort: sort,
+    sort,
     results_per_page: perPage.value,
     page_no: page,
-  };
-  const r = await restFunction(props.apiPath, "GET", requestParams, {
+  }
+  const r = await restFunction(props.apiPath, 'GET', requestParams, {
     getBody: true,
-  });
-  currentPage.value = page;
-  data.value = [];
-  paging.value = undefined;
-  if (r && r.result == "success") {
-    data.value = r.data;
-    paging.value = r.paging;
-    eventBus.emit(`${props.id}NewData`, data.value);
+  })
+  currentPage.value = page
+  data.value = []
+  paging.value = undefined
+  if (r && r.result === 'success') {
+    data.value = r.data
+    paging.value = r.paging
+    eventBus.emit(`${props.id}NewData`, data.value)
   }
-  eventBus.emit("main-loading", false);
-};
-const sortData = (key: string) => {
-  if (!props.sortables[key]) return;
+  eventBus.emit('main-loading', false)
+}
+function sortData(key: string) {
+  if (!props.sortables[key]) return
   const newSort: SortingField = {
     field: currentSort.value.field,
     direction: currentSort.value.direction,
-  };
-  if (key == newSort.field) {
-    if (newSort.direction == "desc") {
-      newSort.direction = "asc";
-    } else {
-      newSort.direction = "desc";
+  }
+  if (key === newSort.field) {
+    if (newSort.direction === 'desc') {
+      newSort.direction = 'asc'
+    }
+    else {
+      newSort.direction = 'desc'
     }
-  } else {
-    newSort.direction = "desc";
-    newSort.field = key;
   }
-  currentSort.value = { ...newSort };
-};
-const exportToCsv = () => {
+  else {
+    newSort.direction = 'desc'
+    newSort.field = key
+  }
+  currentSort.value = { ...newSort }
+}
+function exportToCsv() {
   const header = props.exportableColumns
-    .map((column) => props.headers[column] ?? column)
-    .join(",");
+    .map(column => props.headers[column] ?? column)
+    .join(',')
   const rows = data.value
     .map((row) => {
       return props.exportableColumns
         .map((column) => {
-          let cell = row[column];
+          let cell = row[column]
           if (props.csvFormatColumns[column]) {
-            cell = props.csvFormatColumns[column](row);
+            cell = props.csvFormatColumns[column](row)
           }
-          return `"${cell}"`;
+          return `"${cell}"`
         })
-        .join(",");
+        .join(',')
     })
-    .join("\n");
+    .join('\n')
 
-  const csvContent = header + "\n" + rows;
+  const csvContent = `${header}\n${rows}`
 
-  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
-  const link = document.createElement("a");
-  const url = URL.createObjectURL(blob);
-  link.setAttribute("href", url);
+  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+  const link = document.createElement('a')
+  const url = URL.createObjectURL(blob)
+  link.setAttribute('href', url)
   link.setAttribute(
-    "download",
+    'download',
     `${props.id}_${new Date().toISOString().slice(0, 10)}_Page-${
       currentPage.value
     }_${perPage.value}-per-page_Order-by-${currentSort.value.field}-${
       currentSort.value.direction
     }.csv`,
-  );
-  link.style.visibility = "hidden";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
+  )
+  link.style.visibility = 'hidden'
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
 watch(perPage, () => {
-  getData();
-});
+  getData()
+})
 watch(currentSort, () => {
-  getData();
-});
+  getData()
+})
 watch(
   () => props.filtersData,
   () => {
-    getData();
+    getData()
   },
-);
+)
 watch(
   () => props.apiPath,
   () => {
-    getData();
+    getData()
   },
-);
-await getData();
+)
+await getData()
 onMounted(() => {
-  eventBus.on(`${props.id}PagesGoToPage`, getData);
-  eventBus.on(`${props.id}Reload`, getData);
-  eventBus.on(`${props.id}Refresh`, getData);
-});
+  eventBus.on(`${props.id}PagesGoToPage`, getData)
+  eventBus.on(`${props.id}Reload`, getData)
+  eventBus.on(`${props.id}Refresh`, getData)
+})
 onUnmounted(() => {
-  eventBus.off(`${props.id}PagesGoToPage`, getData);
-  eventBus.off(`${props.id}Reload`, getData);
-  eventBus.off(`${props.id}Refresh`, getData);
-});
+  eventBus.off(`${props.id}PagesGoToPage`, getData)
+  eventBus.off(`${props.id}Reload`, getData)
+  eventBus.off(`${props.id}Refresh`, getData)
+})
 </script>
+
 <template>
   <div>
     <div
       class="flex gap-2 justify-between items-center border-b border-fv-primary-600 mb-2 pb-2"
     >
-      <DefaultPaging :items="paging" v-if="paging" :id="`${props.id}Pages`" />
+      <DefaultPaging v-if="paging" :id="`${props.id}Pages`" :items="paging" />
       <button
+        v-if="exportableColumns.length && data.length"
         class="btn primary small"
         @click="exportToCsv"
-        v-if="exportableColumns.length && data.length"
       >
-        <ArrowDownTrayIcon class="w-4 h-4 mr-2"></ArrowDownTrayIcon
-        >{{ $t("global_table_export") }}
+        <ArrowDownTrayIcon class="w-4 h-4 mr-2" />{{ $t("global_table_export") }}
       </button>
       <DefaultInput
+        :id="`${id}PerPage`"
         v-model="perPage"
         :options="perPageOptions"
         :show-label="false"
-        :id="`${id}PerPage`"
         type="select"
         class="w-20"
       />
     </div>
 
     <div
-      class="relative overflow-x-auto border-fv-primary-600 sm:rounded-lg"
       v-if="data.length"
+      class="relative overflow-x-auto border-fv-primary-600 sm:rounded-lg"
     >
       <table
         class="w-full text-sm text-left text-fv-neutral-500 dark:text-fv-neutral-400"
@@ -215,6 +218,11 @@ onUnmounted(() => {
             <th
               v-for="(header, key) in headers"
               :key="key"
+              scope="col"
+              class="px-6 py-3 whitespace-nowrap"
+              :class="{
+                'cursor-pointer': sortables[key],
+              }"
               @click="
                 () => {
                   if (sortables[key]) {
@@ -222,16 +230,11 @@ onUnmounted(() => {
                   }
                 }
               "
-              scope="col"
-              class="px-6 py-3 whitespace-nowrap"
-              :class="{
-                'cursor-pointer': sortables[key],
-              }"
             >
               {{ header }}
-              <template v-if="sortables[key] && currentSort.field == key">
+              <template v-if="sortables[key] && currentSort.field === key">
                 <ArrowUpIcon
-                  v-if="currentSort.direction == 'desc'"
+                  v-if="currentSort.direction === 'desc'"
                   class="inline w-3 h-3 align-top mt-0.5"
                 />
                 <ArrowDownIcon v-else class="inline w-3 h-3 align-top mt-0.5" />
@@ -247,8 +250,12 @@ onUnmounted(() => {
           >
             <td v-for="(header, key) in headers" :key="key" class="px-6 py-4">
               <slot :name="key" :value="row">
-                <template v-if="row[key]">{{ row[key] }} </template>
-                <template v-else>{{ $t("global_table_empty_cell") }}</template>
+                <template v-if="row[key]">
+                  {{ row[key] }}
+                </template>
+                <template v-else>
+                  {{ $t("global_table_empty_cell") }}
+                </template>
               </slot>
             </td>
           </tr>

package/components/fws/FilterData.vue

@@ -1,149 +1,147 @@
 <script setup lang="ts">
-import useVuelidate from "@vuelidate/core";
-import { reactive } from "vue";
-import DefaultInput from "../ui/DefaultInput.vue";
-import { useTranslation } from "../../composables/translations";
-import { useEventBus } from "../../composables/event-bus";
-import { onMounted } from "vue";
-import DefaultDateSelection from "../ui/DefaultDateSelection.vue";
-import { onUnmounted, ref } from "vue";
-import type { FilterDataItems } from "../../types";
+import type { FilterDataItems } from '../../types'
+import useVuelidate from '@vuelidate/core'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useEventBus } from '../../composables/event-bus'
+import { useTranslation } from '../../composables/translations'
+import DefaultDateSelection from '../ui/DefaultDateSelection.vue'
+import DefaultInput from '../ui/DefaultInput.vue'
+
+const emit = defineEmits(['update:modelValue'])
+const hidden = ref<boolean>(false)
+const state = reactive<any>({ formData: {} })
+const rules: any = { formData: {} }
+const types = reactive<any>({})
+const translate = useTranslation()
+const fDynamicOptions = ref<any[]>([])
+const eventBus = useEventBus()
 
-const emit = defineEmits(["update:modelValue"]);
-const hidden = ref<boolean>(false);
-const state = reactive<any>({ formData: {} });
-const rules: any = { formData: {} };
-const types = reactive<any>({});
-const translate = useTranslation();
-const fDynamicOptions = ref<any[]>([]);
 const props = withDefaults(
   defineProps<{
-    data?: Array<Array<FilterDataItems>>;
-    css: string;
-    modelValue?: Record<string, unknown>;
+    data?: Array<Array<FilterDataItems>>
+    css: string
+    modelValue?: Record<string, unknown>
   }>(),
   {
     showHeaders: true,
     data: () => [],
   },
-);
-const removeUndefinedStrings = (
-  input: any,
-  undefinedValues: any[] = ["undefined"],
-) => {
-  const output: any = {};
+)
+function removeUndefinedStrings(input: any, undefinedValues: any[] = ['undefined']) {
+  const output: any = {}
 
   Object.keys(input).forEach((key) => {
     if (!undefinedValues.includes(input[key]) && input[key] !== undefined) {
-      if (!input[key]["$between"]) {
-        output[key] = input[key];
-      } else {
-        input[key]["$between"][0] =
-          input[key]["$between"][0] == "" || input[key]["$between"][0] == null
+      if (!input[key].$between) {
+        output[key] = input[key]
+      }
+      else {
+        input[key].$between[0]
+          = input[key].$between[0] === '' || input[key].$between[0] == null
             ? undefined
-            : input[key]["$between"][0];
-        input[key]["$between"][1] =
-          input[key]["$between"][1] == "" || input[key]["$between"][1] == null
+            : input[key].$between[0]
+        input[key].$between[1]
+          = input[key].$between[1] === '' || input[key].$between[1] == null
             ? undefined
-            : input[key]["$between"][1];
+            : input[key].$between[1]
         if (
-          input[key]["$between"][0] !== undefined ||
-          input[key]["$between"][1] !== undefined
+          input[key].$between[0] !== undefined
+          || input[key].$between[1] !== undefined
         ) {
-          output[key] = input[key];
+          output[key] = input[key]
         }
       }
     }
-  });
+  })
 
-  return output;
-};
+  return output
+}
 
-const formatValues = (obj: any) => {
+function formatValues(obj: any) {
   props.data.forEach((group) => {
     group.forEach((f) => {
       if (f.formats && f.formats[f.type]) {
-        obj[f.uid] = f.formats[f.type](obj[f.uid]);
+        obj[f.uid] = f.formats[f.type](obj[f.uid])
       }
       if (f.formatRestValue) {
-        obj[f.uid] = f.formatRestValue(obj[f.uid]);
+        obj[f.uid] = f.formatRestValue(obj[f.uid])
       }
-    });
-  });
-  return removeUndefinedStrings(obj, ["undefined", ""]);
-};
+    })
+  })
+  return removeUndefinedStrings(obj, ['undefined', ''])
+}
 
-const updateForms = () => {
-  state.formData = {};
-  rules.formData = {};
+function updateForms() {
+  state.formData = {}
+  rules.formData = {}
   props.data.forEach((group) => {
     group.forEach((f) => {
-      state.formData[f.uid] =
-        typeof f.default == "object" && f.default
+      state.formData[f.uid]
+        = typeof f.default == 'object' && f.default
           ? JSON.parse(JSON.stringify(f.default))
-          : f.default;
+          : f.default
 
-      types[f.uid] = f.type;
+      types[f.uid] = f.type
 
       if (f.options && f.options.length) {
         f.options = f.options.map((status) => {
-          const [statusKey, statusValue] = status;
-          const translatedValue = translate(statusValue);
-          return [statusKey, translatedValue];
-        });
+          const [statusKey, statusValue] = status
+          const translatedValue = translate(statusValue)
+          return [statusKey, translatedValue]
+        })
       }
-      rules.formData[f.uid] = {};
-    });
-  });
-  emit("update:modelValue", formatValues({ ...state.formData }));
-};
-updateForms();
-const v$ = useVuelidate(rules, state);
+      rules.formData[f.uid] = {}
+    })
+  })
+  emit('update:modelValue', formatValues({ ...state.formData }))
+}
+updateForms()
+const v$ = useVuelidate(rules, state)
 
-const updateFormData = (data: any) => {
+function updateFormData(data: any) {
   data.forEach((d: any) => {
     if (d.uid) {
-      state.formData[d.uid] = d.value;
+      state.formData[d.uid] = d.value
     }
-  });
-  submitForm();
-};
-const submitForm = () => {
-  const formData = formatValues({ ...state.formData });
-  emit("update:modelValue", formData);
-  eventBus.emit("forceUpdateFilters", true);
-};
-const resetForm = () => {
-  updateForms();
-};
-const eventBus = useEventBus();
+  })
+  submitForm()
+}
+function submitForm() {
+  const formData = formatValues({ ...state.formData })
+  emit('update:modelValue', formData)
+  eventBus.emit('forceUpdateFilters', true)
+}
+function resetForm() {
+  updateForms()
+}
 onMounted(() => {
-  eventBus.on("resetFilters", resetForm);
-  eventBus.on("updateFilters", updateFormData);
-});
+  eventBus.on('resetFilters', resetForm)
+  eventBus.on('updateFilters', updateFormData)
+})
 onUnmounted(() => {
-  eventBus.off("resetFilters", resetForm);
-  eventBus.off("updateFilters", updateFormData);
-});
+  eventBus.off('resetFilters', resetForm)
+  eventBus.off('updateFilters', updateFormData)
+})
 </script>
+
 <template>
-  <form @submit.prevent="() => submitForm()" v-if="!hidden">
+  <form v-if="!hidden" @submit.prevent="() => submitForm()">
     <div :class="css">
       <div v-for="(g, i) in data" :key="`index_${i}`" class="relative">
         <template v-for="f in g" :key="f.uid">
           <template v-if="!f.isHidden">
             <DefaultInput
-              :type="f.type == 'autocomplete' ? 'text' : f.type"
-              :label="f.label"
-              :id="f.uid"
               v-if="
                 ['text', 'select', 'date', 'email', 'autocomplete'].includes(
                   f.type,
                 )
               "
-              :options="f.options ? f.options : [[]]"
+              :id="f.uid"
               v-model="state.formData[f.uid]"
-              :errorVuelidate="v$.formData[f.uid].$errors"
+              :type="f.type === 'autocomplete' ? 'text' : f.type"
+              :label="f.label"
+              :options="f.options ? f.options : [[]]"
+              :error-vuelidate="v$.formData[f.uid].$errors"
               class="mb-2"
               @focus="
                 () => {
@@ -164,11 +162,11 @@ onUnmounted(() => {
                   }
                 }
               "
-              @update:modelValue="
-                (v) => {
+              @update:model-value="
+                (v:any) => {
                   if (f.autocomplete && v.length >= 2) {
                     fDynamicOptions = [];
-                    f.autocomplete(v).then((r) => {
+                    f.autocomplete(v).then((r:any) => {
                       fDynamicOptions = r;
                     });
                   }
@@ -176,7 +174,7 @@ onUnmounted(() => {
               "
             >
               <div
-                v-if="f.type == 'autocomplete' && f.focused"
+                v-if="f.type === 'autocomplete' && f.focused"
                 class="absolute flex flex-col gap-2 p-2 bottom-0 translate-y-full inset-x-0 bg-fv-neutral-200 dark:bg-fv-neutral-800 border border-fv-neutral-700 z-10"
               >
                 <button
@@ -191,17 +189,17 @@ onUnmounted(() => {
                     }
                   "
                 >
-                  {{ o[1] }} <small v-if="o[0] != ''">({{ o[0] }})</small>
+                  {{ o[1] }} <small v-if="o[0] !== ''">({{ o[0] }})</small>
                 </button>
-              </div></DefaultInput
-            >
+              </div>
+            </DefaultInput>
 
             <DefaultDateSelection
+              v-if="f.type === 'range'"
               :id="f.uid"
+              v-model="state.formData[f.uid]"
               :label="f.label"
-              v-if="f.type === 'range'"
               mode="interval"
-              v-model="state.formData[f.uid]"
               class="mb-2"
             />
           </template>
@@ -229,7 +227,7 @@ onUnmounted(() => {
       </button>
     </div>
   </form>
-  <div class="flex justify-between mt-2 gap-x-2" v-else>
+  <div v-else class="flex justify-between mt-2 gap-x-2">
     <button
       type="button"
       class="btn defaults primary !w-full flex-1 !text-center !items-center"