Skip to content

Commit eb0d3fb

Browse files
artem-kurchenkoartem-kurchenko
authored
Fix vue (#73)
* fix lint & refactor
1 parent c649e80 commit eb0d3fb

18 files changed

+1354
-11513
lines changed

‎README.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/263296064/25.1.2%2B)
32
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T888862)
43
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
54
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)

‎Vue/package-lock.json‎

Lines changed: 788 additions & 1431 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Vue/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@
1212
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
1313
},
1414
"dependencies": {
15-
"devextreme": "24.2.3",
16-
"devextreme-vue": "24.2.3",
15+
"devextreme": "25.1",
16+
"devextreme-vue": "25.1",
1717
"vue": "^3.2.45",
1818
"vue-router": "^4.1.6"
1919
},

‎Vue/src/App.vue‎

Lines changed: 7 additions & 259 deletions
Original file line numberDiff line numberDiff line change
@@ -1,261 +1,9 @@
1-
<template>
2-
<div id="app">
3-
<DxDataGrid
4-
ref="grid"
5-
:data-source="{ store: employeeStore }"
6-
:show-borders="true"
7-
:repaint-changes-only="true"
8-
>
9-
<DxEditing
10-
:allow-updating="true"
11-
:allow-adding="true"
12-
:allow-deleting="true"
13-
:use-icons="true"
14-
mode="popup"
15-
/>
16-
<DxColumn data-field="FirstName" data-type="string" />
17-
<DxColumn data-field="LastName" data-type="string" />
18-
<DxColumn data-field="BirthDate" data-type="date" />
19-
<DxColumn data-field="Position" data-type="string" :width="170" />
20-
<DxColumn data-field="HireDate" data-type="date" />
21-
<DxColumn data-field="Address" data-type="string" />
22-
<DxColumn type="buttons">
23-
<DxButton name="edit" :on-click="editRow" />
24-
<DxButton name="delete" />
25-
</DxColumn>
26-
<DxToolbar>
27-
<DxItem
28-
location="after"
29-
template="addRowTemplate"
30-
/>
31-
</DxToolbar>
32-
33-
<template #addRowTemplate>
34-
<DxAddRowButton
35-
icon="plus"
36-
@click="addRow"
37-
/>
38-
</template>
39-
</DxDataGrid>
40-
41-
<DxPopup
42-
:title="this.isNewRecord ? 'Add' : 'Edit'"
43-
height="auto"
44-
:close-on-outside-click="true"
45-
:visible.sync="visible"
46-
>
47-
<DxToolbarItem
48-
widget="dxButton"
49-
location="after"
50-
toolbar="bottom"
51-
:options="{
52-
text: 'Confirm',
53-
type: 'success',
54-
onClick: confirmChanges
55-
}"
56-
/>
57-
<DxToolbarItem
58-
widget="dxButton"
59-
location="after"
60-
toolbar="bottom"
61-
:options="{
62-
text: 'Cancel',
63-
onClick: hidePopup
64-
}"
65-
/>
66-
67-
<DxForm
68-
:validationGroup="validationGroupName"
69-
:form-data.sync="formData"
70-
>
71-
<DxGroupItem
72-
:col-count="2"
73-
>
74-
<DxSimpleItem data-field="FirstName" :validation-rules="validationRules.firstName" >
75-
<DxLabel template="nameLabel" />
76-
</DxSimpleItem>
77-
78-
<DxSimpleItem data-field="Position" editor-type="dxSelectBox" :editor-options="positionEditorOptions" >
79-
<DxLabel template="positionLabel" />
80-
</DxSimpleItem>
81-
82-
<DxSimpleItem data-field="LastName" :validation-rules="validationRules.lastName" >
83-
<DxLabel template="nameLabel" />
84-
</DxSimpleItem>
85-
86-
<DxSimpleItem data-field="Address">
87-
<DxLabel template="addressLabel" />
88-
</DxSimpleItem>
89-
90-
<DxSimpleItem data-field="BirthDate" editor-type="dxDateBox" :validation-rules="validationRules.birthDate" >
91-
<DxLabel template="dateLabel" />
92-
</DxSimpleItem>
93-
94-
<DxSimpleItem data-field="HireDate" editor-type="dxDateBox" >
95-
<DxLabel template="dateLabel" />
96-
</DxSimpleItem>
97-
98-
<DxSimpleItem data-field="Notes" :col-span="2" editor-type="dxTextArea" :editor-options="notesEditorOptions">
99-
<DxLabel template="notesLabel" />
100-
</DxSimpleItem>
101-
102-
<DxSimpleItem data-field="Phone" :editor-options="phoneEditorOptions" :validation-rules="validationRules.phone">
103-
<DxLabel template="phoneLabel" />
104-
</DxSimpleItem>
105-
106-
<DxSimpleItem data-field="Email" :validation-rules="validationRules.email">
107-
<DxLabel template="emailLabel" />
108-
</DxSimpleItem>
109-
</DxGroupItem>
1+
<script setup lang="ts">
2+
import { RouterView } from 'vue-router';
3+
</script>
1104

111-
<template #nameLabel="{ data }">
112-
<LabelTemplate
113-
:data="data"
114-
icon="user"
115-
/>
116-
</template>
117-
<template #positionLabel="{ data }">
118-
<LabelTemplate
119-
:data="data"
120-
icon="info"
121-
/>
122-
</template>
123-
<template #dateLabel="{ data }">
124-
<LabelTemplate
125-
:data="data"
126-
icon="event"
127-
/>
128-
</template>
129-
<template #addressLabel="{ data }">
130-
<LabelTemplate
131-
:data="data"
132-
icon="home"
133-
/>
134-
</template>
135-
<template #notesLabel="{ data }">
136-
<LabelNotesTemplate
137-
:data="data"
138-
/>
139-
</template>
140-
<template #phoneLabel="{ data }">
141-
<LabelTemplate
142-
:data="data"
143-
icon="tel"
144-
/>
145-
</template>
146-
<template #emailLabel="{ data }">
147-
<LabelTemplate
148-
:data="data"
149-
icon="email"
150-
/>
151-
</template>
152-
</DxForm>
153-
</DxPopup>
154-
</div>
5+
<template>
6+
<div class="main">
7+
<RouterView/>
8+
</div>
1559
</template>
156-
157-
<script>
158-
import DxDataGrid, { DxColumn, DxButton, DxEditing, DxToolbar, DxItem } from 'devextreme-vue/data-grid';
159-
import DxPopup, { DxToolbarItem } from 'devextreme-vue/popup'
160-
import DxForm, { DxSimpleItem, DxLabel, DxGroupItem } from 'devextreme-vue/form';
161-
import DxAddRowButton from 'devextreme-vue/button';
162-
import validationEngine from 'devextreme/ui/validation_engine';
163-
import 'devextreme-vue/text-area';
164-
165-
import LabelTemplate from './LabelTemplate.vue';
166-
import LabelNotesTemplate from './LabelNotesTemplate.vue';
167-
168-
import ArrayStore from 'devextreme/data/array_store';
169-
170-
import { employees, positions } from './data.js';
171-
172-
const employeeStore = new ArrayStore({
173-
data: employees,
174-
key: 'ID',
175-
});
176-
177-
export default {
178-
name: "App",
179-
components: {
180-
DxDataGrid,
181-
DxColumn,
182-
DxButton,
183-
DxEditing,
184-
DxToolbar,
185-
DxItem,
186-
DxAddRowButton,
187-
DxPopup,
188-
DxToolbarItem,
189-
DxForm,
190-
DxSimpleItem,
191-
DxLabel,
192-
DxGroupItem,
193-
LabelTemplate,
194-
LabelNotesTemplate,
195-
},
196-
data() {
197-
return {
198-
formData: {},
199-
isNewRecord: null,
200-
visible: false,
201-
employeeStore,
202-
validationGroupName: "gridForm",
203-
positionEditorOptions: { items: positions, searchEnabled: true },
204-
notesEditorOptions: { height: 90, maxLength: 200 },
205-
phoneEditorOptions: {
206-
mask: "+1 (X00) 000-0000",
207-
maskRules: { X: /[02-9]/ },
208-
maskInvalidMessage: "The phone must have a correct USA phone format",
209-
},
210-
validationRules: {
211-
firstName: [{ type: "required", message: "First Name is required." }],
212-
lastName: [{ type: "required", message: "Last Name is required." }],
213-
phone: [{ type: "required", message: "Phone number is required." }],
214-
email: [{ type: "email", message: "Email is incorrect." }],
215-
birthDate: [
216-
{
217-
type: "required",
218-
message: "Birth Date is required.",
219-
invalidDateMessage: "The date must have the following format: mm/dd/yyyy",
220-
},
221-
]
222-
}
223-
}
224-
},
225-
methods: {
226-
showPopup(isNewRecord, formData) {
227-
this.formData = formData;
228-
this.isNewRecord = isNewRecord;
229-
this.visible = true;
230-
},
231-
addRow() {
232-
this.showPopup(true, {});
233-
},
234-
editRow(e) {
235-
this.showPopup(false, {...e.row.data});
236-
},
237-
confirmChanges() {
238-
const result = validationEngine.validateGroup(this.validationGroupName);
239-
240-
if (!result.isValid)
241-
return;
242-
243-
if (this.isNewRecord)
244-
this.employeeStore.insert(this.formData);
245-
else
246-
this.employeeStore.update(this.formData["ID"], this.formData);
247-
248-
this.grid.refresh(true);
249-
this.hidePopup();
250-
},
251-
hidePopup() {
252-
this.visible = false;
253-
}
254-
},
255-
computed: {
256-
grid: function() {
257-
return this.$refs.grid.instance;
258-
}
259-
}
260-
}
261-
</script>

‎Vue/src/LabelNotesTemplate.vue‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎Vue/src/LabelTemplate.vue‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎Vue/src/ValidationRulesAndEditorOptions.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import type {
2+
RequiredRule, EmailRule, PatternRule, RangeRule,
3+
} from 'devextreme-vue/common';
4+
import { positions } from './data';
5+
6+
export const validationRules = {
7+
firstName: [
8+
{ type: 'required', message: 'First Name is required' } as RequiredRule,
9+
],
10+
lastName: [
11+
{ type: 'required', message: 'Last Name is required' } as RequiredRule,
12+
],
13+
birthDate: [
14+
{ type: 'required', message: 'Birth Date is required' } as RequiredRule,
15+
{
16+
type: 'range', min: '1900/01/01', max: new Date().toISOString().split('T')[0], message: 'Birth Date is out of range', invalidDateMessage: 'Invalid date',
17+
} as RangeRule,
18+
],
19+
phone: [
20+
{ type: 'required', message: 'Phone is required' } as RequiredRule,
21+
{ type: 'pattern', pattern: /^\d{11}$/, message: 'Phone must be 11 digits' } as PatternRule,
22+
],
23+
email: [
24+
{ type: 'required', message: 'Email is required' } as RequiredRule,
25+
{ type: 'email', message: 'Email is invalid' } as EmailRule,
26+
],
27+
};
28+
29+
export const positionEditorOptions = {
30+
items: positions,
31+
searchEnabled: true,
32+
};
33+
34+
export const notesEditorOptions = {
35+
height: 90,
36+
};
37+
38+
export const phoneEditorOptions = {
39+
mask: '+0 (000) 000-0000',
40+
};

0 commit comments

Comments
 (0)