update

vue-project/my-kintone-plugin/components.d.ts

@@ -17,6 +17,7 @@ declare module 'vue' {
     PluginTableArea: typeof import('./src/components/basic/PluginTableArea.vue')['default']
     PluginTableConditionRow: typeof import('./src/components/basic/PluginTableConditionRow.vue')['default']
     PluginTableConnectRow: typeof import('./src/components/basic/PluginTableConnectRow.vue')['default']
-    TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
+    TableCombobox: typeof import('./src/components/basic/condition/TableCombobox.vue')['default']
+    TableInput: typeof import('./src/components/basic/condition/TableInput.vue')['default']
   }
 }

vue-project/my-kintone-plugin/env.d.ts

@@ -1,2 +1,8 @@
 /// <reference types="vite/client" />
 /// <reference types="kintone" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

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

@@ -18,9 +18,9 @@
   <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION } from '@/js/helper';
+import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition } from '@/js/helper';
 import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucDropdownItem, KucSpinnerEl } from '@/types/my-kintone';
+import type { Spinner } from 'kintone-ui-component';
 
 import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
 
@@ -40,7 +40,7 @@ provide('savedData', data);
 provide('cachedData', cachedData);
 
 const mainArea = shallowRef<HTMLElement | null>(null);
-const spinner = shallowRef<KucSpinnerEl | null>(null);
+const spinner = shallowRef<Spinner | null>(null);
 
 onMounted(async () => {
   spinner.value?.close(); // 修复不自动挂载到节点的 bug
@@ -64,7 +64,7 @@ watch(
   (newLength) => {
     console.log(data.joinTables);
     if (newLength === 1) {
-      data.joinTables[0].onConditions = [{ leftField: '', rightField: '' }];
+      data.joinTables[0].onConditions = [getEmptyOnCondition()];
     }
   },
 );

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

@@ -5,7 +5,7 @@
         <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp" />
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" />
+        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" @change="selectTable" />
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
@@ -27,10 +27,10 @@
 </template>
 
 <script setup lang="ts">
-import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetTable } from '@/js/helper';
+import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetConditions, resetTable } from '@/js/helper';
 import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
 import type { CachedData, CachedSelectedAppData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
-import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
+import type { KucEvent } from '@/types/my-kintone';
 import { computed, inject, onMounted, provide, reactive, ref, watch } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
@@ -57,6 +57,10 @@ const selectApp = async (e: KucEvent) => {
   loading.value = false;
 };
 
+const selectTable = (e: KucEvent) => {
+  resetConditions(props.table);
+};
+
 watch(
   () => !props.table.app || loading.value,
   (val) => {

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

@@ -1,12 +1,13 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
 </template>
 
 <script setup lang="ts">
-import type { KucDropdownItem } from '@/types/my-kintone';
 import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
-import { defineProps, defineEmits, inject } from 'vue';
+import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import { Combobox } from 'kintone-ui-component/lib/combobox';
+import TableCombobox from './condition/TableCombobox.vue';
+import { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
+import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
@@ -15,70 +16,66 @@ const props = defineProps<{
 const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
-
+const table = computed(() => selectedAppData.table.table);
-const renderDropdown = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderCondition = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-
-const renderDynamicData = (cellData: string) => {
-  const dropdown = new Combobox({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
 
 const columns = [
   {
     title: '取得元アプリのフィールド',
     field: 'field',
-    render: renderDropdown,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          const res = getEmptyWhereCondition();
+          res.field = newValue;
+          props.modelValue[rowIndex] = res;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'condition',
-    render: renderCondition,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: conditionList,
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          const field = props.modelValue[rowIndex].field;
+          const res = getEmptyWhereCondition();
+          res.field = field;
+          res.condition = newValue as ConditionValue;
+          props.modelValue[rowIndex] = res;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'data',
-    render: renderDynamicData,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const vueComponent = getComponent(props.modelValue[rowIndex].condition);
+      if (!vueComponent) return cellData;
+      const container = document.createElement('div');
+      const vnode = h(vueComponent, {
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].data = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
 ];
-
-const leftFields = [] as KucDropdownItem[];
-const rightFields = [] as KucDropdownItem[];
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: WhereCondition[]): void;
-}>();
-
-const changeRow = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
-};
-
-const changeField = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
-  item[key] = value;
-  emit('update:modelValue', props.modelValue);
-};
 </script>

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

@@ -1,21 +1,18 @@
 <template>
-  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow" />
+  <kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" />
 </template>
 
 <script setup lang="ts">
-import type { KucDropdownItem } from '@/types/my-kintone';
 import type { CachedData, CachedSelectedAppData, SavedData, FieldsJoinMapping, FieldsInfo } from '@/types/model';
 import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import { Combobox } from 'kintone-ui-component/lib/combobox';
 import { getFieldsDropdownItems } from '@/js/helper';
-import TableCombobox from './TableCombobox.vue';
+import TableCombobox from './condition/TableCombobox.vue';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
 }>();
 
-const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 const table = computed(() => selectedAppData.table.table);
@@ -51,7 +48,7 @@ const columns = reactive([
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(cachedData.currentAppFields, table.value),
+        items: getFieldsDropdownItems(cachedData.currentAppFields, undefined),
         modelValue: '',
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
@@ -63,15 +60,4 @@ const columns = reactive([
     },
   },
 ]);
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
-}>();
-
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {};
-
-const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
-  item[key] = value;
-  emit('update:modelValue', props.modelValue);
-};
 </script>

vue-project/my-kintone-plugin/src/components/basic/condition/TableInput.vue

@@ -0,0 +1,22 @@
+<template>
+  <kuc-text :value="modelValue" @change="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" />
+</template>
+
+<script setup lang="ts">
+import type { CachedData, CachedSelectedAppData, SavedData } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: KucEvent) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>

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

@@ -0,0 +1,38 @@
+import TableCombobox from '@/components/basic/condition/TableCombobox.vue';
+import TableInput from '@/components/basic/condition/TableInput.vue';
+
+const component = {
+  '': undefined,
+  input: TableInput,
+  select: TableCombobox,
+};
+export type ComponentType = keyof typeof component;
+
+export type ConditionValue = '' | 'eq' | 'ne';
+
+type ConditionItem = {
+  value: ConditionValue;
+  label: string;
+  type: ComponentType;
+  func: (a: string, b: string) => boolean;
+};
+
+export const conditionList: ConditionItem[] = [
+  { value: '', label: '--------', type: '', func: (a: string, b: string) => true },
+  { value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b },
+  { value: 'ne', label: '≠ （等しくない）', type: 'input', func: (a: string, b: string) => a !== b },
+];
+
+// type ConditionItem = (typeof conditionList)[number];
+
+export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList.reduce(
+  (map, item) => {
+    map[item.value] = item;
+    return map;
+  },
+  {} as Record<ConditionValue, ConditionItem>,
+);
+
+export const getComponent = (value: ConditionValue) => {
+  return component[conditionMap[value].type];
+};

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

@@ -1,38 +1,37 @@
-import type { FieldsInfo, JoinTable } from '@/types/model';
+import type { FieldsInfo, JoinTable, WhereCondition } from '@/types/model';
-import type { KucDropdownItem } from '@/types/my-kintone';
 import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
+import type { DropdownItem } from 'kintone-ui-component';
+
+
+export const EMPTY_OPTION = {
+  value: '',
+  label: '--------',
+} as DropdownItem;
+
+export const getEmptyWhereCondition = () => ({ field: '', condition: '', data: '' } as WhereCondition);
+export const getEmptyOnCondition = () => ({ leftField: '', rightField: '' });
+export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '' });
 
-export const condition = {
-  unset: '',
-  eq: '=',
-};
 export function createEmptyJoinTable(id = Number(new Date())) {
-  return {
+  return resetTable({ id, app: '' } as JoinTable);
-    id,
-    app: '',
-    table: '',
-    onConditions: [{ leftField: '', rightField: '' }],
-    fieldsMapping: [{ leftField: '', rightField: '' }],
-    whereConditions: [{ field: '', condition: condition.unset, data: '' }],
-  } as JoinTable;
 }
 
 export function resetTable(table: JoinTable) {
   table.table = '';
-  table.whereConditions = [{ field: '', condition: condition.unset, data: '' }];
+  return resetConditions(table);
-  table.onConditions = [{ leftField: '', rightField: '' }];
-  table.fieldsMapping = [{ leftField: '', rightField: '' }];
 }
 
-export const EMPTY_OPTION = {
+export function resetConditions(table: JoinTable) {
-  value: "",
+  table.onConditions = [getEmptyOnCondition()];
-  label: "--------",
+  table.fieldsMapping = [getEmptyFieldsMapping()];
-} as KucDropdownItem;
+  table.whereConditions = [getEmptyWhereCondition()];
+  return table;
+}
 
 const LIMIT = 100; // 每次请求的最大应用数量
-export const loadApps = async (offset = 0, _apps: KucDropdownItem[] = []): Promise<KucDropdownItem[]> => {
+export const loadApps = async (offset = 0, _apps: DropdownItem[] = []): Promise<DropdownItem[]> => {
   const { apps } = await client.app.getApps({ limit: LIMIT, offset });
-  const allApps: KucDropdownItem[] = [
+  const allApps: DropdownItem[] = [
     ..._apps,
     ...apps.map((app: App) => ({ value: app.appId, label: app.name + '（ID: ' + app.appId + '）' })),
   ];
@@ -53,37 +52,47 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
 
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
-  subTable?: string,
+  subTableCode?: string,
   filterType?: OneOf['type'],
 ) => {
+  // get used field codes
   let fieldOrder: string[];
-  if (subTable) {
+  let fieldMap = fields;
-    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTable) as any;
+  if (subTableCode) {
+    const subTableFields = layout.find((each) => each.type === 'SUBTABLE' && each.code === subTableCode) as any;
     fieldOrder = subTableFields?.fields.map((field: { code: string }) => field.code) || [];
+    fieldMap = fieldMap[subTableCode].fields;
   } else {
     fieldOrder = extractNoSubTableFields(layout);
   }
-  return fieldOrder.reduce((acc, fieldCode) => {
+  // create labels
-    const field = fields[fieldCode];
+  return fieldOrder.reduce(
-    if (filterType && !isType[filterType](field)) return acc;
+    (acc, fieldCode) => {
-    acc.push({
+      const field = fieldMap[fieldCode];
-      value: fieldCode,
+      if (!fieldCode || filterType && !isType[filterType](field)) return acc;
-      label: field.label + '（FC: ' + fieldCode + '）',
+      acc.push({
-    });
+        value: fieldCode,
-    return acc;
+        label: field.label + '（FC: ' + fieldCode + '）',
-  }, [EMPTY_OPTION]);
+      });
+      return acc;
+    },
+    [EMPTY_OPTION],
+  );
 };
 
 export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
-  return Object.keys(fields).reduce((acc, fieldCode) => {
+  return Object.keys(fields).reduce(
-    const field = fields[fieldCode];
+    (acc, fieldCode) => {
-    if (filterType && !isType[filterType](field)) return acc;
+      const field = fields[fieldCode];
-    acc.push({
+      if (filterType && !isType[filterType](field)) return acc;
-      value: fieldCode,
+      acc.push({
-      label: field.label + '（FC: ' + fieldCode + '）',
+        value: fieldCode,
-    });
+        label: field.label + '（FC: ' + fieldCode + '）',
-    return acc;
+      });
-  }, [EMPTY_OPTION]);
+      return acc;
+    },
+    [EMPTY_OPTION],
+  );
 };
 
 const extractNoSubTableFields = (layout: Layout) => {

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

@@ -1,7 +1,6 @@
-import { Layout } from './../js/kintone-rest-api-client';
+import type { ConditionValue } from '@/js/conditions';
 import type { Layout } from '@/js/kintone-rest-api-client';
-import { condition } from './helper';
+import type { DropdownItem } from 'kintone-ui-component';
-import type { KucDropdownItem } from './my-kintone';
 
 export interface FieldsJoinMapping {
   leftField: string;
@@ -10,7 +9,7 @@ export interface FieldsJoinMapping {
 
 export interface WhereCondition {
   field: string;
-  condition: (typeof condition)[keyof typeof condition];
+  condition: ConditionValue;
   data: string;
 }
 
@@ -35,7 +34,7 @@ export interface FieldsInfo {
 }
 
 export interface CachedData {
-  apps: KucDropdownItem[],
+  apps: DropdownItem[],
   currentAppFields: FieldsInfo,
 }
 

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

@@ -1,15 +1,3 @@
-// 组件相关
-export interface KucDropdownItem {
-  label: string;
-  value: string;
-  disabled?: boolean;
-}
-
-export interface KucSpinnerEl {
-  open: function;
-  close: function;
-}
-
 export interface KucEvent {
   detail: {
     value: string;