Skip to content

Commit 7589d18

Browse files
artem-kurchenkoartem-kurchenko
committed
fix Vue
1 parent 69048a9 commit 7589d18

File tree

8 files changed

+254
-298
lines changed

8 files changed

+254
-298
lines changed

‎Vue/src/assets/main.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44
-moz-osx-font-smoothing: grayscale;
55
color: #2c3e50;
66
margin: 50px 50px;
7-
width: 90vh;
7+
width: 90vw;
88
}

‎Vue/src/components/HomeContent.vue‎

Lines changed: 97 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,107 @@
11
<script setup lang="ts">
2-
import { computed, ref } from 'vue';
2+
import { ref } from 'vue';
33
4-
import 'devextreme/dist/css/dx.material.blue.light.compact.css';
5-
import DxButton from 'devextreme-vue/button';
4+
import 'devextreme/dist/css/dx.light.css';
65
7-
const props = defineProps({
8-
text: {
9-
type: String,
10-
default: 'count',
6+
import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box';
7+
import DxForm, { DxSimpleItem, DxLabel, type DxFormTypes } from 'devextreme-vue/form';
8+
import type dxSelectBox from 'devextreme/ui/select_box';
9+
import notify from 'devextreme/ui/notify';
10+
11+
import service from '../data';
12+
13+
const states = service.getStates(),
14+
cities = service.getCities(),
15+
address = ref(service.getAddress());
16+
const citySelectBoxRef = ref<DxSelectBox>();
17+
const cityValue = ref(null);
18+
const stateEditorOptions = {
19+
dataSource: states,
20+
valueExpr: 'ID',
21+
displayExpr: 'Name'
1122
},
12-
});
13-
const count = ref(0);
14-
const buttonText = computed<string>(
15-
() => `Click ${props.text}: ${count.value}`
16-
);
17-
function clickHandler() {
18-
count.value += 1;
23+
cityEditorOptions = {
24+
dataSource: cities,
25+
valueExpr: 'ID',
26+
displayExpr: 'Name'
27+
};
28+
function stateValueChanged(e: DxSelectBoxTypes.ValueChangedEvent) {
29+
const citySelectBox = citySelectBoxRef?.value?.instance;
30+
if (citySelectBox) {
31+
const dataSource = citySelectBox.getDataSource();
32+
dataSource.filter(['StateID', '=', e.value]);
33+
dataSource.load().then(() => {
34+
cityValue.value = null;
35+
}).catch(() => {
36+
notify('An error occurred while loading changes.', 'error', 3000);
37+
});
38+
}
39+
}
40+
function fieldDataChanged(e: DxFormTypes.FieldDataChangedEvent) {
41+
if (e.dataField === 'StateID') {
42+
const cityEditor = e.component.getEditor('CityID') as dxSelectBox;
43+
const dataSource = cityEditor.getDataSource();
44+
dataSource.filter(['StateID', '=', e.value]);
45+
dataSource.load().then(() => {
46+
address.value.CityID = null;
47+
}).catch(() => {
48+
notify('An error occurred while loading changes.', 'error', 3000);
49+
});
50+
}
1951
}
2052
</script>
2153
<template>
2254
<div>
23-
<DxButton
24-
:text="buttonText"
25-
@click="clickHandler"
26-
/>
55+
<div
56+
class="dx-fieldset"
57+
style="width:50%"
58+
>
59+
<div class="dx-fieldset-header">Select State, City</div>
60+
<div class="dx-field">
61+
<div class="dx-field-label">State</div>
62+
<div class="dx-field-value">
63+
<DxSelectBox
64+
:data-source="states"
65+
value-expr="ID"
66+
display-expr="Name"
67+
@valueChanged="stateValueChanged"
68+
/>
69+
</div>
70+
</div>
71+
<div class="dx-field">
72+
<div class="dx-field-label">City</div>
73+
<div class="dx-field-value">
74+
<DxSelectBox
75+
ref="citySelectBoxRef"
76+
:data-source="cities"
77+
v-model:value="cityValue"
78+
value-expr="ID"
79+
display-expr="Name"
80+
/>
81+
</div>
82+
</div>
83+
<div class="dx-fieldset-header">In Form</div>
84+
<div class="dx-field">
85+
<DxForm
86+
v-model:form-data="address"
87+
@field-data-changed="fieldDataChanged"
88+
>
89+
<DxSimpleItem
90+
data-field="StateID"
91+
editor-type="dxSelectBox"
92+
:editor-options="stateEditorOptions"
93+
>
94+
<DxLabel text="State"/>
95+
</DxSimpleItem>
96+
<DxSimpleItem
97+
data-field="CityID"
98+
editor-type="dxSelectBox"
99+
:editor-options="cityEditorOptions"
100+
>
101+
<DxLabel text="City"/>
102+
</DxSimpleItem>
103+
</DxForm>
104+
</div>
105+
</div>
27106
</div>
28107
</template>

‎Vue/src/data.ts‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
export interface State {
2+
ID: number;
3+
Name: string;
4+
}
5+
6+
export interface City {
7+
ID: number;
8+
Name: string;
9+
StateID: number | null;
10+
}
11+
12+
export interface Address {
13+
StateID: number | null;
14+
CityID: number | null;
15+
}
16+
17+
const address: Address = { StateID: null, CityID: null };
18+
19+
const states: State[] = [
20+
{
21+
ID: 1,
22+
Name: 'Alabama',
23+
},
24+
{
25+
ID: 2,
26+
Name: 'Alaska',
27+
},
28+
{
29+
ID: 3,
30+
Name: 'Arizona',
31+
},
32+
{
33+
ID: 4,
34+
Name: 'Arkansas',
35+
},
36+
{
37+
ID: 5,
38+
Name: 'California',
39+
},
40+
];
41+
42+
const cities: City[] = [
43+
{
44+
ID: 1,
45+
Name: 'Tuscaloosa',
46+
StateID: 1,
47+
},
48+
{
49+
ID: 2,
50+
Name: 'Hoover',
51+
StateID: 1,
52+
},
53+
{
54+
ID: 3,
55+
Name: 'Dothan',
56+
StateID: 1,
57+
},
58+
{
59+
ID: 4,
60+
Name: 'Decatur',
61+
StateID: 1,
62+
},
63+
{
64+
ID: 5,
65+
Name: 'Anchorage',
66+
StateID: 2,
67+
},
68+
{
69+
ID: 6,
70+
Name: 'Fairbanks',
71+
StateID: 2,
72+
},
73+
{
74+
ID: 7,
75+
Name: 'Juneau',
76+
StateID: 2,
77+
},
78+
{
79+
ID: 8,
80+
Name: 'Avondale',
81+
StateID: 3,
82+
},
83+
{
84+
ID: 9,
85+
Name: 'Buckeye',
86+
StateID: 3,
87+
},
88+
{
89+
ID: 10,
90+
Name: 'Carefree',
91+
StateID: 3,
92+
},
93+
{
94+
ID: 11,
95+
Name: 'Springdale',
96+
StateID: 4,
97+
},
98+
{
99+
ID: 12,
100+
Name: 'Rogers',
101+
StateID: 4,
102+
},
103+
{
104+
ID: 13,
105+
Name: 'Sherwood',
106+
StateID: 4,
107+
},
108+
{
109+
ID: 14,
110+
Name: 'Jacksonville',
111+
StateID: 4,
112+
},
113+
{
114+
ID: 15,
115+
Name: 'Cabot',
116+
StateID: 4,
117+
},
118+
{
119+
ID: 16,
120+
Name: 'Adelanto',
121+
StateID: 5,
122+
},
123+
{
124+
ID: 17,
125+
Name: 'Glendale',
126+
StateID: 5,
127+
},
128+
{
129+
ID: 18,
130+
Name: 'Moorpark',
131+
StateID: 5,
132+
},
133+
{
134+
ID: 19,
135+
Name: 'Needles',
136+
StateID: 5,
137+
},
138+
{
139+
ID: 20,
140+
Name: 'Ontario',
141+
StateID: 5,
142+
},
143+
];
144+
145+
export default {
146+
getStates(): State[] {
147+
return states;
148+
},
149+
getCities(): City[] {
150+
return cities;
151+
},
152+
getAddress(): Address {
153+
return address;
154+
},
155+
};

0 commit comments

Comments
 (0)