Merge branch 'master' of https://dev.azure.com/alicorn-dev/deta-fetch-plugin/_git/deta-fetch-plugin

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

@@ -4,11 +4,12 @@
 
 <script setup lang="ts">
 import type { CachedData, CachedSelectedAppData, FieldsJoinMapping, WhereCondition } from '@/types/model';
-import { defineProps, inject, computed, reactive, render, h, watch } from 'vue';
+import { defineProps, inject, computed, reactive, render, h } from 'vue';
-import { generateId, getFieldObj, getFieldsDropdownItems, isLeftCalcJoinType, search } from '@/js/helper';
+import { generateId, getFieldObj, getFieldsDropdownItems, 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';
+import { getLeftAvailableMappingType, getRightAvailableMappingType } from '@/js/mapping';
+import TableCombobox from './TableCombobox.vue';
+import { type FieldType, type OneOf } from '@/js/kintone-rest-api-client';
 
 const props = defineProps<{
   connector: string;
@@ -23,17 +24,11 @@ const table = computed(() => selectedAppData.table.table);
 const filterFunc = {
   connect: {
     left: (right?: OneOf | '') => getLeftAvailableJoinType(right),
-    right: (left?: OneOf | '') => {
+    right: (left?: OneOf | '') => getRightAvailableJoinType(left),
-      const filterType = getRightAvailableJoinType(left);
-      if (left && isType.CALC(left) && isLeftCalcJoinType(filterType)) {
-        return filterType[left.format];
-      }
-      return filterType as FieldType[];
-    },
   },
   mapping: {
-    left: () => [] as FieldType[],
+    left: (right?: OneOf | '') => getLeftAvailableMappingType(right),
-    right: () => [] as FieldType[],
+    right: (left?: OneOf | '') => getRightAvailableMappingType(left),
   },
 };
 
@@ -47,14 +42,16 @@ const columns = reactive([
       }
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: computed(() =>
+        items: computed(() => {
-          getFieldsDropdownItems(selectedAppData.appFields, {
+          const dependFilterField = getField('rightField', rowData.id);
+          return getFieldsDropdownItems(selectedAppData.appFields, {
             subTableCode: table.value,
             baseFilter: filterFunc[props.type].left() as FieldType[],
-            filterType: filterFunc[props.type].left(getField('rightField', rowData.id)),
+            filterType: filterFunc[props.type].left(dependFilterField),
+            dependFilterField,
             defaultDisableCallback: isForceDisable,
-          }),
+          });
-        ),
+        }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || ''),
         selectedAppData,
         dataList: props.modelValue,
@@ -85,14 +82,16 @@ const columns = reactive([
       }
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: computed(() =>
+        items: computed(() => {
-          getFieldsDropdownItems(cachedData.currentAppFields, {
+          const dependFilterField = getField('leftField', rowData.id);
+          return 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)),
+            filterType: filterFunc[props.type].right(dependFilterField),
+            dependFilterField,
             defaultDisableCallback: isForceDisable,
-          }),
+          });
-        ),
+        }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || ''),
         selectedAppData,
         dataList: props.modelValue,
@@ -109,9 +108,9 @@ const columns = reactive([
   },
 ]);
 
-function getField(key: 'leftField'|'rightField', id: string) {
+function getField(key: 'leftField' | 'rightField', id: string) {
   const dataRow = search(props.modelValue, id) as FieldsJoinMapping | undefined;
-  const fieldCode = (dataRow ? (dataRow[key] || '') : '');
+  const fieldCode = dataRow ? dataRow[key] || '' : '';
   const targetFieldMap = key === 'leftField' ? selectedAppData.appFields : cachedData.currentAppFields;
   const targetTable = key === 'leftField' ? table.value : '';
   return getFieldObj(fieldCode, targetFieldMap, targetTable);

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

@@ -9,7 +9,7 @@ import {
   type Properties,
 } from './kintone-rest-api-client';
 import type { ComboboxItem, DropdownItem } from 'kintone-ui-component';
-import { isForceDisable, type LeftCalcJoinType, type RightCalcJoinType } from './join';
+import { isSpecialType, type SpecialType } from './join';
 
 export const EMPTY_OPTION = {
   value: '',
@@ -69,17 +69,18 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
   } as FieldsInfo;
 };
 
-type FilterType = Array<FieldType | RightCalcJoinType>;
+type FilterType = Array<FieldType | SpecialType>;
 type Param = {
   subTableCode: string | undefined;
   filterType?: FilterType;
   baseFilter: FieldType[] | undefined;
+  dependFilterField?: OneOf;
   defaultLabel?: string;
   defaultDisableCallback?: (field: OneOf) => boolean;
 };
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
-  { subTableCode, filterType, baseFilter, defaultLabel, defaultDisableCallback }: Param,
+  { subTableCode, filterType, baseFilter, dependFilterField, defaultLabel, defaultDisableCallback }: Param,
 ) => {
   // get used field codes
   let fieldOrder: string[];
@@ -111,30 +112,24 @@ export const getFieldsDropdownItems = (
     acc.push({
       value: fieldCode,
       label: field.label + '（FC: ' + fieldCode + '）',
-      disabled: (defaultDisableCallback && defaultDisableCallback(field)) || (filterType && !checkFilterType(field, filterType)),
+      disabled:
+        (defaultDisableCallback && defaultDisableCallback(field)) ||
+        (filterType && !checkFilterType(field, dependFilterField, filterType)),
     });
     return acc;
   }, labels);
 };
 
-const checkFilterType = (field: OneOf, filterType: FilterType) => {
+const checkFilterType = (field: OneOf, dependFilterField: OneOf | undefined, filterType: FilterType) => {
   if (!filterType.length) return true; // [] means no filter
   return !!filterType.find((type) => {
-    if (isRightCalcJoinType(type)) {
+    if (isSpecialType(type)) {
-      return isType.CALC(field) && type.format.find((e) => e === field.format);
+      return type.check(field, dependFilterField);
     }
     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) => {
@@ -155,10 +150,12 @@ const extractNoSubTableFields = (layout: Layout, baseFilter: FieldType[] | undef
     if (each.type === 'SUBTABLE') {
       return acc;
     } else if (each.type === 'ROW') {
-      acc.push(...each.fields.map((field: any) => {
+      acc.push(
-        if (!baseFilter) return field.code;
+        ...each.fields.map((field: any) => {
-        return baseFilter.find((t) => t === field.type) ? field?.code || '' : ''
+          if (!baseFilter) return field.code;
-      }));
+          return baseFilter.find((t) => t === field.type) ? field?.code || '' : '';
+        }),
+      );
     } else if (each.type === 'GROUP') {
       acc.push(...extractNoSubTableFields(each.layout, baseFilter));
     }

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

@@ -1,9 +1,6 @@
-import type { CalcType } from '@/types/my-kintone';
+import type { CalcType, LinkType } from '@/types/my-kintone';
 import { isType, type FieldType, type OneOf } from './kintone-rest-api-client';
 
-
-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';
@@ -11,25 +8,91 @@ export function isForceDisable(field: OneOf) {
   return false;
 }
 
-const calcJoinType = {
+export type SpecialType<T = string, F = any> = {
-  NUMBER: ['SINGLE_LINE_TEXT', 'NUMBER'],
+  type: T;
-  NUMBER_DIGIT: ['SINGLE_LINE_TEXT', 'NUMBER'],
+  format: F;
-  DATE: ['DATE'],
+  check: (field: OneOf, depField?: OneOf) => boolean;
-  TIME: ['TIME'],
+};
-  DATETIME: ['DATETIME'],
+
-  HOUR_MINUTE: [],
+// LEFT
-  DAY_HOUR_MINUTE: [],
+export type LeftCalcJoinType = SpecialType<'CALC_JOIN_FOR_LEFT', Record<CalcType, FieldType[]>>;
-} as LeftCalcJoinType;
+
+export const calcJoinType: LeftCalcJoinType = {
+  type: 'CALC_JOIN_FOR_LEFT',
+  format: {
+    NUMBER: ['SINGLE_LINE_TEXT', 'NUMBER'],
+    NUMBER_DIGIT: ['SINGLE_LINE_TEXT', 'NUMBER'],
+    DATE: ['DATE'],
+    TIME: ['TIME'],
+    DATETIME: ['DATETIME'],
+    HOUR_MINUTE: [],
+    DAY_HOUR_MINUTE: [],
+  },
+  check: function (field: OneOf, rightField?: OneOf) {
+    let allowed: FieldType[] = [];
+    if (rightField && isType.CALC(rightField)) {
+      allowed = this.format[rightField.format];
+    }
+    if (field && isType.CALC(field)) {
+      return !!allowed.find((e) => e === field.format);
+    }
+    return false;
+  },
+};
+
+export type LinkJoinType = SpecialType<'LINK_JOIN', Record<LinkType, LinkType[]>>;
+
+// 入力値の種別が同じ場合のみ
+export const linkJoinType: LinkJoinType = {
+  type: 'LINK_JOIN',
+  format: {
+    WEB: ['WEB'],
+    CALL: ['CALL'],
+    MAIL: ['MAIL'],
+  },
+  check: function (field: OneOf, dependField?: OneOf) {
+    let allowed: LinkType[] = [];
+    if (dependField && isType.LINK(dependField)) {
+      allowed = this.format[dependField.protocol];
+    }
+    if (field && isType.LINK(field)) {
+      return !!allowed.find((e) => e === field.protocol);
+    }
+    return false;
+  },
+};
 
 const availableLeftJoinType = {
   SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT'],
   NUMBER: ['NUMBER'],
-  CALC: calcJoinType,
+  CALC: [calcJoinType],
   DATE: ['DATE'],
   TIME: ['TIME'],
   DATETIME: ['DATETIME'],
-  LINK: ['LINK'],
+  LINK: [linkJoinType],
-} as Record<FieldType, FieldType[] | LeftCalcJoinType>;
+} as Record<FieldType, Array<FieldType | LeftCalcJoinType | LinkJoinType>>;
+
+// RIGHT
+export type RightCalcJoinType = SpecialType<'CALC_JOIN_FOR_RIGHT', CalcType[]>;
+
+export const forCalc = (format: CalcType[]): RightCalcJoinType => {
+  return {
+    type: 'CALC_JOIN_FOR_RIGHT',
+    format,
+    check: function (field: OneOf, leftField?: OneOf) {
+      return isType.CALC(field) && !!this.format?.find((e) => e === field.format);
+    },
+  };
+};
+
+const availableRightJoinType = {
+  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT', forCalc(['NUMBER', 'NUMBER_DIGIT'])],
+  NUMBER: ['NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT'])],
+  DATE: ['DATE', forCalc(['DATE'])],
+  TIME: ['TIME', forCalc(['TIME'])],
+  DATETIME: ['DATETIME', forCalc(['DATETIME'])],
+  LINK: [linkJoinType],
+} as Record<FieldType, Array<FieldType | RightCalcJoinType | LinkJoinType>>;
 
 // undefined means all
 export function getRightAvailableJoinType(left?: OneOf | '') {
@@ -39,17 +102,6 @@ export function getRightAvailableJoinType(left?: OneOf | '') {
   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) {
@@ -57,3 +109,19 @@ export function getLeftAvailableJoinType(right?: OneOf | '') {
   }
   return right ? availableRightJoinType[right.type] : [];
 }
+
+export function isSpecialType(obj: FieldType | SpecialType): obj is SpecialType {
+  return typeof obj === 'object' && !Array.isArray(obj) && 'type' in obj;
+}
+
+export function isLinkJoinType(obj: SpecialType): obj is LinkJoinType {
+  return obj.type === 'LINK_JOIN';
+}
+
+export function isLeftCalcJoinType(obj: SpecialType): obj is LeftCalcJoinType {
+  return obj.type === 'CALC_JOIN_FOR_LEFT';
+}
+
+export function isRightCalcJoinType(obj: SpecialType): obj is RightCalcJoinType {
+  return obj.type === 'CALC_JOIN_FOR_RIGHT';
+}

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

@@ -0,0 +1,161 @@
+import type { CalcType, LinkType, SelectType } from '@/types/my-kintone';
+import { isType, type FieldType, type OneOf } from './kintone-rest-api-client';
+import { calcJoinType, linkJoinType, type SpecialType, isSpecialType } from './join';
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+
+// LEFT
+export type LeftLookupMappingType = SpecialType<'LOOKUP_MAPPING_FOR_LEFT', FieldType[]>;
+
+export const lookupMappingType = (format: FieldType[]): LeftLookupMappingType => {
+  return {
+    type: 'LOOKUP_MAPPING_FOR_LEFT',
+    format,
+    check: function (field: OneOf, rightField?: OneOf) {
+      if (rightField && isLookup(rightField) && !isLookup(field)) {
+        return false;
+      }
+      return !!this.format?.find((e) => e === field.type);
+    },
+  };
+};
+
+const mayLookupText = lookupMappingType(['SINGLE_LINE_TEXT']);
+const mayLookupNumber = lookupMappingType(['NUMBER']);
+
+export type LeftCalcMappingType = SpecialType<
+  'CALC_MAPPING_FOR_LEFT',
+  Record<CalcType, Array<FieldType | LeftLookupMappingType>>
+>;
+
+// same as join
+export const calcMappingType: LeftCalcMappingType = {
+  type: 'CALC_MAPPING_FOR_LEFT',
+  format: {
+    NUMBER: [mayLookupText, mayLookupNumber],
+    NUMBER_DIGIT: [mayLookupText, mayLookupNumber],
+    DATE: ['DATE'],
+    TIME: ['TIME'],
+    DATETIME: ['DATETIME'],
+    HOUR_MINUTE: [],
+    DAY_HOUR_MINUTE: [],
+  },
+  check: function (field: OneOf, rightField?: OneOf) {
+    let allowed: Array<FieldType | LeftLookupMappingType> = [];
+    if (rightField && isType.CALC(rightField)) {
+      allowed = this.format[rightField.format];
+    }
+    if (field && isType.CALC(field)) {
+      return !!allowed.find((e) => {
+        if (isSpecialType(e) && isLeftLookupMappingType(e)) {
+          return e.check(field, rightField);
+        }
+        return e === field.format
+      });
+    }
+    return false;
+  },
+};
+
+export type LinkMappingType = SpecialType<'LINK_MAPPING', Record<LinkType, LinkType[]>>;
+
+// same as join
+export const linkMappingType = {
+  ...linkJoinType,
+  type: 'LINK_MAPPING',
+} as LinkMappingType;
+
+const availableLeftMappingType = {
+  SINGLE_LINE_TEXT: [mayLookupText],
+  MULTI_LINE_TEXT: ['MULTI_LINE_TEXT'],
+  RICH_TEXT: ['RICH_TEXT'],
+  NUMBER: [mayLookupNumber, mayLookupText],
+  CALC: [calcMappingType],
+  RADIO_BUTTON: ['RADIO_BUTTON'],
+  CHECK_BOX: ['CHECK_BOX'],
+  MULTI_SELECT: ['MULTI_SELECT'], // TODO 带选项字段报错
+  DROP_DOWN: ['DROP_DOWN'],
+  USER_SELECT: ['USER_SELECT'],
+  ORGANIZATION_SELECT: ['ORGANIZATION_SELECT'],
+  GROUP_SELECT: ['GROUP_SELECT'],
+  DATE: ['DATE', 'DATETIME'],
+  TIME: ['TIME'],
+  DATETIME: ['DATETIME'],
+  LINK: [linkMappingType, mayLookupText],
+  //LOOKUP
+  RECORD_NUMBER: [mayLookupText, mayLookupNumber],
+  CREATOR: ['USER_SELECT'],
+  CREATED_TIME: ['DATETIME'],
+  MODIFIER: ['USER_SELECT'],
+  UPDATED_TIME: ['DATETIME'],
+} as Record<FieldType, Array<FieldType | LeftCalcMappingType | LinkMappingType | LeftLookupMappingType>>;
+
+// RIGHT
+export type RightCalcMappingType = SpecialType<'CALC_MAPPING_FOR_RIGHT', CalcType[]>;
+export type RightLookupMappingType = SpecialType<'LOOKUP_MAPPING_FOR_RIGHT', FieldType[]>;
+
+export const forCalc = (format: CalcType[]): RightCalcMappingType => {
+  return {
+    type: 'CALC_MAPPING_FOR_RIGHT',
+    format,
+    check: function (field: OneOf, leftField?: OneOf) {
+      return isType.CALC(field) && !!this.format?.find((e) => e === field.format);
+    },
+  };
+};
+
+export const forLookup = (format: FieldType[]): RightLookupMappingType => {
+  return {
+    type: 'LOOKUP_MAPPING_FOR_RIGHT',
+    format,
+    check: function (field: OneOf, leftField?: OneOf) {
+      if (!isLookup(field)) return false;
+      return !!this.format?.find((e) => e === field.type);
+    },
+  };
+};
+
+const availableRightMappingType = {
+  SINGLE_LINE_TEXT: ['SINGLE_LINE_TEXT', 'NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), 'LINK', 'RECORD_NUMBER'],
+  MULTI_LINE_TEXT: ['MULTI_LINE_TEXT'],
+  RICH_TEXT: ['RICH_TEXT'],
+  NUMBER: ['NUMBER', forCalc(['NUMBER', 'NUMBER_DIGIT']), forLookup(['NUMBER']), 'RECORD_NUMBER'],
+  RADIO_BUTTON: ['RADIO_BUTTON'],
+  CHECK_BOX: ['CHECK_BOX'],
+  MULTI_SELECT: ['MULTI_SELECT'], // TODO 带选项字段报错
+  DROP_DOWN: ['DROP_DOWN'],
+  USER_SELECT: ['USER_SELECT', 'CREATOR', 'MODIFIER'],
+  ORGANIZATION_SELECT: ['ORGANIZATION_SELECT'],
+  GROUP_SELECT: ['GROUP_SELECT'],
+  DATE: ['DATE', forCalc(['DATE'])],
+  TIME: ['TIME', forCalc(['TIME'])],
+  DATETIME: ['DATE', 'DATETIME', forCalc(['DATETIME']), 'CREATED_TIME', 'UPDATED_TIME'],
+  LINK: [linkMappingType],
+} as Record<FieldType, Array<FieldType | RightCalcMappingType | RightLookupMappingType | LinkMappingType>>;
+
+// undefined means all
+export function getRightAvailableMappingType(left?: OneOf | '') {
+  if (left === undefined) {
+    return Object.keys(availableRightMappingType) as FieldType[];
+  }
+  return left ? availableLeftMappingType[left.type] : [];
+}
+
+// undefined means all
+export function getLeftAvailableMappingType(right?: OneOf | '') {
+  if (right === undefined) {
+    return Object.keys(availableLeftMappingType) as FieldType[];
+  }
+  return right ? availableRightMappingType[right.type] : [];
+}
+
+export function isLeftLookupMappingType(obj: SpecialType): obj is LeftLookupMappingType {
+  return obj.type === 'LOOKUP_MAPPING_FOR_LEFT';
+}
+
+export function isLookup(field: OneOf): field is KintoneFormFieldProperty.Lookup {
+  return 'lookup' in field;
+}
+
+// export function isSelectType(field: OneOf): field is SelectType {
+//   return 'options' in field;
+// }

vue-project/my-kintone-plugin/src/types/my-kintone.d.ts

@@ -3,3 +3,18 @@ export interface KucEvent<T> {
 }
 
 export type CalcType = 'NUMBER' | 'NUMBER_DIGIT' | 'DATETIME' | 'DATE' | 'TIME' | 'HOUR_MINUTE' | 'DAY_HOUR_MINUTE';
+export type LinkType = 'WEB' | 'CALL' | 'MAIL';
+
+type Options = {
+  [optionName: string]: {
+      label: string;
+      index: string;
+  };
+};
+
+export type SelectType = {
+  type: 'CHECK_BOX' | 'RADIO_BUTTON' | 'DROP_DOWN' | 'MULTI_SELECT';
+  code: string;
+  label: string;
+  options: Options;
+};