una-nuxt-module 1.0.2

package/dist/runtime/components/shared/forms/FormBuilder/FormBuilder.vue

@@ -0,0 +1,213 @@
+<template>
+  <!-- #region TABS OR STEPPER VARIANTS -->
+  <template v-if="formConfig.tabs">
+    <TabsBuilder
+      v-if="formConfig.variant == 'TABS'"
+      v-model:form-config="formConfig"
+      v-model:tab-selected="tabSelected"
+    />
+    <SteppersBuilder
+      v-if="formConfig.variant == 'STEPPERS'"
+      v-model:form-config="formConfig"
+      v-model:tab-selected="tabSelected"
+    />
+
+    <v-window v-model="tabSelected">
+      <v-window-item
+        v-for="(tab, t) in formConfig.tabs"
+        :key="tab.value"
+        :value="tab.value"
+        reverse-transition="slide-x-transition"
+        transition="slide-x-transition"
+      >
+        <v-form
+          @submit.prevent="handleSubmitMultipleForms"
+          :ref="(element: TFormDomElement) => asignFormRef(tab.value, element)"
+          class="mt-2 mx-3"
+        >
+          <template v-for="(row, r) in tab.rows" :key="r">
+            <v-row v-if="row.section">
+              <v-label
+                :text="row.section.title"
+                class="font-weight-bold text-secondary mb-6"
+              />
+              <!-- <v-divider thickness="1" class="mb-6 mt-2" /> -->
+            </v-row>
+
+            <v-row class="mt-n3">
+              <template v-for="(field, f) in row.fields" :key="f">
+                <v-col :cols="field.size">
+                  <slot
+                    v-if="field.type == EFormField.SLOT"
+                    :name="`field.${field.key}`"
+                    :field="castToFieldSlot(field)"
+                  >
+                    <FieldSlotMissed :field="castToFieldSlot(field)" />
+                  </slot>
+                  <FieldBuilder v-else v-model:form-state="formState" :field />
+                </v-col>
+              </template>
+            </v-row>
+          </template>
+
+          <FormSubmitSection
+            :formMode="props.formMode"
+            :showBtnNextTab="tab.value < tabsCount"
+            :showBtnPrevTab="tab.value > 1"
+            @on-cancel="emit('on-cancel')"
+            @on-prev-tab="prevTab"
+            class="mt-8"
+          />
+        </v-form>
+      </v-window-item>
+    </v-window>
+  </template>
+  <!-- #endregion -->
+
+  <!-- #region SINGLE FORM VARIANT -->
+  <template v-else>
+    <v-form
+      @submit.prevent="handleSubmitSingleForm"
+      ref="singleForm"
+      class="mt-8"
+    >
+      <template v-for="(row, r) in formConfig.rows" :key="r">
+        <v-row v-if="row.section">
+          <v-label
+            :text="row.section.title"
+            class="font-weight-bold text-secondary mb-6"
+          />
+          <!-- <v-divider thickness="1" class="mb-6 mt-2" /> -->
+        </v-row>
+
+        <v-row class="mt-n3">
+          <template v-for="(field, f) in row.fields" :key="f">
+            <v-col :cols="field.size">
+              <slot
+                v-if="field.type == EFormField.SLOT"
+                :name="`field.${field.key}`"
+                :field="castToFieldSlot(field)"
+              >
+                <FieldSlotMissed :field="castToFieldSlot(field)" />
+              </slot>
+              <FieldBuilder v-else :field v-model:form-state="formState" />
+            </v-col>
+          </template>
+        </v-row>
+      </template>
+
+      <FormSubmitSection
+        :formMode="props.formMode"
+        @on-cancel="emit('on-cancel')"
+      />
+    </v-form>
+  </template>
+  <!-- #endregion -->
+</template>
+
+<script lang="ts" setup generic="T">
+import {
+  computed,
+  ref,
+  type ComponentPublicInstance,
+  type PropType,
+} from "vue";
+import type {
+  IFormBuilderConfig,
+  IFormBuilderFieldSlot,
+  IFormBuilderTab,
+  TFormMode,
+} from "../../../../types";
+import { EFormField } from "../../../../enums";
+
+const formState = defineModel<T>("formState", { required: true });
+const formConfig = defineModel<IFormBuilderConfig>("formConfig", {
+  required: true,
+});
+
+const emit = defineEmits(["on-submit", "on-cancel"]);
+
+const props = defineProps({
+  formMode: { type: String as PropType<TFormMode>, required: true },
+  wrapper: { type: String, required: true },
+});
+
+const tabsForms = ref({});
+const singleForm = ref(null);
+const tabSelected = ref(1);
+
+type TFormDomElement = Element | ComponentPublicInstance | null;
+const asignFormRef = (key: number, element: TFormDomElement) => {
+  // @ts-ignore
+  tabsForms.value[key] = element;
+};
+
+// #region HANDLE TABS LOGIC
+const tabsCount = computed(() => {
+  return Number(formConfig.value.tabs?.length);
+});
+
+const changeTab = (newTab: number) => {
+  tabSelected.value = newTab;
+};
+
+const prevTab = () => {
+  changeTab(tabSelected.value - 1);
+};
+
+const nextTab = () => {
+  changeTab(tabSelected.value + 1);
+};
+// #endregion
+
+// #region HANDLE SUBMIT FORMS
+const handleSubmitSingleForm = async () => {
+  // @ts-ignore
+  const { valid } = await singleForm.value?.validate();
+  if (valid) {
+    emit("on-submit");
+  }
+};
+
+const handleSubmitMultipleForms = async () => {
+  if (!(await isCurrentFormValid())) {
+    return;
+  }
+
+  if (!isCurrentFormTheLast()) {
+    nextTab();
+    return;
+  }
+
+  if (await allFormsValid()) {
+    emit("on-submit");
+  }
+};
+
+const isCurrentFormTheLast = () => {
+  return tabSelected.value == tabsCount.value;
+};
+
+const isCurrentFormValid = async () => {
+  // @ts-ignore
+  const { valid } = await tabsForms.value[tabSelected.value]?.validate();
+  return valid;
+};
+
+const allFormsValid = async () => {
+  for (const tab of formConfig.value.tabs as IFormBuilderTab[]) {
+    // @ts-ignore
+    const { valid } = await tabsForms.value[tab.value]?.validate();
+    if (!valid) {
+      changeTab(tab.value);
+      return false;
+    }
+  }
+  return true;
+};
+// #endregion
+
+const castToFieldSlot = (field: Object) => {
+  return field as IFormBuilderFieldSlot;
+};
+</script>

package/dist/runtime/components/shared/forms/FormBuilder/SteppersBuilder.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-stepper
+    :alt-labels="formConfig.stepper?.LabelLocation == 'BOTTOM'"
+    class="my-8"
+    elevation="1"
+    v-model="tabSelected"
+  >
+    <v-stepper-header>
+      <template v-for="(tab, t) in formConfig.tabs" :key="t">
+        <v-stepper-item
+          :complete="tab.value < tabSelected"
+          :title="tab.title"
+          :value="tab.value"
+          color="primary"
+          v-model="tabSelected"
+        />
+        <v-divider v-if="tab.value != formConfig.tabs?.length" />
+      </template>
+    </v-stepper-header>
+  </v-stepper>
+</template>
+
+<script lang="ts" setup>
+import type { IFormBuilderConfig } from "../../../../types";
+
+const formConfig = defineModel<IFormBuilderConfig>("formConfig", {
+  required: true,
+});
+const tabSelected = defineModel<number>("tabSelected", {
+  required: true,
+});
+</script>

package/dist/runtime/components/shared/forms/FormBuilder/TabsBuilder.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-row class="my-8 mx-0">
+    <v-tabs color="primary" grow v-model="tabSelected">
+      <template v-for="(tab, t) in formConfig.tabs" :key="t">
+        <v-tab
+          :class="tabSelected == tab.value ? 'activeTab' : ''"
+          :text="tab.title"
+          :value="tab.value"
+          color="primary"
+          variant="plain"
+        />
+      </template>
+    </v-tabs>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import type { IFormBuilderConfig } from "../../../../types";
+
+const formConfig = defineModel<IFormBuilderConfig>("formConfig", {
+  required: true,
+});
+const tabSelected = defineModel<number>("tabSelected", {
+  required: true,
+});
+</script>
+
+<style>
+.activeTab{background-color:rgb(var(--v-theme-borderLight))}
+</style>

package/dist/runtime/components/shared/forms/FormDialogWrapper.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-dialog v-model="openDialog" persistent :class="width">
+    <v-card elevation="2" rounded="lg">
+      <div class="d-flex align-center py-2 ml-10 mr-6">
+        <!-- Título del formulario -->
+        <span class="text-h6 text-primary font-weight-bold">
+          {{ props.title }}
+        </span>
+
+        <v-spacer />
+
+        <!-- Botón cancelar-->
+        <v-btn
+          @click="emit('on-cancel')"
+          elevation="0"
+          icon="mdi-close"
+          style="opacity: 0.8"
+          variant="text"
+        />
+      </div>
+
+      <v-divider :thickness="1" />
+
+      <!-- Slot para el formulario -->
+      <div class="mb-8 mx-13">
+        <slot name="form" wrapper="dialog" />
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+
+type TFormWidth = "w-50" | "w-75" | "w-100";
+
+const openDialog = defineModel<boolean>("openDialog", { required: true });
+
+const emit = defineEmits(["on-cancel"]);
+
+const props = defineProps({
+  title: { type: String, required: true },
+  width: {
+    type: String as PropType<TFormWidth>,
+    default: "w-50",
+  },
+});
+</script>

package/dist/runtime/components/shared/forms/FormPageWrapper.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <!-- Título del formulario -->
+    <div class="pa-3 text-center">
+      <span class="text-body-1 text-uppercase text-primary font-weight-bold">
+        {{ props.title }}
+      </span>
+    </div>
+
+    <!-- Slot para el formulario -->
+    <slot name="form" wrapper="page" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  title: { type: String, required: true },
+});
+</script>

package/dist/runtime/components/shared/forms/FormSubmitSection.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-row align-content="end" class="mx-0 mb-0">
+    <!-- Btn Prev Tab -->
+    <v-btn
+      @click="emit('on-prev-tab')"
+      color="primary"
+      elevation="0"
+      text="Anterior"
+      v-if="props.showBtnPrevTab"
+      variant="text"
+    />
+
+    <v-spacer />
+
+    <!-- Btn Cancel -->
+    <BtnCancel @on-cancel="emit('on-cancel')" class="mr-6" />
+
+    <!-- Btn Submit or Next Tab -->
+    <v-btn
+      :text="textForBtnSubmit"
+      align-self="end"
+      color="primary"
+      density="comfortable"
+      elevation="0"
+      size="large"
+      type="submit"
+      variant="flat"
+    />
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { EFormMode } from "../../../enums/EFormMode";
+
+const emit = defineEmits(["on-cancel", "on-prev-tab"]);
+
+const props = defineProps({
+  formMode: { type: String, required: true },
+  showBtnPrevTab: { type: Boolean, default: false },
+  showBtnNextTab: { type: Boolean, default: false },
+});
+
+const textForBtnSubmit = computed(() => {
+  if (props.showBtnNextTab) return "Siguiente";
+  return props.formMode == EFormMode.CREATE ? "Crear" : "Editar";
+});
+</script>

package/dist/runtime/components/shared/navigation/BreadCrumbs.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-row class="mt-n2">
+    <v-breadcrumbs :items="props.breadcrumbs">
+      <template v-slot:divider>
+        <v-icon icon="mdi-chevron-right" />
+      </template>
+    </v-breadcrumbs>
+  </v-row>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+
+const props = defineProps({
+  breadcrumbs: {
+    type: Array as PropType<Array<any>>,
+    required: true,
+    default: [],
+  },
+});
+</script>

package/dist/runtime/components/shared/tables/CustomTable.vue

@@ -0,0 +1,261 @@
+<template>
+  <v-data-table
+    :headers="getHeaders"
+    :items
+    :items-per-page="itemsPerPage.value"
+    :loading="appStatusStore.makingRequest"
+    :page
+    :sort-by="sortBy"
+    :sticky
+    @update:options="emit('on-refresh-table')"
+    @update:sortBy="() => {}"
+    class="CustomTable"
+    v-model:search="textToSearch"
+  >
+    <!-- Slot para headers de la tabla -->
+    <template
+      v-for="header in getHeaders"
+      #[`header.${header.key}`]="{ column }"
+    >
+      <slot :name="`header.${header.key}`" :column>
+        <v-hover>
+          <template v-slot:default="{ isHovering, props }">
+            <span
+              v-bind="props"
+              class="cursor-pointer"
+              @click="changeSort(column.key as string)"
+            >
+              {{ column.title }}
+              <v-icon
+                v-if="column.sortable"
+                :style="{ opacity: getOpacityForSortIcon(column.key as string, isHovering)}"
+                :icon="getSortIcon(column.key as string, isHovering)"
+                class="ml-2"
+              />
+            </span>
+          </template>
+        </v-hover>
+      </slot>
+    </template>
+
+    <!-- Slot para columnas de la tabla  -->
+    <template v-for="header in headers" #[`item.${header.key}`]="{ item }">
+      <slot
+        v-if="header.key !== KEY_FOR_ACTIONS_COLUMN"
+        :name="`item.${header.key}`"
+        :item
+      >
+        {{ getPropertyToRender(item, header.key) }}
+      </slot>
+    </template>
+
+    <!-- Slot para columnas de acciones de edicion (editar/eliminar) -->
+    <template #item.actions="{ item }" v-if="renderActionsColumn">
+      <div>
+        <BtnEdit
+          @on-edit="emit('on-edit', item)"
+          :validateAuthorization="props.validateAuthorizationForEdit"
+        />
+        <BtnDelete
+          @on-delete="emit('on-delete', getIdToDelete(item))"
+          :validateAuthorization="props.validateAuthorizationForDelete"
+        />
+      </div>
+    </template>
+
+    <!-- Slot para el footer de la tabla (sección de paginación) -->
+    <template #bottom>
+      <div class="text-center pt-2 d-flex align-center">
+        <ItemsPerPageLabel />
+        <div class="d-flex">
+          <ItemsPerPageCombo
+            :items="itemsPerPageOptions"
+            v-model:items-per-page="itemsPerPage"
+          />
+        </div>
+        <v-spacer />
+        <PaginationInfo :paginationInfo />
+        <PageSelector :totalPages v-model:page="page" />
+      </div>
+    </template>
+
+    <!-- Slot para tabla cargando -->
+    <template #loading>
+      <v-skeleton-loader type="table-row@10" />
+    </template>
+
+    <!-- Slot para cuando la tabla no contiene datos -->
+    <template #no-data>
+      <NoDataMessage v-model:text-to-search="textToSearch" />
+    </template>
+  </v-data-table>
+</template>
+
+<script lang="ts" setup generic="T extends Object">
+import {
+  PAGINATION_FIRST_PAGE,
+  KEY_FOR_ACTIONS_COLUMN,
+  PAGINATION_OPTIONS,
+} from "../../../constants";
+import { ref, computed, watch, type ComputedRef, type PropType } from "vue";
+import { EAuthorization } from "../../../enums";
+import { useAppStatusStore } from "../../../stores/appStatus";
+import { useAuthorization } from "../../../composables/useAuthorization";
+import type { IItemsPerPage, ISortFilter, ITableHeader } from "../../../types";
+
+const authorization = useAuthorization();
+const appStatusStore = useAppStatusStore();
+
+const emit = defineEmits(["on-refresh-table", "on-delete", "on-edit"]);
+
+const page = defineModel<number>("page", { required: true });
+const totalPages = defineModel<number>("totalPages", { required: true });
+const textToSearch = defineModel<string>("textToSearch", { required: true });
+const totalElements = defineModel<number>("totalElements", { required: true });
+const itemsPerPage = defineModel<IItemsPerPage>("itemsPerPage", {
+  required: true,
+});
+const sortOrder = defineModel<ISortFilter>("sortOrder", {
+  required: false,
+});
+
+const props = defineProps({
+  headers: {
+    type: Array as PropType<Array<ITableHeader>>,
+    required: true,
+    default: [],
+  },
+  idKey: { type: String, required: false, default: "id" },
+  items: { type: Array as PropType<Array<T>>, required: true, default: [] },
+  sticky: { type: Boolean, required: false, default: true },
+  validateAuthorizationForEdit: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  validateAuthorizationForDelete: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+});
+
+const sortBy = ref([]);
+
+const renderActionsColumn = computed(() => {
+  return props.headers.some((header) => header.key === KEY_FOR_ACTIONS_COLUMN);
+});
+
+const getHeaders = computed(() => {
+  const canEdit = props.validateAuthorizationForEdit
+    ? authorization.hasAuthorization(EAuthorization.EDIT)
+    : true;
+  const canDelete = props.validateAuthorizationForDelete
+    ? authorization.hasAuthorization(EAuthorization.DELETE)
+    : true;
+
+  if (canEdit || canDelete) return props.headers;
+
+  return props.headers.filter(
+    (header) => header.key !== KEY_FOR_ACTIONS_COLUMN
+  );
+});
+
+const itemsPerPageOptions: ComputedRef<IItemsPerPage[]> = computed(() => {
+  let options = PAGINATION_OPTIONS;
+  options[PAGINATION_OPTIONS.length - 1].value = totalElements.value;
+  return options;
+});
+
+const paginationInfo = computed(() => {
+  return {
+    page: page.value,
+    totalPages: totalPages.value,
+    totalElements: totalElements.value,
+  };
+});
+
+function getIdToDelete(item: T) {
+  if (item.hasOwnProperty(props.idKey)) {
+    return item[props.idKey as keyof T];
+  }
+  return null;
+}
+
+function getNestedProperty(object: any, path: string) {
+  try {
+    return path.split(".").reduce((current, key) => current[key], object);
+  } catch (err) {
+    console.log(err);
+    return null;
+  }
+}
+
+function getPropertyToRender(item: T, key: string) {
+  const isNestedKey = key.split(".").length > 1;
+  return isNestedKey ? getNestedProperty(item, key) : item[key as keyof T];
+}
+
+function changeSort(key: string) {
+  if (!sortOrder.value) {
+    return;
+  }
+
+  const currentSort = sortOrder.value[key];
+  switch (currentSort) {
+    case false:
+      sortOrder.value[key] = "desc";
+      break;
+    case "desc":
+      sortOrder.value[key] = "asc";
+      break;
+    case "asc":
+      sortOrder.value[key] = false;
+      break;
+    default:
+      break;
+  }
+
+  emit("on-refresh-table");
+}
+
+function getSortIcon(key: string, isHovering: boolean | null) {
+  if (!sortOrder.value) {
+    return;
+  }
+
+  const currentSort = sortOrder.value[key];
+  switch (currentSort) {
+    case false:
+      return isHovering ? "mdi-sort-descending" : "";
+    case "desc":
+      return "mdi-sort-descending";
+    case "asc":
+      return "mdi-sort-ascending";
+    default:
+      break;
+  }
+}
+
+function getOpacityForSortIcon(key: string, isHovering: boolean | null) {
+  if (!sortOrder.value) {
+    return;
+  }
+
+  const currentSort = sortOrder.value[key];
+  if (!currentSort && isHovering) {
+    return 0.4;
+  }
+  return 1;
+}
+
+// Cuando en la paginación se actualiza los elementos por página se debe resetear la página a la primera
+watch(itemsPerPage, () => {
+  page.value = PAGINATION_FIRST_PAGE;
+});
+
+// Cuando en la paginación se actualiza la página se debe refresca la tabla
+watch(page, () => {
+  emit("on-refresh-table");
+});
+</script>

package/dist/runtime/components/shared/tables/CustomTableHeader.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="pb-5 d-flex align-center justify-between">
+    <!-- Botón nuevo registro -->
+    <BtnAdd @on-create="emit('on-create')" />
+
+    <!-- Botón exportar tabla -->
+    <BtnExport @on-export="emit('on-export')" />
+
+    <v-spacer />
+
+    <!-- Barra de búsqueda de la tabla -->
+    <TableSearchBar
+      v-model:text-to-search="textToSearch"
+      @on-search="() => {}"
+    />
+
+    <!-- Slot para sección de filtros -->
+    <slot name="filter" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["on-create", "on-export"]);
+const textToSearch = defineModel<string>("textToSearch", { required: true });
+</script>