fix load saved data

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

@@ -28,7 +28,7 @@ const props = defineProps<{ pluginId: string }>();
 const loading = ref(false);
 const data: SavedData = reactive({
   buttonName: '',
-  joinTables: [] as JoinTable[],
+  joinTables: [createEmptyJoinTable()],
 });
 
 const cachedData: CachedData = reactive({
@@ -43,15 +43,16 @@ const mainArea = shallowRef<HTMLElement | null>(null);
 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 () => {
+    spinner.value?.close(); // fix bug: kuc-spinner will not auto amount to target HTML element when init loading
+    const savedData = kintone.plugin.app.getConfig(props.pluginId);
     loading.value = true;
     cachedData.apps = await loadApps();
     cachedData.currentAppFields = await loadAppFieldsAndLayout();
+    if (savedData?.joinTables) {
+      data.joinTables = JSON.parse(savedData.joinTables); //TODO JSON;
+    }
+    data.buttonName = savedData?.buttonName || '集約';
     loading.value = false;
   });
 });

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

@@ -2,7 +2,7 @@
   <plugin-row class="table-area flex-row border">
     <div class="table-main-area">
       <plugin-row>
-        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp" />
+        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" />
       </plugin-row>
       <plugin-row>
         <plugin-dropdown
@@ -11,6 +11,7 @@
           :items="tableOptions"
           v-model="table.table"
           @change="selectTable"
+          :key="componentKey"
         />
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
@@ -48,10 +49,12 @@ import { computed, inject, provide, reactive, ref, watch } from 'vue';
 const savedData = inject<SavedData>('savedData') as SavedData;
 const cachedData = inject<CachedData>('cachedData') as CachedData;
 
-const props = defineProps<{ table: JoinTable }>();
+const props = defineProps<{
+  table: JoinTable;
+}>();
 const apps = computed(() => cachedData.apps);
 const tableOptions = ref([EMPTY_OPTION]);
-const loading = ref(true);
+const loading = ref(false);
 
 const selectedAppData: CachedSelectedAppData = reactive({
   appFields: { fields: {}, layout: [] } as FieldsInfo,
@@ -60,14 +63,35 @@ const selectedAppData: CachedSelectedAppData = reactive({
 });
 provide('selectedAppData', selectedAppData);
 
-const selectApp = async (e: KucEvent) => {
+const componentKey = ref(0);
-  loading.value = true;
+// fix-bug: force select saved data when load config
-  const fields = await loadAppFieldsAndLayout(e.detail.value);
+watch(
-  tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
+  () => tableOptions.value,
-  resetTable(props.table);
+  () => {
-  selectedAppData.appFields = fields;
+    if (!props.table.table) return;
-  loading.value = false;
+    debugger
-};
+    componentKey.value += 1;
+  },
+  {
+    once: true,
+  },
+);
+
+watch(
+  () => props.table.app,
+  async (newVal, oldVal) => {
+    if (!newVal) {
+      return;
+    }
+    loading.value = true;
+    const fields = await loadAppFieldsAndLayout(newVal);
+    tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
+    selectedAppData.appFields = fields;
+    !!oldVal && resetTable(props.table);
+    loading.value = false;
+  },
+  { immediate: true },
+);
 
 const selectTable = (e: KucEvent) => {
   resetConditions(props.table);

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

@@ -4,7 +4,7 @@
 
 <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 { defineProps, inject, computed, render, h } from 'vue';
 import TableCombobox from './TableCombobox.vue';
 import { getFieldsDropdownItems } from '@/js/helper';
 import type { ConditionValue } from '@/js/conditions';
@@ -27,11 +27,11 @@ const columns = [
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(selectedAppData.appFields, {
+        items: computed(() => getFieldsDropdownItems(selectedAppData.appFields, {
           subTableCode: table.value,
           defaultLabel: 'すべてのレコード',
-        }),
+        })),
-        modelValue: '',
+        modelValue: props.modelValue[rowIndex].field,
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
           props.modelValue[rowIndex].field = newValue;
@@ -49,7 +49,7 @@ const columns = [
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCondition, {
-        modelValue: '',
+        modelValue: props.modelValue[rowIndex].condition,
         index: rowIndex,
         selectedAppData,
         whereConditions: props.modelValue,
@@ -68,7 +68,7 @@ const columns = [
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableConditionValue, {
-        modelValue: '',
+        modelValue: props.modelValue[rowIndex].data,
         index: rowIndex,
         selectedAppData,
         whereConditions: props.modelValue,

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

@@ -24,8 +24,8 @@ const columns = reactive([
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(selectedAppData.appFields, { subTableCode: table.value, filterType: undefined }),
+        items: computed(() => getFieldsDropdownItems(selectedAppData.appFields, { subTableCode: table.value, filterType: undefined })),
-        modelValue: '',
+        modelValue: props.modelValue[rowIndex].leftField,
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
           props.modelValue[rowIndex].leftField = newValue;
@@ -48,8 +48,8 @@ const columns = reactive([
     render: (cellData: string, rowData: any, rowIndex: number) => {
       const container = document.createElement('div');
       const vnode = h(TableCombobox, {
-        items: getFieldsDropdownItems(cachedData.currentAppFields, { filterType: undefined }),
+        items: computed(()=>getFieldsDropdownItems(cachedData.currentAppFields, { filterType: undefined })),
-        modelValue: '',
+        modelValue: props.modelValue[rowIndex].rightField,
         selectedAppData,
         'onUpdate:modelValue': (newValue: string) => {
           props.modelValue[rowIndex].rightField = newValue;

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

@@ -1,8 +1,9 @@
 <template>
   <kuc-combobox
-    :items="items"
+    :items="items.value"
     :value="modelValue"
     @change="updateValue"
+    :key="componentKey"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
 </template>
@@ -11,14 +12,27 @@
 import type { CachedSelectedAppData } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { DropdownItem } from 'kintone-ui-component';
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, type Ref, watch, ref } from 'vue';
 
 const props = defineProps<{
-  items: DropdownItem[];
+  items: Ref<DropdownItem[]>;
   modelValue: string;
   selectedAppData: CachedSelectedAppData;
 }>();
 
+const componentKey = ref(0);
+// fix-bug: force select saved data when load config
+watch(
+  () => props.items.value,
+  () => {
+    if (!props.modelValue) return;
+    componentKey.value += 1;
+  },
+  {
+    once: true,
+  },
+);
+
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();