WIP:Actualización de colores y corrección de nombres en componentes de dirección

colors.css.example

@@ -3,12 +3,12 @@
     --color-page-t: #000;
     --color-page-d: #292524;
     --color-page-dt: #fff;
-    --color-primary: #374151;
+    --color-primary: #621132;
     --color-primary-t: #fff;
     --color-primary-d: #1c1917;
     --color-primary-dt: #fff;
-    --color-secondary: #3b82f6;
-    --color-secondary-t: #fff;
+    --color-secondary: #fff;
+    --color-secondary-t: #621132;
     --color-secondary-d: #312e81;
     --color-secondary-dt: #fff;
     --color-primary-info: #06b6d4;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "notsoweb.frontend",
-  "copyright": "Notsoweb Software Inc.",
+  "copyright": "Golsystems",
   "private": true,
   "version": "0.9.10",
   "type": "module",

src/components/App/AddressSection.vue

@@ -16,7 +16,7 @@ const handleSubmit = () => {
   
   // Emitir evento al padre con la nueva dirección
   emit('address-created', {
-    description: addressName.value
+    name: addressName.value
   });
   
   // Limpiar el formulario

src/components/App/MembershipSection.vue

@@ -169,7 +169,6 @@ const calculateTotal = () => {
             label="description"
             title="Servicio a pagar"
             :options="serviceOptions"
-            multiple
           />
 
           <!-- Cantidad -->

src/pages/App/Address/Index.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { onMounted, ref } from "vue";
-import { RouterLink } from "vue-router";
-import { useSearcher } from "@Services/Api";
+import { useSearcher, useForm } from "@Services/Api";
 import { can, apiTo, viewTo, transl } from "./Module";
 
-import Table           from "@Holos/Table.vue";
-import IconButton      from "@Holos/Button/Icon.vue";
-import PageHeader      from "@Holos/PageHeader.vue";
-import AddressForm     from "@App/AddressSection.vue";
-import DestroyView     from '@Holos/Modal/Template/Destroy.vue';
+import Table from "@Holos/Table.vue";
+import IconButton from "@Holos/Button/Icon.vue";
+import PageHeader from "@Holos/PageHeader.vue";
+import AddressForm from "@App/AddressSection.vue";
+import Editview from "@Holos/Modal/Edit.vue";
+import DestroyView from "@Holos/Modal/Template/Destroy.vue";
 import ModalController from "@Controllers/ModalController.js";
 
 /** Controladores */
@@ -19,47 +19,48 @@ const destroyModal = ref(Modal.destroyModal);
 const editModal = ref(Modal.editModal);
 const modelModal = ref(Modal.modelModal);
 
-/** Inicializar searcher */
-//const models = ref(searcher.models);
 const models = ref({
   data: [],
   total: 0,
 });
-const processing = ref(false);
-//const searcher = useSearcher(apiTo("index"));
-const searcher = {
-  models,
-  processing,
-  pagination: () => {},
-  search: () => {},
-};
+
+/** Inicializar searcher */
+const searcher = useSearcher({
+  url: apiTo("index"),
+  filters: {},
+  onSuccess: (data) => {
+    models.value = data.models;
+  },
+});
 
 /** Cargar datos iniciales */
 onMounted(() => {
   searcher.search();
 });
 
-/** Manejar creación de nueva dirección */
 const handleAddressCreated = async (address) => {
-  try {
-    // Aquí harías la llamada a la API para crear la dirección
-    // const response = await axios.post(apiTo('store'), address);
-    // Recargar la tabla desde la API
-    await searcher.search();
+  const form = useForm({
+    name: address.name,
+  });
 
-    // O agregar localmente si no tienes API aún:
-    if (!models.value.data) {
-      models.value.data = [];
-    }
-    models.value.data.unshift({
-      id: Date.now(),
-      description: address.description,
-    });
-    models.value.total = models.value.data.length;
-  } catch (error) {
-    console.error("Error al crear dirección:", error);
-    alert("Error al crear la dirección");
-  }
+  form.post(apiTo("store"), {
+    onSuccess: () => {
+      searcher.refresh();
+    },
+  });
+};
+
+const handleAddressUpdated = async () => {
+  const form = useForm({
+    name: modelModal.value.name,
+  });
+
+  form.put(apiTo("update", { id: modelModal.value.id }), {
+    onSuccess: () => {
+      searcher.refresh();
+      Modal.switchEditModal();
+    },
+  });
 };
 </script>
 
@@ -69,7 +70,7 @@ const handleAddressCreated = async (address) => {
   <div class="m-3">
     <Table
       :items="models"
-      :processing="searcher.processing.value"
+      :processing="searcher.processing"
       @send-pagination="(page) => searcher.pagination(page)"
     >
       <template #head>
@@ -79,26 +80,17 @@ const handleAddressCreated = async (address) => {
       <template #body="{ items }">
         <tr v-for="model in items" :key="model.id" class="table-row">
           <td class="table-cell border">
-            {{ model.description }}
+            {{ model.name }}
           </td>
           <td class="table-cell">
             <div class="table-actions">
               <IconButton
-                v-if="can('edit') && ![1, 2].includes(model.id)"
-                icon="license"
-                :title="transl('permissions.title')"
+                icon="edit"
+                :title="$t('crud.edit')"
                 @click="Modal.switchEditModal(model)"
                 outline
               />
-              <RouterLink
-                v-if="can('edit')"
-                class="h-fit"
-                :to="viewTo({ name: 'edit', params: { id: model.id } })"
-              >
-                <IconButton icon="edit" :title="$t('crud.edit')" outline />
-              </RouterLink>
               <IconButton
-                v-if="can('destroy') && ![1, 2].includes(model.id)"
                 icon="delete"
                 :title="$t('crud.destroy')"
                 @click="Modal.switchDestroyModal(model)"
@@ -115,12 +107,11 @@ const handleAddressCreated = async (address) => {
       </template>
     </Table>
     <DestroyView
-      v-if="can('destroy')"
-      title="description"
+      title="name"
       subtitle=""
       :model="modelModal"
       :show="destroyModal"
-      :to="(address) => apiTo('destroy', { address: address.id })"
+      :to="(address) => apiTo('destroy', { id: address.id })"
       @close="Modal.switchDestroyModal"
       @update="
         () => {
@@ -132,5 +123,26 @@ const handleAddressCreated = async (address) => {
         }
       "
     />
+    <Editview
+      :show="editModal"
+      :title="$t('crud.edit')"
+      @close="Modal.switchEditModal"
+      @update="handleAddressUpdated"
+    >
+      <div class="p-4">
+        <label
+          for="editAddressName"
+          class="block text-sm text-gray-600 font-medium mb-2"
+        >
+          Nombre de la Dirección:
+        </label>
+        <input
+          type="text"
+          id="editAddressName"
+          v-model="modelModal.name"
+          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+        />
+      </div>
+    </Editview>
   </div>
 </template>

src/pages/App/Address/Module.js

@@ -2,7 +2,7 @@ import { lang } from '@Lang/i18n';
 import { hasPermission } from '@Plugins/RolePermission.js';
 
 // Ruta API
-const apiTo = (name, params = {}) => route(`address.${name}`, params)
+const apiTo = (name, params = {}) => route(`directions.${name}`, params)
 
 // Ruta visual
 const viewTo = ({ name = '', params = {}, query = {} }) => view({ name: `address.${name}`, params, query })