github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/sondages/App.vue (about)

     1  <template>
     2    <base-app title="Avis sur les séjours">
     3      <success v-if="output" :output="output"></success>
     4      <error v-if="output" :output="output"></error>
     5  
     6      <b-container class="my-2 mb-3 mx-auto">
     7        <b-row>
     8          <b-col cols="2">
     9            <b-card no-body style="max-height: 85vh;" class="overflow-auto">
    10              <b-card-header>Séjours</b-card-header>
    11              <b-list-group flush>
    12                <b-list-group-item
    13                  v-for="(camp, i) in camps"
    14                  :key="i"
    15                  :active="camp.id === currentCamp"
    16                  button
    17                  @click="selectCamp(camp.id)"
    18                  class="d-flex justify-content-between align-items-center"
    19                >
    20                  {{ camp.text }}
    21                  <b-badge>{{ taille(camp.id) }}</b-badge>
    22                </b-list-group-item>
    23              </b-list-group>
    24            </b-card>
    25          </b-col>
    26          <b-col>
    27            <row-sondage
    28              v-for="sondage in allSondages"
    29              :key="sondage.id"
    30              :sondage="sondage"
    31              v-show="crible[sondage.id]"
    32            >
    33            </row-sondage>
    34          </b-col>
    35        </b-row>
    36      </b-container>
    37    </base-app>
    38  </template>
    39  
    40  <script lang="ts">
    41  import Vue from "vue";
    42  import Component from "vue-class-component";
    43  import BaseApp from "@/BaseApp.vue";
    44  import Success from "@/shared/notifications/Success.vue";
    45  import Error from "@/shared/notifications/Error.vue";
    46  import RowSondage from "./RowSondage.vue";
    47  
    48  import { C } from "./controller";
    49  import { Sondage, SondageDetails } from "../../shared/logic/types";
    50  
    51  @Component({
    52    components: { BaseApp, Success, Error, RowSondage }
    53  })
    54  export default class App extends Vue {
    55    output = C.notifications;
    56    allSondages: SondageDetails[] = [];
    57  
    58    currentCamp: number | null = null;
    59    currentSondage: number | null = null;
    60  
    61    async mounted() {
    62      const data = await C.loadSondages();
    63      if (data == undefined) return;
    64      this.allSondages = data;
    65  
    66      if ("id" in this.$route.query) {
    67        this.currentSondage = Number(this.$route.query["id"]);
    68      }
    69    }
    70  
    71    get camps() {
    72      const camps: { [key: number]: string } = {};
    73      this.allSondages.forEach(s => {
    74        camps[s.id_camp] = s.camp;
    75      });
    76      const out: { id: number; text: string }[] = [];
    77      for (const key in camps) {
    78        out.push({ id: Number(key), text: camps[key] });
    79      }
    80      return out;
    81    }
    82  
    83    get sondages() {
    84      if (this.currentSondage !== null) {
    85        return this.allSondages.filter(s => s.id === this.currentSondage);
    86      }
    87      if (this.currentCamp !== null) {
    88        return this.allSondages.filter(s => s.id_camp === this.currentCamp);
    89      }
    90      return this.allSondages;
    91    }
    92  
    93    get crible() {
    94      const out: { [key: number]: boolean } = {};
    95      this.sondages.forEach(s => {
    96        out[s.id] = true;
    97      });
    98      return out;
    99    }
   100  
   101    taille(idCamp: number) {
   102      return this.allSondages.filter(s => s.id_camp === idCamp).length;
   103    }
   104  
   105    selectCamp(idCamp: number) {
   106      this.currentSondage = null;
   107      this.currentCamp = idCamp;
   108    }
   109  }
   110  </script>
   111  
   112  <style></style>