underpost 2.8.1 → 2.8.7

package/src/client/components/core/Auth.js

@@ -3,7 +3,10 @@ import { Account } from './Account.js';
 import { loggerFactory } from './Logger.js';
 import { LogIn } from './LogIn.js';
 import { LogOut } from './LogOut.js';
+import { NotificationManager } from './NotificationManager.js';
 import { SignUp } from './SignUp.js';
+import { Translate } from './Translate.js';
+import { s } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -65,6 +68,7 @@ const Auth = {
               const _result = await UserService.get({ id: 'auth' });
               return {
                 status: _result.status,
+                message: _result.message,
                 data: {
                   user: _result.data,
                 },
@@ -77,6 +81,15 @@ const Auth = {
           await Account.updateForm(data.user);
           return { user: data.user };
         }
+        if (message && message.match('expired'))
+          setTimeout(() => {
+            s(`.main-btn-log-in`).click();
+            NotificationManager.Push({
+              html: Translate.Render(`expired-session`),
+              status: 'warning',
+            });
+          });
+        return await Auth.sessionOut();
       }
 
       // anon guest session
@@ -92,20 +105,25 @@ const Auth = {
 
       this.setGuestToken(guestToken);
       let { data, status, message } = await UserService.get({ id: 'auth' });
-      if (status === 'error') throw new Error(message);
+      if (status === 'error') {
+        if (message && message.match('expired')) {
+          localStorage.removeItem('jwt.g');
+          return await Auth.sessionOut();
+        } else throw new Error(message);
+      }
       await Account.updateForm(data);
       return { user: data };
     } catch (error) {
       logger.error(error);
-      localStorage.removeItem('jwt');
-      localStorage.removeItem('jwt.g');
       return { user: UserMock.default };
     }
   },
   sessionOut: async function () {
     this.deleteToken();
     localStorage.removeItem('jwt');
-    await LogOut.Trigger(await this.sessionIn());
+    const result = await this.sessionIn();
+    await LogOut.Trigger(result);
+    return result;
   },
 };
 

package/src/client/components/core/Blockchain.js

@@ -25,7 +25,7 @@ const BlockChainManagement = {
                 placeholder: true,
               })}
               ${await BtnIcon.Render({
-                class: `section-mp btn-custom btn-upload-blockchain`,
+                class: `inl section-mp btn-custom btn-upload-blockchain`,
                 label: html`<i class="fas fa-plus"></i> ${Translate.Render(`create`)}`,
               })}
             </div>

package/src/client/components/core/CalendarCore.js

@@ -1,7 +1,7 @@
 import { EventSchedulerService } from '../../services/event-scheduler/event-scheduler.service.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
-import { newInstance, range, s4 } from './CommonJs.js';
+import { isValidDate, newInstance, range, s4 } from './CommonJs.js';
 import { renderCssAttr } from './Css.js';
 import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
@@ -13,83 +13,116 @@ import { append, getQueryParams, getTimeZone, htmls, s, sa } from './VanillaJs.j
 
 // https://fullcalendar.io/docs/event-object
 
+const daysOfWeekOptions = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
+
+const eventDateFactory = (event) =>
+  newInstance({
+    event: { ...event.extendedProps, title: event._def.title },
+    start: event.start,
+    end: event.end,
+  });
+
 const CalendarCore = {
   RenderStyle: async function () {},
   Data: {},
-  Render: async function (options = { idModal: '', Elements: {}, heightTopBar: 50, heightBottomBar: 50 }) {
+  Render: async function (
+    options = { idModal: '', Elements: {}, heightTopBar: 50, heightBottomBar: 50, hiddenDates: [] },
+  ) {
     this.Data[options.idModal] = {
       data: [],
       originData: [],
       filesData: [],
       calendar: {},
+      hiddenDates: options.hiddenDates ? options.hiddenDates : [],
     };
 
     const { heightTopBar, heightBottomBar } = options;
 
     const titleIcon = html`<i class="fas fa-calendar-alt"></i>`;
 
-    const getSrrData = () => {
-      this.Data[options.idModal].data = range(0, 5).map((i) => {
-        return {
-          id: `event-${i}`,
-          description: `Event ${s4()}${s4()}${s4()}`,
-          start: new Date().toTimeString(),
-          end: new Date().toTimeString(),
-        };
-      });
-    };
-    getSrrData();
-
-    const dateFormat = (date) =>
-      html`<span
-        style="${renderCssAttr({
-          style: {
-            'font-size': '14px',
-            color: '#888',
-          },
-        })}"
-        >${new Date(date).toLocaleString().replaceAll(',', '')}</span
-      >`;
-
     const getPanelData = async () => {
       const result = await EventSchedulerService.get({
-        id: `${getQueryParams().cid ? getQueryParams().cid : 'creatorUser'}`,
+        id: `${getQueryParams().cid ? getQueryParams().cid : Auth.getToken() ? 'creatorUser' : ''}`,
       });
       NotificationManager.Push({
         html: result.status === 'success' ? Translate.Render('success-get-events-scheduler') : result.message,
         status: result.status,
       });
       if (result.status === 'success') {
-        const resultData = Array.isArray(result.data) ? result.data : [result.data];
+        const resultData = Array.isArray(result.data) ? result.data : result.data ? [result.data] : [];
         this.Data[options.idModal].filesData = [];
         this.Data[options.idModal].originData = newInstance(resultData);
         this.Data[options.idModal].data = resultData.map((o) => {
           if (o.creatorUserId && options.Elements.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
           o.id = o._id;
-          o.start = dateFormat(o.start);
-          o.end = dateFormat(o.end);
+
           this.Data[options.idModal].filesData.push({});
           return o;
         });
+        setTimeout(() => {
+          renderCalendar(
+            resultData.map((o) => {
+              // FREQ=WEEKLY;
+              // if (o.daysOfWeek && o.daysOfWeek.length > 0) {
+              //   o.rrule = `RRULE:BYDAY=${o.daysOfWeek.map((d) => `${d[0]}${d[1]}`.toUpperCase()).join(',')}`;
+              // }
+              // o.rrule = 'FREQ=WEEKLY;BYDAY=SU;BYHOUR=10,11;COUNT=10';
+              if (o.daysOfWeek && o.daysOfWeek.length > 0)
+                o.daysOfWeek = o.daysOfWeek.map((v, i) => daysOfWeekOptions.indexOf(v));
+              else delete o.daysOfWeek;
+              // o.exdate = ['2024-04-02'];
+              // delete o.end;
+              // delete o.start;
+
+              return o;
+            }),
+          );
+        });
       }
     };
 
-    const renderCalendar = () => {
+    const renderCalendar = (events) => {
       const calendarEl = s(`.calendar-${idPanel}`);
       this.Data[options.idModal].calendar = new FullCalendar.Calendar(calendarEl, {
-        plugins: [FullCalendar.DayGrid.default, FullCalendar.TimeGrid.default, FullCalendar.List.default],
+        allDaySlot: false,
+        plugins: [
+          FullCalendar.DayGrid.default,
+          FullCalendar.TimeGrid.default,
+          FullCalendar.List.default,
+          // https://fullcalendar.io/docs/rrule-plugin
+          FullCalendar.RRule.default,
+        ],
         // initialView: 'dayGridWeek',
         timeZone: getTimeZone(),
         dateClick: function (arg) {
           console.error('calendar dateClick', arg.date.toString());
         },
-        events: [{ title: 'Meeting', start: new Date() }],
+        events: events ?? [{ title: 'Meeting', start: new Date() }],
         initialView: 'dayGridMonth',
         headerToolbar: {
           left: 'prev,next today',
           center: 'title',
           right: 'dayGridMonth,timeGridWeek,listWeek',
         },
+        eventClick: async function (args) {
+          const dateData = eventDateFactory(args.event);
+          // element -> args.el
+          // remove all events associated ->  args.event.remove();
+          // console.error('eventClick', JSON.stringify(dateData, null, 4));
+          if (options.eventClick) await options.eventClick(dateData, args);
+        },
+        eventClassNames: function (args) {
+          // console.error('eventClassNames', JSON.stringify(dateData, null, 4));
+          if (!args.event.extendedProps._id) return args.event.remove();
+          const dateData = eventDateFactory(args.event);
+          if (
+            new Date(dateData.start).getTime() <= new Date().getTime() ||
+            CalendarCore.Data[options.idModal].hiddenDates.find(
+              (d) => d.eventSchedulerId === dateData.event._id && d.date === dateData.start,
+            )
+          )
+            return ['hide'];
+        },
       });
 
       this.Data[options.idModal].calendar.render();
@@ -139,63 +172,60 @@ const CalendarCore = {
         rules: [{ type: 'isEmpty' }],
       },
       {
-        id: 'description',
-        model: 'description',
+        id: 'title',
+        model: 'title',
         inputType: 'text',
         rules: [{ type: 'isEmpty' }],
         panel: { type: 'title' },
       },
       {
-        id: 'allDay',
-        model: 'allDay',
-        inputType: 'checkbox-on-off',
-        rules: [],
-        panel: { type: 'info-row', icon: html`<i class="fa-solid fa-infinity"></i>` },
+        id: 'description',
+        model: 'description',
+        inputType: 'text',
+        rules: [{ type: 'isEmpty' }],
+        panel: { type: 'info-row' },
       },
       {
         id: 'start',
         model: 'start',
         inputType: 'datetime-local',
-        panel: { type: 'subtitle' },
+        translateCode: 'startTime',
+        panel: { type: 'info-row' },
       },
       {
         id: 'end',
         model: 'end',
         inputType: 'datetime-local',
+        translateCode: 'endTime',
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'daysOfWeek',
+        model: 'daysOfWeek',
+        inputType: 'dropdown-checkbox',
+        dropdown: {
+          options: daysOfWeekOptions,
+        },
+        panel: { type: 'list' },
+      },
+      {
+        id: 'startTime',
+        model: 'startTime',
+        inputType: 'time',
+        panel: { type: 'info-row' },
+      },
+      {
+        id: 'endTime',
+        model: 'endTime',
+        inputType: 'time',
         panel: { type: 'info-row' },
       },
     ];
 
     setTimeout(() => {
-      const resizeModal = () => {
-        Modal.Data[options.idModal].onObserverListener[options.idModal] = () => {
-          if (s(`.main-body-calendar-${options.idModal}`))
-            s(`.main-body-calendar-${options.idModal}`).style.height = `${
-              s(`.${options.idModal}`).offsetHeight - Modal.headerTitleHeight
-            }px`;
-        };
-        Modal.Data[options.idModal].onObserverListener[options.idModal]();
-      };
-      setTimeout(resizeModal);
-      RouterEvents[`${options.idModal}-main-body`] = ({ route }) => {
-        if (route === 'calendar') {
-          setTimeout(() => {
-            resizeModal();
-          }, 400);
-        }
-      };
-
       s(`.close-calendar-container`).onclick = () => {
         s(`.calendar-container`).classList.add('hide');
         s(`.main-body-calendar-${options.idModal}`).classList.remove('hide');
-        htmls(
-          `.style-calendar`,
-          html`<style>
-            .modal-calendar {
-              overflow: hidden;
-            }
-          </style>`,
-        );
       };
     });
 
@@ -209,14 +239,14 @@ const CalendarCore = {
           data: this.Data[options.idModal].data,
           formContainerClass: '',
           scrollClassContainer: `main-body-calendar-${options.idModal}`,
+          role: options.role,
           originData: () => this.Data[options.idModal].originData,
           filesData: () => this.Data[options.idModal].filesData,
           onClick: async function ({ payload }) {
             if (options.route) {
               setQueryPath({ path: options.route, queryPath: payload._id });
               if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
-              if (CalendarCore.Data[options.idModal].updatePanel)
-                await CalendarCore.Data[options.idModal].updatePanel();
+              await CalendarCore.Data[options.idModal].updatePanel();
             }
           },
           titleIcon,
@@ -237,25 +267,24 @@ const CalendarCore = {
                 // renderCalendar();
                 CalendarCore.Data[options.idModal].calendar.setOption('height', 700);
                 Translate.Event['fullcalendar-lang']();
-                htmls(
-                  `.style-calendar`,
-                  html`<style>
-                    .modal-calendar {
-                      overflow: auto;
-                    }
-                  </style>`,
-                );
               },
             },
           ],
           on: {
             add: async function ({ data, editId }) {
+              if (data.daysOfWeek && data.daysOfWeek.length > 0 && daysOfWeekOptions[data.daysOfWeek[0]]) {
+                data.daysOfWeek = data.daysOfWeek.map((d) => daysOfWeekOptions[d]);
+              }
+              data.timeZoneClient = getTimeZone();
               const {
                 status,
                 message,
                 data: documentData,
               } = editId
-                ? await EventSchedulerService.put({ id: editId, body: { ...data, _id: undefined } })
+                ? await EventSchedulerService.put({
+                    id: editId,
+                    body: { ...data, _id: undefined },
+                  })
                 : await EventSchedulerService.post({ body: data });
               NotificationManager.Push({
                 html:
@@ -268,10 +297,9 @@ const CalendarCore = {
               });
 
               if (status === 'success') {
-                data.start = dateFormat(data.start);
-                data.end = dateFormat(data.end);
-                data.tools = true;
-                data._id = documentData._id;
+                documentData.tools = true;
+                // data._id = documentData._id;
+                data = documentData;
 
                 let originObj, indexOriginObj;
                 let filesData = {};
@@ -291,8 +319,7 @@ const CalendarCore = {
 
                 setQueryPath({ path: options.route, queryPath: documentData._id });
                 if (options.parentIdModal) Modal.Data[options.parentIdModal].query = `${window.location.search}`;
-                if (CalendarCore.Data[options.idModal].updatePanel)
-                  await CalendarCore.Data[options.idModal].updatePanel();
+                await CalendarCore.Data[options.idModal].updatePanel();
               }
               return { data, status, message };
             },
@@ -319,11 +346,8 @@ const CalendarCore = {
                   status,
                 });
 
-                if (getQueryParams().cid === data.id) {
-                  setQueryPath({ path: options.route, queryPath: '' });
-                  if (CalendarCore.Data[options.idModal].updatePanel)
-                    await CalendarCore.Data[options.idModal].updatePanel();
-                }
+                setQueryPath({ path: options.route, queryPath: '' });
+                await CalendarCore.Data[options.idModal].updatePanel();
 
                 return { status };
               }
@@ -335,50 +359,35 @@ const CalendarCore = {
     };
 
     let lastCid;
-    let lasUserId;
     this.Data[options.idModal].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      if (lastCid === cid && lasUserId === options.Elements.Data.user.main.model.user._id) return;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
-      lasUserId = newInstance(options.Elements.Data.user.main.model.user._id);
+      if (lastCid === cid) return;
       lastCid = cid;
+      if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
-        if (Auth.getToken()) await getPanelData();
-        else getSrrData();
+        // if (Auth.getToken())
+        // else getSrrData();
+        await getPanelData();
         htmls(`.main-body-calendar-${options.idModal}`, await panelRender());
       }
     };
 
-    if (options.route)
+    if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          setTimeout(() => {
-            CalendarCore.Data[options.idModal].updatePanel();
-          });
+          CalendarCore.Data[options.idModal].updatePanel();
         },
       });
-
-    if (options.route === 'home') setTimeout(CalendarCore.Data[options.idModal].updatePanel);
-
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await this.Data[idPanel].updatePanel();
+        };
+    }
     return html`
-      <style>
-        .main-body-calendar-${options.idModal} {
-          overflow: auto;
-        }
-        .${idPanel}-form {
-          max-width: 750px !important;
-        }
-      </style>
-      <div class="style-calendar">
-        <style>
-          .modal-calendar {
-            overflow: hidden;
-          }
-        </style>
-      </div>
-
       <div class="in main-body-calendar-${options.idModal}">${await panelRender()}</div>
       <style>
         .calendar-container {
@@ -436,15 +445,13 @@ const CalendarCore = {
 
         .calendar-buttons-container {
           padding-bottom: 15px;
-          top: ${Modal.headerTitleHeight}px;
           height: 60px;
-          z-index: 4;
         }
       </style>
       <div class="in calendar-container hide">
-        <div class="stq modal calendar-buttons-container">
+        <div class="in modal calendar-buttons-container">
           ${await BtnIcon.Render({
-            class: `section-mp btn-custom close-calendar-container flr`,
+            class: `inl section-mp btn-custom close-calendar-container flr`,
             label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
             type: 'button',
           })}