finish join/mapping

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

@@ -17,7 +17,7 @@ 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 table = computed(() => selectedAppData.table.table);
 
 const columns = reactive([
   {
@@ -31,7 +31,7 @@ const columns = reactive([
       const vnode = h(TableCombobox, {
         items: computed(() =>
           getFieldsDropdownItems(selectedAppData.appFields, {
-            subTableCode: table.value,
+            subTableCode: '', //table.value,
             baseFilter: undefined,
             defaultLabel: 'すべてのレコード',
           }),

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

@@ -6,7 +6,7 @@
 import type { CachedData, CachedSelectedAppData, FieldsJoinMapping, WhereCondition } from '@/types/model';
 import { defineProps, inject, computed, reactive, render, h } from 'vue';
 import { generateId, getFieldObj, getFieldsDropdownItems, search } from '@/js/helper';
-import { getLeftAvailableJoinType, getRightAvailableJoinType, isForceDisable } from '@/js/join';
+import { getLeftAvailableJoinType, getRightAvailableJoinType, isLeftJoinForceDisable, isRightJoinForceDisable,  } from '@/js/join';
 import { getLeftAvailableMappingType, getRightAvailableMappingType } from '@/js/mapping';
 import TableCombobox from './TableCombobox.vue';
 import { type FieldType, type OneOf } from '@/js/kintone-rest-api-client';
@@ -23,10 +23,12 @@ const table = computed(() => selectedAppData.table.table);
 
 const filterFunc = {
   connect: {
+    subTable: table,
     left: (right?: OneOf | '') => getLeftAvailableJoinType(right),
     right: (left?: OneOf | '') => getRightAvailableJoinType(left),
   },
   mapping: {
+    subTable: computed(() => ''),
     left: (right?: OneOf | '') => getLeftAvailableMappingType(right),
     right: (left?: OneOf | '') => getRightAvailableMappingType(left),
   },
@@ -45,11 +47,11 @@ const columns = reactive([
         items: computed(() => {
           const dependFilterField = getField('rightField', rowData.id);
           return getFieldsDropdownItems(selectedAppData.appFields, {
-            subTableCode: table.value,
+            subTableCode: filterFunc[props.type].subTable.value,
             baseFilter: filterFunc[props.type].left() as FieldType[],
             filterType: filterFunc[props.type].left(dependFilterField),
             dependFilterField,
-            defaultDisableCallback: isForceDisable,
+            defaultDisableCallback: isLeftJoinForceDisable,
           });
         }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.leftField || ''),
@@ -89,7 +91,7 @@ const columns = reactive([
             baseFilter: filterFunc[props.type].right() as FieldType[],
             filterType: filterFunc[props.type].right(dependFilterField),
             dependFilterField,
-            defaultDisableCallback: isForceDisable,
+            defaultDisableCallback: props.type === 'connect' ? isRightJoinForceDisable : undefined,
           });
         }),
         modelValue: computed(() => (search(props.modelValue, rowData.id) as FieldsJoinMapping)?.rightField || ''),
@@ -112,7 +114,7 @@ function getField(key: 'leftField' | 'rightField', id: string) {
   const dataRow = search(props.modelValue, id) as FieldsJoinMapping | undefined;
   const fieldCode = dataRow ? dataRow[key] || '' : '';
   const targetFieldMap = key === 'leftField' ? selectedAppData.appFields : cachedData.currentAppFields;
-  const targetTable = key === 'leftField' ? table.value : '';
+  const targetTable = key === 'leftField' ? filterFunc[props.type].subTable.value : '';
   return getFieldObj(fieldCode, targetFieldMap, targetTable);
 }
 </script>

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

@@ -1,5 +1,6 @@
 <template>
   <kuc-combobox
+    className="kuc-text-input"
     :items="items.value"
     :value="modelValue.value"
     @change="updateValue"

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

@@ -2,7 +2,7 @@
   <kuc-combobox
     v-if="items?.length"
     :items="items"
-    :value="modelValue"
+    :value="value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
@@ -14,7 +14,7 @@ import { 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';
+import { defineProps, defineEmits, computed, watch, ref } from 'vue';
 
 const props = defineProps<{
   modelValue: string;
@@ -25,7 +25,25 @@ const props = defineProps<{
 
 const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined);
 
-const items = computed(() => getAvailableCondition(whereCondition.value?.field || '', props.selectedAppData.appFields, props.selectedAppData.table.table));
+const items = computed(() =>
+  getAvailableCondition(
+    whereCondition.value?.field || '',
+    props.selectedAppData.appFields,
+    props.selectedAppData.table.table,
+  ),
+);
+
+const value = ref(props.modelValue);
+
+watch(
+  () => items,
+  () => {
+    const option = items.value?.[0] || { value: '' };
+    value.value = option.value;
+    updateValue({ detail: option });
+  },
+  { deep: true },
+);
 
 type EmitData = {
   obj?: WhereCondition;