From 972bbf9013ebd1ae3954a0d240d680761642b48b Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 23 Dec 2024 23:08:55 +0800
Subject: [PATCH 1/3] fix UI & add unchanged

---
 .../src/components/dialog/VersionInput.vue    | 20 ++++++++++++-
 frontend/src/pages/AppManagement.vue          |  8 ++---
 frontend/src/pages/AppVersionManagement.vue   | 29 ++++---------------
 frontend/src/pages/FlowChart.vue              | 17 ++++++++---
 frontend/src/stores/useAppStore.ts            |  3 +-
 frontend/src/types/AppTypes.ts                |  2 ++
 6 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/dialog/VersionInput.vue b/frontend/src/components/dialog/VersionInput.vue
index b739d14..6eac6f3 100644
--- a/frontend/src/components/dialog/VersionInput.vue
+++ b/frontend/src/components/dialog/VersionInput.vue
@@ -1,12 +1,17 @@
 <template>
   <q-input
+    ref="nameRef"
     v-model="versionInfo.name"
     filled
     autofocus
     label="バージョン名"
-    :rules="[(val) => !val || val.length <= 80 || '80字以内で入力ください']"
+    :rules="[
+      val => !!val || 'バージョン名を入力してください。',
+      (val) => !val || val.length <= 80 || '80字以内で入力ください'
+    ]"
   />
   <q-input
+    ref="commentRef"
     v-model="versionInfo.comment"
     filled
     type="textarea"
@@ -19,6 +24,15 @@ import { ref, watch, defineProps, defineEmits } from 'vue';
 import { QInput } from 'quasar';
 import { IVersionSubmit } from 'src/types/AppTypes';
 
+const nameRef = ref();
+const commentRef = ref();
+
+const isValid = () => {
+  const nameHasError = nameRef.value?.hasError ?? false;
+  const commentHasError = commentRef.value?.hasError ?? false;
+  return !nameHasError && !commentHasError;
+};
+
 const props = defineProps<{
   modelValue: IVersionSubmit;
 }>();
@@ -33,6 +47,10 @@ const versionInfo = ref({
 
 const emit = defineEmits(['update:modelValue']);
 
+defineExpose({
+  isValid
+})
+
 watch(
   versionInfo,
   () => {
diff --git a/frontend/src/pages/AppManagement.vue b/frontend/src/pages/AppManagement.vue
index 8f2e60f..eb87963 100644
--- a/frontend/src/pages/AppManagement.vue
+++ b/frontend/src/pages/AppManagement.vue
@@ -31,7 +31,8 @@
       <template v-slot:body-cell-version="p">
         <q-td :props="p">
           <div class="flex justify-between full-width" >
-            <span class="ellipsis" :title="p.row.versionName">{{ p.row.versionName || '未命名' }}</span>
+            <span v-if="p.row.version == 0"></span>
+            <span v-else class="ellipsis" :title="p.row.versionName">{{ p.row.versionName }}</span>
             <q-badge v-if="isVersionEditing(p.row)" color="orange-7">変更あり</q-badge>
           </div>
         </q-td>
@@ -128,9 +129,8 @@ const getApps = async () => {
   loading.value = false;
 }
 
-function isVersionEditing(app:IAppDisplay) {
-  // TODO
-  return false;
+function isVersionEditing(app: IAppDisplay) {
+  return !!app.versionChanged;
 };
 
 onMounted(async () => {
diff --git a/frontend/src/pages/AppVersionManagement.vue b/frontend/src/pages/AppVersionManagement.vue
index e5b695f..cc0680d 100644
--- a/frontend/src/pages/AppVersionManagement.vue
+++ b/frontend/src/pages/AppVersionManagement.vue
@@ -32,7 +32,7 @@
           <div class="">
             <span>{{ p.row.id }}</span>
             <span class="q-ml-md" v-if="p.row.id === app.version">
-              <q-badge  color="primary">適用中</q-badge>
+              <q-badge color="primary">適用中</q-badge>
               <q-badge class="q-ml-xs" v-if="isVersionEditing()" color="orange-7">変更あり</q-badge>
             </span>
           </div>
@@ -58,19 +58,17 @@
       </template>
     </q-table>
 
-
-
     <q-dialog v-model="confirmDialog" persistent>
       <q-card>
         <q-card-section class="q-pb-none">
           <q-list>
-            <q-item>
-              <q-item-section avatar>
+            <q-item class="q-px-none">
+              <q-item-section avatar class="items-center">
                 <q-icon name="warning" color="warning" size="2em" />
               </q-item-section>
               <q-item-section>
-                <div >現在のバージョンは未保存です。</div>
-                <div >プルすると、上書されますので、よろしいでしょうか？</div>
+                <div>現在のバージョンは未保存です。</div>
+                <div>プルすると、上書されますので、よろしいでしょうか？</div>
               </q-item-section>
             </q-item>
           </q-list>
@@ -90,7 +88,6 @@ import { useQuasar } from 'quasar';
 import { ref, onMounted } from 'vue';
 import { useAppStore } from 'stores/useAppStore';
 import { useAuthStore } from 'stores/useAuthStore';
-import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { useRoute } from 'vue-router';
 import { IAppDisplay, IAppVersionDisplay } from 'src/types/AppTypes';
@@ -121,7 +118,6 @@ const filter = ref('');
 const versionLoading = ref(false);
 
 const target = ref<IAppVersionDisplay>();
-const store = useFlowEditorStore();
 const confirmDialog = ref(false);
 const deleteUserLoading = ref(false);
 
@@ -152,8 +148,7 @@ const getVersions = async () => {
 }
 
 function isVersionEditing() {
-  // TODO
-  return false;
+  return !!app.value.versionChanged;
 };
 
 onMounted(async () => {
@@ -195,18 +190,6 @@ async function doChangeVersion(version?: IAppVersionDisplay) {
   versionLoading.value = false;
 }
 
-async function toEditFlowPage() {
-  store.setApp({
-    appId: app.value.id,
-    name: app.value.name
-  });
-  store.selectFlow(undefined);
-  try {
-    await router.push('/FlowChart/' + app.value.id);
-  } catch (e) {
-    console.log(e);
-  }
-};
 </script>
 
 <style lang="scss">
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index ee6e2d6..1e3cdb2 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -85,8 +85,8 @@
       <action-select ref="appDg" name="model" :filter="filter"  type="single" @clearFilter="onClearFilter" ></action-select>
     </ShowDialog>
     <!-- save version dialog -->
-    <ShowDialog v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" min-width="500px">
-      <version-input v-model="versionSubmit" />
+    <ShowDialog v-model:visible="saveVersionAction" name="保存して新バージョン" @close="closeSaveVersionDg" :ok-btn-auto-close="false" min-width="500px">
+      <version-input ref="versionInputRef" v-model="versionSubmit" />
     </ShowDialog>
     <q-inner-loading
       :showing="initLoading"
@@ -135,6 +135,7 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const saveVersionAction = ref(false);
+const versionInputRef = ref();
 const drawerRight = ref(false);
 const filter=ref("");
 const model = ref("");
@@ -270,9 +271,17 @@ const onSaveVersion = async () => {
 }
 
 const closeSaveVersionDg = async (val: 'OK'|'CANCEL') => {
+  saveVersionAction.value = true;
   if (val == 'OK') {
-    await onSaveAllFlow();
-    await appStore.createVersion(versionSubmit.value);
+    if (versionInputRef?.value?.isValid()) {
+      saveVersionAction.value = false;
+      await onSaveAllFlow();
+      await appStore.createVersion(versionSubmit.value);
+    } else {
+      saveVersionAction.value = true;
+    }
+  } else {
+    saveVersionAction.value = false;
   }
 }
 
diff --git a/frontend/src/stores/useAppStore.ts b/frontend/src/stores/useAppStore.ts
index 3cd6abe..78dc137 100644
--- a/frontend/src/stores/useAppStore.ts
+++ b/frontend/src/stores/useAppStore.ts
@@ -97,7 +97,8 @@ function appToAppDisplay(app: IManagedApp) {
     version: app.version,
     versionName: app.versionname,
     updateTime: formatDate(app.update_time),
-    updateUser: userToUserDisplay(app.updateuser)
+    updateUser: userToUserDisplay(app.updateuser),
+    versionChanged: app.is_saved
   } as IAppDisplay
 }
 
diff --git a/frontend/src/types/AppTypes.ts b/frontend/src/types/AppTypes.ts
index 8ce728b..042b21d 100644
--- a/frontend/src/types/AppTypes.ts
+++ b/frontend/src/types/AppTypes.ts
@@ -10,6 +10,7 @@ export interface IManagedApp {
   updateuser: IUser;
   create_time: string;
   update_time: string;
+  is_saved: boolean;
 }
 
 export interface IAppDisplay{
@@ -21,6 +22,7 @@ export interface IAppDisplay{
   updateTime:string;
   version:number;
   versionName?: string;
+  versionChanged: boolean;
 }
 
 export interface IVersionSubmit {

From 5d7ffa0138aabdf1412dbfdcd39a506578ce4bb1 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 24 Dec 2024 08:57:50 +0800
Subject: [PATCH 2/3] remove roles in app manageement

---
 frontend/src/pages/UserManagement.vue | 38 ---------------------------
 1 file changed, 38 deletions(-)

diff --git a/frontend/src/pages/UserManagement.vue b/frontend/src/pages/UserManagement.vue
index da9ff83..524241a 100644
--- a/frontend/src/pages/UserManagement.vue
+++ b/frontend/src/pages/UserManagement.vue
@@ -95,35 +95,6 @@
                   <q-toggle v-model="isSuperuser" />
                 </q-item-section>
               </q-item>
-<!--               
-              <q-select
-                class="q-mt-xs"
-                filled
-                v-model="roles"
-                multiple
-                :options="roleOptions"
-                label="ロール" emit-value
-                map-options
-                :option-disable="opt => opt.value == -1 ? false : isSuperuser"
-                @add="(opt) => { if (opt.value.value == -1) { } }"
-                hint="各役割には固有の権限があります。">
-                <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
-                  <q-item v-bind="itemProps" v-if="opt.value == -1" >
-                    <q-item-section>
-                      <q-item-label>{{opt.label}}</q-item-label>
-                    </q-item-section>
-                    <q-item-section side>
-                      <q-toggle :model-value="selected" @update:model-value="() => { toggleOption(opt); }" />
-                    </q-item-section>
-                  </q-item>
-                  <q-separator v-if="opt.value == -1"/>
-                  <q-item v-else v-bind="itemProps">
-                    <q-item-section>
-                      <q-item-label>{{opt.label}}</q-item-label>
-                    </q-item-section>
-                  </q-item>
-                </template>
-              </q-select> -->
 
               <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
                 <q-item-section>
@@ -231,14 +202,9 @@ const isActive = ref(true);
 
 const isPwd = ref(true);
 const pwd = ref('');
-// const roles = ref([]);
 const isCreate = ref(true);
 let editId = ref(0);
 
-// const roleOptions = ref([
-//   {'value': -1, 'label': 'システム管理者'}
-// ]);
-
 const actionList =  [
   { label: '編集', icon: 'edit_note', action: editRow },
   { separator: true },
@@ -282,7 +248,6 @@ function editRow(row: IUserDisplay) {
   email.value = row.email;
 
   isSuperuser.value = row.isSuperuser;
-  // roles.value = row.roles.map(item => item.id);
   isActive.value = row.isActive;
 
   isPwd.value = true;
@@ -303,7 +268,6 @@ const onSubmit = () => {
       'is_superuser': isSuperuser.value,
       'is_active': isActive.value,
       'email': email.value,
-      // "roles": roles.value,
       ...(isCreate.value || resetPsw.value ? { password: pwd.value } : {})
     }).then(() => {
       getUsers();
@@ -319,7 +283,6 @@ const onSubmit = () => {
       'is_superuser': isSuperuser.value,
       'is_active': isActive.value,
       'email': email.value,
-      // "roles": roles.value,
       'password': pwd.value
     }).then(() => {
       getUsers();
@@ -340,7 +303,6 @@ const onReset = () => {
   isPwd.value = true;
   editId.value = 0;
   isCreate.value = true;
-  // roles.value = [];
   resetPsw.value = false;
   addEditLoading.value = false;
 }

From 84ba118bb1921145a486399c32776a6426dbdba0 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Tue, 24 Dec 2024 11:35:14 +0800
Subject: [PATCH 3/3] fix ts

---
 frontend/src/pages/RoleManagement.vue | 134 ++++++++++++--------------
 frontend/src/pages/UserManagement.vue |  64 +++++-------
 frontend/src/stores/useUserStore.ts   |  74 ++++++++++----
 frontend/src/types/UserTypes.ts       |   6 ++
 4 files changed, 144 insertions(+), 134 deletions(-)

diff --git a/frontend/src/pages/RoleManagement.vue b/frontend/src/pages/RoleManagement.vue
index ab5352c..d5e5cb8 100644
--- a/frontend/src/pages/RoleManagement.vue
+++ b/frontend/src/pages/RoleManagement.vue
@@ -7,7 +7,7 @@
     </div>
 
     <div class="row" style="min-height: 80vh;">
-      
+      <!-- left role panel -->
       <div class="col-auto">
         <div class="q-pa-md" style="width: 250px">
           <q-list bordered separator class="rounded-borders">
@@ -15,20 +15,19 @@
               <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-section class="text-weight-bold"> {{ item.label }} </q-item-section>
+              <q-item-section class="text-weight-bold"> {{ item.name }} </q-item-section>
             </q-item>
           </q-list>
         </div>
       </div>
-
-
+      <!-- right table panel -->
       <div class="col">
 
-        <q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading"
+        <q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="allLoading || loading"
           :pagination="pagination" >
 
           <template v-slot:top>
-            <q-btn color="primary" :disable="loading || selected?.id == -2" label="追加" @click="showAddRoleDialog" />
+            <q-btn color="primary" :disable="allLoading || loading || selected?.id == -2" label="追加" @click="showAddRoleDialog" />
             <q-space />
             <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
               <template v-slot:append>
@@ -57,7 +56,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>
@@ -92,7 +91,7 @@
         </q-card-section>
         <q-card-section class="q-py-none">
           <!-- <span class="q-ml-sm">この役割を与えられたユーザーは、メンバー役に再配置されます。</span> -->
-          <div class="q-mx-sm">ユーザー「{{targetRow.email}}」を「{{selected.label}}」の役割から</div>
+          <div class="q-mx-sm">ユーザー「{{targetRow?.email}}」を「{{selected?.name}}」の役割から</div>
           <div class="q-mx-sm">本当に外しますか？</div>
         </q-card-section>
 
@@ -106,12 +105,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
-import { IUser } from 'src/types/UserTypes';
+import { ref, onMounted, computed, watch } from 'vue';
+import { IRolesDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
+import { useUserStore } from 'stores/useUserStore';
 import ShowDialog from 'src/components/ShowDialog.vue';
 import UserSelectBox from 'src/components/dialog/UserSelectBox.vue';
 import TableActionMenu from 'components/TableActionMenu.vue';
-import { api } from 'boot/axios';
+
+const userStore = useUserStore();
 
 const columns = [
   { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
@@ -119,21 +120,30 @@ const columns = [
   { name: 'firstName', label: '苗字', field: 'firstName', align: 'left', sortable: true },
   { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
   { name: 'status', label: '状況', field: 'status', align: 'left' },
-  { name: 'actions', label: '操作', field: 'actions' }
+  { name: 'actions', label: '操作', field: 'actions', align: 'right' }
 ];
 
-const roles = ref([])
-const selected = ref();
+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 roles = computed(() => userStore.roles.concat(EMPTY_ROLE));
+
+const selected = ref<IRolesDisplay>();
+
 const allLoading = ref(true);
 const loading = ref(false);
 const filter = ref('');
-const statusFilter = ref('全データ');
+const statusFilter = ref(statusFilterOptions[0]);
 const dgFilter = ref('');
-const allRows = ref([]);
-const targetRow = ref<IUser>();
+
+const allUsers = computed(() => userStore.users.filter(statusFilter.value.filter));
+const targetRow = ref<IUserRolesDisplay>();
 
 const userDialog = ref();
 const showSelectUser=ref(false);
@@ -141,73 +151,57 @@ const isAdding = ref(false);
 const deleteDialog = ref(false);
 const deleteUserRoleLoading = ref(false);
 
+const EMPTY_ROLE: IRolesDisplay = {
+  id: -2,
+  name: 'ロールなし',
+  key: 'dummy',
+  level: -1
+}
+
 const actionList =  [
   // { label: '移動', icon: 'account_tree', action: toEditFlowPage },
-  { separator: true },
+  // { separator: true },
   { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
 ];
 
-const options = ['全データ', 'システム管理者のみ', '使用可能', '使用不可']
-
-const roleClicked = async (role) => {
-  selected.value = role;
-}
-
-const rows = computed(() => allRows.value.filter((item) => {
+const rows = computed(() => allUsers.value.filter((item) => {
+  if (!selected.value) {
+    return false;
+  }
   if (selected.value.id == -2) {
     return !item.roles || item.roles.length == 0;
   }
-  return item.roles?.includes(selected.value.id);
+  return item.roleIds?.includes(selected.value.id);
 }));
 const rowIds = computed(() => new Set(rows.value?.map((item) => item.id)));
 
-const getUsers = async (filter = () => true) => {
+const getUsers = async () => {
   loading.value = true;
-  allRows.value = []
-  const result = await api.get(`api/v1/users`);
-  allRows.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.map(role => role.id) }
-  }).filter(filter);
+  await userStore.loadUsers();
   loading.value = false;
 }
 
-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];
-}
-
-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 () => {
   allLoading.value = true;
   await Promise.all([
-    getRoles(),
+    userStore.loadRoles(),
     getUsers()
   ]);
   allLoading.value = false;
 });
 
-const filterInitRows = (row: {id: string}) => {
-  return !rowIds.value.has(row.id);
+watch(roles, (newRoles) => {
+  if (newRoles.length > 0) {
+    selected.value = newRoles[0];
+  }
+});
+
+const roleClicked = async (role: IRolesDisplay) => {
+  selected.value = role;
+}
+
+const filterInitRows = (user: IUserRolesDisplay) => {
+  return !rowIds.value.has(user.id);
 }
 
 const showAddRoleDialog = () => {
@@ -218,32 +212,24 @@ const showAddRoleDialog = () => {
 
 const closeSelectUserDialog = async (val: 'OK'|'Cancel') => {
   showSelectUser.value = true;
-  if (val == 'OK' && userDialog.value.selected[0]) {
+  if (val == 'OK' && userDialog.value.selected[0] && selected.value && selected.value.id >= 0) {
       isAdding.value = true;
-      const user = userDialog.value.selected[0];
-      const result = await api.post(`api/v1/userrole`, {
-        'userid': user.id,
-        'roleids': user.roles.concat(selected.value.id)
-      });
+      await userStore.addRole(userDialog.value.selected[0], selected.value);
       await getUsers();
   }
   showSelectUser.value = false;
   isAdding.value = false;
 }
 
-function removeRow(user:IUser) {
+function removeRow(user: IUserRolesDisplay) {
   targetRow.value = user;
   deleteDialog.value = true;
 }
 
 const deleteUserRole = async () => {
-  if (targetRow.value?.id) {
+  if (targetRow.value?.id && selected.value && selected.value.id >= 0) {
     deleteUserRoleLoading.value = true;
-    // TODO 返回不需要重新读
-    const result = await api.post(`api/v1/userrole`, {
-        'userid': targetRow.value.id,
-        'roleids': targetRow.value.roles.filter(e => e !== selected.value.id)
-      });
+    await userStore.removeRole(targetRow.value, selected.value);
     await getUsers();
     deleteUserRoleLoading.value = false;
     deleteDialog.value = false;
diff --git a/frontend/src/pages/UserManagement.vue b/frontend/src/pages/UserManagement.vue
index 524241a..73a7597 100644
--- a/frontend/src/pages/UserManagement.vue
+++ b/frontend/src/pages/UserManagement.vue
@@ -37,7 +37,9 @@
           <div class="row">
             <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 as IUserRolesDisplay).roles.map(r => r.name).join('、') }}</span>
+              <template v-else>
+                <q-chip v-for="(item) in (props.row as IUserRolesDisplay).roles" square color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
+              </template>
           </div>
         </q-td>
       </template>
@@ -158,7 +160,6 @@
 
 <script setup lang="ts">
 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';
@@ -202,13 +203,13 @@ const isActive = ref(true);
 
 const isPwd = ref(true);
 const pwd = ref('');
-const isCreate = ref(true);
-let editId = ref(0);
+const editId = ref(0);
+const isCreate = computed(() => editId.value <= 0);
 
 const actionList =  [
   { label: '編集', icon: 'edit_note', action: editRow },
   { separator: true },
-  { label: '削除', icon: 'delete_outline', class: 'text-red', action: removeRow },
+  { label: '削除', icon: 'delete_outline', class: 'text-red', action: showDeleteUserConfirm },
 ];
 
 const getUsers = async () => {
@@ -221,14 +222,12 @@ onMounted(async () => {
   await getUsers();
 })
 
-// emulate fetching data from server
 const addRow = () => {
-  // editId.value
   onReset();
   show.value = true;
 }
 
-function removeRow(row: IUserDisplay) {
+function showDeleteUserConfirm(row: IUserDisplay) {
   confirm.value = true;
   editId.value = row.id;
 }
@@ -236,11 +235,10 @@ function removeRow(row: IUserDisplay) {
 const deleteUser = async () => {
   await userStore.deleteUser(editId.value);
   getUsers();
-  editId.value = 0;
+  onReset();
 };
 
 function editRow(row: IUserDisplay) {
-  isCreate.value = false
   editId.value = row.id;
 
   firstName.value = row.firstName;
@@ -259,38 +257,25 @@ const closeDg = () => {
   onReset();
 }
 
-const onSubmit = () => {
+const onSubmit = async () => {
   addEditLoading.value = true;
-  if (editId.value !== 0) {
-    api.put(`api/v1/users/${editId.value}`, {
-      'first_name': firstName.value,
-      'last_name': lastName.value,
-      'is_superuser': isSuperuser.value,
-      'is_active': isActive.value,
-      'email': email.value,
-      ...(isCreate.value || resetPsw.value ? { password: pwd.value } : {})
-    }).then(() => {
-      getUsers();
-      closeDg();
-      onReset();
-    })
+  const param = {
+    id:           editId.value,
+    first_name:   firstName.value,
+    last_name:    lastName.value,
+    is_superuser: isSuperuser.value,
+    is_active:    isActive.value,
+    email:        email.value,
+    password:     (isCreate.value || resetPsw.value) ? pwd.value : undefined
   }
-  else {
-    api.post(`api/v1/users`, {
-      'id': 0,
-      'first_name': firstName.value,
-      'last_name': lastName.value,
-      'is_superuser': isSuperuser.value,
-      'is_active': isActive.value,
-      'email': email.value,
-      'password': pwd.value
-    }).then(() => {
-      getUsers();
-      closeDg();
-      onReset();
-    })
+  if (isCreate.value) {
+    await userStore.addUser(param);
+  } else {
+    await userStore.editUser(param);
   }
-
+  getUsers();
+  closeDg();
+  onReset();
 }
 
 const onReset = () => {
@@ -302,7 +287,6 @@ const onReset = () => {
   isSuperuser.value = false;
   isPwd.value = true;
   editId.value = 0;
-  isCreate.value = true;
   resetPsw.value = false;
   addEditLoading.value = false;
 }
diff --git a/frontend/src/stores/useUserStore.ts b/frontend/src/stores/useUserStore.ts
index e412a1c..dadf05e 100644
--- a/frontend/src/stores/useUserStore.ts
+++ b/frontend/src/stores/useUserStore.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
-import { IRoles, IRolesDisplay, IUser, IUserDisplay, IUserRolesDisplay } from 'src/types/UserTypes';
+import { IRoles, IRolesDisplay, IUser, IUserDisplay, IUserRolesDisplay, IUserSubmit } from 'src/types/UserTypes';
 import { Notify } from 'quasar'
 import { IResponse } from 'src/types/BaseTypes';
 
@@ -12,6 +12,7 @@ export const useUserStore = defineStore('user', {
     roles: [] as IRolesDisplay[],
   }),
   actions: {
+    // -------------------------- users --------------------------
     async loadUsers() {
       this.reset('users');
       try {
@@ -29,6 +30,39 @@ export const useUserStore = defineStore('user', {
       }
     },
 
+    getUserById(id: number) {
+      if (!this.userIds.has(id)) {
+        return null;
+      }
+      return this.users.find((item: IUserDisplay) => item.id === id);
+    },
+
+    async addUser(user: IUserSubmit) {
+      return await api.post('api/v1/users', user);
+    },
+
+    async editUser(user: IUserSubmit) {
+      const id = user.id;
+      delete user['id']
+      return await api.put(`api/v1/users/${id}`, user);
+    },
+
+    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;
+    },
+
+    // -------------------------- roles --------------------------
     async loadRoles() {
       this.reset('roles');
       try {
@@ -45,26 +79,19 @@ export const useUserStore = defineStore('user', {
       }
     },
 
-    getUserById(id: number) {
-      if (!this.userIds.has(id)) {
-        return null;
-      }
-      return this.users.find((item: IUserDisplay) => item.id === id);
+    async addRole(user: IUserRolesDisplay, role: IRolesDisplay) {
+      return await this.updateUserRole(user, user.roleIds.concat(role.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;
+    async removeRole(user: IUserRolesDisplay, role: IRolesDisplay) {
+      return await this.updateUserRole(user, user.roleIds.filter(e => e !== role.id));
+    },
+
+    async updateUserRole(user: IUserRolesDisplay, roleIds: number[]) {
+      return await api.post('api/v1/userrole', {
+        userid: user.id,
+        roleIds
+      });
     },
 
     reset(target?: 'users'|'roles') {
@@ -98,7 +125,14 @@ export function userToUserDisplay(user: IUser): IUserDisplay {
 
 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);
+  const roles: IRolesDisplay[] = [];
+  const roleIds: number[] = [];
+  user.roles.sort((a, b) => a.level - b.level).forEach((role) => {
+    roles.push(roleToRoleDisplay(role));
+    roleIds.push(role.id);
+  });
+  userRolesDisplay.roles = roles;
+  userRolesDisplay.roleIds = roleIds;
   return userRolesDisplay;
 }
 
diff --git a/frontend/src/types/UserTypes.ts b/frontend/src/types/UserTypes.ts
index a031617..12d11c0 100644
--- a/frontend/src/types/UserTypes.ts
+++ b/frontend/src/types/UserTypes.ts
@@ -8,6 +8,11 @@ export interface IUser {
   roles: IRoles[];
 }
 
+export interface IUserSubmit extends Omit<IUser, 'id' | 'roles'> {
+  id?: number;
+  password?: string;
+}
+
 export interface IUserDisplay {
   id: number;
   firstName: string;
@@ -21,6 +26,7 @@ export interface IUserDisplay {
 
 export interface IUserRolesDisplay extends IUserDisplay {
   roles: IRolesDisplay[];
+  roleIds: number[];
 }
 
 export interface IRoles {