fix TS in Scheduler set Vue demos

+ formatting

Author: GoodDayForSurf

apps/demos/Demos/PivotGrid/FieldPanel/Vue/App.vue

@@ -125,13 +125,11 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
       e.items?.push({
         text: 'Hide field',
         onItemClick() {
-          let fieldIndex: number;
+          const dataSourceField: Record<string, any> = sourceField.groupName
+            ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
+            : sourceField;
 
-          const dataSourceField: Record<string, any> = sourceField.groupName 
-              ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
-              : sourceField
-
-          fieldIndex = dataSourceField.index;
+          const fieldIndex = dataSourceField.index;
 
           dataSource.field(fieldIndex, {
             area: null,

apps/demos/Demos/PivotGrid/Overview/Vue/App.vue

@@ -76,7 +76,7 @@ const dataSource = new PivotGridDataSource({
   store: sales,
 });
 
-const customizeTooltip = function({ seriesName, originalValue }: Record<string, any>) {
+const customizeTooltip = function ({ seriesName, originalValue }: Record<string, any>) {
   const valueText = currencyFormatter.format(originalValue);
   return {
     html: `${seriesName} | Total<div class='currency'>${valueText}</div>`,

apps/demos/Demos/PivotGrid/StatePersistence/Vue/App.vue

@@ -86,12 +86,11 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
       e.items?.push({
         text: 'Hide field',
         onItemClick() {
-          let fieldIndex: number;
           const dataSourceField: Record<string, any> = sourceField.groupName
-          ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
-              : sourceField;
-          
-          fieldIndex = dataSourceField.index;
+            ? dataSource.getAreaFields(sourceField.area, true)[sourceField.areaIndex]
+            : sourceField;
+
+          const fieldIndex = dataSourceField.index;
 
           dataSource.field(fieldIndex, {
             area: null,
@@ -102,7 +101,7 @@ function onContextMenuPreparing(e: DxPivotGridTypes.ContextMenuPreparingEvent) {
     }
 
     if (sourceField.dataType === 'number') {
-      const setSummaryType = function(args: Record<string, any>) {
+      const setSummaryType = function (args: Record<string, any>) {
         dataSource.field(sourceField.index, {
           summaryType: args.itemData.value,
         });

apps/demos/Demos/PivotGrid/SummaryDisplayModes/Vue/App.vue

@@ -26,7 +26,7 @@
 <script setup lang="ts">
 import DxPivotGrid, {
   DxFieldChooser,
-  DxFieldPanel, 
+  DxFieldPanel,
   type DxPivotGridTypes,
 } from 'devextreme-vue/pivot-grid';
 import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue

@@ -85,10 +85,11 @@ function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
 }
 
 function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEvent) {
-  if (e.appointmentData?.startDate && !Utils.isValidAppointmentDate(new Date(e.appointmentData.startDate))) {
+  if (e.appointmentData?.startDate 
+      && !Utils.isValidAppointmentDate(new Date(e.appointmentData.startDate))) {
     e.cancel = true;
     notifyDisableDate();
-    applyDisableDatesToDateEditors(e.form); 
+    applyDisableDatesToDateEditors(e.form);
   }
 
 }
@@ -111,9 +112,9 @@ function notifyDisableDate() {
 }
 function applyDisableDatesToDateEditors(form: DxForm['instance']) {
   if (!form) {
-    return 
+    return;
   }
-  
+
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
 

apps/demos/Demos/Scheduler/ContextMenu/Vue/App.vue

@@ -136,7 +136,7 @@ function onCellContextMenu({ cellData }: DxSchedulerTypes.CellContextMenuEvent)
   ];
 }
 function onContextMenuItemClick(e: DxContextMenuTypes.ItemClickEvent<ContextMenuItem>) {
-  e.itemData.onItemClick(e);
+  e.itemData?.onItemClick?.(e);
 }
 </script>
 

apps/demos/Demos/Scheduler/Templates/Vue/App.vue

@@ -133,7 +133,7 @@ function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEven
   },
   ]);
 }
-const getMovieById = function(resourceId: string) {
+const getMovieById = function (resourceId: string) {
   return Query(moviesData)
     .filter(['id', resourceId])
     .toArray()[0];

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTemplate.vue

@@ -25,7 +25,7 @@ const props = defineProps<{
 function getFormatDate(value: Date) {
   return formatDate(value, 'shortTime');
 }
-const getMovieById = function(resourceId: string) {
+const getMovieById = function (resourceId: string) {
   return Query(moviesData)
     .filter(['id', resourceId])
     .toArray()[0];

apps/demos/Demos/Scheduler/Templates/Vue/AppointmentTooltipTemplate.vue

@@ -23,7 +23,7 @@ const props = defineProps<{
   templateTooltipModel?: DxSchedulerTypes.AppointmentTooltipTemplateData
 }>();
 
-const getMovieById = function(resourceId: string) {
+const getMovieById = function (resourceId: string) {
   return Query(moviesData)
     .filter(['id', resourceId])
     .toArray()[0];