From 1ecb4f61f8f8ad0124dc6305093aa238e9f46a49 Mon Sep 17 00:00:00 2001
From: Diana Gromova <16adianay@gmail.com>
Date: Fri, 22 Dec 2023 20:17:44 +0400
Subject: [PATCH 1/6] Vue Example (WIP)

---
 Vue/src/components/HomeContent.vue | 111 ++++++++++++++++++++++++-----
 Vue/src/data.ts                    |  41 +++++++++++
 2 files changed, 134 insertions(+), 18 deletions(-)
 create mode 100644 Vue/src/data.ts

diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
index f0c323c..fb762e8 100644
--- a/Vue/src/components/HomeContent.vue
+++ b/Vue/src/components/HomeContent.vue
@@ -1,22 +1,97 @@
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-import "devextreme/dist/css/dx.material.blue.light.compact.css";
-import DxButton from "devextreme-vue/button";
-
-const props = defineProps({
-  text: String,
-});
-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"></DxButton>
+    <DxDataGrid
+      ref="dataGridRef"
+      :data-source="customers"
+      key-expr="ID"
+      :show-borders="true"
+    >
+      <DxEditing
+        v-model:changes="changes"
+        mode="batch"
+        :allow-updating="true"
+      />
+      <DxColumn
+        data-field="CompanyName"
+      >
+        <DxRequiredRule/>
+      </DxColumn>
+      <DxColumn data-field="City">
+        <DxStringLengthRule :min="4"/>
+      </DxColumn>
+      <DxColumn data-field="Phone">
+        <DxRequiredRule/>
+        <DxPatternRule
+          message="Your phone must have '(555) 555-5555 format!'"
+          :pattern="pattern"
+        />
+      </DxColumn>
+      <DxColumn data-field="Fax"/>
+      <DxColumn data-field="State"/>
+      <DxToolbar>
+        <DxItem>
+          <DxButton
+            text="Validate DataGrid"
+            styling-mode="outlined"
+            @click="validateVisibleRows"
+          />
+        </DxItem>
+        <DxItem name="saveButton"/>
+        <DxItem name="revertButton"/>
+      </DxToolbar>
+    </DxDataGrid>
   </div>
 </template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue';
+import { customers } from '@/data';
+import 'devextreme/dist/css/dx.material.blue.light.compact.css';
+import DxButton from 'devextreme-vue/button';
+import DxDataGrid, {
+  DxColumn,
+  DxEditing,
+  DxPatternRule,
+  DxRequiredRule,
+  DxStringLengthRule,
+  DxToolbar,
+  DxItem,
+  DxDataGridTypes
+} from 'devextreme-vue/data-grid';
+import type dxDataGrid from 'devextreme/ui/data_grid';
+
+const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
+const changes = ref<DxDataGridTypes.DataChange[]>([]);
+const clicked = ref(false);
+const dataGridRef = ref<DxDataGrid>();
+const obj = reactive({ changes });
+
+const validateVisibleRows = () => {
+  const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+  const fakeChanges = dataGridInstance
+    ? dataGridInstance
+      .getVisibleRows()
+      .map((row: DxDataGridTypes.Row) : DxDataGridTypes.DataChange => ({
+        type: 'update',
+        key: row.key,
+        data: {}
+      }))
+    : [];
+  obj.changes = [...changes.value, ...fakeChanges];
+  clicked.value = true;
+};
+
+watch(changes, () => {
+  requestAnimationFrame(() => {
+    const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+    dataGridInstance?.repaint();
+    dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
+      const message = result ? 'Validation is passed' : 'Validation is failed';
+      const type = result ? 'success' : 'error';
+      console.log(type);
+    });
+    clicked.value = false;
+  });
+
+}, {});
+
+</script>
diff --git a/Vue/src/data.ts b/Vue/src/data.ts
new file mode 100644
index 0000000..0b36fa4
--- /dev/null
+++ b/Vue/src/data.ts
@@ -0,0 +1,41 @@
+export type Customer = {
+    ID: number;
+
+    CompanyName: string;
+
+    Address: string;
+
+    City: string;
+
+    State: string;
+
+    Zipcode: number;
+
+    Phone: string;
+
+    Fax: string;
+
+    Website: string;
+};
+
+export const customers: Customer[] = [{
+  ID: 1,
+  CompanyName: '',
+  Address: '702 SW 8th Street',
+  City: 'Bentonville',
+  State: 'Arkansas',
+  Zipcode: 72716,
+  Phone: '123456',
+  Fax: '(800) 555-2171',
+  Website: 'http://www.nowebsitesupermart.com',
+}, {
+  ID: 2,
+  CompanyName: 'Electronics Depot',
+  Address: '2455 Paces Ferry Road NW',
+  City: 'NYC',
+  State: 'Georgia',
+  Zipcode: 30339,
+  Phone: '(800) 595-3232',
+  Fax: '(800) 595-3231',
+  Website: 'http://www.nowebsitedepot.com',
+}];

From cc14db8b8b23d14f302b4dcd2caf5ee7209870d6 Mon Sep 17 00:00:00 2001
From: DevExpressExampleBot <fake@test.test>
Date: Fri, 22 Dec 2023 20:19:55 +0400
Subject: [PATCH 2/6] README auto update [skip ci]

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 9687e9f..3e99775 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/723096689/23.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1202789)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 <!-- default badges end -->

From b772e14b5b898fc0c33fa828e09ac27209ca8617 Mon Sep 17 00:00:00 2001
From: Diana Gromova <16adianay@gmail.com>
Date: Fri, 22 Dec 2023 20:30:04 +0400
Subject: [PATCH 3/6] Added notify

---
 Vue/src/components/HomeContent.vue | 37 +++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
index fb762e8..7117250 100644
--- a/Vue/src/components/HomeContent.vue
+++ b/Vue/src/components/HomeContent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="demo-container">
     <DxDataGrid
       ref="dataGridRef"
       :data-source="customers"
@@ -43,7 +43,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, watch, reactive } from 'vue';
+import { ref, watch, nextTick } from 'vue';
 import { customers } from '@/data';
 import 'devextreme/dist/css/dx.material.blue.light.compact.css';
 import DxButton from 'devextreme-vue/button';
@@ -58,12 +58,12 @@ import DxDataGrid, {
   DxDataGridTypes
 } from 'devextreme-vue/data-grid';
 import type dxDataGrid from 'devextreme/ui/data_grid';
+import notify from 'devextreme/ui/notify';
 
 const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
 const changes = ref<DxDataGridTypes.DataChange[]>([]);
 const clicked = ref(false);
 const dataGridRef = ref<DxDataGrid>();
-const obj = reactive({ changes });
 
 const validateVisibleRows = () => {
   const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
@@ -76,22 +76,31 @@ const validateVisibleRows = () => {
         data: {}
       }))
     : [];
-  obj.changes = [...changes.value, ...fakeChanges];
+  changes.value = [...changes.value, ...fakeChanges];
   clicked.value = true;
 };
 
 watch(changes, () => {
-  requestAnimationFrame(() => {
-    const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
-    dataGridInstance?.repaint();
-    dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
-      const message = result ? 'Validation is passed' : 'Validation is failed';
-      const type = result ? 'success' : 'error';
-      console.log(type);
+  if(clicked.value) {
+    nextTick (() => {
+      const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
+      dataGridInstance?.repaint();
+      dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
+        const message = result ? 'Validation is passed' : 'Validation is failed';
+        const type = result ? 'success' : 'error';
+        notify({
+          message,
+          type,
+          position: {
+            offset: '0 50',
+            at: 'bottom',
+            of: '.demo-container',
+          },
+        });
+      });
+      clicked.value = false;
     });
-    clicked.value = false;
-  });
-
+  }
 }, {});
 
 </script>

From 1a0203cf7abf8ce5620fa46a239cbc3fc66f2b5b Mon Sep 17 00:00:00 2001
From: Diana Gromova <16adianay@gmail.com>
Date: Fri, 22 Dec 2023 20:35:21 +0400
Subject: [PATCH 4/6] fix TS issues

---
 Vue/src/components/HomeContent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
index 7117250..6bf2dd3 100644
--- a/Vue/src/components/HomeContent.vue
+++ b/Vue/src/components/HomeContent.vue
@@ -55,9 +55,9 @@ import DxDataGrid, {
   DxStringLengthRule,
   DxToolbar,
   DxItem,
-  DxDataGridTypes
 } from 'devextreme-vue/data-grid';
 import type dxDataGrid from 'devextreme/ui/data_grid';
+import { type DxDataGridTypes } from 'devextreme-vue/data-grid';
 import notify from 'devextreme/ui/notify';
 
 const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;
@@ -85,6 +85,7 @@ watch(changes, () => {
     nextTick (() => {
       const dataGridInstance = dataGridRef.value?.instance! as dxDataGrid;
       dataGridInstance?.repaint();
+      // @ts-expect-error - getController is a private method
       dataGridInstance?.getController('validating').validate(true).then((result: Boolean) => {
         const message = result ? 'Validation is passed' : 'Validation is failed';
         const type = result ? 'success' : 'error';

From a811c8a57252db75ca9ac49c49edbcaec279a43c Mon Sep 17 00:00:00 2001
From: Diana Gromova <16adianay@gmail.com>
Date: Fri, 22 Dec 2023 20:40:12 +0400
Subject: [PATCH 5/6] fix TS issues

---
 Vue/src/App.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/Vue/src/App.vue b/Vue/src/App.vue
index af7776e..3b51b3a 100644
--- a/Vue/src/App.vue
+++ b/Vue/src/App.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { RouterView } from "vue-router";
+import { RouterView } from 'vue-router';
 </script>
 
 <template>
-    <div class="main">
-        <RouterView />
-    </div>
+  <div class="main">
+    <RouterView/>
+  </div>
 </template>

From fc31a5d7222c526b6e3868fa8741e3fa941969a4 Mon Sep 17 00:00:00 2001
From: Diana Gromova <16adianay@gmail.com>
Date: Fri, 22 Dec 2023 20:43:56 +0400
Subject: [PATCH 6/6] fix TS

---
 Vue/src/components/HomeContent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Vue/src/components/HomeContent.vue b/Vue/src/components/HomeContent.vue
index 6bf2dd3..5050ba2 100644
--- a/Vue/src/components/HomeContent.vue
+++ b/Vue/src/components/HomeContent.vue
@@ -57,7 +57,7 @@ import DxDataGrid, {
   DxItem,
 } from 'devextreme-vue/data-grid';
 import type dxDataGrid from 'devextreme/ui/data_grid';
-import { type DxDataGridTypes } from 'devextreme-vue/data-grid';
+import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
 import notify from 'devextreme/ui/notify';
 
 const pattern = /^\(\d{3}\) \d{3}-\d{4}$/i;