juan.zapata/golscontrol-frontend-v1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: juan.zapata:dc26cc27da258180920ee36c912783c9626f777e
Branches Tags
juan.zapata:main
juan.zapata:locations
juan.zapata:activos
juan.zapata:qa
juan.zapata:CTL-51-DEVELOP
juan.zapata:activos-depreciacion
juan.zapata:activos-fijos
juan.zapata:feature-comercial-module-ts
juan.zapata:develop
juan.zapata:feature-comercial-module
juan.zapata:dockerconfig
juan.zapata:courses
juan.zapata:feature-warehouse-model
juan.zapata:vacations
juan.zapata:documents
juan.zapata:managerh
..
compare: juan.zapata:31862e7cf56232db64d1e29615ed1bbb60c40441
Branches Tags
juan.zapata:locations
juan.zapata:activos
juan.zapata:qa
juan.zapata:CTL-51-DEVELOP
juan.zapata:activos-depreciacion
juan.zapata:activos-fijos
juan.zapata:feature-comercial-module-ts
juan.zapata:develop
juan.zapata:feature-comercial-module
juan.zapata:dockerconfig
juan.zapata:courses
juan.zapata:feature-warehouse-model
juan.zapata:vacations
juan.zapata:documents
juan.zapata:main
juan.zapata:managerh

No commits in common. "dc26cc27da258180920ee36c912783c9626f777e" and "31862e7cf56232db64d1e29615ed1bbb60c40441" have entirely different histories.
dc26cc27da ... 31862e7cf5

96 changed files with 2356 additions and 2656 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

@ -12,7 +12,7 @@ dist
dist-ssr dist-ssr
*.local *.local
.env .env
colors.css colors.json
notes.md notes.md
# Editor directories and files # Editor directories and files

14
auth.html Normal file
View File

@ -0,0 +1,14 @@
<!doctype html>
<html id="main-page" lang="es">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/auth.js"></script>
</body>
</html>

34
colors.css.example
View File

@ -1,34 +0,0 @@
@theme {
--color-page: #fff;
--color-page-t: #000;
--color-page-d: #292524;
--color-page-dt: #fff;
--color-primary: #374151;
--color-primary-t: #fff;
--color-primary-d: #1c1917;
--color-primary-dt: #fff;
--color-secondary: #3b82f6;
--color-secondary-t: #fff;
--color-secondary-d: #312e81;
--color-secondary-dt: #fff;
--color-primary-info: #06b6d4;
--color-primary-info-t: #fff;
--color-primary-info-d: #06b6d4;
--color-primary-info-dt: #fff;
--color-secondary-info: #06b6d4;
--color-secondary-info-t: #fff;
--color-secondary-info-d: #06b6d4;
--color-secondary-info-dt: #fff;
--color-success: #22c55e;
--color-success-t: #fff;
--color-success-d: #22c55e;
--color-success-dt: #fff;
--color-danger: #ef4444;
--color-danger-t: #fff;
--color-danger-d: #ef4444;
--color-danger-dt: #fecaca;
--color-warning: #eab308;
--color-warning-t: #fff;
--color-warning-d: #eab308;
--color-warning-dt: #fff;
}

34
colors.json.example Normal file
View File

@ -0,0 +1,34 @@
{
"page":"#fff",
"page-t":"#000",
"page-d":"#292524",
"page-dt":"#fff",
"primary":"#374151",
"primary-t":"#fff",
"primary-d":"#1c1917",
"primary-dt":"#fff",
"secondary":"#3b82f6",
"secondary-t":"#fff",
"secondary-d":"#312e81",
"secondary-dt":"#fff",
"primary-info":"#06b6d4",
"primary-info-t":"#fff",
"primary-info-d":"#06b6d4",
"primary-info-dt":"#fff",
"secondary-info":"#06b6d4",
"secondary-info-t":"#fff",
"secondary-info-d":"#06b6d4",
"secondary-info-dt":"#fff",
"success":"#22c55e",
"success-t":"#fff",
"success-d":"#22c55e",
"success-dt":"#fff",
"danger":"#ef4444",
"danger-t":"#fff",
"danger-d":"#ef4444",
"danger-dt":"#fecaca",
"warning":"#eab308",
"warning-t":"#fff",
"warning-d":"#eab308",
"warning-dt":"#fff"
}

18
docker-compose.yml
View File

@ -1,18 +0,0 @@
services:
gols-frontend-v1:
build:
context: .
dockerfile: dockerfile
ports:
- "${APP_PORT}:5173"
volumes:
- .:/var/www/gols-frontend-v1
- frontend-v1:/var/www/gols-frontend-v1/node_modules
networks:
- gols-network
volumes:
frontend-v1:
driver: local
networks:
gols-network:
driver: bridge

17
dockerfile
View File

@ -1,17 +0,0 @@
FROM node:22-alpine AS build
WORKDIR /var/www/gols-frontend-v1
COPY install.sh /usr/local/bin/install.sh
RUN chmod +x /usr/local/bin/install.sh
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
ENTRYPOINT ["sh","/usr/local/bin/install.sh"]
CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

12
install.sh
View File

@ -1,13 +1,9 @@
#! /bin/bash #! /bin/bash
if [ ! -f .env ]; then npm install
cp .env.example .env cp .env.example .env
fi cp colors.json.example colors.json
if [ ! -f colors.json ]; then npm run build
cp colors.json.example colors.json
fi
exec "$@"
echo "Done!" echo "Done!"

2813
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

25
package.json
View File

@ -2,7 +2,7 @@
"name": "notsoweb.frontend", "name": "notsoweb.frontend",
"copyright": "Notsoweb Software Inc.", "copyright": "Notsoweb Software Inc.",
"private": true, "private": true,
"version": "0.9.12", "version": "0.9.5",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
@ -10,23 +10,22 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/postcss": "^4.0.9",
"@tailwindcss/vite": "^4.0.9",
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",
"axios": "^1.8.1", "axios": "^1.7.8",
"laravel-echo": "^2.0.2", "laravel-echo": "^1.17.1",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"pinia": "^3.0.1", "pinia": "^2.2.8",
"pusher-js": "^8.4.0", "postcss": "^8.4.49",
"tailwindcss": "^4.0", "pusher-js": "^8.4.0-rc2",
"tailwindcss": "^3.4.15",
"toastr": "^2.1.4", "toastr": "^2.1.4",
"uuid": "^11.1.0", "uuid": "^11.0.3",
"vite": "^6.2.0", "vite": "^6.0.1",
"vue": "^3.5.13", "vue": "^3.5.13",
"vue-i18n": "^11.1.1", "vue-i18n": "^10.0.5",
"vue-multiselect": "^3.2.0", "vue-multiselect": "^3.1.0",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"ziggy-js": "^2.5.2" "ziggy-js": "^2.4.1"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",

3
postcss.config.js
View File

@ -1,5 +1,6 @@
export default { export default {
plugins: { plugins: {
"@tailwindcss/postcss": {}, tailwindcss: {},
autoprefixer: {},
}, },
} }

50
src/auth.js Normal file
View File

@ -0,0 +1,50 @@
import './css/base.css'
import axios from 'axios';
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import { useRoute, ZiggyVue } from 'ziggy-js';
import { i18n, lang } from '@/lang/i18n.js';
import router from '@Router/Auth'
import Notify from '@Plugins/Notify'
import TailwindScreen from '@Plugins/TailwindScreen'
import { defineApp, pagePlugin, reloadApp } from '@Services/Page';
import Auth from '@Holos/Layout/Auth.vue'
// Configurar axios
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
// Crear instancias globales
window.Lang = lang;
window.Notify = new Notify();
window.TwScreen = new TailwindScreen();
async function boot() {
try {
const routes = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/routes');
const app = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/app');
// Iniciar rutas
window.Ziggy = routes.data;
window.route = useRoute();
defineApp(app.data);
} catch (error) {
console.error(error);
alert('Failed to load routes');
}
reloadApp();
createApp(Auth)
.use(createPinia())
.use(i18n)
.use(pagePlugin)
.use(router)
.use(ZiggyVue)
.mount('#app');
}
// Iniciar aplicación
boot();

23
src/components/App.vue
View File

@ -1,23 +0,0 @@
<script setup>
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import useLoader from '@Stores/Loader';
import { hasToken } from '@Services/Api';
/** Definidores */
const router = useRouter();
const loader = useLoader();
/** Ciclos */
onMounted(() => {
if(!hasToken()) {
return router.push({ name: 'auth.index' })
}
loader.boot()
})
</script>
<template>
<router-view />
</template>

2
src/components/Holos/ActionSection.vue
View File

@ -14,7 +14,7 @@ import SectionTitle from './SectionTitle.vue';
</SectionTitle> </SectionTitle>
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-sm"> <div class="px-4 py-5 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-lg">
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>

5
src/components/Holos/Breadcrumb/Container.vue
View File

@ -1,5 +0,0 @@
<template>
<nav class="flex items-center py-1 gap-0.5">
<slot />
</nav>
</template>

55
src/components/Holos/Breadcrumb/Item.vue
View File

@ -1,55 +0,0 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue'
import { useRouter } from 'vue-router';
/** Definidores */
const router = useRouter();
/** Propiedades */
const props = defineProps({
name: String,
icon: String,
route: Object,
active: Boolean,
})
/** Métodos */
const handleClick = () => {
if (props.active) {
return;
}
router.push(props.route);
}
</script>
<template>
<button
v-if="!active"
:to="route"
class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1 cursor-pointer"
@click="handleClick"
>
<GoogleIcon
:name="icon"
class="text-sm"
/>
<span class="text-sm font-semibold hover:underline" v-text="name" />
</button>
<span v-if="!active" class="inline-block text-sm select-none pointer-events-none opacity-50">
<GoogleIcon
name="arrow_forward_ios"
class="text-xs font-semibold"
/>
</span>
<div
v-if="active"
class="inline-flex items-center gap-1.5 text-sm duration-300 ease-in p-1"
>
<GoogleIcon
:name="icon"
class="text-sm"
/>
<span class="font-semibold text-sm underline" v-text="name" />
</div>
</template>

13
src/components/Holos/Breadcrumb/Separator.vue
View File

@ -1,13 +0,0 @@
<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue'
</script>
<template>
<span class="inline-block mx-1 text-sm select-none pointer-events-none opacity-50">
<GoogleIcon
name="arrow_forward_ios"
class="text-xs font-semibold"
/>
</span>
</template>

2
src/components/Holos/Button/Icon.vue
View File

@ -19,7 +19,7 @@ const props = defineProps({
<template> <template>
<button <button
class="flex justify-center items-center h-7 w-7 rounded-sm btn-icon" class="flex justify-center items-center h-7 w-7 rounded-md btn-icon"
:title="title" :title="title"
:type="type" :type="type"
> >

2
src/components/Holos/Card/Indicator.vue
View File

@ -14,7 +14,7 @@ defineProps({
<template> <template>
<RouterLink <RouterLink
class="relative flex-1 flex flex-col gap-2 p-4 rounded-sm -md bg-gray-200 dark:bg-transparent dark:border" class="relative flex-1 flex flex-col gap-2 p-4 rounded -md bg-gray-200 dark:bg-transparent dark:border"
:to="to" :to="to"
> >
<label class="text-base font-semibold tracking-wider"> <label class="text-base font-semibold tracking-wider">

2
src/components/Holos/Checkbox.vue
View File

@ -31,6 +31,6 @@ const proxyChecked = computed({
v-model="proxyChecked" v-model="proxyChecked"
type="checkbox" type="checkbox"
:value="value" :value="value"
class="rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:ring-indigo-500" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
> >
</template> </template>

4
src/components/Holos/ConfirmsPassword.vue
View File

@ -1,9 +1,9 @@
<script setup> <script setup>
import { ref, nextTick } from 'vue'; import { ref, nextTick } from 'vue';
import { useForm } from '@Services/Api'; import { api, useForm } from '@Services/Api';
import Input from './Form/Input.vue'; import Input from './Form/Input.vue';
import DialogModal from './Modal/Elements/Base.vue'; import DialogModal from './DialogModal.vue';
import PrimaryButton from './Button/Primary.vue'; import PrimaryButton from './Button/Primary.vue';
import SecondaryButton from './Button/Secondary.vue'; import SecondaryButton from './Button/Secondary.vue';

46
src/components/Holos/DialogModal.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup>
import Modal from './Modal.vue';
const emit = defineEmits(['close']);
defineProps({
show: {
type: Boolean,
default: false,
},
maxWidth: {
type: String,
default: '2xl',
},
closeable: {
type: Boolean,
default: true,
},
});
const close = () => {
emit('close');
};
</script>
<template>
<Modal
:show="show"
:max-width="maxWidth"
:closeable="closeable"
@close="close"
>
<div class="p-4">
<div class="text-lg font-medium">
<slot name="title" />
</div>
<div class="mt-4 text-sm">
<slot name="content" />
</div>
</div>
<div class="flex flex-row justify-center p-4 text-end">
<slot name="footer" />
</div>
</Modal>
</template>

2
src/components/Holos/Dropdown.vue
View File

@ -95,7 +95,7 @@ const alignmentClasses = computed(() => {
style="display: none;" style="display: none;"
@click="open = false" @click="open = false"
> >
<div class="rounded-sm ring-1 ring-black/5" :class="contentClasses"> <div class="rounded-md ring-1 ring-black ring-opacity-5" :class="contentClasses">
<slot name="content" /> <slot name="content" />
</div> </div>
</div> </div>

2
src/components/Holos/DropdownLink.vue
View File

@ -6,7 +6,7 @@ defineProps({
to: String to: String
}); });
const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-hidden focus:bg-gray-100 cursor-pointer transition'; const style = 'block px-4 py-2 text-sm leading-5 hover:bg-secondary/80 dark:hover:bg-secondary-d/80 focus:outline-none focus:bg-gray-100 transition';
</script> </script>
<template> <template>

2
src/components/Holos/Form/Checkbox.vue
View File

@ -28,7 +28,7 @@ const vModel = computed({
<template> <template>
<div class="relative w-full h-8"> <div class="relative w-full h-8">
<input <input
class="appearance-none rounded-sm bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer" class="appearance-none rounded-lg bg-primary cursor-pointer h-full w-full checked:bg-secondary dark:checked:bg-secondary-d transition-all duration-200 peer"
type="checkbox" type="checkbox"
:id="uuid" :id="uuid"
v-model="vModel" v-model="vModel"

4
src/components/Holos/Form/InputWithIcon.vue
View File

@ -65,7 +65,7 @@ onMounted(() => {
<template> <template>
<div class="mb-4"> <div class="mb-4">
<div class="flex items-center border-2 py-2 px-3 rounded-sm"> <div class="flex items-center border-2 py-2 px-3 rounded-2xl">
<GoogleIcon <GoogleIcon
:name="icon" :name="icon"
/> />
@ -73,7 +73,7 @@ onMounted(() => {
ref="input" ref="input"
v-model="value" v-model="value"
v-bind="$attrs" v-bind="$attrs"
class="pl-2 w-full outline-hidden border-none bg-transparent" class="pl-2 w-full outline-none border-none bg-transparent"
:class="{ 'cursor-not-allowed': disabled }" :class="{ 'cursor-not-allowed': disabled }"
:disabled="disabled" :disabled="disabled"
:id="autoId" :id="autoId"

4
src/components/Holos/Form/Todo/ItemWithForm.vue
View File

@ -111,7 +111,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="rounded-sm border border-primary dark:border-primary-d p-2"> <div class="rounded border border-primary dark:border-primary-d p-2">
<p>{{ title }}</p> <p>{{ title }}</p>
<div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md"> <div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
<Selectable <Selectable
@ -138,7 +138,7 @@ onMounted(() => {
</div> </div>
<div class="col-span-2 space-y-2 "> <div class="col-span-2 space-y-2 ">
<template v-for="item, index in values"> <template v-for="item, index in values">
<div class="relative rounded-sm border border-primary/50"> <div class="relative rounded border border-primary/50">
<div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50"> <div class="grid gap-2 grid-cols-2 w-full items-center p-2 dark:bg-primary-d/50">
<Input <Input
v-model="item.item.name" v-model="item.item.name"

4
src/components/Holos/FormSection.vue
View File

@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<form @submit.prevent="$emit('submitted')"> <form @submit.prevent="$emit('submitted')">
<div <div
class="p-4 sm:p-6 shadow-sm dark:shadow-xs dark:shadow-white/50" class="p-4 sm:p-6 shadow dark:shadow-sm dark:shadow-white/50"
:class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'" :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'"
> >
<div class="grid grid-cols-6 gap-6"> <div class="grid grid-cols-6 gap-6">
@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
</div> </div>
</div> </div>
<div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow-sm dark:shadow-xs dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md"> <div v-if="hasActions" class="flex items-center justify-end px-4 py-3 text-end sm:px-6 shadow dark:shadow-sm dark:shadow-white/50 sm:rounded-bl-md sm:rounded-br-md">
<slot name="actions" /> <slot name="actions" />
</div> </div>
</form> </form>

2
src/components/Holos/Inbox.vue
View File

@ -68,7 +68,7 @@ const search = url => props.searcherCtl.searchWithInboxPagination(url);
</button> </button>
<div <div
@click.away="filterMessages = false" @click.away="filterMessages = false"
class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded-sm z-10" class="bg-gray-200 shadow-2xl absolute left-0 top-6 w-32 py-2 text-gray-900 rounded z-10"
:class="{'hidden':!filterMessages}" :class="{'hidden':!filterMessages}"
> >
<button <button

2
src/components/Holos/Inbox/Item.vue
View File

@ -29,7 +29,7 @@ const selected = computed(() => {
<template> <template>
<li <li
class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300" class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
:class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}" :class="{'bg-secondary text-secondary-t':selected, 'bg-primary/50 text-primary-t hover:bg-secondary/50 hover:text-secondary-t':!selected}"
> >
<div class="pr-2"> <div class="pr-2">

2
src/components/Holos/Inbox/ItemTitle.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<li <li
class="flex items-center rounded-sm border-y px-2 min-h-[35px] transition duration-300" class="flex items-center rounded-lg border-y px-2 min-h-[35px] transition duration-300"
> >
<div class="pl-5 w-full flex items-center justify-between cursor-pointer"> <div class="pl-5 w-full flex items-center justify-between cursor-pointer">
<div class="flex items-center font-semibold"> <div class="flex items-center font-semibold">

8
src/components/Holos/Inbox/Menu/Item.vue
View File

@ -19,10 +19,10 @@ const props = defineProps({
/** Propiedades computadas */ /** Propiedades computadas */
const classes = computed(() => { const classes = computed(() => {
let status = route().current(props.to, props.toParam) let status = route().current(props.to, props.toParam)
? 'bg-secondary/30' ? 'bg-secondary bg-opacity-30'
: 'border-transparent hover:bg-secondary/30'; : 'border-transparent hover:bg-secondary hover:bg-opacity-30';
return ` text-primary flex items-center justify-between py-1.5 px-4 rounded-sm cursor-pointer ${status} transition` return ` text-primary flex items-center justify-between py-1.5 px-4 rounded cursor-pointer ${status} transition`
}); });
</script> </script>
@ -43,7 +43,7 @@ const classes = computed(() => {
{{ title }} {{ title }}
</span> </span>
</span> </span>
<span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-sm"> <span v-if="counter > 0" class="bg-primary text-gray-100 font-bold px-2 py-0.5 text-xs rounded-lg">
{{ counter }} {{ counter }}
</span> </span>
</RouterLink> </RouterLink>

2
src/components/Holos/Layout/App.vue
View File

@ -49,7 +49,7 @@ onMounted(() => {
/> />
</div> </div>
<main class="flex h-full justify-center md:p-2"> <main class="flex h-full justify-center md:p-2">
<div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-xs md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 pb-4 md:rounded-sm overflow-y-auto overflow-x-auto transition-colors duration-300"> <div class="mt-14 md:mt-0 w-full shadow-lg dark:shadow-sm md:dark:shadow-white h-[calc(100vh-4.5rem)] px-2 md:rounded-lg overflow-y-auto overflow-x-auto transition-colors duration-300">
<slot /> <slot />
</div> </div>
</main> </main>

2
src/components/Holos/Layout/Auth.vue
View File

@ -47,7 +47,7 @@ onMounted(() => {
/> />
</div> </div>
<main class="bg-white/10 w-full backdrop-blur-xs text-white px-4 py-4 rounded-sm max-w-80"> <main class="bg-white/10 w-full backdrop-blur-sm text-white px-4 py-4 rounded-md max-w-80">
<RouterView /> <RouterView />
</main> </main>

4
src/components/Holos/Layout/TermsLayout.vue
View File

@ -47,11 +47,11 @@ onMounted(() => {
/> />
</div> </div>
<main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-xs text-white px-4 py-8 rounded-md"> <main class="bg-white/10 w-full mx-auto sm:max-w-2xl backdrop-blur-sm text-white px-4 py-8 rounded-md">
<slot /> <slot />
</main> </main>
<footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-xs text-white transition-colors duration-global"> <footer class="absolute bottom-0 flex w-full h-8 px-4 items-center justify-between bg-primary dark:bg-primary-d backdrop-blur-sm text-white transition-colors duration-global">
<div> <div>
<span> <span>
&copy;{{ APP_COPYRIGHT }} &copy;{{ APP_COPYRIGHT }}

10
src/components/Holos/Logo.vue
View File

@ -1,18 +1,12 @@
<script setup> <script setup>
import { hasToken } from '@Services/Api';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
/** Definidores */ /** Definidores */
const router = useRouter(); const router = useRouter();
/** Métodos */ /** Métodos */
const home = () => { const home = () => router.push(view({ name: 'index' }));
if(hasToken()) {
router.push({ name: 'dashboard.index' });
} else {
location.replace('/');
}
}
</script> </script>
<template> <template>
<div <div

102
src/components/Holos/Modal.vue Normal file
View File

@ -0,0 +1,102 @@
<script setup>
import { computed, onMounted, onUnmounted, watch } from 'vue';
/** Eventos */
const emit = defineEmits([
'close'
]);
/** Propiedades */
const props = defineProps({
closeable: {
default: true,
type: Boolean
},
maxWidth: {
default: '2xl',
type: String
},
show: {
default: false,
type: Boolean
},
});
/** Métodos */
const close = () => {
if (props.closeable) {
emit('close');
}
};
const closeOnEscape = (e) => {
if (e.key === 'Escape' && props.show) {
close();
}
};
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
}[props.maxWidth];
});
/** Observadores */
watch(() => props.show, () => {
if (props.show) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
/** Ciclos */
onMounted(() => document.addEventListener('keydown', closeOnEscape));
onUnmounted(() => {
document.removeEventListener('keydown', closeOnEscape);
document.body.style.overflow = null;
});
</script>
<template>
<teleport to="body">
<transition leave-active-class="duration-300">
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50" scroll-region>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-300"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 transform transition-all" @click="close">
<div class="absolute inset-0 bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt opacity-75" />
</div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-300"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div
v-show="show"
class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
:class="maxWidthClass"
>
<slot v-if="show" />
</div>
</transition>
</div>
</transition>
</teleport>
</template>

37
src/components/Holos/Modal/Destroy.vue
View File

@ -1,9 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue';
import ModalBase from './Elements/Base.vue';
import DangerButton from '../Button/Danger.vue'; import DangerButton from '../Button/Danger.vue';
import SecondaryButton from '../Button/Secondary.vue'; import SecondaryButton from '../Button/Secondary.vue';
import DialogModal from '../DialogModal.vue';
/** Eventos */ /** Eventos */
defineEmits([ defineEmits([
@ -13,27 +11,16 @@ defineEmits([
/** Propiedades */ /** Propiedades */
const props = defineProps({ const props = defineProps({
show: Boolean,
title: { title: {
default: Lang('delete.title'), default: Lang('delete.title'),
type: String type: String
} }
}); });
/** Referencias */
const modalRef = ref(null);
/** Exposiciones */
defineExpose({
open: () => modalRef.value.open(),
close: () => modalRef.value.close()
});
</script> </script>
<template> <template>
<ModalBase <DialogModal :show="show">
ref="modalRef"
@close="$emit('close')"
>
<template #title> <template #title>
<p <p
class="font-bold text-xl" class="font-bold text-xl"
@ -41,17 +28,15 @@ defineExpose({
/> />
</template> </template>
<template #content> <template #content>
<div class="w-full right-0"> <div class="w-full right-0 mt-2">
<div class="overflow-hidden space-y-2 shadow-lg"> <div class="rounded overflow-hidden shadow-lg">
<slot /> <slot />
<div class="px-4 pb-2">
<p
class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
v-text="$t('delete.confirm')"
/>
</div>
</div> </div>
</div> </div>
<p
class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
v-text="$t('delete.confirm')"
/>
</template> </template>
<template #footer> <template #footer>
<div class="space-x-2"> <div class="space-x-2">
@ -62,9 +47,9 @@ defineExpose({
/> />
<SecondaryButton <SecondaryButton
v-text="$t('cancel')" v-text="$t('cancel')"
@click="modalRef.close()" @click="$emit('close')"
/> />
</div> </div>
</template> </template>
</ModalBase> </DialogModal>
</template> </template>

51
src/components/Holos/Modal/Edit.vue Normal file
View File

@ -0,0 +1,51 @@
<script setup>
import PrimaryButton from '../Button/Primary.vue';
import SecondaryButton from '../Button/Secondary.vue';
import DialogModal from '../DialogModal.vue';
/** Eventos */
const emit = defineEmits([
'close',
'update'
]);
/** Propiedades */
const props = defineProps({
show: Boolean,
title: {
default: Lang('edit'),
type: String
}
});
</script>
<template>
<DialogModal :show="show">
<template #title>
<p
class="font-bold text-xl"
v-text="title"
/>
</template>
<template #content>
<div class="w-full right-0 mt-2">
<div class="rounded overflow-hidden">
<slot />
</div>
</div>
</template>
<template #footer>
<div class="space-x-2">
<slot name="buttons" />
<PrimaryButton
v-text="$t('update')"
@click="$emit('update')"
/>
<SecondaryButton
v-text="$t('close')"
@click="$emit('close')"
/>
</div>
</template>
</DialogModal>
</template>

93
src/components/Holos/Modal/Elements/Base.vue
View File

@ -1,93 +0,0 @@
<script setup>
import { computed, ref, watch } from 'vue';
/** Eventos */
const emit = defineEmits(['close']);
/** Propiedades */
const props = defineProps({
maxWidth: {
default: '2xl',
type: String
}
});
const show = ref(false);
/** Métodos */
const maxWidthClass = computed(() => {
return {
'sm': 'sm:max-w-sm',
'md': 'sm:max-w-md',
'lg': 'sm:max-w-lg',
'xl': 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl',
'3xl': 'sm:max-w-3xl',
'4xl': 'sm:max-w-4xl',
'5xl': 'sm:max-w-5xl',
'6xl': 'sm:max-w-6xl',
'7xl': 'sm:max-w-7xl',
}[props.maxWidth];
});
/** Observadores */
watch(() => show, () => {
if (show.value) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = null;
}
});
/** Exposiciones */
defineExpose({
open: () => show.value = true,
close: () => {
show.value = false;
emit('close');
}
});
</script>
<template>
<teleport to="body">
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="ease-in duration-300"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 bg-primary/50 z-50 transition-all"></div>
</transition>
<transition
enter-active-class="ease-out duration-300"
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
leave-active-class="ease-in duration-300"
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<div v-show="show" class="fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50 transition-all" scroll-region>
<div
v-show="show"
class="mb-6 bg-page text-page-t dark:bg-page-d dark:text-page-dt rounded-sm overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto"
:class="maxWidthClass"
>
<div class="flex flex-col">
<div class="text-lg px-4 font-medium">
<slot name="title" />
</div>
<div class="text-sm">
<slot name="content" />
</div>
</div>
<div class="flex flex-row justify-center p-2 text-end">
<slot name="footer" />
</div>
</div>
</div>
</transition>
</teleport>
</template>

6
src/components/Holos/Modal/Elements/Header.vue
View File

@ -7,13 +7,13 @@ defineProps({
</script> </script>
<template> <template>
<div class="text-center p-6 bg-primary dark:bg-primary-d"> <div class="text-center p-6 bg-primary dark:bg-primary-d border-b">
<slot /> <slot />
<p class="pt-2 text-lg font-bold text-primary-t dark:text-primary-t-d"> <p class="pt-2 text-lg font-bold text-gray-50">
{{ title }} {{ title }}
</p> </p>
<p v-if="subtitle" <p v-if="subtitle"
class="text-sm text-primary-t dark:text-primary-t-d" class="text-sm text-gray-50"
> >
{{ subtitle }} {{ subtitle }}
</p> </p>

38
src/components/Holos/Modal/Show.vue
View File

@ -1,32 +1,24 @@
<script setup> <script setup>
import { ref } from 'vue';
import ModalBase from './Elements/Base.vue';
import SecondaryButton from '../Button/Secondary.vue'; import SecondaryButton from '../Button/Secondary.vue';
import PrimaryButton from '../Button/Primary.vue';
import DialogModal from '../DialogModal.vue';
/** Eventos */ /** Eventos */
const emit = defineEmits(['close']); const emit = defineEmits([
'close',
'edit'
]);
/** Propiedades */ /** Propiedades */
const props = defineProps({ const props = defineProps({
editable: Boolean,
show: Boolean,
title: String title: String
}); });
/** Referencias */
const modalRef = ref(null);
/** Exposiciones */
defineExpose({
open: () => modalRef.value.open(),
close: () => modalRef.value.close()
});
</script> </script>
<template> <template>
<ModalBase <DialogModal :show="show">
ref="modalRef"
@close="emit('close')"
>
<template #title> <template #title>
<p <p
class="font-bold text-xl" class="font-bold text-xl"
@ -34,8 +26,8 @@ defineExpose({
/> />
</template> </template>
<template #content> <template #content>
<div class="w-full right-0"> <div class="w-full right-0 mt-2">
<div class="overflow-hidden shadow-lg"> <div class="rounded overflow-hidden shadow-lg">
<slot /> <slot />
</div> </div>
</div> </div>
@ -43,11 +35,15 @@ defineExpose({
<template #footer> <template #footer>
<div class="space-x-2"> <div class="space-x-2">
<slot name="buttons" /> <slot name="buttons" />
<PrimaryButton v-if="editable"
v-text="$t('update')"
@click="$emit('edit')"
/>
<SecondaryButton <SecondaryButton
v-text="$t('close')" v-text="$t('close')"
@click="modalRef.close()" @click="$emit('close')"
/> />
</div> </div>
</template> </template>
</ModalBase> </DialogModal>
</template> </template>

54
src/components/Holos/Modal/Template/Destroy.vue
View File

@ -1,5 +1,4 @@
<script setup> <script setup>
import { ref } from 'vue';
import { api } from '@Services/Api.js'; import { api } from '@Services/Api.js';
import DestroyModal from '../Destroy.vue'; import DestroyModal from '../Destroy.vue';
@ -7,63 +6,40 @@ import Header from '../Elements/Header.vue';
/** Eventos */ /** Eventos */
const emit = defineEmits([ const emit = defineEmits([
'open',
'close', 'close',
'update' 'update'
]); ]);
/** Propiedades */ /** Propiedades */
const props = defineProps({ const props = defineProps({
model: Object,
show: Boolean,
to: Function, to: Function,
title: {
type: String,
default: 'name'
},
subtitle: {
type: String,
default: 'description'
}
}); });
const model = ref({});
const modalRef = ref(null);
/** Métodos */ /** Métodos */
const destroy = () => { const destroy = (id) => api.delete(props.to(id), {
api.delete(props.to(model.value.id), { onSuccess: () => {
onSuccess: () => { Notify.success(Lang('deleted'));
Notify.success(Lang('deleted')); emit('close');
emit('update'); emit('update');
}, },
onError: () => { onError: () => {
Notify.info(Lang('notFound')); Notify.info(Lang('notFound'));
}, emit('close');
onFinish: () => {
modalRef.value.close();
}
});
}
/** Exposiciones */
defineExpose({
open: (modelData) => {
model.value = modelData;
modalRef.value.open();
emit('open')
} }
}); });
</script> </script>
<template> <template>
<DestroyModal <DestroyModal
ref="modalRef" :show="show"
@close="$emit('close')" @close="$emit('close')"
@destroy="destroy" @destroy="destroy(model.id)"
> >
<Header <Header
:title="model[title]" :subtitle="model.full_last_name"
:subtitle="model[subtitle]" :title="model.name"
/> />
</DestroyModal> </DestroyModal>
</template> </template>

50
src/components/Holos/PageHeader.vue
View File

@ -1,46 +1,32 @@
<script setup> <script setup>
import { RouterLink, useRoute } from 'vue-router'; import { RouterLink } from 'vue-router';
import { breadcrumbItem, breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
/** Definidores */ defineProps({
const vroute = useRoute();
const props = defineProps({
title: String title: String
}); });
const breadcrumbs = breadcrumbMeta(vroute);
</script> </script>
<template> <template>
<div> <div v-if="title" class="flex w-full justify-center">
<BreadcrumbContainer> <h2
<template v-for="(item, index) in breadcrumbs" :key="item.name"> class="font-bold text-xl uppercase"
<BreadcrumbItem v-text="title"
:name="item.name" />
:icon="item.icon" </div>
:route="item.route" <div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
:active="index === breadcrumbs.length - 1" <div id="buttons" class="flex items-center space-x-1 text-sm">
<slot />
<RouterLink :to="$view({ name: 'index' })">
<IconButton
:title="$t('home')"
class="text-white"
icon="home"
filled
/> />
</template> </RouterLink>
</BreadcrumbContainer>
<div class="flex w-full justify-end py-[0.31rem] mb-2 border-y-2 border-page-t dark:border-page-dt">
<div id="buttons" class="flex items-center space-x-1 text-sm">
<slot />
<RouterLink :to="$view({ name: 'index' })">
<IconButton
:title="$t('home')"
class="text-white"
icon="refresh"
filled
/>
</RouterLink>
</div>
</div> </div>
</div> </div>
</template> </template>

2
src/components/Holos/Paginable.vue
View File

@ -16,7 +16,7 @@ const props = defineProps({
<template> <template>
<section class="pb-2"> <section class="pb-2">
<div class="w-full overflow-hidden rounded-sm shadow-lg"> <div class="w-full overflow-hidden rounded-md shadow-lg">
<div v-if="!processing" class="w-full overflow-x-auto"> <div v-if="!processing" class="w-full overflow-x-auto">
<template v-if="items?.total > 0"> <template v-if="items?.total > 0">
<slot <slot

30
src/components/Holos/Searcher.vue
View File

@ -1,15 +1,8 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import GoogleIcon from '@Shared/GoogleIcon.vue'; import GoogleIcon from '@Shared/GoogleIcon.vue';
import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
/** Definidores */
const vroute = useRoute();
/** Eventos */ /** Eventos */
const emit = defineEmits([ const emit = defineEmits([
@ -25,7 +18,6 @@ const props = defineProps({
} }
}) })
const breadcrumbs = breadcrumbMeta(vroute);
const query = ref(''); const query = ref('');
/** Métodos */ /** Métodos */
@ -38,20 +30,14 @@ const clear = () => {
search(); search();
} }
</script> </script>
<template> <template>
<BreadcrumbContainer> <div v-if="title" class="flex w-full justify-center">
<template v-for="(item, index) in breadcrumbs" :key="item.name"> <h2
<BreadcrumbItem class="font-bold text-xl uppercase"
:name="item.name" v-text="title"
:icon="item.icon" />
:route="item.route" </div>
:active="index === breadcrumbs.length - 1"
/>
</template>
</BreadcrumbContainer>
<div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt"> <div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt">
<div> <div>
<div class="relative py-1 z-0"> <div class="relative py-1 z-0">
@ -71,7 +57,7 @@ const clear = () => {
</div> </div>
<input <input
id="search" id="search"
class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-sm outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1" class="bg-gray-100 border border-gray-300 text-gray-700 text-sm rounded-lg outline-0 focus:ring-primary focus:border-primary block sm:w-56 md:w-72 lg:w-80 pr-10 px-2.5 py-1"
autocomplete="off" autocomplete="off"
:placeholder="placeholder" :placeholder="placeholder"
required required

30
src/components/Holos/Skeleton/Header.vue
View File

@ -31,8 +31,8 @@ const loader = useLoader()
<header <header
class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50" class="fixed px-2 w-[calc(100vw)] bg-transparent transition-all duration-300 z-50"
:class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}" :class="{'md:w-[calc(100vw-16rem)]':leftSidebar.isOpened,'md:w-[calc(100vw)]':!leftSidebar.isClosed}"
> >
<div class="my-2 flex px-2 items-center justify-between h-[2.75rem] rounded-sm bg-primary dark:bg-primary-d text-white z-20 "> <div class="my-2 flex px-6 items-center justify-between h-[2.75rem] rounded-lg bg-primary dark:bg-primary-d text-white z-20 ">
<GoogleIcon <GoogleIcon
class="text-2xl mt-1 z-50" class="text-2xl mt-1 z-50"
name="list" name="list"
@ -45,18 +45,16 @@ const loader = useLoader()
<li v-if="loader.isProcessing" class="flex items-center"> <li v-if="loader.isProcessing" class="flex items-center">
<Loader /> <Loader />
</li> </li>
<template v-if="notifier.isEnabled"> <li v-if="hasPermission('users.online')">
<li v-if="hasPermission('users.online')"> <RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
<RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center"> <GoogleIcon
<GoogleIcon class="text-xl mt-1"
class="text-xl mt-1" name="connect_without_contact"
name="connect_without_contact" :title="$t('notifications.title')"
:title="$t('notifications.title')" />
/> <span class="text-xs">{{ users.length - 1 }}</span>
<span class="text-xs">{{ users.length - 1 }}</span> </RouterLink>
</RouterLink> </li>
</li>
</template>
<li class="flex items-center"> <li class="flex items-center">
<GoogleIcon <GoogleIcon
class="text-xl mt-1" class="text-xl mt-1"
@ -88,11 +86,11 @@ const loader = useLoader()
<template #trigger> <template #trigger>
<div class="flex space-x-4"> <div class="flex space-x-4">
<button <button
class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-hidden cursor-pointer transition" class="flex items-center space-x-4 text-sm border-2 border-transparent rounded-full focus:outline-none transition"
:title="$t('users.menu')" :title="$t('users.menu')"
> >
<img <img
class="h-8 w-8 rounded-sm object-cover" class="h-8 w-8 rounded-full object-cover"
:alt="$page.user.name" :alt="$page.user.name"
:src="$page.user.profile_photo_url" :src="$page.user.profile_photo_url"
> >

4
src/components/Holos/Skeleton/Sidebar/Left.vue
View File

@ -29,7 +29,7 @@ const year = (new Date).getFullYear();
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}" :class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
> >
<div class="flex flex-col h-full p-2 md:w-64"> <div class="flex flex-col h-full p-2 md:w-64">
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white"> <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
<div> <div>
<div class="flex w-full px-2 mt-2"> <div class="flex w-full px-2 mt-2">
<Logo <Logo
@ -45,7 +45,7 @@ const year = (new Date).getFullYear();
&copy {{year}} {{ APP_COPYRIGHT }} &copy {{year}} {{ APP_COPYRIGHT }}
</p> </p>
<p class="text-center text-xs text-yellow-500 cursor-pointer"> <p class="text-center text-xs text-yellow-500 cursor-pointer">
<RouterLink :to="{name:'changelogs.app'}"> APP {{ APP_VERSION }} </RouterLink> <RouterLink :to="{name:'changelogs.core'}"> API {{ $page.app.version }} </RouterLink> <RouterLink :to="{name:'changelogs'}"> APP {{ APP_VERSION }} </RouterLink> API {{ $page.app.version }}
</p> </p>
</div> </div>
</div> </div>

2
src/components/Holos/Skeleton/Sidebar/Link.vue
View File

@ -21,7 +21,7 @@ const classes = computed(() => {
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d' ? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
: 'border-transparent'; : 'border-transparent';
return `flex items-center h-11 focus:outline-hidden hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition` return `flex items-center h-11 focus:outline-none hover:bg-secondary/30 dark:hover:bg-secondary-d/30 border-l-4 hover:border-secondary dark:hover:border-secondary-d pr-6 ${status} transition`
}); });
const closeSidebar = () => { const closeSidebar = () => {

30
src/components/Holos/Skeleton/Sidebar/Notification.vue
View File

@ -4,24 +4,30 @@ import { RouterLink } from 'vue-router';
import useNotificationSidebar from '@Stores/NotificationSidebar' import useNotificationSidebar from '@Stores/NotificationSidebar'
import useNotifier from '@Stores/Notifier' import useNotifier from '@Stores/Notifier'
import GoogleIcon from '@Shared/GoogleIcon.vue'; import ModalController from '@Controllers/ModalController.js';
import PrimaryButton from '@Holos/Button/Primary.vue';
import ShowModal from './Notification/Show.vue';
import Item from './Notification/Item.vue';
/** Eventos */ import GoogleIcon from '@Shared/GoogleIcon.vue';
const emit = defineEmits(['open']); import Item from './Notification/Item.vue';
import PrimaryButton from '@Holos/Button/Primary.vue';
import ShowView from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
/** Definidores */ /** Definidores */
const notifier = useNotifier(); const notifier = useNotifier();
const notificationSidebar = useNotificationSidebar() const notificationSidebar = useNotificationSidebar()
/** Controladores */
const Modal = new ModalController();
/** Eventos */
const emit = defineEmits(['open']);
/** Propiedades */ /** Propiedades */
const props = defineProps({ const props = defineProps({
sidebar: Boolean sidebar: Boolean
}); });
const showModal = ref(false); const showModal = ref(Modal.showModal);
const modelModal = ref(Modal.modelModal);
</script> </script>
@ -36,7 +42,7 @@ const showModal = ref(false);
:class="{'w-64': notificationSidebar.isClosed}" :class="{'w-64': notificationSidebar.isClosed}"
> >
<div class="flex flex-col h-full p-2 md:w-64"> <div class="flex flex-col h-full p-2 md:w-64">
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt"> <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary/70 text-primary-t dark:bg-primary-d/70 dark:text-primary-dt">
<div class="flex justify-between px-2 items-center"> <div class="flex justify-between px-2 items-center">
<div class="py-1"> <div class="py-1">
<h4 class="text-md font-semibold"> <h4 class="text-md font-semibold">
@ -62,7 +68,7 @@ const showModal = ref(false);
<Item v-for="notification in notifier.notifications" <Item v-for="notification in notifier.notifications"
:key="notification.id" :key="notification.id"
:notification="notification" :notification="notification"
@openModal="showModal.open(notification)" @openModal="Modal.switchShowModal(notification)"
/> />
</ul> </ul>
</div> </div>
@ -77,8 +83,10 @@ const showModal = ref(false);
</div> </div>
</section> </section>
<ShowModal <ShowView
ref="showModal" :show="showModal"
:model="modelModal"
@close="Modal.switchShowModal"
@reload="notifier.getUpdates()" @reload="notifier.getUpdates()"
/> />
</div> </div>

4
src/components/Holos/Skeleton/Sidebar/Notification/Item.vue
View File

@ -18,7 +18,7 @@ defineProps({
</script> </script>
<template> <template>
<li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-sm shadow-md"> <li class="flex flex-col w-full items-center p-2 bg-primary dark:bg-primary-d text-white rounded-lg shadow-md">
<div class="flex w-full justify-between text-gray-400"> <div class="flex w-full justify-between text-gray-400">
<div> <div>
<h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6> <h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
@ -43,7 +43,7 @@ defineProps({
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-sm flex items-center justify-center"> <div class="w-10 h-10 bg-secondary dark:bg-secondary-d rounded-xl flex items-center justify-center">
<img v-if="notification.user" <img v-if="notification.user"
class="rounded-full object-cover" class="rounded-full object-cover"
:alt="notification.user.name" :alt="notification.user.name"

38
src/components/Holos/Skeleton/Sidebar/Notification/Show.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref } from 'vue'; import { computed, nextTick, onUpdated } from 'vue';
import { getDateTime } from '@Controllers/DateController'; import { getDateTime } from '@Controllers/DateController';
import useNotifier from '@Stores/Notifier'; import useNotifier from '@Stores/Notifier';
@ -17,34 +17,28 @@ const emit = defineEmits([
]); ]);
/** Propiedades */ /** Propiedades */
const modalRef = ref(null); const props = defineProps({
const model = ref({}); show: Boolean,
model: Object
});
/** Métodos */ onUpdated(() => {
function readNotification() { if(!props.model.read_at && props.show) {
if(!model.value.read_at) { notifier.readNotification(props.model.id);
notifier.readNotification(model.value.id);
} }
}
/** Exposiciones */ if(!props.model.read_at && !props.show) {
defineExpose({ emit('reload');
open: (data) => {
model.value = data;
modalRef.value.open();
readNotification();
} }
}); });
</script> </script>
<template> <template>
<ShowModal <ShowModal
ref="modalRef" :show="show"
:title="$t('notification')" @close="$emit('close')"
@close="$emit('reload')"
> >
<Header <Header
:title="model.data?.title" :title="model.data.title"
> >
</Header> </Header>
<div class="py-2 border-b"> <div class="py-2 border-b">
@ -59,11 +53,11 @@ defineExpose({
</p> </p>
<div class="flex flex-col"> <div class="flex flex-col">
<b>{{ $t('description') }}: </b> <b>{{ $t('description') }}: </b>
{{ model.data?.description }} {{ model.data.description }}
</div> </div>
<div v-if="model.data?.message" class="flex flex-col"> <div v-if="model.data.message" class="flex flex-col">
<b>{{ $t('message') }}: </b> <b>{{ $t('message') }}: </b>
{{ model.data?.message }} {{ model.data.message }}
</div> </div>
<p> <p>
<b>{{ $t('created_at') }}: </b> <b>{{ $t('created_at') }}: </b>

2
src/components/Holos/Skeleton/Sidebar/Right.vue
View File

@ -23,7 +23,7 @@ const props = defineProps({
:class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}" :class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
> >
<div class="flex flex-col h-full p-2 md:w-64"> <div class="flex flex-col h-full p-2 md:w-64">
<div class="flex h-full flex-col w-[15.5rem] justify-between rounded-sm overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white"> <div class="flex h-full flex-col w-[15.5rem] justify-between rounded-lg overflow-y-auto overflow-x-hidden bg-primary dark:bg-primary-d text-white">
<div> <div>
<ul class="flex h-full flex-col md:pb-4 space-y-1"> <ul class="flex h-full flex-col md:pb-4 space-y-1">
<slot /> <slot />

6
src/components/Holos/Table.vue
View File

@ -16,10 +16,10 @@ const props = defineProps({
<template> <template>
<section class="pb-2"> <section class="pb-2">
<div class="w-full overflow-hidden rounded-sm shadow-lg dark:shadow-xs dark:shadow-white"> <div class="w-full overflow-hidden rounded-md shadow-lg">
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<table v-if="!processing" class="w-full"> <table v-if="!processing" class="w-full">
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt"> <thead>
<tr> <tr>
<slot name="head" /> <slot name="head" />
</tr> </tr>
@ -50,7 +50,7 @@ const props = defineProps({
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td colspan="100%" class="table-cell h-7 text-center"> <td colspan="100%" class="table-item h-7 text-center">
<div class="w-full h-4 bg-secondary/50 rounded-md"></div> <div class="w-full h-4 bg-secondary/50 rounded-md"></div>
</td> </td>
</tr> </tr>

2
src/components/Holos/TableSimple.vue
View File

@ -15,7 +15,7 @@ const props = defineProps({
<div class="w-full overflow-hidden rounded-md shadow-lg"> <div class="w-full overflow-hidden rounded-md shadow-lg">
<div class="w-full overflow-x-auto"> <div class="w-full overflow-x-auto">
<table class="w-full"> <table class="w-full">
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt"> <thead>
<tr> <tr>
<slot name="head" /> <slot name="head" />
</tr> </tr>

19
src/components/Holos/Timeline/Item.vue
View File

@ -2,14 +2,13 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { getDate, getTime } from '@Controllers/DateController'; import { getDate, getTime } from '@Controllers/DateController';
import GoogleIcon from '@Shared/GoogleIcon.vue'; import PrimaryButton from '@Holos/Button/Primary.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Eventos */ /** Eventos */
const emit = defineEmits([ const emit = defineEmits([
'show', 'show',
]); ]);
/** Propiedades */
const props = defineProps({ const props = defineProps({
event: Object, event: Object,
}); });
@ -28,8 +27,6 @@ const colors = {
restored: 'primary', restored: 'primary',
}; };
/** Propiedades computadas */
const eventType = computed(() => { const eventType = computed(() => {
return props.event.event.split('.')[1]; return props.event.event.split('.')[1];
}); });
@ -49,7 +46,7 @@ const borderColor = computed(() => {
<div class="relative flex w-full"> <div class="relative flex w-full">
<div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div> <div class="absolute -left-3.5 top-7 h-0.5 w-8" :class="bgColor"></div>
<div <div
class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-sm" class="absolute -mt-3 -left-3.5 top-7 w-6 h-6 flex items-center justify-center rounded-full"
:class="bgColor" :class="bgColor"
@click="emit('show', event.data)" @click="emit('show', event.data)"
> >
@ -57,8 +54,8 @@ const borderColor = computed(() => {
:name="icons[eventType]" :name="icons[eventType]"
/> />
</div> </div>
<div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4"> <div class="w-full rounded-lg shadow-xl dark:shadow-page-dt dark:shadow-sm my-2 mx-4">
<div class="flex justify-between p-2 rounded-t-sm" :class="bgColor"> <div class="flex justify-between p-2 rounded-t-lg" :class="bgColor">
<span <span
class="font-medium text-sm cursor-pointer" class="font-medium text-sm cursor-pointer"
@click="emit('show', event.data)" @click="emit('show', event.data)"
@ -70,13 +67,13 @@ const borderColor = computed(() => {
</span> </span>
</div> </div>
<div class="p-2"> <div class="p-2">
<div class="flex flex-col justify-center items-center md:flex-row md:justify-start md:space-x-4"> <div class="flex flex-col justify-center items-center md:flex-row md:justify-start space-x-4">
<div v-if="event.user" class="w-32"> <div v-if="event.user" class="w-32">
<div class="flex flex-col w-full justify-center items-center space-y-2"> <div class="flex flex-col w-full justify-center items-center space-y-2">
<img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-sm"> <img :src="event.user?.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
</div> </div>
</div> </div>
<div class="flex w-full flex-col justify-start space-y-2"> <div class="flex flex-col space-y-2">
<div> <div>
<h4 class="font-semibold">{{ $t('description') }}:</h4> <h4 class="font-semibold">{{ $t('description') }}:</h4>
<p>{{ event.description }}.</p> <p>{{ event.description }}.</p>

19
src/controllers/BreadcrumbController.js
View File

@ -1,19 +0,0 @@
/** Breadcrumb */
const breadcrumbItem = (name, icon, route = {name:'index'}) => ({ name, icon, route })
const breadcrumbMeta = (route) => {
let breadcrumbs = [];
route.matched.forEach(match => {
if(match.name && match.meta?.title) {
breadcrumbs.push(breadcrumbItem(match.meta.title, match.meta.icon, {name: match.name}));
}
});
return breadcrumbs;
}
export {
breadcrumbItem,
breadcrumbMeta,
}

92
src/controllers/ModalController.js Normal file
View File

@ -0,0 +1,92 @@
import { ref } from 'vue';
/**
* Controlador simple de las bandejas
*/
class ModalController
{
// Modals
confirmModal = ref(false);
destroyModal = ref(false);
editModal = ref(false);
noteModal = ref(false);
manyNotesModal = ref(false);
showModal = ref(false);
importModal = ref(false);
// Models
modelModal = ref({});
constructor() {}
/**
* Controla el cambio entre show y edit
*/
switchShowEditModal = () => {
this.showModal.value = !this.showModal.value
this.editModal.value = !this.editModal.value
};
/**
* Controla el switch de eliminar
*/
switchShowModal = (model) => {
this._setModel(model);
this.showModal.value = !this.showModal.value
};
/**
* Controla el switch de importar
*/
switchImportModal = () => {
this.importModal.value = !this.importModal.value
};
/**
* Controla el switch de eliminar
*/
switchEditModal = (model) => {
this._setModel(model);
this.editModal.value = !this.editModal.value
};
/**
* Controla el switch de eliminar
*/
switchDestroyModal = (model) => {
this._setModel(model);
this.destroyModal.value = !this.destroyModal.value
};
/**
* Controla el switch de nota
*/
switchNoteModal = () => {
this.noteModal.value = !this.noteModal.value
};
/**
* Controla el switch de notas aplicadas a muchos
*/
switchManyNotesModal = () => {
this.manyNotesModal.value = !this.manyNotesModal.value
};
/**
* Controla el switch de nota
*/
switchConfirmModal = () => {
this.confirmModal.value = !this.confirmModal.value
};
/**
* Guarda el modelo
*/
_setModel = (model) => {
if(model) {
this.modelModal.value = model;
}
}
}
export default ModalController;

53
src/css/app.css
View File

@ -1,15 +1,6 @@
@import "tailwindcss"; @tailwind base;
@import "../../colors.css"; @tailwind components;
@custom-variant dark (&:where(.dark, .dark *)); @tailwind utilities;
@theme {
--font-google-icon-outlined: "Material Symbols Outlined";
--font-google-icon-outlined-fill: "Material Symbols Outlined Fill";
--font-google-icon-rounded: "Material Symbols Rounded";
--font-google-icon-rounded-fill: "Material Symbols rounded-sm Fill";
--font-google-icon-sharp: "Material Symbols Sharp";
--font-google-icon-sharp-fill: "Material Symbols Sharp Fill";
}
.app-bg-light { .app-bg-light {
@apply bg-primary @apply bg-primary
@ -20,7 +11,7 @@
} }
.btn { .btn {
@apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-sm font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-hidden active:saturate-150 disabled:opacity-25 cursor-pointer transition; @apply inline-flex justify-center items-center w-fit px-1.5 py-1.5 rounded-md font-medium border border-transparent text-xs text-white uppercase tracking-widest hover:opacity-90 focus:outline-none active:saturate-150 disabled:opacity-25 transition;
} }
.btn-primary { .btn-primary {
@ -44,37 +35,53 @@
} }
.btn-icon { .btn-icon {
@apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-sm font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt cursor-pointer; @apply flex w-fit min-h-6 px-1.5 py-1.5 rounded-md font-medium bg-primary dark:bg-primary-d text-primary-t dark:text-primary-dt hover:bg-secondary dark:hover:bg-secondary-d hover:text-secondary-t dark:hover:text-secondary-dt;
} }
.input-primary { .input-primary {
@apply w-full p-[6.5px] border-b border-page-t/50 dark:border-page-dt/50 bg-primary/5 rounded-sm outline-0 @apply w-full p-2 border rounded-md outline-0 bg-transparent
} }
.nav-item { .nav-item {
@apply p-1 @apply p-1
} }
.table-row { .table-item {
@apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100 @apply px-2 border text-sm;
}
.table-cell {
@apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
} }
.table-actions { .table-actions {
@apply flex justify-center items-center space-x-1; @apply flex justify-center items-center space-x-2;
} }
nav a.router-link-active { nav a.router-link-active {
@apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d @apply bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d
} }
table {
@apply w-full;
}
table>thead {
@apply bg-primary text-white;
}
table>thead>tr {
@apply text-base font-semibold tracking-wide text-left text-white bg-primary dark:bg-primary-d uppercase border-b divide-indigo-50 divide-x;
}
table>thead>tr>th {
@apply px-2 border border-white text-sm;
}
.with-transition { .with-transition {
@apply transition-all duration-300 @apply transition-all duration-300
} }
.with-color-transition {
@apply transition-colors duration-500
}
/** /**
* Switch * Switch
*/ */

2
src/css/base.css
View File

@ -1,5 +1,5 @@
@import './app.css';
@import './icons.css'; @import './icons.css';
@import './notifications.css'; @import './notifications.css';
@import "vue-multiselect/dist/vue-multiselect.css"; @import "vue-multiselect/dist/vue-multiselect.css";
@import './multiselect.css'; @import './multiselect.css';
@import './app.css';

19
src/css/icons.css
View File

@ -38,13 +38,13 @@
} }
/** /**
* rounded-sm fill * Rounded fill
* *
* https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0 * https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0
* https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2 * https://fonts.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
*/ */
@font-face { @font-face {
font-family: 'Material Symbols rounded-sm Fill'; font-family: 'Material Symbols Rounded Fill';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2'); src: url(./icons/google/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2) format('woff2');
@ -75,3 +75,18 @@
font-weight: 400; font-weight: 400;
src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2'); src: url(./icons/google/gNNBW2J8Roq16WD5tFNRaeLQk6-SHQ_R00k4c2_whPnoY9ruReYU3rHmz74m0ZkGH-VBYe1x0TV6x4yFH8F-H5OdzEL3sVTgJtfbYxOLojCL.woff2) format('woff2');
} }
.material-symbols{
font-weight: normal;
font-style: normal;
font-size: 20spx;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

8
src/css/multiselect.css
View File

@ -4,7 +4,7 @@
.multiselect__input, .multiselect__input,
.multiselect__single { .multiselect__single {
@apply bg-white dark:bg-transparent dark:text-white @apply bg-white dark:bg-primary dark:text-white
} }
.multiselect__input::placeholder { .multiselect__input::placeholder {
@ -12,7 +12,7 @@
} }
.multiselect__tag { .multiselect__tag {
@apply bg-success dark:bg-success-d; @apply dark:bg-green-800;
} }
.multiselect__tag-icon::after { .multiselect__tag-icon::after {
@ -25,7 +25,7 @@
} }
.multiselect__tags { .multiselect__tags {
@apply bg-primary/5 dark:bg-primary-d/5 min-h-8 border-0 border-b border-page-t/50 dark:border-page-dt/50 pt-1; @apply dark:bg-primary min-h-8 border-0 border-b border-b-slate-400 pt-1 with-color-transition;
} }
.multiselect__option--highlight { .multiselect__option--highlight {
@ -45,7 +45,7 @@
} }
.multiselect__content-wrapper { .multiselect__content-wrapper {
@apply bg-page dark:bg-page-d; @apply bg-gray-100 dark:bg-primary;
} }

22
src/index.js
View File

@ -10,12 +10,10 @@ import Notify from '@Plugins/Notify'
import { bootPermissions, bootRoles } from '@Plugins/RolePermission'; import { bootPermissions, bootRoles } from '@Plugins/RolePermission';
import TailwindScreen from '@Plugins/TailwindScreen' import TailwindScreen from '@Plugins/TailwindScreen'
import { pagePlugin } from '@Services/Page'; import { pagePlugin } from '@Services/Page';
import { defineApp, reloadApp, view } from '@Services/Page'; import { reloadApp, view } from '@Services/Page';
import { apiURL } from '@Services/Api';
import App from '@Components/App.vue' import App from '@Layouts/AppLayout.vue'
import Error503 from '@Pages/Errors/503.vue' import Error503 from '@Pages/Errors/503.vue'
import { hasToken } from './services/Api';
// Configurar axios // Configurar axios
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@ -31,11 +29,9 @@ async function boot() {
// Iniciar rutas // Iniciar rutas
try { try {
const routes = await axios.get(apiURL('resources/routes')); const routes = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/routes');
const appData = await axios.get(apiURL('resources/app'));
window.Ziggy = routes.data; window.Ziggy = routes.data;
defineApp(appData.data);
window.route = useRoute(); window.route = useRoute();
window.view = view; window.view = view;
initRoutes = true; initRoutes = true;
@ -45,14 +41,12 @@ async function boot() {
if(initRoutes) { if(initRoutes) {
// Iniciar permisos // Iniciar permisos
if(hasToken()) { await bootPermissions();
await bootPermissions(); await bootRoles();
await bootRoles();
// Iniciar broadcast // Iniciar broadcast
if(import.meta.env.VITE_REVERB_ACTIVE === 'true') { if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
await import('@Services/Broadcast') await import('@Services/Broadcast')
}
} }
reloadApp(); reloadApp();

5
src/lang/es.js
View File

@ -298,7 +298,7 @@ export default {
roles:{ roles:{
create: { create: {
title: 'Crear rol', title: 'Crear rol',
description: 'Este nombre sera necesario para identificar el rol en el sistema. Procura que sea algo simple.', description: 'Estos roles serán usados para dar permisos en el sistema.',
onSuccess: 'Rol creado exitosamente', onSuccess: 'Rol creado exitosamente',
onError: 'Error al crear el role', onError: 'Error al crear el role',
}, },
@ -309,10 +309,9 @@ export default {
onError: 'Error al actualizar el role', onError: 'Error al actualizar el role',
}, },
update: { update: {
description: 'Si crees necesario, puedes actualizar el nombre del rol. No afecta a los permisos.', description: 'Actualiza los permisos del rol.',
}, },
title: 'Roles', title: 'Roles',
description: 'Gestión de roles del sistema. Puedes crear los roles con los permisos que necesites.',
permissions: { permissions: {
title: 'Permisos', title: 'Permisos',
description: 'Permisos del rol.', description: 'Permisos del rol.',

5
src/lang/i18n.js
View File

@ -13,14 +13,13 @@ const messages = {
} }
const i18n = createI18n({ const i18n = createI18n({
legacy: false,
locale, locale,
fallbackLocale: locale, fallbackLocale: locale,
messages messages
}); });
function lang(text, params = {}) { function lang(text) {
return i18n.global.t(text, params); return i18n.global.t(text);
} }
export { export {

27
src/pages/Admin/Activities/Index.vue
View File

@ -3,7 +3,9 @@ import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { hasPermission } from '@Plugins/RolePermission'; import { hasPermission } from '@Plugins/RolePermission';
import { useSearcher } from '@Services/Api'; import { useSearcher } from '@Services/Api';
import { apiTo, transl } from './Module'; import { apiTo } from './Module';
import ModalController from '@Controllers/ModalController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import PrimaryButton from '@Holos/Button/Primary.vue'; import PrimaryButton from '@Holos/Button/Primary.vue';
@ -17,7 +19,13 @@ import ShowView from './Modals/Event.vue';
const vroute = useRoute(); const vroute = useRoute();
const router = useRouter(); const router = useRouter();
/** Controladores */
const Modal = new ModalController();
/** Propiedades */ /** Propiedades */
const showModal = ref(Modal.showModal);
const modelModal = ref(Modal.modelModal);
const models = ref([]); const models = ref([]);
const filters = reactive({ const filters = reactive({
@ -27,9 +35,6 @@ const filters = reactive({
user: '' user: ''
}); });
/** Referencias */
const showModal = ref(null);
/** Métodos */ /** Métodos */
const searcher = useSearcher({ const searcher = useSearcher({
url: apiTo('index'), url: apiTo('index'),
@ -66,7 +71,7 @@ onMounted(() => {
<template> <template>
<div> <div>
<Header :title="transl('title')"> <Header :title="$t('admin.activity.title')">
<RouterLink v-if="filters.user && hasPermission('users.index')" :to="$view({ name: 'admin.users.index' })"> <RouterLink v-if="filters.user && hasPermission('users.index')" :to="$view({ name: 'admin.users.index' })">
<IconButton <IconButton
class="text-white" class="text-white"
@ -76,7 +81,7 @@ onMounted(() => {
/> />
</RouterLink> </RouterLink>
</Header> </Header>
<p class="mt-2 text-sm">{{ transl('description') }}</p> <p class="mt-2">{{ $t('admin.activity.description') }}</p>
<div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4"> <div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
<Input <Input
@ -128,7 +133,7 @@ onMounted(() => {
<template v-for="event in items"> <template v-for="event in items">
<Item <Item
:event="event" :event="event"
@show="showModal.open(event)" @show="Modal.switchShowModal(event)"
/> />
</template> </template>
</ol> </ol>
@ -136,9 +141,11 @@ onMounted(() => {
</Paginable> </Paginable>
</div> </div>
<ShowView <ShowView
ref="showModal" :show="showModal"
/> :model="modelModal"
@close="Modal.switchShowModal"
/>
</div> </div>
</template> </template>

37
src/pages/Admin/Activities/Modals/Event.vue
View File

@ -1,5 +1,4 @@
<script setup> <script setup>
import { ref } from 'vue';
import { getDateTime } from '@Controllers/DateController'; import { getDateTime } from '@Controllers/DateController';
import Header from '@Holos/Modal/Elements/Header.vue'; import Header from '@Holos/Modal/Elements/Header.vue';
@ -12,36 +11,22 @@ defineEmits([
]); ]);
/** Propiedades */ /** Propiedades */
const model = ref(null); defineProps({
show: Boolean,
/** Referencias */ model: Object
const modalRef = ref(null);
/** Métodos */
function close() {
model.value = null;
emit('close');
}
/** Exposiciones */
defineExpose({
open: (data) => {
model.value = data;
modalRef.value.open();
}
}); });
</script> </script>
<template> <template>
<ShowModal <ShowModal
ref="modalRef" :show="show"
@close="close" @close="$emit('close')"
> >
<div v-if="model"> <Header
<Header :title="model.name"
:title="model.event" :subtitle="model.last_name"
/> />
<div class="flex w-full p-4"> <div class="py-2 border-b">
<div class="flex w-full px-4 py-2">
<GoogleIcon <GoogleIcon
class="text-xl text-success" class="text-xl text-success"
name="contact_mail" name="contact_mail"

71
src/pages/Admin/Activities/Modals/Show.vue Normal file
View File

@ -0,0 +1,71 @@
<script setup>
import { getDateTime } from '@Controllers/DateController';
import Header from '@Holos/Modal/Elements/Header.vue';
import ShowModal from '@Holos/Modal/Show.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Eventos */
defineEmits([
'close',
]);
/** Propiedades */
defineProps({
show: Boolean,
model: Object
});
</script>
<template>
<ShowModal
:show="show"
@close="$emit('close')"
>
<Header
:title="model.name"
:subtitle="model.last_name"
>
<div class="flex w-full flex-col">
<div class="flex w-full justify-center items-center">
<img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
</div>
</div>
</Header>
<div class="py-2 border-b">
<div class="flex w-full px-4 py-2">
<GoogleIcon
class="text-xl text-success"
name="contact_mail"
/>
<div class="pl-3">
<p class="font-bold text-lg leading-none pb-2">
{{ $t('details') }}
</p>
<p>
<b>{{ $t('name') }}: </b>
{{ model.full_name }}
</p>
<p>
<b>{{ $t('phone') }}: </b>
<a :href="`tel:${model.phone}`" target="_blank" class="hover:text-danger">
{{ model.phone ?? '-' }}
</a>
</p>
<p>
<b>{{ $t('email.title') }}: </b>
<a :href="`mailto:${model.email}`" target="_blank" class="hover:text-danger">
{{ model.email }}
</a>
</p>
<p>
<b>{{ $t('created_at') }}: </b>
{{ getDateTime(model.created_at) }}
</p>
<p>
<b>{{ $t('updated_at') }}: </b>
{{ getDateTime(model.updated_at) }}
</p>
</div>
</div>
</div>
</ShowModal>
</template>

2
src/pages/Admin/Activities/Module.js
View File

@ -8,7 +8,7 @@ const apiTo = (name, params = {}) => route(`admin.activities.${name}`, params)
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.activities.${name}`, params, query }) const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.activities.${name}`, params, query })
// Obtener traducción del componente // Obtener traducción del componente
const transl = (str) => lang(`admin.activity.${str}`) const transl = (str) => lang(`activities.${str}`)
// Determina si un usuario puede hacer algo no en base a los permisos // Determina si un usuario puede hacer algo no en base a los permisos
const can = (permission) => hasPermission(`activities.${permission}`) const can = (permission) => hasPermission(`activities.${permission}`)

2
src/pages/Admin/Roles/Form.vue
View File

@ -25,7 +25,7 @@ function submit() {
</script> </script>
<template> <template>
<div class="w-full pb-2"> <div class="w-full py-4">
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" /> <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
</div> </div>
<div class="w-full"> <div class="w-full">

41
src/pages/Admin/Roles/Index.vue
View File

@ -1,17 +1,23 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { can, apiTo, viewTo, transl } from './Module' import { can, apiTo, viewTo } from './Module'
import { useSearcher } from '@Services/Api'; import { useSearcher } from '@Services/Api';
import ModalController from '@Controllers/ModalController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import DestroyView from '@Holos/Modal/Template/Destroy.vue'; import DestroyView from '@Holos/Modal/Template/Destroy.vue';
import SearcherHead from '@Holos/Searcher.vue'; import SearcherHead from '@Holos/Searcher.vue';
import Table from '@Holos/Table.vue'; import Table from '@Holos/Table.vue';
import Permissions from './Modals/Permissions.vue'; import Permissions from './Modals/Permissions.vue';
/** Controladores */
const Modal = new ModalController();
/** Propiedades */ /** Propiedades */
const destroyModal = ref(null); const destroyModal = ref(Modal.destroyModal);
const editModal = ref(null); const editModal = ref(Modal.editModal);
const modelModal = ref(Modal.modelModal);
const models = ref([]); const models = ref([]);
@ -30,7 +36,7 @@ onMounted(() => {
<template> <template>
<div> <div>
<SearcherHead <SearcherHead
:title="transl('title')" :title="$t('roles.title')"
@search="(x) => searcher.search(x)" @search="(x) => searcher.search(x)"
> >
<RouterLink <RouterLink
@ -50,10 +56,7 @@ onMounted(() => {
@click="searcher.search()" @click="searcher.search()"
/> />
</SearcherHead> </SearcherHead>
<div class="pt-2 space-y-2 w-full"> <div class="pt-2 w-full">
<p class="text-sm">
{{ transl('description') }}
</p>
<Table <Table
:items="models" :items="models"
@send-pagination="(page) => searcher.pagination(page)" @send-pagination="(page) => searcher.pagination(page)"
@ -67,17 +70,17 @@ onMounted(() => {
/> />
</template> </template>
<template #body="{items}"> <template #body="{items}">
<tr v-for="model in items" class="table-row"> <tr v-for="model in items">
<td class="table-cell border"> <td class="table-item border">
{{ model.description }} {{ model.description }}
</td> </td>
<td class="table-cell"> <td class="table-item">
<div class="table-actions"> <div class="table-actions">
<IconButton <IconButton
v-if="can('edit') && ![1,2].includes(model.id)" v-if="can('edit') && ![1,2].includes(model.id)"
icon="license" icon="license"
:title="transl('permissions.title')" :title="$t('roles.permissions.title')"
@click="editModal.open(model)" @click="Modal.switchEditModal(model)"
outline outline
/> />
<RouterLink <RouterLink
@ -95,7 +98,7 @@ onMounted(() => {
v-if="can('destroy') && ![1,2].includes(model.id)" v-if="can('destroy') && ![1,2].includes(model.id)"
icon="delete" icon="delete"
:title="$t('crud.destroy')" :title="$t('crud.destroy')"
@click="destroyModal.open(model)" @click="Modal.switchDestroyModal(model)"
outline outline
/> />
</div> </div>
@ -107,14 +110,16 @@ onMounted(() => {
<Permissions <Permissions
v-if="can('index')" v-if="can('index')"
ref="editModal" :show="editModal"
:model="modelModal"
@close="Modal.switchEditModal"
/> />
<DestroyView <DestroyView
v-if="can('destroy')" v-if="can('destroy')"
ref="destroyModal" :model="modelModal"
title="description" :show="destroyModal"
subtitle=""
:to="(role) => apiTo('destroy', { role })" :to="(role) => apiTo('destroy', { role })"
@close="Modal.switchDestroyModal"
@update="searcher.search()" @update="searcher.search()"
/> />
</div> </div>

63
src/pages/Admin/Roles/Modals/Permissions.vue
View File

@ -4,9 +4,8 @@ import { api } from '@Services/Api';
import { apiTo } from '../Module'; import { apiTo } from '../Module';
import Header from '@Holos/Modal/Elements/Header.vue'; import Header from '@Holos/Modal/Elements/Header.vue';
import EditModal from '@Holos/Modal/Show.vue'; import EditModal from '@Holos/Modal/Edit.vue';
import Checkbox from '@Holos/Form/Checkbox.vue'; import Checkbox from '@Holos/Form/Checkbox.vue';
import PrimaryButton from '@Holos/Button/Primary.vue';
/** Eventos */ /** Eventos */
const emit = defineEmits([ const emit = defineEmits([
@ -14,67 +13,56 @@ const emit = defineEmits([
]); ]);
/** Propiedades */ /** Propiedades */
const permissionTypes = ref([]); const props = defineProps({
const permissions = ref([]); show: Boolean,
const model = ref(null); model: Object
});
/** Referencias */ const permissionTypes = ref([]);
const modalRef = ref(null); const permissions = ref([]);
/** Métodos */ /** Métodos */
function close() {
modalRef.value.close();
emit('close');
}
function update() { function update() {
api.put(apiTo('permissions', { role: model.value.id }), { api.put(apiTo('permissions', { role: props.model.id }), {
data: { data: {
permissions: permissions.value permissions: permissions.value
}, },
onSuccess: () => { onSuccess: () => {
Notify.success(Lang('register.edit.onSuccess')) Notify.success(Lang('register.edit.onSuccess'))
close(); emit('close');
} }
}); });
} }
function getPermissions() { /** Ciclos */
onUpdated(() => {
api.get(route('permission-types.all-with-permissions'), { api.get(route('permission-types.all-with-permissions'), {
onSuccess: (r) => permissionTypes.value = r.models onSuccess: (r) => permissionTypes.value = r.models
}); });
api.get(apiTo('permissions', { role: model.value.id }), { api.get(apiTo('permissions', { role: props.model.id }), {
onSuccess: (r) => { onSuccess: (r) => {
if(r.permissions) { if(r.permissions) {
permissions.value = r.permissions.map(p => p.id); permissions.value = r.permissions.map(p => p.id);
} }
} }
}); });
}
/** Exposiciones */
defineExpose({
open: (data) => {
model.value = data;
getPermissions();
modalRef.value.open();
}
}); });
</script> </script>
<template> <template>
<EditModal <EditModal
ref="modalRef" :show="show"
@close="close" @update="update"
@close="$emit('close')"
> >
<div v-if="model"> <Header
<Header :title="model.description"
:title="model.description" />
/> <div class="p-4 border-b">
<div class="p-4"> <div class="grid gap-4 grid-cols-2">
<div class="grid gap-4 grid-cols-2"> <div v-for="permissionType in permissionTypes">
<div v-for="permissionType in permissionTypes"> <div>
<p class="font-bold">{{ permissionType.name}}</p> <p class="font-bold">{{ permissionType.name}}</p>
<ul class="space-y-0.5 list-none"> <ul class="space-y-0.5 list-none">
<li v-for="permission in permissionType.permissions"> <li v-for="permission in permissionType.permissions">
@ -89,12 +77,5 @@ defineExpose({
</div> </div>
</div> </div>
</div> </div>
<template #buttons>
<PrimaryButton
@click="update"
>
{{ $t('update') }}
</PrimaryButton>
</template>
</EditModal> </EditModal>
</template> </template>

6
src/pages/Admin/Users/Create.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router'; import { useRouter } from 'vue-router';
import { api, useForm } from '@Services/Api'; import { api, useForm } from '@Services/Api';
import { apiTo, transl, viewTo } from './Module'; import { apiTo, transl, viewTo } from './Module';
@ -50,9 +50,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<PageHeader <PageHeader :title="transl('create.title')">
:title="transl('create.title')"
>
<RouterLink :to="viewTo({ name: 'index' })"> <RouterLink :to="viewTo({ name: 'index' })">
<IconButton <IconButton
class="text-white" class="text-white"

6
src/pages/Admin/Users/Form.vue
View File

@ -25,7 +25,7 @@ function submit() {
</script> </script>
<template> <template>
<div class="w-full pb-2"> <div class="w-full py-4">
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" /> <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
</div> </div>
<div class="w-full"> <div class="w-full">
@ -41,24 +41,28 @@ function submit() {
v-model="form.paternal" v-model="form.paternal"
id="paternal" id="paternal"
:onError="form.errors.paternal" :onError="form.errors.paternal"
autofocus
required required
/> />
<Input <Input
v-model="form.maternal" v-model="form.maternal"
id="maternal" id="maternal"
:onError="form.errors.maternal" :onError="form.errors.maternal"
autofocus
/> />
<Input <Input
v-model="form.phone" v-model="form.phone"
id="phone" id="phone"
:onError="form.errors.phone" :onError="form.errors.phone"
type="number" type="number"
autofocus
/> />
<Input <Input
v-model="form.email" v-model="form.email"
id="email.title" id="email.title"
type="email" type="email"
:onError="form.errors.email" :onError="form.errors.email"
autofocus
required required
/> />
<slot /> <slot />

54
src/pages/Admin/Users/Index.vue
View File

@ -1,8 +1,10 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { can, apiTo, viewTo } from './Module'
import { useSearcher } from '@Services/Api'; import { useSearcher } from '@Services/Api';
import { hasPermission } from '@Plugins/RolePermission'; import { hasPermission } from '@Plugins/RolePermission';
import { can, apiTo, viewTo, transl } from './Module'
import ModalController from '@Controllers/ModalController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import DestroyView from '@Holos/Modal/Template/Destroy.vue'; import DestroyView from '@Holos/Modal/Template/Destroy.vue';
@ -10,14 +12,16 @@ import SearcherHead from '@Holos/Searcher.vue';
import Table from '@Holos/Table.vue'; import Table from '@Holos/Table.vue';
import ShowView from './Modals/Show.vue'; import ShowView from './Modals/Show.vue';
/** Controladores */
const Modal = new ModalController();
/** Propiedades */ /** Propiedades */
const destroyModal = ref(Modal.destroyModal);
const showModal = ref(Modal.showModal);
const modelModal = ref(Modal.modelModal);
const models = ref([]); const models = ref([]);
/** Referencias */
const showModal = ref(false);
const destroyModal = ref(false);
/** Métodos */
const searcher = useSearcher({ const searcher = useSearcher({
url: apiTo('index'), url: apiTo('index'),
onSuccess: (r) => models.value = r.models, onSuccess: (r) => models.value = r.models,
@ -33,7 +37,7 @@ onMounted(() => {
<template> <template>
<div> <div>
<SearcherHead <SearcherHead
:title="transl('title')" :title="$t('users.title')"
@search="(x) => searcher.search(x)" @search="(x) => searcher.search(x)"
> >
<RouterLink <RouterLink
@ -68,14 +72,11 @@ onMounted(() => {
/> />
</template> </template>
<template #body="{items}"> <template #body="{items}">
<tr <tr v-for="model in items">
v-for="model in items" <td class="table-item border">
class="table-row"
>
<td class="table-cell">
{{ `${model.name} ${model.paternal}` }} {{ `${model.name} ${model.paternal}` }}
</td> </td>
<td class="table-cell"> <td class="table-item border">
<p> <p>
<a <a
class="hover:underline" class="hover:underline"
@ -87,21 +88,21 @@ onMounted(() => {
</p> </p>
<p v-if="model.phone" class="font-semibold text-xs"> <p v-if="model.phone" class="font-semibold text-xs">
<b>Teléfono: </b> <b>Teléfono: </b>
<span <a
class="hover:underline" class="hover:underline"
target="_blank" target="_blank"
:href="`tel:${model.phone}`" :href="`tel:${model.phone}`"
> >
{{ model.phone }} {{ model.phone }}
</span> </a>
</p> </p>
</td> </td>
<td class="table-cell"> <td class="table-item">
<div class="table-actions"> <div class="table-actions">
<IconButton <IconButton
icon="visibility" icon="visibility"
:title="$t('crud.show')" :title="$t('crud.show')"
@click="showModal.open(model)" @click="Modal.switchShowModal(model)"
outline outline
/> />
<RouterLink <RouterLink
@ -119,7 +120,7 @@ onMounted(() => {
v-if="can('destroy')" v-if="can('destroy')"
icon="delete" icon="delete"
:title="$t('crud.destroy')" :title="$t('crud.destroy')"
@click="destroyModal.open(model)" @click="Modal.switchDestroyModal(model)"
outline outline
/> />
<RouterLink <RouterLink
@ -147,28 +148,31 @@ onMounted(() => {
</tr> </tr>
</template> </template>
<template #empty> <template #empty>
<td class="table-cell"> <td class="table-item border">
<div class="flex items-center text-sm"> <div class="flex items-center text-sm">
<p class="font-semibold"> <p class="font-semibold">
{{ $t('registers.empty') }} {{ $t('registers.empty') }}
</p> </p>
</div> </div>
</td> </td>
<td class="table-cell">-</td> <td class="table-item border">-</td>
<td class="table-cell">-</td> <td class="table-item border">-</td>
</template> </template>
</Table> </Table>
</div> </div>
<ShowView <ShowView
ref="showModal" v-if="can('index')"
:show="showModal"
:model="modelModal"
@close="Modal.switchShowModal"
/> />
<DestroyView <DestroyView
v-if="can('destroy')" v-if="can('destroy')"
ref="destroyModal" :model="modelModal"
subtitle="last_name" :show="destroyModal"
:to="(user) => apiTo('destroy', { user })" :to="(user) => apiTo('destroy', { user })"
@close="Modal.switchDestroyModal"
@update="searcher.search()" @update="searcher.search()"
/> />
</div> </div>

53
src/pages/Admin/Users/Modals/Show.vue
View File

@ -1,56 +1,37 @@
<script setup> <script setup>
import { ref } from 'vue';
import { getDateTime } from '@Controllers/DateController'; import { getDateTime } from '@Controllers/DateController';
import Header from '@Holos/Modal/Elements/Header.vue'; import Header from '@Holos/Modal/Elements/Header.vue';
import ShowModal from '@Holos/Modal/Show.vue'; import ShowModal from '@Holos/Modal/Show.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue'; import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Eventos */ /** Eventos */
const emit = defineEmits([ defineEmits([
'close', 'close',
'reload'
]); ]);
/** Propiedades */ /** Propiedades */
const model = ref(null); defineProps({
show: Boolean,
/** Referencias */ model: Object
const modalRef = ref(null);
/** Métodos */
function close() {
model.value = null;
emit('close');
}
/** Exposiciones */
defineExpose({
open: (data) => {
model.value = data;
modalRef.value.open();
}
}); });
</script> </script>
<template> <template>
<ShowModal <ShowModal
ref="modalRef" :show="show"
@close="close" @close="$emit('close')"
> >
<div v-if="model"> <Header
<Header :title="model.name"
:title="model.name" :subtitle="model.last_name"
:subtitle="model.last_name" >
> <div class="flex w-full flex-col">
<div class="flex w-full flex-col"> <div class="flex w-full justify-center items-center">
<div class="flex w-full justify-center items-center"> <img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
<img :src="model.profile_photo_url" alt="Photo" class="w-24 h-24 rounded-full">
</div>
</div> </div>
</Header> </div>
<div class="flex w-full p-4"> </Header>
<div class="py-2 border-b">
<div class="flex w-full px-4 py-2">
<GoogleIcon <GoogleIcon
class="text-xl text-success" class="text-xl text-success"
name="contact_mail" name="contact_mail"

39
src/pages/Admin/Users/Online.vue
View File

@ -1,24 +1,30 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { can, apiTo, viewTo, transl } from './Module' import { can, apiTo, viewTo } from './Module'
import { users } from '@Plugins/AuthUsers' import { users } from '@Plugins/AuthUsers'
import ModalController from '@Controllers/ModalController.js';
import IconButton from '@Holos/Button/Icon.vue' import IconButton from '@Holos/Button/Icon.vue'
import DestroyView from '@Holos/Modal/Template/Destroy.vue'; import DestroyView from '@Holos/Modal/Template/Destroy.vue';
import Header from '@Holos/PageHeader.vue'; import Header from '@Holos/PageHeader.vue';
import Table from '@Holos/TableSimple.vue'; import Table from '@Holos/TableSimple.vue';
import ShowView from './Modals/Show.vue'; import ShowView from './Modals/Show.vue';
/** Controladores */
const Modal = new ModalController();
/** Propiedades */ /** Propiedades */
const destroyModal = ref(null); const destroyModal = ref(Modal.destroyModal);
const showModal = ref(null); const showModal = ref(Modal.showModal);
const modelModal = ref(Modal.modelModal);
</script> </script>
<template> <template>
<div> <div>
<Header <Header
:title="transl('online.title')" :title="$t('users.online.title')"
> >
<RouterLink <RouterLink
v-if="can('create')" v-if="can('create')"
@ -32,7 +38,7 @@ const showModal = ref(null);
/> />
</RouterLink> </RouterLink>
</Header> </Header>
<p class="mt-2">{{ transl('online.description') }} {{ users.length - 1 }} {{ transl('online.count') }}</p> <p class="mt-2">{{ $t('users.online.description') }} {{ users.length - 1 }} {{ $t('users.online.count') }}</p>
<div class="w-full -mt-2"> <div class="w-full -mt-2">
<Table <Table
:items="users" :items="users"
@ -49,13 +55,13 @@ const showModal = ref(null);
<template #body="{items}"> <template #body="{items}">
<template v-for="model in items"> <template v-for="model in items">
<tr v-if="model.id != 1"> <tr v-if="model.id != 1">
<td class="table-cell border"> <td class="table-item border">
<img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full"> <img :src="model.profile_photo_url" alt="Profile photo" class="w-10 h-10 rounded-full">
</td> </td>
<td class="table-cell border"> <td class="table-item border">
{{ `${model.full_name}` }} {{ `${model.full_name}` }}
</td> </td>
<td class="table-cell border"> <td class="table-item border">
<p> <p>
<a <a
class="hover:underline" class="hover:underline"
@ -76,12 +82,12 @@ const showModal = ref(null);
</a> </a>
</p> </p>
</td> </td>
<td class="table-cell"> <td class="table-item">
<div class="table-actions"> <div class="table-actions">
<IconButton <IconButton
icon="visibility" icon="visibility"
:title="$t('crud.show')" :title="$t('crud.show')"
@click="showModal.open(model)" @click="Modal.switchShowModal(model)"
outline outline
/> />
<RouterLink <RouterLink
@ -99,7 +105,7 @@ const showModal = ref(null);
v-if="can('destroy')" v-if="can('destroy')"
icon="delete" icon="delete"
:title="$t('crud.destroy')" :title="$t('crud.destroy')"
@click="destroyModal.open(model)" @click="Modal.switchDestroyModal(model)"
outline outline
/> />
<RouterLink <RouterLink
@ -121,14 +127,17 @@ const showModal = ref(null);
</div> </div>
<ShowView <ShowView
ref="showModal" v-if="can('index')"
:show="showModal"
:model="modelModal"
@close="Modal.switchShowModal"
/> />
<DestroyView <DestroyView
v-if="can('destroy')" v-if="can('destroy')"
ref="destroyModal" :model="modelModal"
subtitle="last_name" :show="destroyModal"
:to="(user) => apiTo('destroy', { user })" :to="(user) => apiTo('destroy', { user })"
@close="Modal.switchDestroyModal"
@update="searcher.search()" @update="searcher.search()"
/> />
</div> </div>

6
src/pages/Admin/Users/Settings.vue
View File

@ -35,13 +35,13 @@ onMounted(() => {
/> />
</RouterLink> </RouterLink>
</PageHeader> </PageHeader>
<div class="flex w-full"> <div class="flex w-full pt-2">
<div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm"> <div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-lg">
<p class="pt-2 text-lg font-bold text-gray-50"> <p class="pt-2 text-lg font-bold text-gray-50">
{{ user?.name }} {{ user?.name }}
</p> </p>
<p class="text-sm text-gray-100"> <p class="text-sm text-gray-100">
{{ user?.last_name }} {{ user?.full_last_name }}
</p> </p>
</div> </div>
</div> </div>

8
src/pages/Auth/ForgotPassword.vue
View File

@ -1,8 +1,6 @@
<script setup> <script setup>
import { useRouter } from 'vue-router';
import { useForm } from '@Services/Api'; import { useForm } from '@Services/Api';
import { viewTo } from './Module'; import { useRouter } from 'vue-router';
import Input from '@Holos/Form/InputWithIcon.vue' import Input from '@Holos/Form/InputWithIcon.vue'
import PrimaryButton from '@Holos/Button/Primary.vue' import PrimaryButton from '@Holos/Button/Primary.vue'
@ -23,11 +21,11 @@ const submit = () => {
form.post(route('auth.forgot-password'), { form.post(route('auth.forgot-password'), {
onSuccess: () => { onSuccess: () => {
Notify.success(Lang('auth.forgotPassword.success')); Notify.success(Lang('auth.forgotPassword.success'));
router.push(viewTo({ name: 'index' })); router.push({ name: 'index' });
}, },
onError: () => { onError: () => {
Notify.error(Lang('auth.forgotPassword.error')); Notify.error(Lang('auth.forgotPassword.error'));
router.push(viewTo({ name: 'index' })); router.push({ name: 'index' });
} }
}); });
}; };

9
src/pages/Auth/Login.vue
View File

@ -1,16 +1,11 @@
<script setup> <script setup>
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { defineApiToken, defineCsrfToken, hasToken, useForm } from '@Services/Api.js' import { defineApiToken, defineCsrfToken, hasToken, useForm } from '@Services/Api.js'
import { defineUser } from '@Services/Page'; import { defineUser } from '@Services/Page';
import { viewTo } from './Module.js';
import PrimaryButton from '@Holos/Button/Primary.vue' import PrimaryButton from '@Holos/Button/Primary.vue'
import Input from '@Holos/Form/InputWithIcon.vue' import Input from '@Holos/Form/InputWithIcon.vue'
/** Definidores */
const router = useRouter();
/** Propiedades */ /** Propiedades */
defineProps({ defineProps({
canResetPassword: Boolean, canResetPassword: Boolean,
@ -38,7 +33,7 @@ const login = () => {
/** Ciclos */ /** Ciclos */
onMounted(() => { onMounted(() => {
if (hasToken()) { if (hasToken()) {
router.push({ name: 'dashboard.index' }); location.replace('/')
} }
}) })
</script> </script>
@ -67,7 +62,7 @@ onMounted(() => {
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">
<RouterLink <RouterLink
class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all" class="text-sm ml-2 hover:text-blue-200 cursor-pointer hover:-translate-y-1 duration-500 transition-all"
:to="viewTo({ name: 'forgot-password' })" :to="$view({ name: 'forgot-password' })"
> >
{{ $t('auth.forgotPassword.ask') }} {{ $t('auth.forgotPassword.ask') }}
</RouterLink> </RouterLink>

17
src/pages/Auth/Module.js
View File

@ -1,17 +0,0 @@
import { lang } from '@Lang/i18n';
// Ruta API
const apiTo = (name, params = {}) => route(`auth.${name}`, params)
// Ruta visual
const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `auth.${name}`, params, query })
// Obtener traducción del componente
const transl = (str) => lang(`auth.${str}`)
export {
viewTo,
apiTo,
transl
}

6
src/pages/Auth/Register.vue
View File

@ -96,11 +96,11 @@ const submit = () => {
<div class="ms-2 text-primary-t dark:text-primary-dt"> <div class="ms-2 text-primary-t dark:text-primary-dt">
I agree to the I agree to the
<a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <a target="_blank" :href="route('terms.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ $t('terms.service') }} {{ $t('terms.service') }}
</a> </a>
and and
<a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <a target="_blank" :href="route('policy.show')" class="underline text-sm rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ $t('policy.privacy') }} {{ $t('policy.privacy') }}
</a> </a>
</div> </div>
@ -110,7 +110,7 @@ const submit = () => {
</div> </div>
<div class="flex items-center justify-end mt-4"> <div class="flex items-center justify-end mt-4">
<Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> <Link :href="route('login')" class="underline text-sm bg-page-text hover:bg-page-background text-page-background hover:text-page-text rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
{{ $t('auth.register.already') }} {{ $t('auth.register.already') }}
</Link> </Link>

10
src/pages/Auth/ResetPassword.vue
View File

@ -2,7 +2,7 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useForm } from '@Services/Api.js' import { useForm } from '@Services/Api.js'
import { viewTo } from './Module';
import PrimaryButton from '@Holos/Button/Primary.vue'; import PrimaryButton from '@Holos/Button/Primary.vue';
import Input from '@Holos/Form/InputWithIcon.vue' import Input from '@Holos/Form/InputWithIcon.vue'
@ -24,17 +24,21 @@ const submit = () => {
form.post(route('auth.reset-password'), { form.post(route('auth.reset-password'), {
onSuccess: () => { onSuccess: () => {
Notify.success(Lang('auth.reset.success')); Notify.success(Lang('auth.reset.success'));
router.push(viewTo({ name: 'index' })); router.push({ name: 'index' })
}, },
onError: () => { onError: () => {
router.push(viewTo({ name: 'index' })); router.push({ name: 'index' });
} }
}); });
}; };
onMounted(() => { onMounted(() => {
console.log('mount')
form.token = vroute.query.token; form.token = vroute.query.token;
email.value = vroute.query.email; email.value = vroute.query.email;
// router.replace({ query: {} });
}) })
</script> </script>

68
src/pages/Changelogs/App.vue → src/pages/Changelogs.vue
View File

@ -56,68 +56,6 @@ const changelogs = [
'UPDATE: Redirección a dashboard al iniciar sesión.' 'UPDATE: Redirección a dashboard al iniciar sesión.'
], ],
date: '2025-01-03' date: '2025-01-03'
},
{
version: '0.9.6',
details: [
'FIX: Historial de acciones, modo responsivo.',
'ADD: Recuperación de contraseña.'
],
date: '2025-01-06'
},
{
version: '0.9.7',
details: [
'ADD: Visualización de historial de cambios del backend.',
],
date: '2025-01-17'
},
{
version: '0.9.8',
details: [
'UPDATE: Actualización de dependencias.',
'UPDATE: TailwindCSS 3 => 4.',
'UPDATE: Actualización de Diseño, mejoras visuales.',
],
date: '2025-03-04'
},
{
version: '0.9.9',
details: [
'FIX: Obtención de recursos de backend mediante `api.resource`.',
'FIX: Títulos de modal de eliminación ahora son editables.',
'UPDATE: Simplificación de las rutas de autenticación.',
'UPDATE: Traducciones modulares faltantes.',
'UPDATE: Ahora las plantillas se definen en el grupo de rutas, y se heredan en las rutas hijas.',
'ADD: Función creación de URL a backend fuera de VUEJS.',
],
date: '2025-03-13'
},
{
version: '0.9.10',
details: [
'ADD: Se actualizo el método api.resource por api.catalog para obtener catálogos del backend.',
'UPDATE: Actualización de dependencias.'
],
date: '2025-05-23'
},
{
version: '0.9.11',
details: [
'FIX: El useApi clonaba comportamientos en instancias de la misma página.',
'UPDATE: Actualización de dependencias.'
],
date: '2025-05-23'
},
{
version: '0.9.12',
details: [
'FIX: Token de sesión ahora se almacena en localStorage para mantener la sesión activa en el frontend por el tiempo de vida del token.',
'UPDATE: Actualización de dependencias.',
'UPDATE: Funcionamiento de los modals.',
'ADD: Breadcrumbs.'
],
date: '2025-07-14'
} }
] ]
</script> </script>
@ -142,13 +80,13 @@ const changelogs = [
<template #body="{items}"> <template #body="{items}">
<template v-for="item in items"> <template v-for="item in items">
<tr> <tr>
<td class="table-cell"> <td class="table-item">
<span v-text="item.version" /> <span v-text="item.version" />
</td> </td>
<td class="table-cell"> <td class="table-item">
<span v-text="item.date" /> <span v-text="item.date" />
</td> </td>
<td class="table-cell"> <td class="table-item">
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li v-for="detail in item.details.reverse()" v-text="detail" /> <li v-for="detail in item.details.reverse()" v-text="detail" />
</ul> </ul>

54
src/pages/Changelogs/Core.vue
View File

@ -1,54 +0,0 @@
<script setup>
import { ref, onMounted } from 'vue';
import { api } from '@Services/Api';
import Table from '@Holos/TableSimple.vue';
const changelogs = ref([]);
onMounted(() => {
api.get(route('changelogs'), {
onSuccess: (response) => {
changelogs.value = response;
}
});
});
</script>
<template>
<div>
<h1>{{ $t('changelogs.title') }}</h1>
<Table :items="changelogs">
<template #head>
<th
v-text="$t('version')"
class="w-10"
/>
<th
v-text="$t('date')"
class="w-24"
/>
<th
v-text="$t('details')"
/>
</template>
<template #body="{items}">
<template v-for="item in items">
<tr>
<td class="table-cell">
<span v-text="item.version" />
</td>
<td class="table-cell">
<span v-text="item.date" />
</td>
<td class="table-cell">
<ul class="list-disc list-inside">
<li v-for="detail in item.changes" v-text="detail" />
</ul>
</td>
</tr>
</template>
</template>
</Table>
</div>
</template>

5
src/pages/Examples/Index.vue
View File

@ -1,5 +0,0 @@
<template>
<div class="p-2">
<h4>Rutas de ejemplo</h4>
</div>
</template>

73
src/pages/Profile/Notifications/Index.vue
View File

@ -2,21 +2,25 @@
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { useSearcher } from '@Services/Api'; import { useSearcher } from '@Services/Api';
import ModalController from '@Controllers/ModalController.js';
import { getDateTime } from '@Controllers/DateController.js'; import { getDateTime } from '@Controllers/DateController.js';
import SearcherHead from '@Holos/Searcher.vue'; import SearcherHead from '@Holos/Searcher.vue';
import Table from '@Holos/Table.vue'; import Table from '@Holos/Table.vue';
import IconButton from '@Holos/Button/Icon.vue'; import IconButton from '@Holos/Button/Icon.vue';
import DestroyModal from '@Holos/Modal/Template/Destroy.vue'; import ShowView from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
import ShowModal from '@Holos/Skeleton/Sidebar/Notification/Show.vue'; import GoogleIcon from '@Shared/GoogleIcon.vue';
/** Controladores */
const Modal = new ModalController();
/** Propiedades */ /** Propiedades */
const destroyModal = ref(null); // const destroyModal = ref(Modal.destroyModal);
const showModal = ref(false); const showModal = ref(Modal.showModal);
const modelModal = ref(Modal.modelModal);
const models = ref([]); const models = ref([]);
// Servicios
const searcher = useSearcher({ const searcher = useSearcher({
url: route('system.notifications.all'), url: route('system.notifications.all'),
onSuccess: (r) => models.value = r.models, onSuccess: (r) => models.value = r.models,
@ -64,65 +68,72 @@ onMounted(() => {
/> />
</template> </template>
<template #body="{items}"> <template #body="{items}">
<tr v-for="model in items" class="table-row"> <tr v-for="model in items">
<td class="table-cell border"> <td class="table-item border">
{{ model.data.title }} {{ model.data.title }}
</td> </td>
<td class="table-cell border"> <td class="table-item border">
{{ model.data.description }} {{ model.data.description }}
</td> </td>
<td class="table-cell border"> <td class="table-item border">
{{ getDateTime(model.created_at) }} {{ getDateTime(model.created_at) }}
</td> </td>
<td class="table-cell border"> <td class="table-item border">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div> <div class="w-2 h-2 rounded-full" :class="model.read_at ? 'bg-success' : 'bg-danger'"></div>
<span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span> <span class="ml-2">{{ model.read_at ? $t('readed') : (model.is_closed ? $t('omitted') : $t('unreaded')) }}</span>
</div> </div>
</td> </td>
<td class="table-cell"> <td class="table-item">
<div class="table-actions"> <div class="table-actions">
<IconButton <IconButton
icon="visibility" icon="visibility"
:title="$t('crud.show')" :title="$t('crud.show')"
@click="showModal.open(model)" @click="Modal.switchShowModal(model)"
outline outline
/> />
<IconButton <!-- <GoogleIcon
icon="delete" v-if="can('destroy')"
class="btn-icon"
name="delete"
:title="$t('crud.destroy')" :title="$t('crud.destroy')"
@click="destroyModal.open(model)" @click="Modal.switchDestroyModal(model)"
outline outline
/> /> -->
</div> </div>
</td> </td>
</tr> </tr>
</template> </template>
<template #empty> <template #empty>
<td class="table-cell border"> <td class="table-item border">
<div class="flex items-center text-sm"> <div class="flex items-center text-sm">
<p class="font-semibold"> <p class="font-semibold">
{{ $t('registers.empty') }} {{ $t('registers.empty') }}
</p> </p>
</div> </div>
</td> </td>
<td class="table-cell border">-</td> <td class="table-item border">-</td>
<td class="table-cell border">-</td> <td class="table-item border">-</td>
<td class="table-cell border">-</td> <td class="table-item border">-</td>
<td class="table-cell border">-</td> <td class="table-item border">-</td>
</template> </template>
</Table> </Table>
</div> </div>
<ShowModal <ShowView
ref="showModal" :show="showModal"
:model="modelModal"
@close="Modal.switchShowModal"
@reload="searcher.search()" @reload="searcher.search()"
/> />
<DestroyModal <!-- <DestroyView
ref="destroyModal" v-if="can('destroy')"
:to="(id) => route('system.notifications.destroy', { id })" :model="modelModal"
@update="searcher.search()" :show="destroyModal"
/> :to="(user) => apiTo('destroy', { user })"
@close="Modal.switchDestroyModal"
@update="getNotifications"
/> -->
</div> </div>
</template> </template>

40
src/pages/Profile/Partials/DeleteUserForm.vue
View File

@ -5,11 +5,11 @@ import { logout } from '@Services/Page';
import ActionSection from '@Holos/ActionSection.vue'; import ActionSection from '@Holos/ActionSection.vue';
import DangerButton from '@Holos/Button/Danger.vue'; import DangerButton from '@Holos/Button/Danger.vue';
import DialogModal from '@Holos/Modal/Elements/Base.vue'; import DialogModal from '@Holos/DialogModal.vue';
import SecondaryButton from '@Holos/Button/Secondary.vue'; import SecondaryButton from '@Holos/Button/Secondary.vue';
import Input from '@Holos/Form/Input.vue'; import Input from '@Holos/Form/Input.vue';
const modalRef = ref(null); const confirmingUserDeletion = ref(false);
const passwordInput = ref(null); const passwordInput = ref(null);
const form = useForm({ const form = useForm({
@ -17,7 +17,7 @@ const form = useForm({
}); });
const confirmUserDeletion = () => { const confirmUserDeletion = () => {
modalRef.value.open(); confirmingUserDeletion.value = true;
setTimeout(() => passwordInput.value.focus(), 250); setTimeout(() => passwordInput.value.focus(), 250);
}; };
@ -26,7 +26,7 @@ const deleteUser = () => {
form.delete(route('user.destroy'), { form.delete(route('user.destroy'), {
preserveScroll: true, preserveScroll: true,
onSuccess: () => { onSuccess: () => {
modalRef.value.close(); closeModal();
logout(); logout();
}, },
onError: () => passwordInput.value.focus(), onError: () => passwordInput.value.focus(),
@ -34,7 +34,9 @@ const deleteUser = () => {
}); });
}; };
const onCloseModal = () => { const closeModal = () => {
confirmingUserDeletion.value = false;
form.reset(); form.reset();
}; };
</script> </script>
@ -61,33 +63,27 @@ const onCloseModal = () => {
</div> </div>
<!-- Delete Account Confirmation Modal --> <!-- Delete Account Confirmation Modal -->
<DialogModal <DialogModal :show="confirmingUserDeletion" @close="closeModal">
ref="modalRef"
@close="onCloseModal"
>
<template #title> <template #title>
{{ $t('account.delete.title') }} {{ $t('account.delete.title') }}
</template> </template>
<template #content> <template #content>
<div class="px-4 pb-2"> {{ $t('account.delete.confirm') }}
<p>{{ $t('account.delete.confirm') }}</p>
<div class="mt-4">
<Input
ref="passwordInput"
v-model="form.password"
id="password"
type="password"
:onError="form.errors.password"
/>
</div>
<div class="mt-4">
<Input
ref="passwordInput"
v-model="form.password"
id="password"
type="password"
:onError="form.errors.password"
/>
</div> </div>
</template> </template>
<template #footer> <template #footer>
<SecondaryButton @click="modalRef.close()"> <SecondaryButton @click="closeModal">
{{ $t('cancel') }} {{ $t('cancel') }}
</SecondaryButton> </SecondaryButton>

2
src/pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
View File

@ -3,7 +3,7 @@ import { ref } from 'vue';
import { useForm } from '@Services/Api'; import { useForm } from '@Services/Api';
import ActionSection from '@Holos/ActionSection.vue'; import ActionSection from '@Holos/ActionSection.vue';
import DialogModal from '@Holos/Modal/Elements/Base.vue'; import DialogModal from '@Holos/DialogModal.vue';
import PrimaryButton from '@Holos/Button/Primary.vue'; import PrimaryButton from '@Holos/Button/Primary.vue';
import SecondaryButton from '@Holos/Button/Secondary.vue'; import SecondaryButton from '@Holos/Button/Secondary.vue';
import Input from '@Holos/Form/Input.vue'; import Input from '@Holos/Form/Input.vue';

24
src/router/Auth.js Normal file
View File

@ -0,0 +1,24 @@
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'index',
component: () => import('@Pages/Auth/Login.vue')
},
{
path: '/forgot-password',
name: 'forgot-password',
component: () => import('@Pages/Auth/ForgotPassword.vue')
},
{
path: '/reset-password',
name: 'reset-password',
component: () => import('@Pages/Auth/ResetPassword.vue')
}
]
})
export default router

14
src/router/Examples.js
View File

@ -1,14 +0,0 @@
/**
* Archivo de rutas de ejemplos.
*
* En producción se debe eliminar o comentar. Las vistas de ejemplo opcionalmente pueden ser eliminadas o
* dejadas como referencia.
*/
export default [
{
path: '/examples',
name: 'examples.index',
component: () => import('@Pages/Examples/Index.vue')
}
]

152
src/router/Index.js
View File

@ -1,8 +1,6 @@
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import { hasPermission } from '@Plugins/RolePermission'; import { hasPermission } from '@Plugins/RolePermission';
import examples from './Examples';
function can(next, can) { function can(next, can) {
if (!hasPermission(can)) { if (!hasPermission(can)) {
next({ name: '404' }); next({ name: '404' });
@ -16,78 +14,43 @@ const router = createRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
component: () => import('@Layouts/AppLayout.vue'), name: 'index',
name: 'root', redirect: '/dashboard'
meta: { },
title: 'Inicio', {
icon: 'home', path: '/dashboard',
}, name: 'dashboard.index',
redirect: '/dashboard', component: () => import('@Pages/Dashboard/Index.vue')
}, {
path: '/profile',
children: [ children: [
{ {
path: '', path: '',
name: 'index', name: 'profile.show',
redirect: '/dashboard', component: () => import('@Pages/Profile/Show.vue')
meta: {
title: 'Inicio',
icon: 'home',
},
}, },
{ {
path: 'dashboard', path: 'notifications',
name: 'dashboard.index',
component: () => import('@Pages/Dashboard/Index.vue'),
},
{
path: 'profile',
children: [ children: [
{ {
path: '', path: '',
name: 'profile.show', name: 'profile.notifications.index',
component: () => import('@Pages/Profile/Show.vue'), component: () => import('@Pages/Profile/Notifications/Index.vue')
meta: { }
title: 'Perfil',
icon: 'person',
},
},
{
path: 'notifications',
children: [
{
path: '',
name: 'profile.notifications.index',
component: () => import('@Pages/Profile/Notifications/Index.vue')
}
]
},
] ]
}, },
], ]
}, }, {
{
path: '/admin', path: '/admin',
name: 'admin',
component: () => import('@Layouts/AppLayout.vue'),
meta: {
title: 'Inicio',
icon: 'home',
},
redirect: '/',
children: [ children: [
{ {
path: 'users', path: 'users',
name: 'admin.users',
meta: {
title: 'Usuarios',
icon: 'people',
},
redirect: '/admin/users',
children: [ children: [
{ {
path: '', path: '',
name: 'admin.users.index', name: 'admin.users.index',
beforeEnter: (to, from, next) => can(next, 'users.index'), beforeEnter: (to, from, next) => can(next, 'users.index'),
component: () => import('@Pages/Admin/Users/Index.vue'), component: () => import('@Pages/Admin/Users/Index.vue')
}, },
{ {
path: 'online', path: 'online',
@ -99,73 +62,41 @@ const router = createRouter({
path: 'create', path: 'create',
name: 'admin.users.create', name: 'admin.users.create',
beforeEnter: (to, from, next) => can(next, 'users.create'), beforeEnter: (to, from, next) => can(next, 'users.create'),
meta: {
title: 'Crear',
icon: 'add',
},
component: () => import('@Pages/Admin/Users/Create.vue') component: () => import('@Pages/Admin/Users/Create.vue')
}, { }, {
path: ':id/edit', path: ':id/edit',
name: 'admin.users.edit', name: 'admin.users.edit',
beforeEnter: (to, from, next) => can(next, 'users.edit'), beforeEnter: (to, from, next) => can(next, 'users.edit'),
meta: {
title: 'Editar',
icon: 'edit',
},
component: () => import('@Pages/Admin/Users/Edit.vue') component: () => import('@Pages/Admin/Users/Edit.vue')
}, { }, {
path: ':id/settings', path: ':id/settings',
name: 'admin.users.settings', name: 'admin.users.settings',
beforeEnter: (to, from, next) => can(next, 'users.settings'), beforeEnter: (to, from, next) => can(next, 'users.settings'),
component: () => import('@Pages/Admin/Users/Settings.vue'), component: () => import('@Pages/Admin/Users/Settings.vue')
meta: {
title: 'Configuración',
icon: 'settings',
},
} }
] ]
}, },
{ {
path: 'roles', path: 'roles',
name: 'admin.roles',
meta: {
title: 'Roles',
icon: 'license',
},
redirect: '/admin/roles',
children: [ children: [
{ {
path: '', path: '',
name: 'admin.roles.index', name: 'admin.roles.index',
component: () => import('@Pages/Admin/Roles/Index.vue'), component: () => import('@Pages/Admin/Roles/Index.vue')
}, },
{ {
path: 'create', path: 'create',
name: 'admin.roles.create', name: 'admin.roles.create',
component: () => import('@Pages/Admin/Roles/Create.vue'), component: () => import('@Pages/Admin/Roles/Create.vue')
meta: {
title: 'Crear',
icon: 'add',
},
}, { }, {
path: ':id/edit', path: ':id/edit',
name: 'admin.roles.edit', name: 'admin.roles.edit',
component: () => import('@Pages/Admin/Roles/Edit.vue'), component: () => import('@Pages/Admin/Roles/Edit.vue')
meta: {
title: 'Editar',
icon: 'edit',
},
} }
] ]
}, },
{ {
path: 'activities', path: 'activities',
name: 'admin.activities',
meta: {
title: 'Historial de acciones',
icon: 'event',
},
redirect: '/admin/activities',
children: [ children: [
{ {
path: '', path: '',
@ -179,47 +110,14 @@ const router = createRouter({
}, },
{ {
path: '/changelogs', path: '/changelogs',
component: () => import('@Layouts/AppLayout.vue'), name: 'changelogs',
children: [ component: () => import('@Pages/Changelogs.vue')
{
path: '',
name: 'changelogs.app',
component: () => import('@Pages/Changelogs/App.vue')
},
{
path: 'core',
name: 'changelogs.core',
component: () => import('@Pages/Changelogs/Core.vue')
}
]
},
{
path: '/auth',
component: () => import('@Holos/Layout/Auth.vue'),
children: [
{
path: '',
name: 'auth.index',
component: () => import('@Pages/Auth/Login.vue')
},
{
path: 'forgot-password',
name: 'auth.forgot-password',
component: () => import('@Pages/Auth/ForgotPassword.vue')
},
{
path: 'reset-password',
name: 'auth.reset-password',
component: () => import('@Pages/Auth/ResetPassword.vue')
}
]
}, },
{ {
path: '/:pathMatch(.*)*', path: '/:pathMatch(.*)*',
name: '404', name: '404',
component: () => import('@Pages/Errors/404.vue') component: () => import('@Pages/Errors/404.vue')
}, }
...examples,
] ]
}) })

20
src/services/Api.js
View File

@ -9,7 +9,7 @@ import axios from 'axios';
import { reactive, ref } from 'vue'; import { reactive, ref } from 'vue';
axios.defaults.withXSRFToken = true; axios.defaults.withXSRFToken = true;
axios.defaults.withCredentials = true; // axios.defaults.withCredentials = true;
/** /**
* Códigos de falla * Códigos de falla
@ -74,7 +74,7 @@ const closeSession = () => {
Notify.info(Lang('session.closed')) Notify.info(Lang('session.closed'))
location.replace('/') location.replace('auth.html')
} }
/** /**
@ -86,13 +86,6 @@ function composeKey(parent, key) {
return parent ? parent + '[' + key + ']' : key return parent ? parent + '[' + key + ']' : key
} }
/**
* URL API
*/
const apiURL = (path) => {
return import.meta.env.VITE_API_URL + '/api/' + path
}
/** /**
* Instancia de la API de uso directo * Instancia de la API de uso directo
*/ */
@ -142,6 +135,8 @@ const api = {
if(options.hasOwnProperty('onFail')) { if(options.hasOwnProperty('onFail')) {
options.onFail(data.data); options.onFail(data.data);
} }
console.log(data.data);
} }
if(options.hasOwnProperty('onFinish')) { if(options.hasOwnProperty('onFinish')) {
@ -218,8 +213,8 @@ const api = {
options options
}) })
}, },
catalog(resources, options) { resource(resources, options) {
this.post(apiURL('catalogs/get'), { this.post('resources/get', {
...options, ...options,
data: resources data: resources
}) })
@ -252,7 +247,7 @@ const api = {
/** /**
* Instancia de la API * Instancia de la API
*/ */
const useApi = () => reactive({...api}); const useApi = () => reactive(api);
/** /**
* Instancia de la API para formularios * Instancia de la API para formularios
@ -574,7 +569,6 @@ const useSearcher = (options = {
export { export {
api, api,
token, token,
apiURL,
closeSession, closeSession,
defineCsrfToken, defineCsrfToken,
defineApiToken, defineApiToken,

2
src/services/Page.js
View File

@ -110,8 +110,6 @@ const logout = () => {
onSuccess: (r) => { onSuccess: (r) => {
if(r.is_revoked === true) { if(r.is_revoked === true) {
closeSession() closeSession()
location.replace('/')
} }
} }
}); });

6
src/stores/Notifier.js
View File

@ -4,6 +4,9 @@ import { page } from '@Services/Page'
import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission' import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers' import { boot as bootAuthUsers, addUser, removeUser } from '@Plugins/AuthUsers'
/** Propiedades */
const hasNotifications = import.meta.env.VITE_REVERB_ACTIVE === 'true';
// Almacenar estado de la barra lateral derecha // Almacenar estado de la barra lateral derecha
const useNotifier = defineStore('notifier', { const useNotifier = defineStore('notifier', {
state: () => ({ state: () => ({
@ -11,13 +14,12 @@ const useNotifier = defineStore('notifier', {
unreadClosedCounter: 0, unreadClosedCounter: 0,
notifications: [], notifications: [],
isStarted: false, isStarted: false,
isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
user_id: 0, user_id: 0,
}), }),
actions: { actions: {
// Iniciar instancia // Iniciar instancia
boot() { boot() {
if(!this.isStarted && this.isEnabled) { if(!this.isStarted && hasNotifications) {
this.user_id = page.user.id; this.user_id = page.user.id;
this.subscribeGLobalNotifications(); this.subscribeGLobalNotifications();

26
tailwind.config.js Normal file
View File

@ -0,0 +1,26 @@
import defaultTheme from 'tailwindcss/defaultTheme';
import colors from './colors.json'
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}"
],
theme: {
extend: {
colors: colors,
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
'google-icon-outlined':['Material Symbols Outlined'],
'google-icon-outlined-fill':['Material Symbols Outlined Fill'],
'google-icon-rounded':['Material Symbols Rounded'],
'google-icon-rounded-fill':['Material Symbols Rounded Fill'],
'google-icon-sharp':['Material Symbols Sharp'],
'google-icon-sharp-fill':['Material Symbols Sharp Fill'],
},
},
},
plugins: [],
}

12
vite.config.js
View File

@ -1,14 +1,18 @@
import { fileURLToPath, URL } from 'node:url' import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import tailwindcss from "@tailwindcss/vite";
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue(), tailwindcss()], plugins: [vue()],
server: { build: {
allowedHosts: true, rollupOptions: {
input: {
main: './index.html', // Ruta al archivo index.html
auth: './auth.html', // Ruta al archivo auth.html
},
},
}, },
resolve: { resolve: {
alias: { alias: {