github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/equipiers/ResultsEquipier.vue (about)

     1  <template>
     2    <div class="ma-2">
     3      <v-data-table
     4        :headers="header"
     5        :items="items"
     6        hide-default-footer
     7        sort-by=""
     8        height="53vh"
     9        fixed-header
    10        id="results-equipiers"
    11      >
    12        <template v-slot:no-data>
    13          <v-layout row align-center style="height: 35vh;">
    14            <v-flex>
    15              <v-alert :value="true" class="my-2" type="warning">
    16                Aucun profil ne correspond à votre recherche.
    17                <br />
    18                <i>
    19                  (Votre recherche est peut-être trop exigente ? Essayez de
    20                  reduire les champs requis.)
    21                </i>
    22              </v-alert>
    23            </v-flex>
    24          </v-layout>
    25        </template>
    26  
    27        <template v-slot:item="{ item }">
    28          <tr @click="$emit('rattache', item)">
    29            <td
    30              :style="{ backgroundColor: pertinenceColor(asR(item).pertinence) }"
    31            >
    32              {{ asR(item).pertinence }}%
    33            </td>
    34            <td>{{ asR(item).nom }}</td>
    35            <td>{{ asR(item).prenom }}</td>
    36            <td class="text-center">{{ asR(item).date_naissance }}</td>
    37          </tr>
    38        </template>
    39      </v-data-table>
    40    </div>
    41  </template>
    42  
    43  <script lang="ts">
    44  import Vue from "vue";
    45  import Component from "vue-class-component";
    46  import { ResultatRecherche } from "../../logic/types";
    47  
    48  const ResultsEquipierProps = Vue.extend({
    49    props: {
    50      items: Array as () => ResultatRecherche[]
    51    }
    52  });
    53  
    54  @Component({})
    55  export default class ResultsEquipier extends ResultsEquipierProps {
    56    header = [
    57      {
    58        text: "Pertinence",
    59        value: "pertinence",
    60        sortable: true,
    61        width: "30"
    62      },
    63      { text: "Nom", value: "nom", sortable: true },
    64      { text: "Prénom", value: "prenom", sortable: true },
    65      {
    66        text: "Date de naissance",
    67        value: "date_naissance",
    68        sortable: true,
    69        align: "center"
    70      }
    71    ];
    72  
    73    asR = (item: ResultatRecherche) => item;
    74  
    75    pertinenceColor(pertinence: number) {
    76      const red_level = Math.floor(pertinence * 2);
    77      const color = `rgb(${255 - red_level},${red_level}, 15)`;
    78      return color;
    79    }
    80  }
    81  </script>
    82  
    83  <style>
    84  #results-equipiers tr {
    85    cursor: pointer;
    86  }
    87  </style>