処理中表示追加

frontend/src/components/DomainSelect.vue

@@ -23,7 +23,7 @@ export default {
   ]
   const rows = reactive([])
     onMounted( () => {
-      api.get(`api/domains/testtenant`).then(res =>{
+      api.get(`api/domains/1`).then(res =>{
          res.data.forEach((item) =>
         {
           rows.push({id:item.id,tenantid:item.tenantid,name:item.name,url:item.url,kintoneuser:item.kintoneuser});

frontend/src/components/ShowDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md q-gutter-sm">
+  <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent>
       <q-card :style="{minWidth : width }">
         <q-card-section>
@@ -15,7 +15,7 @@
         </q-card-actions>
       </q-card>
     </q-dialog>
-  </div>
+  <!-- </div> -->
 </template>
 <script>
 

frontend/src/pages/FlowChart.vue

@@ -24,9 +24,9 @@
             </div>
 
             <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
-              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync"/>
+              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync" :loading="deployLoading" />
               <q-space></q-space>
-              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
+              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" :loading="saveLoading"/>
             </div>
         </q-drawer>
       </div>
@@ -65,6 +65,9 @@ import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
 import {FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
+const deployLoading = ref(false);
+const saveLoading = ref(false);
+
 const drawerLeft = ref(false);
 const $q=useQuasar();
 const store = useFlowEditorStore();
@@ -138,13 +141,17 @@ const onDeploy= async ()=>{
     return;
   }
   try{
+    deployLoading.value=true;
     await store.deploy();
+    deployLoading.value=false;
     $q.notify({
       type: 'positive',
       caption:"通知",
       message: `デプロイを成功しました。`
     });
   }catch(error){
+    console.error(error);
+    deployLoading.value=false;
     $q.notify({
       type: 'negative',
       caption:"エラー",
@@ -165,13 +172,17 @@ const onSaveFlow = async ()=>{
     return;
   }
   try{
+    saveLoading.value=true;
     await store.saveFlow(targetFlow);
+    saveLoading.value=false;
     $q.notify({
       type: 'positive',
       caption:"通知",
       message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
     });
   }catch(error){
+    console.error(error);
+    saveLoading.value=false;
     $q.notify({
       type: 'negative',
       caption:"エラー",

frontend/src/pages/LoginPage.vue

@@ -4,10 +4,9 @@
       <q-page class="window-height window-width row justify-center items-center">
         <div class="column q-pa-lg">
           <div class="row">
-            <q-card square class="shadow-24" style="width:400px;height:540px;">
+            <q-card :square="false" class="shadow-24" style="width:400px;height:540px;">
               <q-card-section class="bg-primary">
                 <h4 class="text-h5 text-white q-my-md">{{ title}}</h4>
-
               </q-card-section>
               <q-card-section>
                 <q-form class="q-px-sm q-pt-xl" ref="loginForm">
@@ -31,8 +30,13 @@
               </q-card-section>
 
               <q-card-actions class="q-px-lg">
-                <q-btn unelevated size="lg" color="secondary" @click="submit" class="full-width text-white"
+                <q-btn :loading="loading" unelevated size="lg" color="secondary" @click="submit" class="full-width text-white"
-                  :label="btnLabel" />
+                  label="ログイン" >
+                  <template v-slot:loading>
+                    <q-spinner class="on-left" />
+                    ログイン中...
+                  </template>
+                </q-btn>
               </q-card-actions>
 
             </q-card>
@@ -52,13 +56,13 @@ import { useAuthStore } from 'stores/useAuthStore';
     const authStore = useAuthStore();
     const $q = useQuasar()
     const loginForm = ref(null);
+    const loading = ref(false);
     let title = ref('ログイン');
     let email = ref('');
     let password = ref('');
     let visibility = ref(false);
     let passwordFieldType = ref('password');
     let visibilityIcon = ref('visibility');
-    let btnLabel = ref('ログイン');
     const required = (val:string) => {
       return  (val && val.length > 0 || '必須項目')
     }
@@ -74,26 +78,34 @@ import { useAuthStore } from 'stores/useAuthStore';
       passwordFieldType.value = visibility.value ? 'text' : 'password'
       visibilityIcon.value =  visibility.value ? 'visibility_off' : 'visibility'
     }
-    const submit = () =>{
+    const submit = async () =>{
-      authStore.login(email.value,password.value).then((result)=>{
+      loading.value=true;
-        if(result)
+      try {
-        {
+        const result = await authStore.login(email.value,password.value);
+        loading.value=false;
+        if(result){
             $q.notify({
               icon: 'done',
               color: 'positive',
               message: 'ログイン成功'
-          })
+            });
         }
-        else
+        else{
-        {
             $q.notify({
               icon: 'error',
               color: 'negative',
               message: 'ログイン失敗'
-          })
-
-        }
             });
+        }
+      }catch (error) {
+        console.error(error);
+        loading.value=false;
+        $q.notify({
+              icon: 'error',
+              color: 'negative',
+              message: 'ログイン失敗'
+        });
+      }
 
     }