github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/directeurs/src/components/home/DetailsI.vue

<template>
  <v-card flat v-if="details != null">
    <v-form ref="form">
      <v-card-text>
        <v-row dense>
          <v-col xs="12" md="3">
            <v-text-field v-model="details.nom" label="Nom"></v-text-field>
          </v-col>
          <v-col xs="12" md="3">
            <v-text-field v-model="details.lieu" label="Lieu"></v-text-field>
          </v-col>
          <v-col xs="12" md="2">
            <v-text-field
              :value="date(details.date_debut)"
              label="Date de début"
              readonly
            ></v-text-field>
          </v-col>
          <v-col xs="12" md="2">
            <v-text-field
              :value="date(details.date_fin)"
              label="Date de fin"
              readonly
            ></v-text-field>
          </v-col>
          <v-col xs="12" md="2">
            <v-text-field
              v-model.number="details.nb_places"
              type="number"
              label="Nombre de places"
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row dense>
          <v-col xs="12" sm="6">
            <v-tooltip bottom :disabled="!details.bus.actif">
              <template v-slot:activator="{ on }">
                <v-text-field
                  v-on="on"
                  :value="resumeBus"
                  label="Navette proposée"
                  placeholder="Aucune navette"
                  readonly
                ></v-text-field>
              </template>
              Une option
              <i>Navette</i> est proposée sur le formulaire d'inscription.
            </v-tooltip>
          </v-col>
        </v-row>
        <v-row dense>
          <v-col xs="12" md="3">
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <div v-on="on">
                  <v-checkbox
                    v-if="details != null"
                    label="Matériel de ski proposé"
                    v-model="details.materiel_ski.actif"
                  ></v-checkbox>
                </div>
              </template>
              En cas de sélection, une option
              <i>Prêt de matériel</i> est proposée sur le formulaire
              d'inscription.
            </v-tooltip>
          </v-col>
          <v-col xs="12" md="3">
            <v-text-field
              :disabled="!details.materiel_ski.actif"
              suffix="€"
              type="number"
              label="Prix demandé par le loueur"
              :rules="details.materiel_ski.actif ? [isNonEmpty] : []"
              v-model.number="details.materiel_ski.prix_loueur"
              hint="Prix indicatif de la location pour un participant, chez un loueur professionnel."
            ></v-text-field>
          </v-col>
          <v-col xs="12" md="3">
            <v-text-field
              :disabled="!details.materiel_ski.actif"
              suffix="€"
              type="number"
              label="Prix du matériel ACVE"
              :rules="details.materiel_ski.actif ? [isNonEmpty] : []"
              v-model.number="details.materiel_ski.prix_acve"
              hint="Participation à l'entretion du matériel prété par l'ACVE."
            ></v-text-field>
          </v-col>
        </v-row>
        <v-row dense>
          <v-col xs="12" md="6">
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <div v-on="on">
                  <v-checkbox
                    v-if="details != null"
                    v-model="details.need_equilibre_gf"
                    label="Equilibre garçons/fille souhaité"
                  ></v-checkbox>
                </div>
              </template>
              En cas de sélection, le centre d'inscription sera averti.
              <br />Ce n'est pas une garantie d'un équilibre effectif.
            </v-tooltip>
          </v-col>
        </v-row>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn @click="saveDetails" class="success">Sauvegarder</v-btn>
      </v-card-actions>
    </v-form>
  </v-card>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Details } from "@/logic/types";
import { Formatter } from "@/logic/formatter";
import { C } from "../../logic/controller";

const DetailsIProps = Vue.extend({
  props: {}
});

@Component({})
export default class DetailsI extends DetailsIProps {
  details: Details | null = null;

  date = Formatter.date;

  $refs!: {
    form: HTMLFormElement;
  };
  get resumeBus() {
    if (this.details == null || !this.details.bus.actif) return "";
    return (
      `Aller : ${this.details.bus.aller.rendez_vous} (${this.details.bus.aller.prix} €) ; ` +
      `Retour : ${this.details.bus.retour.rendez_vous} (${this.details.bus.retour.prix} €)`
    );
  }

  isNonEmpty = (value: number) => !!value || "Requis !";

  async created() {
    const r = await C.getDetails("details");
    if (r != undefined) {
      this.details = r.details;
      C.notifications.success = "Données chargées";
    }
  }

  async saveDetails() {
    if (!this.$refs.form.validate()) {
      return;
    }
    if (this.details == null) return;
    const r = await C.updateDetails("details", this.details);
    if (r != undefined) {
      this.details = r.details;
      C.notifications.success = "Détails du camp bien modifiés.";
    }
  }
}
</script>

<style scoped></style>