Apply per view layout

userfrosting · Jun 9, 2024 · dd6d220 · dd6d220
1 parent 0c1bea5
commit dd6d220
Show file tree

Hide file tree

Showing 14 changed files with 792 additions and 754 deletions.
diff --git a/app/assets/App.vue b/app/assets/App.vue
@@ -1,17 +1,3 @@
-<script setup>
-import NavBar from './components/NavBar.vue'
-</script>
-
 <template>
-    <NavBar />
-    <UFMainContent>
-        <RouterView />
-    </UFMainContent>
-    <UFFooterContent>
-        Copyright 2024 - <a href="https://www.userfrosting.com">Created by UserFrosting</a> | Built
-        with
-        <a href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip
-            ><span data-uk-icon="uikit"></span
-        ></a>
-    </UFFooterContent>
+    <RouterView />
 </template>
diff --git a/app/assets/components/FooterContent.vue b/app/assets/components/FooterContent.vue
@@ -0,0 +1,9 @@
+<template>
+    <UFFooterContent>
+        Copyright 2024 - <a href="https://www.userfrosting.com">Created by UserFrosting</a> | Built
+        with
+        <a href="http://getuikit.com" title="Visit UIkit 3 site" target="_blank" data-uk-tooltip
+            ><span data-uk-icon="uikit"></span
+        ></a>
+    </UFFooterContent>
+</template>
diff --git a/app/assets/components/NavBar.vue b/app/assets/components/NavBar.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { useAuthStore } from '../stores/auth'
 import { useLogoutApi } from '../composables/logoutApi'
+import { useAuthStore } from '../stores/auth'
 
+// Logout API variables
 const auth = useAuthStore()
 const { logout } = useLogoutApi(auth)
 </script>

diff --git a/app/assets/composables/authCheckApi.ts b/app/assets/composables/authCheckApi.ts
@@ -1,16 +1,14 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
-// import { useAuthStore } from '../stores/auth'
-// const authStore = useAuthStore()
+import { useAuthStore } from '../stores/auth'
+const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/check` api. Calling "check"
  * will fetch the user info from the server and set the frontend object.
  */
-// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
-// export function useCheckApi(auth: typeof authStore) {
-export function useCheckApi(auth: any) {
+export function useCheckApi(auth: typeof authStore) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 

diff --git a/app/assets/composables/loginApi.ts b/app/assets/composables/loginApi.ts
@@ -1,18 +1,16 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
-// import { useAuthStore } from '../stores/auth'
-// const authStore = useAuthStore()
+import { useAuthStore } from '../stores/auth'
+const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/login` api. Calling "login"
  * with the user login data will validate the data with the server. If login is
  * successful, the user will be set on the frontend object. Otherwise, an error
  * will be defined.
  */
-// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
-// export function useLoginApi(auth: typeof authStore) {
-export function useLoginApi(auth: any) {
+export function useLoginApi(auth: typeof authStore) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 

diff --git a/app/assets/composables/logoutApi.ts b/app/assets/composables/logoutApi.ts
@@ -1,17 +1,15 @@
 import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
-// import { useAuthStore } from '../stores/auth'
-// const authStore = useAuthStore()
+import { useAuthStore } from '../stores/auth'
+const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/logout` api. Calling "logout"
  * will send the request to logout the user server side and delete the frontend
  * user object.
  */
-// TODO : Fix error "getActivePinia()" was called but there was no active Pinia
-// export function useLogoutApi(auth: typeof authStore) {
-export function useLogoutApi(auth: any) {
+export function useLogoutApi(auth: typeof authStore) {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 

diff --git a/app/assets/layouts/LayoutDashboard.vue b/app/assets/layouts/LayoutDashboard.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import NavBar from '../components/NavBar.vue'
+import FooterContent from '../components/FooterContent.vue'
+</script>
+
+<template>
+    <NavBar />
+    <UFSideBar>
+        <UFSideBarLabel label="NAVIGATION" />
+
+    </UFSideBar>
+    <UFMainContent>
+        <slot></slot>
+    </UFMainContent>
+    <FooterContent />
+</template>
diff --git a/app/assets/layouts/LayoutPage.vue b/app/assets/layouts/LayoutPage.vue
@@ -0,0 +1,12 @@
+<script setup>
+import NavBar from '../components/NavBar.vue'
+import FooterContent from '../components/FooterContent.vue'
+</script>
+
+<template>
+    <NavBar />
+    <UFMainContent>
+        <slot></slot>
+    </UFMainContent>
+    <FooterContent />
+</template>
diff --git a/app/assets/router/index.js b/app/assets/router/index.js
@@ -1,20 +1,16 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
         {
             path: '/',
             name: 'home',
-            component: HomeView
+            component: () => import('../views/HomeView.vue')
         },
         {
             path: '/about',
             name: 'about',
-            // route level code-splitting
-            // this generates a separate chunk (About.[hash].js) for this route
-            // which is lazy-loaded when the route is visited.
             component: () => import('../views/AboutView.vue')
         },
         {

diff --git a/app/assets/views/AboutView.vue b/app/assets/views/AboutView.vue
@@ -1,17 +1,23 @@
+<script setup>
+import LayoutPage from '../layouts/LayoutPage.vue'
+</script>
+
 <template>
-    <h1>This is an about page</h1>
-    <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna. In hac habitasse
-        platea dictumst quisque sagittis purus. Ac felis donec et odio pellentesque diam volutpat
-        commodo sed. Rhoncus dolor purus non enim praesent. Aliquet bibendum enim facilisis gravida
-        neque convallis a cras. Sed vulputate odio ut enim blandit volutpat maecenas. A diam
-        sollicitudin tempor id eu nisl nunc mi. Sed nisi lacus sed viverra tellus in. Vestibulum
-        morbi blandit cursus risus at ultrices mi tempus. Suspendisse faucibus interdum posuere
-        lorem ipsum dolor sit amet. Nec feugiat nisl pretium fusce id velit ut tortor pretium.
-        Scelerisque varius morbi enim nunc. Sagittis vitae et leo duis ut diam quam nulla porttitor.
-        Amet risus nullam eget felis eget nunc lobortis mattis. Amet mattis vulputate enim nulla
-        aliquet porttitor lacus luctus. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.
-        Placerat orci nulla pellentesque dignissim enim.
-    </p>
+    <LayoutPage>
+        <h1>This is an about page</h1>
+        <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+            labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna. In hac habitasse
+            platea dictumst quisque sagittis purus. Ac felis donec et odio pellentesque diam volutpat
+            commodo sed. Rhoncus dolor purus non enim praesent. Aliquet bibendum enim facilisis gravida
+            neque convallis a cras. Sed vulputate odio ut enim blandit volutpat maecenas. A diam
+            sollicitudin tempor id eu nisl nunc mi. Sed nisi lacus sed viverra tellus in. Vestibulum
+            morbi blandit cursus risus at ultrices mi tempus. Suspendisse faucibus interdum posuere
+            lorem ipsum dolor sit amet. Nec feugiat nisl pretium fusce id velit ut tortor pretium.
+            Scelerisque varius morbi enim nunc. Sagittis vitae et leo duis ut diam quam nulla porttitor.
+            Amet risus nullam eget felis eget nunc lobortis mattis. Amet mattis vulputate enim nulla
+            aliquet porttitor lacus luctus. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque.
+            Placerat orci nulla pellentesque dignissim enim.
+        </p>
+    </LayoutPage>
 </template>
diff --git a/app/assets/views/ApiView.vue b/app/assets/views/ApiView.vue
@@ -1,8 +1,11 @@
 <script setup>
-import Resources from '../components/ResourcesList.vue'
+import LayoutPage from '../layouts/LayoutPage'
+import Resources from '../components/ResourcesList'
 </script>
 
 <template>
-    <h1 class="uk-heading-divider">Resources</h1>
-    <Resources />
+    <LayoutPage>
+        <h1 class="uk-heading-divider">Resources</h1>
+        <Resources />
+    </LayoutPage>
 </template>
diff --git a/app/assets/views/AuthView.vue b/app/assets/views/AuthView.vue
@@ -1,4 +1,5 @@
 <script setup>
+import LayoutPage from '../layouts/LayoutPage.vue'
 import AuthCheck from '../components/Auth/AuthCheck.vue'
 import Login from '../components/Auth/AuthLogin.vue'
 import Logout from '../components/Auth/AuthLogout.vue'
@@ -7,16 +8,18 @@ const auth = useAuthStore()
 </script>
 
 <template>
-    <h1 class="uk-heading-divider">Authentication Test</h1>
-    <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
-        <div v-if="auth.isAuth">
-            <Logout />
+    <LayoutPage>
+        <h1 class="uk-heading-divider">Authentication Test</h1>
+        <div class="uk-grid-divider uk-child-width-expand@s" uk-grid>
+            <div v-if="auth.isAuth">
+                <Logout />
+            </div>
+            <div v-else>
+                <Login />
+            </div>
+            <div>
+                <AuthCheck />
+            </div>
         </div>
-        <div v-else>
-            <Login />
-        </div>
-        <div>
-            <AuthCheck />
-        </div>
-    </div>
+    </LayoutPage>
 </template>