openaire-library/connect/userEmailPreferences/mailPrefs.component.html

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">
  <div uk-grid uk-grid>
    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first">
      <div class="uk-container uk-margin-top">
        <div class="uk-article-title custom-article-title">
          User Email Preferences for Claims Notifications
        </div>

        <div *ngIf="userValidMessage.length > 0 " class = "uk-alert uk-alert-danger " >
            User session is not valid. Please login again.
        </div>
        <errorMessages [status]="[status]" [type]="'notification preferences'"></errorMessages>

        <ul class="custom-accordion" uk-accordion>
          <!-- class="uk-open" -->
          <!-- uk-card uk-card-default uk-card-body -->
          <li *ngFor="let notification of notifications; let i=index" [class]="i==0 ? 'uk-open' : ''">
              <div class="uk-accordion-title">Email preferences for {{preferencesFor}}: <strong>{{notification.openaireName}}</strong></div>
              <div class="uk-accordion-content">
                <form class="uk-form-horizontal"><!-- [formGroup]="myForm"-->
                  <!--[ngClass]="{'has-error':!myForm.controls.notify.valid && myForm.controls.notify.dirty}"-->
                  <div class="uk-margin">
                    <div class="uk-form-label">Do you want to receive e-mail notifications?</div>
                    <!-- <div class="uk-form-controls uk-form-controls-text">
                      <label>Yes <input class="uk-radio" type="radio" name="radio2" [checked]="notification.notify" (click)="changeNotify(notification, true)"></label>
                      <label>No  <input class="uk-radio" type="radio" name="radio2" [checked]="!notification.notify" (click)="changeNotify(notification, false)"></label>
                    </div> -->
                    <div class="uk-form-controls uk-form-controls-text" data-uk-button-group>
                        <button *ngIf="notification.notify" class="uk-button uk-button-primary uk-button-small"
                                 data-uk-button>ON</button>
                        <button *ngIf="!notification.notify" class="uk-button-default uk-button-small"
                                (click)="changeNotify(notification, true)" data-uk-button>ON</button>
                        <button *ngIf="!notification.notify" class="uk-button uk-button-danger uk-button-small"
                                 data-uk-button>OFF</button>
                        <button *ngIf="notification.notify" class="uk-button-default uk-button-small"
                                (click)="changeNotify(notification, false)" data-uk-button>OFF</button>
                    </div>
                  </div>

                  <!-- [ngClass]="{'has-error':!myForm.controls.frequency.valid && myForm.controls.frequency.dirty}" -->
                  <div [class]="notification.notify ? 'uk-margin' : 'uk-margin cursor-not-allowed'">
                    <div class="uk-form-label" >How often?</div>
                    <div class="uk-form-controls">
                      <select [class]="notification.notify ? 'uk-select' : 'uk-select uk-disabled'" id="form-horizontal-select" class="uk-select" [(ngModel)]="notification.frequency" name="select_frequency">
                        <option [ngValue]="24" >Daily</option>
                        <option [ngValue]="48" >Every two days</option>
                        <option [ngValue]="168">Weekly</option>
                      </select>
                    </div>
                  </div>

                  <div *ngIf="showSaveResetButtons" class="uk-float-right">
                    <button type="submit" class="uk-button uk-button-primary" (click)="saveNotification(i)">Save Changes</button>
                    <button type="submit" class="uk-button" (click)="restoreNotification(i)">Reset</button>
                  </div>
                  <!-- <span class="uk-margin">
                    <button class="uk-width-1-1 uk-button uk-button-primary uk-button-small" type="submit" (click)="saveNotification(notifications, i)">Save</button>
                    <button class="uk-width-1-1 uk-button uk-button-small" (click)="restoreNotification(notifications, i)">Restore</button>
                  </span> -->

                  <!-- {{notification.notify}}  --  {{notification.frequency}} -->
                </form>

              </div>
          </li>
      </ul>

      <!-- {{notifications | json}} -->
      </div>
    </div>
  </div>
</div>