From 506a280f6e77be4a183153e2eab975a7ccd0b8da Mon Sep 17 00:00:00 2001
From: Rodia <alejandro.ayala@onecluster.org>
Date: Sat, 5 Oct 2024 11:48:59 -0500
Subject: [PATCH] Feat: Barra de Navegacion en Formulario de Compras

---
 .../don-confiao/src/components/NavBar.vue     | 18 +-------
 .../don-confiao/src/components/Purchase.vue   | 44 +++++++++++++++++--
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
index bf883dd..aabdd7e 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/NavBar.vue
@@ -1,21 +1,5 @@
 <template>
-    <v-container>
-    <v-app-bar color="primary" prominent>
-        <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
-        <v-toolbar-title>My files</v-toolbar-title>
-        <v-spacer></v-spacer>
-        <template v-if="$vuetify.display.mdAndUp">
-          <v-btn icon="mdi-magnify" variant="text"></v-btn>
-          <v-btn icon="mdi-filter" variant="text"></v-btn>
-        </template>
-        <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
-      </v-app-bar>
-      <v-navigation-drawer v-model="drawer"
-                           :location="$vuetify.display.mobile ? 'bottom' : undefined"
-                           temporary>
-          <v-list :items="items"></v-list>
-      </v-navigation-drawer>
-    </v-container>
+
 </template>
 
 <script>
diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
index af985f9..4560b34 100644
--- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
+++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/components/Purchase.vue
@@ -1,6 +1,20 @@
 <template>
-  <v-main>
-    <v-container app>
+  <v-app-bar color="primary" prominent>
+    <v-app-bar-nav-icon variant="text" @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+    <v-toolbar-title>My files</v-toolbar-title>
+    <v-spacer></v-spacer>
+    <template v-if="$vuetify.display.mdAndUp">
+      <v-btn icon="mdi-magnify" variant="text"></v-btn>
+      <v-btn icon="mdi-filter" variant="text"></v-btn>
+    </template>
+    <v-btn icon="mdi-dots-vertical" variant="text"></v-btn>
+  </v-app-bar>
+  <v-navigation-drawer v-model="drawer"
+                       :location="$vuetify.display.mobile ? 'bottom' : undefined"
+                       temporary>
+    <v-list :items="items"></v-list>
+  </v-navigation-drawer>
+  <v-container app>
       <v-form ref="form" v-model="valid">
         <v-text-field
           v-model="purchase.date"
@@ -91,7 +105,6 @@
         <v-btn @click="submit" color="green">Comprar</v-btn>
       </v-form>
     </v-container>
-  </v-main>
 </template>
 
 <script>
@@ -103,6 +116,26 @@
     data() {
       return {
         valid: false,
+        drawer: false,
+        group: null,
+        items: [
+          {
+            title: 'Foo',
+            value: 'foo',
+          },
+          {
+            title: 'Bar',
+            value: 'bar',
+          },
+          {
+            title: 'Fizz',
+            value: 'fizz',
+          },
+          {
+            title: 'Buzz',
+            value: 'buzz',
+          },
+        ],
         purchase: {
           date: '',
           client: null,
@@ -124,6 +157,11 @@
       this.fetchClients();
       this.fetchProducts();
     },
+    watch: {
+      group () {
+        this.drawer = false
+      },
+    },
     computed: {
       calculateTotal() {
         return this.purchase.saleline_set.reduce((total, saleline) => {