APPフィールドコンポーネントのバグ修正

frontend/src/components/AppFieldSelectBox.vue

@@ -4,7 +4,7 @@
         <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
 
         <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
-            <div v-if="selField?.app && !showSelectApp">{{ selField.app?.name }}</div>
+            <div v-if="selField?.app && !showSelectApp">{{ selField?.app?.name }}</div>
             <q-space />
             <div>
                 <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
@@ -14,7 +14,7 @@
         </div>
     </div>
 
-    <div v-if="!showSelectApp && selField.app?.name">
+    <div v-if="!showSelectApp && selField?.app?.name">
         <div>
             <div class="row q-mb-md">
                 <!-- <div class="col"> -->
@@ -31,9 +31,9 @@
                 </div>
             </div>
             <div class="row">
-                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
-                    :appId="selField.app?.id" not_page :filter="fieldFilter"
-                    :selFields="selField.fields"></field-select>
+                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelectFields="updateSelectFields"
+                    :appId="selField?.app?.id" not_page :filter="fieldFilter"
+                    :selectedFields="selField.fields"></field-select>
             </div>
         </div>
     </div>
@@ -41,7 +41,7 @@
     </div>
 
 
-    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択">
         <template v-slot:toolbar>
             <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
                 <template v-slot:before>
@@ -51,15 +51,14 @@
         </template>
 
         <AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelectBox>
+            :updateExternalSelectAppInfo="updateSelectApp"></AppSelectBox>
     </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed ,reactive} from 'vue';
+import { defineComponent, ref, watchEffect, computed, reactive } from 'vue';
 import ShowDialog from './ShowDialog.vue';
 import FieldSelect from './FieldSelect.vue';
-import { useFlowEditorStore } from 'stores/flowEditor';
 import AppSelectBox from './AppSelectBox.vue';
 interface IApp {
     id: string,
@@ -85,7 +84,7 @@ export default defineComponent({
         AppSelectBox,
     },
     props: {
-      selectedField: {
+        selectedField: {
             type: Object,
             required: true
         },
@@ -96,37 +95,18 @@ export default defineComponent({
 
     },
     setup(props, { emit }) {
-        const appDlg = ref();
-        const fieldDlg = ref();
         const showSelectApp = ref(false);
         const selField = reactive(props.selectedField);
-        console.log(props.selectedField);
-
-        const store = useFlowEditorStore();
 
         const isSelected = computed(() => {
             return selField !== null && typeof selField === 'object' && ('app' in selField)
         });
 
-
-        const closeAppDlg = (val: string) => {
-            if (val == 'OK') {
-                selField.app = appDlg.value.selected[0];
-                selField.fields = [];
-                showSelectApp.value = false;
-            }
-        };
-
-        const closeFieldDialog = (val: string) => {
-            if (val == 'OK') {
-                selField.fields = fieldDlg.value.selected;
-            }
-        };
-        const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
+        const updateSelectApp = (newAppinfo: IApp) => {
             selField.app = newAppinfo
         }
         
-        const updateItems = (newFields: IField[]) => {
+        const updateSelectFields = (newFields: IField[]) => {
             selField.fields = newFields
         }
 
@@ -135,15 +115,11 @@ export default defineComponent({
         });
 
         return {
-            appDlg,
-            fieldDlg,
-            closeAppDlg,
-            closeFieldDialog,
             showSelectApp,
             isSelected,
-            updateExternalSelectAppInfo,
+            updateSelectApp,
             filter: ref(),
-            updateItems,
+            updateSelectFields,
             fieldFilter: ref(),
             selField
         };

frontend/src/components/AppSelectBox.vue

@@ -26,7 +26,7 @@ export default {
     name: String,
     type: String,
     filter: String,
-    updateExternalSelectAppInfo: {
+    updateSelectApp: {
       type: Function
     }
   },
@@ -42,8 +42,8 @@ export default {
     const selected = ref([])
 
     watchEffect(()=>{
-      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
-        props.updateExternalSelectAppInfo(selected.value[0])
+      if (selected.value && selected.value[0] && props.updateSelectApp) {
+        props.updateSelectApp(selected.value[0])
       }
     });
     onMounted(() => {

frontend/src/components/FieldSelect.vue

@@ -34,6 +34,9 @@ export default {
       default:()=>[]
     },
     filter: String,
+    updateSelectFields: {
+      type: Function
+    },
   },
   setup(props) {
     const isLoaded = ref(false);
@@ -69,6 +72,12 @@ export default {
       isLoaded.value = true;
     });
 
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateSelectFields) {
+        props.updateSelectFields(selected)
+      }
+    });
+
     return {
       columns,
       rows,

frontend/src/components/right/AppFieldSelect.vue

@@ -48,8 +48,8 @@
             </q-card-section>
         </q-card>
     </div>
-    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
-        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" />
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeAFBox">
+        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" ref="afBox"/>
     </show-dialog>
 </template>
 
@@ -105,11 +105,12 @@ export default defineComponent({
     },
     setup(props, { emit }) {
         const show = ref(false);
+        const afBox = ref();
         const selectedField = ref<IAppFields>({
             app: undefined,
             fields: []
         });
-        if (props.modelValue && "app" in props.modelValue && "fields" in props.modelValue) {
+        if (props.modelValue && 'app' in props.modelValue && 'fields' in props.modelValue) {
             selectedField.value = props.modelValue as IAppFields;
         }
         const store = useFlowEditorStore();
@@ -123,17 +124,28 @@ export default defineComponent({
         const removeField = (index: number) => {
             selectedField.value.fields.splice(index, 1);
         }
+
+        const closeAFBox = (val: string) => {
+            if (val == 'OK') {
+                console.log(afBox.value);
+                
+                selectedField.value = afBox.value.selField;
+            }
+        };
+
         watchEffect(() => {
             emit('update:modelValue', selectedField.value);
         });
 
         return {
             store,
+            afBox,
             show,
             showDg: () => { show.value = true },
             selectedField,
             clear,
             removeField,
+            closeAFBox,
         };
     }
 });