Skip to content

Commit 7844861

Browse files
RyCarpenterRyCarpenter
committed
Adds User and Form Selection to Filtering Options. Also Fixes the Time Based Filtering.
1 parent 8c5dd02 commit 7844861

12 files changed

Lines changed: 2512 additions & 1340 deletions

File tree

‎service/src/api/observation.js‎

Lines changed: 173 additions & 95 deletions
Large diffs are not rendered by default.

‎service/src/routes/observations.js‎

Lines changed: 273 additions & 149 deletions
Large diffs are not rendered by default.

‎web-app/admin/src/app/observation/observation-edit/observation-edit.component.ts‎

Lines changed: 400 additions & 266 deletions
Large diffs are not rendered by default.

‎web-app/src/app/event/event.service.ts‎

Lines changed: 381 additions & 209 deletions
Large diffs are not rendered by default.

‎web-app/src/app/event/event.types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { User } from "@ngageoint/mage.web-core-lib/user";
2+
import { Event } from "../filter/filter.types";
3+
4+
export type MemberPage = {
5+
items: User[];
6+
pageIndex: number;
7+
pageSize: number;
8+
totalCount: number;
9+
};
10+
11+
export type filterChanges = { added?: any[]; updated?: any[]; removed?: any[] };
12+
13+
export type EventById = Record<string, Event>;

‎web-app/src/app/filter/filter.component.html‎

Lines changed: 87 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,96 @@
11
<div class="content">
22
<div>
3-
<h2 mat-dialog-title>Filter</h2>
4-
<div mat-dialog-content>
5-
<div>
6-
<mat-form-field appearance="fill">
7-
<mat-label>Event</mat-label>
8-
<input type="text" matInput [formControl]="eventControl" [matAutocomplete]="autoEvent">
9-
<mat-autocomplete #autoEvent="matAutocomplete" [displayWith]="onDisplayEvent" (optionSelected)="onSelectEvent()">
10-
<mat-option *ngFor="let event of filteredEvents | async" [value]="event">
11-
<div class="option-text">{{event.name}}</div>
12-
<div class="option-description">{{event.description}}</div>
13-
</mat-option>
14-
</mat-autocomplete>
15-
</mat-form-field>
16-
</div>
17-
18-
<div>
19-
<mat-form-field appearance="fill">
20-
<mat-label>Teams</mat-label>
21-
<mat-chip-list #chipList>
22-
<mat-chip *ngFor="let team of selectedTeams" [removable]="true" (removed)="onRemoveTeam(team)">
23-
{{team.name}}
24-
<mat-icon matChipRemove>cancel</mat-icon>
25-
</mat-chip>
26-
<input [formControl]="teamControl" [matAutocomplete]="autoTeam" [matChipInputFor]="chipList"
27-
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="onSelectTeam($event)">
28-
</mat-chip-list>
29-
<mat-autocomplete #autoTeam="matAutocomplete" [displayWith]="onDisplayTeam"
30-
(optionSelected)="onSelectTeam($event)">
31-
<mat-option *ngFor="let team of filteredTeams | async" [value]="team">
32-
<span>{{team.name}}</span>
33-
</mat-option>
34-
</mat-autocomplete>
35-
</mat-form-field>
36-
</div>
37-
38-
<div>
39-
<mat-form-field appearance="fill">
40-
<mat-label>Time</mat-label>
41-
<mat-select [(value)]="intervalChoice" [compareWith]="compareIntervalChoices">
42-
<mat-option *ngFor="let choice of intervalChoices" [value]="choice">
43-
<span>{{choice.label}}</span>
44-
</mat-option>
45-
</mat-select>
46-
</mat-form-field>
47-
48-
<div class="datetime" *ngIf="intervalChoice.filter === 'custom'">
3+
<h2 mat-dialog-title>Filter</h2>
4+
<div mat-dialog-content>
495
<div>
50-
<datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone" (dateTimeChange)="onStartDate($event)"></datetime-picker>
51-
<datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone" (dateTimeChange)="onStartDate($event)"></datetime-picker>
6+
<mat-form-field appearance="fill">
7+
<mat-label>Event</mat-label>
8+
<input type="text" matInput [formControl]="eventControl" [matAutocomplete]="autoEvent" />
9+
<mat-autocomplete #autoEvent="matAutocomplete" [displayWith]="onDisplayEvent" (optionSelected)="onSelectEvent($event)">
10+
<mat-option *ngFor="let event of filteredEvents | async" [value]="event">
11+
<div class="option-text">{{event.name}}</div>
12+
<div class="option-description">{{event.description}}</div>
13+
</mat-option>
14+
</mat-autocomplete>
15+
</mat-form-field>
5216
</div>
53-
<div class="timezone">
54-
<button mat-stroked-button class="timezone__button" (click)="onTimezone()">
55-
<span *ngIf="timeZone === 'local'">Local ({{localOffset}})</span>
56-
<span *ngIf="timeZone === 'gmt'">GMT (+00:00)</span>
57-
</button>
17+
<div>
18+
<mat-form-field appearance="fill">
19+
<mat-label>Teams</mat-label>
20+
<mat-chip-list #chipListTeam>
21+
<mat-chip *ngFor="let team of selectedTeams" [removable]="true" (removed)="onRemoveTeam(team)">
22+
{{team.name}}
23+
<mat-icon matChipRemove>cancel</mat-icon>
24+
</mat-chip>
25+
<input [formControl]="teamControl" [matAutocomplete]="autoTeam" [matChipInputFor]="chipListTeam" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="onSelectTeam($event)" />
26+
</mat-chip-list>
27+
<mat-autocomplete #autoTeam="matAutocomplete" [displayWith]="onDisplayTeam" (optionSelected)="onSelectTeam($event)">
28+
<mat-option *ngFor="let team of filteredTeams | async" [value]="team">
29+
<span>{{team.name}}</span>
30+
</mat-option>
31+
</mat-autocomplete>
32+
</mat-form-field>
33+
</div>
34+
<div>
35+
<mat-form-field appearance="fill">
36+
<mat-label>Users</mat-label>
37+
<mat-chip-list #chipListUser>
38+
<mat-chip *ngFor="let user of selectedUsers" [removable]="true" (removed)="onRemoveUser(user)">
39+
{{user.displayName || user.username}}
40+
<mat-icon matChipRemove>cancel</mat-icon>
41+
</mat-chip>
42+
<input [formControl]="userControl" [matAutocomplete]="autoUser" [matChipInputFor]="chipListUser" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="onSelectUser($event)" />
43+
</mat-chip-list>
44+
<mat-autocomplete #autoUser="matAutocomplete" [displayWith]="onDisplayUser" (optionSelected)="onSelectUser($event)">
45+
<mat-option *ngFor="let user of filteredUsers | async" [value]="user">
46+
<span>{{user.displayName || user.username}}</span>
47+
</mat-option>
48+
</mat-autocomplete>
49+
</mat-form-field>
50+
</div>
51+
<div>
52+
<mat-form-field appearance="fill">
53+
<mat-label>Forms</mat-label>
54+
<mat-chip-list #chipListForm>
55+
<mat-chip *ngFor="let form of selectedForms" [removable]="true" (removed)="onRemoveForm(form)">
56+
{{form.name}}
57+
<mat-icon matChipRemove>cancel</mat-icon>
58+
</mat-chip>
59+
<input [formControl]="formControl" [matAutocomplete]="autoForm" [matChipInputFor]="chipListForm" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="onSelectForm($event)" />
60+
</mat-chip-list>
61+
<mat-autocomplete #autoForm="matAutocomplete" [displayWith]="onDisplayForm" (optionSelected)="onSelectForm($event)">
62+
<mat-option *ngFor="let form of filteredForms | async" [value]="form">
63+
<span>{{form.name}}</span>
64+
</mat-option>
65+
</mat-autocomplete>
66+
</mat-form-field>
67+
</div>
68+
<div>
69+
<mat-form-field appearance="fill">
70+
<mat-label>Time</mat-label>
71+
<mat-select [(value)]="intervalChoice" [compareWith]="compareIntervalChoices">
72+
<mat-option *ngFor="let choice of intervalChoices" [value]="choice">
73+
<span>{{choice.label}}</span>
74+
</mat-option>
75+
</mat-select>
76+
</mat-form-field>
77+
<div class="datetime" *ngIf="intervalChoice?.filter === 'custom'">
78+
<div>
79+
<datetime-picker title="Start" [datetime]="defaultStartDate" [timezone]="timeZone" (dateTimeChange)="onStartDate($event)"></datetime-picker>
80+
<datetime-picker title="End" [datetime]="defaultEndDate" [timezone]="timeZone" (dateTimeChange)="onEndDate($event)"></datetime-picker>
81+
</div>
82+
<div class="timezone">
83+
<button mat-stroked-button class="timezone__button" (click)="onTimezone()">
84+
<span *ngIf="timeZone === 'local'">Local ({{localOffset}})</span>
85+
<span *ngIf="timeZone === 'gmt'">GMT (+00:00)</span>
86+
</button>
87+
</div>
88+
</div>
5889
</div>
59-
</div>
6090
</div>
61-
</div>
6291
</div>
63-
6492
<div mat-dialog-actions align="end">
65-
<button mat-button (click)="onCancel()">Cancel</button>
66-
<button mat-button color="primary" cdkFocusInitial (click)="onFilter()">Filter</button>
93+
<button mat-button (click)="onCancel()">Cancel</button>
94+
<button mat-button color="primary" cdkFocusInitial (click)="onFilter()">Filter</button>
6795
</div>
68-
69-
</div>
96+
</div>

0 commit comments

Comments
 (0)