Fix load apps

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

@@ -1,23 +1,23 @@
 <template>
   <plugin-row class="table-area flex-row border">
-    <div class="table-main-area ">
+    <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" @change="selectApp" />
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown :disabled="!table.app" label="テーブル" :items="tables" v-model="table.table"  @change="select"/>
+        <plugin-dropdown :disabled="selectedAppData.loading" label="テーブル" :items="tableOptions" v-model="table.table" />
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
-        <plugin-table-connect-row connector="=" :disabled="!table.app" v-model="table.onConditions" />
+        <plugin-table-connect-row connector="=" v-model="table.onConditions" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="取得フィールド" />
-        <plugin-table-connect-row connector="→" :disabled="!table.app" v-model="table.fieldsMapping" />
+        <plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="絞込条件" />
-        <plugin-table-condition-row :disabled="!table.app" v-model="table.whereConditions" />
+        <plugin-table-condition-row v-model="table.whereConditions" />
       </plugin-row>
     </div>
     <div class="table-action-area">
@@ -27,30 +27,42 @@
 </template>
 
 <script setup lang="ts">
-import { fetchApps, fetchFields, getField, resetTable } from '@/js/helper';
-import { types } from '@/js/kintone-rest-api-client';
-import type { JoinTable, SavedData } from '@/types/model';
+import { EMPTY_OPTION, getFieldsDropdownItems, getTableFieldsDropdownItems, loadAppFieldsAndLayout, 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 { inject, onMounted, ref } from 'vue';
+import { computed, inject, onMounted, 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 apps = ref([] as KucDropdownItem[]);
-const tables = ref([] as KucDropdownItem[]);
+const apps = computed(() => cachedData.apps);
+const tableOptions = ref([EMPTY_OPTION]);
+const loading = ref(true);
 
-onMounted(async () => {
-  apps.value = await fetchApps();
+const selectedAppData: CachedSelectedAppData = reactive({
+  appFields: { fields: [], layout: [] } as FieldsInfo,
+  table: props.table,
+  loading: false,
 });
+provide('selectedAppData', selectedAppData);
 
 const selectApp = async (e: KucEvent) => {
+  loading.value = true;
+  const fields = await loadAppFieldsAndLayout(e.detail.value);
+  tableOptions.value = getTableFieldsDropdownItems(fields, types.SUBTABLE);
   resetTable(props.table);
-  tables.value = await fetchFields(e.detail.value, types.SUBTABLE);
-}
+  selectedAppData.appFields = fields;
+  loading.value = false;
+};
 
-const select = async (e: KucEvent) => {
-  console.log(getField(e.detail.value));
-}
+watch(
+  () => !props.table.app || loading.value,
+  (val) => {
+    selectedAppData.loading = val;
+  },
+);
 
 const isJoinConditionShown = (table: JoinTable) => {
   return savedData.joinTables[0].id !== table.id;

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

@@ -4,17 +4,20 @@
 
 <script setup lang="ts">
 import type { KucDropdownItem } from '@/types/my-kintone';
-import type { WhereCondition } from '@/types/model';
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+import type { CachedData, CachedSelectedAppData, SavedData, WhereCondition } from '@/types/model';
+import { defineProps, defineEmits, inject } from 'vue';
+import { Combobox } from 'kintone-ui-component/lib/combobox';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
-  disabled: boolean;
 }>();
 
+const savedData = inject<SavedData>('savedData') as SavedData;
+const cachedData = inject<CachedData>('cachedData') as CachedData;
+const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
+
 const renderDropdown = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },
@@ -25,7 +28,7 @@ const renderDropdown = (cellData: string) => {
 };
 
 const renderCondition = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },
@@ -36,7 +39,7 @@ const renderCondition = (cellData: string) => {
 };
 
 const renderDynamicData = (cellData: string) => {
-  const dropdown = new Dropdown({
+  const dropdown = new Combobox({
     items: [
       { label: 'John Brown', value: 'john' },
       { label: 'Steven Gerard', value: 'steven' },

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

@@ -1,60 +1,74 @@
 <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" @change="changeRow" />
 </template>
 
 <script setup lang="ts">
 import type { KucDropdownItem } from '@/types/my-kintone';
-import type { FieldsJoinMapping } from '@/types/model';
-import { defineProps, defineEmits } from 'vue';
-import { Dropdown } from 'kintone-ui-component/lib/dropdown';
+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';
 
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
-  disabled: boolean;
 }>();
 
-const renderDropdown = (cellData: string) => {
-  const dropdown = new Dropdown({
-    items: [
-      { label: 'John Brown', value: 'john' },
-      { label: 'Steven Gerard', value: 'steven' },
-    ],
-    value: cellData,
-  });
-  return dropdown;
-};
-const renderConnector = () => {
-  return props.connector;
-};
+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 columns = [
+const columns = reactive([
   {
     title: '取得元アプリのフィールド',
     field: 'leftField',
-    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) => {
+          props.modelValue[rowIndex].leftField = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
   {
     title: '',
     field: 'connector',
-    render: renderConnector,
+    render: () => {
+      return props.connector;
+    },
   },
   {
     title: 'このアプリのフィールド',
     field: 'rightField',
-    render: renderDropdown,
+    render: (cellData: string, rowData: any, rowIndex: number) => {
+      const container = document.createElement('div');
+      const vnode = h(TableCombobox, {
+        items: getFieldsDropdownItems(cachedData.currentAppFields, table.value),
+        modelValue: '',
+        selectedAppData,
+        'onUpdate:modelValue': (newValue: string) => {
+          props.modelValue[rowIndex].rightField = newValue;
+        },
+      });
+      render(vnode, container);
+      return container;
+    },
   },
-];
-
-const leftFields = [] as KucDropdownItem[];
-const rightFields = [] as KucDropdownItem[];
+]);
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
 }>();
 
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
-};
+const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {};
 
 const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
   item[key] = value;

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

@@ -0,0 +1,24 @@
+<template>
+  <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 { KucEvent } from '@/types/my-kintone';
+import type { DropdownItem } from 'kintone-ui-component';
+import { defineProps, defineEmits, ref, inject, watch, onMounted } from 'vue';
+
+const props = defineProps<{
+  items: DropdownItem[];
+  modelValue: string;
+  selectedAppData: CachedSelectedAppData;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+}>();
+
+const updateValue = (event: KucEvent) => {
+  emit('update:modelValue', event.detail.value);
+};
+</script>