Merge branch 'main' into 1395-layout-flex-button-input

infor-design · Oct 30, 2023 · 7281952 · 7281952
2 parents 10bb634 + c06bb04
commit 7281952
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 27 deletions.
diff --git a/doc/CHANGELOG.md b/doc/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### 1.0.0-beta.17 Fixes
 
+- `[Calendar]` Add `disableSettings` property to calendar. ([#1471](https://github.com/infor-design/enterprise-wc/issues/1471))
 - `[FlexLayout]` Added a flex example using IdsButtons and IdsInputs. ([#1395](https://github.com/infor-design/enterprise-wc/issues/1395))
 
 ## 1.0.0-beta.16

diff --git a/src/components/ids-calendar/demos/disabled-settings.html b/src/components/ids-calendar/demos/disabled-settings.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title><%= htmlWebpackPlugin.options.title %></title>
+  <%= htmlWebpackPlugin.options.font %>
+</head>
+<body>
+  <ids-container role="main" padding="8" hidden>
+    <ids-toolbar>
+      <ids-toolbar-section align="end" type="fluid">
+        <ids-menu-button menu="add-event" value="${view}">
+          <ids-icon icon="add"></ids-icon>
+          <span class="audible">Add Event</span>
+        </ids-menu-button>
+        <ids-popup-menu id="add-event" trigger="click">
+          <ids-menu-group>
+            <ids-menu-item value="add-api">
+              <ids-text>Add Event (API)</ids-text>
+            </ids-menu-item>
+            <ids-menu-item value="add-modal">
+              <ids-text>Add Event (Modal)</ids-text>
+            </ids-menu-item>
+            <ids-menu-item value="clear">
+              <ids-text>Clear Events</ids-text>
+            </ids-menu-item>
+          </ids-menu-group>
+        </ids-popup-menu>
+
+        <ids-theme-switcher mode="light" version="new"></ids-theme-switcher>
+      </ids-toolbar-section>
+    </ids-toolbar>
+    <ids-layout-grid auto-fit="true" padding="md">
+      <ids-text font-size="12" type="h1">Calendar View</ids-text>
+    </ids-layout-grid>
+    <ids-layout-grid auto-fit="true" padding-x="md">
+      <ids-layout-grid-cell>
+        <ids-calendar date="10/22/2019" show-legend show-details show-today view-picker></ids-calendar>
+      </ids-layout-grid-cell>
+    </ids-layout-grid>
+  </ids-container>
+</body>
+</html>
diff --git a/src/components/ids-calendar/demos/disabled-settings.ts b/src/components/ids-calendar/demos/disabled-settings.ts
@@ -0,0 +1,59 @@
+import eventsJSON from '../../../assets/data/events.json';
+import eventTypesJSON from '../../../assets/data/event-types.json';
+
+const eventsURL: any = eventsJSON;
+const eventTypesURL: any = eventTypesJSON;
+
+/**
+ * Fetch events.json
+ * @returns {Promise} events.json content
+ */
+function getCalendarEvents(): Promise<any> {
+  return fetch(eventsURL).then((res) => res.json());
+}
+
+/**
+ * Fetch event-types.json
+ * @returns {Promise} event-types.json content
+ */
+function getEventTypes(): Promise<any> {
+  return fetch(eventTypesURL).then((res) => res.json());
+}
+
+document.addEventListener('DOMContentLoaded', async () => {
+  const calendar: any = document.querySelector('ids-calendar');
+  const addEventMenu = document.querySelector('#add-event');
+
+  // Set event types
+  calendar.eventTypesData = await getEventTypes();
+  calendar.eventsData = await getCalendarEvents();
+
+  addEventMenu?.addEventListener('selected', (evt: any) => {
+    // Mock user defined id
+    const id: string = Date.now().toString() + Math.floor(Math.random() * 100);
+
+    switch (evt.detail.value) {
+      case 'add-modal':
+        calendar.createNewEvent(id, true);
+        break;
+      case 'add-api':
+        calendar.createNewEvent(id, false);
+        break;
+      case 'clear':
+        calendar.clearEvents();
+        break;
+      default:
+        break;
+    }
+  });
+
+  // Listen to dayselected events
+  calendar.addEventListener('dayselected', (evt: any) => {
+    console.info('dayselected', evt.detail);
+  });
+
+  calendar.disableSettings = {
+    dates: ['10/22/2019', '10/23/2019', '10/24/2019', '10/25/2019'],
+    isEnable: true
+  };
+});
diff --git a/src/components/ids-calendar/demos/index.yaml b/src/components/ids-calendar/demos/index.yaml
@@ -14,3 +14,6 @@
   - link: first-day-of-week.html
     type: Example
     description: Custom calendar first day of week
+  - link: disabled-settings.html
+    type: Example
+    description: Calendar with disabled settings
diff --git a/src/components/ids-calendar/ids-calendar-event.ts b/src/components/ids-calendar/ids-calendar-event.ts
@@ -102,7 +102,7 @@ export default class IdsCalendarEvent extends Base {
 
     const displayTime = this.getDisplayTime();
     const text = this.eventData.shortSubject || this.eventData.subject;
-    const tooltip = this.eventData.subject;
+    const tooltip = this.disabled ? '' : this.eventData.subject;
     const overflow = this.overflow;
     const icon = this.eventData.icon ? `<ids-icon class="calendar-event-icon" icon="${this.eventData.icon}" height="11" width="11"></ids-icon>` : '';
 
@@ -129,6 +129,7 @@ export default class IdsCalendarEvent extends Base {
     this.onEvent('click', this.container, (evt: MouseEvent) => {
       evt.preventDefault();
       evt.stopPropagation();
+      if (this.disabled) return;
       triggerFn('click');
     });
   }
@@ -436,4 +437,24 @@ export default class IdsCalendarEvent extends Base {
   get dateKey(): string {
     return this.#dateKey;
   }
+
+  /**
+   * Set disabled property
+   * @param {boolean|string|null} val disabled value
+   */
+  set disabled(val: boolean | string | null) {
+    if (stringToBool(val)) {
+      this.setAttribute(attributes.DISABLED, '');
+    } else {
+      this.removeAttribute(attributes.DISABLED);
+    }
+  }
+
+  /**
+   * Get disabled property
+   * @returns {boolean} disabled value
+   */
+  get disabled(): boolean {
+    return stringToBool(this.getAttribute(attributes.DISABLED));
+  }
 }
diff --git a/src/components/ids-calendar/ids-calendar.ts b/src/components/ids-calendar/ids-calendar.ts
@@ -37,6 +37,8 @@ import {
   subtractDate
 } from '../../utils/ids-date-utils/ids-date-utils';
 import IdsLocale from '../ids-locale/ids-locale';
+import IdsMonthViewAttributeMixin from '../ids-month-view/ids-month-view-attribute-mixin';
+import { IdsDisableSettings } from '../ids-month-view/ids-month-view-common';
 
 type CalendarEventDetail = {
   id: string;
@@ -52,11 +54,13 @@ type CalendarEventDetail = {
 
 type CalendarViewTypes = 'month' | 'week' | 'day';
 
-const Base = IdsDateAttributeMixin(
-  IdsCalendarEventsMixin(
-    IdsLocaleMixin(
-      IdsEventsMixin(
-        IdsElement
+const Base = IdsMonthViewAttributeMixin(
+  IdsDateAttributeMixin(
+    IdsCalendarEventsMixin(
+      IdsLocaleMixin(
+        IdsEventsMixin(
+          IdsElement
+        )
       )
     )
   )
@@ -68,6 +72,8 @@ const Base = IdsDateAttributeMixin(
  * @inherits IdsElement
  * @mixes IdsEventsMixin
  * @mixes IdsCalendarEventsMixin
+ * @mixes IdsLocaleMixin
+ * @mixes IdsDateAttributeMixin
  */
 @customElement('ids-calendar')
 @scss(styles)
@@ -439,9 +445,6 @@ export default class IdsCalendar extends Base {
         id="${id}"
         label="${this.localeAPI.translate(labelKey)}"
         size="full"
-        year="${date.getFullYear()}"
-        month="${date.getMonth()}"
-        day="${date.getDate()}"
         value="${this.localeAPI.formatDate(date)}"
         mask>
       </ids-date-picker>
@@ -454,7 +457,7 @@ export default class IdsCalendar extends Base {
         label="&nbsp"
         size="full"
         disabled="${stringToBool(data.isAllDay)}"
-        value="${this.localeAPI.formatHour(date.getHours() + (date.getMinutes() / 60))}">
+        value="${this.localeAPI.formatDate(date, { hour: 'numeric', minute: 'numeric' })}">
       </ids-time-picker>
     `;
 
@@ -814,26 +817,22 @@ export default class IdsCalendar extends Base {
     const isAllDayBool = formElem.querySelector('#event-is-all-day')?.checked;
     const isAllDay = isAllDayBool === 'true' ? 'true' : 'false';
     const comments = formElem.querySelector('#event-comments')?.value;
+
     const fromDate = formElem.querySelector('#event-from-date');
     const fromHours = formElem.querySelector('#event-from-hour');
-    const starts: string = new Date(
-      fromDate.year,
-      fromDate.month,
-      fromDate.day,
-      isAllDayBool ? 0 : fromHours.hours24,
-      isAllDayBool ? 0 : fromHours.minutes,
-      isAllDayBool ? 0 : fromHours.seconds
-    ).toISOString();
+    const startDate: Date = fromDate.dateValue;
+    startDate.setHours(isAllDayBool ? 0 : fromHours.hours24);
+    startDate.setMinutes(isAllDayBool ? 0 : fromHours.minutes);
+    startDate.setSeconds(isAllDayBool ? 0 : fromHours.seconds);
+    const starts: string = startDate.toISOString();
+
     const toDate = formElem.querySelector('#event-to-date');
     const toHours = formElem.querySelector('#event-to-hour');
-    const ends = new Date(
-      toDate.year,
-      toDate.month,
-      toDate.day,
-      isAllDayBool ? 23 : toHours.hours24,
-      isAllDayBool ? 59 : toHours.minutes,
-      isAllDayBool ? 59 : toHours.seconds
-    ).toISOString();
+    const endDate: Date = toDate.dateValue;
+    endDate.setHours(isAllDayBool ? 23 : toHours.hours24);
+    endDate.setMinutes(isAllDayBool ? 59 : toHours.minutes);
+    endDate.setSeconds(isAllDayBool ? 59 : toHours.seconds);
+    const ends = endDate.toISOString();
 
     const eventData = {
       id, subject, type, isAllDay, starts, ends, comments
@@ -869,6 +868,10 @@ export default class IdsCalendar extends Base {
     this.insertViewTemplate(template);
     this.relayCalendarData();
     this.state.view = view;
+
+    if (view === 'month' && this.disableSettings?.dates?.length) {
+      (this.getView() as IdsMonthView).disableSettings = this.disableSettings;
+    }
   }
 
   /**
@@ -1364,4 +1367,12 @@ export default class IdsCalendar extends Base {
       view.endDate = end;
     }
   }
+
+  onDisableSettingsChange(settings: IdsDisableSettings): void {
+    const view = this.getView();
+
+    if (view?.tagName === 'IDS-MONTH-VIEW') {
+      (view as IdsMonthView).disableSettings = settings;
+    }
+  }
 }
diff --git a/src/components/ids-month-view/ids-month-view-attribute-mixin.ts b/src/components/ids-month-view/ids-month-view-attribute-mixin.ts
@@ -94,7 +94,9 @@ const IdsMonthViewAttributeMixin = <T extends Constraints>(superclass: T) => cla
       ...deepClone(val)
     };
 
-    if (typeof this.onDisableSettingsChange === 'function') this.onDisableSettingsChange(this.#disableSettings);
+    if (typeof this.onDisableSettingsChange === 'function') {
+      this.onDisableSettingsChange(this.#disableSettings);
+    }
   }
 
   /**

diff --git a/src/components/ids-month-view/ids-month-view.ts b/src/components/ids-month-view/ids-month-view.ts
@@ -1562,6 +1562,7 @@ class IdsMonthView extends Base implements IdsRangeSettingsInterface {
         const month = start.getMonth();
         calendarEvent.dateKey = `${year}${month}${day}`;
         const dateCell = this.container?.querySelector(`td[data-year="${year}"][data-month="${month}"][data-day="${day}"]`);
+        calendarEvent.disabled = !!dateCell?.classList.contains('is-disabled');
 
         if (dateCell) {
           // multi day events