Project

General

Profile

1
<div page-content>
2
  <div header>
3
    <users-tabs tab="notifications"></users-tabs>
4
  </div>
5
  <div inner>
6
    <form>
7
      <div class="uk-card-header">
8
        <div class=" uk-margin-small-top uk-margin-small-bottom">
9
          <button class="uk-float-right uk-button uk-margin-left uk-button-secondary " [disabled]="!hasChanged || showLoading"
10
                  (click)="updateUserNotifications()">Save
11
          </button>
12
          <button class=" uk-float-right uk-button  uk-button-secondary outlined" [disabled]="!hasChanged || showLoading"
13
                  (click)="resetForm()">Reset
14
          </button>
15
          <div>Notifications settings</div>
16
        </div>
17
      </div>
18
      <div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
19
        <div *ngIf="communityId && userNotifications && notifications && !showLoading" style="max-height: 60vh"
20
             class="uk-overflow-auto uk-padding uk-padding-remove-bottom">
21
          <!--<div class="uk-alert uk-alert-primary uk-flex-center" role="alert">Notification settings are related to your
22
          personal
23
          account.
24
        </div>-->
25
          <h5 class="uk-text-bold uk-margin-medium-bottom">Manage Notifications</h5>
26
          <div class="uk-width-large uk-margin-bottom">
27
            <div class="uk-margin uk-grid" >
28
              <div class="uk-width-expand" title="Get e-mail notification when there are changes in the managers list of your community">
29
                Notifications for manager list changes <span>{{userNotifications.notifyForNewManagers ? '(Enabled)' : '(Disabled)'}}</span></div>
30
              <mat-slide-toggle [checked]="userNotifications.notifyForNewManagers"
31
                                (change)="($event.source.checked = userNotifications.notifyForNewManagers);changeValueForNewManagers(userNotifications.notifyForNewManagers)">
32
              </mat-slide-toggle>
33
            </div>
34
            <div class="uk-margin uk-grid">
35
              <div class="uk-width-expand" title="Get e-mail notification when a user subscribes in your community">Notifications for new
36
                subscribers <span>{{userNotifications.notifyForNewSubscribers ? '(Enabled)' : '(Disabled)'}}</span></div>
37
              <mat-slide-toggle [checked]="userNotifications.notifyForNewSubscribers"
38
                                (change)="($event.source.checked = userNotifications.notifyForNewSubscribers);changeValueForNewSubscribers(userNotifications.notifyForNewSubscribers)">
39
              </mat-slide-toggle>
40
            </div>
41
            <hr class="uk-margin-medium">
42
            <div *ngFor="let notification of notifications; let i=index">
43
              <div class="uk-margin uk-grid">
44
                <div class="uk-width-expand"
45
                     title="Get e-mail notification when users create new links related your community">Notify for
46
                  links
47
                  <span>{{notification.notify ? '(Enabled)' : '(Disabled)'}}</span></div>
48
                <mat-slide-toggle [checked]="notification.notify"
49
                                  (change)="($event.source.checked = notification.notify);changeNotify(notification, !notification.notify, i)">
50
                </mat-slide-toggle>
51
              </div>
52
              <div *ngIf="notification.notify" [class]="notification.notify ? 'uk-margin' :
53
                  'uk-margin cursor-not-allowed'">
54
                <div class="input-box">
55
                  <mat-form-field class="uk-width-1-1">
56
                    <mat-select #select class="" [(ngModel)]="notification.frequency"
57
                                (ngModelChange)="changeFrequency()"
58
                                name="select_frequency" [disableOptionCentering]="true">
59
                      <mat-option *ngFor=" let  fr of frequencyOptions let i = index"
60
                                  [value]="fr.value">{{fr.label}}</mat-option>
61
                    </mat-select>
62
                  </mat-form-field>
63
                </div>
64

    
65
              </div>
66
            </div>
67
          </div>
68
        </div>
69
        <div *ngIf="showLoading" class="uk-position-center">
70
          <loading></loading>
71
        </div>
72
      </div>
73
    </form>
74
  </div>
75
</div>
(2-2/6)