Add Product

src/App.vue

@@ -46,6 +46,23 @@ body {
   color: #2c3e50;
 }
 
+#title-bar {
+  -webkit-app-region: drag;
+  height: 20px;
+  background: var(--primary);
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+}
+
+#notification-container {
+  top: unset !important;
+  bottom: 2em !important;
+  margin-top: 6em;
+  right: 4% !important;
+}
+
 nav {
   padding: 30px;
 
@@ -83,16 +100,6 @@ label {
   position: relative;
 }
 
-#title-bar {
-  -webkit-app-region: drag;
-  height: 20px;
-  background: var(--primary);
-  color: white;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-}
-
 .select-wrapper::after {
   content: ">" !important;
 }
@@ -117,12 +124,6 @@ label {
   animation: slideOut var(--duration) forwards;
 }
 
-#notification-container {
-  top: unset !important;
-  bottom: 2em !important;
-  margin-top: 6em;
-  right: 4% !important;
-}
 
 [selectedNav="true"] {
   background: white;

src/components/app/Intro.vue

@@ -39,7 +39,7 @@ onMounted(() => {
   <div id="intro" flex flex-center>
     <div flex flex-column flex-center>
       <img id="intro-image" src="/DigitalPower.png">
-      <h2 id="intro-text" noselect="" class="mt-4">Hacemos tus sueños <br> realidad</h2>
+      <h2 id="intro-text" noselect="" class="mt-4">La fabrica de aplicaciones <br> Web</h2>
     </div>
   </div>
 </template>

src/components/productos/ProductModal.vue

@@ -1,21 +1,24 @@
 <script setup>
 import {Modal, Input} from 'vuedigitalpowerui'
 import {useProductStore} from "@/pinia/products";
+import {reactive} from "vue";
 
 const productStore = useProductStore()
 const props = defineProps(["headers"])
 const emits = defineEmits(["confirm"])
+const newProduct = reactive({});
 </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'"/>
+        <Input class="mt-3" :key :label="item?.name" v-if="item?.name !== 'acciones'" v-model="newProduct[item?.name]"/>
       </div>
     </div>
     <div flex gapped class="mt-3">
-      <Input value="Guardar" type="button" background="var(--primary)" color="white"/>
+      <Input value="Guardar" type="button" background="var(--primary)" color="white"
+             @click="() => emits('confirm', newProduct)"/>
       <Input value="Cancelar" type="button" background="var(--red)" color="white"
              @click="() => {productStore.product_modal = false}"/>
     </div>

src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <Layout @click="handleClick">
     <Table :headers :items="productos"></Table>
     <Filters :filters="headers"></Filters>
-    <ProductModal v-if="productStore.product_modal" :headers/>
+    <ProductModal v-if="productStore.product_modal" :headers @confirm="saveProduct"/>
   </Layout>
 </template>
 
@@ -15,6 +15,7 @@ import {useUi} from "@/pinia/ui";
 import {useUserStore} from "@/pinia/user";
 import ProductModal from "@/components/productos/ProductModal.vue";
 import {useProductStore} from "@/pinia/products";
+import {DBService, post} from "@/services/apiReq";
 
 const ui = useUi();
 const productStore = useProductStore()
@@ -42,4 +43,13 @@ const productos = ref([
 function handleClick() {
   ui.setCurrentMenu(null)
 }
+
+async function saveProduct(product) {
+  let response = await post('/insert', {
+    table: 'productos',
+    data: product,
+  }, DBService);
+  productStore.product_modal = false;
+  await productStore.fetchProducts();
+}
 </script>