AppFieldSelectコンポーネントは、パブリック部分をAppFieldSelectBoxとして抽出する。

frontend/src/components/AppFieldSelectBox.vue

@@ -0,0 +1,151 @@
+<template>
+
+    <div class="q-mx-md q-mb-lg">
+        <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="selectedField?.app && !showSelectApp">{{ selectedField.app?.name }}</div>
+            <q-space />
+            <div>
+                <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
+                    showSelectApp = true;
+                }"></q-btn>
+            </div>
+        </div>
+    </div>
+
+    <div v-if="!showSelectApp && selectedField.app?.name">
+        <div>
+            <div class="row q-mb-md">
+                <!-- <div class="col"> -->
+                <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
+                <!-- </div> -->
+                <q-space />
+                <!-- <div class="col"> -->
+                <div class="q-mr-md">
+                    <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
+                        <template v-slot:before>
+                            <q-icon name="search" />
+                        </template>
+                    </q-input>
+                </div>
+            </div>
+            <div class="row">
+                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                    :appId="selectedField.app?.id" not_page :filter="fieldFilter"
+                    :selectedFields="selectedField.fields"></field-select>
+            </div>
+        </div>
+    </div>
+    <div style="min-width: 45vw;" v-else>
+    </div>
+
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
+        <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>
+
+        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+    </show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import ShowDialog from './ShowDialog.vue';
+import FieldSelect from './FieldSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import AppSelect from './AppSelect.vue';
+interface IApp {
+    id: string,
+    name: string
+}
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+
+interface IAppFields {
+    app?: IApp,
+    fields: IField[]
+}
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppFieldSelectBox',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelect,
+    },
+    props: {
+        selectedField: {
+            type: Object,
+            required: true
+        },
+        selectType: {
+            type: String,
+            default: 'single'
+        },
+
+    },
+    setup(props, { emit }) {
+        const appDlg = ref();
+        const fieldDlg = ref();
+        const showSelectApp = ref(false);
+        const selectedField = props.selectedField;
+        console.log(props.selectedField);
+        
+        const store = useFlowEditorStore();
+
+        const isSelected = computed(() => {
+            return selectedField !== null && typeof selectedField === 'object' && ('app' in selectedField)
+        });
+
+
+        const closeAppDlg = (val: string) => {
+            if (val == 'OK') {
+                selectedField.app = appDlg.value.selected[0];
+                selectedField.fields = [];
+                showSelectApp.value = false;
+            }
+        };
+
+        const closeFieldDialog = (val: string) => {
+            if (val == 'OK') {
+                selectedField.fields = fieldDlg.value.selected;
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
+            selectedField.app = newAppinfo
+        }
+
+        const updateItems = (newFields: IField[]) => {
+            selectedField.fields = newFields
+        }
+
+        watchEffect(() => {
+            emit('update:modelValue', selectedField);
+        });
+
+        return {
+            appDlg,
+            fieldDlg,
+            closeAppDlg,
+            closeFieldDialog,
+            showSelectApp,
+            isSelected,
+            updateExternalSelectAppInfo,
+            filter: ref(),
+            updateItems,
+            fieldFilter: ref(),
+        };
+    }
+});
+</script>

frontend/src/components/right/AppFieldSelect.vue

@@ -18,121 +18,68 @@
             <q-separator />
             <q-card-section class="q-pa-none q-ma-none">
                 <div style="">
-                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
-                      <q-list bordered>
-                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
-                            <q-item :key="index" dense clickable >
-                                <q-item-section>
+                    <div v-if="selectedField.fields && selectedField.fields.length > 0">
+                        <q-list bordered>
+                            <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator
+                                v-slot="{ item, index }">
+                                <q-item :key="index" dense clickable>
+                                    <q-item-section>
                                         <q-item-label>
                                             {{ item.label }}
                                         </q-item-label>
-                                </q-item-section>
-                                <q-item-section side>
-                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
-                                </q-item-section>
-                            </q-item>
-                        </q-virtual-scroll>
-                      </q-list>
+                                    </q-item-section>
+                                    <q-item-section side>
+                                        <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+                                    </q-item-section>
+                                </q-item>
+                            </q-virtual-scroll>
+                        </q-list>
                     </div>
                     <!-- <div v-else class="row q-mt-lg">
                     </div> -->
                 </div>
                 <!-- <q-separator /> -->
             </q-card-section>
-            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
+            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length === 0">
                 <div class="row">
                     <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
                     <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
                 </div>
             </q-card-section>
         </q-card>
-     </div>
-
+    </div>
     <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">
-
-        <div class="q-mx-md q-mb-lg">
-            <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="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
-                <q-space />
-                <div>
-                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
-                        showSelectApp = true;
-                    }"></q-btn>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="!showSelectApp && selectedField.app?.name">
-            <div>
-                <div class="row q-mb-md">
-                    <!-- <div class="col"> -->
-                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
-                    <!-- </div> -->
-                    <q-space />
-                    <!-- <div class="col"> -->
-                    <div class="q-mr-md">
-                      <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
-                          <template v-slot:before>
-                              <q-icon name="search" />
-                          </template>
-                      </q-input>
-                    </div>
-                </div>
-                <div class="row">
-                    <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
-                        :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
-                </div>
-            </div>
-        </div>
-        <div style="min-width: 45vw;" v-else>
-        </div>
-
-    </show-dialog>
-
-    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
-        <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>
-
-        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+        <AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" />
     </show-dialog>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed } from 'vue';
+import { defineComponent, ref, watchEffect } from 'vue';
+import AppFieldSelectBox from '../AppFieldSelectBox.vue';
 import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import AppSelect from '../AppSelect.vue';
-interface IApp{
-  id:string,
-  name:string
+
+export interface IApp {
+    id: string,
+    name: string
 }
-interface IField {
+export interface IField {
     name: string,
     code: string,
     type: string
 }
 
-interface IAppFields{
-   app?:IApp,
-   fields:IField[]
+export interface IAppFields {
+    app?: IApp,
+    fields: IField[]
 }
 
 export default defineComponent({
-    inheritAttrs:false,
+    inheritAttrs: false,
     name: 'AppFieldSelect',
     components: {
         ShowDialog,
-        FieldSelect,
-        AppSelect,
+        AppFieldSelectBox
     },
     props: {
         displayName: {
@@ -151,62 +98,30 @@ export default defineComponent({
             type: Object,
             default: null
         },
-        selectType:{
-            type:String,
-            default:'single'
+        selectType: {
+            type: String,
+            default: 'single'
         }
     },
     setup(props, { emit }) {
-        const appDlg = ref();
-        const fieldDlg = ref();
         const show = ref(false);
-        const showSelectApp = ref(false);
-       const selectedField = ref<IAppFields>({
-          app:undefined,
-          fields:[]
-       });
-       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
-         selectedField.value=props.modelValue as IAppFields;
-       }
+        const selectedField = ref<IAppFields>({
+            app: undefined,
+            fields: []
+        });
+        if (props.modelValue && "app" in props.modelValue && "fields" in props.modelValue) {
+            selectedField.value = props.modelValue as IAppFields;
+        }
         const store = useFlowEditorStore();
 
-        const isSelected = computed(() => {
-            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
-        });
-
-        const showDg = () => {
-            show.value = true;
-        };
-
         const clear = () => {
-            selectedField.value ={
-              fields:[]
-            } ;
+            selectedField.value = {
+                fields: []
+            };
         }
 
-        const closeAppDlg = (val: string) => {
-            if (val == 'OK') {
-                selectedField.value.app = appDlg.value.selected[0];
-                selectedField.value.fields=[];
-                showSelectApp.value=false;
-            }
-        };
-
-        const closeFieldDialog=(val:string)=>{
-          if (val == 'OK') {
-                selectedField.value.fields = fieldDlg.value.selected;
-            }
-        };
-        const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
-          // selectedField.value.app = newAppinfo
-        }
-
-        const updateItems = (newFields:IField[]) => {
-          // selectedField.value.fields = newFields
-        }
-
-        const removeField=(index:number)=>{
-          selectedField.value.fields.splice(index,1);
+        const removeField = (index: number) => {
+            selectedField.value.fields.splice(index, 1);
         }
         watchEffect(() => {
             emit('update:modelValue', selectedField.value);
@@ -214,21 +129,11 @@ export default defineComponent({
 
         return {
             store,
-            appDlg,
-            fieldDlg,
             show,
-            showDg,
-            closeAppDlg,
-            closeFieldDialog,
+            showDg: () => { show.value = true },
             selectedField,
-            showSelectApp,
-            isSelected,
-            updateExternalSelectAppInfo,
-            filter: ref(),
-            updateItems,
             clear,
-            fieldFilter: ref(),
-            removeField
+            removeField,
         };
     }
 });