add include Role

deploy.sh

@@ -21,7 +21,6 @@ git commit -m 'deploy'
 
 # if you are deploying to https://<USERNAME>.Github.io/<REPO>
 # git push -f https://github.com/<USERNAME>/<REPO>.git master:gh-pages
-git push origin master
 git push -f https://github.com/KarolChang/jm-expense-vue-ts.git master:gh-pages
 
 cd -

package-lock.json

@@ -661,6 +661,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2687,9 +2692,9 @@
       "dev": true
     },
     "sweetalert2": {
-      "version": "11.3.0",
+      "version": "11.4.8",
-      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.8.tgz",
-      "integrity": "sha512-C0TFp0VLxgx+PmhJ0mL8qzx+iYjnCLdDbvQHKY6KAGI+xwawMvLkStPgw2LmJl6itaDhR/qLQStPFIbr1VK9Ow=="
+      "integrity": "sha512-BDS/+E8RwaekGSxCPUbPnsRAyQ439gtXkTF/s98vY2l9DaVEOMjGj1FaQSorfGREKsbbxGSP7UXboibL5vgTMA=="
     },
     "table": {
       "version": "5.4.6",

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
     "@vueform/multiselect": "^2.3.1",
     "axios": "^0.24.0",
     "bootstrap": "^5.1.3",
@@ -21,7 +22,7 @@
     "firebase": "^9.6.3",
     "luxon": "^1.0.0",
     "pinia": "^2.0.6",
-    "sweetalert2": "^11.3.0",
+    "sweetalert2": "^11.4.8",
     "vue": "^3.2.29",
     "vue-class-component": "^8.0.0-0",
     "vue-router": "^4.0.0-0",

src/components/ModalButton/Category/CreateCategoryModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { CategoryInput } from '@/models'
 

src/components/ModalButton/Category/EditCategoryModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { Category, CategoryInput } from '@/models'
 

src/components/ModalButton/Expense/CreateExpenseModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed, Ref } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { ExpenseInput, Category } from '@/models'
 import { useStore } from '@/store/index'
@@ -75,9 +74,12 @@ const btnClick = async () => {
         if (!item || !amount || !date) {
           Swal.showValidationMessage('除了[備註]，所有資料都是必填！')
         }
+        console.log('store.currentUser', store.currentUser)
+        console.log('store.currentUser?.id', store.currentUser?.id)
+        if (store.currentUser) {
           return {
             input: {
-            UserId: store.currentUser?.id,
+              UserId: store.currentUser.id,
               CategoryId: Number(categoryId),
               item,
               amount,
@@ -85,9 +87,15 @@ const btnClick = async () => {
               date
             } as ExpenseInput
           }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
+        }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       createExpense(formValues)
     }
   } catch (error) {

src/components/ModalButton/Expense/EditExpenseModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, inject, Ref } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import expenseAPI from '@/apis/expense'
 import { Expense, ExpenseInput, Category } from '@/models'
 import { useStore } from '@/store/index'
@@ -88,9 +87,10 @@ const btnClick = async () => {
         if (!item || !amount || !date) {
           Swal.showValidationMessage('除了[備註]，所有資料都是必填！')
         }
+        if (store.currentUser) {
           return {
             input: {
-            UserId: store.currentUser?.id,
+              UserId: store.currentUser.id,
               CategoryId: Number(categoryId),
               item,
               amount,
@@ -98,9 +98,16 @@ const btnClick = async () => {
               date
             } as ExpenseInput
           }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
+        }
       }
     })
-    if (formValues) {
+    console.log('formValues', formValues)
+    if (formValues?.input) {
       editExpense(formValues)
     }
   } catch (error) {

src/components/ModalButton/Permission/CreatePermissionModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { PermissionInput, ActionTypePermission } from '@/models'
 const actions: ActionTypePermission[] = ['查看', '新增', '編輯', '刪除', '停用', '操作']

src/components/ModalButton/Permission/EditPermissionModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject, computed } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { Permission, PermissionInput, ActionTypePermission } from '@/models'
 const actions: ActionTypePermission[] = ['查看', '新增', '編輯', '刪除', '停用', '操作']

src/components/ModalButton/Record/CreateRecordModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import recordAPI from '@/apis/record'
 import { pushMsgToBoth } from '@/utils/lineBotMsg'
 import { RecordInput } from '@/models'
@@ -66,6 +65,7 @@ const btnClick = async () => {
         if (!item || !merchant || !amount || !date) {
           Swal.showValidationMessage('所有資料都是必填！若紀錄者為空，請登入~')
         }
+        if (store.currentUser) {
           return {
             input: {
               item,
@@ -75,9 +75,15 @@ const btnClick = async () => {
               UserId: store.currentUser?.id
             } as RecordInput
           }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
+        }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       createRecord(formValues)
     }
   } catch (error) {

src/components/ModalButton/Record/EditRecordModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import recordAPI from '@/apis/record'
 import { pushMsgToBoth } from '@/utils/lineBotMsg'
 import { Record, RecordInput } from '@/models'
@@ -65,6 +64,7 @@ const btnClick = async () => {
         if (!item || !merchant || !amount || !date) {
           Swal.showValidationMessage('所有資料都是必填！若編輯者為空，請登入~')
         }
+        if (store.currentUser) {
           return {
             id: record.id as number,
             input: {
@@ -72,12 +72,18 @@ const btnClick = async () => {
               merchant,
               amount,
               date,
-            UserId: store.currentUser?.id
+              UserId: store.currentUser.id
             } as RecordInput
           }
+        } else {
+          Toast.fire({
+            icon: 'error',
+            title: '無法取得使用者ID'
+          })
+        }
       }
     })
-    if (formValues) {
+    if (formValues?.input) {
       editRecord(formValues)
     }
   } catch (error) {

src/components/ModalButton/Role/CreateRoleModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { RoleInput } from '@/models'
 

src/components/ModalButton/Role/EditRoleModalButton.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue'
-import Swal from 'sweetalert2'
+import { Swal, Toast, ConfirmBox } from '@/utils/swal'
-import { Toast, ConfirmBox } from '@/utils/swal'
 import userAPI from '@/apis/user'
 import { Role, RoleInput } from '@/models'
 

src/components/Sidebar.vue

@@ -114,6 +114,7 @@ const openUserRP = () => {
         </ul>
       </div>
     </div>
+
     <!-- <transition name="slide-right">
       <UserRP v-show="userRPOpen" />
     </transition> -->

src/components/global.ts

@@ -1,6 +1,6 @@
 // import Vue from 'vue'
 import { createApp } from 'vue'
-import App from '@/App.vue'
+import App from '@/views/App.vue'
 
 function capitalizeFirstLetter(string: string) {
   return string.charAt(0).toUpperCase() + string.slice(1)

src/firebase/auth.ts

@@ -20,7 +20,7 @@ export const getFirebaseUser = () => {
       console.log(`[firebase] onAuthStateChanged`)
       if (user) {
         console.log('[auth] Get Firebase User', user)
-        store.login(user)
+        await store.login(user)
       } else {
         store.logout()
       }

src/firebase/config.ts

@@ -1,6 +1,6 @@
-import { initializeApp } from 'firebase/app'
+import { initializeApp, FirebaseOptions } from 'firebase/app'
 
-const firebaseConfig = {
+const firebaseConfig: FirebaseOptions = {
   apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
   authDomain: import.meta.env.VITE_FIREBASE_AUTO_DOMAIN,
   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
@@ -8,7 +8,7 @@ const firebaseConfig = {
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
   appId: import.meta.env.VITE_FIREBASE_APP_ID,
   measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID
-}
+} as FirebaseOptions
 
 export const initFirebase = () => {
   initializeApp(firebaseConfig)

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+import App from './views/App.vue'
 import router from './router'
 import { createPinia } from 'pinia'
 import { getFirebaseUser } from '@/firebase/auth'
@@ -8,6 +8,7 @@ import { initFirebase } from '@/firebase/config'
 import Datepicker from 'vue3-date-time-picker'
 import 'vue3-date-time-picker/dist/main.css'
 
+import '@popperjs/core'
 import 'bootstrap'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootswatch/dist/minty/bootstrap.min.css'

src/models/Category.ts

@@ -4,7 +4,7 @@ export class Category {
   id!: number
   name!: string
   icon!: string
-  // photoUrl?: string
+  photoUrl!: string | null
   type!: CategoryType
   deletedAt!: Date | null
   createdAt!: Date

src/router/index.ts

@@ -1,7 +1,7 @@
 import { Toast } from '@/utils/swal'
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import { useStore } from '../store/index'
-import Default from '@/views/Default.vue'
+import AppLayout from '@/views/App.vue'
 
 const root = '/jm-expense-vue-ts'
 
@@ -73,15 +73,15 @@ export const routes: RouteRecordRaw[] = [
       show: true
     }
   },
-  {
+  // {
-    path: `${root}/tools`,
+  //   path: `${root}/tools`,
-    name: 'Tools',
+  //   name: 'Tools',
-    component: () => import('../views/Tools.vue'),
+  //   component: () => import('../views/Tools.vue'),
-    meta: {
+  //   meta: {
-      pageTitle: '小工具',
+  //     pageTitle: '小工具',
-      show: true
+  //     show: true
-    }
+  //   }
-  },
+  // },
   {
     path: `${root}/game`,
     name: 'Game',
@@ -92,15 +92,15 @@ export const routes: RouteRecordRaw[] = [
       // auth: ['root', 'admin', 'member']
     }
   },
-  {
+  // {
-    path: `${root}/admin`,
+  //   path: `${root}/admin`,
-    name: 'Admin',
+  //   name: 'Admin',
-    redirect: { name: 'Admin-Role' },
+  //   redirect: { name: 'Admin-Role' },
-    component: Default,
+  //   component: AppLayout,
-    meta: {
+  //   meta: {
-      pageTitle: '管理面板',
+  //     pageTitle: '管理面板',
-      show: true
+  //     show: true
-    }
+  //   },
   //   children: [
   //     {
   //       path: 'role',
@@ -121,45 +121,34 @@ export const routes: RouteRecordRaw[] = [
   //       }
   //     }
   //   ]
-  },
+  // },
-  {
-    path: '/admin/role',
-    name: 'Admin-Role',
-    component: () => import('@/views/Role.vue'),
-    meta: {
-      pageTitle: '角色管理',
-      show: true
-    }
-    // children: [
   // {
-    //     path: ':id/access',
+  //   path: `${root}/admin/role`,
+  //   name: 'Admin-Role',
+  //   component: () => import('@/views/Role.vue'),
+  //   meta: {
+  //     pageTitle: '角色管理',
+  //     show: true
+  //   }
+  // },
+  // {
+  //   path: '/admin/role/:id/access',
   //   name: 'Admin-Role-Access',
   //   component: () => import('@/views/Access.vue'),
   //   meta: {
   //     pageTitle: '角色管理 / 設置權限[角色名稱]',
   //     show: false
   //   }
+  // },
+  // {
+  //   path: '/admin/permission',
+  //   name: 'Admin-Permission',
+  //   component: () => import('../views/Permission.vue'),
+  //   meta: {
+  //     pageTitle: '權限管理',
+  //     show: true
   //   }
-    // ]
+  // },
-  },
-  {
-    path: '/admin/role/:id/access',
-    name: 'Admin-Role-Access',
-    component: () => import('@/views/Access.vue'),
-    meta: {
-      pageTitle: '角色管理 / 設置權限[角色名稱]',
-      show: false
-    }
-  },
-  {
-    path: '/admin/permission',
-    name: 'Admin-Permission',
-    component: () => import('../views/Permission.vue'),
-    meta: {
-      pageTitle: '權限管理',
-      show: true
-    }
-  },
   {
     path: '/:pathMatch(.*)*',
     name: 'NotFound',

src/store/index.ts

@@ -43,9 +43,9 @@ export const useStore = defineStore('index', {
         console.error('error')
       }
     },
-    login(user: FirebaseUser) {
+    async login(user: FirebaseUser) {
       this.firebaseUser = user
-      this.getCurrentUser(user.email!)
+      await this.getCurrentUser(user.email!)
     },
     logout() {
       this.firebaseUser = null

src/utils/swal.ts

@@ -1,4 +1,5 @@
-import Swal from 'sweetalert2'
+import Swal from 'sweetalert2/dist/sweetalert2.js'
+import 'sweetalert2/dist/sweetalert2.css'
 
 export const Toast = Swal.mixin({
   toast: true,
@@ -11,3 +12,5 @@ export const ConfirmBox = Swal.mixin({
   showConfirmButton: true,
   showCancelButton: true
 })
+
+export { Swal }

src/views/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Navbar from '@/components/Navbar.vue'
-import { onLoad } from './cocos/config'
+import { onLoad } from '../cocos/config'
 import { useRoute } from 'vue-router'
 const route = useRoute()
 
@@ -11,7 +11,6 @@ if (import.meta.env.NODE_ENV === 'production') {
 </script>
 
 <template>
-  <!-- <div> -->
   <Navbar>
     <template #main>
       <router-view v-slot="{ Component }">
@@ -21,7 +20,6 @@ if (import.meta.env.NODE_ENV === 'production') {
       </router-view>
     </template>
   </Navbar>
-  <!-- </div> -->
 </template>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');

src/views/Expense.vue

@@ -127,7 +127,7 @@ provide('categoriesByType', categoriesByType)
     </div>
     <!-- filter -->
     <div class="d-flex mb-4" style="width: 100%">
-      <div class="mt-4" style="width: 50px">
+      <div class="mt-4" style="width: 100px">
         <label for="type" style="float: left; font-size: 0.7em">TYPE</label>
         <select class="form-select" id="type" aria-label="Default select example" v-model="selectedType">
           <option selected>ALL</option>

src/views/Role.vue

@@ -49,13 +49,13 @@ provide('refetchRoles', fetchRoles)
           <td>{{ role.name }}</td>
           <td>{{ role.name_en }}</td>
           <td>{{ role.deletedAt === null ? 'V' : 'X' }}</td>
-          <td>
+          <!-- <td>
             <router-link :to="{ name: 'Admin-Role-Access', params: { id: role.id } }">
               <i class="fa-solid fa-circle-question"></i
             ></router-link>
             <EditRoleModalButton :role="role" class="ms-2" />
             <DeleteRoleModalButton :role="role" class="ms-2" />
-          </td>
+          </td> -->
         </tr>
       </tbody>
     </table>

vite.config.js

@@ -11,5 +11,8 @@ export default defineConfig({
     alias: {
       '@': path.resolve(__dirname, './src')
     }
+  },
+  server: {
+    port: 8080
   }
 })