Merged PR 56: bug537:配置スペース自動全チェック問題修正

ボタン配置スペース自動全選択の問題修正
原因：スペースのラベル名は同じ場合、選択キーはラベルが設定さてているため、特定できなくなる。
対策：スペースはUniqIDを自動付けることで区別できるように修正しました。

Related work items: #537

frontend/src/components/FieldList.vue

@@ -7,12 +7,13 @@
 <script lang="ts">
 import { useAsyncState } from '@vueuse/core';
 import { api } from 'boot/axios';
-import { computed } from 'vue';
+import { computed ,Prop,PropType} from 'vue';
+import {IField} from 'src/types/ComponentTypes'
 
 export default {
   name: 'FieldList',
   props: {
-    fields: Array,
+    fields: Array as PropType<IField[]>,
     name: String,
     type: String,
     appId: Number,
@@ -33,15 +34,15 @@ export default {
 
     const { state : rows, isReady: isLoaded, isLoading } = useAsyncState((args) => {
       if (props.fields && Object.keys(props.fields).length > 0) {
-        return props.fields.map(f => ({ name: f.label, objectType: 'field', ...f }));
+        return props.fields.map(f => ({ name: f.label,  ...f ,objectType: 'field'}));
       } else {
         return api.get('api/v1/appfields', {
           params: {
             app: props.appId
           }
         }).then(res => {
-          console.log(res);
-          return Object.values(res.data.properties).map(f => ({ name: f.label, objectType: 'field', ...f }));
+          const fields = res.data.properties;
+          return Object.values(fields).map(f => ({ name: fields.label, objectType: 'field', ...fields }));
         });
       }
     }, [{ name: '', objectType: '', type: '', code: '', label: '' }])

frontend/src/components/FieldSelect.vue

@@ -3,7 +3,7 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner color="primary" size="3em" />
     </div>
-    <q-table  flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+    <q-table  flat bordered v-else row-key="id" :selection="type" v-model:selected="selected" :columns="columns"
       :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
   </div>
 </template>
@@ -26,7 +26,7 @@ export default {
       default: false,
     },
     selectedFields:{
-      type:Array,
+      type:Array ,
       default:()=>[]
     },
     fieldTypes:{
@@ -44,7 +44,7 @@ export default {
       { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
       { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
-    ]
+    ];
     const pageSetting = ref({
       sortBy: 'desc',
       descending: false,
@@ -63,12 +63,12 @@ export default {
         }
       });
       let fields = res.data.properties;
-      Object.keys(fields).forEach((key) => {
+      Object.keys(fields).forEach((key,index) => {
         const fld = fields[key];
         if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
-          rows.push({ name: fld.label || fld.code, ...fld });
+          rows.push({id:index, name: fld.label || fld.code, ...fld });
         }else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
-          rows.push({ name: fld.label || fld.code, ...fld });
+          rows.push({id:index, name: fld.label || fld.code, ...fld });
         }
 
       });

frontend/src/components/right/FieldInput.vue

@@ -23,7 +23,7 @@
                 </template>
             </q-input>
         </template>
-      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes" :filter="filter"></field-select>
+      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :selectedFields="selectedFields" :fieldTypes="fieldTypes" :filter="filter"></field-select>
     </show-dialog>
   </div>
 </template>
@@ -80,6 +80,7 @@ export default defineComponent({
     const appDg = ref();
     const show = ref(false);
     const selectedField = ref(props.modelValue);
+    const selectedFields =ref(!props.modelValue?[]: [props.modelValue]);
     const store = useFlowEditorStore();
     const isSelected = computed(() => {
       return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
@@ -108,6 +109,7 @@ export default defineComponent({
       selectedField,
       isSelected,
       filter:ref(''),
+      selectedFields
     };
   }
 });