Skip to content

Commit dd83fb0

Browse files
eksrhaeksrha
committed
switch fs-calendar to module
1 parent 4a2fa5a commit dd83fb0

File tree

17 files changed

+181
-82
lines changed

17 files changed

+181
-82
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"@angular/platform-browser-dynamic": "~13.3.11",
2929
"@angular/router": "~13.3.11",
3030
"moment": "^2.29.4",
31+
"ngx-markdown": "13.1.0",
3132
"rxjs": "~7.5.6",
3233
"tslib": "^2.4.0",
3334
"zone.js": "~0.11.7"

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
99
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
1010
import { MaterialModule } from './material.module';
1111

12-
import { NgMatComponentsModule } from 'projects/ng-mat-components/src/public-api';
12+
import { NgMatComponentsModule, FsCalendarModule } from 'projects/ng-mat-components/src/public-api';
1313
import { HomeComponent } from './content/home/home.component';
1414
import { SubComponent } from './content/home/sub/sub.component';
1515
import { TestComponent } from './content/test/test.component';
1616
import { MatFormFieldModule } from '@angular/material/form-field';
17+
import { MarkdownModule } from 'ngx-markdown';
18+
import { HttpClientModule } from '@angular/common/http';
1719

1820

1921
@NgModule({
@@ -25,14 +27,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
2527
CalenderShowcaseComponent,
2628
],
2729
imports: [
30+
FormsModule,
2831
BrowserModule,
32+
MaterialModule,
33+
HttpClientModule,
2934
AppRoutingModule,
3035
BrowserAnimationsModule,
31-
MaterialModule,
32-
FormsModule,
3336
MatFormFieldModule,
3437
ReactiveFormsModule,
3538
NgMatComponentsModule,
39+
FsCalendarModule,
40+
MarkdownModule.forRoot(),
3641
],
3742
providers: [
3843
{

‎projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.html‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,41 @@
1-
<div style="display: flex; justify-content: space-around;">
2-
<mat-slide-toggle [(ngModel)]="placeholder">
3-
Days placeholder
4-
</mat-slide-toggle>
5-
</div>
1+
<mat-tab-group>
2+
<mat-tab label="Overview">
63

7-
<div class="selection">
8-
<mat-form-field>
9-
<mat-label>Months before</mat-label>
10-
<mat-select [(ngModel)]="monthsBefore">
11-
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
12-
</mat-select>
13-
</mat-form-field>
14-
<mat-form-field>
15-
<mat-label>Months after</mat-label>
16-
<mat-select [(ngModel)]="monthsAfter">
17-
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
18-
</mat-select>
19-
</mat-form-field>
20-
<div>
21-
<p>Selected range: {{range | json}}</p>
22-
</div>
23-
</div>
4+
</mat-tab>
5+
<mat-tab label="API">
6+
<div style="margin-top: 16px;" markdown [src]="docsApi"></div>
7+
</mat-tab>
8+
<mat-tab label="Examples">
9+
<div style="display: flex; justify-content: space-around;">
10+
<mat-slide-toggle [(ngModel)]="placeholder">
11+
Days placeholder
12+
</mat-slide-toggle>
13+
</div>
2414

25-
<div style="height: 80%;">
26-
<fs-calendar [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="2022" [month]="3"
27-
[monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
28-
(selectedDate)="testMethod($event)">
29-
</fs-calendar>
30-
</div>
15+
<div class="selection">
16+
<mat-form-field>
17+
<mat-label>Months before</mat-label>
18+
<mat-select [(ngModel)]="monthsBefore">
19+
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
20+
</mat-select>
21+
</mat-form-field>
22+
<mat-form-field>
23+
<mat-label>Months after</mat-label>
24+
<mat-select [(ngModel)]="monthsAfter">
25+
<mat-option *ngFor="let num of monthsAfterBefore" [value]="num">{{num}}</mat-option>
26+
</mat-select>
27+
</mat-form-field>
28+
<div>
29+
<p>Selected range: {{range | json}}</p>
30+
</div>
31+
</div>
32+
33+
<div style="height: 80%;">
34+
<fs-calendar [placeholderDay]="placeholder" [dataSource]="dataSource" [year]="2022" [month]="3"
35+
[monthsBefore]="monthsBefore" [monthsAfter]="monthsAfter" [config]="calendarConfig"
36+
(selectedDate)="testMethod($event)">
37+
</fs-calendar>
38+
</div>
39+
40+
</mat-tab>
41+
</mat-tab-group>

‎projects/lib-workspace/src/app/content/calender-showcase/calender-showcase.component.ts‎

Lines changed: 6 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import { OverlayContainer } from '@angular/cdk/overlay';
2-
import { Component, HostBinding, OnInit } from '@angular/core';
3-
import { FormControl } from '@angular/forms';
4-
import { CalendarConfig, calendarSelected, Day, selectedDate } from 'projects/ng-mat-components/src/public-api';
1+
import { CalendarConfig, Day, calendarSelected } from 'projects/ng-mat-components/src/public-api';
2+
import { Component, OnInit } from '@angular/core';
53

64
@Component({
75
selector: 'lib-calender-showcase',
86
templateUrl: './calender-showcase.component.html',
97
styleUrls: ['./calender-showcase.component.scss']
108
})
119
export class CalenderShowcaseComponent implements OnInit {
12-
13-
// Theming
14-
toggleControl = new FormControl(false);
15-
@HostBinding('class') className = '';
16-
10+
docsApi = "./assets/docs/calendar/api.md"
1711
range: any
1812

1913
placeholder = false // boolean
@@ -62,18 +56,8 @@ export class CalenderShowcaseComponent implements OnInit {
6256
}
6357
]
6458

65-
constructor(private overlay: OverlayContainer) { }
59+
constructor() { }
6660
ngOnInit(): void {
67-
this.toggleControl.valueChanges.subscribe((darkMode) => {
68-
const darkClassName = 'darkMode';
69-
this.className = darkMode ? darkClassName : '';
70-
if (darkMode) {
71-
this.overlay.getContainerElement().classList.add(darkClassName);
72-
} else {
73-
this.overlay.getContainerElement().classList.remove(darkClassName);
74-
}
75-
});
76-
7761
console.log(this.dataSource)
7862
this.isLoading = false
7963
}
@@ -82,10 +66,10 @@ export class CalenderShowcaseComponent implements OnInit {
8266
switch (event.type) {
8367
case "range":
8468
this.range = event;
85-
break;
69+
break;
8670
case "date":
8771
this.range = event;
88-
break;
72+
break;
8973
}
9074
console.log(event)
9175
}

‎projects/lib-workspace/src/assets/docs/calendar/api.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# API reference for Angular @fullstack-devops calendar
2+
3+
```javascript
4+
import { MatTabsModule } from '@fullstack-devops/ng-mat-components';
5+
```
6+
7+
# Test

‎projects/ng-mat-components/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# ng-mat-components
2+
Components for @angular/material
3+
4+
5+
## Usage
6+
7+
add to your local `.npmrc` the following line to be able to use this package:
8+
```javascript
9+
@fullstack-devops:registry=https://npm.pkg.github.com
10+
```
11+
12+
And install it:
13+
- yarn
14+
```javascript
15+
yarn add @fullstack-devops/ng-mat-components
16+
```
17+
- npm
18+
```javascript
19+
npm install @fullstack-devops/ng-mat-components
20+
```
21+
22+
## Documentation
23+
24+
Live Demo with all current modules at https://fullstack-devops.github.io/ng-mat-components (still in dev)
25+
26+
Documentation will be done later when the api is fixed.
27+
28+
## Development server
29+
30+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
31+
32+
## Code scaffolding
33+
34+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
35+
36+
## Build
37+
38+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
39+
40+
## Running unit tests
41+
42+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
43+
44+
## Running end-to-end tests
45+
46+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
47+
48+
## Further help
49+
50+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

‎projects/ng-mat-components/src/lib/modules/calendar.ts‎ renamed to ‎projects/ng-mat-components/src/lib/module/fs-calendar/calendar.models.ts‎

File renamed without changes.

‎projects/ng-mat-components/src/lib/components/calendar/calendar.component.html‎ renamed to ‎projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.html‎

File renamed without changes.

‎projects/ng-mat-components/src/lib/components/calendar/calendar.component.scss‎ renamed to ‎projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.scss‎

File renamed without changes.

‎projects/ng-mat-components/src/lib/components/calendar/calendar.component.ts‎ renamed to ‎projects/ng-mat-components/src/lib/module/fs-calendar/fs-calendar.component.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import { FormControl, FormGroup } from '@angular/forms';
21
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
2+
import { CalendarConfig, Day, Calendar, calendarSelected } from './calendar.models';
3+
import { FsCalendarService } from './fs-calendar.service';
34
import * as moment from 'moment';
4-
import { CalendarConfig, Day, Calendar, calendarSelected } from '../../modules/calendar';
5-
import { CalendarService } from '../../services/calendar.service';
65

76
@Component({
87
selector: 'fs-calendar',
9-
templateUrl: './calendar.component.html',
10-
styleUrls: ['./calendar.component.scss'],
8+
templateUrl: './fs-calendar.component.html',
9+
styleUrls: ['./fs-calendar.component.scss'],
1110
host: {
1211
'class': 'fs-calendar',
1312
},
@@ -117,7 +116,7 @@ export class FsCalendarComponent implements OnInit {
117116
}
118117
}
119118

120-
constructor(private calendarService: CalendarService) { }
119+
constructor(private calendarService: FsCalendarService) { }
121120

122121
ngOnInit() {
123122
this.isLoading = false

0 commit comments

Comments
 (0)