From 8e82cc57ffe84fb753399e93740ede11c88d737b Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Fri, 20 May 2016 19:44:29 +0300
Subject: [PATCH] refactor(calendar): move fullCalendar into baFullCalendar
---
.../dashboard/calendar/calendar.component.ts | 85 ++++++-------------
.../pages/dashboard/calendar/calendar.html | 2 +-
.../dashboard/calendar/calendar.loader.ts | 2 -
.../dashboard/calendar/calendar.service.ts | 49 +++++++++++
.../baFullCalendar.component.ts | 25 ++++++
.../baFullCalendar/baFullCalendar.html | 1 +
.../baFullCalendar/baFullCalendar.loader.ts | 2 +
.../theme/components/baFullCalendar/index.ts | 1 +
src/app/theme/components/index.ts | 1 +
9 files changed, 108 insertions(+), 60 deletions(-)
delete mode 100644 src/app/pages/dashboard/calendar/calendar.loader.ts
create mode 100644 src/app/pages/dashboard/calendar/calendar.service.ts
create mode 100644 src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
create mode 100644 src/app/theme/components/baFullCalendar/baFullCalendar.html
create mode 100644 src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
create mode 100644 src/app/theme/components/baFullCalendar/index.ts
diff --git a/src/app/pages/dashboard/calendar/calendar.component.ts b/src/app/pages/dashboard/calendar/calendar.component.ts
index a3e5209a..ac0d9a1f 100644
--- a/src/app/pages/dashboard/calendar/calendar.component.ts
+++ b/src/app/pages/dashboard/calendar/calendar.component.ts
@@ -1,73 +1,44 @@
import {Component, ViewEncapsulation} from '@angular/core';
-import './calendar.loader.ts';
-import {BaThemeConfigProvider} from '../../../theme';
+import {BaFullCalendar} from '../../../theme/components';
+import {CalendarService} from "./calendar.service";
@Component({
selector: 'calendar',
encapsulation: ViewEncapsulation.None,
- styles: [require('fullcalendar/dist/fullcalendar.css'), require('./calendar.scss')],
- template: require('./calendar.html')
+ styles: [require('./calendar.scss')],
+ template: require('./calendar.html'),
+ directives: [BaFullCalendar],
+ providers: [CalendarService]
})
export class Calendar {
- constructor(private _baConfig:BaThemeConfigProvider) {
+ public calendarConfiguration:any;
+ private _calendar:Object;
+
+ constructor(private _calendarService:CalendarService) {
+ this.calendarConfiguration = this._calendarService.getData();
+ this.calendarConfiguration.select = (start, end) => this._onSelect(start, end);
}
- ngAfterViewInit() {
- this._initCalendar();
+ public onCalendarReady(calendar):void {
+ this._calendar = calendar;
}
- _initCalendar() {
- let dashboardColors = this._baConfig.get().colors.dashboard;
+ private _onSelect(start, end):void {
- let $element = $('#calendar').fullCalendar({
- header: {
- left: 'prev,next today',
- center: 'title',
- right: 'month,agendaWeek,agendaDay'
- },
- defaultDate: '2016-03-08',
- selectable: true,
- selectHelper: true,
- select: function (start, end) {
- var title = prompt('Event Title:');
- var eventData;
- if (title) {
- eventData = {
- title: title,
- start: start,
- end: end
- };
- $element.fullCalendar('renderEvent', eventData, true);
- }
- $element.fullCalendar('unselect');
- },
- editable: true,
- eventLimit: true, // allow "more" link when too many events
- events: [
- {
- title: 'All Day Event',
- start: '2016-03-01',
- color: dashboardColors.silverTree
- },
- {
- title: 'Long Event',
- start: '2016-03-07',
- end: '2016-03-10',
- color: dashboardColors.blueStone
- },
- {
- title: 'Dinner',
- start: '2016-03-14T20:00:00',
- color: dashboardColors.surfieGreen
- },
- {
- title: 'Birthday Party',
- start: '2016-04-01T07:00:00',
- color: dashboardColors.gossip
- }
- ]
- });
+ if (this._calendar != null) {
+ var title = prompt('Event Title:');
+ var eventData;
+ if (title) {
+ eventData = {
+ title: title,
+ start: start,
+ end: end
+ };
+ $(this._calendar).fullCalendar('renderEvent', eventData, true);
+ }
+ $(this._calendar).fullCalendar('unselect');
+ }
}
}
diff --git a/src/app/pages/dashboard/calendar/calendar.html b/src/app/pages/dashboard/calendar/calendar.html
index 022b29d7..d1410cc5 100644
--- a/src/app/pages/dashboard/calendar/calendar.html
+++ b/src/app/pages/dashboard/calendar/calendar.html
@@ -1 +1 @@
-
+
diff --git a/src/app/pages/dashboard/calendar/calendar.loader.ts b/src/app/pages/dashboard/calendar/calendar.loader.ts
deleted file mode 100644
index 031a62b8..00000000
--- a/src/app/pages/dashboard/calendar/calendar.loader.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-require('fullcalendar/dist/fullcalendar.js');
-
diff --git a/src/app/pages/dashboard/calendar/calendar.service.ts b/src/app/pages/dashboard/calendar/calendar.service.ts
new file mode 100644
index 00000000..5fe87ec1
--- /dev/null
+++ b/src/app/pages/dashboard/calendar/calendar.service.ts
@@ -0,0 +1,49 @@
+import {Injectable} from '@angular/core';
+import {BaThemeConfigProvider} from '../../../theme';
+
+@Injectable()
+export class CalendarService {
+
+ constructor(private _baConfig:BaThemeConfigProvider) {
+ }
+
+ getData() {
+
+ let dashboardColors = this._baConfig.get().colors.dashboard;
+ return {
+ header: {
+ left: 'prev,next today',
+ center: 'title',
+ right: 'month,agendaWeek,agendaDay'
+ },
+ defaultDate: '2016-03-08',
+ selectable: true,
+ selectHelper: true,
+ editable: true,
+ eventLimit: true,
+ events: [
+ {
+ title: 'All Day Event',
+ start: '2016-03-01',
+ color: dashboardColors.silverTree
+ },
+ {
+ title: 'Long Event',
+ start: '2016-03-07',
+ end: '2016-03-10',
+ color: dashboardColors.blueStone
+ },
+ {
+ title: 'Dinner',
+ start: '2016-03-14T20:00:00',
+ color: dashboardColors.surfieGreen
+ },
+ {
+ title: 'Birthday Party',
+ start: '2016-04-01T07:00:00',
+ color: dashboardColors.gossip
+ }
+ ]
+ };
+ }
+}
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
new file mode 100644
index 00000000..119ca30c
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
@@ -0,0 +1,25 @@
+import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
+
+import './baFullCalendar.loader.ts';
+
+@Component({
+ selector: 'ba-full-calendar',
+ template: require('./baFullCalendar.html'),
+ encapsulation: ViewEncapsulation.None,
+})
+export class BaFullCalendar {
+
+ @Input() baFullCalendarConfiguration:Object;
+ @Input() baFullCalendarClass:string;
+ @Output() onCalendarReady = new EventEmitter();
+
+ @ViewChild('baFullCalendar') private _selector:ElementRef;
+
+ constructor () {
+ }
+
+ ngAfterViewInit() {
+ let calendar = $(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
+ this.onCalendarReady.emit(calendar);
+ }
+}
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.html b/src/app/theme/components/baFullCalendar/baFullCalendar.html
new file mode 100644
index 00000000..83a2c1ae
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.html
@@ -0,0 +1 @@
+
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
new file mode 100644
index 00000000..984a777e
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.loader.ts
@@ -0,0 +1,2 @@
+require('fullcalendar/dist/fullcalendar.js');
+require('style-loader!fullcalendar/dist/fullcalendar.css');
diff --git a/src/app/theme/components/baFullCalendar/index.ts b/src/app/theme/components/baFullCalendar/index.ts
new file mode 100644
index 00000000..45b34c2e
--- /dev/null
+++ b/src/app/theme/components/baFullCalendar/index.ts
@@ -0,0 +1 @@
+export * from './baFullCalendar.component.ts';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index ea0547ef..e1914270 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -6,3 +6,4 @@ export * from './baCard';
export * from './baAmChart';
export * from './baChartistChart';
export * from './baBackTop';
+export * from './BaFullCalendar';