Modal

electron.js

@@ -16,7 +16,7 @@ function createWindow() {
         }
     });
     win.loadURL('http://localhost:8080');
-    //win.loadFile(path.join(__dirname, 'dist/index.html'));
+    // win.loadFile(path.join(__dirname, 'dist/index.html'));
 }
 
 app.whenReady().then(createWindow);

src/App.vue

@@ -31,7 +31,7 @@ onMounted(() => {
 :root {
   --header-height: 150px !important;
   --app-shadow: rgba(0, 0, 0, 0.45);
-  --navmenu-height: 200px;
+  --navmenu-height: 210px;
 }
 
 body {
@@ -69,6 +69,7 @@ body {
 
 label {
   text-align: left !important;
+  text-transform: capitalize;
 }
 
 .window-container {

src/components/app/Layout.vue

@@ -1,14 +1,15 @@
 <script setup>
 import {useUserStore} from "@/pinia/user";
 import {onBeforeMount} from "vue";
-import {useRoute} from "vue-router";
+import {useRoute, useRouter} from "vue-router";
 
 const userStore = useUserStore();
 const route = useRoute();
+const router = useRouter();
 onBeforeMount(async () => {
   const user = await userStore.getUser();
   if (!user && !["/#/login", "/#/register"].includes(route.fullPath)) {
-    location.href = ('/#/login');
+    location.href = "/#/login";
   }
 })
 </script>

src/components/app/Nav.vue

@@ -4,10 +4,12 @@ import {onMounted, ref} from "vue";
 import {useUi} from "@/pinia/ui";
 import {useRouter} from "vue-router";
 import {useUserStore} from "@/pinia/user";
+import {useProductStore} from "@/pinia/products";
 
 const router = useRouter();
 const ui = useUi();
 const userStore = useUserStore();
+const productStore = useProductStore();
 const options = ref([
   {
     name: "Aplicacion", items: [
@@ -32,7 +34,12 @@ const options = ref([
   },
   {
     name: "Productos", items: [
-      {name: "Agregar Producto"},
+      {
+        name: "Agregar Producto", callback: () => {
+          ui.reset()
+          productStore.product_modal = true;
+        }
+      },
       {name: "Generar Venta"},
     ]
   },
@@ -48,10 +55,18 @@ const options = ref([
     items: [],
     url: '/',
   },
+  {
+    name: "Chat",
+    items: [],
+    url: '/',
+  },
 ]);
 
 
 function openMenu(items, name, url) {
+  if (ui.selectedMenu === name) return;
+
+
   ui.setCurrentMenu(null);
   if (!items) return;
   if (url) {

src/components/app/NavMenu.vue

@@ -25,6 +25,10 @@ const ui = useUi();
 
   animation: fade .2s ease-in-out forwards;
   overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 .item {

src/components/productos/Filters.vue

@@ -1,15 +1,22 @@
 <script setup>
 import {Input} from 'vuedigitalpowerui'
 import {ref} from "vue";
+import {useProductStore} from "@/pinia/products";
 
 const emits = defineEmits(["search"]);
 const props = defineProps(["filters"])
 const filter = ref("");
 const value = ref("");
 
+const productStore = useProductStore()
+
 function search() {
   emits("search", {filter: filter.value, value: value.value})
 }
+
+async function update() {
+  await productStore.fetchProducts();
+}
 </script>
 
 <template>
@@ -19,6 +26,7 @@ function search() {
       <Input class="filter" placeholder="Busqueda" v-model="value"/>
       <Input type="button" value="Buscar" background="var(--primary)" color="white" @click="search"/>
       <Input type="button" value="Limpiar" background="var(--primary)" color="white"/>
+      <Input type="button" value="Actualizar" background="var(--primary)" color="white" @click="update"/>
     </form>
   </div>
 </template>

src/components/productos/ProductModal.vue

@@ -0,0 +1,35 @@
+<script setup>
+import {Modal, Input} from 'vuedigitalpowerui'
+import {useProductStore} from "@/pinia/products";
+
+const productStore = useProductStore()
+const props = defineProps(["headers"])
+const emits = defineEmits(["confirm"])
+</script>
+
+<template>
+  <Modal title="Producto" @close="() => {productStore.product_modal = false}">
+    <div class="entradas" gapped>
+      <div v-for="(item, key) in headers" class="entrada">
+        <Input class="mt-3" :key :label="item?.name" v-if="item?.name !== 'acciones'"/>
+      </div>
+    </div>
+    <div flex gapped class="mt-3">
+      <Input value="Guardar" type="button" background="var(--primary)" color="white"/>
+      <Input value="Cancelar" type="button" background="var(--red)" color="white"
+             @click="() => {productStore.product_modal = false}"/>
+    </div>
+  </Modal>
+</template>
+
+<style scoped lang="scss">
+.entradas {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.entrada {
+  width: 47%;
+}
+</style>

src/components/productos/Table.vue

@@ -2,6 +2,7 @@
 import {useUi} from "@/pinia/ui";
 import {onMounted} from "vue";
 import {useProductStore} from "@/pinia/products";
+import {limit} from "../../services/utils";
 
 const props = defineProps(["items", "headers"])
 const productStore = useProductStore();
@@ -20,7 +21,10 @@ onMounted(async () => {
       </thead>
       <tbody>
       <tr v-for="(item, key) in productStore.productos">
-        <td noselect v-for="(head, key) in headers" :class="head">{{ item?.[head?.name?.toLowerCase()] }}</td>
+        <td noselect v-for="(head, key) in headers" :class="head">{{
+            limit(item?.[head?.name?.toLowerCase()], 30)
+          }}
+        </td>
       </tr>
       </tbody>
     </table>
@@ -47,6 +51,7 @@ table {
 
 thead > tr > th {
   border-top: none;
+  text-transform: capitalize;
 
 
   &:first-child {

src/pinia/products.js

@@ -4,7 +4,8 @@ import {DBService, post} from "@/services/apiReq";
 export const useProductStore = defineStore('products', {
     state: () => ({
         productos: [],
-        filter: {}
+        filter: {},
+        product_modal: false,
     }),
     actions: {
         async fetchProducts() {

src/services/utils.js

@@ -0,0 +1,12 @@
+export const limit = (text, limit) => {
+    if (!text) return "";
+    if (text?.length <= limit) {
+        return text;
+    } else {
+        try {
+            return text?.slice(0, limit) + '...';
+        } catch (e) {
+            return text;
+        }
+    }
+}

src/styles/digitalpower.css

@@ -357,13 +357,14 @@ p {
 
 [overlay] {
     position: fixed;
-    top: 0;
+    top: 2em !important;
-    left: 0;
+    left: 2em !important;
-    width: 100vw;
+    width: calc(100vw - 4.6em) !important;
-    height: 100vh;
+    height: calc(100vh - 4.2em) !important;
 
     z-index: 15;
     background: var(--gray);
+    border-radius: 15px;
 }
 
 [inside-verlay] {

src/views/HomeView.vue

@@ -2,6 +2,7 @@
   <Layout @click="handleClick">
     <Table :headers :items="productos"></Table>
     <Filters :filters="headers"></Filters>
+    <ProductModal v-if="productStore.product_modal" :headers/>
   </Layout>
 </template>
 
@@ -11,13 +12,14 @@ import Table from "@/components/productos/Table.vue";
 import {computed, onMounted, ref} from "vue";
 import Filters from "@/components/productos/Filters.vue";
 import {useUi} from "@/pinia/ui";
-import {show} from "@/services/notification";
 import {useUserStore} from "@/pinia/user";
+import ProductModal from "@/components/productos/ProductModal.vue";
+import {useProductStore} from "@/pinia/products";
 
 const ui = useUi();
-const userStore = useUserStore()
+const productStore = useProductStore()
 const headers = computed(() => {
-  const producto = productos.value?.[0];
+  const producto = productStore.productos?.[0];
   if (!producto) return [
     {value: 'Nombre', name: 'Nombre'},
     {value: 'Precio', name: 'Precio'},
@@ -26,32 +28,17 @@ const headers = computed(() => {
     {value: 'Acciones', name: 'Acciones'},
   ];
 
+  delete producto.id;
+  producto.acciones = null;
+
   return Object.keys(producto).map((x) => {
     return {value: x, name: x};
   })
 })
 const productos = ref([
   {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
-  {Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
 ]);
 
-
-onMounted(() => {
-
-})
-
 function handleClick() {
   ui.setCurrentMenu(null)
 }