SHARE
TWEET

Untitled

a guest May 19th, 2019 62 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div class="pa-5">
  3.         <div class="text-md-center display-3">
  4.             Bienvenid@ a
  5.             <span class="font-weight-light darken-2 primary--text text--lighten-1">
  6.                 Home<span class="font-weight-bold">Switch</span> Home
  7.             </span>
  8.         </div>
  9.         <img src="https://i.imgur.com/3ZY7s2y.png" class="center"/>
  10.         <br>
  11.         <hr>
  12.         <br>
  13.         <p class="text-xs-center display-2">Subastas:</p>
  14.  
  15.         <!-- Tabla de subastas para que los visitantes puedan visualizarla y ofertar -->
  16.         <v-data-table
  17.             class="elevation-1"
  18.             :headers="encabezadosDeTabla"
  19.             :items="infoSubastas"
  20.         >
  21.             <template #items="props">
  22.                 <td class="text-xs-right">{{ props.item.idSubasta }}</td>
  23.                 <td class="text-xs-right">{{ props.item.idResidencia }}</td>
  24.                 <td class="text-xs-right">{{ props.item.fechaDeInicio }}</td>
  25.                 <td class="text-xs-right">{{ props.item.fechaDeFin }}</td>
  26.                 <td class="text-xs-right">{{ props.item.montoInicial }}</td>
  27.                 <td class="text-xs-right">
  28.                     {{ props.item.ofertas.length }} {{ props.item.ofertas.length === 1 ? 'oferta' : 'ofertas' }}
  29.                 </td>
  30.  
  31.                 <td>
  32.                     <v-layout row>
  33.                         <v-tooltip left open-delay="100" close-delay="0">
  34.                             <template v-slot:activator="{ on }">
  35.                                 <v-btn
  36.                                     flat
  37.                                     icon
  38.                                     class="secondary--text"
  39.                                     @click.stop="mostrarFormularioDeOferta( props.item.idSubasta )"
  40.                                     v-on="on"
  41.                                 >
  42.                                     <v-icon color="green darken-2">attach_money</v-icon>
  43.                                 </v-btn>
  44.                             </template>
  45.                             <span>Ofertar</span>
  46.                         </v-tooltip>
  47.  
  48.                         <v-tooltip left open-delay="100" close-delay="0">
  49.                             <template v-slot:activator="{ on }">
  50.                                 <v-btn
  51.                                     flat
  52.                                     icon
  53.                                     class="secondary--text"
  54.                                     @click.stop="mostrarDetalle( props.item.idSubasta )"
  55.                                     v-on="on"
  56.                                 >
  57.                                     <v-icon>info</v-icon>
  58.                                 </v-btn>
  59.                             </template>
  60.                             <span>Mostrar detalles</span>
  61.                         </v-tooltip>
  62.                     </v-layout>
  63.                 </td>
  64.             </template>
  65.         </v-data-table>
  66.  
  67.  
  68.     </div>
  69. </template>
  70.  
  71. <script lang="ts">
  72.     import { Component, Vue } from 'vue-property-decorator';
  73.     import TablaDeSubastas from '@/components/TablaDeSubastas.vue';
  74.     import { server } from '@/utils/helper';
  75.     import { Subasta } from '@/interfaces/subasta.interface';
  76.     import { Residencia } from '@/interfaces/residencia.interface';
  77.     import { VuetifyDataTableHeader } from '@/typings/vuetify-data-table-header.d';
  78.     import axios from 'axios';
  79.  
  80.     @Component
  81.     export default class Inicio extends Vue {
  82.         public subastas: Subasta[ ] = [ ]; // duda
  83.         public residencias: Residencia[ ] = [ ];
  84.         public infoSubastas = [ ];
  85.         /**
  86.          * Hook de ciclo de vida.
  87.          *
  88.          * Carga las subastas actualmente en el sistema al instanciar el componente.
  89.          */
  90.         public created( ): void {
  91.             Promise.all( [ this.obtenerSubastas(), this.obtenerResidencias() ] )
  92.                 .then (() => {
  93.                     this.infoSubastas = this.subastas.map((subasta) => {
  94.                         const residencia = this.obtenerResdenciaPorId(subasta.idResidencia);
  95.                         return (residencia === null)? undefined :
  96.                         {
  97.                             idSubasta: subasta.idResidencia,
  98.                             idResidencia: residencia.titulo,
  99.                         };
  100.                     }).filter(subasta => subasta !== undefined)
  101.                 })
  102.         }
  103.  
  104.         /**
  105.          * Solicita la lista de todas las subastas actualmente en el sistema.
  106.          *
  107.          * Al recibir una respuesta de éxito, actualiza la lista de subastas del componente con las recibidas.
  108.          */
  109.         public async obtenerSubastas( ): Promise<void> {
  110.             // TODO: Agregar bloque try para el caso donde la solicitud falle
  111.  
  112.             const respuestaSubastas = await axios.get<Subasta[ ]>( `${ server.baseURL }/subastas` );
  113.             this.subastas = respuestaSubastas.data;
  114.         }
  115.  
  116.         public encabezadosDeTabla: VuetifyDataTableHeader[ ] = [
  117.             {
  118.                 text: 'Id',
  119.                 value: 'idSubasta',
  120.                 align: 'right'
  121.             },
  122.             {
  123.                 text: 'idResidencia',
  124.                 value: 'idResidencia',
  125.                 align: 'right'
  126.             },
  127.             {
  128.                 text: 'Fecha de fin',
  129.                 value: 'fechaDeFin',
  130.                 align: 'right'
  131.             },
  132.             {
  133.                 text: 'Fecha de inicio',
  134.                 value: 'fechaDeInicio',
  135.                 align: 'right'
  136.             },
  137.             {
  138.                 text: 'Monto Inicial',
  139.                 value: 'montoInicial',
  140.                 align: 'right'
  141.             },
  142.             {
  143.                 text: 'Ofertas',
  144.                 value: 'ofertas',
  145.                 align: 'right'
  146.             },
  147.             {
  148.                 text: '',
  149.                 value: '',
  150.                 align: 'right',
  151.                 sortable: false
  152.             },
  153.         ];
  154.  
  155.         // Aca se caga todo
  156.  
  157.         /**
  158.          * Solicita la lista de todas las residencias actualmente en el sistema.
  159.          *
  160.          * Al recibir una respuesta de éxito, actualiza la lista de residencias del componente con las recibidas.
  161.          */
  162.         public async obtenerResidencias( ): Promise<void> {
  163.             // TODO: Agregar bloque try para el caso donde la solicitud falle
  164.  
  165.             const respuestaResidencias = await axios.get<Residencia[ ]>( `${ server.baseURL }/residencias` );
  166.             this.residencias = respuestaResidencias.data;
  167.         }
  168.  
  169.         public obtenerResdenciaPorId( idResidencia: String ): Residencia | null {
  170.             const resdenciaRespuesta = this.residencias.find( residencia => residencia.idResidencia === idResidencia );
  171.             return (resdenciaRespuesta === undefined)? null : resdenciaRespuesta;
  172.         }
  173.     }
  174. </script>
  175.  
  176. <style>
  177.     .center {
  178.         display: block;
  179.         margin-left: auto;
  180.         margin-right: auto;
  181.         width: 20%;
  182.     }
  183. </style>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top