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

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

const store = useSupportStore();
const currentIssue = ref<string>("");
const content = ref<string>("");

onMounted(async () => {
  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>สุวิมล คงสวัสดิ์</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="
              () => {
                currentIssue = data.id;
                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 caption>
                {{ data.lastMessage }}
              </q-item-label>
            </q-item-section>
          </q-item>
          <q-separator inset />
        </div>
      </q-list>
    </div>
    <div class="i4 bg-grey-3 q-pa-sm" style="overflow-y: auto">
      <!-- <div class="i4 bg-grey-3 q-pa-sm"> -->
      <message-chat v-if="currentIssue" />
    </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"
        />
      </div>

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

<style scoped>
.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>