diff --git a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue index 163155a..dc02801 100644 --- a/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue +++ b/tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue @@ -1,7 +1,7 @@ <template> <v-app> + <NavBar /> <v-main> - <NavBar /> <router-view /> </v-main> </v-app> @@ -17,26 +17,3 @@ }, } </script> - -<style> -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; -} - -nav { - padding: 30px; -} - -nav a { - font-weight: bold; - color: #2c3e50; -} - -nav a.router-link-exact-active { - color: #42b983; -} -</style> 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 f84e6d8..64cf73c 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,64 +1,46 @@ <template> - <v-main> - <v-card> - <v-layout> - <v-app-bar color="primary" prominent app> - <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-main style="height: 500px;"> - <v-card-text> - The navigation drawer will appear from the bottom on smaller size screens. - </v-card-text> - </v-main> - </v-layout> - </v-card> - </v-main> + <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>Menu</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> + <v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)"> + <v-list-item-title>{{ item.title }}</v-list-item-title> + </v-list-item> + </v-list> + </v-navigation-drawer> </template> + <script> export default { + name: 'NavBar', data: () => ({ drawer: false, group: null, - items: [ - { - title: 'Foo', - value: 'foo', - }, - { - title: 'Bar', - value: 'bar', - }, - { - title: 'Fizz', - value: 'fizz', - }, - { - title: 'Buzz', - value: 'buzz', - }, + menuItems: [ + { title: 'Inicio', route: '/'}, + { title: 'Comprar', route:'/comprar'}, + { title: 'Resumen de Compra', route:'/resumen_compra'}, ], }), - watch: { group () { this.drawer = false }, }, + methods: { + navigate(route) { + this.$router.push(route); + }, + } } </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 be5ee18..2b77f7f 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,5 +1,5 @@ <template> - <v-container> + <v-container> <v-form ref="form" v-model="valid"> <v-row> <v-col> @@ -35,8 +35,8 @@ <v-divider></v-divider> <v-container> <v-toolbar> - <v-toolbar-title secondary>Productos</v-toolbar-title> - </v-toolbar> + <v-toolbar-title secondary>Productos</v-toolbar-title> + </v-toolbar> <v-container v-for="(line, index) in purchase.saleline_set" :key="line.id"> <v-row> <v-col> @@ -87,11 +87,8 @@ </v-row> </v-container> <v-btn @click="addLine" color="blue">Agregar</v-btn> - - </v-container> - + </v-container> <v-divider></v-divider> - <v-text-field :value="calculateTotal" label="Total" @@ -133,6 +130,11 @@ this.fetchClients(); this.fetchProducts(); }, + watch: { + group () { + this.drawer = false + }, + }, computed: { calculateTotal() { return this.purchase.saleline_set.reduce((total, saleline) => {