@winchsa/ui 0.1.33 → 0.1.34

package/dist/components/table/DataTable.vue

@@ -0,0 +1,361 @@
+<script setup>
+import { VCol, VRow, VCardText, VDivider, VProgressCircular, VIcon, VSpacer, VDataTableServer } from "vuetify/components";
+import { useQuery } from "@tanstack/vue-query";
+import { useRoute, useRouter } from "vue-router";
+import { computed, reactive, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import AppCard from "../cards/AppCard.vue";
+import { responseAlert } from "../../utils/toaster";
+import { buildQueryString } from "../../utils/queryParams";
+import { client } from "../../utils/client";
+import { formatDate } from "../../utils/formatters";
+import { useTableFilters, usePagination } from "../../composables/useTableFilters";
+import { useIsMobile } from "../../composables/useIsMobile";
+import BaseButton from "../forms/BaseButton.vue";
+import AppSelect from "../forms/AppSelect.vue";
+import FilterGenerator from "./FilterGenerator.vue";
+import TablePagination from "./TablePagination.vue";
+const { t } = useI18n();
+const { showValidationAlert } = responseAlert();
+const route = useRoute();
+const router = useRouter();
+const pageSizeOptions = [
+  { value: 30, title: "30" },
+  { value: 60, title: "60" },
+  { value: 90, title: "90" },
+  { value: 120, title: "120" }
+];
+const props = defineProps({
+  headers: { type: Array, required: true, default: () => [] },
+  formFilters: { type: Array, required: false, default: () => [] },
+  url: { type: String, required: false, default: "" },
+  queryParams: { type: Object, required: false, default: () => ({}) },
+  enableButtons: { type: Boolean, required: false, default: false },
+  enableButtonsFilter: { type: Boolean, required: false, default: true },
+  enablePageSizeOptions: { type: Boolean, required: false, default: true },
+  enableActionButtons: { type: Boolean, required: false, default: true },
+  enableBaseButtons: { type: Boolean, required: false, default: true },
+  secondaryStyle: { type: Boolean, required: false },
+  replaceNullWithDash: { type: Boolean, required: false, default: true },
+  withoutQueryParams: { type: Boolean, required: false, default: false },
+  showSelect: { type: Boolean, required: false },
+  returnObject: { type: Boolean, required: false, default: false },
+  stickyActions: { type: Boolean, required: false, default: false }
+});
+const modelValue = defineModel({ type: Array, ...{ default: [] } });
+const { processedFormFilters, filters, urlQueryParams } = useTableFilters({
+  formFilters: computed(() => props.formFilters),
+  syncFiltersWithUrl: !props.withoutQueryParams
+});
+const { currentPage, itemsPerPage } = usePagination({
+  syncFiltersWithUrl: !props.withoutQueryParams,
+  defaultValues: {
+    pageSize: pageSizeOptions[0].value
+  }
+});
+const errors = reactive({ data: [] });
+const totals = ref({});
+const pagination = ref({
+  to: 1,
+  from: 1,
+  total: 1,
+  count: 1,
+  per_page: 1,
+  current_page: 1,
+  last_page: 1
+});
+const queryParamsString = computed(() => buildQueryString({
+  ...props.queryParams,
+  ...urlQueryParams.value,
+  page: currentPage.value,
+  pages_count: itemsPerPage.value
+}));
+const queryKey = computed(() => ["table-data", props.url, queryParamsString.value]);
+const { data, error: tableError, isLoading, refetch: refresh } = useQuery({
+  queryKey,
+  queryFn: async () => {
+    const response = await client.get(`${props.url}?${queryParamsString.value}`);
+    pagination.value = response.pagination;
+    totals.value = response.totals ?? {};
+    errors.data = [];
+    return response;
+  },
+  select: ({ data: data2, ...rest }) => {
+    return {
+      rows: props.replaceNullWithDash ? data2.map((item) => replaceItemNullWithDash(item)) : data2,
+      ...rest
+    };
+  }
+});
+function reset() {
+  const defaults = {};
+  processedFormFilters.value.forEach((filter) => {
+    defaults[filter.name] = null;
+  });
+  router.replace({ path: route.path, query: props.withoutQueryParams ? {} : props.queryParams }).finally(() => {
+    filters.value = defaults;
+    currentPage.value = 1;
+    itemsPerPage.value = pageSizeOptions[0].value;
+  });
+}
+function replaceItemNullWithDash(item) {
+  if (Array.isArray(item)) {
+    return item.map(replaceItemNullWithDash);
+  }
+  if (typeof item === "object") {
+    return Object.fromEntries(
+      Object.entries(item).map(([key, value]) => [
+        key,
+        value === null ? "-" : typeof value === "object" ? replaceItemNullWithDash(value) : value
+      ])
+    );
+  }
+  return item;
+}
+const hasFilters = computed(() => processedFormFilters.value.length > 0);
+const headers = computed(() => props.headers.map((header) => ({
+  ...header,
+  title: t(header.title),
+  sortable: false
+})));
+watch(tableError, (data2) => {
+  if (data2) {
+    errors.data = data2.response?._data?.status.errors_list;
+    showValidationAlert(data2);
+  }
+});
+defineExpose({
+  filterQueryString: queryParamsString,
+  isLoading,
+  filters,
+  refresh,
+  totals
+});
+</script>
+
+<template>
+  <section>
+    <VRow>
+      <VCol cols="12">
+        <AppCard
+          :style="{
+  overflow: useIsMobile().value ? 'auto !important' : 'inherit !important'
+}"
+          style="z-index: unset !important;"
+          :is-loading="isLoading && secondaryStyle"
+        >
+          <template v-if="enableButtons" #append>
+            <slot name="buttons" />
+          </template>
+          <!-- filters -->
+          <VCardText v-if="hasFilters" class="pt-0">
+            <slot name="filters">
+              <FilterGenerator
+                v-model="filters"
+                :forms="processedFormFilters"
+                :errors="errors.data"
+              />
+            </slot>
+          </VCardText>
+
+          <VDivider v-if="hasFilters" />
+
+          <!-- options and buttons -->
+          <VCardText
+            v-if="enablePageSizeOptions || enableActionButtons"
+            :class="['d-flex flex-wrap py-4 gap-4', {
+  'sticky-actions': stickyActions
+}]"
+          >
+            <!-- Page Size options -->
+            <div v-if="enablePageSizeOptions" class="me-3 d-flex gap-3">
+              <AppSelect
+                hide-details
+                :model-value="itemsPerPage"
+                :items="pageSizeOptions"
+                style="width: 6.25rem"
+                @update:model-value="val => itemsPerPage = Number(val)"
+              />
+            </div>
+
+            <VSpacer />
+
+            <!-- buttons -->
+            <div v-if="enableActionButtons" class="d-flex align-center table-buttons">
+              <slot name="action-buttons" />
+
+              <template v-if="enableBaseButtons">
+                <BaseButton
+                  size="38"
+                  color="secondary"
+                  class="ms-2"
+                  @click="reset"
+                >
+                  <VIcon
+                    icon="tabler-filter-x"
+                    size="22"
+                  />
+                </BaseButton>
+
+                <BaseButton
+                  size="38"
+                  color="secondary"
+                  class="ms-2"
+                  @click="refresh"
+                >
+                  <VIcon
+                    icon="tabler-refresh"
+                    size="22"
+                  />
+                </BaseButton>
+              </template>
+            </div>
+          </VCardText>
+
+          <VDivider v-if="enableButtonsFilter" :class="{
+  'sticky-divider': stickyActions
+}" />
+
+          <div :class="[!useIsMobile().value || 'overflow-auto app-h-fit', {
+  'secondary-table': secondaryStyle,
+  'responsive-table': useIsMobile().value
+}]">
+            <!-- table -->
+            <VDataTableServer
+              v-model="modelValue"
+              :class="{
+  'mt-5 px-5': secondaryStyle
+}"
+              :items="data?.rows"
+              :items-length="data?.pagination.total ?? 0"
+              :headers="headers"
+              :loading="isLoading"
+              :no-data-text="t('no_data')"
+              :fixed-header="useIsMobile().value"
+              :show-select="showSelect"
+              :return-object="returnObject"
+            >
+              <!-- columns -->
+              <template v-for="(_, name) in $slots" #[name]="slotProps">
+                <slot :name="name" v-bind="slotProps || {}" />
+              </template>
+
+              <template #item.index="{ index }">
+                {{ (data?.pagination.total ?? 0) - index - (data?.pagination.from ?? 0) + 1 }}
+              </template>
+
+              <template #item.created_at="{ item }">
+                <div class="d-flex text-pre-line">
+                  {{ formatDate(item.raw?.created_at) }}
+                </div>
+              </template>
+
+              <template #loader />
+
+              <!-- loading -->
+              <template #loading>
+                <div class="text-center">
+                  <VProgressCircular indeterminate />
+                </div>
+              </template>
+
+              <!-- pagination -->
+              <template #bottom>
+                <slot name="inside-bottom" :totals="data?.totals" />
+                <TablePagination v-model="currentPage" :pagination="pagination" />
+              </template>
+            </VDataTableServer>
+          </div>
+        </AppCard>
+      </VCol>
+    </VRow>
+  </section>
+</template>
+
+<style scoped>
+.sticky-actions {
+  position: sticky !important;
+  position: -webkit-sticky;
+  top: 75px;
+  z-index: 11 !important;
+  background-color: rgb(var(--v-theme-surface)) !important;
+}
+
+.sticky-divider {
+  position: sticky !important;
+  position: -webkit-sticky;
+  top: 146px;
+  z-index: 11 !important;
+}
+
+:deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
+:deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
+  border-bottom: 8px solid rgba(var(--v-table-divider)) !important;
+}
+
+:deep(.v-table__wrapper) {
+  overflow: inherit !important;
+}
+
+:deep(table) tr th {
+  position: sticky !important;
+  position: -webkit-sticky;
+  top: 70px;
+  z-index: 10;
+  padding-bottom: 0.75rem;
+  background-color: rgb(var(--v-theme-surface)) !important;
+}
+
+.sticky-actions ~ div :deep(table) tr th {
+  top: 146px !important;
+}
+
+.table-buttons .v-btn .v-btn__overlay {
+  display: none !important;
+}
+.table-buttons .v-btn:hover {
+  background-color: rgba(var(--v-theme-secondary), 0.82) !important;
+  color: rgb(var(--v-theme-on-secondary)) !important;
+}
+
+.secondary-table :deep(table) {
+  width: 100% !important;
+  border-collapse: collapse !important;
+  border-spacing: 0 !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  border-collapse: collapse !important;
+  font-size: 13px !important;
+}
+.secondary-table :deep(table) th {
+  padding: 14px 16px !important;
+  height: fit-content !important;
+  top: 80px !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  background-color: rgb(var(--v-theme-gray-200)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.secondary-table :deep(table) td {
+  padding: 16px !important;
+  height: auto !important;
+  border: 1px solid rgb(var(--v-theme-silver)) !important;
+  color: rgb(var(--v-theme-on-surface)) !important;
+}
+.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > td,
+.secondary-table :deep(.v-table) .v-table__wrapper > table > tbody > tr > th {
+  border-bottom: 1px solid rgba(var(--v-theme-silver)) !important;
+}
+
+.sticky-actions ~ div .secondary-table :deep(table) th {
+  top: 156px !important;
+}
+
+:deep(.v-overlay) {
+  z-index: 500 !important;
+}
+
+.responsive-table :deep(table) th {
+  position: unset !important;
+  top: 0 !important;
+  z-index: 10 !important;
+}
+</style>

package/dist/components/table/DataTable.vue.d.ts

@@ -0,0 +1,70 @@
+import type { FormFilter, Header, ErrorResponseFiled, Pagination, ReplaceableItem } from '../../types';
+type __VLS_Props = {
+    headers: Header[];
+    formFilters?: FormFilter[];
+    url?: string;
+    queryParams?: Record<string, string>;
+    enableButtons?: boolean;
+    enableButtonsFilter?: boolean;
+    enablePageSizeOptions?: boolean;
+    enableActionButtons?: boolean;
+    enableBaseButtons?: boolean;
+    secondaryStyle?: boolean;
+    replaceNullWithDash?: boolean;
+    withoutQueryParams?: boolean;
+    showSelect?: boolean;
+    returnObject?: boolean;
+    stickyActions?: boolean;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_19: {}, __VLS_27: {}, __VLS_59: {}, __VLS_101: string | number, __VLS_102: any, __VLS_115: {
+    totals: {
+        [key: string]: number;
+    } | undefined;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_101>]?: (props: typeof __VLS_102) => any;
+} & {
+    buttons?: (props: typeof __VLS_19) => any;
+} & {
+    filters?: (props: typeof __VLS_27) => any;
+} & {
+    'action-buttons'?: (props: typeof __VLS_59) => any;
+} & {
+    'inside-bottom'?: (props: typeof __VLS_115) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    filterQueryString: import("vue").ComputedRef<string>;
+    isLoading: import("vue").Ref<boolean, boolean> | import("vue").Ref<false, false> | import("vue").Ref<true, true>;
+    filters: import("vue").Ref<Record<string, string | number | string[] | [] | number[] | object[] | (string | number | null)[] | null | undefined>, Record<string, string | number | string[] | [] | number[] | object[] | (string | number | null)[] | null | undefined>>;
+    refresh: (options?: import("@tanstack/vue-query").RefetchOptions) => Promise<import("@tanstack/vue-query").QueryObserverResult<{
+        status: {
+            success: boolean;
+            code: number;
+            message: string;
+            error_key: string;
+            errors_list?: ErrorResponseFiled[];
+        };
+        totals?: {
+            [key: string]: number;
+        };
+        pagination: Pagination;
+        rows: ReplaceableItem[];
+    }, Error>>;
+    totals: import("vue").Ref<Record<string, number>, Record<string, number>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/table/EditableDataTable.d.vue.ts

@@ -0,0 +1,21 @@
+import type { EditableDataTableItem, ErrorResponseFiled } from '../../types';
+type __VLS_Props = {
+    headers: EditableDataTableItem[];
+    items: [];
+    errors?: ErrorResponseFiled[];
+    loading?: boolean;
+    module?: string;
+};
+declare var __VLS_39: string | number, __VLS_40: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};