From acf8f0489d474256325f07d0dc21b935c75a4232 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 19 Aug 2024 21:25:05 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A6=E3=83=BC=E3=82=B6=E3=83=BC=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E8=BF=BD=E5=8A=A0?=
 =?UTF-8?q?=E3=81=97=E3=81=BE=E3=81=97=E3=81=9F=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/UserList.vue  |  36 +++
 frontend/src/pages/UserManagement.vue | 302 ++++++++++++++++++++++++++
 frontend/src/router/routes.ts         |   1 +
 3 files changed, 339 insertions(+)
 create mode 100644 frontend/src/components/UserList.vue
 create mode 100644 frontend/src/pages/UserManagement.vue

diff --git a/frontend/src/components/UserList.vue b/frontend/src/components/UserList.vue
new file mode 100644
index 0000000..64b3b35
--- /dev/null
+++ b/frontend/src/components/UserList.vue
@@ -0,0 +1,36 @@
+<template>
+    <q-table :rows="rows" :columns="columns" row-key="id" :filter="props.filter" :loading="loading"
+    :pagination="pagination" selection="single" v-model:selected="selected"></q-table>
+    
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { api } from 'boot/axios';
+const props = defineProps<{filter:string}>()
+const columns = [
+  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
+  { name: 'firstName', label: '氏名', field: 'firstName', align: 'left', sortable: true },
+  { name: 'lastName', label: '苗字', field: 'lastName', align: 'left', sortable: true },
+  { name: 'email', label: '電子メール', field: 'email', align: 'left', sortable: true },
+];
+
+const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 10 });
+const rows = ref([]);
+const loading = ref(false);
+const selected = ref([]);
+defineExpose({
+  selected
+})
+const getUsers = async (filter = () => true) => {
+  loading.value = true;
+  const result = await api.get(`api/v1/users`);
+  rows.value = result.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 }
+  }).filter(filter);
+  loading.value = false;
+}
+
+onMounted(async () => {
+  await getUsers();
+})
+</script>
diff --git a/frontend/src/pages/UserManagement.vue b/frontend/src/pages/UserManagement.vue
new file mode 100644
index 0000000..e347dd7
--- /dev/null
+++ b/frontend/src/pages/UserManagement.vue
@@ -0,0 +1,302 @@
+<template>
+  <div class="q-pa-md">
+    <q-table title="ユーザーリスト" :rows="rows" :columns="columns" row-key="id" :filter="filter" :loading="loading"
+      :pagination="pagination">
+
+      <template v-slot:top>
+        <q-btn color="primary" :disable="loading" label="新規" @click="addRow" />
+        <q-space />
+        <q-input borderless dense filled debounce="300" v-model="filter" placeholder="検索">
+          <template v-slot:append>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+
+      <template v-slot:body-cell-status="props">
+        <q-td :props="props">
+          <div class="row">
+            <div v-if="props.row.isActive">
+              <q-chip square color="positive" text-color="white" icon="done" label="使用可能" size="sm" />
+            </div>
+            <div v-else>
+              <q-chip square color="negative" text-color="white" icon="block" label="使用不可" size="sm" />
+            </div>
+
+            <q-chip v-if="props.row.isSuperuser" square color="accent" text-color="white" icon="admin_panel_settings"
+              label="システム管理者" size="sm" />
+          </div>
+
+        </q-td>
+      </template>
+
+      <template v-slot:header-cell-status="p">
+        <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
+              dense options-dense style="font-size: 12px; padding-top: 1px;" />
+          </div>
+        </q-th>
+      </template>
+
+      <template v-slot:body-cell-actions="p">
+        <q-td :props="p">
+          <q-btn-group flat>
+            <q-btn flat color="primary" padding="xs" size="1em" icon="edit_note" @click="editRow(p.row)" />
+            <q-btn flat color="negative" padding="xs" size="1em" icon="delete_outline" @click="removeRow(p.row)" />
+          </q-btn-group>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog :model-value="show" persistent>
+      <q-card style="min-width: 36em">
+        <q-form class="q-gutter-md" @submit="onSubmit" autocomplete="off">
+          <q-card-section>
+            <div class="text-h6 q-ma-sm">K-True Account</div>
+          </q-card-section>
+
+          <q-card-section class="q-pt-none q-mt-none">
+            <div class="q-gutter-lg">
+
+              <q-input filled v-model="firstName" label="氏名 *" hint="ユーザーの氏名を入力してください" lazy-rules
+                :rules="[val => val && val.length > 0 || 'ユーザーの氏名を入力してください。']" />
+
+              <q-input filled v-model="lastName" label="苗字 *" hint="ユーザーの苗字を入力してください" lazy-rules
+                :rules="[val => val && val.length > 0 || 'ユーザーの苗字を入力してください']" />
+
+              <q-input filled type="email" v-model="email" label="電子メール *" hint="電子メール、ログインとしても使用" lazy-rules
+                :rules="[val => val && val.length > 0 || '電子メールを入力してください']" autocomplete="new-password" />
+
+              <q-input v-if="isCreate" v-model="pwd" filled :type="isPwd ? 'password' : 'text'" hint="パスワード"
+                label="パスワード" :disable="!isCreate" lazy-rules
+                :rules="[val => val && val.length > 0 || 'Please type something']" autocomplete="new-password">
+                <template v-slot:append>
+                  <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                    @click="isPwd = !isPwd" />
+                </template>
+              </q-input>
+
+              <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
+                <q-item-section>
+                  <q-item-label>システム管理者</q-item-label>
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-toggle v-model="isSuperuser" />
+                </q-item-section>
+              </q-item>
+
+              <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
+                <q-item-section>
+                  <q-item-label>使用可能</q-item-label>
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-toggle v-model="isActive" />
+                </q-item-section>
+              </q-item>
+
+              <div class="q-gutter-y-md" v-if="!isCreate">
+                <q-separator />
+
+                <q-item tag="label" class="q-pl-sm q-pr-none q-py-xs">
+                  <q-item-section>
+                    <q-item-label>パスワードリセット</q-item-label>
+                  </q-item-section>
+                  <q-item-section avatar>
+                    <q-toggle v-model="resetPsw" />
+                  </q-item-section>
+                </q-item>
+
+                <q-input v-model="pwd" filled :type="isPwd ? 'password' : 'text'" hint="パスワードを入力してください" label="パスワード"
+                  :disable="!resetPsw" lazy-rules :rules="[val => val && val.length > 0 || 'Please type something']"
+                  autocomplete="new-password">
+                  <template v-slot:append>
+                    <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                      @click="isPwd = !isPwd" />
+                  </template>
+                </q-input>
+                <!-- <q-btn label="asdf"/> -->
+              </div>
+            </div>
+
+          </q-card-section>
+          <q-card-actions align="right" class="text-primary q-mb-md q-mx-sm">
+            <q-btn label="保存" type="submit" color="primary" />
+            <q-btn label="キャンセル" type="cancel" color="primary" flat class="q-ml-sm" @click="closeDg()" />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+
+    </q-dialog>
+
+    <q-dialog v-model="confirm" persistent>
+      <q-card>
+        <q-card-section class="row items-center">
+          <q-icon name="warning" color="warning" size="2em" />
+          <span class="q-ml-sm">削除してもよろしいですか？</span>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Cancel" color="primary" v-close-popup />
+          <q-btn flat label="OK" color="primary" v-close-popup @click="deleteUser()" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { api } from 'boot/axios';
+
+const columns = [
+  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
+  { name: 'firstName', label: '氏名', field: 'firstName', align: 'left', sortable: true },
+  { name: 'lastName', label: '苗字', field: 'lastName', 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' }
+];
+
+const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
+
+const loading = ref(false);
+const filter = ref('');
+const statusFilter = ref('全データ');
+const rows = ref([]);
+const show = ref(false);
+const confirm = ref(false);
+const resetPsw = ref(false);
+
+const firstName = ref('');
+const lastName = ref('');
+const email = ref('');
+const isSuperuser = ref(false);
+const isActive = ref(true);
+
+const isPwd = ref(true);
+const pwd = ref('');
+const isCreate = ref(true);
+let editId = ref(0);
+
+const getUsers = async (filter = () => true) => {
+  loading.value = true;
+  const result = await api.get(`api/v1/users`);
+  rows.value = result.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 }
+  }).filter(filter);
+  loading.value = false;
+}
+
+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 getUsers();
+})
+
+const options = ['全データ', 'システム管理者のみ', '使用可能', '使用不可']
+
+// emulate fetching data from server
+const addRow = () => {
+  // editId.value
+  onReset();
+  show.value = true;
+}
+
+const removeRow = (row) => {
+  confirm.value = true;
+  editId.value = row.id;
+}
+
+const deleteUser = () => {
+  api.delete(`api/v1/users/${editId.value}`).then(() => {
+    getUsers();
+  })
+  editId.value = 0;
+};
+
+const editRow = (row) => {
+  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;
+  isActive.value = row.isActive;
+
+  isPwd.value = true;
+  show.value = true;
+};
+
+const closeDg = () => {
+  show.value = false;
+  onReset();
+}
+
+const onSubmit = () => {
+  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();
+    })
+  }
+  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();
+    })
+  }
+
+}
+
+const onReset = () => {
+  firstName.value = '';
+  lastName.value = '';
+  email.value = '';
+  pwd.value = '';
+  isActive.value = true;
+  isSuperuser.value = false;
+  isPwd.value = true;
+  editId.value = 0;
+  isCreate.value = true;
+  resetPsw.value = false
+}
+</script>
diff --git a/frontend/src/router/routes.ts b/frontend/src/router/routes.ts
index af5edf3..f7c6d02 100644
--- a/frontend/src/router/routes.ts
+++ b/frontend/src/router/routes.ts
@@ -26,6 +26,7 @@ const routes: RouteRecordRaw[] = [
       { path: 'right', component: () => import('pages/testRight.vue') },
       { path: 'domain', component: () => import('pages/TenantDomain.vue') },
       { path: 'userdomain', component: () => import('pages/UserDomain.vue')},
+      { path: 'user', component: () => import('pages/UserManagement.vue')},
       { path: 'condition', component: () => import('pages/conditionPage.vue') }
     ],
   },