TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Notification settings table intiial round of changes

Browse Source
pull/9636/head
Benjamin Bädorf 3 years ago
parent 5927709d3b
commit 6a8d7cf806
No known key found for this signature in database
GPG Key ID: 069CA2D117AB5CCF
8 changed files with 95 additions and 139 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      frontend/src/app/features/user-preferences/notifications-settings/page/notifications-settings-page.component.html
  2. 133
      frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.html
  3. 17
      frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.ts
  4. 6
      frontend/src/app/features/user-preferences/state/user-preferences.query.ts
  5. 20
      frontend/src/app/shared/components/project-list-select/project-list-select.component.html
  6. 18
      frontend/src/app/shared/components/project-list-select/project-list-select.component.ts
  7. 17
      frontend/src/app/shared/components/table/table.sass
  8. 1
      frontend/src/global_styles/common/openproject-common.module.sass

2
frontend/src/app/features/user-preferences/notifications-settings/page/notifications-settings-page.component.html
Unescape View File

@ -127,8 +127,6 @@
[userId]="userId"
></op-notification-settings-table>
<
<div class="generic-table--action-buttons">
<button
class="button -highlight"

133
frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.html
Unescape View File

@ -1,125 +1,30 @@
<div class="generic-table--container form--section">
<div class="generic-table--results-container">
<table class="generic-table">
<colgroup>
<col>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
<col opHighlightCol>
</colgroup>
<table
class="op-table"
*ngIf="showTable$ | async"
>
<thead>
<tr>
<th>
<div class="generic-table--empty-header"></div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.channel_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.involved_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.mentioned_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.watched_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.work_package_created_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.work_package_commented_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.work_package_processed_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.work_package_prioritized_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.work_package_scheduled_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--sort-header-outer">
<div class="generic-table--sort-header">
<span [textContent]="text.any_event_header"></span>
</div>
</div>
</th>
<th>
<div class="generic-table--empty-header"></div>
</th>
<th class="op-table--cell--cell_heading"></th>
<ng-container
*ngFor="let item of (groupedNotificationSettings$ | async) | keyvalue"
>
<th class="op-table--cell op-table--cell_heading">{{ item.key }}</th>
</ng-container>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of (groupedNotificationSettings$ | async) | keyvalue: projectOrder">
<ng-container *ngFor="let setting of item.value; let first = first; let last = last">
<tr
class="-no-highlighting"
op-notification-setting-row
[attr.data-qa-notification-project]="item.key"
[attr.data-qa-notification-channel]="setting.channel"
[count]="item.value.length"
[first]="first"
[setting]="setting"
>
</tr>
<tr *ngIf="last"
class="op-notifications-settings-table--spacer">
<td colspan="7"></td>
</tr>
</ng-container>
<tr>
<th class="op-table--cell op-table--cell_soft-heading">{{ text.mentioned_header }}</th>
<ng-container *ngFor="let item of (groupedNotificationSettings$ | async) | keyvalue">
<td><input type="checkbox" disabled checked /></td>
</ng-container>
</tr>
</tbody>
</table>
<op-notification-setting-inline-create
</table>
<op-notification-setting-inline-create
*ngIf="userId"
[userId]="userId"
(selected)="addRow($event)"
data-qa-selector="notification-setting-inline-create"
></op-notification-setting-inline-create>
</div>
</div>
></op-notification-setting-inline-create>

17
frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.ts
Unescape View File

@ -1,15 +1,16 @@
// noinspection ES6UnusedImports
import {
Component, OnInit, ChangeDetectionStrategy, Input,
Component,
ChangeDetectionStrategy,
Input,
} from '@angular/core';
import { map, tap } from 'rxjs/operators';
import { KeyValue } from '@angular/common';
import { I18nService } from 'core-app/core/i18n/i18n.service';
import { UserPreferencesService } from 'core-app/features/user-preferences/state/user-preferences.service';
import { UserPreferencesStore } from 'core-app/features/user-preferences/state/user-preferences.store';
import { UserPreferencesQuery } from 'core-app/features/user-preferences/state/user-preferences.query';
import { CurrentUserService } from 'core-app/core/current-user/current-user.service';
import { UIRouterGlobals } from '@uirouter/core';
import { HalSourceLink } from 'core-app/features/hal/resources/hal-resource';
import {
buildNotificationSetting,
@ -28,6 +29,8 @@ export class NotificationSettingsTableComponent {
groupedNotificationSettings$ = this.query.notificationsGroupedByProject$;
showTable$ = this.query.notificationsGroupedByProject$.pipe(map((settings) => Object.keys(settings).length > 0));
text = {
save: this.I18n.t('js.button_save'),
involved_header: this.I18n.t('js.notifications.settings.involved'),
@ -44,14 +47,6 @@ export class NotificationSettingsTableComponent {
};
projectOrder = (a:KeyValue<string, unknown>, b:KeyValue<string, unknown>):number => {
if (a.key === 'global') {
return -1;
}
if (b.key === 'global') {
return 1;
}
return a.key.localeCompare(b.key);
};

6
frontend/src/app/features/user-preferences/state/user-preferences.query.ts
Unescape View File

@ -1,7 +1,7 @@
import { Injectable } from '@angular/core';
import { Query } from '@datorama/akita';
import { map } from 'rxjs/operators';
import { map, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { UserPreferencesStore } from 'core-app/features/user-preferences/state/user-preferences.store';
import { UserPreferencesModel } from 'core-app/features/user-preferences/state/user-preferences.model';
@ -16,7 +16,9 @@ export class UserPreferencesQuery extends Query<UserPreferencesModel> {
notificationsGroupedByProject$:Observable<{ [key:string]:NotificationSetting[] }> = this
.notificationSettings$
.pipe(
map((notifications) => _.groupBy(notifications, (setting) => setting._links.project.title || 'global')),
map((notifications) => notifications.filter((setting) => setting.channel === 'in_app' && setting._links.project.title)),
map((notifications) => _.groupBy(notifications, (setting) => setting._links.project.title)),
tap(console.log),
);
projectNotifications$ = this

20
frontend/src/app/shared/components/project-list-select/project-list-select.component.html
Unescape View File

@ -0,0 +1,20 @@
<div class="op-popout--headline">
<h1>Select project(s)</h1>
<button
class="op-link"
type="button"
(click)="clearSelection()"
></button>
</div>
<label>
<span class="hidden-for-sighted">Search</span>
<input
type="text"
(input)="search()"
/>
</label>
<ul>
<li>Project A</li>
</ul>

18
frontend/src/app/shared/components/project-list-select/project-list-select.component.ts
Unescape View File

@ -0,0 +1,18 @@
import {
Component,
HostBinding,
} from '@angular/core';
@Component({
selector: 'op-project-list-select',
templateUrl: './project-list-select.component.html',
})
export class OpProjectListSelectComponent {
@HostBinding('class.op-project-list-select') className = true;
public clearSelection() {
}
public search() {
}
}

17
frontend/src/app/shared/components/table/table.sass
Unescape View File

@ -0,0 +1,17 @@
.op-table
max-width: 100%
overflow-x: scroll
border-collapse: collapse
&--cell
padding: 12px 16px
border: 1px solid #cccccc
text-align: center
&_heading
background-color: #f3f3f3
font-weight: bold
text-align: left
&_soft-heading
background-color: transparent

1
frontend/src/global_styles/common/openproject-common.module.sass
Unescape View File

@ -6,5 +6,6 @@
@import '../../app/shared/components/forms'
@import '../../app/shared/components/option-list/option-list'
@import '../../app/shared/components/popout/popout'
@import '../../app/shared/components/table/table'
@import 'export-options/export-options'
@import 'select/select'

Write Preview
Loading…
Cancel
Save