fix join UI

2025-01-24 23:17:12 +08:00
parent ba897b00b9
commit ccbcbf5259
10 changed files with 198 additions and 57 deletions
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/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 { 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) => {
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue
+++ b/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="絞込条件" />
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/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,
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/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 })),
-        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>
--- a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
+++ b/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;
  },
  {
--- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
+++ b/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;