アプリ選択コンポーネントがある場合、アプリまたはフィールドが選択されるまで、それらを無効にすることができる。

frontend/src/components/right/ConditionInput.vue

@@ -4,7 +4,8 @@
       <template v-slot:control>
         <q-card flat class="full-width">
           <q-card-actions vertical>
-            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
+            <q-btn color="grey-3" text-color="black" :disable="btnDisable" @click="showDg()">クリックで設定：{{ isSetted ?
+              '設定済み' : '未設定' }}</q-btn>
           </q-card-actions>
           <q-card-section class="text-caption">
             <div v-if="!isSetted">{{ placeholder }}</div>
@@ -28,6 +29,10 @@ type Props = {
   props?: {
     name: string;
     modelValue?: {
+      app: {
+        id: string;
+        name: string;
+      },
       fields: {
         type: string;
         label: string;
@@ -72,21 +77,39 @@ export default defineComponent({
     sourceType: {
       type: String,
       default: 'field'
+    },
+    onlySourceSelect: {
+      type: Boolean,
+      default: false
     }
   },
 
   setup(props, { emit }) {
     const source = props.context.find(element => element?.props?.name === 'sources')
-    
+
     if (source) {
-      if(props.sourceType === 'field'){
+      if (props.sourceType === 'field') {
-        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+        provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
-      } else if(props.sourceType === 'app'){
+      } else if (props.sourceType === 'app') {
-        console.log('sourceApp', source.props?.modelValue);
+        provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
-        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
       }
     }
 
+    const btnDisable = computed(() => {
+      const onlySourceSelect = props.onlySourceSelect;
+
+      if (!onlySourceSelect) {
+        return false;
+      }
+
+      if (props.sourceType === 'field') {
+        return source?.props?.modelValue?.fields?.length ?? 0 > 0;
+      } else if (props.sourceType === 'app') {
+        return source?.props?.modelValue?.app?.id ? false : true
+      }
+      return true;
+    })
+
     const appDg = ref();
     const show = ref(false);
     const tree = reactive(new ConditionTree());
@@ -127,7 +150,8 @@ export default defineComponent({
       showDg,
       onClosed,
       tree,
-      conditionString
+      conditionString,
+      btnDisable
     };
   }
 });

frontend/src/components/right/DataMapping.vue

@@ -4,7 +4,8 @@
             <template v-slot:control>
                 <q-card flat class="full-width">
                     <q-card-actions vertical>
-                        <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+                        <q-btn color="grey-3" text-color="black" :disable="btnDisable"
+                            @click="() => { dgIsShow = true }">クリックで設定</q-btn>
                     </q-card-actions>
                     <q-card-section class="text-caption">
                         <div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
@@ -74,10 +75,21 @@ import ShowDialog from '../ShowDialog.vue';
 import AppFieldSelectBox from '../AppFieldSelectBox.vue';
 import IAppFields from './AppFieldSelect.vue';
 
+type Props = {
+    props?: {
+        name: string;
+        modelValue?: {
+            app: {
+                id: string;
+                name: string;
+            }
+        }
+    }
+};
 type ValueType = {
     id: string;
     from: object;
-    to: IAppFields & {
+    to: typeof IAppFields & {
         isDialogVisible: boolean;
     };
 }
@@ -93,7 +105,10 @@ export default defineComponent({
         AppFieldSelectBox
     },
     props: {
-
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
         displayName: {
             type: String,
             default: '',
@@ -109,6 +124,10 @@ export default defineComponent({
             type: String,
             default: '',
         },
+        onlySourceSelect: {
+            type: Boolean,
+            default: false
+        }
     },
 
     setup(props, { emit }) {
@@ -143,6 +162,15 @@ export default defineComponent({
                     })
                 : []
         );
+
+        const source = props.context.find(element => element?.props?.name === 'sources')
+
+        const sourceApp = computed(() => source?.props?.modelValue?.app);
+
+        const sourceAppId = computed(() => sourceApp.value?.id);
+
+        const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
+
         //集計処理方法
 
         watchEffect(() => {
@@ -158,6 +186,9 @@ export default defineComponent({
             addMappingObject: () => mappingProps.push(defaultMappingProp()),
             deleteMappingObject,
             mappingObjectsInputDisplay,
+            sourceApp,
+            sourceAppId,
+            btnDisable
         };
     },
 });