[feature] Update UI in flowchart and add return btn

frontend/src/components/left/AppDisplay.vue

@@ -0,0 +1,89 @@
+<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,11 +3,10 @@
     <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">
+          <div class="flex-center fixed-top app-display">
-            <AppSelector />
+            <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-top:65px;padding-left:15px;padding-right:15px;">
             <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
               <EventTree />
             </q-scroll-area>
@@ -78,7 +77,7 @@ 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 AppSelector from 'components/left/AppSelector.vue';
+import AppDisplay from 'components/left/AppDisplay.vue';
 import EventTree from 'components/left/EventTree.vue';
 import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
@@ -305,7 +304,7 @@ onMounted(() => {
 </script>
 
 <style lang="scss">
-.app-selector {
+.app-display {
   padding: 15px;
   z-index: 999;
 }