From 749c79dfd41f5dc8c46498f8a8f06b6ac6a2b94f Mon Sep 17 00:00:00 2001
From: kanyarat2001 <kanyarat@frappect.com>
Date: Thu, 14 Dec 2023 16:46:24 +0700
Subject: [PATCH] edit ui

---
 src/modules/00_contact/views/Main.vue  | 28 ++++++++
 src/modules/01_metadata/views/Main.vue |  3 +-
 src/router/index.ts                    | 13 +++-
 src/views/MainLayout.vue               | 88 ++++++++++++++++----------
 4 files changed, 96 insertions(+), 36 deletions(-)
 create mode 100644 src/modules/00_contact/views/Main.vue

diff --git a/src/modules/00_contact/views/Main.vue b/src/modules/00_contact/views/Main.vue
new file mode 100644
index 0000000..83bbee4
--- /dev/null
+++ b/src/modules/00_contact/views/Main.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+</script>
+<template>
+    <div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
+        ติดต่อเรา
+    </div>
+
+
+    
+
+    
+</template>
+
+<style>
+.card1{
+    margin-top:15px;
+    background-color:#F8F8F8;
+    border-color: #EDEDED !important;
+}
+
+.iconQA {
+    color: #016987; 
+    font-size: 20px;
+    margin-right: 1%;
+}
+
+</style>
+
diff --git a/src/modules/01_metadata/views/Main.vue b/src/modules/01_metadata/views/Main.vue
index 0f00865..4d4a95c 100644
--- a/src/modules/01_metadata/views/Main.vue
+++ b/src/modules/01_metadata/views/Main.vue
@@ -135,9 +135,9 @@
 
             </q-card>
         </div>
-
     </div>
 
+
     
 </template>
 
@@ -153,6 +153,5 @@
     font-size: 20px;
     margin-right: 1%;
 }
-
 </style>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 68cc6c7..c27e807 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -4,6 +4,9 @@ const MainLayout = () => import("@/views/MainLayout.vue");
 const Metadata = () => import("@/modules/01_metadata/views/Main.vue");
 const Organizational = () => import("@/modules/02_organizational/views/Main.vue");
 
+
+const Contact = () => import("@/modules/00_contact/views/Main.vue");
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -20,8 +23,14 @@ const router = createRouter({
         {
           path: "/organizational",
           name: "organizational",
-          component: Organizational
-        }
+          component: Organizational,
+        },
+
+        {
+          path: "/contact",
+          name: "contact",
+          component: Contact,
+        },
       ]
     },
   ]
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 8f30348..97861cb 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -7,7 +7,9 @@ const router = useRouter();
 
 const $q = useQuasar();
 
-const currentRouteName = ref('home');
+const tab = ref('')
+
+const currentRouteName = ref('');
 const text = ref('');
 const menuList = [
 	{text:'ข้อมูลหลัก',path: 'metadata'},
@@ -32,12 +34,19 @@ const mainmenu = [
 const clickMain = (val: string) => {
 	router.push(val)
 	currentRouteName.value = val
+	tab.value=val
 };
 
 const goHome = () => {
 	router.push('/')
-	currentRouteName.value = 'home'
+	currentRouteName.value = ''
 };
+
+const click = () => {
+	router.push('/contact')
+	currentRouteName.value = 'contact'
+};
+
 </script>
 <!-- โครงเว็บ -->
 <template>
@@ -45,23 +54,34 @@ const goHome = () => {
 		<!-- header -->
 		<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
 			<q-toolbar class="q-my-xs items-center" :style="$q.screen.gt.xs ? 'padding: 1% 2%;': 'padding: 1% 4%;'">
-				<div class="row items-center no-wrap" v-if="$q.screen.gt.xs">
-					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px" class=" cursor-pointer" @click="goHome" />
+				<div class="row items-center no-wrap cursor-pointer" @click="goHome" v-if="$q.screen.gt.xs">
+					<q-img src="@/assets/logo.png" spinner-color="white" style="height: 35px; max-width: 35px"/>
 					<q-separator vertical inset class="q-ml-md" />
 					<div class="row q-ml-md items-center q-pt-xs">
-						<div
+						<div 
 							style="color: #ffffff; letter-spacing: 1px; line-height:10px;"
 							class="text-body2 text-weight-bolder col-12"
+							
 						>
 							ระบบ<span class="text-primary">ทรัพยากรบุคคล</span>
 						</div>
+
 						<div class="text-caption text-white">SUPPORT</div>
+
 					</div>
+					
 				</div>
+				
 				<div v-else class="row items-center">
 					<img src="@/assets/logo.png" style="height: 35px; max-width: 35px" />
 				</div>
+				<q-space></q-space>
+				<div>
+					<q-btn flat color="primary" label="หน้าแรก" @click="goHome"/>
+					<q-btn color="white" text-color="black" label="ติดต่อเรา" @click="click()"/>
+				</div>
 				
+
 			</q-toolbar>
 		</q-header>
 
@@ -79,45 +99,43 @@ const goHome = () => {
 							</template>
 						</q-input>
 					</div>
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == 'home'">
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == ''">
 						<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
 						<div class="col-12"><q-separator color="grey-4" /></div>
-						<div class="col-12 row q-col-gutter-lg">
+						<div class="col-12">
+							<div class="col-12 row q-col-gutter-lg">
+
 							<div class="col-xs-12 col-sm-4" 
 								v-for="(menu , index) in mainmenu"
 								:key="index"
 							>
-								<q-card class="q-pa-md row col-12 items-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<q-icon size="20px" :name="`${menu.icon}`" />
-									<div class="q-pl-md">{{ menu.text }}</div>
+								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
+									<q-icon class="col-12 items-center" size="20px" :name="`${menu.icon}`"/>
+									<div class="q-pt-md">{{ menu.text }} </div>
 								</q-card>
+							</div>	
 							</div>
 						</div>
 					</div>
-					<div class="col-11 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
-						<div class="col-3 row">
-							<q-card class="q-px-sm col-12">
-								<q-list dense bordered padding class="rounded-borders text-grey-8">
-									<q-item 
-										v-for="(menuItem, index) in menuList" :key="index" 
-										class="rounded-borders text-weight-light" 
-										clickable 
-										v-ripple 
-										:to="{ name: `${menuItem.path}`}" 
-										active-class="text-blue-7 text-weight-medium bg-blue-1"
-										>
-										<q-item-section class="q-py-sm">
-											{{ menuItem.text }}
-										</q-item-section>
-									</q-item>
-								</q-list>
-							</q-card>
-						</div>
-						<div class="col-9 row ">
-							<q-card class="col-12 content-heigt">
+					
+					<div class="col-9 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
+						<div class="col-12 content-heigt">
+
+						
+						<div class="col-12 row ">
+							<q-card class="col-12">
 								<router-view :key="$route.fullPath" />
 							</q-card>
 						</div>
+
+						<div class="col-12 row " v-if="currentRouteName != 'contact'">
+							<q-tabs no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
+							<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
+							<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
+							<q-tab name="articles" label="Articles" />
+							</q-tabs>
+						</div>
+					</div>
 					</div>
 				</div>
 			</q-page>
@@ -184,8 +202,14 @@ const goHome = () => {
    box-shadow: 3px 3px 10px 1px rgba(95, 95, 95, 0.15) !important;
 }
 
+.cardmenu{
+	padding: 35px; /* ปรับขนาด padding ตามที่คุณต้องการ */
+
+}
+
 .content-heigt{
-	height: 57vh !important;
+	height: 55vh !important;
 	overflow-y:auto;
 }
+
 </style>