From 7a1ff8ac3021b71e6c855aee7dd1c6e39b567c59 Mon Sep 17 00:00:00 2001
From: xue jiahao <hsuehchiahao@gmail.com>
Date: Mon, 25 Nov 2024 10:45:44 +0800
Subject: [PATCH] [UI] inactive domain

---
 frontend/src/components/DomainSelector.vue | 12 ++-
 frontend/src/pages/TenantDomain.vue        | 88 ++++++++++++++++++----
 frontend/src/stores/useAuthStore.ts        | 12 +--
 3 files changed, 92 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/DomainSelector.vue b/frontend/src/components/DomainSelector.vue
index 2fb7c60..d6fcf91 100644
--- a/frontend/src/components/DomainSelector.vue
+++ b/frontend/src/components/DomainSelector.vue
@@ -12,10 +12,10 @@
       :disable="isUnclickable"
     >
       <q-list>
-        <q-item v-for="domain in domains" :key="domain.domainName"
+        <q-item :active="isCurrentDomain(domain)" active-class="active-domain-item" v-for="domain in domains" :key="domain.domainName"
           clickable v-close-popup @click="onItemClick(domain)">
           <q-item-section side>
-            <q-icon name="share" size="sm" color="orange" text-color="white"></q-icon>
+            <q-icon name="share" size="sm" :color="isCurrentDomain(domain) ? 'orange': ''" text-color="white"></q-icon>
           </q-item-section>
           <q-item-section>
             <q-item-label>{{domain.domainName}}</q-item-label>
@@ -42,6 +42,9 @@ const isUnclickable = computed(()=>{
   return route.path.startsWith('/FlowChart/') || domains.value === undefined || domains.value.length === 0;
 });
 
+const isCurrentDomain=(domain:IDomainInfo)=>{
+  return domain.id === userStore.currentDomain.id;
+}
 
 const onItemClick=(domain:IDomainInfo)=>{
   console.log(domain);
@@ -54,6 +57,11 @@ const onItemClick=(domain:IDomainInfo)=>{
   cursor: default !important;
 }
 
+.q-item.active-domain-item {
+  color: inherit;
+  background: #eee;
+}
+
 .q-btn.disabled.customized-disabled-btn * {
   cursor: default !important;
 }
diff --git a/frontend/src/pages/TenantDomain.vue b/frontend/src/pages/TenantDomain.vue
index 4e2956b..7af3320 100644
--- a/frontend/src/pages/TenantDomain.vue
+++ b/frontend/src/pages/TenantDomain.vue
@@ -17,6 +17,14 @@
         </q-input>
       </template>
 
+      <template v-slot:body-cell-name="p">
+        <q-td :props="p">
+          {{ p.row.name }}
+          <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
+          <q-badge v-if="p.row.id == tenantid" color="primary">現在</q-badge>
+        </q-td>
+      </template>
+
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
           <q-btn-group flat>
@@ -45,7 +53,7 @@
               <q-input filled v-model="name" label="環境名 *" hint="kintoneの環境名を入力してください" lazy-rules
                 :rules="[val => val && val.length > 0 || 'kintoneの環境名を入力してください。']" />
 
-              <q-input filled type="url" v-model="url" label="Kintone url" hint="KintoneのURLを入力してください" lazy-rules
+              <q-input filled type="url" v-model.trim="url" label="Kintone url" hint="KintoneのURLを入力してください" lazy-rules
                 :rules="[val => val && val.length > 0, isDomain || 'KintoneのURLを入力してください']" />
 
               <q-input filled v-model="kintoneuser" label="ログイン名 *" hint="Kintoneのログイン名を入力してください" lazy-rules
@@ -60,6 +68,15 @@
                 </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="domainActive" />
+                  </q-item-section>
+                </q-item>
+
               <div class="q-gutter-y-md" v-if="!isCreate">
                 <q-separator />
 
@@ -116,10 +133,34 @@ import { ref, onMounted, reactive } from 'vue';
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
 
+type IManagedDomain = {
+  id: number;
+  tenantid: string;
+  name: string;
+  url: string;
+  kintoneuser: string,
+  kintonepwd: string,
+  create_time: string;
+  update_time: string;
+  is_active: boolean;
+  owner: object
+}
+
+type IDomainDisplay = {
+  id: number;
+  tenantid: string;
+  name: string;
+  url: string;
+  user: string;
+  password: string;
+  domainActive: boolean;
+}
+
 const authStore = useAuthStore();
+const inactiveRowClass = (row: IDomainDisplay) => row.domainActive ? '' : 'inactive-row';
 
 const columns = [
-  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
+  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true, classes: inactiveRowClass },
   {
     name: 'tenantid',
     required: true,
@@ -127,18 +168,19 @@ const columns = [
     field: row => row.tenantid,
     format: val => `${val}`,
     align: 'left',
-    sortable: true
+    sortable: true,
+    classes: inactiveRowClass
   },
-  { name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true },
-  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true },
-  { name: 'user', label: 'ログイン名', field: 'user', align: 'left', },
+  { name: 'name', label: '環境名', field: 'name', align: 'left', sortable: true, classes: inactiveRowClass },
+  { name: 'url', label: 'URL', field: 'url', align: 'left', sortable: true, classes: inactiveRowClass },
+  { name: 'user', label: 'ログイン名', field: 'user', align: 'left', classes: inactiveRowClass },
   { name: 'actions', label: '操作', field: 'actions' }
 ];
 
 const pagination = ref({ sortBy: 'id', descending: true, rowsPerPage: 20 });
 const loading = ref(false);
 const filter = ref('');
-const rows = ref([]);
+const rows = ref<IDomainDisplay[]>([]);
 const show = ref(false);
 const confirm = ref(false);
 const resetPsw = ref(false);
@@ -150,15 +192,24 @@ const isPwd = ref(true);
 const kintoneuser = ref('');
 const kintonepwd = ref('');
 const kintonepwdBK = ref('');
+const domainActive = ref(true);
 const isCreate = ref(true);
 let editId = ref(0);
 
 const getDomain = async () => {
   loading.value = true;
   const userId = authStore.userId;
-  const result = await api.get(`api/domain?userId=${userId}`);
+  const result = await api.get<IManagedDomain[]>(`api/domain?userId=${userId}`);
   rows.value = result.data.map((item) => {
-    return { id: item.id, tenantid: item.tenantid, name: item.name, url: item.url, user: item.kintoneuser, password: item.kintonepwd }
+    return {
+      id: item.id,
+      tenantid: item.tenantid,
+      domainActive: item.is_active,
+      name: item.name,
+      url: item.url,
+      user: item.kintoneuser,
+      password: item.kintonepwd
+    }
   });
   loading.value = false;
 }
@@ -174,7 +225,7 @@ const addRow = () => {
   show.value = true;
 }
 
-const removeRow = (row) => {
+const removeRow = (row: IDomainDisplay) => {
   confirm.value = true;
   editId.value = row.id;
 }
@@ -195,6 +246,7 @@ const editRow = (row) => {
   url.value = row.url;
   kintoneuser.value = row.user;
   kintonepwd.value = row.password;
+  domainActive.value = row.domainActive;
   isPwd.value = true;
   show.value = true;
 };
@@ -214,14 +266,16 @@ const closeDg = () => {
 }
 
 const onSubmit = () => {
-  if (editId.value !== 0) {
+  if (!isCreate.value && editId.value !== 0) {
     api.put(`api/domain`, {
       'id': editId.value,
       'tenantid': tenantid.value,
       'name': name.value,
       'url': url.value,
       'kintoneuser': kintoneuser.value,
-      'kintonepwd': isCreate.value || resetPsw.value ? kintonepwd.value : ''
+      'kintonepwd': isCreate.value || resetPsw.value ? kintonepwd.value : '',
+      'is_active': domainActive.value,
+      'ownerid': authStore.userId,
     }).then(() => {
       getDomain();
       closeDg();
@@ -235,7 +289,9 @@ const onSubmit = () => {
       'name': name.value,
       'url': url.value,
       'kintoneuser': kintoneuser.value,
-      'kintonepwd': kintonepwd.value
+      'kintonepwd': kintonepwd.value,
+      'is_active': domainActive.value,
+      'ownerid': authStore.userId,
     }).then(() => {
       getDomain();
       closeDg();
@@ -253,6 +309,12 @@ const onReset = () => {
   isPwd.value = true;
   editId.value = 0;
   isCreate.value = true;
+  domainActive.value = true;
   resetPsw.value = false
 }
 </script>
+<style lang="scss">
+.q-table td.inactive-row {
+  color: #aaa;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts
index 985d893..1d8aff4 100644
--- a/frontend/src/stores/useAuthStore.ts
+++ b/frontend/src/stores/useAuthStore.ts
@@ -76,11 +76,13 @@ export const useAuthStore = defineStore('auth', {
     async getUserDomains(): Promise<IDomainInfo[]> {
       const resp = await api.get(`api/domain`);
       const domains = resp.data as any[];
-      return domains.map((data) => ({
-        id: data.id,
-        domainName: data.name,
-        kintoneUrl: data.url,
-      }));
+      return domains
+        .filter(data => data.is_active)
+        .map((data) => ({
+          id: data.id,
+          domainName: data.name,
+          kintoneUrl: data.url,
+        }));
     },
     async getUserInfo():Promise<UserInfo>{
       const resp = (await api.get(`api/v1/users/me`)).data;