Merge pull request #8 from horanchikk/feature/ktc-50-vibor-roli-i-filiala

ktc-50: feature(markup): Добавлен выбор роли и филиала

components/Base/Select.vue

@@ -93,7 +93,7 @@ defineProps<{
   data: object[] | string[]
 }>()
 
-const selected = defineModel<string | object>('selected', { default: undefined })
+const selected = defineModel<string | object | number>('selected', { default: undefined })
 </script>
 
 <style scoped>

middleware/setupped-only.ts

@@ -0,0 +1,12 @@
+import { useUser } from '~/store/useUser'
+
+export default defineNuxtRouteMiddleware(() => {
+  if (import.meta.client) {
+    const { $pinia } = useNuxtApp()
+    const user = useUser($pinia)
+
+    if (!(Object.hasOwn(user.data, 'isStudent') && Object.hasOwn(user.data, 'branch'))) {
+      return navigateTo('/setup/branch')
+    }
+  }
+})

pages/auth.vue

@@ -154,8 +154,8 @@ async function auth() {
   await api
     .post('/user/login', authData)
     .then((res) => {
-      user.setUserData(res)
-      router.push('/profile')
+      user.setAuthData(res.access_token, res.user_id)
+      router.push('/setup/branch')
       emit('isClosed')
     })
     .catch((err) => {

pages/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div class="w-screen h-screen flex justify-center items-center">
-    <Icon
-      name="svg-spinners:ring-resize"
-      class="w-6 h-6 text-foreground opacity-75 group-hover:opacity-100"
-    />
+    <ILoader class="w-6 h-6 text-foreground opacity-75 group-hover:opacity-100" />
   </div>
 </template>
 

pages/setup/branch.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="w-full h-full flex flex-col items-center justify-between pt-8 text-foreground"
+    class="w-full h-full flex flex-col items-center justify-between pt-8 text-foreground animate__animated animate__fadeIn"
     @submit.prevent="nextPage"
   >
     <div class="flex flex-col justify-center items-center">
@@ -26,7 +26,7 @@
 
     <div
       v-if="branches"
-      class="mx-10"
+      class="mx-10 show"
     >
       <BaseSelect
         id="id"
@@ -35,9 +35,8 @@
         :data="branches"
       />
     </div>
-    <Icon
+    <ILoader
       v-else
-      name="svg-spinners:ring-resize"
       class="show w-20 h-20 text-foreground"
     />
 
@@ -80,6 +79,8 @@
 </template>
 
 <script setup lang="ts">
+import { useUser } from '~/store/useUser'
+
 definePageMeta({
   layout: 'none',
   middleware: ['user-only'],
@@ -88,18 +89,24 @@ definePageMeta({
 const selectedBranch = ref()
 const api = useApi()
 const router = useRouter()
-const branches = await api.get('/branches', {
-  squeeze: true,
-})
+const user = useUser()
+const branches = ref()
 
 function nextPage() {
   if (selectedBranch.value !== null) {
+    user.data.branch = selectedBranch.value
     router.push('/setup/role')
   }
   else {
     alert('Выберите филиал')
   }
 }
+
+onMounted(async () => {
+  branches.value = await api.get('/branches', {
+    squeeze: true,
+  })
+})
 </script>
 
 <style scoped>
@@ -114,5 +121,6 @@ function nextPage() {
 
 .show {
   animation: show ease-in-out 300ms;
+  animation-fill-mode: forwards;
 }
 </style>

pages/setup/role.vue

@@ -1,6 +1,6 @@
 <template>
   <form
-    class="w-full h-full flex flex-col items-center justify-between pt-8 text-foreground"
+    class="w-full h-full flex flex-col items-center justify-between pt-8 text-foreground animate__animated animate__fadeIn"
     @submit.prevent="nextPage"
   >
     <div class="flex flex-col justify-center items-center">
@@ -26,7 +26,7 @@
 
     <BaseSelect
       id="id"
-      v-model:selected="user.isStudent"
+      v-model:selected="isStudent"
       :data="userTypes"
       name="name"
     />
@@ -90,9 +90,11 @@ const userTypes = [
     name: 'Студент',
   },
 ]
+const isStudent = ref()
 
 function nextPage() {
-  if (user.isStudent !== null) {
+  if (isStudent.value !== null) {
+    user.data.isStudent = isStudent.value
     router.push('/timetable')
   }
   else {

pages/timetable.vue

@@ -3,8 +3,17 @@
 </template>
 
 <script setup lang="ts">
+import { useUser } from '~/store/useUser'
+
 definePageMeta({
   name: 'Расписание',
-  middleware: ['user-only'],
+  middleware: ['user-only', 'setupped-only'],
 })
+
+const user = useUser()
+const router = useRouter()
+
+if (!(Object.hasOwn(user.data, 'isStudent') && Object.hasOwn(user.data, 'branch'))) {
+  router.push('/setup/branch')
+}
 </script>

store/useUser.ts

@@ -1,23 +1,28 @@
 interface TUserData {
   user_id: number
   access_token: string
+  branch: number
+  isStudent: boolean
 }
 
 export const useUser = defineStore('useUser', () => {
   const log = useLogger('useUser')
-  const data = ref<TUserData>(JSON.parse(localStorage.getItem('ktc_auth')) || {})
-  const isStudent = ref(null)
+  const data = ref<TUserData>(JSON.parse(localStorage.getItem('ktc_data')) || {})
 
-  function setUserData(obj: TUserData) {
-    data.value = obj
-    localStorage.setItem('ktc_auth', JSON.stringify(obj))
-    log.success('Store was updated:', JSON.stringify(obj))
+  function setAuthData(access_token: string, user_id: number) {
+    data.value.access_token = access_token
+    data.value.user_id = user_id
   }
 
   function logout() {
-    localStorage.removeItem('ktc_auth')
+    localStorage.removeItem('ktc_data')
     return navigateTo('/auth', { external: true, replace: true })
   }
 
-  return { data, setUserData, isStudent, logout }
+  watch(data.value, (upd, prev) => {
+    localStorage.setItem('ktc_data', JSON.stringify(upd))
+    log.success('Store was updated:', JSON.stringify(upd), JSON.stringify(prev))
+  })
+
+  return { data, setAuthData, logout }
 })