github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/components/general/Repondre.vue (about)

     1  <template>
     2    <b-card class="px-3 py-3" no-body>
     3      <b-card-title>Nous écrire :</b-card-title>
     4      <b-card-text>
     5        <b-textarea
     6          v-model="reponse"
     7          rows="5"
     8          max-rows="15"
     9          placeholder="Veuillez entrer votre message"
    10        >
    11        </b-textarea>
    12        <b-row class="mt-2">
    13          <b-col>
    14            <b-btn @click="$emit('cancel')">Retour</b-btn>
    15          </b-col>
    16          <b-col class="text-right">
    17            <btn
    18              label="Envoyer"
    19              variant="accent"
    20              :disabled="!isValid"
    21              @click="save"
    22            >
    23              <b-icon-envelope></b-icon-envelope>
    24            </btn>
    25          </b-col>
    26        </b-row>
    27      </b-card-text>
    28    </b-card>
    29  </template>
    30  
    31  <script lang="ts">
    32  import Vue from "vue";
    33  import Component from "vue-class-component";
    34  import Btn from "@/shared/Btn.vue";
    35  import { EditMessage } from "@/shared/logic/types";
    36  import { Watch } from "vue-property-decorator";
    37  import { C } from "../../logic/controller";
    38  import { ValidEvent } from "@/shared/utils";
    39  
    40  const RepondreProps = Vue.extend({
    41    props: {
    42      message: Object as () => EditMessage | null
    43    }
    44  });
    45  
    46  @Component({
    47    components: { Btn }
    48  })
    49  export default class Repondre extends RepondreProps {
    50    reponse = "";
    51  
    52    @Watch("message")
    53    m() {
    54      if (this.message !== null) {
    55        this.reponse = this.message.contenu;
    56      }
    57    }
    58  
    59    get isValid() {
    60      return this.reponse.trim() != "";
    61    }
    62  
    63    async save(event: ValidEvent) {
    64      event.spinning = true;
    65      if (this.message == null) {
    66        await C.data.createMessage(this.reponse.trim());
    67      } else {
    68        await C.data.editMessage({ id: this.message.id, contenu: this.reponse });
    69      }
    70      event.spinning = false;
    71      // le message est envoyé, on peut nettoyer la copie locale
    72      this.reponse = "";
    73      this.$emit("cancel");
    74    }
    75  }
    76  </script>
    77  
    78  <style scoped></style>