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

     1  <template>
     2    <b-row>
     3      <b-col sm="12" :md="repondreVisible ? 7 : 12">
     4        <b-card ref="card">
     5          <b-card-title>
     6            <b-row>
     7              <b-col>Suivi du dossier</b-col>
     8              <b-col class="text-right">
     9                <b-btn @click="toggleRepondre">
    10                  <b-icon-envelope></b-icon-envelope>
    11                  {{ labelBtn }}
    12                </b-btn>
    13              </b-col>
    14            </b-row>
    15          </b-card-title>
    16          <b-card-text class="px-2">
    17            <fil
    18              :messages="messages"
    19              @edit="editMessage($event)"
    20              @delete="confirmeDeleteMessage($event)"
    21            ></fil>
    22          </b-card-text>
    23        </b-card>
    24      </b-col>
    25      <transition name="fade" mode="out-in" duration="400">
    26        <b-col sm="12" md="5" v-show="repondreVisible">
    27          <repondre
    28            @cancel="toggleRepondre"
    29            :message="editedMessage"
    30            ref="repondre"
    31          ></repondre>
    32        </b-col>
    33      </transition>
    34    </b-row>
    35  </template>
    36  
    37  <script lang="ts">
    38  import Vue from "vue";
    39  import Component from "vue-class-component";
    40  
    41  import Fil from "../components/general/Fil.vue";
    42  import Repondre from "../components/general/Repondre.vue";
    43  
    44  import { C } from "../logic/controller";
    45  import {
    46    Responsable,
    47    MaterielSki,
    48    MaterielSkiCamp,
    49    EditMessage
    50  } from "@/shared/logic/types";
    51  import { BCard } from "bootstrap-vue";
    52  
    53  const GeneralProps = Vue.extend({
    54    props: {}
    55  });
    56  
    57  @Component({
    58    components: {
    59      Fil,
    60      Repondre
    61    }
    62  })
    63  export default class General extends GeneralProps {
    64    repondreVisible = false;
    65    editedMessage: EditMessage | null = null;
    66  
    67    $refs!: {
    68      repondre: Repondre;
    69      card: HTMLDivElement;
    70    };
    71  
    72    mounted() {
    73      // on enregistre le moment de visu
    74      C.data.markConnection();
    75    }
    76  
    77    activated() {
    78      this.$refs.card.scrollIntoView(false);
    79    }
    80  
    81    get responsable(): Responsable | null {
    82      return C.data.responsable;
    83    }
    84  
    85    get messages() {
    86      return C.data.messages;
    87    }
    88  
    89    get labelBtn() {
    90      return this.repondreVisible ? "Masquer" : "Nous écrire";
    91    }
    92  
    93    toggleRepondre() {
    94      this.$emit("toggleNavbar", this.repondreVisible);
    95      this.editedMessage = null;
    96      this.repondreVisible = !this.repondreVisible;
    97      if (this.repondreVisible) {
    98        // on active le focus après la transition
    99        setTimeout(() => {
   100          const textarea = this.$refs.repondre.$el.querySelector(
   101            "textarea"
   102          ) as HTMLTextAreaElement;
   103          if (textarea) {
   104            textarea.focus();
   105            textarea.select();
   106          }
   107        }, 200);
   108      }
   109    }
   110  
   111    editMessage(modif: EditMessage) {
   112      // on s'assure que le champ de réponse est visible
   113      if (!this.repondreVisible) {
   114        this.toggleRepondre();
   115      }
   116      this.editedMessage = modif;
   117    }
   118  
   119    async confirmeDeleteMessage(idMessage: number) {
   120      const confirme = await this.$bvModal.msgBoxConfirm(
   121        "Etes vous sur de vouloir supprimer ce message ?",
   122        {
   123          title: "Confimer",
   124          okVariant: "danger",
   125          okTitle: "Supprimer",
   126          cancelTitle: "Retour"
   127        }
   128      );
   129      if (confirme) {
   130        C.data.deleteMessage(idMessage);
   131      }
   132    }
   133  }
   134  </script>
   135  
   136  <style scoped></style>