start up

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

@@ -1,38 +1,52 @@
 <template>
-<!-- <section class="settings"> -->
   <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 type="text" class="js-text-message kintoneplugin-input-text">
+        <input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
       </label>
     </p>
     <p class="kintoneplugin-row">
-        <button type="button" class="js-cancel-button kintoneplugin-button-dialog-cancel">Cancel</button>
-        <button class="kintoneplugin-button-dialog-ok">Save</button>
+      <kuc-button text="Cancel" type="normal" @click="cancel" />
+      <kuc-button text="Save" type="submit" @click="save" />
     </p>
   </form>
-<!-- </section> -->
 </template>
-<script setup>
-import { ref } from 'vue';
-import '../css/51-modern-default.css';
-import '../css/config.css';
+<script setup lang="ts">
+import { onMounted, reactive } from 'vue';
 
-defineProps({
-  msg: String,
+const props = defineProps<{ pluginId: string }>();
+const data: {
+  message: string;
+} = reactive({
+  message: '',
 });
 
-const count = ref(0)
-</script>
+onMounted(async () => {
+  const savedData = kintone.plugin.app.getConfig(props.pluginId);
+  data.message = JSON.parse(savedData.message);
+});
 
+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();
+    // }
+  );
+}
+
+function cancel() {
+  window.location.href = `../../${kintone.app.getId()}/plugin/`;
+}
+</script>
 <style scoped>
 .settings-heading {
   padding: 1em 0;
 }
-
 .kintoneplugin-input-text {
   width: 20em;
 }