github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/shared/fields/OptionPrixParticipantField.vue (about)

     1  <template>
     2    <div class="mb-2">
     3      <div v-if="kind.statut">
     4        <b-form-group
     5          label="Choisir un tarif particulier :"
     6          description="Optionnel."
     7        >
     8          <b-form-select
     9            :options="optionsStatut"
    10            v-model="value.statut"
    11            @change="onChange"
    12          >
    13          </b-form-select>
    14        </b-form-group>
    15      </div>
    16      <div v-else-if="kind.semaine">
    17        <b-form-group
    18          label="Choisir une semaine de présence :"
    19          description="Optionnel."
    20        >
    21          <b-form-select
    22            :options="optionsSemaine"
    23            v-model="value.semaine"
    24            @change="onChange"
    25          >
    26          </b-form-select>
    27        </b-form-group>
    28      </div>
    29      <div v-else-if="kind.quotient_familial">
    30        <b-form-group
    31          label="Indiquer un quotient familial :"
    32          description="Optionnel. Indiquer 0 pour ne pas prendre en compte votre quotient familial"
    33        >
    34          <b-form-input
    35            v-model.number="value.quotient_familial"
    36            type="number"
    37            @change="onChange"
    38            min="0"
    39            :max="maxQuotientFamilial"
    40          >
    41          </b-form-input>
    42        </b-form-group>
    43      </div>
    44      <div v-else-if="kind.jour">
    45        <b-form-group
    46          label="Cocher les jours de présence :"
    47          description="Optionnel. Cocher les cases de présence du participant"
    48        >
    49          <b-form-checkbox-group
    50            :checked="valueJour"
    51            @change="onChangeJour"
    52            :options="optionsJour"
    53          >
    54          </b-form-checkbox-group>
    55        </b-form-group>
    56      </div>
    57    </div>
    58  </template>
    59  
    60  <script lang="ts">
    61  import Vue from "vue";
    62  import Component from "vue-class-component";
    63  
    64  import StaticList from "./StaticList.vue";
    65  import { QuotientFamilial } from "../logic/enums";
    66  import {
    67    PrixParStatut,
    68    OptionPrixCamp,
    69    OptionPrixParticipant,
    70    Semaine,
    71    Date_,
    72    Jours
    73  } from "@/shared/logic/types";
    74  import { formatDateObject } from "../logic/utils";
    75  
    76  const OptionPrixParticipantFieldProps = Vue.extend({
    77    props: {
    78      option: Object as () => OptionPrixCamp,
    79      value: Object as () => OptionPrixParticipant,
    80      dateDebutCamp: (String as unknown) as () => Date_
    81    },
    82    model: {
    83      prop: "value",
    84      event: "change"
    85    }
    86  });
    87  
    88  type optionKind = "statut" | "semaine" | "quotient_familial" | "jour";
    89  type kindCrible = { [P in optionKind]: boolean };
    90  @Component({
    91    components: { StaticList }
    92  })
    93  export default class OptionPrixParticipantField extends OptionPrixParticipantFieldProps {
    94    get kind(): kindCrible {
    95      const a = this.option.active as optionKind;
    96      return {
    97        statut: a == "statut",
    98        semaine: a == "semaine",
    99        quotient_familial: a == "quotient_familial",
   100        jour: a == "jour"
   101      };
   102    }
   103  
   104    get optionsStatut() {
   105      return [{ value: 0, text: "Pas d'option" }].concat(
   106        (this.option.statut || []).map((item: PrixParStatut) => {
   107          return { value: item.id, text: item.statut };
   108        })
   109      );
   110    }
   111  
   112    get optionsSemaine() {
   113      return [
   114        { value: Semaine.SComplet, text: "Tout le séjour" },
   115        { value: Semaine.SSe1, text: "Semaine 1" },
   116        { value: Semaine.SSe2, text: "Semaine 2" }
   117      ];
   118    }
   119  
   120    maxQuotientFamilial = QuotientFamilial[QuotientFamilial.length - 1];
   121  
   122    get optionsJour() {
   123      const dateDebut = new Date(this.dateDebutCamp);
   124      return (this.option.jour || []).map((_, i) => {
   125        const dateJour = new Date(dateDebut.valueOf());
   126        dateJour.setDate(dateDebut.getDate() + i);
   127        return { value: i, text: formatDateObject(dateJour) };
   128      });
   129    }
   130  
   131    onChange() {
   132      this.$emit("change", this.value);
   133    }
   134  
   135    // on transforme le champ jour pour être plus intuitif en case de présence complète
   136    get valueJour() {
   137      if ((this.value.jour || []).length == 0) {
   138        // rien coché -> affiche tout coché
   139        return this.optionsJour.map(o => o.value);
   140      }
   141      return this.value.jour;
   142    }
   143  
   144    // on transforme le champ jour pour être plus intuitif en case de présence complète
   145    onChangeJour(jour: Jours) {
   146      if ((jour || []).length == this.optionsJour.length) {
   147        // tout coché -> équivalent à rien coché
   148        jour = [];
   149      }
   150      Vue.nextTick(() => {
   151        // bug due to checkbox synchronisation
   152        this.value.jour = jour;
   153        this.onChange();
   154      });
   155    }
   156  }
   157  </script>
   158  
   159  <style scoped></style>