added button visibility options

ron2015schmitt · Feb 3, 2022 · d33a9d7 · d33a9d7
1 parent a154edb
commit d33a9d7
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
+  "private": true,
   "dependencies": {
     "@angular/animations": "^12.2.12",
     "@angular/common": "^12.2.12",
@@ -24,22 +25,24 @@
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
+    "bcrypt": "^5.0.1",
     "body-parser": "^1.19.0",
     "chalk": "^4.1.2",
     "date-fns": "^2.25.0",
     "distinct-colors": "^3.0.0",
     "dotenv": "^10.0.0",
     "help": "^3.0.2",
+    "jsonwebtoken": "^8.5.1",
+    "material-design-icons": "^3.0.1",
     "mat-timepicker": "^5.1.4",
     "moment": "^2.29.1",
+    "mongoose": "^6.1.10",
     "nodemon": "^2.0.14",
     "pug": "^3.0.2",
     "randomcolor": "^0.6.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
     "tui-calendar": "^1.15.1",
-    "tui-date-picker": "^4.3.1",
-    "tui-time-picker": "^2.1.4",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },

diff --git a/projects/ngx-mat-tui-calendar/package.json b/projects/ngx-mat-tui-calendar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-tui-calendar",
-  "version": "12.0.12",
+  "version": "12.1.0",
   "author": "ron schmitt",
   "license": "MIT",
   "description": "Angular Material Design wrapper, supporting theming, for the Toast UI Calendar, suitable for web-based scheduling, events, appointments, and day planner applications.",
@@ -66,9 +66,7 @@
     "randomcolor": "^0.6.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
-    "tui-calendar": "^1.15.1",
-    "tui-date-picker": "^4.3.1",
-    "tui-time-picker": "^2.1.4",
+    "tui-calendar": "^1.15.2",
     "uuid": "^8.3.2",
     "zone.js": "~0.11.4"
   },

diff --git a/projects/ngx-mat-tui-calendar/src/lib/calendar-options.ts b/projects/ngx-mat-tui-calendar/src/lib/calendar-options.ts
@@ -3,9 +3,19 @@ import { IOptions } from 'tui-calendar';
 
 
 export interface CalendarOptions {
-  ioptions: IOptions;
-  darkMode: boolean;
-  themeClass?: string;
+  ioptions: IOptions,
+  darkMode: boolean,
+  themeClass?: string,
+  buttons: {
+    previous?: boolean,
+    next?: boolean,
+    today?: boolean,
+    longPrevious?: boolean,
+    longNext?: boolean,
+    month?: boolean,
+    week?: boolean,
+    day?: boolean,
+  };
 }
 
 

diff --git a/projects/ngx-mat-tui-calendar/src/lib/ngx-mat-tui-calendar.component.html b/projects/ngx-mat-tui-calendar/src/lib/ngx-mat-tui-calendar.component.html
@@ -22,31 +22,31 @@
     width: 100%;  ">
           <div class="left-div">
             <!-- LEFT -->
-            <button mat-button 
+            <button mat-button *ngIf="appliedOptions.buttons.longPrevious"
               class="navigation-button"
               style="margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;" 
               (click)="onCalendarLongPrev()">
               <fa-icon [icon]="iconLongPrev"></fa-icon>
             </button>
-            <button mat-button 
+            <button mat-button  *ngIf="appliedOptions.buttons.previous"
               class="navigation-button" 
               style="margin-left: 0px; margin-right: 0px; font-size: 2rem !important;" 
               (click)="onCalendarPrev()">
               <fa-icon [icon]="iconPrev"></fa-icon>
             </button>
-            <button mat-button 
+            <button mat-button  *ngIf="appliedOptions.buttons.today"
               class="navigation-button"
               style="margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;" 
               (click)="onCalendarToday()">
               <fa-icon [icon]="iconToday"></fa-icon>
             </button>
-            <button mat-button 
+            <button mat-button  *ngIf="appliedOptions.buttons.next"
               class="navigation-button" 
               style="margin-left: 0px; margin-right: 0px; font-size: 2rem !important;" 
               (click)="onCalendarNext()">
               <fa-icon [icon]="iconNext"></fa-icon>
             </button>
-            <button mat-button 
+            <button mat-button  *ngIf="appliedOptions.buttons.longNext"
               class="navigation-button"
               style="margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;" 
               (click)="onCalendarLongNext()">
@@ -60,15 +60,16 @@
           <div class="right-div">
 
             <!-- RIGHT -->
-            <mat-button-toggle-group class="view-button" value="month" id="@+id/toggleButton" layout_width="wrap_content"
+            <mat-button-toggle-group [hidden]="!appliedOptions.buttons.month && !appliedOptions.buttons.week && !appliedOptions.buttons.day"
+            class="view-button" value="month" id="@+id/toggleButton" layout_width="wrap_content"
               layout_height="wrap_content">
-              <mat-button-toggle mat-button value="month" class="view-button" (click)="onMonthView()">
+              <mat-button-toggle *ngIf="appliedOptions.buttons.month" mat-button value="month" class="view-button" (click)="onMonthView()">
                 <fa-icon [icon]="iconByMonth"></fa-icon>
               </mat-button-toggle>
-              <mat-button-toggle mat-button value="week" class="view-button" (click)="onWeekView()">
+              <mat-button-toggle *ngIf="appliedOptions.buttons.week" mat-button value="week" class="view-button" (click)="onWeekView()">
                 <fa-icon [icon]="iconByWeek"></fa-icon>
               </mat-button-toggle>
-              <mat-button-toggle mat-button value="day" class="view-button" (click)="onDayView()">
+              <mat-button-toggle *ngIf="appliedOptions.buttons.day" mat-button value="day" class="view-button" (click)="onDayView()">
                 <fa-icon [icon]="iconByDay"></fa-icon>
               </mat-button-toggle>
             </mat-button-toggle-group>

diff --git a/projects/ngx-mat-tui-calendar/src/lib/ngx-mat-tui-calendar.component.ts b/projects/ngx-mat-tui-calendar/src/lib/ngx-mat-tui-calendar.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewChild, OnInit, Output, EventEmitter, Input, OnChanges, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, ViewChild, OnInit, Output, EventEmitter, Input, OnChanges, SimpleChanges, OnDestroy, ViewEncapsulation, isDevMode } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 
 import distinctColors from 'distinct-colors';
@@ -61,7 +61,7 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
   iconByDay = faListAlt;
 
   calendar: Calendar;  // the TUI Calendar Object
-  calendarId: string;
+  calendarIdDefault: string;
   colors: Color[];
   colorIndex: number;
   @Output() userCreatedSchedule: EventEmitter<ISchedule> = new EventEmitter();
@@ -74,28 +74,24 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
     // we slice off the first color since it is gray
     this.colors = distinctColors({ lightMin: 70, count: 15 }).slice(1);
     this.colorIndex = 0;
-    this.calendarId = uuidv4();
-
-    this.appliedOptions = this.getDefaultOptions();
+    this.calendarIdDefault = "main";
   }
 
   ngOnInit() {
     // console.warn(`calendar.component.ts: ngOnit`)
-    this.createTUICalendar();
+    this.setOptions(this.options);
+    this.createTUICalendar(this.appliedOptions.ioptions);
     this.bindCallbacks();
+    this.calendar.toggleScheduleView(true);
+    this.calendar.render(true);
+    this.calendar.toggleScheduleView(true);
   }
 
   ngOnChanges(changes: SimpleChanges): void {
-    // console.warn(changes);
-    if (this.calendar) {
-
-      if (changes.options) {
-        // console.warn(`change.option:`, changes.options);
-        let options = changes.options.currentValue;
-        this.setOptions(options);
-      }
-    }
-
+    // console.warn(`ngOnChanges: `, changes);
+    // console.warn(`change.option:`, changes.options);
+    let options = changes.options.currentValue;
+    this.setOptions(options);
   }
 
   ngOnDestroy() {
@@ -166,16 +162,18 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
 
   onMonthView() {
     this.calendar.changeView('month');
+    this.calendar.render(true);  // <-- so that selection is cleared
   }
 
   onWeekView() {
-    console.log(`onWeekView`)
+    // console.log(`onWeekView`)
     this.calendar.changeView('week');
     this.calendar.render(true);  // <-- so that selection is cleared
   }
 
   onDayView() {
     this.calendar.changeView('day');
+    this.calendar.render(true);  // <-- so that selection is cleared
   }
 
 
@@ -188,8 +186,8 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
     return str;
   }
 
-  createTUICalendar() {
-    let ioptions = this.preprocessIOptions(null);
+  createTUICalendar(iopts?: IOptions) {
+    let ioptions = this.preprocessIOptions(iopts);
     // console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
     this.calendar = new Calendar('#calendar', ioptions);
     // console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
@@ -322,7 +320,7 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
 
     let schedule: ISchedule = {
       id,
-      calendarId: (args.calendarId == null) ? this.calendarId : args.calendarId,
+      calendarId: (args.calendarId == null) ? this.calendarIdDefault : args.calendarId,
       title: args.title,
       start: start,
       end: end,
@@ -344,26 +342,26 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
 
   updateSchedule(schedule: ISchedule) {
     // console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
-    let calendarId = (schedule.calendarId == null) ? this.calendarId : schedule.calendarId;
+    let calendarId = (schedule.calendarId == null) ? this.calendarIdDefault : schedule.calendarId;
     this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
     return this.calendar.getSchedule(schedule.id, calendarId);
   }
 
   getSchedule(args: { id: string, calendarId: string }) {
     // console.log(`event-calendar.component.ts: getSchedule:`, schedule);
-    let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+    let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
     return this.calendar.getSchedule(args.id, calendarId);
   }
 
   deleteScheduleAndNotifyParent(args: { id: string, calendarId: string }) {
     this.deleteSchedule(args);
-    let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+    let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
     this.userDeletedSchedule.emit({ id: args.id, calendarId });
   }
 
   deleteSchedule(args: { id: string, calendarId: string }) {
     // console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
-    let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+    let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
     this.calendar.deleteSchedule(args.id, calendarId, false);
   }
 
@@ -405,20 +403,46 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
   }
 
 
-  setOptions(options: CalendarOptions) {
-    if (options == null) {
-      options = this.getDefaultOptions();
+  setDefaultOptions() {
+    this.setOptions();
+  }
+
+  setOptions(o?: CalendarOptions) {
+
+    const get = (object, path, defaultValue) => {
+      let value = path
+        .split('.')
+        .reduce((o, p) => o[p], object);
+      return (value !== undefined) ? value : defaultValue;
     }
-    options.ioptions = this.setIOptions(options.ioptions);
-    this.appliedOptions = {...options};
+
+    let options = {
+      darkMode: get(o, "darkMode", false),
+      themeClass: get(o, "themeClass", null),
+      ioptions: (o && o.ioptions) ? this.setIOptions(o.ioptions) : this.getDefaultIOptions(),
+      buttons: {
+        previous: get(o, "buttons.previous", true),
+        next: get(o, "buttons.next", true),
+        today: get(o, "buttons.today", true),
+        longPrevious: get(o, "buttons.longPrevious", true),
+        longNext: get(o, "buttons.longNext", true),
+        month: get(o, "buttons.month", true),
+        week: get(o, "buttons.week", true),
+        day: get(o, "buttons.day", true),
+      }
+    } as CalendarOptions;
+    this.appliedOptions = options;
+    // console.warn(`setOptions: `, this.appliedOptions);
   }
 
   setIOptions(ioptionsIn: IOptions) {
     let ioptions = this.preprocessIOptions(ioptionsIn);
-    this.calendar.setOptions(ioptions);
-    this.calendar.setTheme(ioptions.theme);
-    this.calendar.render(true);
-    this.calendar.toggleScheduleView(true);
+    if (this.calendar) {
+      this.calendar.setOptions(ioptions);
+      this.calendar.setTheme(ioptions.theme);
+      this.calendar.render(true);
+      this.calendar.toggleScheduleView(true);
+    }
     return ioptions;
   }
 
@@ -438,14 +462,6 @@ export class NgxMatTuiCalendarComponent implements OnInit, OnChanges, OnDestroy
   }
 
 
-  getDefaultOptions(): CalendarOptions {
-    return {
-      darkMode: false,
-      themeClass: null,
-      ioptions: this.getDefaultIOptions(),
-    } as CalendarOptions;
-  }
-
   getDefaultIOptions(): IOptions {
     return {
       defaultView: 'month',

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -39,6 +39,13 @@ export class AppComponent implements OnInit {
     } as IOptions,
     darkMode: this.darkMode,
     themeClass: this.themeClass,
+    buttons: {
+      longPrevious: true,
+      longNext: true,
+      month: true,
+      week: true,
+      day: true,
+    }
   } as CalendarOptions;
 
   // in lieu of a back-end database, a Map is used for demo purposes