Fix: Vue implementation, lint, and build

Author: charlescordialDevExpress

Vue/orig_index.html

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "devextreme": "25.1.3",
+    "devextreme-aspnet-data-nojquery": "^5.1.0",
     "devextreme-vue": "25.1.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"

Vue/package-lock.json

@@ -1,18 +1,21 @@
 <script setup lang="ts">
 import DxDataGrid, { DxColumn, DxRowDragging, DxScrolling, DxLookup, DxSelection } from 'devextreme-vue/data-grid';
 import type dxDataGrid from 'devextreme/ui/data_grid';
-import type { RowDraggingStartEvent, RowDraggingAddEvent, Column, Row } from 'devextreme/ui/data_grid';
-import CustomStore from "devextreme/data/custom_store";
+import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
 import type { Task } from '../data';
 import { priorities } from '../data';
-import DataSource from "devextreme/data/data_source";
+import notify from 'devextreme/ui/notify';
+import DataSource from 'devextreme/data/data_source';
+import CustomStore from 'devextreme/data/custom_store';
+
+type CellValue = Task[keyof Task] | string | undefined;
 
 let updateInProgress: Boolean = false;
 
 const props = defineProps({
-  tasksStore: CustomStore,
-  status: Number,
-  shouldClearSelection: Boolean,
+  tasksStore: { type: CustomStore, required: true },
+  status: { type: Number, default: 0 },
+  shouldClearSelection: { type: Boolean, default: false },
 });
 
 const filterExpr = ['Status', '=', props.status];
@@ -22,49 +25,52 @@ const dataSource = new DataSource({
   reshapeOnPush: true,
 });
 
-function getVisibleRowValues(rowsData: Task[], grid: dxDataGrid) {
-    const visibleColumns = grid.getVisibleColumns();
-    const selectedData = rowsData.map((rowData: Task) => {
-        const visibleValues: any = {};
-        visibleColumns.forEach((column: Column) => {
-            if (column.dataField)
-                visibleValues[column.dataField] = getVisibleCellValue(column, rowData);
-        });
-        return visibleValues;
+function getVisibleRowValues(rowsData: Task[], grid: dxDataGrid): Record<string, CellValue>[] {
+  const visibleColumns = grid.getVisibleColumns();
+  const selectedData = rowsData.map((rowData: Task) => {
+    const visibleValues: Record<string, CellValue> = {};
+    visibleColumns.forEach((column: DxDataGridTypes.Column) => {
+      if (column.dataField)
+      { visibleValues[column.dataField] = getVisibleCellValue(column, rowData); }
     });
-    return selectedData;
+    return visibleValues;
+  });
+  return selectedData;
 }
 
-function getVisibleCellValue(column: Column, rowData: Task) {
-    if (column.dataField) {
-        const propKey = column.dataField as (keyof Task);
-        const cellValue = rowData[propKey];
-        return column.lookup && column.lookup.calculateCellValue ? column.lookup.calculateCellValue(cellValue) : cellValue;
-    }
+function getVisibleCellValue(column: DxDataGridTypes.Column, rowData: Task): CellValue {
+  if (column.dataField) {
+    const propKey = column.dataField as keyof Task;
+    const cellValue = rowData[propKey];
+    return column?.lookup?.calculateCellValue
+      ? column.lookup.calculateCellValue(cellValue) as CellValue
+      : cellValue as CellValue;
+  }
+  return undefined;
 }
 
-function canDrag(e: RowDraggingStartEvent) {
+function canDrag(e: DxDataGridTypes.RowDraggingStartEvent): boolean {
   if (updateInProgress) return false;
   const visibleRows = e.component.getVisibleRows();
-  return visibleRows.some((r: Row) => r.isSelected && r.rowIndex === e.fromIndex);
+  return visibleRows.some((r: DxDataGridTypes.Row) => r.isSelected && r.rowIndex === e.fromIndex);
 }
 
-function onDragStart(e: RowDraggingStartEvent) {
+function onDragStart(e: DxDataGridTypes.RowDraggingStartEvent): void {
   const selectedData: Task[] = e.component.getSelectedRowsData();
   e.itemData = getVisibleRowValues(selectedData, e.component);
   e.cancel = !canDrag(e);
 }
 
-function onAdd(e: RowDraggingAddEvent) {
+async function onAdd(e: DxDataGridTypes.RowDraggingAddEvent): Promise<void> {
   const fromGrid = e.fromComponent as dxDataGrid;
   const toGrid = e.toComponent as dxDataGrid;
   const selectedRowKeys: (keyof Task)[] = fromGrid.getSelectedRowKeys();
   const updateProcess: (Promise<any> | undefined)[] = [];
   const changes: any[] = [];
 
   updateInProgress = true;
-  fromGrid.beginCustomLoading("Loading...");
-  toGrid.beginCustomLoading("Loading...");
+  fromGrid.beginCustomLoading('Loading...');
+  toGrid.beginCustomLoading('Loading...');
   for (let key of selectedRowKeys) {
     const values = { Status: e.toData };
     updateProcess.push(props.tasksStore?.update(key, values));
@@ -74,17 +80,21 @@ function onAdd(e: RowDraggingAddEvent) {
       data: values,
     });
   }
-  Promise.all(updateProcess).then(() => {
-    props.tasksStore?.push(changes);
+  try {
+    await Promise.all(updateProcess);
+    let gridStore = props.tasksStore;
+    gridStore?.push(changes);
     fromGrid.endCustomLoading();
     toGrid.endCustomLoading();
     updateInProgress = false;
 
     fromGrid.clearSelection();
     if (!props.shouldClearSelection) {
-      toGrid.selectRows(selectedRowKeys, true);
+      await toGrid.selectRows(selectedRowKeys, true);
     }
-  });
+  } catch (error: unknown) {
+    notify(error, 'error', 1000);
+  }
 }
 
 </script>
@@ -97,8 +107,8 @@ function onAdd(e: RowDraggingAddEvent) {
   >
     <DxRowDragging
       :data="status"
-      :on-add="onAdd"
-      :on-drag-start="onDragStart"
+      :on-add="onAdd as unknown as () => void"
+      :on-drag-start="onDragStart as () => void"
       drag-template="dragItems"
       group="tasksGroup"
     />
@@ -108,11 +118,11 @@ function onAdd(e: RowDraggingAddEvent) {
         <tbody>
           <tr
             v-for="(item, rowIndex) in data.itemData"
-            v-bind:key="'row' + rowIndex"
+            :key="'row' + rowIndex"
           >
             <td
               v-for="(key, dataIndex) in Object.keys(item)"
-              v-bind:key="'key' + dataIndex"
+              :key="'key' + dataIndex"
             >
               {{ item[key] }}
             </td>
@@ -145,4 +155,4 @@ function onAdd(e: RowDraggingAddEvent) {
     />
 
   </DxDataGrid>
-</template>
+</template>

Vue/package.json

@@ -1,28 +1,86 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
-import DxButton from 'devextreme-vue/button';
+import type CustomStore from 'devextreme/data/custom_store';
+import { createStore } from 'devextreme-aspnet-data-nojquery';
+import DxSwitch from 'devextreme-vue/switch';
+import Grid from './CustomGrid.vue';
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: 'count',
+const shouldClearSelection = ref(false);
+
+const url = 'https://js.devexpress.com/Demos/Mvc/api/DnDBetweenGrids';
+
+const tasksStore: CustomStore = createStore({
+  key: 'ID',
+  loadUrl: `${url}/Tasks`,
+  updateUrl: `${url}/UpdateTask`,
+  onBeforeSend(_method, ajaxOptions) {
+    ajaxOptions.xhrFields = { withCredentials: true };
   },
 });
-const count = ref(0);
-const buttonText = computed<string>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
 </script>
 <template>
   <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+    <div className="demo-header">
+      <h3>DataGrid - Select multiple items and drag'n'drop</h3>
+      <div id="toggle-container">
+        <span>Clear selection after drop</span>
+        <DxSwitch
+          id="clearAfterDropSwitch"
+          v-model:value="shouldClearSelection"
+        />
+      </div>
+    </div>
+    <div class="tables">
+      <Grid
+        :tasks-store="tasksStore"
+        :status="1"
+        :should-clear-selection="shouldClearSelection"
+        class="column"
+      />
+      <Grid
+        :tasks-store="tasksStore"
+        :status="2"
+        :should-clear-selection="shouldClearSelection"
+        class="column"
+      />
+    </div>
   </div>
 </template>
+<style scoped>
+  .demo-container {
+      margin: 50px 50px;
+      width: 90vh;
+  }
+  .demo-header {
+      display: flex;
+      justify-content: space-between;
+  }
+  #toggle-container {
+      padding-top: 20px;
+  }
+  #clearAfterDropSwitch {
+      vertical-align: text-bottom;
+  }
+  #toggle-container span {
+      padding-right: 10px;
+  }
+  :global(.drag-container) {
+      padding: 10px;
+  }
+  :global(.drag-container td) {
+      padding: 0px 10px 0px 10px;
+  }
+  .tables {
+    display: flex;
+  }
+  .column:first-child {
+    width: 50%;
+    padding-right: 15px;
+  }
+  .column:last-child {
+    width: 50%;
+    padding-left: 15px;
+  }
+</style>