hrms-mgt/src/modules/00_support/components/FormChat.vue

<script setup lang="ts">
import { ref, watch, onUpdated, onMounted, nextTick } from "vue";
import { useSupportStore } from "@/modules/00_support/store/Main.ts";
import MessageChat from "@/modules/00_support/components/MessageChat.vue";

const store = useSupportStore();
const content = ref<string>("");
const scrollContainerRef = ref();
const readStatus = ref<boolean>(true);

onUpdated(() => {
  nextTick(() => {
    store.scrollToEnd();
  });
});

onMounted(async () => {
  store.scrollContainer = scrollContainerRef.value;
  store.fetchIssue();
});
</script>

<template>
  <p class="text-h6 text-weight-medium">ถาม - ตอบ</p>

  <div class="container">
    <div class="i1 bg-white align-center">
      <q-toolbar>
        <q-item-section>
          <q-input dense rounded outlined label="ค้นหาข้อความ...">
            <template v-slot:prepend>
              <q-icon name="search" />
            </template>
          </q-input>
        </q-item-section>
      </q-toolbar>
    </div>
    <div class="i2 bg-white align-center">
      <q-toolbar>
        <q-avatar>
          <img src="https://cdn.quasar.dev/img/avatar3.jpg" />
        </q-avatar>

        <q-item-section class="q-pl-sm">
          <q-item-label>{{ store.currentTitle }}</q-item-label>
        </q-item-section>
        <q-space />
        <q-btn flat round dense icon="o_info" text-color="grey" />
      </q-toolbar>
    </div>
    <div class="i3 bg-white">
      <q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
        <q-list class="text-primary">
          <div v-for="data in store.issue?.result">
            <q-item
              clickable
              v-ripple
              :active="store.currentIssue === data.id"
              @click="
                store.currentIssue = data.id;
                store.currentTitle = data.title;
                store.fetchMessage(data.id);
                store.fetchMessageStatus(data.id);
                store.issue.result = store.issue.result.map((v) => {
                  if (v.id === data.id) {
                    v.unreadCount = 0;
                  }
                  return v;
                });
              "
              active-class="my-menu-link"
            >
              <q-avatar>
                <img src="https://cdn.quasar.dev/img/avatar1.jpg" />
              </q-avatar>

              <q-item-section class="q-pl-sm">
                <q-item-label>{{ data.title }}</q-item-label>

                <q-item-label class="flex" caption>
                  {{ data.lastMessage }}
                  <q-space />
                  <q-icon
                    v-if="data.lastMessage?.length === 0"
                    color="green"
                    size="18px"
                    name="mdi-send"
                  />
                  <div v-else>
                    <q-badge
                      v-if="data.unreadCount > 0"
                      class=""
                      rounded
                      color="red"
                      :label="data.unreadCount"
                    />
                    <q-icon v-else size="18px" name="done_all" />
                  </div>
                </q-item-label>
              </q-item-section>
            </q-item>
            <q-separator inset />
          </div>
        </q-list>
      </q-scroll-area>
    </div>

    <div class="i4 bg-grey-3">
      <q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
        <message-chat v-if="store.currentIssue" class="q-pr-md" />
      </q-scroll-area>
    </div>

    <div class="grid-manage bg-white"></div>

    <div class="i5 bg-white container-input align-center">
      <div class="input-file">
        <q-btn flat>
          <q-icon name="attach_file" style="transform: rotate(-125deg)" />
        </q-btn>
      </div>

      <div class="input-chat">
        <q-input
          dense
          class="q-pa-xs"
          standout="bg-teal text-white"
          label="Aa"
          v-model="content"
          @keydown.enter.prevent="
            () => {
              store.sendMessage(content, store.currentIssue);
              content = '';
            }
          "
        />
      </div>

      <div class="btn-chat">
        <q-btn
          @click="
            () => {
              store.sendMessage(content, store.currentIssue);
              content = '';
            }
          "
          flat
          color="primary"
          label="ส่งข้อความ"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.scroll {
  overflow-y: auto;
}
.align-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container {
  display: grid;
  grid-template-areas:
    "search toolbar"
    "menu chat"
    "manage input";
  grid-template-rows: 60px 400px 60px;
  grid-template-columns: 400px 1fr;
}

.container-input {
  display: grid;
  grid-template-areas: "file input-chat btn";
  grid-template-rows: 1fr;
  grid-template-columns: 60px 1fr 100px;
}

.input-file {
  grid-area: file;
}

.input-chat {
  grid-area: input-chat;
}

.btn-chat {
  grid-area: btn;
}

.i1 {
  grid-area: search;
}

.i2 {
  grid-area: toolbar;
}
.i3 {
  grid-area: menu;
}
.i4 {
  grid-area: chat;
}
.i5 {
  grid-area: input;
}

.grid-manage {
  grid-area: manage;
}
.container-1 {
  display: grid;
  /* grid-template-columns: 1fr 2fr; */
  grid: 50px 450px / 1fr 2fr;
}

.container-2 {
  display: grid;
  /* grid-template-columns: 1fr 2fr; */
  grid: 50px 450px / 1fr 2fr;
}
</style>