add app dialog

frontend/src/components/AppSelect.vue

@@ -8,7 +8,7 @@ import { ref,onMounted,reactive } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
-  name: 'appSelect',
+  name: 'AppSelect',
   props: {
     name: String,
     type: String

frontend/src/components/ShowDialog.vue

@@ -20,7 +20,7 @@
 <script>
 
 export default {
-  name: 'showDialog',
+  name: 'ShowDialog',
   props: {
     name:String,
     visible: Boolean,

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
     }
   }
 });

frontend/src/components/right/FieldInput.vue

@@ -5,7 +5,7 @@
         </template>
 </q-input>
 <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
-  <field-select ref="appDg" name="フィールド" type="single" :appId="1"></field-select>
+  <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
 </show-dialog>
 </template>
 
@@ -13,7 +13,7 @@
 import { defineComponent, ref ,watchEffect} from 'vue';
 import ShowDialog from '../ShowDialog.vue';
 import FieldSelect from '../FieldSelect.vue';
-
+import { useFlowEditorStore } from 'stores/flowEditor';
 export default defineComponent({
   name: 'FieldInput',
   components: {
@@ -35,6 +35,7 @@ export default defineComponent({
     const appDg = ref();
     const show = ref(false);
     const selectedField = ref(props.modelValue);
+    const store = useFlowEditorStore();
 
     const showDg = () => {
       show.value = true;
@@ -51,6 +52,7 @@ export default defineComponent({
     });
 
     return {
+      store,
       appDg,
       show,
       showDg,