load app and fields

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

@@ -3,27 +3,29 @@
   <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
 
   <plugin-row class="header-row border">
-    <plugin-input v-model="data.buttonName" label="集約ボタン名" />
+    <plugin-input v-model="data.buttonName" placeholder="集約" label="集約ボタン名" />
   </plugin-row>
 
-  <div v-if="!loading">
-    <plugin-table-area :table="mainTable" :key="mainTable.id" />
-    <plugin-table-area v-for="joinTable in otherTables" :table="joinTable" :key="joinTable.id" />
+  <div id="main-area" ref="mainArea">
+    <plugin-table-area v-for="joinTable in data.joinTables" :table="joinTable" :key="joinTable.id" />
   </div>
 
   <plugin-row class="footer-row border">
     <kuc-button text="キャンセル" type="normal" @click="cancel" />
     <kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
   </plugin-row>
+
+  <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable } from '@/js/helper';
+import { createEmptyJoinTable, fetchApps } from '@/js/helper';
 import type { JoinTable, SavedData } from '@/types/model';
+import type { KucSpinnerEl } from '@/types/my-kintone';
 
-import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
+import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from 'vue';
 
 const props = defineProps<{ pluginId: string }>();
-const loading = ref(true);
+const loading = ref(false);
 const data: SavedData = reactive({
   buttonName: '',
   joinTables: [] as JoinTable[],
@@ -31,15 +33,24 @@ const data: SavedData = reactive({
 
 provide('savedData', data);
 
+const mainArea = shallowRef<HTMLElement | null>(null);
+const spinner = shallowRef<KucSpinnerEl | null>(null);
+
 onMounted(async () => {
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
   data.buttonName = savedData?.buttonName || '集約';
-  data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
-  loading.value = false;
+  data.joinTables = savedData?.joinTables ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable()];
+  nextTick(async () => {
+    spinner.value?.close(); // 修复不自动挂载到节点的 bug
+    loading.value = true;
+    await fetchApps();
+    loading.value = false;
+  });
 });
 
-const mainTable = computed(() => data.joinTables[0]);
-const otherTables = computed(() => data.joinTables.slice(1));
+watch(loading, (load) => {
+  load ? spinner.value?.open() : spinner.value?.close();
+});
 
 watch(
   () => data.joinTables.length,

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

@@ -1,16 +1,19 @@
 <template>
   <div class="kintoneplugin-input-container flex-row">
     <plugin-label v-if="label" :label="label" />
-    <kuc-dropdown className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" />
+    <kuc-combobox className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" :disabled="disabled"/>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
+import type { DropdownItem } from 'kintone-ui-component';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
   label: string;
-  items: kintone.fieldTypes.DropDown['Item'][];
+  disabled: boolean;
+  items: DropdownItem[];
   modelValue: string;
 }>();
 
@@ -18,7 +21,7 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: kintone.Event) => {
+const updateValue = (event: KucEvent) => {
   emit('update:modelValue', event.detail.value);
 };
 </script>

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

@@ -1,23 +1,25 @@
 <template>
   <div class="kintoneplugin-input-container flex-row">
     <plugin-label v-if="label" :label="label" />
-    <kuc-text className="kuc-text-input" :value="modelValue" @change="updateValue" />
+    <kuc-text :placeholder="placeholder" className="kuc-text-input" :value="modelValue" @change="updateValue" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { KucEvent } from '@/types/my-kintone';
 import { defineProps, defineEmits } from 'vue';
 
 const props = defineProps<{
   label: string;
   modelValue: string;
+  placeholder: string;
 }>();
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void;
 }>();
 
-const updateValue = (event: kintone.Event) => {
+const updateValue = (event: KucEvent) => {
   emit('update:modelValue', event.detail.value);
 };
 </script>

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

@@ -2,22 +2,22 @@
   <plugin-row class="table-area flex-row border">
     <div class="table-main-area ">
       <plugin-row>
-        <plugin-dropdown label="取得元アプリ" :items="apps" v-model="table.app" />
+        <plugin-dropdown :disabled="false" label="取得元アプリ" :items="apps" v-model="table.app" @change="selectApp"/>
       </plugin-row>
       <plugin-row>
-        <plugin-dropdown label="テーブル" :items="tables" v-model="table.table" />
+        <plugin-dropdown :disabled="!table.app" label="テーブル" :items="tables" v-model="table.table"  @change="select"/>
       </plugin-row>
       <plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
         <plugin-label label="連結条件" />
-        <plugin-table-connect-row connector="=" v-model="table.onConditions" />
+        <plugin-table-connect-row connector="=" :disabled="!table.app" v-model="table.onConditions" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="取得フィールド" />
-        <plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
+        <plugin-table-connect-row connector="→" :disabled="!table.app" v-model="table.fieldsMapping" />
       </plugin-row>
       <plugin-row class="flex-row">
         <plugin-label label="絞込条件" />
-        <plugin-table-condition-row v-model="table.whereConditions" />
+        <plugin-table-condition-row :disabled="!table.app" v-model="table.whereConditions" />
       </plugin-row>
     </div>
     <div class="table-action-area">
@@ -27,40 +27,30 @@
 </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 { inject } from 'vue';
+import type { KucDropdownItem, KucEvent } from '@/types/my-kintone';
+import { inject, onMounted, ref } from 'vue';
 
 const savedData = inject<SavedData>('savedData') as SavedData;
 
 const props = defineProps<{ table: JoinTable }>();
-const apps = [
-  {
-    label: '-------',
-    value: '',
-  },
-  {
-    label: 'lable 1',
-    value: 'value 1',
-  },
-  {
-    label: 'lable 2',
-    value: 'value 2',
-  },
-];
-const tables = [
-  {
-    label: '-------',
-    value: '-------',
-  },
-  {
-    label: 'tables 1',
-    value: 'tables 1',
-  },
-  {
-    label: 'tables 2',
-    value: 'tables 2',
-  },
-];
+const apps = ref([] as KucDropdownItem[]);
+const tables = ref([] as KucDropdownItem[]);
+
+onMounted(async () => {
+  apps.value = await fetchApps();
+});
+
+const selectApp = async (e: KucEvent) => {
+  resetTable(props.table);
+  tables.value = await fetchFields(e.detail.value, types.SUBTABLE);
+}
+
+const select = async (e: KucEvent) => {
+  console.log(getField(e.detail.value));
+}
 
 const isJoinConditionShown = (table: JoinTable) => {
   return savedData.joinTables[0].id !== table.id;

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

@@ -3,12 +3,14 @@
 </template>
 
 <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';
 
 const props = defineProps<{
   modelValue: WhereCondition[];
+  disabled: boolean;
 }>();
 
 const renderDropdown = (cellData: string) => {
@@ -62,17 +64,17 @@ const columns = [
   },
 ];
 
-const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
-const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const leftFields = [] as KucDropdownItem[];
+const rightFields = [] as KucDropdownItem[];
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: FieldsJoinMapping[]): void;
+  (e: 'update:modelValue', value: WhereCondition[]): void;
 }>();
 
-const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+const changeRow = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
 };
 
-const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
+const changeField = (item: WhereCondition, key: keyof WhereCondition, value: string) => {
   item[key] = value;
   emit('update:modelValue', props.modelValue);
 };

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

@@ -3,6 +3,7 @@
 </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';
@@ -10,6 +11,7 @@ import { Dropdown } from 'kintone-ui-component/lib/dropdown';
 const props = defineProps<{
   connector: string;
   modelValue: FieldsJoinMapping[];
+  disabled: boolean;
 }>();
 
 const renderDropdown = (cellData: string) => {
@@ -44,8 +46,8 @@ const columns = [
   },
 ];
 
-const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
-const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
+const leftFields = [] as KucDropdownItem[];
+const rightFields = [] as KucDropdownItem[];
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: FieldsJoinMapping[]): void;