alicorn-dev/data-fetch-plugin
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix join UI

Browse Source
This commit is contained in:
薛家豪
2025-01-24 23:17:12 +08:00
parent ba897b00b9
commit ccbcbf5259
10 changed files with 198 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
vue-project/my-kintone-plugin/src/components/Config.vue
View File

@@ -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 { isType, type OneOf } from '@/js/kintone-rest-api-client';
import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition, getMeta } from '@/js/helper';
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;
if (!meta) {
return;
}
if (item.table) {
const table = meta[item.table];
if (isType.SUBTABLE(table)) {
meta = table.fields;
}
}
const meta = getMeta(item.meta as Properties, item.table);
// Process onConditions
item.onConditions.forEach((condition) => {

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

@@ -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="絞込条件" />

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

@@ -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,

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

@@ -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 })),
modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || '',
items: computed(() =>
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>

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

@@ -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;
},
{

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

@@ -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;

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

@@ -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) => {
if (!fieldCode || !fields) return;
const conditions = fieldConditions[fields[fieldCode]?.type] || [];
export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo, subTableCode: string | '') => {
if (!fieldCode || !fieldsInfo.fields) return;
const fieldObj = getFieldObj(fieldCode, fieldsInfo, subTableCode);
if (!fieldObj) return;
const conditions = fieldConditions[fieldObj.type] || [];
return conditions.map((condition) => conditionMap[condition]);
};

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

@@ -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

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

@@ -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 type { DropdownItem } from 'kintone-ui-component';
import {
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: '',
@@ -14,12 +23,13 @@ export function generateId(): 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 getEmptyOnCondition = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
export const getEmptyWhereCondition = () =>
({ field: '', condition: '', data: '', id: generateId() }) as WhereCondition;
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)) {
// console.log(field.fields);
// }
export function getFieldObj(fieldCode: string, { fields }: FieldsInfo, subTableCode?: string) {
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;
}

58
vue-project/my-kintone-plugin/src/js/join.ts Normal file
View File

@@ -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] : [];
}