OneTeam/don_confiao
15
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Experimento: Hacer venta el framework vuetify de javascript #33

New Issue
Closed
opened 2024-09-12 07:55:42 -05:00 by mono · 2 comments
mono commented 2024-09-12 07:55:42 -05:00
Owner
Copy Link

Ejemplo de codigo de ia:

<template>
  <v-app>
    <v-navigation-drawer app>
      <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>

    <v-app-bar app>
      <v-toolbar-title>Formulario de Compra</v-toolbar-title>
    </v-app-bar>

    <v-container>
      <v-form ref="form" v-model="valid">
        <v-text-field
          v-model="purchase.date"
          label="Fecha"
          type="date"
          :rules="[rules.required]"
          required
        ></v-text-field>

        <v-text-field
          v-model="purchase.client"
          label="Cliente"
          :rules="[rules.required]"
          required
        ></v-text-field>

        <v-textarea
          v-model="purchase.notes"
          label="Notas"
        ></v-textarea>

        <v-divider></v-divider>

        <v-subheader>Líneas de Productos</v-subheader>
        <v-for="(line, index) in purchase.lines" :key="index">
          <v-row>
            <v-col>
              <v-text-field
                v-model="line.product"
                label="Producto"
                :rules="[rules.required]"
                required
              ></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                v-model.number="line.price"
                label="Precio"
                type="number"
                :rules="[rules.required]"
                required
              ></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                v-model.number="line.quantity"
                label="Cantidad"
                type="number"
                :rules="[rules.required]"
                required
              ></v-text-field>
            </v-col>
            <v-col>
              <v-text-field
                :value="calculateSubtotal(line)"
                label="Subtotal"
                readonly
              ></v-text-field>
            </v-col>
            <v-col>
              <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
            </v-col>
          </v-row>
        </v-for>

        <v-btn @click="addLine" color="blue">Agregar Línea</v-btn>

        <v-divider></v-divider>

        <v-text-field
          :value="calculateTotal"
          label="Total de la Compra"
          readonly
        ></v-text-field>

        <v-btn @click="submit" color="green">Enviar</v-btn>
      </v-form>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      valid: false,
      purchase: {
        date: '',
        client: '',
        notes: '',
        lines: [{ product: '', price: 0, quantity: 0 }],
      },
      rules: {
        required: value => !!value || 'Requerido.',
      },
      menuItems: [
        { title: 'Inicio', route: '/' },
        { title: 'Compras', route: '/compras' },
      ],
    };
  },
  computed: {
    calculateTotal() {
      return this.purchase.lines.reduce((total, line) => {
        return total + this.calculateSubtotal(line);
      }, 0);
    },
  },
  methods: {
    addLine() {
      this.purchase.lines.push({ product: '', price: 0, quantity: 0 });
    },
    removeLine(index) {
      this.purchase.lines.splice(index, 1);
    },
    calculateSubtotal(line) {
      return line.price * line.quantity;
    },
    async submit() {
      if (this.$refs.form.validate()) {
        try {
          const response = await fetch('http://tu-api-django.com/api/compras/', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(this.purchase),
          });
          if (response.ok) {
            const data = await response.json();
            console.log('Compra enviada:', data);
            // Aquí puedes manejar la respuesta de la API
          } else {
            console.error('Error al enviar la compra:', response.statusText);
          }
        } catch (error) {
          console.error('Error de red:', error);
        }
      }
    },
    navigate(route) {
      this.$router.push(route);
    },
  },
};
</script>

<style>
/* Estilos personalizados si es necesario */
</style>
Ejemplo de codigo de ia: ```js <template> <v-app> <v-navigation-drawer app> <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> <v-app-bar app> <v-toolbar-title>Formulario de Compra</v-toolbar-title> </v-app-bar> <v-container> <v-form ref="form" v-model="valid"> <v-text-field v-model="purchase.date" label="Fecha" type="date" :rules="[rules.required]" required ></v-text-field> <v-text-field v-model="purchase.client" label="Cliente" :rules="[rules.required]" required ></v-text-field> <v-textarea v-model="purchase.notes" label="Notas" ></v-textarea> <v-divider></v-divider> <v-subheader>Líneas de Productos</v-subheader> <v-for="(line, index) in purchase.lines" :key="index"> <v-row> <v-col> <v-text-field v-model="line.product" label="Producto" :rules="[rules.required]" required ></v-text-field> </v-col> <v-col> <v-text-field v-model.number="line.price" label="Precio" type="number" :rules="[rules.required]" required ></v-text-field> </v-col> <v-col> <v-text-field v-model.number="line.quantity" label="Cantidad" type="number" :rules="[rules.required]" required ></v-text-field> </v-col> <v-col> <v-text-field :value="calculateSubtotal(line)" label="Subtotal" readonly ></v-text-field> </v-col> <v-col> <v-btn @click="removeLine(index)" color="red">Eliminar</v-btn> </v-col> </v-row> </v-for> <v-btn @click="addLine" color="blue">Agregar Línea</v-btn> <v-divider></v-divider> <v-text-field :value="calculateTotal" label="Total de la Compra" readonly ></v-text-field> <v-btn @click="submit" color="green">Enviar</v-btn> </v-form> </v-container> </v-app> </template> <script> export default { data() { return { valid: false, purchase: { date: '', client: '', notes: '', lines: [{ product: '', price: 0, quantity: 0 }], }, rules: { required: value => !!value || 'Requerido.', }, menuItems: [ { title: 'Inicio', route: '/' }, { title: 'Compras', route: '/compras' }, ], }; }, computed: { calculateTotal() { return this.purchase.lines.reduce((total, line) => { return total + this.calculateSubtotal(line); }, 0); }, }, methods: { addLine() { this.purchase.lines.push({ product: '', price: 0, quantity: 0 }); }, removeLine(index) { this.purchase.lines.splice(index, 1); }, calculateSubtotal(line) { return line.price * line.quantity; }, async submit() { if (this.$refs.form.validate()) { try { const response = await fetch('http://tu-api-django.com/api/compras/', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(this.purchase), }); if (response.ok) { const data = await response.json(); console.log('Compra enviada:', data); // Aquí puedes manejar la respuesta de la API } else { console.error('Error al enviar la compra:', response.statusText); } } catch (error) { console.error('Error de red:', error); } } }, navigate(route) { this.$router.push(route); }, }, }; </script> <style> /* Estilos personalizados si es necesario */ </style> ```
mono self-assigned this 2024-09-12 07:55:42 -05:00
Rodia commented 2024-09-14 19:28:26 -05:00
Owner
Copy Link

Resultado de realizar esta Prueba

image

Resultado de realizar esta Prueba ![image](/attachments/a246c869-1a4a-4d61-b6ba-07e1850bf367)
image.png
49 KiB
mono commented 2024-09-28 16:07:30 -05:00
Author
Owner
Copy Link

Se decide usar vuetify #34

Se decide usar vuetify https://gitea.onecluster.org/OneTeam/don_confiao/pulls/34
mono closed this issue 2024-09-28 16:07:30 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
mono
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: OneTeam/don_confiao#33
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?