first commit

2024-08-12 08:42:51 +07:00
parent 6deeec116e
commit 2051b6439d
82 changed files with 78274 additions and 0 deletions
--- a/testmulticomponent/components/ComponentA.js
+++ b/testmulticomponent/components/ComponentA.js
@@ -0,0 +1,26 @@
+// components/ComponentA.js
+
+const ComponentA = {
+    template: `
+      <div>
+        <h2>Component A</h2>
+        <p>Count: {{ count }}</p>
+        <v-btn @click="increment">Increment</v-btn>
+        <v-btn @click="decrement">Decrement</v-btn>
+      </div>
+    `,
+    computed: {
+      count() {
+        return this.$store.state.count;
+      }
+    },
+    methods: {
+      increment() {
+        this.$store.dispatch('increment');
+      },
+      decrement() {
+        this.$store.dispatch('decrement');
+      }
+    }
+  };
+  
--- a/testmulticomponent/components/ComponentB.js
+++ b/testmulticomponent/components/ComponentB.js
@@ -0,0 +1,22 @@
+// components/ComponentB.js
+
+const ComponentB = {
+    template: `
+      <div>
+        <h2>Component B</h2>
+        <p>Data: {{ data }}</p>
+        <v-btn @click="fetchData">Fetch Data</v-btn>
+      </div>
+    `,
+    computed: {
+      data() {
+        return this.$store.state.data;
+      }
+    },
+    methods: {
+      async fetchData() {
+        await this.$store.dispatch('fetchData');
+      }
+    }
+  };
+  
--- a/testmulticomponent/index.html
+++ b/testmulticomponent/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vue 3 with Vuetify, Vuex, and Multiple Components</title>
+  <!-- Vuetify CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" rel="stylesheet">
+  <!-- Google Fonts (optional) -->
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div id="app"></div>
+
+  <!-- Vue.js -->
+  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
+  <!-- Vuex -->
+  <script src="https://cdn.jsdelivr.net/npm/vuex@next"></script>
+  <!-- Vuetify -->
+  <script src="https://cdn.jsdelivr.net/npm/vuetify@3"></script>
+  <!-- Axios -->
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <!-- Store JS -->
+  <script src="store/store.js"></script>
+  <!-- Component JS -->
+  <script src="components/ComponentA.js"></script>
+  <script src="components/ComponentB.js"></script>
+
+  <script>
+    // Define Vue components in global scope
+    //Vue.createApp({}).component('component-a', ComponentA);
+    //Vue.createApp({}).component('component-b', ComponentB);
+
+    // Vue App
+    const app = Vue.createApp({
+        components: {
+            'component-a': ComponentA,
+            'component-b': ComponentB
+          },
+      setup() {
+        const store = Vuex.useStore();
+        const count = Vue.computed(() => store.state.count);
+        const data = Vue.computed(() => store.state.data);
+
+        function increment() {
+          store.dispatch('increment');
+        }
+
+        function decrement() {
+          store.dispatch('decrement');
+        }
+
+        function fetchData() {
+          store.dispatch('fetchData');
+        }
+
+        return { count, data, increment, decrement, fetchData };
+      },
+      template: `
+        <v-container>
+
+          <v-card>
+
+          <component-a></component-a>
+          <component-b></component-b>
+        </v-container>
+      `
+    });
+
+    const vuetify = Vuetify.createVuetify();
+
+    app.use(store);
+    app.use(vuetify);
+    app.mount('#app');
+  </script>
+</body>
+</html>
--- a/testmulticomponent/store/store.js
+++ b/testmulticomponent/store/store.js
@@ -0,0 +1,46 @@
+// store/store.js
+
+const store = Vuex.createStore({
+    state() {
+      return {
+        count: 0,
+        data: null
+      };
+    },
+    mutations: {
+      increment(state) {
+        state.count++;
+      },
+      decrement(state) {
+        state.count--;
+      },
+      setData(state, payload) {
+        state.data = payload;
+      }
+    },
+    actions: {
+      increment({ commit }) {
+        commit('increment');
+      },
+      decrement({ commit }) {
+        commit('decrement');
+      },
+      async fetchData({ commit }) {
+        try {
+            let prm = {
+                "bank": "",
+                "account": "",
+                "current_page": 1,
+                "lastid": -1,
+                "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJNX1VzZXJJRCI6IjIiLCJNX1VzZXJFbWFpbCI6Impva29AZ21haWwuY29tIiwiTV9Vc2VyVXNlcm5hbWUiOiJqb2tvQGdtYWlsLmNvbSIsIk1fVXNlckdyb3VwRGFzaGJvYXJkIjoib25lLXVpXC90ZXN0XC92dWV4XC9jcG9uZS1zZXR1cC1tY3UtdjNcLyIsIk1fVXNlckRlZmF1bHRUX1NhbXBsZVN0YXRpb25JRCI6IjEiLCJNX1N0YWZmTmFtZSI6IlBFVFVHQVMgU0FNUExFIExBQiIsImlzX2NvdXJpZXIiOiJOIiwidGltZV9hdXRvbG9nb3V0IjoiMTAwMDAwMDAiLCJpcCI6IjE2Ny4xNzIuNjcuNTMiLCJhZ2VudCI6IkdvLWh0dHAtY2xpZW50XC8xLjEiLCJ2ZXJzaW9uIjoidjIiLCJsYXN0LWxvZ2luIjoiMjAyNC0wNy0yNiAwODo0NjozNyJ9.hd-Qt5Y2n9y5In3S1kTbvNkQ7kqG0pcbjajNcJdqAvM"
+              }
+            const response = await axios.post('https://cpone.aplikasi.web.id/one-api/mockup/masterdata/bank/lookupbankbyname',prm);
+            console.log(response.data.data.records)
+          commit('setData', response.data.data.records);
+        } catch (error) {
+          console.error('Error fetching data:', error);
+        }
+      }
+    }
+  });
+