Merge pull request #15 from fullstack-devops/feature/add-calendar-table

add calendar table

Author: eksrha

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.renderWhitespace": "all",
   "prettier.arrowParens": "avoid",
-  "prettier.printWidth": 120,
+  "prettier.printWidth": 130,
   "editor.tabSize": 2,
   "files.trimTrailingWhitespace": true,
   "files.trimFinalNewlines": true,

angular.json

@@ -143,6 +143,5 @@
         }
       }
     }
-  },
-  "defaultProject": "ng-mat-components"
+  }
 }

package.json

@@ -10,7 +10,7 @@
     "ng": "ng",
     "start": "ng serve",
     "prebuild": "cp README.md projects/ng-mat-components/",
-    "build": "ng build",
+    "build": "ng build --project ng-mat-components",
     "build:workspace": "ng build --project lib-workspace",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

projects/lib-workspace/src/app/app-routing.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule } from '@angular/router';
 import { FrameRoutes } from 'projects/ng-mat-components/src/public-api';
+import { CalendarTableComponent } from './content/calendar-table/calendar-table.component';
 import { CalenderShowcaseComponent } from './content/calender-showcase/calender-showcase.component';
 import { HomeComponent } from './content/home/home.component';
 import { SubComponent } from './content/home/sub/sub.component';
@@ -32,14 +33,23 @@ export const routes: FrameRoutes = [
     },
   },
   {
-    path: 'calendar-showcase',
+    path: 'calendar-panels',
     component: CalenderShowcaseComponent,
     data: {
       displaySidemenu: true,
       sidenavIcon: 'calendar_month',
       sidenavText: 'Calendar',
     },
   },
+  {
+    path: 'calendar-table',
+    component: CalendarTableComponent,
+    data: {
+      displaySidemenu: true,
+      sidenavIcon: 'event_note',
+      sidenavText: 'Calendar Table',
+    },
+  },
   {
     path: '**',
     redirectTo: 'home',

projects/lib-workspace/src/app/app.component.html

@@ -1,4 +1,9 @@
-<fs-ui-frame [frameConfig]="frameConfig" [navUser]="navUser" [appRoutes]="appRoutes" (event)="onEvent($event)">
+<fs-ui-frame
+  [frameConfig]="frameConfig"
+  [navUser]="navUser"
+  [appRoutes]="appRoutes"
+  (event)="onEvent($event)"
+>
   <fs-ui-frame-toolbar>
     <fs-ui-frame-toolbar-title>Current App Title</fs-ui-frame-toolbar-title>
 
@@ -17,15 +22,13 @@
     <fs-ui-frame-toolbar-side>
       <!-- <a>Test the side</a> -->
       <mat-form-field appearance="outline">
-        <input matInput placeholder="Search" type="search">
+        <input matInput placeholder="Search" type="search" />
         <!-- <mat-icon matSuffix>close</mat-icon> -->
       </mat-form-field>
     </fs-ui-frame-toolbar-side>
-
   </fs-ui-frame-toolbar>
 
   <fs-ui-frame-content>
     <router-outlet></router-outlet>
   </fs-ui-frame-content>
-
 </fs-ui-frame>

projects/lib-workspace/src/app/app.component.ts

@@ -1,25 +1,38 @@
-import { Component } from '@angular/core';
-import { FrameConfig, NavUser, FrameEvent, FrameEvents } from 'projects/ng-mat-components/src/public-api';
+import { registerLocaleData } from '@angular/common';
+import localeDe from '@angular/common/locales/de';
+import localeDeExtra from '@angular/common/locales/extra/de';
+import { Component, OnInit } from '@angular/core';
+import {
+  FrameConfig,
+  FrameEvent,
+  FrameEvents,
+  NavUser,
+} from 'projects/ng-mat-components/src/public-api';
 import { routes } from './app-routing.module';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'FS DevOps`s ng mat components';
   appRoutes = routes;
 
   frameConfig: FrameConfig = {
     appName: 'Dummy App',
     // appNameShort: stringOfLength('DUMMY', 0, 6),
-    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png'
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Angular_full_color_logo.svg/1024px-Angular_full_color_logo.svg.png',
   };
   navUser: NavUser = {
-    profilePicture: 'https://material.angular.io/assets/img/examples/shiba1.jpg',
+    profilePicture:
+      'https://material.angular.io/assets/img/examples/shiba1.jpg',
     name: 'Some User',
-    role: 'Engineer'
+    role: 'Engineer',
+  };
+
+  ngOnInit() {
+    registerLocaleData(localeDe, 'de-DE', localeDeExtra);
   }
 
   onEvent(frameEvent: FrameEvent) {

projects/lib-workspace/src/app/app.module.ts

@@ -8,15 +8,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { de } from 'date-fns/locale';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { MaterialModule } from './material.module';
 
+import { MAT_DATE_LOCALE } from '@angular/material/core';
 import {
   FsCalendarModule,
   FsCalendarService,
+  FsMaterialFullModule,
   FsUiFrameContentModule,
   FsUiFrameModule,
   FsUiFrameToolbarModule,
 } from 'projects/ng-mat-components/src/public-api';
+import { CalendarTableComponent } from './content/calendar-table/calendar-table.component';
 import { HomeComponent } from './content/home/home.component';
 import { SubComponent } from './content/home/sub/sub.component';
 import { TestComponent } from './content/test/test.component';
@@ -28,15 +30,16 @@ import { TestComponent } from './content/test/test.component';
     TestComponent,
     SubComponent,
     CalenderShowcaseComponent,
+    CalendarTableComponent,
   ],
   imports: [
     FormsModule,
     BrowserModule,
-    MaterialModule,
     AppRoutingModule,
     BrowserAnimationsModule,
     ReactiveFormsModule,
     /* Lib modules */
+    FsMaterialFullModule,
     FsUiFrameModule,
     FsUiFrameContentModule,
     FsUiFrameToolbarModule,
@@ -48,6 +51,7 @@ import { TestComponent } from './content/test/test.component';
       useValue: '.',
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
+    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
     {
       provide: 'FS_DATE_LOCALE',
       useClass: FsCalendarService,

projects/lib-workspace/src/app/content/calendar-table/calendar-table.component.css

@@ -0,0 +1,3 @@
+.test {
+  color: #22ff0e
+}

projects/lib-workspace/src/app/content/calendar-table/calendar-table.component.html

@@ -0,0 +1,5 @@
+<section class="mat-elevation-z4">
+  <fs-calendar-table [dataSource]="calTableData">
+    <fs-calendar-table-name> Persons </fs-calendar-table-name>
+  </fs-calendar-table>
+</section>

projects/lib-workspace/src/app/content/calendar-table/calendar-table.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { CalendarTableEntry } from 'projects/ng-mat-components/src/public-api';
+
+@Component({
+  selector: 'lib-calendar-table',
+  templateUrl: './calendar-table.component.html',
+  styleUrls: ['./calendar-table.component.css'],
+})
+export class CalendarTableComponent implements OnInit {
+  today = new Date();
+
+  calTableData: CalendarTableEntry[] = [
+    {
+      name: 'Test User',
+      data: [
+        {
+          date: new Date(this.today.getFullYear(), this.today.getMonth(), 20),
+          toolTip: 'Some longer text',
+          char: '',
+          colors: {
+            backgroundColor: '#FFFFFF',
+            color: '#000',
+          },
+        },
+      ],
+    },
+    {
+      name: 'Test User 2',
+      data: [
+        {
+          date: new Date(this.today.getFullYear(), this.today.getMonth(), 3),
+          toolTip: 'Some text',
+          char: 'T',
+          colors: {
+            backgroundColor: '#FFFFFF',
+            color: '#000',
+          },
+        },
+        {
+          date: new Date(this.today.getFullYear(), this.today.getMonth(), 10),
+          toolTip: 'Some text',
+          char: 'U',
+          colors: {
+            backgroundColor: '#22ff0e',
+            color: '#000',
+          },
+        },
+      ],
+    },
+  ];
+
+  constructor() {}
+
+  ngOnInit() {}
+}