[UI] use breadcrumbs for flowchart

frontend/src/components/left/AppDisplay.vue

@@ -1,89 +0,0 @@
-<template>
-  <div class="q-gutter-sm row items-start">
-    <q-breadcrumbs class="text-primary">
-      <q-breadcrumbs-el icon="arrow_back" label="アプリ管理" to="/app" />
-    </q-breadcrumbs>
-  </div>
-  <div class="row app-box">
-    <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
-      <div class="col-12 self-center ellipsis">
-        <q-icon
-          class="q-ma-sm"
-          name="open_in_new"
-          color="grey-9"
-        />{{ store.appInfo?.name }}
-      </div>
-    </a>
-  </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh" >
-    <template v-slot:toolbar>
-        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
-          <template v-slot:before>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
-  </ShowDialog>
-</template>
-
-<script lang="ts">
-import { defineComponent,ref } from 'vue';
-import {AppInfo} from '../../types/ActionTypes'
-import ShowDialog from '../../components/ShowDialog.vue';
-import AppSelectBox from '../../components/AppSelectBox.vue';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { useAuthStore } from 'src/stores/useAuthStore';
-export default defineComponent({
-  name: 'AppSelector',
-  emits:[
-    "appSelected"
-  ],
-  components:{
-    AppSelectBox,
-    ShowDialog
-  },
-  setup(props, context) {
-
-    const store = useFlowEditorStore();
-    const authStore=useAuthStore();
-    const appDg = ref();
-    const showSelectApp=ref(false);
-
-    const closeDg=(val :any)=>{
-      showSelectApp.value=false;
-      console.log("Dialog closed->",val);
-      if (val == 'OK') {
-          const data  = appDg.value.selected[0];
-          console.log(data);
-          const appInfo={
-            appId:data.id ,
-            name:data.name
-          };
-          store.setApp(appInfo);
-          store.loadFlow();
-      }
-    }
-    const showAppDialog=()=>{
-      showSelectApp.value=true;
-    }
-    return {
-      store,
-      authStore,
-      showSelectApp,
-      showAppDialog,
-      closeDg,
-      appDg,
-      filter:ref('')
-    }
-  }
-});
-</script>
-<style lang="scss">
-  .app-box{
-    margin-top: 4px;
-    padding: 0.25em;
-    border-radius: 2px;
-    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
-  }
-</style>

frontend/src/pages/FlowChart.vue

@@ -3,10 +3,7 @@
     <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-display">
-            <app-display />
-          </div>
-          <div class="flex-center absolute-full" style="padding-top:85px;padding-left:15px;padding-right:15px;">
+          <div class="flex-center absolute-full" style="padding:15px">
             <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
               <EventTree />
             </q-scroll-area>
@@ -41,8 +38,24 @@
       </div>
       <q-btn flat dense round
               :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
+              :style="{'left': fixedLeftPosition}"
               @click="drawerLeft=!drawerLeft" class="expand" />
+      <q-breadcrumbs v-if="store.appInfo" class="fixed q-pl-md"
+              :style="{'left': fixedLeftPosition}">
+        <q-breadcrumbs-el icon="widgets" label="アプリ管理" to="/app" />
+        <q-breadcrumbs-el>
+          <template v-slot>
+            <a class="full-width" :href="!store.appInfo?'':`${authStore.currentDomain.kintoneUrl}/k/${store.appInfo?.appId}`" target="_blank" title="Kiontoneへ">
+              {{ store.appInfo?.name }}
+              <q-icon
+                class="q-ma-xs"
+                name="open_in_new"
+                color="grey-9"
+              />
+            </a>
+          </template>
+        </q-breadcrumbs-el>
+      </q-breadcrumbs>
       <div class="q-pa-md q-gutter-sm" :style="{minWidth: minPanelWidth}">
         <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft?{paddingLeft:'300px'}:{}]">
           <node-item v-if="rootNode!==undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -83,7 +96,6 @@ import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import PropertyPanel from 'components/right/PropertyPanel.vue';
-import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
@@ -119,6 +131,9 @@ const minPanelWidth=computed(()=>{
     return "300px";
   }
 });
+const fixedLeftPosition = computed(()=>{
+  return drawerLeft.value?"300px":"0px";
+});
 
 const addNode = (node: IActionNode, inputPoint: string) => {
   if (drawerRight.value) {
@@ -327,11 +342,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.app-display {
-  padding: 15px;
-  z-index: 999;
-}
-
 .flowchart {
   padding-top: 10px;
 }