FlowChart のレイアウト修正

frontend/.env

@@ -1,3 +1,3 @@
 KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
-#KAB_BACKEND_URL="http://127.0.0.1:8000/"
+#AB_BACKEND_URL="http://127.0.0.1:8000/"
 

frontend/src/pages/FlowChart.vue

@@ -1,47 +1,55 @@
 <template>
   <q-page>
-    <div class="q-pa-sm q-gutter-sm event-tree ">
-      <q-drawer
-      side="left"
-      overlay
-      bordered
-      v-model="drawerLeft"
-      :show-if-above="false"
-      elevated
-      >
-        <div class="" style="padding:10px">
-          <div class="flex-center " >
-              <AppSelector  />
-          </div>
-          <div class="flex-center">
-              <EventTree />
-          </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-space></q-space>
-            <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
-          </div>
-        </div>
-      </q-drawer>
-    </div>
-    <div class="q-pa-md q-gutter-sm">
-    <div class="flowchart" v-if="store.currentFlow">
-        <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id"
-         :isSelected="node===state.activeNode" :actionNode="node"
-         @addNode="addNode"
-         @nodeSelected="onNodeSelected"
-         @nodeEdit="onNodeEdit"
-         @deleteNode="onDeleteNode"
-         @deleteAllNextNodes="onDeleteAllNextNodes"
-         ></node-item>
+    <q-layout
+      container
+      class="absolute-full shadow-2 rounded-borders"
+    >
+      <div class="q-pa-sm q-gutter-sm  ">
+        <q-drawer
+        side="left"
+        :overlay="true"
+        bordered
+        v-model="drawerLeft"
+        :show-if-above="false"
+        elevated
+        >
+            <div class="flex-center fixed-top app-selector" >
+                <AppSelector  />
+            </div>
+
+            <div class="flex-center absolute-full" style="padding-top:65px;padding-left:15px;padding-right:15px;">
+              <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
+                <EventTree />
+              </q-scroll-area>
+            </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-space></q-space>
+              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" />
+            </div>
+        </q-drawer>
       </div>
-  </div>
-  </q-page>
-  <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+      <div class="q-pa-md q-gutter-sm">
+        <div class="flowchart" v-if="store.currentFlow">
+          <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id"
+          :isSelected="node===state.activeNode" :actionNode="node"
+          @addNode="addNode"
+          @nodeSelected="onNodeSelected"
+          @nodeEdit="onNodeEdit"
+          @deleteNode="onDeleteNode"
+          @deleteAllNextNodes="onDeleteAllNextNodes"
+          ></node-item>
+        </div>
+      </div>
+      <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
+    </q-layout>
   <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg">
       <action-select ref="appDg" name="model" type="single"></action-select>
   </ShowDialog>
 
+  </q-page>
+
 </template>
 
 <script setup lang="ts">
@@ -57,7 +65,7 @@ import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
 import {FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
-const drawerLeft = ref(true);
+const drawerLeft = ref(false);
 const $q=useQuasar();
 const store = useFlowEditorStore();
 // ref関数を使ってtemplateとバインド
@@ -174,8 +182,9 @@ const onSaveFlow = async ()=>{
 }
 
 const fetchData = async ()=>{
-  const flowCtrl = new FlowCtrl();
+  drawerLeft.value=true;
   if(store.appInfo===undefined) return;
+  const flowCtrl = new FlowCtrl();
   const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
   if(actionFlows && actionFlows.length>0){
     store.setFlows(actionFlows);
@@ -195,16 +204,18 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
+  .app-selector{
+    padding:15px;
+    z-index: 999;
+  }
+
   .flowchart{
     padding-top: 10px;
   }
   .flow-toolbar{
   opacity: 50%;
   }
-  .flow-container{
-    height: 91.5dvb;
-    overflow: hidden;
-  }
+
   .event-tree .q-drawer {
     top:50px;
     z-index: 999;

frontend/src/pages/FlowEditorPage2.vue

@@ -1,117 +0,0 @@
-<template>
-  <div >
-    <div class="q-ma-md">
-      <div class="q-gutter-xs row items-start">
-        <q-btn
-          size="md"
-          @click="drawerLeft = !drawerLeft"
-          icon="keyboard_double_arrow_right"
-          round
-        />
-
-        <q-space />
-        <q-btn
-          color="white"
-          size="sm"
-          text-color="black"
-          label="キャンセル"
-          dense
-        />
-
-        <q-btn
-          class="q-px-sm"
-          color="primary"
-          size="sm"
-          label="保存する"
-          @click="save()"
-          dense
-        />
-      </div>
-    </div>
-    <q-layout
-      container
-      class="flow-container shadow-2 rounded-borders"
-    >
-      <q-drawer side="left" overlay bordered v-model="drawerLeft">
-        <div class="q-pa-sm fixed-right">
-          <q-btn
-            flat
-            round
-            color="primary"
-            icon="close"
-            @click="drawerLeft = !drawerLeft"
-          />
-        </div>
-        <div class="q-mt-lg q-pa-sm">
-          <q-card-section>
-            <div class="flex-center">
-              <ItemSelector  />
-            </div>
-          </q-card-section>
-        </div>
-        <q-separator />
-        <div class="q-mt-md q-pa-sm">
-          <q-card-section>
-            <ControlPanel />
-          </q-card-section>
-        </div>
-        <q-separator />
-        <q-card-actions align="right">
-          <div class="q-pa-sm">
-            <q-btn
-              flat
-              color="primary"
-              size="md"
-              @click="drawerLeft = !drawerLeft"
-              label="ジャンプ"
-              dense
-            />
-          </div>
-        </q-card-actions>
-      </q-drawer>
-
-      <FlowChartTest />
-    </q-layout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import FlowChartTest from 'pages/FlowChartTest.vue';
-import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
-import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
-import { ref } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { FlowCtrl }  from '../control/flowctrl'
-
-const flowCtrl = new FlowCtrl();
-const actName = ref('勤怠管理 - 4');
-
-const drawerLeft = ref(false);
-const store = useFlowEditorStore();
-const { flowNames1 } = storeToRefs(store);
-let isNew = ref(true);
-
-const save = () =>{
-
-  if(isNew.value)
-  {
-    flowCtrl.SaveFlow({appid:'1',flowid:'flow123',eventid:'event123',name:'test',content:'[]'});
-    isNew.value = false;
-  }
-  else
-  {
-    flowCtrl.UpdateFlow({appid:'1',flowid:'flow123',eventid:'event123',name:'test',content:'[{"a":"b"}]'});
-  }
-}
-</script>
-
-<style lang="scss">
-.flow-toolbar{
-  opacity: 50%;
-}
-.flow-container{
-  height: calc(91.5dvb - 50px);
-  overflow: hidden;
-}
-</style>

frontend/src/router/routes.ts

@@ -17,7 +17,6 @@ const routes: RouteRecordRaw[] = [
       { path: 'FlowChartTest', component: () => import('pages/FlowChartTest.vue') },
       { path: 'flowEditor', component: () => import('pages/FlowEditorPage.vue') },
       { path: 'FlowChart', component: () => import('pages/FlowChart.vue') },
-      { path: 'flowChart2', component: () => import('pages/FlowEditorPage2.vue') },
       { path: 'right', component: () => import('pages/testRight.vue') },
       { path: 'domain', component: () => import('pages/TenantDomain.vue') },
       { path: 'userdomain', component: () => import('pages/UserDomain.vue') }

frontend/src/stores/useAuthStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
-
+import {router} from 'src/router';
 import {IDomainInfo} from '../types/ActionTypes';
 
 
@@ -67,7 +67,7 @@ export const useAuthStore = defineStore({
             this.token = undefined;
             localStorage.removeItem('token');
             localStorage.removeItem('currentDomain');
-            Router.push('/login');
+            router.push('/login');
         },
         async setCurrentDomain(domain:IDomainInfo){
           if(domain.id===this.currentDomain.id){