feat:データマッピングアクション変更

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="selectedField?.app && !showSelectApp">{{ selectedField.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 && selectedField.app?.name">
+    <div v-if="!showSelectApp && selField.app?.name">
         <div>
             <div class="row q-mb-md">
                 <!-- <div class="col"> -->
@@ -32,8 +32,8 @@
             </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>
+                    :appId="selField.app?.id" not_page :filter="fieldFilter"
+                    :selFields="selField.fields"></field-select>
             </div>
         </div>
     </div>
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, watchEffect, computed } 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';
@@ -85,7 +85,7 @@ export default defineComponent({
         AppSelectBox,
     },
     props: {
-        selectedField: {
+      selectedField: {
             type: Object,
             required: true
         },
@@ -99,39 +99,39 @@ export default defineComponent({
         const appDlg = ref();
         const fieldDlg = ref();
         const showSelectApp = ref(false);
-        const selectedField = props.selectedField;
+        const selField = reactive(props.selectedField);
         console.log(props.selectedField);
-        
+
         const store = useFlowEditorStore();
 
         const isSelected = computed(() => {
-            return selectedField !== null && typeof selectedField === 'object' && ('app' in selectedField)
+            return selField !== null && typeof selField === 'object' && ('app' in selField)
         });
 
 
         const closeAppDlg = (val: string) => {
             if (val == 'OK') {
-                selectedField.app = appDlg.value.selected[0];
-                selectedField.fields = [];
+                selField.app = appDlg.value.selected[0];
+                selField.fields = [];
                 showSelectApp.value = false;
             }
         };
 
         const closeFieldDialog = (val: string) => {
             if (val == 'OK') {
-                selectedField.fields = fieldDlg.value.selected;
+                selField.fields = fieldDlg.value.selected;
             }
         };
         const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
-            selectedField.app = newAppinfo
+            selField.app = newAppinfo
         }
 
         const updateItems = (newFields: IField[]) => {
-            selectedField.fields = newFields
+            selField.fields = newFields
         }
 
         watchEffect(() => {
-            emit('update:modelValue', selectedField);
+            emit('update:modelValue', selField);
         });
 
         return {
@@ -145,6 +145,7 @@ export default defineComponent({
             filter: ref(),
             updateItems,
             fieldFilter: ref(),
+            selField
         };
     }
 });

frontend/src/components/right/AppSelect.vue

@@ -4,7 +4,7 @@
             <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 }">APP SELECT</q-btn>
+                        <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
                     </q-card-actions>
                     <q-card-section class="text-caption">
                         <div v-if="selectedField.app.name">

frontend/src/components/right/DataMapping.vue

@@ -16,7 +16,7 @@
                 </q-card>
             </template>
         </q-field>
-        <show-dialog v-model:visible="dgIsShow" name="DataMapping" @close="closeDg" min-width="50vw" min-height="60vh">
+        <show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
 
             <div class="q-mx-md">
                 <div class="row q-col-gutter-x-xs flex-center">

frontend/src/components/right/DataProcessing.vue

@@ -203,10 +203,10 @@ export default defineComponent({
         "operator": "COUNT",
         "label": "カウント"
       },
-      // {
-      //   "operator": "FIRST",
-      //   "label": "最初の値"
-      // }
+      {
+        "operator": "FIRST",
+        "label": "最初の値"
+      }
     ]);
 
     watchEffect(() => {