[UI] inactive domain

2024-11-25 10:45:44 +08:00
parent cc726c7f68
commit 7a1ff8ac30
3 changed files with 92 additions and 20 deletions
--- 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;
 }
--- 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>
--- 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;