Skip to content

Commit 08c8226

Browse files
nmetulevnmetulev
authored
Added group-id and show-max attributes for Agenda, Added hide-header for Tasks (#119)
* added group-id and show-max properties to agenda * cleaned up people picker style * Added hide-header attribute to mgt-tasks
1 parent d0258c9 commit 08c8226

File tree

5 files changed

+61
-27
lines changed

5 files changed

+61
-27
lines changed

‎index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,9 @@
1010
<!-- <script src="./node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> -->
1111

1212
<!-- <script src="./dist/bundle/mgt-loader.js"></script> -->
13-
<!-- <script type="module" src="dist/es6/index.js"></script> -->
1413

15-
<script type="module" src="./dist/es6/components/mgt-login/mgt-login.js"></script>
16-
<script type="module" src="./dist/es6/components/mgt-agenda/mgt-agenda.js"></script>
17-
<script type="module" src="./dist/es6/components/mgt-people/mgt-people.js"></script>
14+
<script type="module" src="dist/es6/index.js"></script>
1815
<script type="module" src="./dist/es6/mock/mgt-mock-provider.js"></script>
19-
<script type="module" src="./dist/es6/components/providers/mgt-msal-provider.js"></script>
20-
<script type="module" src="./dist/es6/components/mgt-tasks/mgt-tasks.js"></script>
2116
</head>
2217

2318
<body>
@@ -32,5 +27,6 @@
3227
<mgt-tasks data-source="todo"></mgt-tasks>
3328
<mgt-agenda group-by-day></mgt-agenda>
3429
<mgt-people></mgt-people>
30+
<mgt-people-picker></mgt-people-picker>
3531
</body>
3632
</html>

‎src/Graph.ts‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,12 +235,21 @@ export class Graph {
235235
return this.getPhotoForResource(`me/contacts/${contactId}`, ['contacts.read']);
236236
}
237237

238-
async getEvents(startDateTime: Date, endDateTime: Date): Promise<Array<MicrosoftGraph.Event>> {
238+
async getEvents(startDateTime: Date, endDateTime: Date, groupId?: string): Promise<Array<MicrosoftGraph.Event>> {
239239
let scopes = 'calendars.read';
240240

241241
let sdt = `startdatetime=${startDateTime.toISOString()}`;
242242
let edt = `enddatetime=${endDateTime.toISOString()}`;
243-
let uri = `/me/calendarview?${sdt}&${edt}`;
243+
244+
let uri: string;
245+
246+
if (groupId) {
247+
uri = `groups/${groupId}/calendar`;
248+
} else {
249+
uri = `me`;
250+
}
251+
252+
uri += `/calendarview?${sdt}&${edt}`;
244253

245254
let calendarView = await this.client
246255
.api(uri)

‎src/components/mgt-agenda/mgt-agenda.ts‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,18 @@ export class MgtAgenda extends MgtTemplatedComponent {
5656
})
5757
eventQuery: string;
5858

59+
@property({
60+
attribute: 'show-max',
61+
type: Number
62+
})
63+
showMax: number;
64+
65+
@property({
66+
attribute: 'group-id',
67+
type: String
68+
})
69+
groupId: string;
70+
5971
static get styles() {
6072
return styles;
6173
}
@@ -83,7 +95,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
8395
}
8496

8597
attributeChangedCallback(name, oldValue, newValue) {
86-
if (name === 'date' || name === 'days') {
98+
if (oldValue !== newValue && (name === 'date' || name === 'days' || name === 'group-id')) {
8799
this.events = null;
88100
this.loadData();
89101
}
@@ -136,7 +148,11 @@ export class MgtAgenda extends MgtTemplatedComponent {
136148
let end = new Date();
137149
end.setHours(0, 0, 0, 0);
138150
end.setDate(start.getDate() + this.days);
139-
this.events = await p.graph.getEvents(start, end);
151+
try {
152+
this.events = await p.graph.getEvents(start, end, this.groupId);
153+
} catch (error) {
154+
// noop - possible error with graph
155+
}
140156
}
141157
this._loading = false;
142158
} else if (p && p.state === ProviderState.Loading) {
@@ -161,17 +177,19 @@ export class MgtAgenda extends MgtTemplatedComponent {
161177
}
162178

163179
if (this.events) {
164-
let renderedTemplate = this.renderTemplate('default', { events: this.events });
180+
let events = this.showMax && this.showMax > 0 ? this.events.slice(0, this.showMax) : this.events;
181+
182+
let renderedTemplate = this.renderTemplate('default', { events: events });
165183
if (renderedTemplate) {
166184
return renderedTemplate;
167185
}
168186

169187
if (this.groupByDay) {
170188
let grouped = {};
171-
for (let i = 0; i < this.events.length; i++) {
172-
let header = this.getDateHeaderFromDateTimeString(this.events[i].start.dateTime);
189+
for (let i = 0; i < events.length; i++) {
190+
let header = this.getDateHeaderFromDateTimeString(events[i].start.dateTime);
173191
grouped[header] = grouped[header] || [];
174-
grouped[header].push(this.events[i]);
192+
grouped[header].push(events[i]);
175193
}
176194

177195
return html`
@@ -192,7 +210,7 @@ export class MgtAgenda extends MgtTemplatedComponent {
192210
`;
193211
}
194212

195-
return this.renderListOfEvents(this.events);
213+
return this.renderListOfEvents(events);
196214
} else {
197215
return this.renderTemplate('no-data', null) || html``;
198216
}

‎src/components/mgt-people-picker/mgt-people-picker.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* -------------------------------------------------------------------------------------------
66
*/
77

8-
import { LitElement, html, customElement, property } from 'lit-element';
8+
import { html, customElement, property } from 'lit-element';
99
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
1010

1111
import { Providers } from '../../Providers';
@@ -36,10 +36,10 @@ export class MgtPicker extends MgtTemplatedComponent {
3636

3737
//group attribute selection
3838
@property({
39-
attribute: 'group',
39+
attribute: 'group-id',
4040
type: String
4141
})
42-
group: string;
42+
groupId: string;
4343

4444
//User selected people
4545
@property() public _selectedPeople: Array<any> = [];
@@ -66,7 +66,7 @@ export class MgtPicker extends MgtTemplatedComponent {
6666
attributeChangedCallback(att, oldval, newval) {
6767
super.attributeChangedCallback(att, oldval, newval);
6868

69-
if (att == 'group' && oldval !== newval) {
69+
if (att == 'group-id' && oldval !== newval) {
7070
this.findGroup();
7171
}
7272
}
@@ -81,7 +81,7 @@ export class MgtPicker extends MgtTemplatedComponent {
8181
}
8282

8383
firstUpdated() {
84-
if (this.group) {
84+
if (this.groupId) {
8585
Providers.onProviderUpdated(() => this.findGroup());
8686
this.findGroup();
8787
}
@@ -91,7 +91,7 @@ export class MgtPicker extends MgtTemplatedComponent {
9191
let provider = Providers.globalProvider;
9292
if (provider && provider.state === ProviderState.SignedIn) {
9393
let client = Providers.globalProvider.graph;
94-
this.groupPeople = await client.getPeopleFromGroup(this.group);
94+
this.groupPeople = await client.getPeopleFromGroup(this.groupId);
9595
}
9696
}
9797

@@ -197,7 +197,7 @@ export class MgtPicker extends MgtTemplatedComponent {
197197
let client = Providers.globalProvider.graph;
198198

199199
//filtering groups
200-
if (this.group) {
200+
if (this.groupId) {
201201
people = this.groupPeople;
202202
} else {
203203
people = await client.findPerson(name);

‎src/components/mgt-tasks/mgt-tasks.ts‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,9 @@ export class MgtTasks extends MgtBaseComponent {
7373
@property({ attribute: 'initial-bucket-id', type: String })
7474
public initialBucketId: string = null;
7575

76+
@property({ attribute: 'hide-header', type: Boolean })
77+
public hideHeader: boolean = false;
78+
7679
@property() private _showNewTask: boolean = false;
7780
@property() private _newTaskBeingAdded: boolean = false;
7881
@property() private _newTaskSelfAssigned: boolean = true;
@@ -321,12 +324,20 @@ export class MgtTasks extends MgtBaseComponent {
321324

322325
let loadingTask = this._inTaskLoad && !this._hasDoneInitialLoad ? this.renderLoadingTask() : null;
323326

327+
let header;
328+
329+
if (!this.hideHeader) {
330+
header = html`
331+
<div class="Header">
332+
<span class="PlannerTitle">
333+
${this.renderPlanOptions()}
334+
</span>
335+
</div>
336+
`;
337+
}
338+
324339
return html`
325-
<div class="Header">
326-
<span class="PlannerTitle">
327-
${this.renderPlanOptions()}
328-
</span>
329-
</div>
340+
${header}
330341
<div class="Tasks">
331342
${this._showNewTask ? this.renderNewTaskHtml() : null} ${loadingTask}
332343
${repeat(tasks, task => task.id, task => this.renderTaskHtml(task))}

0 commit comments

Comments
 (0)