D-Net

import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";

import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";

import {EnvProperties} from "../../../openaireLibrary/utils/properties/env-properties";

import {properties} from "../../../../environments/environment";

import {EditCommunityComponent} from "./edit-community/edit-community.component";

import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";

import {Title} from "@angular/platform-browser";

import {Subscription} from "rxjs";

@Component({

  selector: 'community-profile',

  template: `

    <div page-content>

      <div header>

        <community-info tab="profile"></community-info>

      </div>

      <div inner>

        <div class="uk-card-header">

          <div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>

            <div>

              <div class="uk-text-small title">

                Manage Community Profile

              </div>

              <div>

                <span *ngIf="community" class="uk-text-bold">{{community.shortTitle}}</span>

                <span *ngIf="editCommunityComponent.dirty && !loading"> (unsaved changes)</span>

              </div>

            </div>

            <div class="uk-text-right@m uk-text-center">

              <button class="uk-button uk-button-secondary outlined uk-margin-right"

                      (click)="reset()"

                      [disabled]="loading || !editCommunityComponent.dirty">Reset

              </button>

              <button class="uk-button uk-button-secondary"

                      (click)="save()"

                      [disabled]="loading || editCommunityComponent.disabled">Save

              </button>

            </div>

          </div>

        </div>

        <div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">

          <div [class.hidden]="loading">

            <edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community>

          </div>

          <div *ngIf="loading" class="uk-position-center">

            <loading></loading>

          </div>

        </div>

      </div>

    </div>

  `

})

export class ProfileComponent implements OnInit, OnDestroy {

  public community: CommunityInfo;

  public properties: EnvProperties = properties;

  public loading: boolean = false;

  private subscriptions: any[] = [];

  @ViewChild('editCommunityComponent', { static: true }) editCommunityComponent: EditCommunityComponent;

  constructor(private communityService: CommunityService,

              private title: Title) {

  }

  ngOnInit() {

    this.loading = true;

    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {

      this.community = community;

      if (this.community) {

        this.title.setTitle(this.community.communityId.toUpperCase() + " | Profile");

        setTimeout(() => {

          this.reset();

          this.loading = false;

        }, 200);

      }

    }));

  }

  public reset() {

    this.editCommunityComponent.init(this.community);

  }

  public save() {

    this.loading = true;

    this.editCommunityComponent.save((community) => {

      this.community = community;

      this.reset();

      this.loading = false;

    }, (error) => {

      this.loading = false;

    });

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    });

  }

}