try fix table

vue-project/my-kintone-plugin/src/components/Config.vue

@@ -19,7 +19,7 @@
 </template>
 <script setup lang="ts">
 import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
-import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
+import type { CachedData, FieldsInfo, SavedData } from '@/types/model';
 import type { Spinner } from 'kintone-ui-component';
 
 import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';

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

@@ -7,7 +7,7 @@
 
 <script setup lang="ts">
 import type { KucEvent } from '@/types/my-kintone';
-import type { DropdownItem } from 'kintone-ui-component';
+import type { ComboboxChangeEventDetail, DropdownItem } from 'kintone-ui-component';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
@@ -21,7 +21,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: KucEvent) => {
+const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
-  emit('update:modelValue', event.detail.value);
+  emit('update:modelValue', detail.value || '');
 };
 </script>

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

@@ -7,6 +7,7 @@
 
 <script setup lang="ts">
 import type { KucEvent } from '@/types/my-kintone';
+import type { TextInputEventDetail } from 'kintone-ui-component';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
@@ -19,7 +20,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: KucEvent) => {
+const updateValue = ({ detail }: KucEvent<TextInputEventDetail>) => {
-  emit('update:modelValue', event.detail.value);
+  emit('update:modelValue', detail.value || '');
 };
 </script>

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

@@ -43,7 +43,6 @@ import {
 } from '@/js/helper';
 import { types } from '@/js/kintone-rest-api-client';
 import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucEvent } from '@/types/my-kintone';
 import { computed, inject, provide, reactive, ref, watch } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
@@ -92,7 +91,7 @@ watch(
   { immediate: true },
 );
 
-const selectTable = (e: KucEvent) => {
+const selectTable = () => {
   resetConditions(props.table);
 };
 

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 type { CachedData, CachedSelectedAppData, EmptyOneOf, SavedData, WhereCondition } from '@/types/model';
-import { defineProps, inject, computed, render, h, reactive } from 'vue';
+import { defineProps, inject, computed, render, h, reactive, ref } from 'vue';
 import TableCombobox from './TableCombobox.vue';
-import { generateId, getFieldsDropdownItems, search } from '@/js/helper';
+import { generateId, getEmptyOneOf, getEmptyWhereCondition, getFieldsDropdownItems, search } from '@/js/helper';
-import type { ConditionValue } from '@/js/conditions';
 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.condition = ''), (obj.data = '');
-            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}) => {
+        'onUpdate:modelValue': ({ obj, value }) => {
-            obj && (obj.data = 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>

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,

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 { getEmptyOneOf, search } from '@/js/helper';
-import type { CachedSelectedAppData } from '@/types/model';
+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 type { ComboboxChangeEventDetail, DropdownItem } from 'kintone-ui-component';
-import { defineProps, defineEmits, type Ref, watch, ref } from 'vue';
+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) => {
+const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
-  emit('update:modelValue', { obj: search(props.dataList, props.id), value: event.detail.value });
+  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>

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

@@ -10,9 +10,10 @@
 
 <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';
 import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps<{
@@ -23,8 +24,11 @@ const props = defineProps<{
 }>();
 
 const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined);
-
+const items = computed(() => {
-const items = computed(() => getAvailableCondition(whereCondition.value?.field || '', props.selectedAppData.appFields));
+  console.log(props.whereConditions);
+  const field = whereCondition.value?.field || getEmptyOneOf();
+  return getAvailableCondition(field.code, props.selectedAppData.appFields);
+});
 
 type EmitData = {
   obj?: WhereCondition;
@@ -35,7 +39,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', data: EmitData): void;
 }>();
 
-const updateValue = (event: KucEvent) => {
+const updateValue = ({ detail }: KucEvent<ComboboxChangeEventDetail>) => {
-  emit('update:modelValue', { obj: whereCondition.value, value: event.detail.value as ConditionValue });
+  emit('update:modelValue', { obj: whereCondition.value, value: detail.value as ConditionValue });
 };
 </script>

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue

@@ -18,6 +18,7 @@ import { getComponent } from '@/js/conditions';
 import { search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
+import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
 import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps<{
@@ -33,14 +34,14 @@ const type = computed(() => getComponent(whereCondition.value?.condition || ''))
 
 type EmitData = {
   obj?: WhereCondition;
-  value: string;
+  value: string | '';
 };
 
 const emit = defineEmits<{
   (e: 'update:modelValue', data: EmitData): void;
 }>();
 
-const updateValue = (event: KucEvent) => {
+const updateValue = (event: KucEvent<ComboboxChangeEventDetail | TextInputEventDetail>) => {
-  emit('update:modelValue', { obj: whereCondition.value, value: event.detail.value });
+  emit('update:modelValue', { obj: whereCondition.value, value: event.detail.value || '' });
 };
 </script>

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

@@ -1,5 +1,5 @@
-import type { FieldsInfo, FieldsJoinMapping, JoinTable, WhereCondition } from '@/types/model';
+import type { EmptyOneOf, FieldsInfo, FieldsJoinMapping, JoinTable, WhereCondition } from '@/types/model';
-import { client, isType, type FieldType, type App, type Layout } from './kintone-rest-api-client';
+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 getEmptyOneOf = () => ({ code: '' }) as EmptyOneOf;
-export const getEmptyOnCondition = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
+export const getEmptyWhereCondition = (id = generateId()) => ({ field: getEmptyOneOf(), condition: '', data: '', id} as WhereCondition);
-export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '', id: generateId() } as FieldsJoinMapping);
+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);

vue-project/my-kintone-plugin/src/js/kintone-rest-api-client.ts

@@ -10,7 +10,7 @@ export type App = {
 export type Properties = Awaited<ReturnType<typeof client.app.getFormFields>>['properties'];
 export type Layout = Awaited<ReturnType<typeof client.app.getFormLayout>>['layout'];
 
-type OneOf = Properties[string];
+export type OneOf = Properties[string];
 export type FieldType = OneOf['type'];
 
 const typeNames = [

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;
+  leftField: FieldType;
-  rightField: string;
+  rightField: FieldType;
 }
 
-export interface WhereCondition {
+export interface WhereCondition<FieldType = OneOf | EmptyOneOf> {
   id: string;
-  field: string;
+  field: FieldType;
   condition: ConditionValue;
   data: string;
 }

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

@@ -1,9 +1,3 @@
-import type { TableChangeEventDetail } from 'kintone-ui-component';
+export interface KucEvent<T> {
-export interface KucEvent {
+  detail: T;
-  detail: {
-    value: string;
-  };
-}
-export interface KucTableEvent {
-  detail: TableChangeEventDetail;
 }