Add condition part

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 { types, type Layout, type Properties } from '@/js/kintone-rest-api-client';
+import {
+  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 { getEmptyWhereCondition, getFieldsDropdownItems } from '@/js/helper';
-import { conditionList, getComponent, type ConditionValue } from '@/js/conditions';
+import TableCombobox from './TableCombobox.vue';
+import { getFieldsDropdownItems } from '@/js/helper';
+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();
-          res.field = newValue;
-          props.modelValue[rowIndex] = res;
+          props.modelValue[rowIndex].field = newValue;
+          props.modelValue[rowIndex].condition = '';
+          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, {
-        items: conditionList,
+      const vnode = h(TableCondition, {
         modelValue: '',
+        index: rowIndex,
         selectedAppData,
+        whereConditions: props.modelValue,
         '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;
+          props.modelValue[rowIndex].condition = newValue as ConditionValue;
+          props.modelValue[rowIndex].data = '';
         },
       });
       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 { defineProps, defineEmits, inject, computed, ref, reactive, render, h, watch, onMounted } from 'vue';
+import type { CachedData, CachedSelectedAppData, FieldsJoinMapping } from '@/types/model';
+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>