add app dialog

frontend/src/components/left/AppSelector.vue

@@ -12,11 +12,9 @@
       color="grey-9"
       style="font-size: 2em"
     />
-
     <div class="col-7 self-center ellipsis">
       {{ selectedApp.name }}
     </div>
-
     <div class="self-center">
       <q-btn
         outline
@@ -24,26 +22,63 @@
         label="変 更"
         padding="none sm"
         color="primary"
+        @click="showAppDialog"
       ></q-btn>
     </div>
   </div>
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ" @close="closeDg">
+      <AppSelect ref="appDg" name="アプリ" type="single"></AppSelect>
+  </ShowDialog>
 </template>
 
 <script lang="ts">
 import { defineComponent,ref } from 'vue';
 import {AppInfo} from '../../types/ActionTypes'
+import ShowDialog from '../../components/ShowDialog.vue';
+import AppSelect from '../../components/AppSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
 export default defineComponent({
   name: 'AppSelector',
   emits:[
     "appSelected"
   ],
+  components:{
+    AppSelect,
+    ShowDialog
+  },
   setup(props, context) {
+
+    const store = useFlowEditorStore();
+    const appDg = ref();
+    const showSelectApp=ref(false);
     const selectedApp =ref<AppInfo>({
       appId:"",
       name:"",
     });
+    const closeDg=(val :any)=>{
+      showSelectApp.value=false;
+      console.log("Dialog closed->",val);
+      if (val == 'OK') {
+          const data  = appDg.value.selected[0];
+          console.log(data);
+          selectedApp.value={
+            appId:data.id ,
+            name:data.name
+          };
+          store.setApp(selectedApp.value);
+          store.setFlow();
+      }
+    }
+    const showAppDialog=()=>{
+      showSelectApp.value=true;
+    }
     return {
-      selectedApp
+      store,
+      selectedApp,
+      showSelectApp,
+      showAppDialog,
+      closeDg,
+      appDg
     }
   }
 });