How to use @harbor/ui - 10 common examples

public save(): void {
        let changes = this.getChanges();
        if (!isEmpty(changes)) {
            this.onGoing = true;
            this.configService.saveConfiguration(changes)
                .subscribe(response => {
                    this.onGoing = false;
                    // refresh allConfig
                    this.refreshAllconfig.emit();
                    this.msgHandler.showSuccess('CONFIG.SAVE_SUCCESS');
                }, error => {
                    this.onGoing = false;
                    this.msgHandler.handleError(error);
                });
        } else {
            // Inprop situation, should not come here
            console.error('Save abort because nothing changed');
        }
    }

public save(): void {
        let changes = this.getChanges();
        if (!isEmpty(changes)) {
            this.onGoing = true;
            this.configService.saveConfiguration(changes)
                .subscribe(response => {
                    this.onGoing = false;
                    this.refreshAllconfig.emit();
                    // Reload bootstrap option
                    this.appConfigService.load().subscribe(() => { }
                        , error => console.error('Failed to reload bootstrap option with error: ', error));
                    this.msgHandler.showSuccess('CONFIG.SAVE_SUCCESS');
                }, error => {
                    this.onGoing = false;
                    this.msgHandler.handleError(error);
                });
        } else {
            // Inprop situation, should not come here
            console.error('Save abort because nothing changed');

public cancel(): void {
        let changes = this.getChanges();
        if (!isEmpty(changes)) {
            this.confirmMessageHandler.confirmUnsavedChanges(changes);
        } else {
            // Invalid situation, should not come here
            console.error('Nothing changed');
        }
    }

public cancel(): void {
        let changes = this.getChanges();
        if (!isEmpty(changes)) {
            this.confirmMessageHandler.confirmUnsavedChanges(changes);
        } else {
            // Invalid situation, should not come here
            console.error('Nothing changed');
        }
    }
}

delOperate(user: User) {
    // init operation info
    let operMessage = new OperateInfo();
    operMessage.name = 'OPERATION.DELETE_USER';
    operMessage.data.id = user.user_id;
    operMessage.state = OperationState.progressing;
    operMessage.data.name = user.username;
    this.operationService.publishInfo(operMessage);

    if (this.isMySelf(user.user_id)) {
      this.translate.get('BATCH.DELETED_FAILURE').subscribe(res => {
        operateChanges(operMessage, OperationState.failure, res);
      });
      return null;
    }


    return this.userService.deleteUser(user.user_id).then(() => {
      this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => {

deleteVersion(version: HelmChartVersion): Observable {
    // init operation info
    let operateMsg = new OperateInfo();
    operateMsg.name = "OPERATION.DELETE_CHART_VERSION";
    operateMsg.data.id = version.digest;
    operateMsg.state = OperationState.progressing;
    operateMsg.data.name = `${version.name}:${version.version}`;
    this.operationService.publishInfo(operateMsg);

    return this.helmChartService
      .deleteChartVersion(this.projectName, this.chartName, version.version)
      .pipe(map(
        () => operateChanges(operateMsg, OperationState.success),
        catchError( error => {
          const message = errorHandFn(error);
          this.translateService.get(message).subscribe(res =>
            operateChanges(operateMsg, OperationState.failure, res)
          );
          return observableThrowError(message);

public handleError(error: any | string): void {
        if (!error) {
            return;
        }
        let msg = errorHandler(error);

        if (!(error.statusCode || error.status)) {
            this.msgService.announceMessage(500, msg, AlertType.DANGER);
        } else {
            let code = error.statusCode || error.status;
            if (code === httpStatusCode.Unauthorized) {
                this.msgService.announceAppLevelMessage(code, msg, AlertType.DANGER);
                // Session is invalid now, clare session cache
                this.session.clear();
            } else {
                this.msgService.announceMessage(code, msg, AlertType.DANGER);
            }
        }
    }

delOperate(user: User) {
    // init operation info
    let operMessage = new OperateInfo();
    operMessage.name = 'OPERATION.DELETE_USER';
    operMessage.data.id = user.user_id;
    operMessage.state = OperationState.progressing;
    operMessage.data.name = user.username;
    this.operationService.publishInfo(operMessage);

    if (this.isMySelf(user.user_id)) {
      this.translate.get('BATCH.DELETED_FAILURE').subscribe(res => {
        operateChanges(operMessage, OperationState.failure, res);
      });
      return null;
    }


    return this.userService.deleteUser(user.user_id).then(() => {
      this.translate.get('BATCH.DELETED_SUCCESS').subscribe(res => {
        operateChanges(operMessage, OperationState.success);
      });
    }).catch(error => {

deleteVersion(version: HelmChartVersion): Observable {
    // init operation info
    let operateMsg = new OperateInfo();
    operateMsg.name = "OPERATION.DELETE_CHART_VERSION";
    operateMsg.data.id = version.digest;
    operateMsg.state = OperationState.progressing;
    operateMsg.data.name = `${version.name}:${version.version}`;
    this.operationService.publishInfo(operateMsg);

    return this.helmChartService
      .deleteChartVersion(this.projectName, this.chartName, version.version)
      .pipe(map(
        () => operateChanges(operateMsg, OperationState.success),
        catchError( error => {
          const message = errorHandFn(error);
          this.translateService.get(message).subscribe(res =>
            operateChanges(operateMsg, OperationState.failure, res)
          );
          return observableThrowError(message);
        }
      )));
  }

err => {
          let errorMessageKey: string = errorHandFn(err);
          this.translateService
            .get(errorMessageKey)
            .subscribe(errorMessage => this.inlineAlert.showInlineError(errorMessage));
          this.added.emit(false);
        }
      );