chat_ui/mixins/virtialListMixin.js

import chatApi from "~/apis/chatApi";
import repoApi from "~/apis/repoApi";

export default {
  methods: {
    tofirstItem() {
      this.pagination.pageBottom = 1;
      this.pagination.pageTop = 0;
      this.pagination.page = 1;
      this.pagination.seen_date = 0;
      this.getMessages().then((response) => {
        if (!response.data.length) {
          return;
        }

        this.localComments = response.data;
        this.finished_top = false;
        this.finished_bottom = false;

        // const mids = this.getMids(response.data)
        this.$nextTick(() => {
          const vsl = this.$refs.vsl;
          this.offset = 0;
          this.setVirtualListToOffset(this.offset);
          this.fetchingData = false;
        });
      });
    },
    toLastItem() {
      this.pagination.pageBottom = 0;
      this.pagination.pageTop = -1;
      this.pagination.page = -1;
      this.pagination.seen_date = -1;

      this.getMessages().then((response) => {
        if (!response.data.length) {
          return;
        }

        this.localComments = response.data;

        this.finished_top = false;
        this.finished_bottom = true;

        // const mids = this.getMids(response.data)
        this.$nextTick(() => {
          try {
            const vsl = this.$refs.vsl;
            this.offset = vsl?.getScrollSize();
            this.setVirtualListToOffset(this.offset);
            this.fetchingData = false;
          } catch (err) {
            setTimeout(() => {
              const vsl = this.$refs.vsl;
              this.offset = vsl?.getScrollSize();
              this.setVirtualListToOffset(this.offset);
              this.fetchingData = false;
            }, 500);
          }
        });
      });
    },
    toTop() {
      if (this.finished_top) return;

      // if (this.fetchingData) return;
      //   this.fetchingData = true;

      // if (this.pagination.current_row >= this.pagination.total) {
      //   return;
      // }

      --this.pagination.pageTop;
      this.pagination.page = this.pagination.pageTop;
      const vm = this;
      this.getMessages().then((response) => {
        if (!response.data.length) {
          vm.finished_top = true;
          vm.pagination.pageTop++;
          vm.pagination.page = vm.pagination.pageTop;
          return;
        }

        const vsl = vm.$refs.vsl;
        let prev_size = vsl.getScrollSize();
        vm.localComments = response.data.concat(vm.localComments);

        // const mids = vm.getMids(response.data)
        vm.$nextTick(() => {
          //   // this.offset = vsl.getOffset();
          //     const offset = mids.reduce((previousValue, currentSid) => {
          //     const previousSize =  typeof previousValue === 'string' &&  previousValue !== 0 ? vsl.getSize(previousValue) : previousValue
          //     return previousSize + vsl.getSize(currentSid)
          //   }, 0)

          const offset = vsl.getScrollSize() - prev_size;
          vm.setVirtualListToOffset(offset);

          // this.pagination.current_row = response.pagination.current_row;

          // vm.fetchingData = false;
        });
      });
    },
    toBottom() {
      if (this.finished_bottom) return;

      ++this.pagination.pageBottom;
      this.pagination.page = this.pagination.pageBottom;

      this.getMessages().then((response) => {
        if (!response.data.length) {
          this.finished_bottom = true;
          this.finished_top = false;

          this.pagination.pageBottom--;
          this.pagination.page = this.pagination.pageBottom;
          return;
        }

        this.localComments = [...this.localComments, ...response.data];
        const vsl = this.$refs.vsl;
        this.offset = vsl.getScrollSize();

        this.$nextTick(() => {
          this.setVirtualListToOffset(this.offset);
          this.fetchingData = false;
        });
      });
    },
    checkOverFlow() {
      const vsl = this.$refs.vsl;
      if (vsl) {
        this.overflow = vsl.getScrollSize() > vsl.getClientSize();
      }
    },
    setVirtualListToIndex(index) {
      if (this.$refs.vsl) {
        this.$refs.vsl.scrollToIndex(index);
      }
    },

    setVirtualListToOffset(offset) {
      if (this.$refs.vsl) {
        this.$refs.vsl.scrollToOffset(offset);
        // this.$refs.vsl.scrollToIndex(offset);
      }
    },
    replaySetVirtualListToOffset(offset) {
      if (this.$refs.replayVsl) {
        this.$refs.replayVsl.scrollToOffset(offset);
      }
    },

    setVirtualListToBottom() {
      if (this.$refs.vsl) {
        this.$refs.vsl.scrollToBottom();
      }
    },
    handleDrop(data, event) {
      event.preventDefault();

      this.files = Array.from(event.dataTransfer.files);

      this.dragStarted = false;
      this.showDroppedList = true;
      this.uploadDescription = null;
    },
    handleDragEnter(event, dropContainer) {
      this.dragStarted = true;
      this.dropBoxClass = dropContainer;
    },
    handleDragLeave(event) {
      this.dragStarted = false;
    },
    //  // $event, 'replayTextRef', 'replays'
    //  resizeIt(ev, textAreaName, container) {
    //   return;
    //   // do nothing.

    //   ev.target.style.height = "auto";
    //   var newHeight = ev.target.scrollHeight > 37 ? ev.target.scrollHeight : 37;

    //   if (ev.which == 13) {
    //     return;
    //   } else {
    //     // escape key pressed
    //     if (ev.which == 27) {
    //       newHeight = 37;
    //     }
    //     // const fz= parseFloat(getComputedStyle(ev.target).getPropertyValue("font-size"));
    //     // increase/decrease height of the form(textarea), if textarea height changed(2 < lines < 5).
    //     ev.target.style.height = newHeight.toString() + "px";

    //     if (newHeight < 115) {
    //       this.$refs[container].style.height = `calc(100vh - ${
    //         newHeight + "px"
    //       } - 6em)`;

    //       let replyCommentBoxHeight = "0px";
    //       if (this.isReplayEditMode || this.isMainEditMode) {
    //         replyCommentBoxHeight = "4em";
    //       }

    //       // just for the left sidebar(replays) form
    //       if (textAreaName == "replayTextRef") {
    //         // decrease height of the comment list, if textarea height changed.
    //         this.$refs[container].style.height = `calc(100vh - ${
    //           newHeight + "px"
    //         } - 10.7em - ${replyCommentBoxHeight} )`;
    //       } else if (textAreaName == "mainTextAreaInput") {
    //         this.$refs[container].style.height = `calc(100vh - ${
    //           newHeight + "px"
    //         } - 6.2em - ${replyCommentBoxHeight})`;
    //       }
    //     }
    //   }
    // },
  },
};