chore(vue-grid): vuex integration demo (DevExpress#1043)

packages/dx-vue-demos/package.json

@@ -34,7 +34,8 @@
     "react-dom": "^16.3.2",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "vue": "^2.5.16"
+    "vue": "^2.5.16",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "@devexpress/dx-testing": "1.2.0",

packages/dx-vue-demos/src/demo-sources/grid-featured-vuex-integration/none/demo.js

@@ -0,0 +1,234 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import {
+  DxSortingState,
+  DxIntegratedSorting,
+  DxGroupingState,
+  DxIntegratedGrouping,
+  DxRowDetailState,
+  DxFilteringState,
+  DxIntegratedFiltering,
+  DxSelectionState,
+  DxIntegratedSelection,
+  DxPagingState,
+  DxIntegratedPaging,
+} from '@devexpress/dx-vue-grid';
+import {
+  DxGrid,
+  DxTable,
+  DxTableHeaderRow,
+  DxTableRowDetail,
+  DxTableGroupRow,
+  DxTableFilterRow,
+  DxTableSelection,
+  DxToolbar,
+  DxGroupingPanel,
+  DxPagingPanel,
+} from '@devexpress/dx-vue-grid-bootstrap4';
+
+import {
+  generateRows,
+  employeeValues,
+  employeeTaskValues,
+} from '../../../demo-data/generator';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: {
+    rows: generateRows({
+      columnValues: {
+        ...employeeValues,
+        tasks: ({ random }) => generateRows({
+          columnValues: employeeTaskValues,
+          length: Math.floor(random() * 3) + 4,
+          random,
+        }),
+      },
+      length: 40,
+    }),
+    sorting: [],
+    grouping: [],
+    expandedGroups: [],
+    selection: [],
+    expandedRowIds: [1],
+    filters: [],
+    currentPage: 0,
+    pageSize: 10,
+    pageSizes: [5, 10, 15],
+  },
+  mutations: {
+    /* eslint-disable no-param-reassign */
+    gridStateChange(state, payload) {
+      state[payload.field] = payload.value;
+    },
+    /* eslint-enable no-param-reassign */
+  },
+});
+
+const MyRowDetail = {
+  props: ['row'],
+  data() {
+    return {
+      detailColumns: [
+        { name: 'subject', title: 'Subject' },
+        { name: 'startDate', title: 'Start Date' },
+        { name: 'dueDate', title: 'Due Date' },
+        { name: 'priority', title: 'Priority' },
+        { name: 'status', title: 'Status' },
+      ],
+      tableDetailColumnExtensions: [
+        { columnName: 'startDate', width: 115 },
+        { columnName: 'dueDate', width: 115 },
+        { columnName: 'priority', width: 100 },
+        { columnName: 'status', width: 125 },
+      ],
+    };
+  },
+  template: `
+    <div style="margin: 20px;">
+      <div>
+        <h5>{{row.firstName}} {{row.lastName}}'s Tasks:</h5>
+      </div>
+      <div class="card">
+        <dx-grid
+          :rows="row.tasks"
+          :columns="detailColumns"
+        >
+          <dx-table
+            :columnExtensions="tableDetailColumnExtensions"
+          />
+          <dx-table-header-row />
+        </dx-grid>
+      </div>
+    </div>
+  `,
+  components: {
+    DxGrid,
+    DxTable,
+    DxTableHeaderRow,
+  },
+};
+
+export default {
+  data() {
+    return {
+      columns: [
+        { name: 'prefix', title: 'Title' },
+        { name: 'firstName', title: 'First Name' },
+        { name: 'lastName', title: 'Last Name' },
+        { name: 'birthDate', title: 'Birth Date' },
+        { name: 'position', title: 'Position' },
+        { name: 'state', title: 'State' },
+      ],
+    };
+  },
+  computed: {
+    rows() { return store.state.rows; },
+    expandedRowIds() { return store.state.expandedRowIds; },
+    sorting() { return store.state.sorting; },
+    grouping() { return store.state.grouping; },
+    expandedGroups() { return store.state.expandedGroups; },
+    filters() { return store.state.filters; },
+    selection() { return store.state.selection; },
+    currentPage() { return store.state.currentPage; },
+    pageSize() { return store.state.pageSize; },
+    pageSizes() { return store.state.pageSizes; },
+  },
+  methods: {
+    updateExpandedRowIds(e) { store.commit('gridStateChange', { field: 'expandedRowIds', value: e }); },
+    updateSorting(e) { store.commit('gridStateChange', { field: 'sorting', value: e }); },
+    updateGrouping(e) { store.commit('gridStateChange', { field: 'grouping', value: e }); },
+    updateExpandedGroups(e) { store.commit('gridStateChange', { field: 'expandedGroups', value: e }); },
+    updateFilters(e) { store.commit('gridStateChange', { field: 'filters', value: e }); },
+    updateSelection(e) { store.commit('gridStateChange', { field: 'selection', value: e }); },
+    updateCurrentPage(e) { store.commit('gridStateChange', { field: 'currentPage', value: e }); },
+    updatePageSize(e) { store.commit('gridStateChange', { field: 'pageSize', value: e }); },
+  },
+  template: `
+    <div class="card">
+      <dx-grid
+        :rows="rows"
+        :columns="columns"
+      >
+        <dx-sorting-state
+          :sorting="sorting"
+          @update:sorting="updateSorting"
+        />
+        <dx-grouping-state
+          :grouping="grouping"
+          @update:grouping="updateGrouping"
+          :expandedGroups="expandedGroups"
+          @update:expandedGroups="updateExpandedGroups"
+        />
+        <dx-row-detail-state
+          :expandedRowIds="expandedRowIds"
+          @update:expandedRowIds="updateExpandedRowIds"
+        />
+        <dx-filtering-state
+          :filters="filters"
+          @update:filters="updateFilters"
+        />
+        <dx-selection-state
+          :selection="selection"
+          @update:selection="updateSelection"
+        />
+        <dx-paging-state
+          :currentPage="currentPage"
+          @update:currentPage="updateCurrentPage"
+          :pageSize="pageSize"
+          @update:pageSize="updatePageSize"
+        />
+        <dx-integrated-filtering />
+        <dx-integrated-sorting />
+        <dx-integrated-grouping />
+        <dx-integrated-selection />
+        <dx-integrated-paging />
+        <dx-table />
+        <dx-table-header-row
+          showSortingControls
+          showGroupingControls
+        />
+        <dx-table-filter-row />
+        <dx-table-selection
+          showSelectAll
+        />
+        <dx-table-row-detail
+          :contentComponent="$options.components.MyRowDetail"
+        />
+        <dx-table-group-row />
+        <dx-toolbar />
+        <dx-grouping-panel
+          showGroupingControls
+        />
+        <dx-paging-panel
+          :pageSizes="pageSizes"
+        />
+      </dx-grid>
+    </div>
+  `,
+  components: {
+    DxSortingState,
+    DxIntegratedSorting,
+    DxGroupingState,
+    DxIntegratedGrouping,
+    DxRowDetailState,
+    DxFilteringState,
+    DxIntegratedFiltering,
+    DxSelectionState,
+    DxIntegratedSelection,
+    DxPagingState,
+    DxIntegratedPaging,
+    DxGrid,
+    DxTable,
+    DxTableHeaderRow,
+    DxTableGroupRow,
+    DxTableFilterRow,
+    DxTableRowDetail,
+    DxTableSelection,
+    DxToolbar,
+    DxGroupingPanel,
+    DxPagingPanel,
+    MyRowDetail,
+  },
+};

packages/dx-vue-grid/demos/featured/vuex-integration.md

@@ -0,0 +1,5 @@
+# Vue Grid Vuex Integration
+
+In this demo, the [Vuex store](https://vuex.vuejs.org/en/getting-started.html) manages the Grid's state. All end-user actions that modify the component state produce corresponding [Vuex mutations](https://vuex.vuejs.org/en/mutations.html) that the Grid commits. You can perform time-travelling and observe the Grid's state changes with the [Vue DevTool Extension](https://github.com/vuejs/vue-devtools) that is activated in this demo.
+
+.embedded-demo({ "path": "grid-featured-vuex-integration/demo", "showThemeSelector": true, "showThemeVariants": true })

site/_data/demos/navigation.yml

@@ -18,5 +18,7 @@
     items:
       - title: Integrated Data Shaping
         path: /vue/grid/demos/featured/integrated-data-shaping
+      - title: Vuex Integration
+        path: /react/grid/demos/featured/redux-integration
       - title: Remote Data
         path: /vue/grid/demos/featured/remote-data

yarn.lock

@@ -10097,6 +10097,10 @@ vue@^2.5.16:
   version "2.5.16"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
 
+vuex@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
+
 w3c-hr-time@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"