Add condition part

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

@@ -17,7 +17,8 @@ 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/condition/TableCombobox.vue')['default']
+    TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
-    TableInput: typeof import('./src/components/basic/condition/TableInput.vue')['default']
+    TableCondition: typeof import('./src/components/basic/conditions/TableCondition.vue')['default']
+    TableConditionValue: typeof import('./src/components/basic/conditions/TableConditionValue.vue')['default']
   }
 }

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

@@ -33,7 +33,7 @@ const data: SavedData = reactive({
 
 const cachedData: CachedData = reactive({
   apps: [EMPTY_OPTION],
-  currentAppFields: { fields: [], layout: [] } as FieldsInfo,
+  currentAppFields: { fields: {}, layout: [] } as FieldsInfo,
 });
 
 provide('savedData', data);
@@ -45,6 +45,7 @@ const spinner = shallowRef<Spinner | null>(null);
 onMounted(async () => {
   spinner.value?.close(); // 修复不自动挂载到节点的 bug
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
+  // TODO
   data.buttonName = savedData?.buttonName || '集約';
   data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
   nextTick(async () => {
@@ -62,7 +63,6 @@ watch(loading, (load) => {
 watch(
   () => data.joinTables.length,
   (newLength) => {
-    console.log(data.joinTables);
     if (newLength === 1) {
       data.joinTables[0].onConditions = [getEmptyOnCondition()];
     }

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

@@ -5,7 +5,13 @@
         <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" @change="selectTable" />
+        <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,11 +33,17 @@
 </template>
 
 <script setup lang="ts">
-import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, resetConditions, resetTable } from '@/js/helper';
+import {
-import { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
+  EMPTY_OPTION,
+  getTableFieldsDropdownItems,
+  loadAppFieldsAndLayout,
+  resetConditions,
+  resetTable,
+} 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, onMounted, provide, reactive, ref, watch } from 'vue';
+import { computed, inject, provide, reactive, ref, watch } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
@@ -42,7 +54,7 @@ const tableOptions = ref([EMPTY_OPTION]);
 const loading = ref(true);
 
 const selectedAppData: CachedSelectedAppData = reactive({
-  appFields: { fields: [], layout: [] } as FieldsInfo,
+  appFields: { fields: {}, layout: [] } as FieldsInfo,
   table: props.table,
   loading: false,
 });

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

@@ -5,9 +5,11 @@
 <script setup lang="ts">
 import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
 import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
-import TableCombobox from './condition/TableCombobox.vue';
+import TableCombobox from './TableCombobox.vue';
-import { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
+import { getFieldsDropdownItems } from '@/js/helper';
-import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
+import type { ConditionValue } from '@/js/conditions';
+import TableCondition from './conditions/TableCondition.vue';
+import TableConditionValue from './conditions/TableConditionValue.vue';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
@@ -25,13 +27,16 @@ const columns = [
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
+        items: getFieldsDropdownItems(selectedAppData.appFields, {
+          subTableCode: table.value,
+          defaultLabel: 'すべてのレコード',
+        }),
         modelValue: '',
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
-          const res = getEmptyWhereCondition();
+          props.modelValue[rowIndex].field = newValue;
-          res.field = newValue;
+          props.modelValue[rowIndex].condition = '';
-          props.modelValue[rowIndex] = res;
+          props.modelValue[rowIndex].data = '';
         },
       });
       render(vnode, container);
@@ -43,16 +48,14 @@ const columns = [
     field: 'condition',
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
-      const vnode = h(TableCombobox, {
+      const vnode = h(TableCondition, {
-        items: conditionList,
         modelValue: '',
+        index: rowIndex,
         selectedAppData,
+        whereConditions: props.modelValue,
         'onUpdate:modelValue': (newValue: string) => {
-          const field = props.modelValue[rowIndex].field;
+          props.modelValue[rowIndex].condition = newValue as ConditionValue;
-          const res = getEmptyWhereCondition();
+          props.modelValue[rowIndex].data = '';
-          res.field = field;
-          res.condition = newValue as ConditionValue;
-          props.modelValue[rowIndex] = res;
         },
       });
       render(vnode, container);
@@ -63,12 +66,12 @@ const columns = [
     title: '',
     field: 'data',
     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, {
+      const vnode = h(TableConditionValue, {
         modelValue: '',
+        index: rowIndex,
         selectedAppData,
+        whereConditions: props.modelValue,
         'onUpdate:modelValue': (newValue: string) => {
           props.modelValue[rowIndex].data = newValue;
         },

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

@@ -3,10 +3,10 @@
 </template>
 
 <script setup lang="ts">
-import type { CachedData, CachedSelectedAppData, SavedData, FieldsJoinMapping, FieldsInfo } from '@/types/model';
+import type { CachedData, CachedSelectedAppData, FieldsJoinMapping } from '@/types/model';
-import { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
+import { defineProps, inject, computed, reactive, render, h } from 'vue';
 import { getFieldsDropdownItems } from '@/js/helper';
-import TableCombobox from './condition/TableCombobox.vue';
+import TableCombobox from './TableCombobox.vue';
 
 const props = defineProps<{
   connector: string;
@@ -24,7 +24,7 @@ const columns = reactive([
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(selectedAppData.appFields, table.value),
+        items: getFieldsDropdownItems(selectedAppData.appFields, { subTableCode: table.value, filterType: undefined }),
         modelValue: '',
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
@@ -48,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, undefined),
+        items: getFieldsDropdownItems(cachedData.currentAppFields, { filterType: undefined }),
         modelValue: '',
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {

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

@@ -1,12 +1,17 @@
 <template>
-  <kuc-combobox :items="items" :value="modelValue" @change="updateValue" :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading" />
+  <kuc-combobox
+    :items="items"
+    :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 { CachedSelectedAppData } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { DropdownItem } from 'kintone-ui-component';
-import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
+import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
   items: DropdownItem[];

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

@@ -1,22 +0,0 @@
-<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/components/basic/conditions/TableCondition.vue

@@ -0,0 +1,35 @@
+<template>
+  <kuc-combobox
+    v-if="items?.length"
+    :items="items"
+    :value="modelValue"
+    @change="updateValue"
+    :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
+  />
+</template>
+
+<script setup lang="ts">
+import { getAvailableCondition } from '@/js/conditions';
+import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+  whereConditions: WhereCondition[];
+  index: number;
+}>();
+
+const items = computed(() =>
+  getAvailableCondition(props.whereConditions[props.index]?.field, props.selectedAppData.appFields),
+);
+
+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/components/basic/conditions/TableConditionValue.vue

@@ -0,0 +1,38 @@
+<template>
+  <kuc-text
+    v-if="type == 'kuc-text'"
+    :value="modelValue"
+    @change="updateValue"
+    :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
+  />
+  <kuc-combobox
+    v-if="type == 'kuc-combobox'"
+    :value="modelValue"
+    @change="updateValue"
+    :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
+  />
+</template>
+
+<script setup lang="ts">
+import { getComponent } from '@/js/conditions';
+import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps<{
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+  whereConditions: WhereCondition[];
+  index: number;
+}>();
+
+const type = computed(() => getComponent(props.whereConditions[props.index]?.condition));
+
+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

@@ -1,14 +1,8 @@
-import TableCombobox from '@/components/basic/condition/TableCombobox.vue';
+import type { FieldsInfo } from '@/types/model';
-import TableInput from '@/components/basic/condition/TableInput.vue';
+import type { FieldType } from './kintone-rest-api-client';
 
-const component = {
+// Condition
-  '': undefined,
+export type ConditionValue = '' | 'eq' | 'ne' | 'test';
-  input: TableInput,
-  select: TableCombobox,
-};
-export type ComponentType = keyof typeof component;
-
-export type ConditionValue = '' | 'eq' | 'ne';
 
 type ConditionItem = {
   value: ConditionValue;
@@ -21,10 +15,9 @@ 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 },
+  { value: 'test', label: 'test combobox', type: 'select', 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;
@@ -33,6 +26,29 @@ export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList
   {} as Record<ConditionValue, ConditionItem>,
 );
 
+// Field Type -> Condition
+type FieldConditions = Partial<Record<FieldType, ConditionValue[]>>;
+
+const fieldConditions: FieldConditions = {
+  SINGLE_LINE_TEXT: ['eq', 'ne'],
+  NUMBER: ['ne', 'test'],
+} as const;
+
+export const getAvailableCondition = (fieldCode: string, { fields }: FieldsInfo) => {
+  if (!fieldCode||!fields) return;
+  const conditions = fieldConditions[fields[fieldCode]?.type] || [];
+  return conditions.map((condition) => conditionMap[condition]);
+};
+
+// Condition -> Component
+
+const component = {
+  '': undefined,
+  input: 'kuc-text',
+  select: 'kuc-combobox',
+};
+export type ComponentType = keyof typeof component;
 export const getComponent = (value: ConditionValue) => {
+  if (!value) return;
   return component[conditionMap[value].type];
 };

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

@@ -1,14 +1,13 @@
 import type { FieldsInfo, JoinTable, WhereCondition } from '@/types/model';
-import { client, isType, type OneOf, type App, type Layout } from './kintone-rest-api-client';
+import { client, isType, type FieldType, 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 getEmptyWhereCondition = () => ({ field: '', condition: '', data: '' }) as WhereCondition;
 export const getEmptyOnCondition = () => ({ leftField: '', rightField: '' });
 export const getEmptyFieldsMapping = () => ({ leftField: '', rightField: '' });
 
@@ -50,10 +49,10 @@ export const loadAppFieldsAndLayout = async (appId: string | number = kintone.ap
   } as FieldsInfo;
 };
 
+type Param = { subTableCode?: string; filterType?: FieldType; defaultLabel?: string };
 export const getFieldsDropdownItems = (
   { fields, layout }: FieldsInfo,
-  subTableCode?: string,
+  { subTableCode, filterType, defaultLabel }: Param = {},
-  filterType?: OneOf['type'],
 ) => {
   // get used field codes
   let fieldOrder: string[];
@@ -61,26 +60,31 @@ export const getFieldsDropdownItems = (
   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;
+    const subTableFieldMap = fieldMap[subTableCode] as { fields: Record<string, any> } | undefined;
+    fieldMap = subTableFieldMap?.fields || {};
   } else {
     fieldOrder = extractNoSubTableFields(layout);
   }
+
   // create labels
-  return fieldOrder.reduce(
+  const labels = [
-    (acc, fieldCode) => {
+    {
-      const field = fieldMap[fieldCode];
+      value: EMPTY_OPTION.value,
-      if (!fieldCode || filterType && !isType[filterType](field)) return acc;
+      label: defaultLabel || EMPTY_OPTION.label,
-      acc.push({
-        value: fieldCode,
-        label: field.label + '（FC: ' + fieldCode + '）',
-      });
-      return acc;
     },
-    [EMPTY_OPTION],
+  ];
-  );
+  return fieldOrder.reduce((acc, fieldCode) => {
+    const field = fieldMap[fieldCode];
+    if (!fieldCode || (filterType && !isType[filterType](field))) return acc;
+    acc.push({
+      value: fieldCode,
+      label: field.label + '（FC: ' + fieldCode + '）',
+    });
+    return acc;
+  }, labels);
 };
 
-export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: OneOf['type']) => {
+export const getTableFieldsDropdownItems = ({ fields }: FieldsInfo, filterType?: FieldType) => {
   return Object.keys(fields).reduce(
     (acc, fieldCode) => {
       const field = fields[fieldCode];

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

@@ -9,7 +9,9 @@ export type App = {
 
 export type Properties = Awaited<ReturnType<typeof client.app.getFormFields>>['properties'];
 export type Layout = Awaited<ReturnType<typeof client.app.getFormLayout>>['layout'];
-export type OneOf = Properties[string];
+
+type OneOf = Properties[string];
+export type FieldType = OneOf['type'];
 
 const typeNames = [
   'RECORD_NUMBER',
@@ -40,7 +42,7 @@ const typeNames = [
   'GROUP',
   'REFERENCE_TABLE',
   'SUBTABLE',
-] as const satisfies readonly OneOf['type'][];
+] as const satisfies readonly FieldType[];
 
 export const types = typeNames.reduce(
   (acc, name) => {
@@ -50,11 +52,11 @@ export const types = typeNames.reduce(
   {} as Record<(typeof typeNames)[number], (typeof typeNames)[number]>,
 );
 
-type ExtractOneOf<T extends OneOf['type']> = Extract<OneOf, { type: T }>;
+type ExtractOneOf<T extends FieldType> = Extract<OneOf, { type: T }>;
-function createTypeGuard<T extends OneOf['type']>(type: T) {
+function createTypeGuard<T extends FieldType>(type: T) {
   return (value: OneOf): value is ExtractOneOf<T> => value.type === type;
 }
 
 export const isType = Object.fromEntries(
-  typeNames.map((typeName) => [typeName, createTypeGuard(typeName as OneOf['type'])]),
+  typeNames.map((typeName) => [typeName, createTypeGuard(typeName as FieldType)]),
 ) as { [K in (typeof typeNames)[number]]: (value: OneOf) => value is ExtractOneOf<K> };

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

@@ -1,5 +1,5 @@
 import type { ConditionValue } from '@/js/conditions';
-import type { Layout } from '@/js/kintone-rest-api-client';
+import type { Layout, Properties } from '@/js/kintone-rest-api-client';
 import type { DropdownItem } from 'kintone-ui-component';
 
 export interface FieldsJoinMapping {