From 6009cba016cd197d38bae8072c19ec701a173c8a Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Thu, 14 Dec 2023 17:46:50 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20currentR?=
 =?UTF-8?q?outeName?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/MainLayout.vue | 67 ++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 97861cb..261cf7d 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -9,12 +9,12 @@ const $q = useQuasar();
 
 const tab = ref('')
 
-const currentRouteName = ref('');
+const currentRouteName = router.currentRoute.value.name;
+const currentRoute = ref(currentRouteName);
 const text = ref('');
 const menuList = [
 	{text:'ข้อมูลหลัก',path: 'metadata'},
 	{text:'โครงสร้างอัตรากำลัง',path: 'organizational'},
-
 ];
 
 const mainmenu = [
@@ -33,26 +33,29 @@ const mainmenu = [
 
 const clickMain = (val: string) => {
 	router.push(val)
-	currentRouteName.value = val
+	currentRoute.value = val
 	tab.value=val
 };
 
 const goHome = () => {
 	router.push('/')
-	currentRouteName.value = ''
+	currentRoute.value = 'home'
 };
 
 const click = () => {
 	router.push('/contact')
-	currentRouteName.value = 'contact'
+	currentRoute.value = 'contact'
 };
+const scrollInfo = ref({})
+const onScroll = (info: any) => { scrollInfo.value = info}
 
 </script>
 <!-- โครงเว็บ -->
 <template>
 	<q-layout view="hHh LpR fFr">
+    	<q-scroll-observer @scroll="onScroll" />
 		<!-- header -->
-		<q-header flat class="text-dark col-12 bg-header bg-transparent" height-hint="7">
+		<q-header flat class="text-dark col-12 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 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"/>
@@ -76,12 +79,10 @@ const click = () => {
 					<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 class="row q-col-gutter-x-sm">
+					<div><q-btn flat color="white" label="หน้าแรก" @click="goHome"/></div>
+					<div><q-btn color="primary" label="ติดต่อเรา" @click="click()"/></div>
 				</div>
-				
-
 			</q-toolbar>
 		</q-header>
 
@@ -99,7 +100,7 @@ const click = () => {
 							</template>
 						</q-input>
 					</div>
-					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRouteName == ''">
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
 						<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">
@@ -118,27 +119,33 @@ const click = () => {
 						</div>
 					</div>
 					
-					<div class="col-9 row q-col-gutter-md" style=" margin-top: 80px;" v-else>
-						<div class="col-12 content-heigt">
+					<div class="col-9 row" style=" margin-top: 80px;" v-else>
+						<q-layout>
+							<q-page-container class="col-12">
+								<q-page>
+									<div class="col-12 row ">
+										<q-card class="col-12">
+											<router-view :key="$route.fullPath" />
+										</q-card>
+									</div>
 
-						
-						<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 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>
+								</q-page>
+							</q-page-container>
+						</q-layout>
 					</div>
 				</div>
 			</q-page>
+			<!-- place QPageScroller at end of page -->
+			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
+				<q-btn fab icon="keyboard_arrow_up" color="blue" />
+			</q-page-scroller>
 		</q-page-container>
 	</q-layout>
 </template>
@@ -208,7 +215,7 @@ const click = () => {
 }
 
 .content-heigt{
-	height: 55vh !important;
+	height: 60vh !important;
 	overflow-y:auto;
 }