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

     1  <template>
     2    <div class="overflow-auto" style="max-height: 74vh;" ref="list">
     3      <message-row
     4        v-for="(message, i) in messages"
     5        :key="i"
     6        :message="message"
     7        class="my-2"
     8        @edit="$emit('edit', $event)"
     9        @delete="$emit('delete', $event)"
    10        :ref="i == indexToScroll ? 'messageToScroll' : undefined"
    11      ></message-row>
    12    </div>
    13  </template>
    14  
    15  <script lang="ts">
    16  import Vue from "vue";
    17  import Component from "vue-class-component";
    18  import { PseudoMessage } from "@/shared/logic/types";
    19  import MessageRow from "./messages/MessageRow.vue";
    20  
    21  const FilProps = Vue.extend({
    22    props: {
    23      messages: Array as () => PseudoMessage[]
    24    }
    25  });
    26  
    27  @Component({
    28    components: { MessageRow }
    29  })
    30  export default class Fil extends FilProps {
    31    $refs!: {
    32      messageToScroll: MessageRow[];
    33      list: HTMLDivElement;
    34    };
    35  
    36    get indexToScroll() {
    37      // premier message non vu, ou premier message
    38      let index = 0;
    39      for (const i in this.messages) {
    40        const m = this.messages[i];
    41        if (!m.vu) {
    42          index = Number(i);
    43          break;
    44        }
    45      }
    46      return index;
    47    }
    48  
    49    private scroll() {
    50      this.$refs.list.focus();
    51      const cmp = this.$refs.messageToScroll;
    52      const el = cmp ? cmp[0].$el : null;
    53      if (el) {
    54        el.scrollIntoView();
    55      }
    56    }
    57  
    58    updated() {
    59      this.scroll();
    60    }
    61    activated() {
    62      this.scroll();
    63    }
    64  }
    65  </script>
    66  
    67  <style scoped></style>