[UI] dialog and redirect for no active domain

frontend/quasar.config.js

@@ -115,7 +115,8 @@ module.exports = configure(function (/* ctx */) {
 
       // Quasar plugins
       plugins: [
-        'Notify'
+        'Notify',
+        'Dialog'
       ]
     },
 

frontend/src/components/DomainSelect.vue

@@ -16,19 +16,19 @@ export default {
       type: Function,
     },
   },
-  setup() {
+  setup(props) {
-  const columns = [
+    const columns = [
-  { name: 'id'},
+      { name: 'id'},
-  { name: 'tenantid', required: true,label: 'テナント',align: 'left',field: 'tenantid',sortable: true},
+      { name: 'tenantid', required: true,label: 'テナント',align: 'left',field: 'tenantid',sortable: true},
-  { name: 'name', align: 'center', label: 'ドメイン', field: 'name', sortable: true },
+      { name: 'name', align: 'center', label: 'ドメイン', field: 'name', sortable: true },
-  { name: 'url', label: 'URL', field: 'url', sortable: true },
+      { name: 'url', label: 'URL', field: 'url', sortable: true },
-  { name: 'kintoneuser', label: 'アカウント', field: 'kintoneuser' }
+      { name: 'kintoneuser', label: 'アカウント', field: 'kintoneuser' }
-  ]
+    ]
-  const rows = reactive([])
+    const rows = reactive([]);
-    onMounted( () => {
+
+    onMounted(() => {
       api.get(`api/domains`).then(res =>{
-         res.data.data.forEach((item) =>
+         res.data.data.forEach((item) => {
-        {
           if (props.filterInitRowsFunc && !props.filterInitRowsFunc(item)) {
             return;
           }
@@ -36,7 +36,7 @@ export default {
         }
         )
       });
-      });
+    });
     return {
       columns,
       rows,

frontend/src/components/EssentialLink.vue

@@ -4,6 +4,7 @@
     tag="a"
     :target="target?target:'_blank'"
     :href="link"
+    :disable="disable"
     v-if="!isSeparator"
   >
     <q-item-section
@@ -33,6 +34,7 @@ export interface EssentialLinkProps {
   icon?: string;
   isSeparator?: boolean;
   target?:string;
+  disable?:boolean;
 }
 withDefaults(defineProps<EssentialLinkProps>(), {
   caption: '',

frontend/src/layouts/MainLayout.vue

@@ -47,7 +47,8 @@ const essentialLinks: EssentialLinkProps[] = [
     caption: '設計書から導入する',
     icon: 'home',
     link: '/',
-    target: '_self'
+    target: '_self',
+    disable: !authStore.hasDomain
   },
   // {
   //   title: 'フローエディター',
@@ -61,7 +62,8 @@ const essentialLinks: EssentialLinkProps[] = [
     caption: 'アプリを管理する',
     icon: 'widgets',
     link: '/#/app',
-    target: '_self'
+    target: '_self',
+    disable: !authStore.hasDomain
   },
   // {
   //   title: '条件エディター',

frontend/src/pages/UserDomain.vue

@@ -123,12 +123,14 @@
 import { ref, onMounted, computed } from 'vue'
 import { api } from 'boot/axios';
 import { useAuthStore } from 'stores/useAuthStore';
+import { useDomainStore } from 'stores/useDomainStore';
 
 import ShowDialog from 'components/ShowDialog.vue';
 import DomainSelect from 'components/DomainSelect.vue';
 import UserList from 'components/UserList.vue';
 
 const authStore = useAuthStore();
+const domainStore = useDomainStore();
 const pagination = ref({ sortBy: 'id', rowsPerPage: 0 });
 const rows = ref([] as any[]);
 const rowIds = new Set<string>();
@@ -166,7 +168,18 @@ const addUserDomainFinished = (val: string) => {
   const selected = addDomainRef.value.selected;
   if (val == 'OK' && selected.length > 0) {
     api.post(`api/domain/${useOtherUser.value ? otherUserId.value : authStore.userId}?domainid=${selected[0].id}`)
-      .then(() => { getDomain(useOtherUser.value ? otherUserId.value : undefined); });
+      .then(({ data }) => {
+        if (rows.value.length === 0 && data.data) {
+          const domain = data.data;
+          authStore.setCurrentDomain({
+            id: domain.id,
+            kintoneUrl: domain.url,
+            domainName: domain.name
+          });
+        }
+        domainStore.loadUserDomains();
+        getDomain(useOtherUser.value ? otherUserId.value : undefined);
+      });
   }
 };
 
@@ -223,7 +236,11 @@ const switchUserFinished = async (val: string) => {
 const getDomain = async (userId? : string) => {
   loading.value = true;
   rowIds.clear();
-  const resp = await api.get(`api/activedomain${useOtherUser.value ? `?userId=${otherUserId.value}` : ''}`);
+  if (useOtherUser.value) {
+    // TODO
+    return;
+  }
+  const resp = await api.get(`api/activedomain`);
   activeDomainId.value = resp?.data?.data?.id;
   const domainResult = userId ? await api.get(`api/domain?userId=${userId}`) : await api.get(`api/domain`);
   const domains = domainResult.data as any[];

frontend/src/router/index.ts

@@ -5,6 +5,7 @@ import {
   createWebHashHistory,
   createWebHistory,
 } from 'vue-router';
+import { Dialog } from 'quasar'
 
 import routes from './routes';
 import { useAuthStore } from 'stores/useAuthStore';
@@ -47,6 +48,20 @@ export default route(function (/* { store, ssrContext } */) {
           authStore.returnUrl = to.fullPath;
           return '/login';
       }
+
+      // redirect to domain setting page if no domain exist
+      const domainPages = [...publicPages, '/domain', '/userDomain', '/user'];
+      if (!authStore.hasDomain && !domainPages.includes(to.path)) {
+        Dialog.create({
+          title: '注意',
+          message: '既定/利用可能なドメインはありません。<br>ドメイン管理ページに遷移して処理します。',
+          html: true,
+          persistent: true,
+        }).onDismiss(() => {
+          console.log('Dialog dismissed. You can do some clean up here')
+        })
+        return '/domain';
+      }
   });
   return routerInstance;
 });

frontend/src/stores/useAuthStore.ts

@@ -35,6 +35,9 @@ export const useAuthStore = defineStore('auth', {
     toggleLeftDrawer(): boolean {
       return this.LeftDrawer;
     },
+    hasDomain(): boolean {
+      return !!this.currentDomain.id;
+    }
   },
   actions: {
     setLeftMenu(value:boolean){
@@ -84,6 +87,7 @@ export const useAuthStore = defineStore('auth', {
     logout() {
       this.token = '';
       this.currentDomain = {} as IDomainInfo; // 清空当前域
+      this.returnUrl = '';
       router.push('/login');
     },
     async setCurrentDomain(domain: IDomainInfo) {