Feat: Create Customer Modal

tienda_ilusion/don_confiao/frontend/don-confiao/src/assets/icons/rectangle-xmark-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/CreateCustomerModal.vue

@@ -0,0 +1,86 @@
+<template>
+  <v-dialog v-model="showModal" max-width="600px">
+    <v-card>
+      <v-card-title>
+        <span class="headline">Información del Cliente</span>
+      </v-card-title>
+      <v-card-text>
+        <v-form ref="form" v-model="valid">
+          <v-text-field
+            v-model="customer.name"
+            label="Nombre"
+            :rules="[rules.required]"
+            required
+          ></v-text-field>
+          <v-text-field
+            v-model="customer.email"
+            label="Correo Electrónico"
+            :rules="[rules.required, rules.email]"
+            required
+          ></v-text-field>
+          <v-text-field
+            v-model="customer.phone"
+            label="Teléfono"
+            :rules="[rules.required]"
+            required
+          ></v-text-field>
+        </v-form>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="blue darken-1" text @click="closeModal">Cancelar</v-btn>
+        <v-btn color="blue darken-1" text @click="submitForm">Guardar</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+ export default {
+     data() {
+         return {
+             showModal: false,
+             valid: false,
+             customer: {
+                 name: '',
+                 email: '',
+                 phone: ''
+             },
+             rules: {
+                 required: value => !!value || 'Este campo es requerido.',
+                 email: value => {
+                     const pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
+                     return pattern.test(value) || 'El correo no es válido.';
+                 }
+             }
+         };
+     },
+     methods: {
+         openModal() {
+             this.showModal = true;
+         },
+         closeModal() {
+             this.showModal = false;
+             this.resetForm();
+         },
+         submitForm() {
+             if (this.$refs.form.validate()) {
+                 // Aquí puedes manejar el envío del formulario
+                 console.log('Cliente guardado:', this.customer);
+                 this.closeModal();
+             }
+         },
+         resetForm() {
+             this.customer = {
+                 name: '',
+                 email: '',
+                 phone: ''
+             };
+             this.$refs.form.reset();
+         }
+     }
+ };
+</script>
+
+<style scoped>
+</style>

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/ModalView.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="modal">
+      <div class="head">
+          <p>Nuevo Movimiento</p>
+          <img @click="close" src="@/assets/close-icon.svg" alt="cerrar"/>
+      </div>
+      <div class="body">
+          <slot></slot>
+      </div>
+  </div>
+</template>
+
+<script setup>
+ import { defineEmits } from "vue";
+
+ const emit = defineEmits(["close"]);
+
+ const close = () => emit("close");
+</script>

tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue

@@ -15,6 +15,8 @@
               required
               class="mr-4"
             ></v-autocomplete>
+            <v-btn color="primary" @click="openModal">Agregar Cliente</v-btn>
+            <CreateCustomerModal ref="customerModal" />
           </v-col>
           <v-col
             lg="2"
@@ -112,8 +114,13 @@
 </template>
 
 <script>
+ import CustomerForm from './CreateCustomerModal.vue';
+
  export default {
    name: 'DonConfiao',
+   components: {
+     CustomerForm
+   },
    props: {
      msg: String
    },
@@ -174,6 +181,9 @@
      },
    },
    methods: {
+     openModal() {
+      this.$refs.customerModal.openModal();
+     },
      getCurrentDate() {
        const today = new Date();
        const yyyy = today.getFullYear();