From 0b37323652fabaa20343e8b1b3d1f6bce60acd9b Mon Sep 17 00:00:00 2001
From: "jose.lopez" <jose.lopez@golsystems.com.mx>
Date: Tue, 30 Sep 2025 12:30:27 -0600
Subject: [PATCH] Departamentos

---
 src/pages/Admin/Departments/Create.vue |  51 +++++++++++++
 src/pages/Admin/Departments/Edit.vue   |  60 +++++++++++++++
 src/pages/Admin/Departments/Form.vue   |  57 ++++++++++++++
 src/pages/Admin/Departments/Index.vue  | 100 +++++++++++++++++++++++++
 src/pages/Admin/Departments/Module.js  |  21 ++++++
 5 files changed, 289 insertions(+)
 create mode 100644 src/pages/Admin/Departments/Create.vue
 create mode 100644 src/pages/Admin/Departments/Edit.vue
 create mode 100644 src/pages/Admin/Departments/Form.vue
 create mode 100644 src/pages/Admin/Departments/Index.vue
 create mode 100644 src/pages/Admin/Departments/Module.js

diff --git a/src/pages/Admin/Departments/Create.vue b/src/pages/Admin/Departments/Create.vue
new file mode 100644
index 0000000..b0937f8
--- /dev/null
+++ b/src/pages/Admin/Departments/Create.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import Input           from '@Holos/Form/Input.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import PageHeader      from '@Holos/PageHeader.vue';
+import Form            from './Form.vue'
+
+/** Definidores */
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    name: '',
+    description: '',
+});
+
+/** Métodos */
+function submit() {
+    form.post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+</script>
+
+<template>
+    <PageHeader
+        :title="transl('create.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="create"
+        :form="form"
+        @submit="submit"
+    />
+</template>
diff --git a/src/pages/Admin/Departments/Edit.vue b/src/pages/Admin/Departments/Edit.vue
new file mode 100644
index 0000000..49d05a8
--- /dev/null
+++ b/src/pages/Admin/Departments/Edit.vue
@@ -0,0 +1,60 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { viewTo, apiTo , transl } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import Selectable      from '@Holos/Form/Selectable.vue';
+import Form            from './Form.vue'
+
+/** Definiciones */
+const vroute = useRoute();
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    id: null,
+    name: '',
+    description: '',
+});
+
+const departments = ref([]);
+
+/** Métodos */
+function submit() {
+    form.put(apiTo('update', { user: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { user: vroute.params.id }), {
+        onSuccess: (r) => {
+            form.fill(r.user)
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="transl('edit.title')">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    <Form
+        action="update"
+        :form="form"
+        @submit="submit"
+    />
+</template>
diff --git a/src/pages/Admin/Departments/Form.vue b/src/pages/Admin/Departments/Form.vue
new file mode 100644
index 0000000..ffcf4fb
--- /dev/null
+++ b/src/pages/Admin/Departments/Form.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Textarea      from '@Holos/Form/Textarea.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                autofocus
+                required
+            />
+            <textarea
+                v-model="form.description"
+                id="description"
+                :onError="form.errors.description"
+                rows="4"
+            />
+            <slot />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Departments/Index.vue b/src/pages/Admin/Departments/Index.vue
new file mode 100644
index 0000000..c43dd0d
--- /dev/null
+++ b/src/pages/Admin/Departments/Index.vue
@@ -0,0 +1,100 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { getDate } from '@Controllers/DateController';
+import { can, apiTo, viewTo, transl } from './Module'
+
+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/NewTable.vue';
+import ShowView from './Modals/Show.vue';
+
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Searcher from '@Holos/Searcher.vue';
+import Adding from '@Holos/Button/ButtonRh.vue';
+
+/** Propiedades */
+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,
+    onError: () => models.value = []
+});
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <!-- Header -->
+    <div class="flex items-start justify-between gap-4">
+        <div>
+            <h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">{{ $t('users.title') }}</h1>
+            <p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">{{ $t('users.description') }}
+            </p>
+        </div>
+
+        <RouterLink :to="viewTo({ name: 'create' })">
+            <Adding text="Nuevo Empleado" />
+        </RouterLink>
+    </div>
+
+    <!-- Search Card -->
+    <div class="pt-2 w-full">
+        <Searcher @search="(x) => searcher.search(x)">
+        </Searcher>
+    </div>
+
+    <!-- List Card -->
+    <div class="pt-2 w-full">
+        <Table :items="models" :processing="searcher.processing" @send-pagination="(page) => searcher.pagination(page)">
+            <template #head>
+                <th v-text="$t('name')" />
+                <th class="w-32 text-center" v-text="$t('actions')" />
+            </template>
+
+            <template #body="{ items }">
+                <tr v-for="model in items" class="table-row">
+                    <td>{{ model.name }}</td>
+                    <td>
+                        <div class="table-actions">
+                            <IconButton icon="visibility" :title="$t('crud.show')" @click="showModal.open(model)"
+                                outline />
+                            <RouterLink class="h-fit"
+                                :to="viewTo({ name: 'edit', params: { id: model.id } })">
+                                <IconButton icon="edit" :title="$t('crud.edit')" outline />
+                            </RouterLink>
+                            <IconButton icon="delete" :title="$t('crud.destroy')"
+                                @click="destroyModal.open(model)" outline />
+                        </div>
+                    </td>
+                </tr>
+            </template>
+
+            <template #empty>
+                <td colspan="6" class="py-12 text-center">
+                    <div class="text-gray-500 dark:text-primary-dt/70">
+                        <GoogleIcon name="person_search" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
+                        <p class="text-lg font-medium">No se encontraron empleados</p>
+                        <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
+                    </div>
+                </td>
+            </template>
+        </Table>
+
+        <ShowView ref="showModal" />
+
+        <DestroyView ref="destroyModal" subtitle="last_name"
+            :to="(department) => apiTo('destroy', { department })" @update="searcher.search()" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/Admin/Departments/Module.js b/src/pages/Admin/Departments/Module.js
new file mode 100644
index 0000000..a4d4824
--- /dev/null
+++ b/src/pages/Admin/Departments/Module.js
@@ -0,0 +1,21 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`admin.users.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `admin.users.${name}`, params, query })
+
+// Obtener traducción del componente
+const transl = (str) => lang(`users.${str}`)
+
+// Determina si un usuario puede hacer algo no en base a los permisos
+const can = (permission) => hasPermission(`users.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file