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

<template>
  <b-modal
    :title="title"
    :visible="show"
    @change="v => $emit('change', v)"
    hide-footer
    size="lg"
  >
    <b-form
      novalidate
      v-if="show && innerAide !== null"
      :validated="validated"
      ref="form"
    >
      <b-form-row>
        <b-col>
          <b-form-group
            label="Participant concerné"
            invalid-feedback="Une aide doit être liée à un participant."
          >
            <b-select
              required
              :options="optionsParticipants"
              v-model="innerAide.id_participant_crypted"
            >
            </b-select>
          </b-form-group>
        </b-col>
      </b-form-row>
      <b-form-row>
        <b-col>
          <b-form-group
            label="Organisme"
            invalid-feedback="Merci de préciser l'origine de l'aide."
          >
            <b-select
              required
              :options="optionsStructures"
              v-model="innerAide.id_structure_crypted"
            >
            </b-select>
          </b-form-group>
        </b-col>
        <b-col>
          <b-form-group
            label="Montant"
            invalid-feedback="Merci de préciser la valeur de l'aide."
          >
            <b-form-input
              placeholder="€"
              type="number"
              min="0"
              step="0.01"
              v-model.number="innerAide.valeur"
            ></b-form-input>
          </b-form-group>
        </b-col>
      </b-form-row>
      <b-form-row class="form-row ml-3 mb-2">
        <b-col class="align-self-center">
          <b-form-checkbox v-model="innerAide.par_jour">
            Montant par jour
          </b-form-checkbox>
        </b-col>
        <b-col>
          <transition name="fade" mode="in-out">
            <b-form-group
              label="Limite sur le nombre de jours"
              v-if="innerAide.par_jour"
            >
              <b-form-input
                placeholder="jours"
                required
                type="number"
                min="1"
                v-model.number="innerAide.nb_jours_max"
              ></b-form-input>
            </b-form-group>
          </transition>
        </b-col>
      </b-form-row>
      <form-file
        v-if="mode == 'create'"
        title="Pièce justificative"
        invalidFeedback="Merci d'ajouter une pièce justificative."
        :showValidation="validated"
        hideBtnUpload
        ref="file"
      ></form-file>
      <btn
        block
        variant="success"
        class="mt-2"
        label="Valider"
        @click="valide"
      ></btn>
    </b-form>
  </b-modal>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import FormFile from "../../../../shared/FormFile.vue";
import Btn from "../../../../shared/Btn.vue";
import { C } from "../../logic/controller";
import {
  Aide,
  ChampsAideEditables,
  PublicDocument
} from "@/shared/logic/types";
import { Watch } from "vue-property-decorator";
import { ValidEvent, scrollToError } from "../../../../shared/utils";

export type ModeEdit = "create" | "edit";

const DetailsAideProps = Vue.extend({
  props: {
    mode: String as () => ModeEdit,
    show: Boolean,
    aide: Object as () => ChampsAideEditables | null
  },
  model: {
    prop: "show",
    event: "change"
  }
});

interface Option {
  text: string;
}

function sortByText(a: Option, b: Option) {
  return a.text < b.text ? -1 : 1;
}

@Component({
  components: { FormFile, Btn }
})
export default class DetailsAide extends DetailsAideProps {
  innerAide = this.duplique();

  validated = false;

  $refs!: {
    file: FormFile;
    form: HTMLFormElement;
  };

  private duplique(): ChampsAideEditables | null {
    return JSON.parse(JSON.stringify(this.aide));
  }

  @Watch("aide")
  onChange() {
    this.innerAide = this.duplique();
  }

  get title() {
    if (this.mode == "create") {
      return "Ajouter une aide extérieure";
    }
    return "Modifier l'aide";
  }

  get optionsParticipants() {
    return C.data.participants
      .map(part => {
        const personne = C.getPersonne(part);
        const camp = C.getCamp(part);
        return {
          value: part.id_crypted,
          text:
            (personne ? personne.nom_prenom : "") +
            " - " +
            (camp ? camp.label : "")
        };
      })
      .sort(sortByText);
  }

  get optionsStructures() {
    if (C.data.finances == null) return [];
    return Object.values(C.data.finances.structure_aides || {})
      .map(s => {
        return { text: s.nom, value: s.id_crypted };
      })
      .sort(sortByText);
  }

  valide(event: ValidEvent) {
    this.validated = true;
    Vue.nextTick(async () => {
      if (this.innerAide == null) return;
      const fieldsValides = scrollToError(this.$refs.form);
      if (this.mode == "edit" && fieldsValides) {
        event.spinning = true;
        await C.data.updateAide(this.innerAide);
        this.close(event);
      } else if (this.mode == "create") {
        const doc = this.$refs.file.file;
        const docValide = this.$refs.file.isFileInvalid == null;
        if (fieldsValides && docValide && doc != null) {
          event.spinning = true;
          await C.data.ajouteAide(this.innerAide, doc);
          this.close(event);
        }
      }
    });
  }

  private close(event: ValidEvent) {
    event.spinning = false;
    this.$emit("change", false); // ask to close the dialog
  }
}
</script>

<style scoped></style>