Scheduler - Update Templates Demo for jQuery (#31605)

Signed-off-by: Eldar Iusupzhanov <[email protected]>

Author: Tucchhaa

apps/demos/Demos/Scheduler/Templates/jQuery/data.js

@@ -5,47 +5,47 @@ const moviesData = [{
   year: 1940,
   image: '../../../../images/movies/HisGirlFriday.jpg',
   duration: 92,
-  color: '#cb6bb2',
+  color: '#9FD89F',
 }, {
   id: 2,
   text: 'Royal Wedding',
   director: 'Stanley Donen',
   year: 1951,
   image: '../../../../images/movies/RoyalWedding.jpg',
   duration: 93,
-  color: '#56ca85',
+  color: '#F1BBBC',
 }, {
   id: 3,
   text: 'A Star Is Born',
   director: 'William A. Wellman',
   year: 1937,
   image: '../../../../images/movies/AStartIsBorn.jpg',
   duration: 111,
-  color: '#1e90ff',
+  color: '#F9E2AE',
 }, {
   id: 4,
   text: 'The Screaming Skull',
   director: 'Alex Nicol',
   year: 1958,
   image: '../../../../images/movies/ScreamingSkull.jpg',
   duration: 68,
-  color: '#ff9747',
+  color: '#EDBBE7',
 }, {
   id: 5,
   text: "It's a Wonderful Life",
   director: 'Frank Capra',
   year: 1946,
   image: '../../../../images/movies/ItsAWonderfulLife.jpg',
   duration: 130,
-  color: '#f05797',
+  color: '#B4D6FA',
 }, {
   id: 6,
   text: 'City Lights',
   director: 'Charlie Chaplin',
   year: 1931,
   image: '../../../../images/movies/CityLights.jpg',
   duration: 87,
-  color: '#2a9010',
+  color: '#C6B1DE',
 }];
 
 const theatreData = [{

apps/demos/Demos/Scheduler/Templates/jQuery/index.js

@@ -1,4 +1,7 @@
 $(() => {
+  let form;
+  let $movieInfoContainer;
+
   $('#scheduler').dxScheduler({
     timeZone: 'America/Los_Angeles',
     dataSource: data,
@@ -13,9 +16,6 @@ $(() => {
     groups: ['theatreId'],
     crossScrollingEnabled: true,
     cellDuration: 20,
-    editing: {
-      allowAdding: false,
-    },
     resources: [{
       fieldExpr: 'movieId',
       dataSource: moviesData,
@@ -24,85 +24,95 @@ $(() => {
       fieldExpr: 'theatreId',
       dataSource: theatreData,
     }],
-    appointmentTooltipTemplate(model) {
-      return getTooltipTemplate(getMovieById(model.targetedAppointmentData.movieId));
+    appointmentTemplate,
+    appointmentTooltipTemplate: (model) => {
+      const movie = getMovieById(model.targetedAppointmentData.movieId);
+      return movieInfoTemplate(movie);
     },
-    appointmentTemplate(model) {
-      const movieInfo = getMovieById(model.targetedAppointmentData.movieId) || {};
-
-      return $(`${"<div class='showtime-preview'>"
-                        + '<div>'}${movieInfo.text}</div>`
-                        + `<div>Ticket Price: <strong>$${model.targetedAppointmentData.price}</strong>`
-                        + '</div>'
-                        + `<div>${DevExpress.localization.formatDate(model.targetedAppointmentData.displayStartDate, 'shortTime')
-                        } - ${DevExpress.localization.formatDate(model.targetedAppointmentData.displayEndDate, 'shortTime')
-                        }</div>`
-                    + '</div>');
-    },
-    onAppointmentFormOpening(data) {
-      const { form } = data;
-      let movieInfo = getMovieById(data.appointmentData.movieId) || {};
-      let { startDate } = data.appointmentData;
+    editing: {
+      allowAdding: false,
+      form: {
+        onInitialized: (e) => {
+          form = e.component;
 
-      form.option('items', [{
-        label: {
-          text: 'Movie',
+          form.on('fieldDataChanged', (e) => {
+            if (e.dataField === 'startDate') {
+              const movie = getMovieById(form.option('formData').movieId);
+              updateEndDate(form, movie);
+            }
+          });
         },
-        editorType: 'dxSelectBox',
-        dataField: 'movieId',
-        editorOptions: {
-          items: moviesData,
-          displayExpr: 'text',
-          valueExpr: 'id',
-          onValueChanged(args) {
-            movieInfo = getMovieById(args.value);
-
-            form.updateData('director', movieInfo.director);
-            form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
+        items: [
+          {
+            template: () => {
+              $movieInfoContainer = $('<div class="movie-info-container">');
+              updateMovieInfoContainer({});
+              return $movieInfoContainer;
+            },
           },
-        },
-      }, {
-        label: {
-          text: 'Director',
-        },
-        name: 'director',
-        editorType: 'dxTextBox',
-        editorOptions: {
-          value: movieInfo.director,
-          readOnly: true,
-        },
-      }, {
-        dataField: 'startDate',
-        editorType: 'dxDateBox',
-        editorOptions: {
-          width: '100%',
-          type: 'datetime',
-          onValueChanged(args) {
-            startDate = args.value;
+          {
+            itemType: 'group',
+            colCount: 2,
+            colCountByScreen: { xs: 2 },
+            items: [
+              {
+                label: { text: 'Movie' },
+                colSpan: 1,
+                editorType: 'dxSelectBox',
+                dataField: 'movieId',
+                editorOptions: {
+                  items: moviesData,
+                  displayExpr: 'text',
+                  valueExpr: 'id',
+                  stylingMode: getEditorStylingMode(),
+                  onValueChanged(e) {
+                    const movie = getMovieById(e.value);
+
+                    form.updateData('director', movie.director);
 
-            form.updateData('endDate', new Date(startDate.getTime() + 60 * 1000 * movieInfo.duration));
+                    updateMovieInfoContainer(movie);
+                    updateEndDate(form, movie);
+                  },
+                  onContentReady: (e) => {
+                    e.component.option('stylingMode', getEditorStylingMode());
+                  },
+                },
+              },
+              {
+                label: { text: 'Price' },
+                colSpan: 1,
+                editorType: 'dxSelectBox',
+                dataField: 'price',
+                editorOptions: {
+                  items: [5, 10, 15, 20],
+                  displayExpr: (value) => `$${value}`,
+                  stylingMode: getEditorStylingMode(),
+                  onContentReady: (e) => {
+                    e.component.option('stylingMode', getEditorStylingMode());
+                  },
+                },
+              },
+            ],
           },
-        },
-      }, {
-        name: 'endDate',
-        dataField: 'endDate',
-        editorType: 'dxDateBox',
-        editorOptions: {
-          width: '100%',
-          type: 'datetime',
-          readOnly: true,
-        },
-      }, {
-        dataField: 'price',
-        editorType: 'dxRadioGroup',
-        editorOptions: {
-          dataSource: [5, 10, 15, 20],
-          itemTemplate(itemData) {
-            return `$${itemData}`;
+          'startDateGroup',
+          {
+            name: 'endDateGroup',
+            disabled: true,
           },
+        ],
+      },
+      popup: {
+        maxWidth: 440,
+        onOptionChanged: (e) => {
+          if (e.fullName === 'toolbarItems' && e.value) {
+            e.value.forEach((item, index) => {
+              if (item.shortcut === 'done' || item.shortcut === 'cancel') {
+                e.component.option(`toolbarItems[${index}].toolbar`, 'bottom');
+              }
+            });
+          }
         },
       },
-      ]);
     },
   }).dxScheduler('instance');
 
@@ -112,20 +122,55 @@ $(() => {
       .toArray()[0];
   }
 
-  function getTooltipTemplate(movieData) {
-    return $(`${"<div class='movie-tooltip'>"
-                    + "<img src='"}${movieData.image}' />`
-                    + '<div class=\'movie-info\'>'
-                        + `<div class='movie-title'>${
-                          movieData.text} (${movieData.year})`
-                        + '</div>'
-                        + '<div>'
-                            + `Director: ${movieData.director
-                            }</div>`
-                        + '<div>'
-                            + `Duration: ${movieData.duration} minutes`
-                        + '</div>'
-                    + '</div>'
-                + '</div>');
+  function updateEndDate(form, movie) {
+    const { startDate } = form.option('formData');
+    const newEndDate = new Date(startDate.getTime() + 60 * 1000 * movie.duration);
+
+    form.updateData('endDate', newEndDate);
+  }
+
+  function appointmentTemplate(model) {
+    const { movieId, displayStartDate, displayEndDate, price } = model.targetedAppointmentData;
+    const movie = getMovieById(movieId) || {};
+
+    return $(`
+      <div class='movie-preview'>
+        <div class='movie-preview-image'>
+          <img src='${movie.image}' />
+        </div>
+        <div class='movie-details'>
+          <div class='title'>${movie.text}</div>
+          <div>Ticket Price: <b>$${price}</b></div>
+          <div>
+            ${DevExpress.localization.formatDate(displayStartDate, 'shortTime')}
+            - ${DevExpress.localization.formatDate(displayEndDate, 'shortTime')}
+          </div>
+        </div>
+      </div>
+    `);
+  }
+
+  function movieInfoTemplate(movie) {
+    return $(`
+      <div class='movie-info'>
+        <div class='movie-preview-image'>
+          <img src='${movie.image}' />
+        </div>
+        <div class='movie-details'>
+          <div class='title'>${movie.text} (${movie.year})</div>
+          <div>Director: ${movie.director}</div>
+          <div>Duration: ${movie.duration} minutes</div>
+        </div>
+      </div>
+    `);
+  }
+
+  function updateMovieInfoContainer(movie) {
+    const $movieInfo = movieInfoTemplate(movie);
+    $movieInfoContainer.empty().append($movieInfo);
+  }
+
+  function getEditorStylingMode() {
+    return $('.dx-theme-fluent, .dx-theme-material').length > 0 ? 'filled' : 'outlined';
   }
 });