[UI] Fix behavious when delete user domain

frontend/src/components/DomainSelect.vue

@@ -1,11 +1,20 @@
 <template>
   <div class="q-pa-md">
-    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+    <q-table :loading="loading" :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows">
+      <template v-slot:body-cell-name="p">
+        <q-td class="content-box flex justify-between items-center" :props="p">
+          {{ p.row.name }}
+          <q-badge v-if="!p.row.domainActive" color="grey">未启用</q-badge>
+          <q-badge v-if="p.row.id == currentDomainId" color="primary">現在</q-badge>
+        </q-td>
+      </template>
+    </q-table>
   </div>
 </template>
 <script>
-import { ref,onMounted,reactive } from 'vue'
+import { ref,onMounted,reactive, computed } from 'vue'
 import { api } from 'boot/axios';
+import { useAuthStore } from 'src/stores/useAuthStore';
 
 export default {
   name: 'DomainSelect',
@@ -17,27 +26,43 @@ export default {
     },
   },
   setup(props) {
+    const authStore = useAuthStore();
+    const currentDomainId = computed(() => authStore.currentDomain.id);
+    const loading = ref(true);
+    const inactiveRowClass = (row) => row.domainActive ? '' : 'inactive-row';
+
     const columns = [
-      { name: 'id'},
-      { name: 'tenantid', required: true,label: 'テナント',align: 'left',field: 'tenantid',sortable: true},
-      { name: 'name', align: 'center', label: 'ドメイン', field: 'name', sortable: true },
-      { name: 'url', label: 'URL', field: 'url', sortable: true },
-      { name: 'kintoneuser', label: 'アカウント', field: 'kintoneuser' }
+      { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true, classes: inactiveRowClass },
+      { name: 'tenantid', required: true,label: 'テナント',align: 'left',field: 'tenantid',sortable: true, classes: inactiveRowClass},
+      { name: 'name', align: 'center', label: 'ドメイン', field: 'name', sortable: true, classes: inactiveRowClass },
+      { name: 'url', label: 'URL', field: 'url', sortable: true, classes: inactiveRowClass },
+      { name: 'user', label: 'アカウント', field: 'user', classes: inactiveRowClass }
     ]
     const rows = reactive([]);
 
     onMounted(() => {
+      loading.value = true;
       api.get(`api/domains`).then(res =>{
-         res.data.data.forEach((item) => {
+         res.data.data.forEach((data) => {
+          const item = {
+            id: data.id,
+            tenantid: data.tenantid,
+            domainActive: data.is_active,
+            name: data.name,
+            url: data.url,
+            user: data.kintoneuser,
+          }
           if (props.filterInitRowsFunc && !props.filterInitRowsFunc(item)) {
             return;
           }
-          rows.push({id:item.id,tenantid:item.tenantid,name:item.name,url:item.url,kintoneuser:item.kintoneuser});
-        }
-        )
+          rows.push(item);
+        })
+        loading.value = false;
       });
     });
     return {
+      loading,
+      currentDomainId,
       columns,
       rows,
       selected: ref([]),
@@ -46,3 +71,11 @@ export default {
 
 }
 </script>
+<style lang="scss">
+.q-table td.inactive-row {
+  color: #aaa;
+}
+.q-table .content-box {
+  box-sizing: content-box;
+}
+</style>

frontend/src/components/DomainSelector.vue

@@ -7,9 +7,9 @@
       icon="share"
       size="md"
       :label="userStore.currentDomain.domainName"
-      :disable-dropdown="isUnclickable"
-      :dropdown-icon="isUnclickable ? 'none' : ''"
-      :disable="isUnclickable"
+      :disable-dropdown="true"
+      dropdown-icon='none'
+      :disable="true"
     >
       <q-list>
         <q-item :active="isCurrentDomain(domain)" active-class="active-domain-item" v-for="domain in domains" :key="domain.domainName"