From 3cc4b654603325d531bc4530408044beafa88ad4 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 27 May 2024 19:03:08 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=83=97=E3=83=AA=E9=81=B8=E6=8A=9E?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=8C=E3=81=82=E3=82=8B=E5=A0=B4=E5=90=88=E3=80=81=E3=82=A2?=
 =?UTF-8?q?=E3=83=97=E3=83=AA=E3=81=BE=E3=81=9F=E3=81=AF=E3=83=95=E3=82=A3?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=83=89=E3=81=8C=E9=81=B8=E6=8A=9E=E3=81=95?=
 =?UTF-8?q?=E3=82=8C=E3=82=8B=E3=81=BE=E3=81=A7=E3=80=81=E3=81=9D=E3=82=8C?=
 =?UTF-8?q?=E3=82=89=E3=82=92=E7=84=A1=E5=8A=B9=E3=81=AB=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7=E3=81=8D=E3=82=8B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/right/ConditionInput.vue   | 40 +++++++++++++++----
 frontend/src/components/right/DataMapping.vue | 37 +++++++++++++++--
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/right/ConditionInput.vue b/frontend/src/components/right/ConditionInput.vue
index 966339a..a9273a3 100644
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/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'){
-        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
-      } else if(props.sourceType === 'app'){
-        console.log('sourceApp', source.props?.modelValue);
-        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
+      if (props.sourceType === 'field') {
+        provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
+      } else if (props.sourceType === 'app') {
+        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
     };
   }
 });
diff --git a/frontend/src/components/right/DataMapping.vue b/frontend/src/components/right/DataMapping.vue
index d26b6ed..f2111d8 100644
--- a/frontend/src/components/right/DataMapping.vue
+++ b/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
         };
     },
 });