コードのコメントとその他のコンテンツの追加

frontend/src/components/right/DataMapping.vue

@@ -26,13 +26,13 @@
                     <!-- <div class="col-1">
                     </div> -->
                     <div class="col-5">
-                        <div class="row justify-between q-mx-sm">
+                        <div class="row justify-between q-mr-md">
                             <div class="">目標</div>
                             <q-btn outline color="primary" size="xs" label="最新のフィールドを取得する"
                                 @click="() => updateFields(sourceAppId!)" />
                         </div>
                     </div>
-                    <div class="col-1 q-pl-md">
+                    <div class="col-1 q-pl-sm">
                         キー
                     </div>
                 </div>
@@ -98,7 +98,7 @@ import ConditionObject from '../ConditionEditor/ConditionObject.vue';
 import ShowDialog from '../ShowDialog.vue';
 import AppFieldSelectBox from '../AppFieldSelectBox.vue';
 import FieldSelect from '../FieldSelect.vue';
-import IAppFields from './AppFieldSelect.vue';
+import { IApp, IField } from './AppFieldSelect.vue';
 import { api } from 'boot/axios';
 
 type ContextProps = {
@@ -120,8 +120,10 @@ type CurrentModelValueType = {
 
 type MappingValueType = {
     id: string;
-    from: object;
+    from: { sharedText?: string };
-    to: typeof IAppFields & {
+    to: {
+        app?: IApp,
+        fields: (IField & { label?: string })[]
         isDialogVisible: boolean;
     };
     isKey: boolean;
@@ -180,55 +182,56 @@ export default defineComponent({
             emit('update:modelValue', { data: mappingProps.value, createWithNull: createWithNull.value });
         }
 
-        const mappingProps = computed(() => props.modelValue?.data ?? []);
+        const mappingProps = ref(props.modelValue?.data ?? []);
 
         const createWithNull = ref(props.modelValue?.createWithNull ?? false)
 
-        watch(() => sourceAppId.value, async (newId, ) => {
+        // 外部ソースコンポーネントの appid をリッスンし、変更されたときに現在のコンポーネントを更新します
+        watch(() => sourceAppId.value, async (newId,) => {
             if (!newId) return;
             updateFields(newId)
         })
 
         const updateFields = async (sourceAppId: string) => {
-            const modelValueData = props.modelValue?.data ?? [];
-
             const ktAppFields = await api.get('api/v1/appfields', {
                 params: {
                     app: sourceAppId
                 }
             }).then(res => {
                 return Object.values(res.data.properties)
+                    // kintoneのデフォルトの非表示フィールドフィルタリング
                     .filter(f => !blackListLabelName.find(label => f.label === label))
                     .map(f => ({ name: f.label, objectType: 'field', ...f }))
                     .map(f => {
-                        const beforeData = modelValueData.find(m => m.to.fields[0].code === f.code)
+                        // 更新前の値を求める
+                        const beforeData = mappingProps.value.find(m => m.to.fields[0].code === f.code)
                         return {
                             id: uuidv4(),
-                            from: beforeData?.from ?? {},
+                            from: beforeData?.from ?? {}, // 以前のデータを入力します
                             to: {
                                 app: sourceApp.value,
                                 fields: [f],
                                 isDialogVisible: false
                             },
-                            isKey: beforeData?.isKey ?? false,
+                            isKey: beforeData?.isKey ?? false, // 以前のデータを入力します
                             disabled: false
                         }
                     })
             })
 
+            // 「ルックアップ」によってロックされているフィールドを検索する
             const lookupFixedField = ktAppFields
                 .filter(field => field.to.fields[0].lookup !== undefined)
                 .flatMap(field => field.to.fields[0].lookup.fieldMappings.map((m) => m.field))
 
+            // 「ルックアップ」でロックされたビューコンポーネントを非対話型に設定します
             if (lookupFixedField.length > 0) {
                 ktAppFields.filter(f => lookupFixedField.includes(f.to.fields[0].code)).forEach(f => f.disabled = true)
             }
 
-            emit('update:modelValue', { data: ktAppFields, createWithNull: createWithNull });
+            mappingProps.value = ktAppFields
         }
 
-        console.log(createWithNull.value);
-
         const mappingObjectsInputDisplay = computed(() =>
             (mappingProps.value && Array.isArray(mappingProps.value)) ?
                 mappingProps.value
@@ -270,6 +273,5 @@ export default defineComponent({
     },
 });
 
-
 </script>
 <style lang="scss"></style>