Front end users refactoring

frontend/src/stores/useUserStore.ts

@@ -0,0 +1,112 @@
+import { defineStore } from 'pinia';
+import { api } from 'boot/axios';
+import { IRoles, IRolesDisplay, IUser, IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
+import { Notify } from 'quasar'
+import { IResponse } from 'src/types/BaseTypes';
+
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    users: [] as IUserRolesDisplay[],
+    userIds: new Set<number>(),
+    roles: [] as IRolesDisplay[],
+  }),
+  actions: {
+    async loadUsers() {
+      this.reset('users');
+      try {
+        const { data } = await api.get<IResponse<IUser[]>>('api/v1/users');
+        this.users = data.data.map((item) => {
+          this.userIds.add(item.id);
+          return userToUserRolesDisplay(item)
+        }).sort((a, b) => a.id - b.id); // set default order
+      } catch (error) {
+        Notify.create({
+          icon: 'error',
+          color: 'negative',
+          message: 'ユーザー一覧の読み込みに失敗しました'
+        })
+      }
+    },
+
+    async loadRoles() {
+      this.reset('roles');
+      try {
+        const { data } = await api.get<IResponse<IRoles[]>>('api/v1/roles');
+        this.roles = data.data.map((item) => {
+          return roleToRoleDisplay(item)
+        }).sort((a, b) => a.id - b.id); // set default order
+      } catch (error) {
+        Notify.create({
+          icon: 'error',
+          color: 'negative',
+          message: 'ロール一覧の読み込みに失敗しました'
+        })
+      }
+    },
+
+    getUserById(id: number) {
+      if (!this.userIds.has(id)) {
+        return null;
+      }
+      return this.users.find((item: IUserDisplay) => item.id === id);
+    },
+
+    async deleteUser(userId: number) {
+      try {
+        await api.delete(`api/v1/users/${userId}`)
+      } catch (error) {
+        console.error(error);
+        Notify.create({
+          icon: 'error',
+          color: 'negative',
+          message: 'ユーザーの削除に失敗しました'
+        });
+        return false;
+      }
+      return true;
+    },
+
+    reset(target?: 'users'|'roles') {
+      if (!target) {
+        this.reset('users');
+        this.reset('roles');
+        return;
+      }
+      if (target == 'roles') {
+        this.roles = [];
+      } else if (target == 'users') {
+        this.users = [];
+        this.userIds.clear();
+      }
+    },
+  },
+});
+
+export function userToUserDisplay(user: IUser): IUserDisplay {
+  return {
+    id: user.id,
+    firstName: user.first_name,
+    lastName: user.last_name,
+    fullNameSearch: (user.last_name + user.first_name).toLowerCase(),
+    fullName: user.last_name + ' ' + user.first_name,
+    email: user.email,
+    isActive: user.is_active,
+    isSuperuser: user.is_superuser,
+  };
+}
+
+export function userToUserRolesDisplay(user: IUser): IUserRolesDisplay {
+  const userRolesDisplay = userToUserDisplay(user) as IUserRolesDisplay;
+  userRolesDisplay.roles = user.roles.map((role) => roleToRoleDisplay(role)).sort((a, b) => a.level - b.level);
+  return userRolesDisplay;
+}
+
+export function roleToRoleDisplay(roles: IRoles): IRolesDisplay {
+  return {
+    id: roles.id,
+    name: roles.description,
+    key: roles.name,
+    level: roles.level
+  };
+}