fix join UI

vue-project/my-kintone-plugin/src/components/Config.vue

@@ -18,8 +18,8 @@
   <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
+import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition, getMeta } from '@/js/helper';
-import { isType, type OneOf } from '@/js/kintone-rest-api-client';
+import { isType, type OneOf, type Properties } from '@/js/kintone-rest-api-client';
 import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
 import type { Spinner } from 'kintone-ui-component';
 
@@ -75,16 +75,7 @@ function save() {
   const currentAppMeta = cachedData.currentAppFields.fields;
   const convertJoinTables = JSON.parse(JSON.stringify(data.joinTables)) as JoinTable<OneOf | string>[];
   convertJoinTables.forEach((item) => {
-    let meta = item.meta;
+    const meta = getMeta(item.meta as Properties, item.table);
-    if (!meta) {
-      return;
-    }
-    if (item.table) {
-      const table = meta[item.table];
-      if (isType.SUBTABLE(table)) {
-        meta = table.fields;
-      }
-    }
 
     // Process onConditions
     item.onConditions.forEach((condition) => {

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

@@ -16,11 +16,11 @@
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
-        <plugin-table-connect-row connector="=" :modelValue="table.onConditions" />
+        <plugin-table-connect-row connector="=" type="connect" :modelValue="table.onConditions" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="取得フィールド" />
-        <plugin-table-connect-row connector="→" :modelValue="table.fieldsMapping" />
+        <plugin-table-connect-row connector="→" type="mapping" :modelValue="table.fieldsMapping" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="絞込条件" />

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

@@ -32,10 +32,11 @@ const columns = reactive([
         items: computed(() =>
           getFieldsDropdownItems(selectedAppData.appFields, {
             subTableCode: table.value,
+            baseFilter: undefined,
             defaultLabel: 'すべてのレコード',
           }),
         ),
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.field || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.field || ''),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,

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

@@ -5,18 +5,38 @@
 <script setup lang="ts">
 import type { CachedData, CachedSelectedAppData, FieldsJoinMapping, WhereCondition } from '@/types/model';
 import { defineProps, inject, computed, reactive, render, h, watch } from 'vue';
-import { generateId, getFieldsDropdownItems, search } from '@/js/helper';
+import { generateId, getFieldObj, getFieldsDropdownItems, isLeftCalcJoinType, search } from '@/js/helper';
 import TableCombobox from './TableCombobox.vue';
+import { getLeftAvailableJoinType, getRightAvailableJoinType, isForceDisable } from '@/js/join';
+import { isType, type FieldType, type OneOf } from '@/js/kintone-rest-api-client';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
+  type: 'connect' | 'mapping';
 }>();
 
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 const table = computed(() => selectedAppData.table.table);
 
+const filterFunc = {
+  connect: {
+    left: (right?: OneOf | '') => getLeftAvailableJoinType(right),
+    right: (left?: OneOf | '') => {
+      const filterType = getRightAvailableJoinType(left);
+      if (left && isType.CALC(left) && isLeftCalcJoinType(filterType)) {
+        return filterType[left.format];
+      }
+      return filterType as FieldType[];
+    },
+  },
+  mapping: {
+    left: () => [] as FieldType[],
+    right: () => [] as FieldType[],
+  },
+};
+
 const columns = reactive([
   {
     title: '取得元アプリのフィールド',
@@ -28,9 +48,14 @@ const columns = reactive([
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
         items: computed(() =>
-          getFieldsDropdownItems(selectedAppData.appFields, { subTableCode: table.value, filterType: undefined }),
+          getFieldsDropdownItems(selectedAppData.appFields, {
+            subTableCode: table.value,
+            baseFilter: filterFunc[props.type].left() as FieldType[],
+            filterType: filterFunc[props.type].left(getField('rightField', rowData.id)),
+            defaultDisableCallback: isForceDisable,
+          }),
         ),
-        modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || ''),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,
@@ -60,8 +85,15 @@ const columns = reactive([
       }
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: computed(() => getFieldsDropdownItems(cachedData.currentAppFields, { filterType: undefined })),
+        items: computed(() =>
-        modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || '',
+          getFieldsDropdownItems(cachedData.currentAppFields, {
+            subTableCode: '', // subtable not allowed for current app
+            baseFilter: filterFunc[props.type].right() as FieldType[],
+            filterType: filterFunc[props.type].right(getField('leftField', rowData.id)),
+            defaultDisableCallback: isForceDisable,
+          }),
+        ),
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || ''),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,
@@ -76,4 +108,12 @@ const columns = reactive([
     },
   },
 ]);
+
+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' ? table.value : '';
+  return getFieldObj(fieldCode, targetFieldMap, targetTable);
+}
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <kuc-combobox
     :items="items.value"
-    :value="modelValue"
+    :value="modelValue.value"
     @change="updateValue"
     :key="componentKey"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
@@ -17,7 +17,7 @@ import { defineProps, defineEmits, type Ref, watch, ref } from 'vue';
 
 const props = defineProps<{
   items: Ref<DropdownItem[]>;
-  modelValue: string;
+  modelValue: Ref<string>;
   dataList: any[];
   id: string;
   selectedAppData: CachedSelectedAppData;
@@ -28,7 +28,7 @@ const componentKey = ref(0);
 watch(
   () => props.items.value,
   () => {
-    if (!props.modelValue) return;
+    if (!props.modelValue.value) return;
     componentKey.value += 1;
   },
   {

vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
 
 const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined);
 
-const items = computed(() => getAvailableCondition(whereCondition.value?.field || '', props.selectedAppData.appFields));
+const items = computed(() => getAvailableCondition(whereCondition.value?.field || '', props.selectedAppData.appFields, props.selectedAppData.table.table));
 
 type EmitData = {
   obj?: WhereCondition;

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

@@ -1,5 +1,6 @@
 import type { FieldsInfo } from '@/types/model';
 import type { FieldType } from './kintone-rest-api-client';
+import { getFieldObj } from './helper';
 
 // conditionValue = '' | 'eq' | 'ne'
 // conditionItem  = { value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b }
@@ -39,9 +40,11 @@ const fieldConditions: FieldConditions = {
 } as const;
 
 // fieldCode -> conditionList: ConditionItem[]
-export const getAvailableCondition = (fieldCode: string, { fields }: FieldsInfo) => {
+export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo, subTableCode: string | '') => {
-  if (!fieldCode || !fields) return;
+  if (!fieldCode || !fieldsInfo.fields) return;
-  const conditions = fieldConditions[fields[fieldCode]?.type] || [];
+  const fieldObj = getFieldObj(fieldCode, fieldsInfo, subTableCode);
+  if (!fieldObj) return;
+  const conditions = fieldConditions[fieldObj.type] || [];
   return conditions.map((condition) => conditionMap[condition]);
 };
 

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

@@ -1,11 +0,0 @@
-import type { FieldType } from "./kintone-rest-api-client";
-
-const availableJoinType: FieldType[] = [
-    'SINGLE_LINE_TEXT',
-    'NUMBER',
-    'CALC',
-    'DATE',
-    'TIME',
-    'DATETIME',
-    'LINK'
-] as const

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

@@ -1,6 +1,15 @@
 import type { FieldsInfo, FieldsJoinMapping, JoinTable, WhereCondition } from '@/types/model';
-import { client, isType, type FieldType, type App, type Layout } from './kintone-rest-api-client';
+import {
-import type { DropdownItem } from 'kintone-ui-component';
+  client,
+  isType,
+  type FieldType,
+  type App,
+  type Layout,
+  type OneOf,
+  type Properties,
+} from './kintone-rest-api-client';
+import type { ComboboxItem, DropdownItem } from 'kintone-ui-component';
+import { isForceDisable, type LeftCalcJoinType, type RightCalcJoinType } from './join';
 
 export const EMPTY_OPTION = {
   value: '',
@@ -13,13 +22,14 @@ export function generateId(): string {
   return `${timestamp}-${randomNum}`;
 }
 
-export function search(list: Array<WhereCondition|FieldsJoinMapping>, id: string) {
+export function search(list: Array<WhereCondition | FieldsJoinMapping>, id: string) {
-  return list.find(item => item.id === id);
+  return list.find((item) => item.id === id);
 }
 
-export const getEmptyWhereCondition = () => ({ field: '', condition: '', data: '', id: generateId()} as WhereCondition);
+export const getEmptyWhereCondition = () =>
-export const getEmptyOnCondition = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
+  ({ field: '', condition: '', data: '', id: generateId() }) as WhereCondition;
-export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
+export const getEmptyOnCondition = () => ({ leftField: '', rightField: '', id: generateId() }) as FieldsJoinMapping;
+export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '', id: generateId() }) as FieldsJoinMapping;
 
 export function createEmptyJoinTable(id = generateId()) {
   return resetTable({ id, app: '' } as JoinTable);
@@ -59,25 +69,37 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
   } as FieldsInfo;
 };
 
-type Param = { subTableCode?: string; filterType?: FieldType; defaultLabel?: string };
+type FilterType = Array<FieldType | RightCalcJoinType>;
+type Param = {
+  subTableCode: string | undefined;
+  filterType?: FilterType;
+  baseFilter: FieldType[] | undefined;
+  defaultLabel?: string;
+  defaultDisableCallback?: (field: OneOf) => boolean;
+};
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
-  { subTableCode, filterType, defaultLabel }: Param = {},
+  { subTableCode, filterType, baseFilter, defaultLabel, defaultDisableCallback }: Param,
 ) => {
   // get used field codes
   let fieldOrder: string[];
   let fieldMap = fields;
   if (subTableCode) {
     const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTableCode) as any;
-    fieldOrder = subTableFields?.fields.map((field: { code: string }) => field.code) || [];
+    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);
+    fieldOrder = extractNoSubTableFields(layout, baseFilter);
   }
 
   // create labels
-  const labels = [
+  const labels: ComboboxItem[] = [
     {
       value: EMPTY_OPTION.value,
       label: defaultLabel || EMPTY_OPTION.label,
@@ -85,15 +107,34 @@ export const getFieldsDropdownItems = (
   ];
   return fieldOrder.reduce((acc, fieldCode) => {
     const field = fieldMap[fieldCode];
-    if (!fieldCode || (filterType && !isType[filterType](field))) return acc;
+    if (!fieldCode) return acc;
     acc.push({
       value: fieldCode,
       label: field.label + '（FC: ' + fieldCode + '）',
+      disabled: (defaultDisableCallback && defaultDisableCallback(field)) || (filterType && !checkFilterType(field, filterType)),
     });
     return acc;
   }, labels);
 };
 
+const checkFilterType = (field: OneOf, filterType: FilterType) => {
+  if (!filterType.length) return true; // [] means no filter
+  return !!filterType.find((type) => {
+    if (isRightCalcJoinType(type)) {
+      return isType.CALC(field) && type.format.find((e) => e === field.format);
+    }
+    return isType[type](field);
+  });
+};
+
+export function isLeftCalcJoinType(obj: FilterType | LeftCalcJoinType): obj is LeftCalcJoinType {
+  return !Array.isArray(obj);
+}
+
+function isRightCalcJoinType(obj: FieldType | RightCalcJoinType): obj is RightCalcJoinType {
+  return typeof obj === 'object' && obj.type === 'CALC';
+}
+
 export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: FieldType) => {
   return Object.keys(fields).reduce(
     (acc, fieldCode) => {
@@ -109,19 +150,37 @@ export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?:
   );
 };
 
-const extractNoSubTableFields = (layout: Layout) => {
+const extractNoSubTableFields = (layout: Layout, baseFilter: FieldType[] | undefined) => {
   return layout.reduce((acc, each) => {
     if (each.type === 'SUBTABLE') {
       return acc;
     } else if (each.type === 'ROW') {
-      acc.push(...each.fields.map((field: any) => field.code));
+      acc.push(...each.fields.map((field: any) => {
+        if (!baseFilter) return field.code;
+        return baseFilter.find((t) => t === field.type) ? field?.code || '' : ''
+      }));
     } else if (each.type === 'GROUP') {
-      acc.push(...extractNoSubTableFields(each.layout));
+      acc.push(...extractNoSubTableFields(each.layout, baseFilter));
     }
     return acc;
   }, [] as string[]);
 };
 
-// if (isType.SUBTABLE(field)) {
+export function getFieldObj(fieldCode: string, { fields }: FieldsInfo, subTableCode?: string) {
-//   console.log(field.fields);
+  const meta = getMeta(fields, subTableCode);
-// }
+  if (!meta) return '';
+  return meta[fieldCode];
+}
+
+export function getMeta(fields: Properties, subTableCode?: string) {
+  if (!fields || !subTableCode) {
+    return fields;
+  }
+  let meta = fields;
+  if (!meta) return fields;
+  const table = meta[subTableCode];
+  if (isType.SUBTABLE(table)) {
+    meta = table.fields;
+  }
+  return meta;
+}

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

@@ -0,0 +1,58 @@
+import { isType, type FieldType, type OneOf } from './kintone-rest-api-client';
+
+type CalcType = 'NUMBER' | 'NUMBER_DIGIT' | 'DATETIME' | 'DATE' | 'TIME' | 'HOUR_MINUTE' | 'DAY_HOUR_MINUTE';
+export type LeftCalcJoinType = Record<CalcType, FieldType[]>;
+
+export function isForceDisable(field: OneOf) {
+  if (isType.CALC(field)) {
+    return field.format === 'DAY_HOUR_MINUTE' || field.format === 'HOUR_MINUTE';
+  }
+  return false;
+}
+
+const calcJoinType = {
+  NUMBER: ['SINGLE_LINE_TEXT', 'NUMBER'],
+  NUMBER_DIGIT: ['SINGLE_LINE_TEXT', 'NUMBER'],
+  DATE: ['DATE'],
+  TIME: ['TIME'],
+  DATETIME: ['DATETIME'],
+  HOUR_MINUTE: [],
+  DAY_HOUR_MINUTE: [],
+} as LeftCalcJoinType;
+
+const availableLeftJoinType = {
+  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT'],
+  NUMBER: ['NUMBER'],
+  CALC: calcJoinType,
+  DATE: ['DATE'],
+  TIME: ['TIME'],
+  DATETIME: ['DATETIME'],
+  LINK: ['LINK'],
+} as Record<FieldType, FieldType[] | LeftCalcJoinType>;
+
+// undefined means all
+export function getRightAvailableJoinType(left?: OneOf | '') {
+  if (left === undefined) {
+    return Object.keys(availableRightJoinType) as FieldType[];
+  }
+  return left ? availableLeftJoinType[left.type] : [];
+}
+
+export type RightCalcJoinType = { type: 'CALC'; format: CalcType[] };
+
+const availableRightJoinType = {
+  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT', { type: 'CALC', format: ['NUMBER', 'NUMBER_DIGIT'] }],
+  NUMBER: ['NUMBER', { type: 'CALC', format: ['NUMBER', 'NUMBER_DIGIT'] }],
+  DATE: ['DATE', { type: 'CALC', format: ['DATE'] }],
+  TIME: ['TIME', { type: 'CALC', format: ['TIME'] }],
+  DATETIME: ['DATETIME', { type: 'CALC', format: ['DATETIME'] }],
+  LINK: ['LINK'],
+} as Record<FieldType, Array<FieldType | RightCalcJoinType>>;
+
+// undefined means all
+export function getLeftAvailableJoinType(right?: OneOf | '') {
+  if (right === undefined) {
+    return Object.keys(availableLeftJoinType) as FieldType[];
+  }
+  return right ? availableRightJoinType[right.type] : [];
+}