Skip to content

Commit fae05e3

Browse files
AnthonyNahasAnthonyNahas
committed
refactor(package): minor changed in components
1 parent 9ac537c commit fae05e3

26 files changed

+749
-14
lines changed

‎src/module/component/mat-calendar-monthly-view/mat-calendar-monthly-view.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<p>
2+
mat-calendar-monthly-view works!
3+
</p>

‎src/module/components/mat-calendar-daily-view/mat-calendar-daily-view.component.css‎ renamed to ‎src/module/component/mat-calendar-monthly-view/mat-calendar-monthly-view.component.scss‎

File renamed without changes.

‎src/module/component/mat-calendar-monthly-view/mat-calendar-monthly-view.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { MatCalendarMonthlyViewComponent } from './mat-calendar-monthly-view.component';
4+
5+
describe('MatCalendarMonthlyViewComponent', () => {
6+
let component: MatCalendarMonthlyViewComponent;
7+
let fixture: ComponentFixture<MatCalendarMonthlyViewComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [ MatCalendarMonthlyViewComponent ]
12+
})
13+
.compileComponents();
14+
}));
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(MatCalendarMonthlyViewComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎src/module/component/mat-calendar-monthly-view/mat-calendar-monthly-view.component.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import {Component, OnInit} from '@angular/core';
2+
3+
@Component({
4+
selector: 'mat-calendar-monthly-view',
5+
templateUrl: './mat-calendar-monthly-view.component.html',
6+
styleUrls: ['./mat-calendar-monthly-view.component.scss']
7+
})
8+
export class MatCalendarMonthlyViewComponent implements OnInit {
9+
10+
constructor() {
11+
}
12+
13+
ngOnInit() {
14+
}
15+
16+
}

‎src/module/component/mat-calendar-yearly-view/mat-calendar-month-per-year-view/mat-calendar-month-per-year-view.component.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<mat-card *ngIf="month && year"
2+
mat-ripple>
3+
<mat-card-header>
4+
<mat-card-title>{{selectedDate |date : "MMMM"}}</mat-card-title>
5+
</mat-card-header>
6+
<mat-card-content>
7+
<table class="mat-calendar-table">
8+
<thead class="mat-calendar-table-header">
9+
<tr>
10+
<th *ngFor="let day of _weekdays" [attr.aria-label]="day.long">{{day.narrow}}</th>
11+
</tr>
12+
<tr>
13+
<th class="mat-calendar-table-header-divider" colspan="7" aria-hidden="true"></th>
14+
</tr>
15+
</thead>
16+
<tbody mat-calendar-body
17+
[label]=""
18+
[rows]="_weeks"
19+
[todayValue]="_todayDate"
20+
[selectedValue]="_selectedDate"
21+
[labelMinRequiredCells]="3"
22+
[activeCell]="nativeDateAdapter.getDate(selectedDate) - 1">
23+
</tbody>
24+
</table>
25+
26+
</mat-card-content>
27+
</mat-card>

‎src/module/component/mat-calendar-yearly-view/mat-calendar-month-per-year-view/mat-calendar-month-per-year-view.component.scss‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.day {
2+
margin: 0.25rem;
3+
}
4+
5+
.center {
6+
text-align: center;
7+
}
8+
9+
.sunday {
10+
color: red;
11+
}
12+
13+
mat-card {
14+
height: 100%;
15+
}
16+
17+
:host {
18+
display: block;
19+
::ng-deep {
20+
.mat-calendar-table td.mat-calendar-body-label {
21+
display: none;
22+
}
23+
}
24+
}
25+
26+
:host ::ng-deep .mat-calendar-body.mat-calendar-body-label {
27+
display: none;
28+
}
29+
30+
.mat-calendar-body td.mat-calendar-body-label {
31+
display: none;
32+
}
33+
34+
.mat-calendar-body-label {
35+
display: none;
36+
}
37+
38+
td {
39+
.mat-calendar-body-label {
40+
display: none;
41+
}
42+
}
43+
44+
$mat-calendar-padding: 8px !default;
45+
$mat-calendar-header-divider-width: 1px !default;
46+
$mat-calendar-controls-vertical-padding: 5%;
47+
48+
.mat-calendar-table {
49+
border-spacing: 0;
50+
border-collapse: collapse;
51+
width: 100%;
52+
}
53+
54+
.mat-calendar-table-header th {
55+
text-align: center;
56+
padding: 0 0 $mat-calendar-padding 0;
57+
}
58+
59+
.mat-calendar-table-header-divider {
60+
position: relative;
61+
height: $mat-calendar-header-divider-width;
62+
63+
// We use an absolutely positioned pseudo-element as the divider line for the table header so we
64+
// can extend it all the way to the edge of the calendar.
65+
&::after {
66+
content: '';
67+
position: absolute;
68+
top: 0;
69+
left: -$mat-calendar-padding;
70+
right: -$mat-calendar-padding;
71+
height: $mat-calendar-header-divider-width;
72+
}
73+
}
74+
75+
.mat-calendar-table-header-divider::after {
76+
//background: mat-color($foreground, divider);
77+
background: mat-color(grey, divider);
78+
}

‎src/module/component/mat-calendar-yearly-view/mat-calendar-month-per-year-view/mat-calendar-month-per-year-view.component.spec.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
2+
3+
import {
4+
MAT_DATE_FORMATS,
5+
MAT_DATE_LOCALE,
6+
MatCalendarBody,
7+
MatCardModule,
8+
MatDateFormats,
9+
MatNativeDateModule,
10+
NativeDateAdapter
11+
} from '@angular/material';
12+
import {MatCalendarMonthPerYearViewComponent} from './mat-calendar-month-per-year-view.component';
13+
import {MatCalendarService} from '../../../..';
14+
import {LOCALE_ID} from '@angular/core';
15+
16+
describe('MatCalendarMonthPerYearViewComponent', () => {
17+
let component: MatCalendarMonthPerYearViewComponent;
18+
let fixture: ComponentFixture<MatCalendarMonthPerYearViewComponent>;
19+
20+
beforeEach(async(() => {
21+
TestBed.configureTestingModule({
22+
imports:
23+
[
24+
MatCardModule,
25+
MatNativeDateModule
26+
],
27+
declarations:
28+
[
29+
MatCalendarBody,
30+
MatCalendarMonthPerYearViewComponent
31+
],
32+
providers:
33+
[
34+
MatCalendarService,
35+
NativeDateAdapter,
36+
{provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
37+
{provide: LOCALE_ID, useValue: 'en-GB'},
38+
{provide: MAT_DATE_FORMATS, useValue: {
39+
parse: {
40+
dateInput: 'D/MM/YYYY'
41+
},
42+
display: {
43+
dateInput: 'DD/MM/YYYY',
44+
monthYearLabel: 'MMMM Y',
45+
dateA11yLabel: 'LL',
46+
monthYearA11yLabel: 'MMMM Y'
47+
}
48+
}},
49+
]
50+
}).compileComponents();
51+
}));
52+
53+
beforeEach(() => {
54+
fixture = TestBed.createComponent(MatCalendarMonthPerYearViewComponent);
55+
component = fixture.componentInstance;
56+
fixture.detectChanges();
57+
});
58+
59+
it('should create', () => {
60+
expect(component).toBeTruthy();
61+
});
62+
});

‎src/module/component/mat-calendar-yearly-view/mat-calendar-month-per-year-view/mat-calendar-month-per-year-view.component.ts‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import {Component, Inject, Input, OnChanges, OnInit, Optional, SimpleChanges, ViewEncapsulation} from '@angular/core';
2+
import * as _moment from 'moment';
3+
import {MAT_DATE_FORMATS, MatCalendarCell, MatDateFormats, NativeDateAdapter} from '@angular/material';
4+
5+
const moment = _moment;
6+
7+
@Component({
8+
selector: 'mat-calendar-month-pre-year-view',
9+
templateUrl: './mat-calendar-month-per-year-view.component.html',
10+
styleUrls: ['./mat-calendar-month-per-year-view.component.scss'],
11+
encapsulation: ViewEncapsulation.None,
12+
})
13+
export class MatCalendarMonthPerYearViewComponent implements OnInit, OnChanges {
14+
15+
@Input()
16+
month: number;
17+
18+
@Input()
19+
year: number;
20+
21+
private _activeDate: Date;
22+
23+
/** The number of blank cells in the first row before the 1st of the month. */
24+
_firstWeekOffset: number;
25+
26+
/** The date of the month that today falls on. Null if today is in another month. */
27+
_todayDate: number | null;
28+
29+
/** The names of the weekdays. */
30+
_weekdays: { long: string, narrow: string }[];
31+
32+
/** Grid of calendar cells representing the dates of the month. */
33+
_weeks: MatCalendarCell[][];
34+
35+
monthMatrix: [number, Array<number>] = [7, []];
36+
37+
selectedDate: Date = new Date();
38+
39+
constructor(@Optional()
40+
@Inject(MAT_DATE_FORMATS)
41+
private _dateFormats: MatDateFormats,
42+
public nativeDateAdapter: NativeDateAdapter) {
43+
44+
const firstDayOfWeek = this.nativeDateAdapter.getFirstDayOfWeek();
45+
const narrowWeekdays = this.nativeDateAdapter.getDayOfWeekNames('narrow');
46+
const longWeekdays = this.nativeDateAdapter.getDayOfWeekNames('long');
47+
48+
// console.log('getDayOfWeekNames', this.nativeDateAdapter.getDayOfWeekNames('short'));
49+
// Rotate the labels for days of the week based on the configured first day of the week.
50+
const weekdays = longWeekdays.map((long, i) => {
51+
return {long, narrow: narrowWeekdays[i]};
52+
});
53+
54+
this._weekdays = weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
55+
this._todayDate = this._getDateInCurrentMonth(this.nativeDateAdapter.today());
56+
}
57+
58+
ngOnInit() {
59+
if (this.month && this.year) {
60+
this.selectedDate.setMonth(this.month);
61+
this.selectedDate.setFullYear(this.year);
62+
this.init();
63+
}
64+
}
65+
66+
ngOnChanges(changes: SimpleChanges): void {
67+
if (changes.year) {
68+
this.year = changes.year.currentValue;
69+
// console.log('changes occurred: ', changes);
70+
}
71+
}
72+
73+
init() {
74+
this._todayDate = this._getDateInCurrentMonth(this.nativeDateAdapter.today());
75+
const firstOfMonth = this.nativeDateAdapter.createDate(this.nativeDateAdapter.getYear(this.selectedDate),
76+
this.nativeDateAdapter.getMonth(this.selectedDate), 1);
77+
this._firstWeekOffset =
78+
(7 + this.nativeDateAdapter.getDayOfWeek(firstOfMonth) -
79+
this.nativeDateAdapter.getFirstDayOfWeek()) % 7;
80+
this._createWeekCells();
81+
// console.log(this._weeks);
82+
}
83+
84+
/**
85+
* Gets the date in this month that the given Date falls on.
86+
* Returns null if the given Date is in another month.
87+
*/
88+
private _getDateInCurrentMonth(date: Date | null): number | null {
89+
return date && this._hasSameMonthAndYear(date, this.selectedDate) ?
90+
this.nativeDateAdapter.getDate(date) : null;
91+
}
92+
93+
/** Checks whether the 2 dates are non-null and fall within the same month of the same year. */
94+
private _hasSameMonthAndYear(d1: Date | null, d2: Date | null): boolean {
95+
return !!(d1 && d2 && this.nativeDateAdapter.getMonth(d1) === this.nativeDateAdapter.getMonth(d2) &&
96+
this.nativeDateAdapter.getYear(d1) === this.nativeDateAdapter.getYear(d2));
97+
}
98+
99+
/** Creates MatCalendarCells for the dates in this month. */
100+
private _createWeekCells() {
101+
const daysInMonth = this.nativeDateAdapter.getNumDaysInMonth(this.selectedDate);
102+
const dateNames = this.nativeDateAdapter.getDateNames();
103+
this._weeks = [[]];
104+
for (let i = 0, cell = this._firstWeekOffset; i < daysInMonth; i++, cell++) {
105+
if (cell === 7) {
106+
this._weeks.push([]);
107+
cell = 0;
108+
}
109+
const date = this.nativeDateAdapter.createDate(
110+
this.nativeDateAdapter.getYear(this.selectedDate),
111+
this.nativeDateAdapter.getMonth(this.selectedDate), i + 1);
112+
// const enabled = this._shouldEnableDate(date);
113+
// const ariaLabel = this.nativeDateAdapter.format(date, this._dateFormats.display.dateA11yLabel);
114+
this._weeks[this._weeks.length - 1]
115+
.push(new MatCalendarCell(i + 1, dateNames[i], 'ariaLabel', false));
116+
}
117+
}
118+
}

‎src/module/component/mat-calendar-yearly-view/mat-calendar-yearly-view.component.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div fxLayout="column">
2+
<div fxLayout="row" fxLayoutAlign="space-between">
3+
<button mat-icon-button color="primary" (click)="previousYear()">
4+
<mat-icon>chevron_left</mat-icon>
5+
</button>
6+
<button mat-icon-button color="primary" (click)="nextYear()">
7+
<mat-icon>chevron_right</mat-icon>
8+
</button>
9+
</div>
10+
11+
<div fxLayout="row wrap"
12+
fxLayout.lt-sm="column"
13+
fxLayoutGap="32px grid"
14+
fxLayoutAlign="center">
15+
<mat-calendar-month-pre-year-view *ngFor="let monthIndex of[0,1,2,3,4,5,6,7,8,9,10,11]"
16+
fxFlex="0 1 calc(33.3% - 32px)"
17+
fxFlex.lt-md="0 1 calc(50% - 32px)"
18+
fxFlex.lt-sm="100%"
19+
[month]="monthIndex"
20+
[year]="selectedDate.getFullYear()">
21+
</mat-calendar-month-pre-year-view>
22+
</div>
23+
</div>

‎src/module/component/mat-calendar-yearly-view/mat-calendar-yearly-view.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:host {
2+
display: flex;
3+
}

0 commit comments

Comments
 (0)