Restore Vue HomeContent.vue

Author: AlisherAmonulloev

Vue/src/components/HomeContent.vue

@@ -1,28 +1,57 @@
 <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';
+import {
+  DxDataGrid,
+  DxColumn,
+  DxEditing,
+  DxLookup,
+} from 'devextreme-vue/data-grid';
+import type { DxDataGridTypes } from 'devextreme-vue/data-grid';
+import type { ValueChangedEvent } from 'devextreme/ui/lookup';
+import type { Customer, Employee } from '../types';
+import { customers, employees } from '../data';
+
+const onEditorPreparing = (
+  e: DxDataGridTypes.EditorPreparingEvent<Employee, number>
+): void => {
+  if (e.parentType === 'dataRow' && e.dataField === 'CustomerID') {
+    e.editorOptions.onValueChanged = function(ev: ValueChangedEvent): void {
+      const selectedItem = ev.component.option('selectedItem') as Customer;
+      if (!selectedItem || !e.setValue) return;
+      e.setValue(selectedItem);
+    };
+  }
+};
 
-const props = defineProps({
-  text: {
-    type: String,
-    default: 'count',
-  },
-});
-const count = ref(0);
-const buttonText = computed < string > (
-  () => `Click ${props.text}: ${count.value}`
-);
-function clickHandler() {
-  count.value += 1;
-}
+const setCellValue = (rowData: Employee, value: Customer): void => {
+  if (!rowData || !value) return;
+  rowData.CustomerID = value.CustomerID;
+  rowData.Address = value.Address;
+  rowData.Phone = value.Phone;
+};
 </script>
+
 <template>
-  <div>
-    <DxButton
-      :text="buttonText"
-      @click="clickHandler"
+  <DxDataGrid
+    :data-source="employees"
+    @editor-preparing="onEditorPreparing"
+  >
+    <DxEditing
+      :allow-updating="true"
+      :allow-adding="true"
     />
-  </div>
+    <DxColumn
+      caption="Name"
+      data-field="CustomerID"
+      :set-cell-value="setCellValue"
+    >
+      <DxLookup
+        :data-source="customers"
+        value-expr="CustomerID"
+        display-expr="CustomerName"
+      />
+    </DxColumn>
+    <DxColumn data-field="Address"/>
+    <DxColumn data-field="Phone"/>
+  </DxDataGrid>
 </template>