Skip to content

Commit 6d4c786

Browse files
dmirgaevdmirgaev
authored
AI Column: Write JS Framework demos, TreeList, Vue (#31716)
1 parent a144402 commit 6d4c786

8 files changed

Lines changed: 612 additions & 0 deletions

File tree

‎apps/demos/Demos/TreeList/AIColumns/Vue/App.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<DxTreeList
3+
id="employees"
4+
keyExpr="ID"
5+
parentIdExpr="Head_ID"
6+
:dataSource="employees"
7+
:autoExpandAll="true"
8+
:showBorders="true"
9+
:aiIntegration="aiIntegration"
10+
:onAIColumnRequestCreating="onAIColumnRequestCreating"
11+
>
12+
<DxScrolling :mode="'standard'"/>
13+
<DxPaging
14+
:enabled="true"
15+
:pageSize="10"
16+
/>
17+
<DxColumnFixing :enabled="true"/>
18+
19+
<DxColumn
20+
caption="Employee"
21+
cssClass="employee__cell"
22+
:width="260"
23+
cellTemplate="employee-cell"
24+
/>
25+
<template #employee-cell="{ data: { data: employee} }">
26+
<Employee
27+
:firstName="employee.First_Name"
28+
:lastName="employee.Last_Name"
29+
/>
30+
</template>
31+
<DxColumn
32+
dataField="Title"
33+
caption="Position"
34+
:width="140"
35+
/>
36+
<DxColumn
37+
dataField="Status"
38+
:minWidth="180"
39+
cellTemplate="status-cell"
40+
/>
41+
<template #status-cell="{ data: { data: employee} }">
42+
<Status :status="employee.Status"/>
43+
</template>
44+
<DxColumn
45+
dataField="City"
46+
:width="180"
47+
/>
48+
<DxColumn
49+
dataField="State"
50+
:width="140"
51+
/>
52+
<DxColumn
53+
dataField="Email"
54+
:minWidth="200"
55+
cellTemplate="email-cell"
56+
/>
57+
<template #email-cell="{ data: { data: employee} }">
58+
<Email :email="employee.Email"/>
59+
</template>
60+
<DxColumn
61+
name="AI Column"
62+
caption="AI Column"
63+
type="ai"
64+
cssClass="ai__cell"
65+
:ai="aiConfig"
66+
:fixed="true"
67+
fixedPosition="right"
68+
:width="180"
69+
/>
70+
</DxTreeList>
71+
</template>
72+
73+
<script setup lang="ts">
74+
import { DxTreeList, DxColumn, DxColumnFixing, DxScrolling, DxPaging } from 'devextreme-vue/tree-list';
75+
import Email from './Email.vue';
76+
import Employee from './Employee.vue';
77+
import Status from './Status.vue';
78+
import { type IEmployee, employees } from './data.ts';
79+
import { aiIntegration } from './service.ts';
80+
81+
const aiConfig = {
82+
prompt: 'Identify department for each employee. It should be one of the following department types: "Management", "Human Resources", "IT", "Shipping", "Support", "Sales", "Engineering". Use "Engineering" by default.',
83+
mode: 'auto' as const,
84+
noDataText: 'No data',
85+
};
86+
87+
const onAIColumnRequestCreating = (e: { data: Partial<IEmployee>[] }) => {
88+
e.data = e.data.map((item) => ({
89+
ID: item.ID,
90+
First_Name: item.First_Name,
91+
Last_Name: item.Last_Name,
92+
Title: item.Title,
93+
}));
94+
};
95+
</script>
96+
97+
<style scoped>
98+
#app .ai__cell {
99+
background-color: var(--dx-datagrid-row-alternation-bg);
100+
}
101+
102+
#app .employee__cell > div {
103+
align-items: flex-end;
104+
}
105+
</style>

‎apps/demos/Demos/TreeList/AIColumns/Vue/Email.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<a :href="`mailto:${email}`">{{ email }}</a>
3+
</template>
4+
5+
<script setup lang="ts">
6+
defineProps<{
7+
email: string,
8+
}>();
9+
</script>

‎apps/demos/Demos/TreeList/AIColumns/Vue/Employee.vue‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<template>
2+
<div class="employee__wrapper">
3+
<div class="employee__img-wrapper">
4+
<img
5+
:src="`../../../../images/employees/new/${firstName} ${lastName}.jpg`"
6+
:alt="`${firstName} ${lastName}`"
7+
>
8+
</div>
9+
<div class="employee__text-wrapper">
10+
<div class="employee__text">{{ firstName }}</div>
11+
<div class="employee__text">{{ lastName }}</div>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script setup lang="ts">
17+
defineProps<{
18+
firstName: string;
19+
lastName: string;
20+
}>();
21+
</script>
22+
23+
<style scoped>
24+
.employee__wrapper {
25+
display: flex;
26+
align-items: center;
27+
gap: 8px;
28+
}
29+
30+
.employee__img-wrapper {
31+
width: 40px;
32+
height: 40px;
33+
border: var(--dx-border-width) solid var(--dx-color-border);
34+
border-radius: 50%;
35+
cursor: pointer;
36+
}
37+
38+
.employee__img-wrapper img {
39+
width: 100%;
40+
height: 100%;
41+
object-fit: cover;
42+
object-position: center;
43+
border-radius: 50%;
44+
}
45+
46+
.employee__text-wrapper {
47+
width: calc(100% - 48px);
48+
}
49+
50+
.employee__text {
51+
margin: 0;
52+
padding: 0;
53+
white-space: nowrap;
54+
overflow: hidden;
55+
text-overflow: ellipsis;
56+
}
57+
</style>

‎apps/demos/Demos/TreeList/AIColumns/Vue/Status.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<div :class="`status status--${status.toLowerCase()}`">
3+
<div class="status__indicator"/>
4+
<div>{{ status }}</div>
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
defineProps<{
10+
status: string,
11+
}>();
12+
</script>
13+
14+
<style scoped>
15+
.status {
16+
display: flex;
17+
align-items: center;
18+
}
19+
20+
.status--salaried {
21+
color: var(--dx-color-success);
22+
}
23+
24+
.status--commission {
25+
color: #f7630c;
26+
}
27+
28+
.status--terminated {
29+
color: var(--dx-color-danger);
30+
}
31+
32+
.status__indicator {
33+
background-color: currentcolor;
34+
margin-right: 8px;
35+
border-radius: 50%;
36+
height: 12px;
37+
width: 12px;
38+
}
39+
</style>

0 commit comments

Comments
 (0)