finish UI

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

@@ -1,53 +1,63 @@
 <template>
-  <h2 class="settings-heading">Settings for data fetch pluging</h2>
-  <p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
-  <form class="js-submit-settings">
-    <p class="kintoneplugin-row">
-      <label for="message">
-        Message:
-        <input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
-      </label>
-    </p>
-    <p class="kintoneplugin-row">
-      <kuc-button text="Cancel" type="normal" @click="cancel" />
-      <kuc-button text="Save" type="submit" @click="save" />
-    </p>
-  </form>
+  <h2 class="settings-heading">{{ $t('config.title') }}</h2>
+  <p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
+
+  <plugin-row class="header-row border">
+    <plugin-input v-model="data.buttonName" 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>
+
+  <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>
 </template>
 <script setup lang="ts">
-import { onMounted, reactive } from 'vue';
+import { createEmptyJoinTable } from '@/js/helper';
+import type { JoinTable, SavedData } from '@/types/model';
+
+import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
 
 const props = defineProps<{ pluginId: string }>();
-const data: {
-  message: string;
-} = reactive({
-  message: '',
+const loading = ref(true);
+const data: SavedData = reactive({
+  buttonName: '',
+  joinTables: [] as JoinTable[],
 });
 
+provide('savedData', data);
+
 onMounted(async () => {
   const savedData = kintone.plugin.app.getConfig(props.pluginId);
-  data.message = JSON.parse(savedData.message);
+  data.buttonName = savedData?.buttonName || '集約';
+  data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
+  loading.value = false;
 });
 
+const mainTable = computed(() => data.joinTables[0]);
+const otherTables = computed(() => data.joinTables.slice(1));
+
+watch(
+  () => data.joinTables.length,
+  (newLength) => {
+    if (newLength === 1) {
+      data.joinTables[0].onConditions = [];
+    }
+  },
+);
+
 function save() {
-  kintone.plugin.app.setConfig(
-    { message: JSON.stringify(data.message) },
-    // () => {
-    //   alert("The plug-in settings have been saved. Please update the app!");
-    //   window.location.href = "../../flow?app=" + kintone.app.getId();
-    // }
-  );
+  kintone.plugin.app.setConfig({
+    buttonName: data.buttonName,
+    joinTables: JSON.stringify(data.joinTables || []),
+  });
 }
 
 function cancel() {
   window.location.href = `../../${kintone.app.getId()}/plugin/`;
 }
 </script>
-<style scoped>
-.settings-heading {
-  padding: 1em 0;
-}
-.kintoneplugin-input-text {
-  width: 20em;
-}
-</style>