una-nuxt-module 1.0.2

package/dist/runtime/classes/FetchClient.d.ts

@@ -0,0 +1,61 @@
+import type { IFetchParams } from "#imports";
+import type { $Fetch } from "ofetch";
+/**
+ * Clase que gestiona las peticiones HTTP .
+ * Proporciona una forma sencilla de realizar llamadas a APIs con configuración opcional.
+ */
+export declare class FetchClient {
+    /** Instancia de $fetch utilizada para realizar las peticiones HTTP. */
+    private $fetch;
+    /**
+     * Constructor de la clase `FetchClient`.
+     *
+     * @param fetcher Instancia de `$fetch` que se utilizará para realizar las peticiones.
+     */
+    constructor(fetcher: $Fetch);
+    /**
+     * Realiza una llamada HTTP .
+     *
+     * @template T Tipo de los datos esperados en la respuesta.
+     * @param params Objeto que contiene los parámetros de la petición (método, URL, opciones, etc.).
+     * @returns Una promesa que resuelve con los datos obtenidos de la respuesta.
+     */
+    /**
+     * Realiza una llamada HTTP  y devuelve los datos de la respuesta en un formato esperado.
+     *
+     * @template T Tipo de los datos esperados en la respuesta.
+     * @param params Objeto que contiene los parámetros necesarios para realizar la petición.
+     * @param params.method Método HTTP de la petición (GET, POST, PUT, DELETE, etc.). Por defecto, se utiliza `GET`.
+     * @param params.url URL o endpoint al cual se realizará la petición.
+     * @param params.fetchOptions Opciones adicionales para configurar la petición, como encabezados, credenciales o parámetros.
+     * @returns Una promesa que resuelve con los datos obtenidos de la respuesta, envueltos en el composable [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data).
+     *
+     * @example
+     * // Ejemplo de uso para obtener datos con un GET:
+     *   class UserModule extends FetchClient {
+     *
+     *   async getAll() {
+     *     return await this.call<IRequestResponse<IUser>>({
+     *       url: "/api/users",
+     *       fetchOptions: {
+     *         headers: { Authorization: 'Bearer token' },
+     *         query: { page: 1 },
+     *       },
+     *     });
+     *   }
+     *
+     *  * @example
+     * // Ejemplo de uso para enviar datos con un POST:
+     * class UserModule extends FetchClient {
+     *
+     *   async create(user: IUser) {
+     *     return await this.call<IRequestResponse<IUser>>({
+     *       method: 'POST',
+     *       url: "/api/user/create",
+     *       fetchOptions:  { body: JSON.stringify(user) },
+     *     });
+     *   }
+     * }
+     */
+    call<T>({ method, url, body, fetchOptions, }: IFetchParams): Promise<any>;
+}

package/dist/runtime/classes/FetchClient.js

@@ -0,0 +1,71 @@
+import { ERequestMethod, useAsyncData } from "#imports";
+export class FetchClient {
+  /** Instancia de $fetch utilizada para realizar las peticiones HTTP. */
+  $fetch;
+  /**
+   * Constructor de la clase `FetchClient`.
+   *
+   * @param fetcher Instancia de `$fetch` que se utilizará para realizar las peticiones.
+   */
+  constructor(fetcher) {
+    this.$fetch = fetcher;
+  }
+  /**
+   * Realiza una llamada HTTP .
+   *
+   * @template T Tipo de los datos esperados en la respuesta.
+   * @param params Objeto que contiene los parámetros de la petición (método, URL, opciones, etc.).
+   * @returns Una promesa que resuelve con los datos obtenidos de la respuesta.
+   */
+  /**
+   * Realiza una llamada HTTP  y devuelve los datos de la respuesta en un formato esperado.
+   *
+   * @template T Tipo de los datos esperados en la respuesta.
+   * @param params Objeto que contiene los parámetros necesarios para realizar la petición.
+   * @param params.method Método HTTP de la petición (GET, POST, PUT, DELETE, etc.). Por defecto, se utiliza `GET`.
+   * @param params.url URL o endpoint al cual se realizará la petición.
+   * @param params.fetchOptions Opciones adicionales para configurar la petición, como encabezados, credenciales o parámetros.
+   * @returns Una promesa que resuelve con los datos obtenidos de la respuesta, envueltos en el composable [`useAsyncData`](https://nuxt.com/docs/api/composables/use-async-data).
+   *
+   * @example
+   * // Ejemplo de uso para obtener datos con un GET:
+   *   class UserModule extends FetchClient {
+   *
+   *   async getAll() {
+   *     return await this.call<IRequestResponse<IUser>>({
+   *       url: "/api/users",
+   *       fetchOptions: {
+   *         headers: { Authorization: 'Bearer token' },
+   *         query: { page: 1 },
+   *       },
+   *     });
+   *   }
+   *
+   *  * @example
+   * // Ejemplo de uso para enviar datos con un POST:
+   * class UserModule extends FetchClient {
+   *
+   *   async create(user: IUser) {
+   *     return await this.call<IRequestResponse<IUser>>({
+   *       method: 'POST',
+   *       url: "/api/user/create",
+   *       fetchOptions:  { body: JSON.stringify(user) },
+   *     });
+   *   }
+   * }
+   */
+  async call({
+    method = ERequestMethod.GET,
+    url,
+    body,
+    fetchOptions
+  }) {
+    return useAsyncData(() => {
+      return this.$fetch(url, {
+        method,
+        body,
+        ...fetchOptions
+      });
+    });
+  }
+}

package/dist/runtime/components/layout/footer/Footer.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <v-footer color="gray100" rounded class="mx-12">
+      <v-row justify="center">
+        <v-col cols="6">
+          <p class="text-caption text-center">
+            {{ $t("Components.Footer.Info[0]") }}
+          </p>
+          <p class="text-caption text-center">
+            {{ $t("Components.Footer.Info[1]") }}
+          </p>
+        </v-col>
+      </v-row>
+    </v-footer>
+  </div>
+</template>

package/dist/runtime/components/layout/header/BtnExtendMenu.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-btn
+    :icon="extendMenuIcon"
+    @click.stop="handleClick"
+    class="btnExtendMenu"
+    density="compact"
+    rounded="lg"
+    size="large"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useUiCustomizerStore } from "../../../stores/UiCustomizer";
+
+const uiCustomizer = useUiCustomizerStore();
+
+const extendMenuIcon = computed(() => {
+  return uiCustomizer.isSidebarMini ? "mdi-menu-close" : "mdi-menu-open";
+});
+
+const handleClick = () => {
+  uiCustomizer.SET_IS_SIDEBAR_MINI(!uiCustomizer.isSidebarMini);
+};
+</script>
+
+<style>
+.btnExtendMenu{color:rgb(var(--v-theme-darkText),.75)}
+</style>

package/dist/runtime/components/layout/header/Header.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-app-bar elevation="0" height="60" color="containerBg">
+    <BtnExtendMenu />
+    <v-spacer />
+    <HeaderMenu />
+  </v-app-bar>
+</template>

package/dist/runtime/components/layout/header/HeaderMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <v-menu :close-on-content-click="false" offset="8, 0">
+    <template v-slot:activator="{ props }">
+      <v-btn
+        append-icon="mdi-chevron-down"
+        class="profileBtn"
+        color="secondary"
+        rounded="lg"
+        v-bind="props"
+        variant="tonal"
+      >
+        <div class="d-flex align-center">
+          <v-avatar class="mr-sm-2 mr-0 py-2">
+            <img :src="photoUrl" />
+          </v-avatar>
+          <span class="text-subtitle-1 mb-0 d-sm-block d-none">
+            {{ fullName }}
+          </span>
+        </div>
+      </v-btn>
+    </template>
+    <v-sheet rounded="md" width="340">
+      <HeaderMenuTabs />
+    </v-sheet>
+  </v-menu>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from "vue";
+import { useAuthStore } from "#imports";
+
+const authStore = useAuthStore();
+
+const photoUrl = ref("");
+const fullName = ref("");
+
+onMounted(() => {
+  photoUrl.value = authStore.user?.photoUrl as string;
+  fullName.value = authStore.user?.fullName as string;
+});
+</script>

package/dist/runtime/components/layout/header/HeaderMenuTabs.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <div class="d-flex align-center pa-5">
+      <v-avatar size="50" class="mr-4">
+        <img :src="photoUrl" width="50" alt="User" />
+      </v-avatar>
+      <div>
+        <span class="text-h6 mb-0">{{ fullName }}</span>
+        <p class="text-caption mb-0">{{ email }}</p>
+        <p class="text-caption mb-0">{{ role }}</p>
+      </div>
+    </div>
+    <v-tabs v-model="tabSelected" color="primary" grow>
+      <v-tab value="tabProfile" prepend-icon="mdi-account" class="v-text-field">
+        Perfil
+      </v-tab>
+      <v-tab value="tabConfig" prepend-icon="mdi-cog" class="v-text-field">
+        Configuración
+      </v-tab>
+    </v-tabs>
+    <perfect-scrollbar>
+      <v-window v-model="tabSelected">
+        <v-window-item value="tabProfile">
+          <v-list class="py-0" aria-label="profile list" aria-busy="true">
+            <v-list-item
+              @click.stop="navigateTo('/profile')"
+              color="primary"
+              prepend-icon="mdi-account"
+              rounded="0"
+              value="View Profile"
+            >
+              <v-list-item-title class="text-subtitle-2">
+                Ver Perfil
+              </v-list-item-title>
+            </v-list-item>
+
+            <v-list-item
+              @click.stop="authStore.logout()"
+              color="primary"
+              prepend-icon="mdi-logout"
+              rounded="0"
+            >
+              <v-list-item-title class="text-subtitle-2">
+                {{ $t("Actions.CloseSession") }}
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-window-item>
+
+        <v-window-item value="tabConfig">
+          <v-list class="py-0" aria-label="profile list" aria-busy="true">
+            <v-list-item
+              @click.stop="navigateTo('/configuration/preferences')"
+              color="primary"
+              prepend-icon="mdi-account-cog"
+              rounded="0"
+              value="Preferencias"
+            >
+              <v-list-item-title class="text-subtitle-2">
+                Preferencias de la cuenta
+              </v-list-item-title>
+            </v-list-item>
+
+            <v-list-item
+              @click.stop="navigateTo('/configuration/support')"
+              color="primary"
+              prepend-icon="mdi-help-circle"
+              rounded="0"
+              value="Soporte"
+            >
+              <v-list-item-title class="text-subtitle-2">
+                Soporte
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-window-item>
+      </v-window>
+    </perfect-scrollbar>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { navigateTo } from "#imports";
+import { ref, onMounted } from "vue";
+import { useAuthStore } from "#imports";
+
+const authStore = useAuthStore();
+
+const tabSelected = ref(null);
+
+const photoUrl = ref("");
+const fullName = ref("");
+const email = ref("");
+const role = ref("");
+
+onMounted(() => {
+  photoUrl.value = authStore.user?.photoUrl as string;
+  fullName.value = authStore.user?.fullName as string;
+  email.value = authStore.user?.email as string;
+  role.value = authStore.user?.mainRole as string;
+});
+</script>

package/dist/runtime/components/layout/sidebar/NavCollapse.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-list-group no-action>
+    <!-- El combo padre -->
+    <template v-slot:activator="{ props }">
+      <v-list-item
+        v-bind="props"
+        :value="item?.title"
+        rounded
+        class="mb-1"
+        color="primary"
+        :prepend-icon="item?.icon"
+      >
+        <v-list-item-title class="mr-auto">{{ item?.title }}</v-list-item-title>
+
+        <v-list-item-subtitle
+          v-if="item?.description"
+          class="text-caption mt-n1 hide-menu"
+        >
+          {{ item.description }}
+        </v-list-item-subtitle>
+      </v-list-item>
+    </template>
+
+    <!-- Se renderizan los elementos hijos -->
+    <template v-for="(subitem, i) in item?.children" :key="i">
+      <NavCollapse
+        v-if="subitem.children"
+        :item="subitem"
+        :level="(props?.level) as number + 1"
+      />
+      <NavItem v-else :item="subitem" :level="(props?.level) as number + 1" />
+    </template>
+  </v-list-group>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({ item: Object, level: Number });
+</script>

package/dist/runtime/components/layout/sidebar/NavGroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <v-list-subheader color="lightText" class="smallCap text-subtitle-2">
+    {{ props.item?.header }}
+  </v-list-subheader>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({ item: Object });
+</script>

package/dist/runtime/components/layout/sidebar/NavItem.vue

@@ -0,0 +1,25 @@
+<template>
+  <v-list-item
+    :to="item?.to"
+    rounded
+    color="primary"
+    :disabled="item?.disabled"
+  >
+    <template v-slot:prepend>
+      <v-icon v-if="props.item?.icon" :icon="props.item.icon" />
+    </template>
+
+    <v-list-item-title>{{ item?.title }}</v-list-item-title>
+
+    <v-list-item-subtitle
+      v-if="item?.description"
+      class="text-caption mt-n1 hide-menu"
+    >
+      {{ item.description }}
+    </v-list-item-subtitle>
+  </v-list-item>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({ item: Object, level: Number });
+</script>

package/dist/runtime/components/layout/sidebar/SideBar.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <v-navigation-drawer
+      :rail="uiCustomizer.isSidebarMini"
+      @mouseleave="isHoveringSideBar = false"
+      @mouseover="isHoveringSideBar = true"
+      app
+      border="darkText"
+      class="leftSidebar"
+      color="containerBg"
+      elevation="0"
+      expand-on-hover
+      left
+      mobile-breakpoint="lg"
+      rail-width="60"
+      v-model="uiCustomizer.drawSidebar"
+    >
+      <template v-slot:prepend>
+        <div class="d-flex align-center justify-center" style="height: 60px">
+          <TopSideBarLogo v-model:open-sidebar="isHoveringSideBar" />
+        </div>
+        <v-divider :thickness="1" />
+      </template>
+
+      <perfect-scrollbar class="scrollnavbar">
+        <v-list
+          aria-busy="true"
+          aria-label="menu list"
+          v-model:opened="openedMenus"
+        >
+          <template v-for="(item, i) in menuItems" :key="i">
+            <NavGroup :item v-if="item?.header" :key="item.title" />
+
+            <v-divider class="my-3" v-else-if="item?.divider" />
+
+            <NavCollapse
+              :item
+              :level="0"
+              class="leftPadding"
+              v-else-if="item?.children"
+            />
+
+            <NavItem :item v-else />
+          </template>
+        </v-list>
+      </perfect-scrollbar>
+
+      <template v-slot:append>
+        <SideBarFooter v-model:open-sidebar="isHoveringSideBar" />
+      </template>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, shallowRef, watch } from "vue";
+import { storeToRefs } from "pinia";
+import { useAuthorization } from "../../../composables/useAuthorization";
+import { useUiCustomizerStore } from "../../../stores/UiCustomizer";
+
+const authorization = useAuthorization();
+const uiCustomizer = useUiCustomizerStore();
+
+const isHoveringSideBar = ref(false);
+const openedMenus = ref([]);
+
+const menuItems = shallowRef(authorization.getAuthorizedPaths());
+
+const uiCustomizerRef = storeToRefs(uiCustomizer);
+
+watch(uiCustomizerRef.isSidebarMini, (newValue, oldValue) => {
+  if (newValue) openedMenus.value = [];
+});
+</script>

package/dist/runtime/components/layout/sidebar/SideBarFooter.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="SideBarFooter pb-4">
+    <v-spacer />
+
+    <v-divider :thickness="1" />
+
+    <v-list aria-busy="true" aria-label="sidebar footer">
+      <!-- Toogle Theme Switcher -->
+      <v-list-item rounded>
+        <template v-slot:prepend>
+          <v-icon :icon="toggleThemeIcon" />
+        </template>
+        <template v-slot:append>
+          <v-switch
+            :false-value="ETheme.LIGHT"
+            :true-value="ETheme.DARK"
+            color="primary"
+            hide-details
+            v-if="!uiCustomizer.isSidebarMini || openSidebar"
+            v-model="currentTheme"
+          />
+        </template>
+        <v-list-item-title>{{ toggleThemeTitle }}</v-list-item-title>
+      </v-list-item>
+
+      <!-- Close Session Button -->
+      <v-list-item rounded @click="authStore.logout()">
+        <template v-slot:prepend>
+          <v-icon icon="mdi-logout" />
+        </template>
+        <v-list-item-title> {{ $t("Actions.CloseSession") }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+import { ETheme } from "../../../enums";
+import { useAuthStore, useI18n } from "#imports";
+import { useUiCustomizerStore } from "../../../stores/UiCustomizer";
+
+import { useTheme } from "vuetify";
+
+const { t } = useI18n();
+const theme = useTheme();
+const authStore = useAuthStore();
+const uiCustomizer = useUiCustomizerStore();
+
+const openSidebar = defineModel<boolean>("openSidebar", { required: true });
+
+const currentTheme = ref(ETheme.LIGHT);
+
+const toggleThemeTitle = computed(() => {
+  return currentTheme.value == ETheme.DARK
+    ? t("Components.SideBar.SideBarFooter.DarkTheme")
+    : t("Components.SideBar.SideBarFooter.LightTheme");
+});
+
+const toggleThemeIcon = computed(() => {
+  return currentTheme.value == ETheme.DARK
+    ? "mdi-moon-waning-crescent"
+    : "mdi-white-balance-sunny";
+});
+
+watch(currentTheme, (newValue, oldValue) => {
+  theme.global.name.value = newValue;
+});
+</script>

package/dist/runtime/components/layout/sidebar/TopSideBarLogo.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="d-flex justify-center">
+    <NuxtLink to="/" style="text-decoration: none; color: inherit">
+      <img
+        v-if="!uiCustomizer.isSidebarMini || openSidebar"
+        alt=""
+        height="40"
+        src="/images/logos/UNA_LogoType_LogoMark_Red.png"
+      />
+      <img
+        v-else
+        alt=""
+        height="25"
+        src="/images/logos/UNA_LogoMark_Black.png"
+      />
+    </NuxtLink>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUiCustomizerStore } from "../../../stores/UiCustomizer";
+
+const uiCustomizer = useUiCustomizerStore();
+const openSidebar = defineModel<boolean>("openSidebar", { required: true });
+</script>

package/dist/runtime/components/shared/authorization/AuthorizedRenderer.vue

@@ -0,0 +1,41 @@
+<template>
+  <template v-if="renderContent()">
+    <slot />
+    <div>{{ props }}</div>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useAuthorization } from "../../../composables/useAuthorization";
+import type { TAuthorization } from "../../../types";
+
+const props = defineProps({
+  /** Renderiza si el usuario no tiene la autorización en el recurso. */
+  renderIfUnauthorized: { type: Boolean, required: false, default: false },
+  /** Autorización a validar en el recurso. */
+  authorization: { type: String as PropType<TAuthorization>, required: true },
+  /** Recurso a validar. */
+  resource: { type: String, required: false },
+});
+
+/**
+ * Método que valida si el contenido se debe renderizar.
+ */
+const renderContent = (): boolean => {
+  // Si el recurso no esta definido por props toma la ruta actual como recurso
+  const resource = props.resource ?? useAuthorization().currentResource.value;
+
+  // Valida si el usuario tiene la autorización en el recurso
+  const hasAuthorization = useAuthorization().hasAuthorizationIn({
+    authorization: props.authorization,
+    resource,
+  });
+
+  if (props.renderIfUnauthorized) {
+    return !hasAuthorization;
+  }
+
+  return hasAuthorization;
+};
+</script>

package/dist/runtime/components/shared/buttons/BtnBack.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-btn
+    :text="$t('Actions.Back')"
+    :to="props.to"
+    class="text-none text-subtitle-1"
+    color="primary"
+    variant="outlined"
+  >
+    <template v-slot:prepend>
+      <v-icon icon="mdi-arrow-left" start size="x-large" class="mx-0" />
+    </template>
+  </v-btn>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+  to: { type: String, required: true },
+});
+</script>

package/dist/runtime/components/shared/buttons/BtnCancel.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-btn
+    :text="$t('Actions.Cancel')"
+    @click="emit('on-cancel')"
+    color="primary"
+    elevation="0"
+    variant="text"
+  />
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["on-cancel"]);
+</script>

package/dist/runtime/components/shared/buttons/BtnConfirm.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-btn
+    :text="$t('Actions.Confirm')"
+    @click="emit('on-confirm')"
+    color="primary"
+    elevation="1"
+    prepend-icon="mdi-check"
+    variant="flat"
+  />
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits(["on-confirm"]);
+</script>