Front end users refactoring

frontend/src/pages/RoleManagement.vue

@@ -14,7 +14,7 @@
             <q-item active v-if="allLoading"  active-class="menu-active">
               <q-item-section class="text-weight-bold"> 読み込み中... </q-item-section>
             </q-item>
-            <q-item v-else v-for="item in roles" :key="item.id" clickable v-ripple :active="selected.id === item.id" @click="roleClicked(item)" active-class="menu-active">
+            <q-item v-else v-for="item in roles" :key="item.id" clickable v-ripple :active="selected?.id === item.id" @click="roleClicked(item)" active-class="menu-active">
               <q-item-section class="text-weight-bold"> {{ item.label }} </q-item-section>
             </q-item>
           </q-list>
@@ -28,7 +28,7 @@
           :pagination="pagination" >
 
           <template v-slot:top>
-            <q-btn color="primary" :disable="loading" label="追加" @click="showAddRoleDialog" />
+            <q-btn color="primary" :disable="loading || selected?.id == -2" label="追加" @click="showAddRoleDialog" />
             <q-space />
             <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
               <template v-slot:append>
@@ -153,7 +153,12 @@ const roleClicked = async (role) => {
   selected.value = role;
 }
 
-const rows = computed(() => allRows.value.filter((item) => item.roles?.includes(selected.value.id) ));
+const rows = computed(() => allRows.value.filter((item) => {
+  if (selected.value.id == -2) {
+    return !item.roles || item.roles.length == 0;
+  }
+  return item.roles?.includes(selected.value.id);
+}));
 const rowIds = computed(() => new Set(rows.value?.map((item) => item.id)));
 
 const getUsers = async (filter = () => true) => {
@@ -170,7 +175,7 @@ const getRoles = async () => {
   const result = await api.get(`api/v1/roles`);
   roles.value = result.data.data.map((item) => {
     return { id: item.id, label: item.description }
-  })
+  }).concat({ id: -2, label: 'ロールなし' })
   selected.value = roles.value[0];
 }
 

frontend/src/pages/UserManagement.vue

@@ -35,9 +35,9 @@
       <template v-slot:body-cell-roles="props">
         <q-td :props="props">
           <div class="row">
-            <q-chip v-if="props.row.isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
+            <q-chip v-if="(props.row as IUserRolesDisplay).isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
               label="システム管理者" size="sm" />
-            <span v-else>{{ props.row.roles.map(r => r.description).join('、') }}</span>
+            <span v-else>{{ (props.row as IUserRolesDisplay).roles.map(r => r.name).join('、') }}</span>
           </div>
         </q-td>
       </template>
@@ -46,7 +46,7 @@
         <q-th :props="p">
           <div class="row items-center">
             <label class="q-mr-md">{{ p.col.label }}</label>
-            <q-select v-model="statusFilter" :options="options" @update:model-value="updateStatusFilter" borderless
+            <q-select v-model="statusFilter" :options="statusFilterOptions" borderless
               dense options-dense style="font-size: 12px; padding-top: 1px;" />
           </div>
         </q-th>
@@ -186,9 +186,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { api } from 'boot/axios';
 import TableActionMenu from 'components/TableActionMenu.vue';
+import { useUserStore } from 'stores/useUserStore';
+import { IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
+
+const userStore = useUserStore();
 
 const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
@@ -200,13 +204,21 @@ const columns = [
   { name: 'actions', label: '操作', field: 'actions' }
 ];
 
+const statusFilterOptions = [
+  { label: '全データ',          filter: () => true },
+  { label: 'システム管理者のみ', filter: (row: IUserRolesDisplay) => row.isSuperuser },
+  { label: '使用可能',          filter: (row: IUserRolesDisplay) => row.isActive },
+  { label: '使用不可',          filter: (row: IUserRolesDisplay) => !row.isActive },
+]
+
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
 
 const loading = ref(false);
 const addEditLoading = ref(false);
 const filter = ref('');
-const statusFilter = ref('全データ');
-const rows = ref([]);
+const statusFilter = ref(statusFilterOptions[0]);
+const rows = computed(() => userStore.users.filter(statusFilter.value.filter));
+
 const show = ref(false);
 const confirm = ref(false);
 const resetPsw = ref(false);
@@ -233,50 +245,16 @@ const actionList =  [
   { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
 ];
 
-const getUsers = async (filter = () => true) => {
+const getUsers = async () => {
   loading.value = true;
-  const result = await api.get(`api/v1/users`);
-  rows.value = result.data.data.map((item) => {
-    return { id: item.id, firstName: item.first_name, lastName: item.last_name, email: item.email, isSuperuser: item.is_superuser, isActive: item.is_active, roles: item.roles.sort((a, b) => a.id - b.id) }
-  }).filter(filter);
+  await userStore.loadUsers();
   loading.value = false;
 }
 
-// const getRoles = async () => {
-//   const result = await api.get(`api/v1/roles`);
-//   roleOptions.value.push(...result.data.data.map((item) => {
-//     return { value: item.id, label: item.description }
-//   }))
-// }
-
-const updateStatusFilter = (status) => {
-  switch (status) {
-    case 'システム管理者のみ':
-      getUsers((row) => row.isSuperuser)
-      break;
-    case '使用可能':
-      getUsers((row) => row.isActive)
-      break;
-    case '使用不可':
-      getUsers((row) => !row.isActive)
-      break;
-    default:
-      getUsers()
-      break;
-  }
-
-}
-
 onMounted(async () => {
-  // await Promise.all([
-  //   getRoles(),
-  //   getUsers()
-  // ]);
   await getUsers();
 })
 
-const options = ['全データ', 'システム管理者のみ', '使用可能', '使用不可']
-
 // emulate fetching data from server
 const addRow = () => {
   // editId.value
@@ -284,26 +262,24 @@ const addRow = () => {
   show.value = true;
 }
 
-function removeRow(row) {
+function removeRow(row: IUserDisplay) {
   confirm.value = true;
   editId.value = row.id;
 }
 
-const deleteUser = () => {
-  api.delete(`api/v1/users/${editId.value}`).then(() => {
-    getUsers();
-  })
+const deleteUser = async () => {
+  await userStore.deleteUser(editId.value);
+  getUsers();
   editId.value = 0;
 };
 
-function editRow(row) {
+function editRow(row: IUserDisplay) {
   isCreate.value = false
   editId.value = row.id;
 
   firstName.value = row.firstName;
   lastName.value = row.lastName;
   email.value = row.email;
-  pwd.value = row.password;
 
   isSuperuser.value = row.isSuperuser;
   // roles.value = row.roles.map(item => item.id);