データ・マッピング・コンポーネントの追加

frontend/src/components/right/DataMapping.vue

@@ -0,0 +1,165 @@
+<template>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <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-card-actions>
+                    <q-card-section class="text-caption">
+                        <div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
+                            <div v-for="(item) in mappingObjectsInputDisplay" :key="item">{{ item }}</div>
+                        </div>
+                        <div v-else>{{ placeholder }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+        <show-dialog v-model:visible="dgIsShow" name="DataMapping" @close="closeDg" min-width="50vw" min-height="60vh">
+
+            <div class="q-mx-md">
+                <div class="row q-col-gutter-x-xs flex-center">
+                    <div class="col-5">
+                        <div class="q-mx-xs">From</div>
+                    </div>
+                    <div class="col-1">
+                    </div>
+                    <div class="col-5">
+                        <div class="q-mx-xs">To</div>
+                    </div>
+                    <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" />
+                    </div>
+                </div>
+                <div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id">
+                    <div class="row q-col-gutter-x-xs flex-center">
+                        <div class="col-5">
+                            <ConditionObject v-model="item.from" />
+                        </div>
+                        <div class="col-1">
+                        </div>
+                        <div class="col-5">
+                            <q-field v-model="item.vName" type="text" outlined dense>
+                                <template v-slot:append>
+                                    <q-icon name="search" class="cursor-pointer"
+                                        @click="() => { mappingProps[index].to.isDialogVisible = true }" />
+                                </template>
+                                <template v-slot:control>
+                                    <div class="self-center full-width no-outline" tabindex="0"
+                                        v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
+                                        {{ `${item.to.app?.name} : ${item.to.fields[0].label}` }}
+                                    </div>
+                                </template>
+                            </q-field>
+                        </div>
+                        <div class="col-1">
+                            <q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
+                        </div>
+                    </div>
+
+                    <show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
+                        @close="closeToDg" ref="fieldDlg">
+                        <AppFieldSelectBox v-model:selectedField="mappingProps[index].to" />
+                    </show-dialog>
+                </div>
+            </div>
+        </show-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import { v4 as uuidv4 } from 'uuid';
+import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
+import ConditionObject from '../ConditionEditor/ConditionObject.vue';
+import ShowDialog from '../ShowDialog.vue';
+import AppFieldSelectBox from '../AppFieldSelectBox.vue';
+import IAppFields from './AppFieldSelect.vue';
+
+type ValueType = {
+    id: string;
+    from: object;
+    to: IAppFields & {
+        isDialogVisible: boolean;
+    };
+}
+
+const defaultMappingProp = () => ({ id: uuidv4(), to: { app: {}, fields: [], isDialogVisible: false } });
+
+export default defineComponent({
+    name: 'DataMapping',
+    inheritAttrs: false,
+    components: {
+        ShowDialog,
+        ConditionObject,
+        AppFieldSelectBox
+    },
+    props: {
+
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object as () => ValueType[],
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup(props, { emit }) {
+        const closeDg = () => {
+            emit('update:modelValue', mappingProps
+            );
+        }
+
+        const closeToDg = () => {
+            emit('update:modelValue', mappingProps
+            );
+        }
+
+        const mappingProps: ValueType[] = props.modelValue
+            ? props.modelValue
+            : reactive([defaultMappingProp()]);
+
+
+        const deleteMappingObject = (index: number) => mappingProps.length === 1
+            ? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
+            : mappingProps.splice(index, 1);
+
+        const mappingObjectsInputDisplay = computed(() =>
+            mappingProps ?
+                mappingProps
+                    .filter(item => item.from?.name && item.to.fields?.length > 0)
+                    .map(item => {
+                        const name = typeof item.from?.name === 'string'
+                            ? item.from.name
+                            : item.from?.name.name;
+                        return `[${name}] - (${item.to.app?.name} : ${item.to.fields[0].label})`;
+                    })
+                : []
+        );
+        //集計処理方法
+
+        watchEffect(() => {
+            emit('update:modelValue', mappingProps);
+        });
+        return {
+            uuidv4,
+            dgIsShow: ref(false),
+            closeDg,
+            toDgIsShow: ref(false),
+            closeToDg,
+            mappingProps,
+            addMappingObject: () => mappingProps.push(defaultMappingProp()),
+            deleteMappingObject,
+            mappingObjectsInputDisplay,
+        };
+    },
+});
+</script>
+<style lang="scss"></style>

frontend/src/components/right/PropertyList.vue

@@ -22,6 +22,7 @@ import EventSetter from '../right/EventSetter.vue';
 import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
+import DataMapping from './DataMapping.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -37,7 +38,8 @@ export default defineComponent({
     EventSetter,
     ColorPicker,
     NumInput,
-    DataProcessing
+    DataProcessing,
+    DataMapping
   },
   props: {
     nodeProps: {