AG-4559 Update vue example repos

seanlandsman · Sep 10, 2020 · f94662f · f94662f
1 parent 2e4a099
commit f94662f
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -1,22 +1,23 @@
 {
   "name": "ag-grid-vue-vuex",
-  "version": "20.0.0",
+  "version": "24.0.0",
   "private": true,
   "scripts": {
     "start": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "vue": "2.5.21",
-    "vuex": "3.0.1",
-    "ag-grid-community": "^20.0.0",
-    "ag-grid-vue": "^20.0.0",
-    "vue-property-decorator": "7.2.0"
+    "ag-grid-community": "^24.0.0",
+    "ag-grid-vue": "^24.0.0",
+    "vue": "2.6.12",
+    "vue-class-component": "^7.2.5",
+    "vue-property-decorator": "9.0.0",
+    "vuex": "3.5.1"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.2.2",
-    "@vue/cli-service": "3.2.3",
-    "vue-template-compiler": "2.5.21"
+    "@vue/cli-plugin-babel": "4.5.4",
+    "@vue/cli-service": "4.5.4",
+    "vue-template-compiler": "2.6.12"
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -15,88 +15,92 @@
                      deltaRowMode
                      getRowid
                      :components="components"
-                     @data-model-changed="dataModelUpdated"
                      @first-data-rendered="onFirstDataRendered">
         </ag-grid-vue>
     </div>
 </template>
 
 <script>
-    import {AgGridVue} from "ag-grid-vue";
-    import TradeCellRenderer from "./components/TradeCellRenderer";
+import {AgGridVue} from "ag-grid-vue";
+import TradeCellRenderer from "./components/TradeCellRenderer";
 
-    export default {
-        name: 'App',
-        data() {
-            return {
-                columnDefs: [
-                    {
-                        field: 'trader',
-                        sort: 'asc',
-                        editable: true
-                    },
-                    {
-                        headerName: 'Total Amount',
-                        field: 'amount',
-                        valueFormatter: (data) => `${this.currentExchange.currency}${data.value}`
-                    },
-                    {
-                        headerName: 'Trade',
-                        cellRendererFramework: 'TradeCellRenderer'
-                    },
-                ],
-                currentExchange: null,
-                components: {
-                    TradeCellRenderer
+export default {
+    name: 'App',
+    data() {
+        return {
+            columnDefs: [
+                {
+                    field: 'trader',
+                    sort: 'asc',
+                    editable: true
                 },
-                rowData: null
-            }
-        },
-        components: {
-            AgGridVue,
-            TradeCellRenderer
+                {
+                    headerName: 'Total Amount',
+                    field: 'amount',
+                    valueFormatter: (data) => `${this.currentExchange.currency}${data.value}`
+                },
+                {
+                    headerName: 'Trade',
+                    cellRendererFramework: 'TradeCellRenderer'
+                },
+            ],
+            currentExchange: null,
+            components: {
+                TradeCellRenderer
+            },
+            rowData: null
+        }
+    },
+    components: {
+        AgGridVue,
+        TradeCellRenderer
+    },
+    beforeMount() {
+        this.currentExchange = this.$store.state.exchanges[0];
+    },
+    mounted() {
+        this.rowData = Object.freeze(
+            this.copyRowData(this.$store.getters.tradesForExchange(this.currentExchange.exchange))
+        );
+    },
+    watch: {
+        currentExchange() {
+            this.updateRowData();
         },
-        beforeMount() {
-            this.currentExchange = this.$store.state.exchanges[0];
+        cumulativeTrades(newTrades, oldTrades) {
+            this.updateRowData();
+        }
+    },
+    computed: {
+        cumulativeTrades() {
+            return this.$store.state.cumulativeTrades;
+        }
+    },
+    methods: {
+        onFirstDataRendered(params) {
+            params.api.sizeColumnsToFit();
         },
-        mounted() {
+        updateRowData() {
             this.rowData = Object.freeze(
                 this.copyRowData(this.$store.getters.tradesForExchange(this.currentExchange.exchange))
             );
         },
-        watch: {
-            currentExchange() {
-                this.rowData = Object.freeze(
-                    this.copyRowData(this.$store.getters.tradesForExchange(this.currentExchange.exchange))
-                );
-           }
-        },
-        methods: {
-            dataModelUpdated(rowData) {
-                this.$store.dispatch('cumulativeTradesForExchange', {
-                    exchange: this.currentExchange.exchange,
-                    cumulativeTrades: rowData
-                });
-            },
-            onFirstDataRendered(params) {
-                params.api.sizeColumnsToFit();
-            },
-            copyRowData(data) {
-                return data.map(datum => {
-                    return {
-                        ...datum
-                    }
-                })
-            }
+        copyRowData(data) {
+            return data.map(datum => {
+                return {
+                    ...datum
+                }
+            })
         }
     }
+}
 </script>
 
 <style lang="css" scoped>
-    @import '~ag-grid-community/dist/styles/ag-grid.css';
-    @import '~ag-grid-community/dist/styles/ag-theme-balham.css';
+@import '~ag-grid-community/dist/styles/ag-grid.css';
+@import '~ag-grid-community/dist/styles/ag-theme-balham.css';
 
-    .exchange {
-        margin-bottom: 10px;
-    }
-</style>
+.exchange {
+    margin-bottom: 10px;
+}
+</style>
diff --git a/src/store.js b/src/store.js
@@ -66,6 +66,9 @@ export default new Vuex.Store({
         }
     },
     actions: {
+        executeTrade(context) {
+            console.log("here...");
+        },
         cumulativeTradesForExchange({commit}, {exchange, cumulativeTrades}) {
             commit('cumulativeTradesForExchange', {exchange, cumulativeTrades});
         },

diff --git a/vue.config.js b/vue.config.js
@@ -8,13 +8,13 @@ module.exports = {
                 // Make sure *our* version of ag-grid & vue is always loaded.
                 // This is needed for `yarn link / npm link` to work and prevent duplicate versions of these libs
                 // being loaded
-                'ag-grid-community/main': path.resolve(__dirname, 'node_modules/ag-grid-community/main.js'),
-                'ag-grid-community$': path.resolve(__dirname, 'node_modules/ag-grid-community/main.js'),
+                'ag-grid-community/main': path.resolve(__dirname, 'node_modules/ag-grid-community/dist/ag-grid-community.cjs.js'),
+                'ag-grid-community$': path.resolve(__dirname, 'node_modules/ag-grid-community/dist/ag-grid-community.cjs.js'),
                 vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.common.js')
             }
         },
         performance: {
             hints: false
         }
     }
-};
+};