From 666fb8e4d9f9ce9969e2d8dce8136f2b6aba597b Mon Sep 17 00:00:00 2001
From: puri-ph4tt <puriphat001@gmail.com>
Date: Mon, 29 Jan 2024 18:08:27 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=20support=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/00_support/views/MainPage.vue | 176 +++++++++++++++++++++-
 1 file changed, 173 insertions(+), 3 deletions(-)

diff --git a/src/modules/00_support/views/MainPage.vue b/src/modules/00_support/views/MainPage.vue
index ad5a466..0d96ff8 100644
--- a/src/modules/00_support/views/MainPage.vue
+++ b/src/modules/00_support/views/MainPage.vue
@@ -1,7 +1,177 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const search = ref("");
+
+const items = ref<any>([
+  {
+    icon: "mdi-account-settings-outline",
+    title: "ข้อมูลหลัก",
+  },
+  {
+    icon: "mdi-account-group-outline",
+    title: "โครงสร้างอัตรากำลัง",
+  },
+  {
+    icon: "mdi-file-account-outline",
+    title: "ทะเบียนประวัติ",
+  },
+  {
+    icon: "mdi-magnify",
+    title: "สรรหา",
+  },
+  {
+    icon: "mdi-account-check",
+    title: "บรรจุแต่งตั้ง",
+  },
+]);
+</script>
 
 <template>
-  <div>support user</div>
+  <div class="col-12 row justify-center">
+    <div class="col-xs-12 col-sm-12 col-md-11">
+      <div class="toptitle text-white col-12 row items-center">ถาม - ตอบ</div>
+      <div class="col-12">
+        <q-card bordered>
+          <div class="row">
+            <!-- Left -->
+            <div class="col-3">
+              <div class="q-px-md q-py-md">
+                <q-input
+                  rounded
+                  outlined
+                  dense
+                  placeholder="ค้นหา"
+                  debounce="300"
+                  v-model="search"
+                  id="inputSearch"
+                >
+                  <template v-slot:prepend
+                    ><q-icon name="mdi-magnify" class="pointer" />
+                  </template>
+                </q-input>
+              </div>
+
+              <div v-for="(item, j) in items">
+                <div
+                  class="noactive row q-py-md justify-between items-center q-px-md"
+                >
+                  <div class="col-11 row items-center">
+                    <div class="noactive-avatar">
+                      <q-avatar color="grey-2" text-color="white" size="40px">
+                        <q-icon :name="item.icon" size="24px" color="teal" />
+                      </q-avatar>
+                    </div>
+
+                    <div class="col column q-ml-md">
+                      <span class="col text-weight-bold">
+                        {{ item.title }}
+                      </span>
+                      <!-- <span class="col">ขอสอบถาม</span> -->
+                    </div>
+                  </div>
+
+                  <div class="col-1">
+                    <q-icon name="mdi-send" size="xs" color="teal" />
+                  </div>
+                </div>
+                <q-separator v-if="j < items.length - 1" inset />
+              </div>
+            </div>
+
+            <q-separator vertical />
+
+            <!-- Right -->
+            <div class="col-grow">
+              <div class="row q-py-md q-px-lg justify-between items-center">
+                <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="items[0].icon" size="24px" color="teal" />
+                    </q-avatar>
+                  </div>
+                  <div class="col column q-ml-md">
+                    <span class="col text-weight-bold">
+                      {{ items[0].title }}
+                    </span>
+                    <span>
+                      <q-icon name="mdi-circle" size="10px" color="green" />
+                      ออนไลน์
+                    </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 />
+              <div class="row" style="background-color: #f5f4f4; height: 400px;">asas</div>
+              <q-separator />
+              <div class="row q-py-md q-px-lg justify-between items-center">
+                <div class="col-1 text-left">
+                  <q-btn flat>
+                    <q-icon
+                      name="mdi-paperclip"
+                      size="20px"
+                      style="transform: rotate(-125deg)"
+                      color="grey"
+                    />
+                  </q-btn>
+                </div>
+
+                <div class="col-grow">
+                  <q-input
+                    outlined
+                    dense
+                    placeholder="Aa"
+                    v-model="search"
+                    id="message"
+                  >
+                  </q-input>
+                </div>
+
+                <div class="col-2">
+                  <q-btn flat style="color: #009789" label="ส่งข้อความ" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
 </template>
 
-<style scoped></style>
+<style scoped lang="scss">
+.noactive {
+  transition: 0.1s ease;
+  opacity: 1;
+  cursor: pointer;
+
+  &:hover {
+    background: #ebf9f7;
+
+    .noactive-avatar {
+      border-radius: 50%;
+      border: 1px solid teal;
+    }
+  }
+}
+
+.noactive-avatar {
+  border-radius: 50%;
+  border: 1px solid #f5f4f4;
+}
+</style>