From 8b7b42b339559571f2f568f95eb0eaeea63ccdc0 Mon Sep 17 00:00:00 2001 From: Alexey Boltava Date: Sat, 29 Oct 2016 12:49:11 +0700 Subject: [PATCH] Add CalendarView component scaffold (issue #43) Implemented CalendarView component basic feautures, added child components scaffold --- src/client/components/Calendar/Calendar.tsx | 98 +++++++++++++++++++ .../components/Calendar/CalendarGrid.tsx | 6 ++ src/lib/model.ts | 1 - 3 files changed, 104 insertions(+), 1 deletion(-) create mode 100644 src/client/components/Calendar/Calendar.tsx diff --git a/src/client/components/Calendar/Calendar.tsx b/src/client/components/Calendar/Calendar.tsx new file mode 100644 index 0000000..0033337 --- /dev/null +++ b/src/client/components/Calendar/Calendar.tsx @@ -0,0 +1,98 @@ +import * as React from 'react'; + +// __FUNCTION_NAME__ should later be replaced with actual api method +// import { __GET_CALENDAR_DATA__, __GET_TEAM_DATA__, __GET_EVENTS__ } from '../../api'; + +import { Calendar, Event, Team, User } from '../../../lib/model'; +import CalendarGrid from './CalendarGrid'; +import Controls from './Controls'; +import Filter from './Filter'; + +interface ICalendarViewState { + calendar: Calendar, + data, + filterKey: string, + pattern: string +} + +export default class CalendarView extends React.Component { + +state: ICalendarViewState; + + constructor(props) { + super(props); + } + + componentDidMount() { + let calendar: Calendar; + let team: Team; + let events: Event[]; + + // calendar = __GET_CALENDAR_DATA__(this.props.params.id); + // team = __GET_TEAM_DATA__(calendar.teamId); + // events = __GET_EVENTS__(this.props.params.id); + + // this.setState({ + // calendar: { + // id: this.props.params.id, + // name: calendar.name, + // type: calendar.type, + // description: calendar.description, + // teamId: calendar.teamId + // }, + // data: this.createDataArray(events, team.members), + // filterKey: '', + // pattern: '' + // }); + } + + render() { + let data = this.filterData(); + + return ( +
+
+ + +
+
+ +
+
+ ); + } + + createDataArray(events: Event[], teamMembers: User[]) { + return teamMembers.map((tm) => { + return { + user: tm, + events: events.filter((event) => event.createdBy === tm.id) + }; + }); + } + + setFilterParams(key: string, pattern: string) { + this.setState(Object.assign({}, this.state, + { + filterKey: key, + pattern: pattern.trim() + } + )); + } + + // add TimeOut block to reduce number of method calls? + filterData() { + let filterKey = this.state.filterKey; + let pattern = this.state.pattern; + + if (filterKey.length == 0 || pattern.length == 0) { + return this.state.data; + } + + return this.state.data.filter((item) => item.user[filterKey].match(pattern)); + } + +} diff --git a/src/client/components/Calendar/CalendarGrid.tsx b/src/client/components/Calendar/CalendarGrid.tsx index f4d815e..81d8540 100644 --- a/src/client/components/Calendar/CalendarGrid.tsx +++ b/src/client/components/Calendar/CalendarGrid.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +<<<<<<< 50cd87c06962ed0e7406d1fee146bfdeac57556b import Row from './Row'; import '../../styles/calendar-grid'; @@ -58,4 +59,9 @@ export default class CalendarGrid extends React.Component { gridHeader = document.getElementsByClassName('grid-header')[0]; gridHeader.style.left = `${-grid.scrollLeft}px`; } +======= + +export default class CalendarGrid extends React.Component { + +>>>>>>> Add CalendarView component scaffold (issue #43) } diff --git a/src/lib/model.ts b/src/lib/model.ts index 2f2d98d..4c4716b 100644 --- a/src/lib/model.ts +++ b/src/lib/model.ts @@ -52,7 +52,6 @@ export interface Calendar extends Entity { name: string; type: string; description: string; - teamId: string; organizationId: string; teamId: string; events?: Event[]; // only as part of API payload, actually stored in separate association table CalendarEvents