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

2025-01-25 21:31:54 +09:00
parent e58a4c7293 662b18548f
commit 54d384e7da
5 changed files with 311 additions and 71 deletions
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/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 { generateId, getFieldObj, getFieldsDropdownItems, isLeftCalcJoinType, search } from '@/js/helper';
-import TableCombobox from './TableCombobox.vue';
+import { defineProps, inject, computed, reactive, render, h } from 'vue';
+import { generateId, getFieldObj, getFieldsDropdownItems, search } from '@/js/helper';
 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 | '') => {
-      const filterType = getRightAvailableJoinType(left);
-      if (left && isType.CALC(left) && isLeftCalcJoinType(filterType)) {
-        return filterType[left.format];
-      }
-      return filterType as FieldType[];
-    },
+    right: (left?: OneOf | '') => getRightAvailableJoinType(left),
  },
  mapping: {
-    left: () => [] as FieldType[],
-    right: () => [] as FieldType[],
+    left: (right?: OneOf | '') => getLeftAvailableMappingType(right),
+    right: (left?: OneOf | '') => getRightAvailableMappingType(left),
  },
 };

@@ -47,14 +42,16 @@ const columns = reactive([
      }
      const container = document.createElement('div');
      const vnode = h(TableCombobox, {
-        items: computed(() =>
-          getFieldsDropdownItems(selectedAppData.appFields, {
+        items: computed(() => {
+          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(() =>
-          getFieldsDropdownItems(cachedData.currentAppFields, {
+        items: computed(() => {
+          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);
--- a/vue-project/my-kintone-plugin/src/js/helper.ts
+++ b/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)) {
-      return isType.CALC(field) && type.format.find((e) => e === field.format);
+    if (isSpecialType(type)) {
+      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) => {
-        if (!baseFilter) return field.code;
-        return baseFilter.find((t) => t === field.type) ? 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, baseFilter));
    }
--- a/vue-project/my-kintone-plugin/src/js/join.ts
+++ b/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 = {
-  NUMBER: ['SINGLE_LINE_TEXT', 'NUMBER'],
-  NUMBER_DIGIT: ['SINGLE_LINE_TEXT', 'NUMBER'],
-  DATE: ['DATE'],
-  TIME: ['TIME'],
-  DATETIME: ['DATETIME'],
-  HOUR_MINUTE: [],
-  DAY_HOUR_MINUTE: [],
-} as LeftCalcJoinType;
+export type SpecialType<T = string, F = any> = {
+  type: T;
+  format: F;
+  check: (field: OneOf, depField?: OneOf) => boolean;
+};
+
+// LEFT
+export type LeftCalcJoinType = SpecialType<'CALC_JOIN_FOR_LEFT', Record<CalcType, FieldType[]>>;
+
+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'],
-} as Record<FieldType, FieldType[] | LeftCalcJoinType>;
+  LINK: [linkJoinType],
+} 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';
+}
--- a/vue-project/my-kintone-plugin/src/js/mapping.ts
+++ b/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;
+// }
--- a/vue-project/my-kintone-plugin/src/types/my-kintone.d.ts
+++ b/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;
+};