github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/retours/RowSondage.vue

<template>
  <b-card class="my-1">
    <b-card-sub-title class="mt-1 mb-3">
      <b-row>
        <b-col>{{ subtitle }}</b-col>
        <b-col cols="3" class="text-right">
          <b-icon-info
            v-b-tooltip.html
            title="de 1 étoile (Décevant) à 4 étoiles (Très satisfaisant) <br/> 0 indique une réponse ignorée"
          ></b-icon-info>
        </b-col>
      </b-row>
    </b-card-sub-title>
    <b-card-text>
      <b-form-row>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.infos_avant_sejour"
            label="Informations avant le séjour"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.infos_pendant_sejour"
            label="Informations pendant le séjour"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.hebergement"
            label="L'hébergement"
          >
          </field-satisfaction>
        </b-col>
      </b-form-row>
      <b-form-row>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.activites"
            label="Les activités"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.theme"
            label="Le thème"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.nourriture"
            label="La nourriture"
          >
          </field-satisfaction>
        </b-col>
      </b-form-row>
      <b-form-row>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.hygiene"
            label="L'hygiène corporelle et vestimentaire"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.ambiance"
            label="L'ambiance du groupe"
          >
          </field-satisfaction>
        </b-col>
        <b-col sm="6" md="4">
          <field-satisfaction
            v-model.number="innerSondage.ressenti"
            label="Le ressenti global de votre enfant"
          >
          </field-satisfaction>
        </b-col>
      </b-form-row>
      <b-form-group
        label="Message du participant"
        description="Si votre enfant souhaite donner son avis sur le séjour qu'il a vécu, la parole lui est donnée ci-dessus. Des regrets ? De bons souvenirs ? Des propositions d'amélioration ?"
      >
        <b-form-textarea
          v-model="innerSondage.message_enfant"
          rows="3"
          max-rows="10"
          placeholder="Exprimez-vous ici..."
        ></b-form-textarea>
      </b-form-group>
      <b-form-group
        label="Message du responsable"
        description="En tant que parents, vous avez une remarque, une suggestion, un ressenti à partager, avec plaisir ! N'hésitez pas à aborder tous les domaines : encadrement, activités, hébergement, repas, linge, etc. Nous prendrons soin à vous apporter une réponse en cas de besoin."
      >
        <b-form-textarea
          v-model="innerSondage.message_responsable"
          rows="3"
          max-rows="10"
          placeholder="Exprimez-vous ici..."
        ></b-form-textarea>
      </b-form-group>

      <b-row>
        <b-col class="text-right">
          <btn
            label="Enregistrer mon retour"
            variant="accent"
            @click="saveMessage"
          ></btn>
        </b-col>
      </b-row>
    </b-card-text>
  </b-card>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import {
  CampPlus,
  PublicSondage,
  ContenuSondage,
  SatisfactionLabels,
  RepSondage
} from "@/shared/logic/types";
import Btn from "@/shared/Btn.vue";
import { Watch } from "vue-property-decorator";
import { C } from "../../logic/controller";
import { ValidEvent } from "@/shared/utils";
import { enumToOptions, nullTimeString } from "@/shared/logic/utils";
import { nullRepSondage } from "../../logic/types";
import FieldSatisfaction from "@/shared/fields/FieldSatisfaction.vue";

const RowSondageProps = Vue.extend({
  props: {
    camp: Object as () => CampPlus,
    sondage: Object as () => PublicSondage | null
  }
});

@Component({
  components: { Btn, FieldSatisfaction }
})
export default class RowSondage extends RowSondageProps {
  innerSondage: RepSondage = this.duplique();

  satisfactions = enumToOptions(SatisfactionLabels);
  @Watch("sondage")
  s() {
    this.innerSondage = this.duplique();
  }

  private duplique() {
    return this.sondage !== null
      ? JSON.parse(JSON.stringify(this.sondage))
      : nullRepSondage();
  }

  get subtitle() {
    return "VOS IMPRESSIONS SUR LE SÉJOUR " + this.camp.label;
  }

  async saveMessage(event: ValidEvent) {
    event.spinning = true;
    const sondage = {
      id_crypted: this.sondage ? this.sondage.id_crypted : "",
      id_camp: this.camp.id,
      modified: nullTimeString,
      ...this.innerSondage
    };
    await C.data.saveSondage(sondage);
    event.spinning = false;
  }
}
</script>

<style scoped></style>