update หน้า support user (แยก component)

src/modules/00_support/components/FormChat.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useSupportStore } from "@/modules/00_support/store/Main";
+import ChatMessage from "@/modules/00_support/components/ChatMessage.vue";
+
+const store = useSupportStore();
+const content = ref<string>("");
+
+function getOnlineStatus(option: "icon" | "status") {
+  const isAdmin = store.userStatus.some((u) => u.role.includes("admin"));
+  if (option === "icon") return isAdmin ? "green" : "grey";
+  if (option === "status") return isAdmin ? "ออนไลน์" : "ออฟไลน์";
+}
+defineProps({
+  icon: String,
+});
+</script>
+
+<template>
+  <div
+    class="row q-py-md q-px-lg justify-between items-center"
+    v-if="store.currentTitle && store.currentTitle.length > 0"
+  >
+    <div class="col row">
+      <div style="border-radius: 50%; border: 1px solid teal">
+        <q-avatar color="teal-1" text-color="white" size="40px">
+          <q-icon :name="icon" size="24px" color="teal" />
+        </q-avatar>
+      </div>
+      <div class="col column q-ml-md">
+        <span class="col text-weight-bold">
+          {{ store.currentTitle }}
+        </span>
+        <span>
+          <q-icon
+            name="mdi-circle"
+            size="10px"
+            :color="getOnlineStatus('icon')"
+          />
+          {{ getOnlineStatus("status") }}
+        </span>
+      </div>
+    </div>
+
+    <div class="col-2 text-right q-gutter-x-md">
+      <q-icon class="col" name="mdi-video-outline" size="24px" color="teal" />
+      <q-icon
+        class="col"
+        name="mdi-information-outline"
+        size="24px"
+        color="grey"
+      />
+    </div>
+  </div>
+  <q-separator />
+
+  <q-scroll-area
+    style="background-color: #f5f4f4"
+    :style="{
+      height: $q.screen.gt.md ? '600px' : '450px',
+    }"
+  >
+    <div class="q-px-xl row col-12 justify-between">
+      <chat-message />
+    </div>
+  </q-scroll-area>
+
+  <q-separator />
+  <div class="row q-py-md q-px-lg justify-between items-center q-gutter-x-lg">
+    <div>
+      <q-btn flat class="col-1">
+        <q-icon
+          name="mdi-paperclip"
+          size="20px"
+          style="transform: rotate(-125deg)"
+          color="grey"
+        />
+      </q-btn>
+    </div>
+
+    <div class="col-grow">
+      <q-input
+        @keydown.enter.prevent="
+          () => {
+            if (store.currentIssue) {
+              store.sendMessage(content, store.currentIssue);
+              content = '';
+            }
+          }
+        "
+        outlined
+        dense
+        placeholder="Aa"
+        v-model="content"
+        id="message"
+      >
+      </q-input>
+    </div>
+
+    <div>
+      <q-btn
+        @click="
+          () => {
+            if (store.currentIssue) {
+              store.sendMessage(content, store.currentIssue);
+              content = '';
+            }
+          }
+        "
+        flat
+        class="col-2"
+        style="color: #009789"
+        label="ส่งข้อความ"
+      />
+    </div>
+  </div>
+</template>