From 11ca450ee7568b67ff48d63c9750aa477675a9cd Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Fri, 24 Jan 2025 01:46:57 +0800
Subject: [PATCH] try fix table

---
 .../basic/PluginTableConditionRow.vue         | 68 ++++++++++++++-----
 .../basic/PluginTableConnectRow.vue           |  6 +-
 .../src/components/basic/TableCombobox.vue    | 25 ++++---
 .../basic/conditions/TableCondition.vue       |  9 ++-
 .../my-kintone-plugin/src/js/helper.ts        | 13 ++--
 .../my-kintone-plugin/src/types/model.d.ts    | 15 ++--
 6 files changed, 94 insertions(+), 42 deletions(-)

diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
index 1a9eecd..71d9ce9 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -1,16 +1,22 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
+  <kuc-table
+    :class-name.camel="['plugin-kuc-table']"
+    :columns="columns"
+    :data="whereConditionsCopy"
+    @change="updateTable"
+  />
 </template>
 
 <script setup lang="ts">
-import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
-import { defineProps, inject, computed, render, h, reactive } from 'vue';
+import type { CachedData, CachedSelectedAppData, EmptyOneOf, SavedData, WhereCondition } from '@/types/model';
+import { defineProps, inject, computed, render, h, reactive, ref } from 'vue';
 import TableCombobox from './TableCombobox.vue';
-import { generateId, getFieldsDropdownItems, search } from '@/js/helper';
-import type { ConditionValue } from '@/js/conditions';
+import { generateId, getEmptyOneOf, getEmptyWhereCondition, getFieldsDropdownItems, search } from '@/js/helper';
 import TableCondition from './conditions/TableCondition.vue';
 import TableConditionValue from './conditions/TableConditionValue.vue';
-import type { KucTableEvent } from '@/types/my-kintone';
+import type { KucEvent } from '@/types/my-kintone';
+import type { TableChangeEventDetail } from 'kintone-ui-component';
+import type { OneOf } from '@/js/kintone-rest-api-client';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
@@ -21,11 +27,13 @@ const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 const table = computed(() => selectedAppData.table.table);
 
+const whereConditionsCopy = computed(() => JSON.parse(JSON.stringify(props.modelValue)) as WhereCondition<string>[]);
+
 const columns = reactive([
   {
     title: '取得元アプリのフィールド',
     field: 'field',
-    render: (cellData: string, rowData: WhereCondition) => {
+    render: (cellData: string, rowData: WhereCondition<string>) => {
       if (!rowData.id) {
         rowData.id = generateId();
       }
@@ -37,16 +45,15 @@ const columns = reactive([
             defaultLabel: 'すべてのレコード',
           }),
         ),
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.field || '',
+        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.field || getEmptyOneOf(),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,
         'onUpdate:modelValue': (data) => {
-          const obj = (data.obj as WhereCondition);
+          const obj = data.obj as WhereCondition;
           if (obj) {
             obj.field = data.value;
-            obj.condition = '',
-            obj.data = '';
+            (obj.condition = ''), (obj.data = '');
           }
         },
       });
@@ -57,14 +64,14 @@ const columns = reactive([
   {
     title: '',
     field: 'condition',
-    render: (cellData: string, rowData: WhereCondition) => {
+    render: (cellData: string, rowData: WhereCondition<string>) => {
       const container = document.createElement('div');
       const vnode = h(TableCondition, {
         modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.condition || '',
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,
-        'onUpdate:modelValue': ({obj, value}) => {
+        'onUpdate:modelValue': ({ obj, value }) => {
           if (obj) {
             obj.condition = value;
             obj.data = '';
@@ -78,15 +85,15 @@ const columns = reactive([
   {
     title: '',
     field: 'data',
-    render: (cellData: string, rowData: WhereCondition) => {
+    render: (cellData: string, rowData: WhereCondition<string>) => {
       const container = document.createElement('div');
       const vnode = h(TableConditionValue, {
         modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.data || '',
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,
-        'onUpdate:modelValue': ({obj, value}) => {
-            obj && (obj.data = value);
+        'onUpdate:modelValue': ({ obj, value }) => {
+          obj && (obj.data = value);
         },
       });
       render(vnode, container);
@@ -95,4 +102,33 @@ const columns = reactive([
   },
 ]);
 
+function updateTable({ detail }: KucEvent<TableChangeEventDetail<WhereCondition<string>>>) {
+  if (detail.type === 'remove-row') {
+    props.modelValue.splice(detail.rowIndex, 1);
+    return;
+  }
+
+  const rowData = detail.data ? detail.data[detail.rowIndex] : { ...getEmptyWhereCondition(), field: '' } as WhereCondition<string|EmptyOneOf|OneOf>;
+
+  if (detail.type === 'add-row') {
+    rowData.field = getEmptyOneOf();
+    props.modelValue.splice(detail.rowIndex + 1, 0, getEmptyWhereCondition(rowData.id));
+    return;
+  }
+
+  if (detail.type === 'change-cell') {
+    const updateField = detail.field as keyof WhereCondition;
+    if (!updateField) return;
+    if (updateField === 'field') {
+      rowData.field = selectedAppData.appFields.fields[rowData.field as string];
+    }
+    if (isWhereCondition(rowData)) {
+      props.modelValue[detail.rowIndex][updateField] = rowData[updateField] as any;
+    }
+  }
+}
+
+function isWhereCondition(rowData: WhereCondition<string|EmptyOneOf|OneOf>): rowData is WhereCondition {
+  return (typeof rowData.field !== 'string');
+}
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
index 62a09b9..5eaed84 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue
@@ -5,7 +5,7 @@
 <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, getEmptyOneOf, getFieldsDropdownItems, search } from '@/js/helper';
 import TableCombobox from './TableCombobox.vue';
 
 const props = defineProps<{
@@ -30,7 +30,7 @@ const columns = reactive([
         items: computed(() =>
           getFieldsDropdownItems(selectedAppData.appFields, { subTableCode: table.value, filterType: undefined }),
         ),
-        modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || '',
+        modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || getEmptyOneOf(),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,
@@ -61,7 +61,7 @@ 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 || '',
+        modelValue: (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || getEmptyOneOf(),
         selectedAppData,
         dataList: props.modelValue,
         id: rowData.id,
diff --git a/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue b/vue-project/my-kintone-plugin/src/components/basic/TableCombobox.vue
index 1cbb16d..f90a7ae 100644
--- 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="comboboxValue"
     @change="updateValue"
     :key="componentKey"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
@@ -9,20 +9,23 @@
 </template>
 
 <script setup lang="ts">
-import { search } from '@/js/helper';
-import type { CachedSelectedAppData } from '@/types/model';
+import { getEmptyOneOf, search } from '@/js/helper';
+import type { OneOf } from '@/js/kintone-rest-api-client';
+import type { CachedSelectedAppData, EmptyOneOf } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
-import type { DropdownItem } from 'kintone-ui-component';
-import { defineProps, defineEmits, type Ref, watch, ref } from 'vue';
+import type { ComboboxChangeEventDetail, DropdownItem } from 'kintone-ui-component';
+import { defineProps, defineEmits, type Ref, watch, ref, computed } from 'vue';
 
 const props = defineProps<{
   items: Ref<DropdownItem[]>;
-  modelValue: string;
+  modelValue: OneOf | EmptyOneOf;
   dataList: any[];
   id: string;
   selectedAppData: CachedSelectedAppData;
 }>();
 
+const comboboxValue = computed(() => (props.modelValue?.code || ''));
+
 const componentKey = ref(0);
 // fix-bug: force select saved data when load config
 watch(
@@ -38,14 +41,18 @@ watch(
 
 type EmitData = {
   obj?: any;
-  value: string;
+  value: OneOf | EmptyOneOf;
 };
 
 const emit = defineEmits<{
   (e: 'update:modelValue', data: EmitData): void;
 }>();
 
-const updateValue = (event: KucEvent) => {
-  emit('update:modelValue', { obj: search(props.dataList, props.id), value: event.detail.value });
+const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
+  console.log(props.selectedAppData.appFields.fields, detail.value)
+  emit('update:modelValue', {
+    obj: search(props.dataList, props.id),
+    value: props.selectedAppData.appFields.fields[detail.value || ''] || getEmptyOneOf(),
+  });
 };
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
index b56b582..a227d66 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { getAvailableCondition, type ConditionValue } from '@/js/conditions';
-import { search } from '@/js/helper';
+import { getEmptyOneOf, search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail } from 'kintone-ui-component';
@@ -24,8 +24,11 @@ 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(() => {
+  console.log(props.whereConditions);
+  const field = whereCondition.value?.field || getEmptyOneOf();
+  return getAvailableCondition(field.code, props.selectedAppData.appFields);
+});
 
 type EmitData = {
   obj?: WhereCondition;
diff --git a/vue-project/my-kintone-plugin/src/js/helper.ts b/vue-project/my-kintone-plugin/src/js/helper.ts
index c58241b..f0d6c24 100644
--- a/vue-project/my-kintone-plugin/src/js/helper.ts
+++ b/vue-project/my-kintone-plugin/src/js/helper.ts
@@ -1,5 +1,5 @@
-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 { EmptyOneOf, FieldsInfo, FieldsJoinMapping, JoinTable, WhereCondition } from '@/types/model';
+import { client, isType, type FieldType, type App, type Layout, type OneOf } from './kintone-rest-api-client';
 import type { DropdownItem } from 'kintone-ui-component';
 
 export const EMPTY_OPTION = {
@@ -13,13 +13,14 @@ export function generateId(): string {
   return `${timestamp}-${randomNum}`;
 }
 
-export function search(list: Array<WhereCondition|FieldsJoinMapping>, id: string) {
+export function search(list: Array<WhereCondition<string|EmptyOneOf|OneOf>|FieldsJoinMapping>, id: string) {
   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 getEmptyOneOf = () => ({ code: '' }) as EmptyOneOf;
+export const getEmptyWhereCondition = (id = generateId()) => ({ field: getEmptyOneOf(), condition: '', data: '', id} as WhereCondition);
+export const getEmptyOnCondition = (id = generateId()) => ({ leftField: getEmptyOneOf(), rightField: getEmptyOneOf(), id } as FieldsJoinMapping);
+export const getEmptyFieldsMapping = (id = generateId()) => ({ leftField: getEmptyOneOf(), rightField: getEmptyOneOf(), id } as FieldsJoinMapping);
 
 export function createEmptyJoinTable(id = generateId()) {
   return resetTable({ id, app: '' } as JoinTable);
diff --git a/vue-project/my-kintone-plugin/src/types/model.d.ts b/vue-project/my-kintone-plugin/src/types/model.d.ts
index 2f22c0d..0870d4e 100644
--- a/vue-project/my-kintone-plugin/src/types/model.d.ts
+++ b/vue-project/my-kintone-plugin/src/types/model.d.ts
@@ -1,16 +1,21 @@
+import { OneOf } from './../js/kintone-rest-api-client';
 import type { ConditionValue } from '@/js/conditions';
 import type { Layout, Properties } from '@/js/kintone-rest-api-client';
 import type { DropdownItem } from 'kintone-ui-component';
 
-export interface FieldsJoinMapping {
+export type EmptyOneOf = {
+  code: '';
+};
+
+export interface FieldsJoinMapping<FieldType = OneOf | EmptyOneOf> {
   id: string;
-  leftField: string;
-  rightField: string;
+  leftField: FieldType;
+  rightField: FieldType;
 }
 
-export interface WhereCondition {
+export interface WhereCondition<FieldType = OneOf | EmptyOneOf> {
   id: string;
-  field: string;
+  field: FieldType;
   condition: ConditionValue;
   data: string;
 }