Vue: Migrate to Composition API with TypeScript

- Converted Options API → Composition API with <script setup lang="ts">
- Used ref() for component references: ref<DxDataGrid | null>(null)
- Added proper DevExtreme Vue types: DxDataGridTypes, DxPivotGridTypes
- Implemented typed event handlers with DevExtreme Vue event types
- Added early return pattern for null-safe instance access
- Used v-model:visible for popup two-way binding
- Created data.ts with Sale interface and typed sales array
- Updated HomeView.vue to use PivotGrid drill-down component
- Removed orig_ reference files

Author: artem-kurchenko

Vue/package-lock.json

@@ -3,6 +3,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin: 50px 50px;
-  width: 90vh;
+  margin: 50px;
+  width: 90vw;
 }

Vue/src/assets/main.css

@@ -1,28 +1,190 @@
 <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 {
+  DxPivotGrid,
+  type DxPivotGridTypes,
+} from 'devextreme-vue/pivot-grid';
+import { DxFieldChooser } from 'devextreme-vue/pivot-grid';
+import { DxPopup } from 'devextreme-vue/popup';
+import {
+  DxDataGrid,
+  type DxDataGridTypes,
+} from 'devextreme-vue/data-grid';
+import { DxColumn, DxEditing } from 'devextreme-vue/data-grid';
+import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
+import { ArrayStore, DataSource, isItemsArray, type LoadResult } from 'devextreme-vue/common/data';
+import notify from 'devextreme/ui/notify';
+import { sales, type Sale } from '../data';
+
+const pivotGridRef = ref<DxPivotGrid | null>(null);
+const dataGridRef = ref<DxDataGrid | null>(null);
+
+const data = new ArrayStore({
+  data: sales,
+  key: 'id',
+});
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: 'count',
-  },
+const pivotGridDataSource = new PivotGridDataSource({
+  fields: [
+    {
+      caption: 'Region',
+      width: 120,
+      dataField: 'region',
+      area: 'row',
+    },
+    {
+      caption: 'City',
+      dataField: 'city',
+      width: 150,
+      area: 'row',
+    },
+    {
+      dataField: 'date',
+      dataType: 'date',
+      area: 'column',
+    },
+    {
+      caption: 'Total',
+      dataField: 'amount',
+      dataType: 'number',
+      summaryType: 'sum',
+      format: 'currency',
+      area: 'data',
+    },
+  ],
+  store: data,
 });
-const count = ref(0);
-const buttonText = computed<string>(
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
+
+const drillDownDataSource = ref<DataSource<Sale, number> | null>(null);
+const popupTitle = ref('');
+const popupVisible = ref(false);
+
+function onCellClick(e: DxPivotGridTypes.CellClickEvent): void {
+  if (e.area === 'data' && e.cell && e.cell.rowPath) {
+    const pivotDataSource = e.component.getDataSource();
+    const rowPathLength = e.cell.rowPath.length;
+    const rowPathName = e.cell.rowPath[rowPathLength - 1];
+    const title = `${rowPathName ? rowPathName : 'Total'} Drill Down Data`;
+
+    drillDownDataSource.value = pivotDataSource.createDrillDownDataSource(
+      e.cell
+    );
+
+    popupTitle.value = title;
+    popupVisible.value = true;
+  }
+}
+
+function onShowing(): void {
+  const gridInstance = dataGridRef.value?.instance;
+  if (!gridInstance) return;
+
+  drillDownDataSource.value?.store().load().then((items: LoadResult<Sale>) => {
+    if(isItemsArray(items)) {
+      gridInstance.option('dataSource', {
+        store: new ArrayStore({
+          key: data.key(),
+          data: items,
+        }),
+      });
+    }
+  });
+}
+
+function onHiding(): void {
+  const pivotInstance = pivotGridRef.value?.instance;
+  if (!pivotInstance) return;
+
+  pivotInstance.getDataSource().reload().catch(() => {
+    notify('Failed to reload data', 'error', 1000);
+  });
+}
+
+function onShown(): void {
+  const gridInstance = dataGridRef.value?.instance;
+  if (!gridInstance) return;
+
+  gridInstance.updateDimensions();
+}
+
+function onRowInserting(e: DxDataGridTypes.RowInsertingEvent<Sale, number>): void {
+  data.insert(e.data).catch(() => {
+    notify('Failed to add data', 'error', 1000);
+  });
+}
+
+function onRowUpdating(e: DxDataGridTypes.RowUpdatingEvent<Sale, number>): void {
+  data.update(e.key, e.newData).catch(() => {
+    notify('Failed to update data', 'error', 1000);
+  });
+}
+
+function onRowRemoving(e: DxDataGridTypes.RowRemovingEvent<Sale, number>): void {
+  data.remove(e.key).catch(() => {
+    notify('Failed to remove data', 'error', 1000);
+  });
 }
 </script>
+
 <template>
   <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
-    />
+    <div class="long-title">
+      <h3>Sales Amount by Region</h3>
+    </div>
+    <DxPivotGrid
+      ref="pivotGridRef"
+      :allow-sorting-by-summary="true"
+      :allow-sorting="true"
+      :allow-filtering="true"
+      :allow-expand-all="true"
+      :show-borders="true"
+      :data-source="pivotGridDataSource"
+      @cell-click="onCellClick"
+    >
+      <DxFieldChooser :enabled="false"/>
+    </DxPivotGrid>
+    <DxPopup
+      :width="600"
+      :height="400"
+      v-model:visible="popupVisible"
+      :title="popupTitle"
+      :show-close-button="true"
+      @showing="onShowing"
+      @hiding="onHiding"
+      @shown="onShown"
+    >
+      <DxDataGrid
+        ref="dataGridRef"
+        :width="560"
+        :height="300"
+        @row-inserting="onRowInserting"
+        @row-updating="onRowUpdating"
+        @row-removing="onRowRemoving"
+      >
+        <DxEditing
+          :allow-updating="true"
+          :allow-deleting="true"
+          :allow-adding="true"
+        />
+        <DxColumn data-field="region"/>
+        <DxColumn data-field="city"/>
+        <DxColumn
+          data-field="amount"
+          data-type="number"
+        />
+        <DxColumn
+          data-field="date"
+          data-type="date"
+        />
+      </DxDataGrid>
+    </DxPopup>
   </div>
 </template>
+
+<style scoped>
+.long-title {
+  margin: 20px 0;
+}
+</style>
+