load app and fields

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;