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>(false);

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>{{ currentTitle }}</q-item-label>
          <!-- <q-item-label caption>
            <q-icon name="noise_control_off" color="positive" />
            ออนไลน์
          </q-item-label> -->
        </q-item-section>
        <q-space />

        <!-- <q-btn
          flat
          round
          dense
          icon="o_videocam"
          class="q-mr-xs"
          text-color="primary"
        /> -->
        <q-btn flat round dense icon="o_info" text-color="grey" />
      </q-toolbar>
    </div>
    <div class="i3 bg-white">
      <q-list class="text-primary">
        <div v-for="data in store.issue?.result">
          <q-item
            clickable
            v-ripple
            :active="currentIssue === data.id"
            @click="
              () => {
                store.currentIssue = data.id;
                store.currentTitle = data.title;
                store.fetchMessage(data.id);
              }
            "
            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-toggle v-model="readStatus" label="test" />
                <q-badge
                  v-if="readStatus"
                  class=""
                  rounded
                  color="red"
                  label="1"
                />
                <q-icon v-else size="18px" name="done_all" />
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator inset />
        </div>
      </q-list>
    </div>

    <div class="i4 bg-grey-3">
      <!-- <div class="i4 bg-grey-3 q-pa-sm"> -->
      <q-scroll-area ref="scrollContainerRef" style="height: 400px; width: 1fr">
        <message-chat class="q-pr-md" />
      </q-scroll-area>
    </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"
    "menu 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;
}
.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>