fix dropdown items

vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue

@@ -55,6 +55,7 @@ const columns = reactive([
             subTableCode: '', //table.value,
             baseFilter: undefined,
             defaultLabel: 'すべてのレコード',
+            needAllSubTableField: true,
           }),
         ),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.field || ''),

vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue

@@ -23,12 +23,10 @@ const table = computed(() => selectedAppData.table.table);
 
 const filterFunc = {
   connect: {
-    subTable: table,
     left: (right?: OneOf | '') => getLeftAvailableJoinType(right),
     right: (left?: OneOf | '') => getRightAvailableJoinType(left),
   },
   mapping: {
-    subTable: computed(() => ''),
     left: (right?: OneOf | '') => getLeftAvailableMappingType(right),
     right: (left?: OneOf | '') => getRightAvailableMappingType(left),
   },
@@ -47,7 +45,7 @@ const columns = reactive([
         items: computed(() => {
           const dependFilterField = getField('rightField', rowData.id);
           return getFieldsDropdownItems(selectedAppData.appFields, {
-            subTableCode: filterFunc[props.type].subTable.value,
+            subTableCode: table.value,
             baseFilter: filterFunc[props.type].left() as FieldType[],
             filterType: filterFunc[props.type].left(dependFilterField),
             dependFilterField,
@@ -92,7 +90,6 @@ const columns = reactive([
             filterType: filterFunc[props.type].right(dependFilterField),
             dependFilterField,
             defaultDisableCallback: props.type === 'connect' ? isRightJoinForceDisable : undefined,
-            needSubTableField:false
           });
         }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || ''),
@@ -115,7 +112,7 @@ function getField(key: 'leftField' | 'rightField', id: string) {
   const dataRow = search(props.modelValue, id) as FieldsJoinMapping | undefined;
   const fieldCode = dataRow ? dataRow[key] || '' : '';
   const targetFieldMap = key === 'leftField' ? selectedAppData.appFields : cachedData.currentAppFields;
-  const targetTable = key === 'leftField' ? filterFunc[props.type].subTable.value : '';
+  const targetTable = key === 'leftField' ? table.value : '';
   return getFieldObj(fieldCode, targetFieldMap, targetTable);
 }
 </script>

vue-project/my-kintone-plugin/src/css/config.css

@@ -145,6 +145,10 @@
   height: 55px;
   align-items: center;
 }
+.plugin-kuc-table:not(.condition-table) > table > tbody > tr > td:nth-child(2) {
+  --kuc-table-header-1-width: 30px;
+  text-align: center;
+}
 
 .condition-table > table > tbody > tr > td[style]:not(:first-child),
 .condition-table > table > thead > tr > th[style]:not(:first-child) {

vue-project/my-kintone-plugin/src/js/helper.ts

@@ -76,8 +76,10 @@ function flatFields(fields: Properties) {
   Object.values(fields).forEach((field) => {
     if (isType.SUBTABLE(field)) {
       Object.values(field.fields).forEach((subField) => {
-        const copy = JSON.parse(JSON.stringify(subField)) as typeof subField;
+        const copy = JSON.parse(JSON.stringify(subField)) as typeof subField & {originLabel:string, tableCode:string};
-        copy.label = '[' + field.code + '].' + subField.label;
+        copy.label = '[' + field.label + '].' + subField.label;
+        copy.originLabel = subField.label;
+        copy.tableCode = field.code;
         subtableFields[subField.code] = copy;
       });
     }
@@ -93,7 +95,7 @@ type Param = {
   dependFilterField?: OneOf;
   defaultLabel?: string;
   defaultDisableCallback?: (field: OneOf) => boolean;
-  needSubTableField?: boolean;
+  needAllSubTableField?: boolean;
 };
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
@@ -104,25 +106,12 @@ export const getFieldsDropdownItems = (
     dependFilterField,
     defaultLabel,
     defaultDisableCallback,
-    needSubTableField = true,
+    needAllSubTableField = false,
   }: Param,
 ) => {
   // get used field codes
-  let fieldOrder: string[];
+  const fieldOrder = extractFields(layout, baseFilter, !!needAllSubTableField, subTableCode);
-  let fieldMap = fields;
+  const fieldMap = fields;
-  if (subTableCode) {
-    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTableCode) as any;
-    fieldOrder =
-      subTableFields?.fields.map((field: OneOf) => {
-        if (!baseFilter) return field.code;
-        return baseFilter.find((t) => t === field.type) ? field.code : '';
-      }) || [];
-
-    const subTableFieldMap = fieldMap[subTableCode] as { fields: Record<string, any> } | undefined;
-    fieldMap = subTableFieldMap?.fields || {};
-  } else {
-    fieldOrder = extractNoSubTableFields(layout, baseFilter, !!needSubTableField);
-  }
 
   // create labels
   const labels: ComboboxItem[] = [
@@ -170,11 +159,11 @@ export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?:
   );
 };
 
-const extractNoSubTableFields = (layout: Layout, baseFilter: FieldType[] | undefined, needSubTableField: boolean) => {
+const extractFields = (layout: Layout, baseFilter: FieldType[] | undefined, needAllSubTableField: boolean, subTableCode?: string) => {
   return layout.reduce((acc, each) => {
     if (each.type === 'GROUP') {
-      acc.push(...extractNoSubTableFields(each.layout, baseFilter, needSubTableField));
+      acc.push(...extractFields(each.layout, baseFilter, needAllSubTableField, subTableCode));
-    } else if (each.type === 'ROW' || (needSubTableField && each.type === 'SUBTABLE')) {
+    } else if (each.type === 'ROW' || (!needAllSubTableField && each.code === subTableCode) || (needAllSubTableField && each.type === 'SUBTABLE')) {
       acc.push(
         ...each.fields.map((field) => {
           if (!('code' in field)) return '';