Compare commits
No commits in common. "dc26cc27da258180920ee36c912783c9626f777e" and "31862e7cf56232db64d1e29615ed1bbb60c40441" have entirely different histories.
dc26cc27da
...
31862e7cf5
2
.gitignore
vendored
2
.gitignore
vendored
@ -12,7 +12,7 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.env
|
||||
colors.css
|
||||
colors.json
|
||||
notes.md
|
||||
|
||||
# Editor directories and files
|
||||
|
||||
14
auth.html
Normal file
14
auth.html
Normal 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>
|
||||
|
||||
@ -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
34
colors.json.example
Normal 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"
|
||||
}
|
||||
@ -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
17
dockerfile
@ -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
12
install.sh
@ -1,13 +1,9 @@
|
||||
#! /bin/bash
|
||||
|
||||
if [ ! -f .env ]; then
|
||||
cp .env.example .env
|
||||
fi
|
||||
npm install
|
||||
cp .env.example .env
|
||||
cp colors.json.example colors.json
|
||||
|
||||
if [ ! -f colors.json ]; then
|
||||
cp colors.json.example colors.json
|
||||
fi
|
||||
|
||||
exec "$@"
|
||||
npm run build
|
||||
|
||||
echo "Done!"
|
||||
2813
package-lock.json
generated
2813
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@ -2,7 +2,7 @@
|
||||
"name": "notsoweb.frontend",
|
||||
"copyright": "Notsoweb Software Inc.",
|
||||
"private": true,
|
||||
"version": "0.9.12",
|
||||
"version": "0.9.5",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@ -10,23 +10,22 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/postcss": "^4.0.9",
|
||||
"@tailwindcss/vite": "^4.0.9",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"axios": "^1.8.1",
|
||||
"laravel-echo": "^2.0.2",
|
||||
"axios": "^1.7.8",
|
||||
"laravel-echo": "^1.17.1",
|
||||
"luxon": "^3.5.0",
|
||||
"pinia": "^3.0.1",
|
||||
"pusher-js": "^8.4.0",
|
||||
"tailwindcss": "^4.0",
|
||||
"pinia": "^2.2.8",
|
||||
"postcss": "^8.4.49",
|
||||
"pusher-js": "^8.4.0-rc2",
|
||||
"tailwindcss": "^3.4.15",
|
||||
"toastr": "^2.1.4",
|
||||
"uuid": "^11.1.0",
|
||||
"vite": "^6.2.0",
|
||||
"uuid": "^11.0.3",
|
||||
"vite": "^6.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.1",
|
||||
"vue-multiselect": "^3.2.0",
|
||||
"vue-i18n": "^10.0.5",
|
||||
"vue-multiselect": "^3.1.0",
|
||||
"vue-router": "^4.5.0",
|
||||
"ziggy-js": "^2.5.2"
|
||||
"ziggy-js": "^2.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.20",
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
50
src/auth.js
Normal file
50
src/auth.js
Normal 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();
|
||||
@ -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>
|
||||
@ -14,7 +14,7 @@ import SectionTitle from './SectionTitle.vue';
|
||||
</SectionTitle>
|
||||
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<nav class="flex items-center py-1 gap-0.5">
|
||||
<slot />
|
||||
</nav>
|
||||
</template>
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -19,7 +19,7 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<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"
|
||||
:type="type"
|
||||
>
|
||||
|
||||
@ -14,7 +14,7 @@ defineProps({
|
||||
|
||||
<template>
|
||||
<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"
|
||||
>
|
||||
<label class="text-base font-semibold tracking-wider">
|
||||
|
||||
@ -31,6 +31,6 @@ const proxyChecked = computed({
|
||||
v-model="proxyChecked"
|
||||
type="checkbox"
|
||||
: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>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue';
|
||||
import { useForm } from '@Services/Api';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
|
||||
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 SecondaryButton from './Button/Secondary.vue';
|
||||
|
||||
|
||||
46
src/components/Holos/DialogModal.vue
Normal file
46
src/components/Holos/DialogModal.vue
Normal 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>
|
||||
@ -95,7 +95,7 @@ const alignmentClasses = computed(() => {
|
||||
style="display: none;"
|
||||
@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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@ defineProps({
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
||||
@ -28,7 +28,7 @@ const vModel = computed({
|
||||
<template>
|
||||
<div class="relative w-full h-8">
|
||||
<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"
|
||||
:id="uuid"
|
||||
v-model="vModel"
|
||||
|
||||
@ -65,7 +65,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<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
|
||||
:name="icon"
|
||||
/>
|
||||
@ -73,7 +73,7 @@ onMounted(() => {
|
||||
ref="input"
|
||||
v-model="value"
|
||||
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 }"
|
||||
:disabled="disabled"
|
||||
:id="autoId"
|
||||
|
||||
@ -111,7 +111,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<div class="w-full grid gap-2 grid-cols-2 dark:bg-primary-d/50 rounded-md">
|
||||
<Selectable
|
||||
@ -138,7 +138,7 @@ onMounted(() => {
|
||||
</div>
|
||||
<div class="col-span-2 space-y-2 ">
|
||||
<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">
|
||||
<Input
|
||||
v-model="item.item.name"
|
||||
|
||||
@ -21,7 +21,7 @@ const hasActions = computed(() => !! useSlots().actions);
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<form @submit.prevent="$emit('submitted')">
|
||||
<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'"
|
||||
>
|
||||
<div class="grid grid-cols-6 gap-6">
|
||||
@ -29,7 +29,7 @@ const hasActions = computed(() => !! useSlots().actions);
|
||||
</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" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -68,7 +68,7 @@ const search = url => props.searcherCtl.searchWithInboxPagination(url);
|
||||
</button>
|
||||
<div
|
||||
@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}"
|
||||
>
|
||||
<button
|
||||
|
||||
@ -29,7 +29,7 @@ const selected = computed(() => {
|
||||
|
||||
<template>
|
||||
<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}"
|
||||
>
|
||||
<div class="pr-2">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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="flex items-center font-semibold">
|
||||
|
||||
@ -19,10 +19,10 @@ const props = defineProps({
|
||||
/** Propiedades computadas */
|
||||
const classes = computed(() => {
|
||||
let status = route().current(props.to, props.toParam)
|
||||
? 'bg-secondary/30'
|
||||
: 'border-transparent hover:bg-secondary/30';
|
||||
? 'bg-secondary bg-opacity-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>
|
||||
|
||||
@ -43,7 +43,7 @@ const classes = computed(() => {
|
||||
{{ title }}
|
||||
</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 }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
|
||||
@ -49,7 +49,7 @@ onMounted(() => {
|
||||
/>
|
||||
</div>
|
||||
<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 />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -47,7 +47,7 @@ onMounted(() => {
|
||||
/>
|
||||
</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 />
|
||||
</main>
|
||||
|
||||
|
||||
@ -47,11 +47,11 @@ onMounted(() => {
|
||||
/>
|
||||
</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 />
|
||||
</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>
|
||||
<span>
|
||||
©{{ APP_COPYRIGHT }}
|
||||
|
||||
@ -1,18 +1,12 @@
|
||||
<script setup>
|
||||
import { hasToken } from '@Services/Api';
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
/** Métodos */
|
||||
const home = () => {
|
||||
if(hasToken()) {
|
||||
router.push({ name: 'dashboard.index' });
|
||||
} else {
|
||||
location.replace('/');
|
||||
}
|
||||
}
|
||||
const home = () => router.push(view({ name: 'index' }));
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
|
||||
102
src/components/Holos/Modal.vue
Normal file
102
src/components/Holos/Modal.vue
Normal 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>
|
||||
@ -1,9 +1,7 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import ModalBase from './Elements/Base.vue';
|
||||
import DangerButton from '../Button/Danger.vue';
|
||||
import SecondaryButton from '../Button/Secondary.vue';
|
||||
import DialogModal from '../DialogModal.vue';
|
||||
|
||||
/** Eventos */
|
||||
defineEmits([
|
||||
@ -13,27 +11,16 @@ defineEmits([
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
title: {
|
||||
default: Lang('delete.title'),
|
||||
type: String
|
||||
}
|
||||
});
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: () => modalRef.value.open(),
|
||||
close: () => modalRef.value.close()
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ModalBase
|
||||
ref="modalRef"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<DialogModal :show="show">
|
||||
<template #title>
|
||||
<p
|
||||
class="font-bold text-xl"
|
||||
@ -41,17 +28,15 @@ defineExpose({
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="w-full right-0">
|
||||
<div class="overflow-hidden space-y-2 shadow-lg">
|
||||
<div class="w-full right-0 mt-2">
|
||||
<div class="rounded overflow-hidden shadow-lg">
|
||||
<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>
|
||||
<p
|
||||
class="mt-2 p-1 rounded-md text-justify bg-danger text-danger-t"
|
||||
v-text="$t('delete.confirm')"
|
||||
/>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="space-x-2">
|
||||
@ -62,9 +47,9 @@ defineExpose({
|
||||
/>
|
||||
<SecondaryButton
|
||||
v-text="$t('cancel')"
|
||||
@click="modalRef.close()"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ModalBase>
|
||||
</DialogModal>
|
||||
</template>
|
||||
51
src/components/Holos/Modal/Edit.vue
Normal file
51
src/components/Holos/Modal/Edit.vue
Normal 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>
|
||||
@ -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>
|
||||
@ -7,13 +7,13 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<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 />
|
||||
<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 }}
|
||||
</p>
|
||||
<p v-if="subtitle"
|
||||
class="text-sm text-primary-t dark:text-primary-t-d"
|
||||
class="text-sm text-gray-50"
|
||||
>
|
||||
{{ subtitle }}
|
||||
</p>
|
||||
|
||||
@ -1,32 +1,24 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import ModalBase from './Elements/Base.vue';
|
||||
import SecondaryButton from '../Button/Secondary.vue';
|
||||
import PrimaryButton from '../Button/Primary.vue';
|
||||
import DialogModal from '../DialogModal.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['close']);
|
||||
const emit = defineEmits([
|
||||
'close',
|
||||
'edit'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
editable: Boolean,
|
||||
show: Boolean,
|
||||
title: String
|
||||
});
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: () => modalRef.value.open(),
|
||||
close: () => modalRef.value.close()
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ModalBase
|
||||
ref="modalRef"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<DialogModal :show="show">
|
||||
<template #title>
|
||||
<p
|
||||
class="font-bold text-xl"
|
||||
@ -34,8 +26,8 @@ defineExpose({
|
||||
/>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="w-full right-0">
|
||||
<div class="overflow-hidden shadow-lg">
|
||||
<div class="w-full right-0 mt-2">
|
||||
<div class="rounded overflow-hidden shadow-lg">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
@ -43,11 +35,15 @@ defineExpose({
|
||||
<template #footer>
|
||||
<div class="space-x-2">
|
||||
<slot name="buttons" />
|
||||
<PrimaryButton v-if="editable"
|
||||
v-text="$t('update')"
|
||||
@click="$emit('edit')"
|
||||
/>
|
||||
<SecondaryButton
|
||||
v-text="$t('close')"
|
||||
@click="modalRef.close()"
|
||||
@click="$emit('close')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</ModalBase>
|
||||
</DialogModal>
|
||||
</template>
|
||||
@ -1,5 +1,4 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { api } from '@Services/Api.js';
|
||||
|
||||
import DestroyModal from '../Destroy.vue';
|
||||
@ -7,63 +6,40 @@ import Header from '../Elements/Header.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
'open',
|
||||
'close',
|
||||
'update'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
model: Object,
|
||||
show: Boolean,
|
||||
to: Function,
|
||||
title: {
|
||||
type: String,
|
||||
default: 'name'
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: 'description'
|
||||
}
|
||||
});
|
||||
|
||||
const model = ref({});
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
const destroy = () => {
|
||||
api.delete(props.to(model.value.id), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('deleted'));
|
||||
emit('update');
|
||||
},
|
||||
onError: () => {
|
||||
Notify.info(Lang('notFound'));
|
||||
},
|
||||
onFinish: () => {
|
||||
modalRef.value.close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (modelData) => {
|
||||
model.value = modelData;
|
||||
modalRef.value.open();
|
||||
|
||||
emit('open')
|
||||
const destroy = (id) => api.delete(props.to(id), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('deleted'));
|
||||
emit('close');
|
||||
emit('update');
|
||||
},
|
||||
onError: () => {
|
||||
Notify.info(Lang('notFound'));
|
||||
emit('close');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DestroyModal
|
||||
ref="modalRef"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
@destroy="destroy"
|
||||
@destroy="destroy(model.id)"
|
||||
>
|
||||
<Header
|
||||
:title="model[title]"
|
||||
:subtitle="model[subtitle]"
|
||||
:subtitle="model.full_last_name"
|
||||
:title="model.name"
|
||||
/>
|
||||
</DestroyModal>
|
||||
</template>
|
||||
@ -1,46 +1,32 @@
|
||||
<script setup>
|
||||
import { RouterLink, useRoute } from 'vue-router';
|
||||
import { breadcrumbItem, breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
|
||||
import { RouterLink } from 'vue-router';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import BreadcrumbContainer from '@Holos/Breadcrumb/Container.vue'
|
||||
import BreadcrumbItem from '@Holos/Breadcrumb/Item.vue'
|
||||
|
||||
/** Definidores */
|
||||
const vroute = useRoute();
|
||||
|
||||
const props = defineProps({
|
||||
defineProps({
|
||||
title: String
|
||||
});
|
||||
|
||||
const breadcrumbs = breadcrumbMeta(vroute);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<BreadcrumbContainer>
|
||||
<template v-for="(item, index) in breadcrumbs" :key="item.name">
|
||||
<BreadcrumbItem
|
||||
:name="item.name"
|
||||
:icon="item.icon"
|
||||
:route="item.route"
|
||||
:active="index === breadcrumbs.length - 1"
|
||||
<div v-if="title" class="flex w-full justify-center">
|
||||
<h2
|
||||
class="font-bold text-xl uppercase"
|
||||
v-text="title"
|
||||
/>
|
||||
</div>
|
||||
<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="home"
|
||||
filled
|
||||
/>
|
||||
</template>
|
||||
</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>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -16,7 +16,7 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<template v-if="items?.total > 0">
|
||||
<slot
|
||||
|
||||
@ -1,15 +1,8 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { breadcrumbMeta } from '@Controllers/BreadcrumbController.js';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.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 */
|
||||
const emit = defineEmits([
|
||||
@ -25,7 +18,6 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const breadcrumbs = breadcrumbMeta(vroute);
|
||||
const query = ref('');
|
||||
|
||||
/** Métodos */
|
||||
@ -38,20 +30,14 @@ const clear = () => {
|
||||
|
||||
search();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BreadcrumbContainer>
|
||||
<template v-for="(item, index) in breadcrumbs" :key="item.name">
|
||||
<BreadcrumbItem
|
||||
:name="item.name"
|
||||
:icon="item.icon"
|
||||
:route="item.route"
|
||||
:active="index === breadcrumbs.length - 1"
|
||||
/>
|
||||
</template>
|
||||
</BreadcrumbContainer>
|
||||
<div v-if="title" class="flex w-full justify-center">
|
||||
<h2
|
||||
class="font-bold text-xl uppercase"
|
||||
v-text="title"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex w-full justify-between items-center border-y-2 border-page-t dark:border-page-dt">
|
||||
<div>
|
||||
<div class="relative py-1 z-0">
|
||||
@ -71,7 +57,7 @@ const clear = () => {
|
||||
</div>
|
||||
<input
|
||||
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"
|
||||
:placeholder="placeholder"
|
||||
required
|
||||
|
||||
@ -31,8 +31,8 @@ const loader = useLoader()
|
||||
<header
|
||||
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}"
|
||||
>
|
||||
<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
|
||||
class="text-2xl mt-1 z-50"
|
||||
name="list"
|
||||
@ -45,18 +45,16 @@ const loader = useLoader()
|
||||
<li v-if="loader.isProcessing" class="flex items-center">
|
||||
<Loader />
|
||||
</li>
|
||||
<template v-if="notifier.isEnabled">
|
||||
<li v-if="hasPermission('users.online')">
|
||||
<RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
|
||||
<GoogleIcon
|
||||
class="text-xl mt-1"
|
||||
name="connect_without_contact"
|
||||
:title="$t('notifications.title')"
|
||||
/>
|
||||
<span class="text-xs">{{ users.length - 1 }}</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</template>
|
||||
<li v-if="hasPermission('users.online')">
|
||||
<RouterLink :to="{ name: 'admin.users.online' }" class="flex items-center">
|
||||
<GoogleIcon
|
||||
class="text-xl mt-1"
|
||||
name="connect_without_contact"
|
||||
:title="$t('notifications.title')"
|
||||
/>
|
||||
<span class="text-xs">{{ users.length - 1 }}</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li class="flex items-center">
|
||||
<GoogleIcon
|
||||
class="text-xl mt-1"
|
||||
@ -88,11 +86,11 @@ const loader = useLoader()
|
||||
<template #trigger>
|
||||
<div class="flex space-x-4">
|
||||
<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')"
|
||||
>
|
||||
<img
|
||||
class="h-8 w-8 rounded-sm object-cover"
|
||||
class="h-8 w-8 rounded-full object-cover"
|
||||
:alt="$page.user.name"
|
||||
:src="$page.user.profile_photo_url"
|
||||
>
|
||||
|
||||
@ -29,7 +29,7 @@ const year = (new Date).getFullYear();
|
||||
:class="{'w-64': leftSidebar.isClosed, 'w-screen': leftSidebar.isOpened}"
|
||||
>
|
||||
<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 class="flex w-full px-2 mt-2">
|
||||
<Logo
|
||||
@ -45,7 +45,7 @@ const year = (new Date).getFullYear();
|
||||
© {{year}} {{ APP_COPYRIGHT }}
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,7 +21,7 @@ const classes = computed(() => {
|
||||
? 'bg-secondary/30 dark:bg-secondary-d/30 border-secondary dark:border-secondary-d'
|
||||
: '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 = () => {
|
||||
|
||||
@ -4,24 +4,30 @@ import { RouterLink } from 'vue-router';
|
||||
import useNotificationSidebar from '@Stores/NotificationSidebar'
|
||||
import useNotifier from '@Stores/Notifier'
|
||||
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import ShowModal from './Notification/Show.vue';
|
||||
import Item from './Notification/Item.vue';
|
||||
import ModalController from '@Controllers/ModalController.js';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['open']);
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
import Item from './Notification/Item.vue';
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import ShowView from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
|
||||
|
||||
/** Definidores */
|
||||
const notifier = useNotifier();
|
||||
const notificationSidebar = useNotificationSidebar()
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits(['open']);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
sidebar: Boolean
|
||||
});
|
||||
|
||||
const showModal = ref(false);
|
||||
const showModal = ref(Modal.showModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
</script>
|
||||
|
||||
@ -36,7 +42,7 @@ const showModal = ref(false);
|
||||
:class="{'w-64': notificationSidebar.isClosed}"
|
||||
>
|
||||
<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="py-1">
|
||||
<h4 class="text-md font-semibold">
|
||||
@ -62,7 +68,7 @@ const showModal = ref(false);
|
||||
<Item v-for="notification in notifier.notifications"
|
||||
:key="notification.id"
|
||||
:notification="notification"
|
||||
@openModal="showModal.open(notification)"
|
||||
@openModal="Modal.switchShowModal(notification)"
|
||||
/>
|
||||
</ul>
|
||||
</div>
|
||||
@ -77,8 +83,10 @@ const showModal = ref(false);
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<ShowModal
|
||||
ref="showModal"
|
||||
<ShowView
|
||||
:show="showModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchShowModal"
|
||||
@reload="notifier.getUpdates()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -18,7 +18,7 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<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>
|
||||
<h6 class="text-[10px]">{{ getDateTime(notification.created_at) }}</h6>
|
||||
@ -43,7 +43,7 @@ defineProps({
|
||||
</div>
|
||||
</template>
|
||||
<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"
|
||||
class="rounded-full object-cover"
|
||||
:alt="notification.user.name"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { computed, nextTick, onUpdated } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
import useNotifier from '@Stores/Notifier';
|
||||
|
||||
@ -17,34 +17,28 @@ const emit = defineEmits([
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const modalRef = ref(null);
|
||||
const model = ref({});
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
model: Object
|
||||
});
|
||||
|
||||
/** Métodos */
|
||||
function readNotification() {
|
||||
if(!model.value.read_at) {
|
||||
notifier.readNotification(model.value.id);
|
||||
onUpdated(() => {
|
||||
if(!props.model.read_at && props.show) {
|
||||
notifier.readNotification(props.model.id);
|
||||
}
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
readNotification();
|
||||
if(!props.model.read_at && !props.show) {
|
||||
emit('reload');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
:title="$t('notification')"
|
||||
@close="$emit('reload')"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<Header
|
||||
:title="model.data?.title"
|
||||
:title="model.data.title"
|
||||
>
|
||||
</Header>
|
||||
<div class="py-2 border-b">
|
||||
@ -59,11 +53,11 @@ defineExpose({
|
||||
</p>
|
||||
<div class="flex flex-col">
|
||||
<b>{{ $t('description') }}: </b>
|
||||
{{ model.data?.description }}
|
||||
{{ model.data.description }}
|
||||
</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>
|
||||
{{ model.data?.message }}
|
||||
{{ model.data.message }}
|
||||
</div>
|
||||
<p>
|
||||
<b>{{ $t('created_at') }}: </b>
|
||||
|
||||
@ -23,7 +23,7 @@ const props = defineProps({
|
||||
:class="{'w-64': rightSidebar.isClosed, 'w-screen': rightSidebar.isOpened}"
|
||||
>
|
||||
<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>
|
||||
<ul class="flex h-full flex-col md:pb-4 space-y-1">
|
||||
<slot />
|
||||
|
||||
@ -16,10 +16,10 @@ const props = defineProps({
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<table v-if="!processing" class="w-full">
|
||||
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
|
||||
<thead>
|
||||
<tr>
|
||||
<slot name="head" />
|
||||
</tr>
|
||||
@ -50,7 +50,7 @@ const props = defineProps({
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -15,7 +15,7 @@ const props = defineProps({
|
||||
<div class="w-full overflow-hidden rounded-md shadow-lg">
|
||||
<div class="w-full overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<thead class="bg-primary text-primary-t dark:bg-primary-d dark:text-primary-dt">
|
||||
<thead>
|
||||
<tr>
|
||||
<slot name="head" />
|
||||
</tr>
|
||||
|
||||
@ -2,14 +2,13 @@
|
||||
import { computed } from 'vue';
|
||||
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 */
|
||||
const emit = defineEmits([
|
||||
'show',
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const props = defineProps({
|
||||
event: Object,
|
||||
});
|
||||
@ -28,8 +27,6 @@ const colors = {
|
||||
restored: 'primary',
|
||||
};
|
||||
|
||||
/** Propiedades computadas */
|
||||
|
||||
const eventType = computed(() => {
|
||||
return props.event.event.split('.')[1];
|
||||
});
|
||||
@ -49,7 +46,7 @@ const borderColor = computed(() => {
|
||||
<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 -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"
|
||||
@click="emit('show', event.data)"
|
||||
>
|
||||
@ -57,8 +54,8 @@ const borderColor = computed(() => {
|
||||
:name="icons[eventType]"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full rounded-sm shadow-xl dark:shadow-page-dt dark:shadow-xs my-2 mx-4">
|
||||
<div class="flex justify-between p-2 rounded-t-sm" :class="bgColor">
|
||||
<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-lg" :class="bgColor">
|
||||
<span
|
||||
class="font-medium text-sm cursor-pointer"
|
||||
@click="emit('show', event.data)"
|
||||
@ -70,13 +67,13 @@ const borderColor = computed(() => {
|
||||
</span>
|
||||
</div>
|
||||
<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 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 class="flex w-full flex-col justify-start space-y-2">
|
||||
<div class="flex flex-col space-y-2">
|
||||
<div>
|
||||
<h4 class="font-semibold">{{ $t('description') }}:</h4>
|
||||
<p>{{ event.description }}.</p>
|
||||
|
||||
@ -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
92
src/controllers/ModalController.js
Normal 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;
|
||||
@ -1,15 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "../../colors.css";
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@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";
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.app-bg-light {
|
||||
@apply bg-primary
|
||||
@ -20,7 +11,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -44,37 +35,53 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
@apply p-1
|
||||
@apply p-1
|
||||
}
|
||||
|
||||
.table-row {
|
||||
@apply hover:bg-secondary/10 dark:hover:bg-secondary-d/10 transition-colors duration-100
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
@apply px-2 py-0.5 text-sm border border-primary/30 dark:border-primary-dt/30;
|
||||
.table-item {
|
||||
@apply px-2 border text-sm;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@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 {
|
||||
@apply transition-all duration-300
|
||||
}
|
||||
|
||||
.with-color-transition {
|
||||
@apply transition-colors duration-500
|
||||
}
|
||||
|
||||
/**
|
||||
* Switch
|
||||
*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
@import './app.css';
|
||||
@import './icons.css';
|
||||
@import './notifications.css';
|
||||
@import "vue-multiselect/dist/vue-multiselect.css";
|
||||
@import './multiselect.css';
|
||||
@import './multiselect.css';
|
||||
@import './app.css';
|
||||
@ -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.gstatic.com/s/materialsymbolsrounded/v168/syl0-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjpZIvDmUSVOK7BDJ_vb9vUSzq3wzLK-P0J-V_Zs-QtQth3-jOcbTCVpeRL2w5rwZu2rIelXxc.woff2
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Material Symbols rounded-sm Fill';
|
||||
font-family: 'Material Symbols Rounded Fill';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
@apply bg-white dark:bg-transparent dark:text-white
|
||||
@apply bg-white dark:bg-primary dark:text-white
|
||||
}
|
||||
|
||||
.multiselect__input::placeholder {
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
@apply bg-success dark:bg-success-d;
|
||||
@apply dark:bg-green-800;
|
||||
}
|
||||
|
||||
.multiselect__tag-icon::after {
|
||||
@ -25,7 +25,7 @@
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
@apply bg-page dark:bg-page-d;
|
||||
@apply bg-gray-100 dark:bg-primary;
|
||||
}
|
||||
|
||||
|
||||
|
||||
24
src/index.js
24
src/index.js
@ -10,12 +10,10 @@ import Notify from '@Plugins/Notify'
|
||||
import { bootPermissions, bootRoles } from '@Plugins/RolePermission';
|
||||
import TailwindScreen from '@Plugins/TailwindScreen'
|
||||
import { pagePlugin } from '@Services/Page';
|
||||
import { defineApp, reloadApp, view } from '@Services/Page';
|
||||
import { apiURL } from '@Services/Api';
|
||||
import { reloadApp, view } from '@Services/Page';
|
||||
|
||||
import App from '@Components/App.vue'
|
||||
import App from '@Layouts/AppLayout.vue'
|
||||
import Error503 from '@Pages/Errors/503.vue'
|
||||
import { hasToken } from './services/Api';
|
||||
|
||||
// Configurar axios
|
||||
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
@ -31,11 +29,9 @@ async function boot() {
|
||||
|
||||
// Iniciar rutas
|
||||
try {
|
||||
const routes = await axios.get(apiURL('resources/routes'));
|
||||
const appData = await axios.get(apiURL('resources/app'));
|
||||
const routes = await axios.get(import.meta.env.VITE_API_URL + '/api/resources/routes');
|
||||
|
||||
window.Ziggy = routes.data;
|
||||
defineApp(appData.data);
|
||||
window.route = useRoute();
|
||||
window.view = view;
|
||||
initRoutes = true;
|
||||
@ -45,14 +41,12 @@ async function boot() {
|
||||
|
||||
if(initRoutes) {
|
||||
// Iniciar permisos
|
||||
if(hasToken()) {
|
||||
await bootPermissions();
|
||||
await bootRoles();
|
||||
|
||||
// Iniciar broadcast
|
||||
if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
|
||||
await import('@Services/Broadcast')
|
||||
}
|
||||
await bootPermissions();
|
||||
await bootRoles();
|
||||
|
||||
// Iniciar broadcast
|
||||
if(import.meta.env.VITE_REVERB_ACTIVE === 'true') {
|
||||
await import('@Services/Broadcast')
|
||||
}
|
||||
|
||||
reloadApp();
|
||||
|
||||
@ -298,7 +298,7 @@ export default {
|
||||
roles:{
|
||||
create: {
|
||||
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',
|
||||
onError: 'Error al crear el role',
|
||||
},
|
||||
@ -309,10 +309,9 @@ export default {
|
||||
onError: 'Error al actualizar el role',
|
||||
},
|
||||
update: {
|
||||
description: 'Si crees necesario, puedes actualizar el nombre del rol. No afecta a los permisos.',
|
||||
description: 'Actualiza los permisos del rol.',
|
||||
},
|
||||
title: 'Roles',
|
||||
description: 'Gestión de roles del sistema. Puedes crear los roles con los permisos que necesites.',
|
||||
permissions: {
|
||||
title: 'Permisos',
|
||||
description: 'Permisos del rol.',
|
||||
|
||||
@ -13,14 +13,13 @@ const messages = {
|
||||
}
|
||||
|
||||
const i18n = createI18n({
|
||||
legacy: false,
|
||||
locale,
|
||||
fallbackLocale: locale,
|
||||
messages
|
||||
});
|
||||
|
||||
function lang(text, params = {}) {
|
||||
return i18n.global.t(text, params);
|
||||
function lang(text) {
|
||||
return i18n.global.t(text);
|
||||
}
|
||||
|
||||
export {
|
||||
|
||||
@ -3,7 +3,9 @@ import { onMounted, reactive, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
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 PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
@ -17,7 +19,13 @@ import ShowView from './Modals/Event.vue';
|
||||
const vroute = useRoute();
|
||||
const router = useRouter();
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Propiedades */
|
||||
const showModal = ref(Modal.showModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
const models = ref([]);
|
||||
|
||||
const filters = reactive({
|
||||
@ -27,9 +35,6 @@ const filters = reactive({
|
||||
user: ''
|
||||
});
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
@ -66,7 +71,7 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<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' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
@ -76,7 +81,7 @@ onMounted(() => {
|
||||
/>
|
||||
</RouterLink>
|
||||
</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">
|
||||
<Input
|
||||
@ -128,7 +133,7 @@ onMounted(() => {
|
||||
<template v-for="event in items">
|
||||
<Item
|
||||
:event="event"
|
||||
@show="showModal.open(event)"
|
||||
@show="Modal.switchShowModal(event)"
|
||||
/>
|
||||
</template>
|
||||
</ol>
|
||||
@ -136,9 +141,11 @@ onMounted(() => {
|
||||
</Paginable>
|
||||
</div>
|
||||
|
||||
<ShowView
|
||||
ref="showModal"
|
||||
/>
|
||||
<ShowView
|
||||
:show="showModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchShowModal"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { getDateTime } from '@Controllers/DateController';
|
||||
|
||||
import Header from '@Holos/Modal/Elements/Header.vue';
|
||||
@ -12,36 +11,22 @@ defineEmits([
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
defineProps({
|
||||
show: Boolean,
|
||||
model: Object
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.event"
|
||||
/>
|
||||
<div class="flex w-full p-4">
|
||||
<Header
|
||||
:title="model.name"
|
||||
:subtitle="model.last_name"
|
||||
/>
|
||||
<div class="py-2 border-b">
|
||||
<div class="flex w-full px-4 py-2">
|
||||
<GoogleIcon
|
||||
class="text-xl text-success"
|
||||
name="contact_mail"
|
||||
|
||||
71
src/pages/Admin/Activities/Modals/Show.vue
Normal file
71
src/pages/Admin/Activities/Modals/Show.vue
Normal 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>
|
||||
@ -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 })
|
||||
|
||||
// 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
|
||||
const can = (permission) => hasPermission(`activities.${permission}`)
|
||||
|
||||
@ -25,7 +25,7 @@ function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full pb-2">
|
||||
<div class="w-full py-4">
|
||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
|
||||
@ -1,17 +1,23 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
import { can, apiTo, viewTo } from './Module'
|
||||
import { useSearcher } from '@Services/Api';
|
||||
|
||||
import ModalController from '@Controllers/ModalController.js';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import Permissions from './Modals/Permissions.vue';
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Propiedades */
|
||||
const destroyModal = ref(null);
|
||||
const editModal = ref(null);
|
||||
const destroyModal = ref(Modal.destroyModal);
|
||||
const editModal = ref(Modal.editModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
const models = ref([]);
|
||||
|
||||
@ -30,7 +36,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div>
|
||||
<SearcherHead
|
||||
:title="transl('title')"
|
||||
:title="$t('roles.title')"
|
||||
@search="(x) => searcher.search(x)"
|
||||
>
|
||||
<RouterLink
|
||||
@ -50,10 +56,7 @@ onMounted(() => {
|
||||
@click="searcher.search()"
|
||||
/>
|
||||
</SearcherHead>
|
||||
<div class="pt-2 space-y-2 w-full">
|
||||
<p class="text-sm">
|
||||
{{ transl('description') }}
|
||||
</p>
|
||||
<div class="pt-2 w-full">
|
||||
<Table
|
||||
:items="models"
|
||||
@send-pagination="(page) => searcher.pagination(page)"
|
||||
@ -67,17 +70,17 @@ onMounted(() => {
|
||||
/>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td class="table-cell border">
|
||||
<tr v-for="model in items">
|
||||
<td class="table-item border">
|
||||
{{ model.description }}
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<div class="table-actions">
|
||||
<IconButton
|
||||
v-if="can('edit') && ![1,2].includes(model.id)"
|
||||
icon="license"
|
||||
:title="transl('permissions.title')"
|
||||
@click="editModal.open(model)"
|
||||
:title="$t('roles.permissions.title')"
|
||||
@click="Modal.switchEditModal(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
@ -95,7 +98,7 @@ onMounted(() => {
|
||||
v-if="can('destroy') && ![1,2].includes(model.id)"
|
||||
icon="delete"
|
||||
:title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)"
|
||||
@click="Modal.switchDestroyModal(model)"
|
||||
outline
|
||||
/>
|
||||
</div>
|
||||
@ -107,14 +110,16 @@ onMounted(() => {
|
||||
|
||||
<Permissions
|
||||
v-if="can('index')"
|
||||
ref="editModal"
|
||||
:show="editModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchEditModal"
|
||||
/>
|
||||
<DestroyView
|
||||
v-if="can('destroy')"
|
||||
ref="destroyModal"
|
||||
title="description"
|
||||
subtitle=""
|
||||
:model="modelModal"
|
||||
:show="destroyModal"
|
||||
:to="(role) => apiTo('destroy', { role })"
|
||||
@close="Modal.switchDestroyModal"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -4,9 +4,8 @@ import { api } from '@Services/Api';
|
||||
import { apiTo } from '../Module';
|
||||
|
||||
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 PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
|
||||
/** Eventos */
|
||||
const emit = defineEmits([
|
||||
@ -14,67 +13,56 @@ const emit = defineEmits([
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const permissionTypes = ref([]);
|
||||
const permissions = ref([]);
|
||||
const model = ref(null);
|
||||
const props = defineProps({
|
||||
show: Boolean,
|
||||
model: Object
|
||||
});
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
const permissionTypes = ref([]);
|
||||
const permissions = ref([]);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
modalRef.value.close();
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function update() {
|
||||
api.put(apiTo('permissions', { role: model.value.id }), {
|
||||
api.put(apiTo('permissions', { role: props.model.id }), {
|
||||
data: {
|
||||
permissions: permissions.value
|
||||
},
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('register.edit.onSuccess'))
|
||||
|
||||
close();
|
||||
|
||||
emit('close');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getPermissions() {
|
||||
/** Ciclos */
|
||||
onUpdated(() => {
|
||||
api.get(route('permission-types.all-with-permissions'), {
|
||||
onSuccess: (r) => permissionTypes.value = r.models
|
||||
});
|
||||
|
||||
api.get(apiTo('permissions', { role: model.value.id }), {
|
||||
api.get(apiTo('permissions', { role: props.model.id }), {
|
||||
onSuccess: (r) => {
|
||||
if(r.permissions) {
|
||||
permissions.value = r.permissions.map(p => p.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
getPermissions();
|
||||
modalRef.value.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<EditModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
:show="show"
|
||||
@update="update"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<div v-if="model">
|
||||
<Header
|
||||
:title="model.description"
|
||||
/>
|
||||
<div class="p-4">
|
||||
<div class="grid gap-4 grid-cols-2">
|
||||
<div v-for="permissionType in permissionTypes">
|
||||
<Header
|
||||
:title="model.description"
|
||||
/>
|
||||
<div class="p-4 border-b">
|
||||
<div class="grid gap-4 grid-cols-2">
|
||||
<div v-for="permissionType in permissionTypes">
|
||||
<div>
|
||||
<p class="font-bold">{{ permissionType.name}}</p>
|
||||
<ul class="space-y-0.5 list-none">
|
||||
<li v-for="permission in permissionType.permissions">
|
||||
@ -89,12 +77,5 @@ defineExpose({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #buttons>
|
||||
<PrimaryButton
|
||||
@click="update"
|
||||
>
|
||||
{{ $t('update') }}
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
</EditModal>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter, useRoute } from 'vue-router';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { api, useForm } from '@Services/Api';
|
||||
import { apiTo, transl, viewTo } from './Module';
|
||||
|
||||
@ -50,9 +50,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeader
|
||||
:title="transl('create.title')"
|
||||
>
|
||||
<PageHeader :title="transl('create.title')">
|
||||
<RouterLink :to="viewTo({ name: 'index' })">
|
||||
<IconButton
|
||||
class="text-white"
|
||||
|
||||
@ -25,7 +25,7 @@ function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full pb-2">
|
||||
<div class="w-full py-4">
|
||||
<p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
@ -41,24 +41,28 @@ function submit() {
|
||||
v-model="form.paternal"
|
||||
id="paternal"
|
||||
:onError="form.errors.paternal"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<Input
|
||||
v-model="form.maternal"
|
||||
id="maternal"
|
||||
:onError="form.errors.maternal"
|
||||
autofocus
|
||||
/>
|
||||
<Input
|
||||
v-model="form.phone"
|
||||
id="phone"
|
||||
:onError="form.errors.phone"
|
||||
type="number"
|
||||
autofocus
|
||||
/>
|
||||
<Input
|
||||
v-model="form.email"
|
||||
id="email.title"
|
||||
type="email"
|
||||
:onError="form.errors.email"
|
||||
autofocus
|
||||
required
|
||||
/>
|
||||
<slot />
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { can, apiTo, viewTo } from './Module'
|
||||
import { useSearcher } from '@Services/Api';
|
||||
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 DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
@ -10,14 +12,16 @@ import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Propiedades */
|
||||
const destroyModal = ref(Modal.destroyModal);
|
||||
const showModal = ref(Modal.showModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
const models = ref([]);
|
||||
|
||||
/** Referencias */
|
||||
const showModal = ref(false);
|
||||
const destroyModal = ref(false);
|
||||
|
||||
/** Métodos */
|
||||
const searcher = useSearcher({
|
||||
url: apiTo('index'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
@ -33,7 +37,7 @@ onMounted(() => {
|
||||
<template>
|
||||
<div>
|
||||
<SearcherHead
|
||||
:title="transl('title')"
|
||||
:title="$t('users.title')"
|
||||
@search="(x) => searcher.search(x)"
|
||||
>
|
||||
<RouterLink
|
||||
@ -68,14 +72,11 @@ onMounted(() => {
|
||||
/>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr
|
||||
v-for="model in items"
|
||||
class="table-row"
|
||||
>
|
||||
<td class="table-cell">
|
||||
<tr v-for="model in items">
|
||||
<td class="table-item border">
|
||||
{{ `${model.name} ${model.paternal}` }}
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item border">
|
||||
<p>
|
||||
<a
|
||||
class="hover:underline"
|
||||
@ -87,21 +88,21 @@ onMounted(() => {
|
||||
</p>
|
||||
<p v-if="model.phone" class="font-semibold text-xs">
|
||||
<b>Teléfono: </b>
|
||||
<span
|
||||
<a
|
||||
class="hover:underline"
|
||||
target="_blank"
|
||||
:href="`tel:${model.phone}`"
|
||||
>
|
||||
{{ model.phone }}
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<div class="table-actions">
|
||||
<IconButton
|
||||
icon="visibility"
|
||||
:title="$t('crud.show')"
|
||||
@click="showModal.open(model)"
|
||||
@click="Modal.switchShowModal(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
@ -119,7 +120,7 @@ onMounted(() => {
|
||||
v-if="can('destroy')"
|
||||
icon="delete"
|
||||
:title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)"
|
||||
@click="Modal.switchDestroyModal(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
@ -147,28 +148,31 @@ onMounted(() => {
|
||||
</tr>
|
||||
</template>
|
||||
<template #empty>
|
||||
<td class="table-cell">
|
||||
<td class="table-item border">
|
||||
<div class="flex items-center text-sm">
|
||||
<p class="font-semibold">
|
||||
{{ $t('registers.empty') }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="table-cell">-</td>
|
||||
<td class="table-cell">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<ShowView
|
||||
ref="showModal"
|
||||
v-if="can('index')"
|
||||
:show="showModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchShowModal"
|
||||
/>
|
||||
|
||||
<DestroyView
|
||||
v-if="can('destroy')"
|
||||
ref="destroyModal"
|
||||
subtitle="last_name"
|
||||
:model="modelModal"
|
||||
:show="destroyModal"
|
||||
:to="(user) => apiTo('destroy', { user })"
|
||||
@close="Modal.switchDestroyModal"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -1,56 +1,37 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
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 */
|
||||
const emit = defineEmits([
|
||||
defineEmits([
|
||||
'close',
|
||||
'reload'
|
||||
]);
|
||||
|
||||
/** Propiedades */
|
||||
const model = ref(null);
|
||||
|
||||
/** Referencias */
|
||||
const modalRef = ref(null);
|
||||
|
||||
/** Métodos */
|
||||
function close() {
|
||||
model.value = null;
|
||||
|
||||
emit('close');
|
||||
}
|
||||
|
||||
/** Exposiciones */
|
||||
defineExpose({
|
||||
open: (data) => {
|
||||
model.value = data;
|
||||
modalRef.value.open();
|
||||
}
|
||||
defineProps({
|
||||
show: Boolean,
|
||||
model: Object
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ShowModal
|
||||
ref="modalRef"
|
||||
@close="close"
|
||||
:show="show"
|
||||
@close="$emit('close')"
|
||||
>
|
||||
<div v-if="model">
|
||||
<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>
|
||||
<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>
|
||||
</Header>
|
||||
<div class="flex w-full p-4">
|
||||
</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"
|
||||
|
||||
@ -1,24 +1,30 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { can, apiTo, viewTo, transl } from './Module'
|
||||
import { can, apiTo, viewTo } from './Module'
|
||||
import { users } from '@Plugins/AuthUsers'
|
||||
|
||||
import ModalController from '@Controllers/ModalController.js';
|
||||
|
||||
import IconButton from '@Holos/Button/Icon.vue'
|
||||
import DestroyView from '@Holos/Modal/Template/Destroy.vue';
|
||||
import Header from '@Holos/PageHeader.vue';
|
||||
import Table from '@Holos/TableSimple.vue';
|
||||
import ShowView from './Modals/Show.vue';
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Propiedades */
|
||||
const destroyModal = ref(null);
|
||||
const showModal = ref(null);
|
||||
const destroyModal = ref(Modal.destroyModal);
|
||||
const showModal = ref(Modal.showModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Header
|
||||
:title="transl('online.title')"
|
||||
:title="$t('users.online.title')"
|
||||
>
|
||||
<RouterLink
|
||||
v-if="can('create')"
|
||||
@ -32,7 +38,7 @@ const showModal = ref(null);
|
||||
/>
|
||||
</RouterLink>
|
||||
</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">
|
||||
<Table
|
||||
:items="users"
|
||||
@ -49,13 +55,13 @@ const showModal = ref(null);
|
||||
<template #body="{items}">
|
||||
<template v-for="model in items">
|
||||
<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">
|
||||
</td>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
{{ `${model.full_name}` }}
|
||||
</td>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
<p>
|
||||
<a
|
||||
class="hover:underline"
|
||||
@ -76,12 +82,12 @@ const showModal = ref(null);
|
||||
</a>
|
||||
</p>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<div class="table-actions">
|
||||
<IconButton
|
||||
icon="visibility"
|
||||
:title="$t('crud.show')"
|
||||
@click="showModal.open(model)"
|
||||
@click="Modal.switchShowModal(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
@ -99,7 +105,7 @@ const showModal = ref(null);
|
||||
v-if="can('destroy')"
|
||||
icon="delete"
|
||||
:title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)"
|
||||
@click="Modal.switchDestroyModal(model)"
|
||||
outline
|
||||
/>
|
||||
<RouterLink
|
||||
@ -121,14 +127,17 @@ const showModal = ref(null);
|
||||
</div>
|
||||
|
||||
<ShowView
|
||||
ref="showModal"
|
||||
v-if="can('index')"
|
||||
:show="showModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchShowModal"
|
||||
/>
|
||||
|
||||
<DestroyView
|
||||
v-if="can('destroy')"
|
||||
ref="destroyModal"
|
||||
subtitle="last_name"
|
||||
:model="modelModal"
|
||||
:show="destroyModal"
|
||||
:to="(user) => apiTo('destroy', { user })"
|
||||
@close="Modal.switchDestroyModal"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -35,13 +35,13 @@ onMounted(() => {
|
||||
/>
|
||||
</RouterLink>
|
||||
</PageHeader>
|
||||
<div class="flex w-full">
|
||||
<div class="w-full text-center p-2 bg-primary dark:bg-primary-d border-b rounded-sm">
|
||||
<div class="flex w-full pt-2">
|
||||
<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">
|
||||
{{ user?.name }}
|
||||
</p>
|
||||
<p class="text-sm text-gray-100">
|
||||
{{ user?.last_name }}
|
||||
{{ user?.full_last_name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useForm } from '@Services/Api';
|
||||
import { viewTo } from './Module';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
import Input from '@Holos/Form/InputWithIcon.vue'
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue'
|
||||
|
||||
@ -23,11 +21,11 @@ const submit = () => {
|
||||
form.post(route('auth.forgot-password'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('auth.forgotPassword.success'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
router.push({ name: 'index' });
|
||||
},
|
||||
onError: () => {
|
||||
Notify.error(Lang('auth.forgotPassword.error'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
router.push({ name: 'index' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
<script setup>
|
||||
import { onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { defineApiToken, defineCsrfToken, hasToken, useForm } from '@Services/Api.js'
|
||||
import { defineUser } from '@Services/Page';
|
||||
import { viewTo } from './Module.js';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue'
|
||||
import Input from '@Holos/Form/InputWithIcon.vue'
|
||||
|
||||
/** Definidores */
|
||||
const router = useRouter();
|
||||
|
||||
/** Propiedades */
|
||||
defineProps({
|
||||
canResetPassword: Boolean,
|
||||
@ -38,7 +33,7 @@ const login = () => {
|
||||
/** Ciclos */
|
||||
onMounted(() => {
|
||||
if (hasToken()) {
|
||||
router.push({ name: 'dashboard.index' });
|
||||
location.replace('/')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -67,7 +62,7 @@ onMounted(() => {
|
||||
<div class="flex justify-end mt-4">
|
||||
<RouterLink
|
||||
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') }}
|
||||
</RouterLink>
|
||||
|
||||
@ -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
|
||||
}
|
||||
@ -96,11 +96,11 @@ const submit = () => {
|
||||
|
||||
<div class="ms-2 text-primary-t dark:text-primary-dt">
|
||||
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') }}
|
||||
</a>
|
||||
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') }}
|
||||
</a>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@ const submit = () => {
|
||||
</div>
|
||||
|
||||
<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') }}
|
||||
</Link>
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useForm } from '@Services/Api.js'
|
||||
import { viewTo } from './Module';
|
||||
|
||||
import PrimaryButton from '@Holos/Button/Primary.vue';
|
||||
import Input from '@Holos/Form/InputWithIcon.vue'
|
||||
|
||||
@ -24,17 +24,21 @@ const submit = () => {
|
||||
form.post(route('auth.reset-password'), {
|
||||
onSuccess: () => {
|
||||
Notify.success(Lang('auth.reset.success'));
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
router.push({ name: 'index' })
|
||||
},
|
||||
onError: () => {
|
||||
router.push(viewTo({ name: 'index' }));
|
||||
router.push({ name: 'index' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
console.log('mount')
|
||||
|
||||
form.token = vroute.query.token;
|
||||
email.value = vroute.query.email;
|
||||
|
||||
// router.replace({ query: {} });
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
@ -56,68 +56,6 @@ const changelogs = [
|
||||
'UPDATE: Redirección a dashboard al iniciar sesión.'
|
||||
],
|
||||
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>
|
||||
@ -142,13 +80,13 @@ const changelogs = [
|
||||
<template #body="{items}">
|
||||
<template v-for="item in items">
|
||||
<tr>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<span v-text="item.version" />
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<span v-text="item.date" />
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<ul class="list-disc list-inside">
|
||||
<li v-for="detail in item.details.reverse()" v-text="detail" />
|
||||
</ul>
|
||||
@ -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>
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="p-2">
|
||||
<h4>Rutas de ejemplo</h4>
|
||||
</div>
|
||||
</template>
|
||||
@ -2,21 +2,25 @@
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useSearcher } from '@Services/Api';
|
||||
|
||||
import ModalController from '@Controllers/ModalController.js';
|
||||
import { getDateTime } from '@Controllers/DateController.js';
|
||||
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import DestroyModal from '@Holos/Modal/Template/Destroy.vue';
|
||||
import ShowModal from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
|
||||
import SearcherHead from '@Holos/Searcher.vue';
|
||||
import Table from '@Holos/Table.vue';
|
||||
import IconButton from '@Holos/Button/Icon.vue';
|
||||
import ShowView from '@Holos/Skeleton/Sidebar/Notification/Show.vue';
|
||||
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
||||
|
||||
/** Controladores */
|
||||
const Modal = new ModalController();
|
||||
|
||||
/** Propiedades */
|
||||
const destroyModal = ref(null);
|
||||
const showModal = ref(false);
|
||||
// const destroyModal = ref(Modal.destroyModal);
|
||||
const showModal = ref(Modal.showModal);
|
||||
const modelModal = ref(Modal.modelModal);
|
||||
|
||||
const models = ref([]);
|
||||
|
||||
// Servicios
|
||||
const searcher = useSearcher({
|
||||
url: route('system.notifications.all'),
|
||||
onSuccess: (r) => models.value = r.models,
|
||||
@ -64,65 +68,72 @@ onMounted(() => {
|
||||
/>
|
||||
</template>
|
||||
<template #body="{items}">
|
||||
<tr v-for="model in items" class="table-row">
|
||||
<td class="table-cell border">
|
||||
<tr v-for="model in items">
|
||||
<td class="table-item border">
|
||||
{{ model.data.title }}
|
||||
</td>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
{{ model.data.description }}
|
||||
</td>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
{{ getDateTime(model.created_at) }}
|
||||
</td>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
<div class="flex items-center justify-center">
|
||||
<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>
|
||||
</div>
|
||||
</td>
|
||||
<td class="table-cell">
|
||||
<td class="table-item">
|
||||
<div class="table-actions">
|
||||
<IconButton
|
||||
icon="visibility"
|
||||
:title="$t('crud.show')"
|
||||
@click="showModal.open(model)"
|
||||
@click="Modal.switchShowModal(model)"
|
||||
outline
|
||||
/>
|
||||
<IconButton
|
||||
icon="delete"
|
||||
<!-- <GoogleIcon
|
||||
v-if="can('destroy')"
|
||||
class="btn-icon"
|
||||
name="delete"
|
||||
:title="$t('crud.destroy')"
|
||||
@click="destroyModal.open(model)"
|
||||
@click="Modal.switchDestroyModal(model)"
|
||||
outline
|
||||
/>
|
||||
/> -->
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template #empty>
|
||||
<td class="table-cell border">
|
||||
<td class="table-item border">
|
||||
<div class="flex items-center text-sm">
|
||||
<p class="font-semibold">
|
||||
{{ $t('registers.empty') }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
<td class="table-cell border">-</td>
|
||||
<td class="table-cell border">-</td>
|
||||
<td class="table-cell border">-</td>
|
||||
<td class="table-cell border">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
<td class="table-item border">-</td>
|
||||
</template>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<ShowModal
|
||||
ref="showModal"
|
||||
<ShowView
|
||||
:show="showModal"
|
||||
:model="modelModal"
|
||||
@close="Modal.switchShowModal"
|
||||
@reload="searcher.search()"
|
||||
/>
|
||||
<DestroyModal
|
||||
ref="destroyModal"
|
||||
:to="(id) => route('system.notifications.destroy', { id })"
|
||||
@update="searcher.search()"
|
||||
/>
|
||||
<!-- <DestroyView
|
||||
v-if="can('destroy')"
|
||||
:model="modelModal"
|
||||
:show="destroyModal"
|
||||
:to="(user) => apiTo('destroy', { user })"
|
||||
@close="Modal.switchDestroyModal"
|
||||
@update="getNotifications"
|
||||
/> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -5,11 +5,11 @@ import { logout } from '@Services/Page';
|
||||
|
||||
import ActionSection from '@Holos/ActionSection.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 Input from '@Holos/Form/Input.vue';
|
||||
|
||||
const modalRef = ref(null);
|
||||
const confirmingUserDeletion = ref(false);
|
||||
const passwordInput = ref(null);
|
||||
|
||||
const form = useForm({
|
||||
@ -17,7 +17,7 @@ const form = useForm({
|
||||
});
|
||||
|
||||
const confirmUserDeletion = () => {
|
||||
modalRef.value.open();
|
||||
confirmingUserDeletion.value = true;
|
||||
|
||||
setTimeout(() => passwordInput.value.focus(), 250);
|
||||
};
|
||||
@ -26,7 +26,7 @@ const deleteUser = () => {
|
||||
form.delete(route('user.destroy'), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
modalRef.value.close();
|
||||
closeModal();
|
||||
logout();
|
||||
},
|
||||
onError: () => passwordInput.value.focus(),
|
||||
@ -34,7 +34,9 @@ const deleteUser = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const onCloseModal = () => {
|
||||
const closeModal = () => {
|
||||
confirmingUserDeletion.value = false;
|
||||
|
||||
form.reset();
|
||||
};
|
||||
</script>
|
||||
@ -61,33 +63,27 @@ const onCloseModal = () => {
|
||||
</div>
|
||||
|
||||
<!-- Delete Account Confirmation Modal -->
|
||||
<DialogModal
|
||||
ref="modalRef"
|
||||
@close="onCloseModal"
|
||||
>
|
||||
<DialogModal :show="confirmingUserDeletion" @close="closeModal">
|
||||
<template #title>
|
||||
{{ $t('account.delete.title') }}
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="px-4 pb-2">
|
||||
<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>
|
||||
{{ $t('account.delete.confirm') }}
|
||||
|
||||
<div class="mt-4">
|
||||
<Input
|
||||
ref="passwordInput"
|
||||
v-model="form.password"
|
||||
id="password"
|
||||
type="password"
|
||||
:onError="form.errors.password"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<SecondaryButton @click="modalRef.close()">
|
||||
<SecondaryButton @click="closeModal">
|
||||
{{ $t('cancel') }}
|
||||
</SecondaryButton>
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import { ref } from 'vue';
|
||||
import { useForm } from '@Services/Api';
|
||||
|
||||
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 SecondaryButton from '@Holos/Button/Secondary.vue';
|
||||
import Input from '@Holos/Form/Input.vue';
|
||||
|
||||
24
src/router/Auth.js
Normal file
24
src/router/Auth.js
Normal 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
|
||||
@ -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')
|
||||
}
|
||||
]
|
||||
@ -1,8 +1,6 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import { hasPermission } from '@Plugins/RolePermission';
|
||||
|
||||
import examples from './Examples';
|
||||
|
||||
function can(next, can) {
|
||||
if (!hasPermission(can)) {
|
||||
next({ name: '404' });
|
||||
@ -16,78 +14,43 @@ const router = createRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@Layouts/AppLayout.vue'),
|
||||
name: 'root',
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/dashboard',
|
||||
name: 'index',
|
||||
redirect: '/dashboard'
|
||||
},
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard.index',
|
||||
component: () => import('@Pages/Dashboard/Index.vue')
|
||||
}, {
|
||||
path: '/profile',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'index',
|
||||
redirect: '/dashboard',
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
name: 'profile.show',
|
||||
component: () => import('@Pages/Profile/Show.vue')
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
name: 'dashboard.index',
|
||||
component: () => import('@Pages/Dashboard/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'profile',
|
||||
path: 'notifications',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'profile.show',
|
||||
component: () => import('@Pages/Profile/Show.vue'),
|
||||
meta: {
|
||||
title: 'Perfil',
|
||||
icon: 'person',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'notifications',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'profile.notifications.index',
|
||||
component: () => import('@Pages/Profile/Notifications/Index.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
name: 'profile.notifications.index',
|
||||
component: () => import('@Pages/Profile/Notifications/Index.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
]
|
||||
}, {
|
||||
path: '/admin',
|
||||
name: 'admin',
|
||||
component: () => import('@Layouts/AppLayout.vue'),
|
||||
meta: {
|
||||
title: 'Inicio',
|
||||
icon: 'home',
|
||||
},
|
||||
redirect: '/',
|
||||
children: [
|
||||
{
|
||||
path: 'users',
|
||||
name: 'admin.users',
|
||||
meta: {
|
||||
title: 'Usuarios',
|
||||
icon: 'people',
|
||||
},
|
||||
redirect: '/admin/users',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.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',
|
||||
@ -99,73 +62,41 @@ const router = createRouter({
|
||||
path: 'create',
|
||||
name: 'admin.users.create',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.create'),
|
||||
meta: {
|
||||
title: 'Crear',
|
||||
icon: 'add',
|
||||
},
|
||||
component: () => import('@Pages/Admin/Users/Create.vue')
|
||||
}, {
|
||||
path: ':id/edit',
|
||||
name: 'admin.users.edit',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.edit'),
|
||||
meta: {
|
||||
title: 'Editar',
|
||||
icon: 'edit',
|
||||
},
|
||||
component: () => import('@Pages/Admin/Users/Edit.vue')
|
||||
}, {
|
||||
path: ':id/settings',
|
||||
name: 'admin.users.settings',
|
||||
beforeEnter: (to, from, next) => can(next, 'users.settings'),
|
||||
component: () => import('@Pages/Admin/Users/Settings.vue'),
|
||||
meta: {
|
||||
title: 'Configuración',
|
||||
icon: 'settings',
|
||||
},
|
||||
component: () => import('@Pages/Admin/Users/Settings.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'roles',
|
||||
name: 'admin.roles',
|
||||
meta: {
|
||||
title: 'Roles',
|
||||
icon: 'license',
|
||||
},
|
||||
redirect: '/admin/roles',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'admin.roles.index',
|
||||
component: () => import('@Pages/Admin/Roles/Index.vue'),
|
||||
component: () => import('@Pages/Admin/Roles/Index.vue')
|
||||
},
|
||||
{
|
||||
path: 'create',
|
||||
name: 'admin.roles.create',
|
||||
component: () => import('@Pages/Admin/Roles/Create.vue'),
|
||||
meta: {
|
||||
title: 'Crear',
|
||||
icon: 'add',
|
||||
},
|
||||
component: () => import('@Pages/Admin/Roles/Create.vue')
|
||||
}, {
|
||||
path: ':id/edit',
|
||||
name: 'admin.roles.edit',
|
||||
component: () => import('@Pages/Admin/Roles/Edit.vue'),
|
||||
meta: {
|
||||
title: 'Editar',
|
||||
icon: 'edit',
|
||||
},
|
||||
component: () => import('@Pages/Admin/Roles/Edit.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'activities',
|
||||
name: 'admin.activities',
|
||||
meta: {
|
||||
title: 'Historial de acciones',
|
||||
icon: 'event',
|
||||
},
|
||||
redirect: '/admin/activities',
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
@ -179,47 +110,14 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: '/changelogs',
|
||||
component: () => import('@Layouts/AppLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
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')
|
||||
}
|
||||
]
|
||||
name: 'changelogs',
|
||||
component: () => import('@Pages/Changelogs.vue')
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: '404',
|
||||
component: () => import('@Pages/Errors/404.vue')
|
||||
},
|
||||
...examples,
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ import axios from 'axios';
|
||||
import { reactive, ref } from 'vue';
|
||||
|
||||
axios.defaults.withXSRFToken = true;
|
||||
axios.defaults.withCredentials = true;
|
||||
// axios.defaults.withCredentials = true;
|
||||
|
||||
/**
|
||||
* Códigos de falla
|
||||
@ -74,7 +74,7 @@ const closeSession = () => {
|
||||
|
||||
Notify.info(Lang('session.closed'))
|
||||
|
||||
location.replace('/')
|
||||
location.replace('auth.html')
|
||||
}
|
||||
|
||||
/**
|
||||
@ -86,13 +86,6 @@ function composeKey(parent, 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
|
||||
*/
|
||||
@ -142,6 +135,8 @@ const api = {
|
||||
if(options.hasOwnProperty('onFail')) {
|
||||
options.onFail(data.data);
|
||||
}
|
||||
|
||||
console.log(data.data);
|
||||
}
|
||||
|
||||
if(options.hasOwnProperty('onFinish')) {
|
||||
@ -218,8 +213,8 @@ const api = {
|
||||
options
|
||||
})
|
||||
},
|
||||
catalog(resources, options) {
|
||||
this.post(apiURL('catalogs/get'), {
|
||||
resource(resources, options) {
|
||||
this.post('resources/get', {
|
||||
...options,
|
||||
data: resources
|
||||
})
|
||||
@ -252,7 +247,7 @@ const api = {
|
||||
/**
|
||||
* Instancia de la API
|
||||
*/
|
||||
const useApi = () => reactive({...api});
|
||||
const useApi = () => reactive(api);
|
||||
|
||||
/**
|
||||
* Instancia de la API para formularios
|
||||
@ -574,7 +569,6 @@ const useSearcher = (options = {
|
||||
export {
|
||||
api,
|
||||
token,
|
||||
apiURL,
|
||||
closeSession,
|
||||
defineCsrfToken,
|
||||
defineApiToken,
|
||||
|
||||
@ -110,8 +110,6 @@ const logout = () => {
|
||||
onSuccess: (r) => {
|
||||
if(r.is_revoked === true) {
|
||||
closeSession()
|
||||
|
||||
location.replace('/')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -4,6 +4,9 @@ import { page } from '@Services/Page'
|
||||
import { hasPermission, reloadPermissions, getAllRolesIds } from '@Plugins/RolePermission'
|
||||
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
|
||||
const useNotifier = defineStore('notifier', {
|
||||
state: () => ({
|
||||
@ -11,13 +14,12 @@ const useNotifier = defineStore('notifier', {
|
||||
unreadClosedCounter: 0,
|
||||
notifications: [],
|
||||
isStarted: false,
|
||||
isEnabled: import.meta.env.VITE_REVERB_ACTIVE === 'true',
|
||||
user_id: 0,
|
||||
}),
|
||||
actions: {
|
||||
// Iniciar instancia
|
||||
boot() {
|
||||
if(!this.isStarted && this.isEnabled) {
|
||||
if(!this.isStarted && hasNotifications) {
|
||||
this.user_id = page.user.id;
|
||||
|
||||
this.subscribeGLobalNotifications();
|
||||
|
||||
26
tailwind.config.js
Normal file
26
tailwind.config.js
Normal 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: [],
|
||||
}
|
||||
@ -1,14 +1,18 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), tailwindcss()],
|
||||
server: {
|
||||
allowedHosts: true,
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: './index.html', // Ruta al archivo index.html
|
||||
auth: './auth.html', // Ruta al archivo auth.html
|
||||
},
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user