AI Column: Write JS Framework demos, TreeList, Vue (#31716)

Author: dmirgaev

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

@@ -0,0 +1,105 @@
+<template>
+  <DxTreeList
+    id="employees"
+    keyExpr="ID"
+    parentIdExpr="Head_ID"
+    :dataSource="employees"
+    :autoExpandAll="true"
+    :showBorders="true"
+    :aiIntegration="aiIntegration"
+    :onAIColumnRequestCreating="onAIColumnRequestCreating"
+  >
+    <DxScrolling :mode="'standard'"/>
+    <DxPaging
+      :enabled="true"
+      :pageSize="10"
+    />
+    <DxColumnFixing :enabled="true"/>
+
+    <DxColumn
+      caption="Employee"
+      cssClass="employee__cell"
+      :width="260"
+      cellTemplate="employee-cell"
+    />
+    <template #employee-cell="{ data: { data: employee} }">
+      <Employee
+        :firstName="employee.First_Name"
+        :lastName="employee.Last_Name"
+      />
+    </template>
+    <DxColumn
+      dataField="Title"
+      caption="Position"
+      :width="140"
+    />
+    <DxColumn
+      dataField="Status"
+      :minWidth="180"
+      cellTemplate="status-cell"
+    />
+    <template #status-cell="{ data: { data: employee} }">
+      <Status :status="employee.Status"/>
+    </template>
+    <DxColumn
+      dataField="City"
+      :width="180"
+    />
+    <DxColumn
+      dataField="State"
+      :width="140"
+    />
+    <DxColumn
+      dataField="Email"
+      :minWidth="200"
+      cellTemplate="email-cell"
+    />
+    <template #email-cell="{ data: { data: employee} }">
+      <Email :email="employee.Email"/>
+    </template>
+    <DxColumn
+      name="AI Column"
+      caption="AI Column"
+      type="ai"
+      cssClass="ai__cell"
+      :ai="aiConfig"
+      :fixed="true"
+      fixedPosition="right"
+      :width="180"
+    />
+  </DxTreeList>
+</template>
+
+<script setup lang="ts">
+import { DxTreeList, DxColumn, DxColumnFixing, DxScrolling, DxPaging } from 'devextreme-vue/tree-list';
+import Email from './Email.vue';
+import Employee from './Employee.vue';
+import Status from './Status.vue';
+import { type IEmployee, employees } from './data.ts';
+import { aiIntegration } from './service.ts';
+
+const aiConfig = {
+  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.',
+  mode: 'auto' as const,
+  noDataText: 'No data',
+};
+
+const onAIColumnRequestCreating = (e: { data: Partial<IEmployee>[] }) => {
+  e.data = e.data.map((item) => ({
+    ID: item.ID,
+    First_Name: item.First_Name,
+    Last_Name: item.Last_Name,
+    Title: item.Title,
+  }));
+};
+</script>
+
+<style scoped>
+#app .ai__cell {
+  background-color: var(--dx-datagrid-row-alternation-bg);
+}
+
+#app .employee__cell > div {
+  align-items: flex-end;
+}
+</style>

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

@@ -0,0 +1,9 @@
+<template>
+  <a :href="`mailto:${email}`">{{ email }}</a>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  email: string,
+}>();
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="employee__wrapper">
+    <div class="employee__img-wrapper">
+      <img
+        :src="`../../../../images/employees/new/${firstName} ${lastName}.jpg`"
+        :alt="`${firstName} ${lastName}`"
+      >
+    </div>
+    <div class="employee__text-wrapper">
+      <div class="employee__text">{{ firstName }}</div>
+      <div class="employee__text">{{ lastName }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  firstName: string;
+  lastName: string;
+}>();
+</script>
+
+<style scoped>
+.employee__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.employee__img-wrapper {
+  width: 40px;
+  height: 40px;
+  border: var(--dx-border-width) solid var(--dx-color-border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.employee__img-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+}
+
+.employee__text-wrapper {
+  width: calc(100% - 48px);
+}
+
+.employee__text {
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>

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

@@ -0,0 +1,39 @@
+<template>
+  <div :class="`status status--${status.toLowerCase()}`">
+    <div class="status__indicator"/>
+    <div>{{ status }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  status: string,
+}>();
+</script>
+
+<style scoped>
+.status {
+  display: flex;
+  align-items: center;
+}
+
+.status--salaried {
+  color: var(--dx-color-success);
+}
+
+.status--commission {
+  color: #f7630c;
+}
+
+.status--terminated {
+  color: var(--dx-color-danger);
+}
+
+.status__indicator {
+  background-color: currentcolor;
+  margin-right: 8px;
+  border-radius: 50%;
+  height: 12px;
+  width: 12px;
+}
+</style>