Activities of "Mehmet"

Hi

validateOnSubmit is not work in your case. Because submit button and form are placed in different templates. You can use the methods below to achieve this:

Recommended:

<abp-modal [(visible)]="isModalVisible">
  <ng-template #abpHeader>
    <h3>Modal Title</h3>
  </ng-template>

  <ng-template #abpBody>
    <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
      <!-- form elements here -->

      <div class="text-right mt-2">
        <button type="button" class="btn btn-secondary mr-1" #abpClose>
          Close
        </button>

        <!-- make sure the button type is submit and placed between the <form> tag -->
        <abp-button iconClass="fa fa-check" (click)="save()" buttonType="submit">
            Save
        </abp-button>
      </div>
    </form>
  </ng-template>
</abp-modal>

Alternate:

<!-- HTML template -->
<abp-modal [(visible)]="isModalVisible">
  <ng-template #abpHeader>
    <h3>Modal Title</h3>
  </ng-template>

  <ng-template #abpBody>
     <!-- set a hash id as shown below (#myForm) -->
    <form #myForm [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
      <!-- form elements -->
    </form>
  </ng-template>

  <ng-template #abpFooter>
        <abp-button iconClass="fa fa-check" (click)="save()">
            Save
        </abp-button>
  </ng-template>
</abp-modal>

----------------

// ts

// catch the form element via ViewChild
@ViewChild('myForm', { static: false, read: ElementRef })
myFormRef: ElementRef<HTMLFormElement>;

save() {
if (this.form.invalid) {
// dispatch submit event of form element
this.myFormRef.nativeElement.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));

return;
}

// your save logic
}

Hi,

Actually I was thinking of informing you about this. Sorry, it got out of my mind.

We are still working on it. We encountered unexpected problems. So we couldn't release this feature with v4.2.

If we can solve the problems, I will inform you. Thanks in advance for your understanding.

I prepared a GitHub gist to share abp-error-rate-widget content with you: https://gist.github.com/mehmet-erim/9ed4cedff438a44c99b7405672626e74 I made minor changes for readability

Please see the host-dashboard.component to learn how to use this widget. If you have removed the host-dashboard.component from your app, you can create an app-pro template via ABP CLI.

Hi

We have used the chart.js library for widgets. The library is loaded lazy by ThemeSharedModule. You can subscribe to the chartJsLoaded$ stream to execute a callback when the library is loaded.

See an example: https://support.abp.io/QA/Questions/382/How-to-use-Chartjs-in-angular

You can use the chart.js widgets easily by following the its documentation.

Hi,

@abp/uppy package is created for MVC projects. This package only uses the uppy as a dependency. Has no extra feature.

Unfortunately, you can not use any service from the FileManagement module for now. We may add a utility service in the future to the FileManagement or CoreModule for uploading files easily.

You can use the uppy by following its documentation.

We have used the uppy in upload.service.ts like this:

import { ApiInterceptor } from '@abp/ng.core';
import { Uppy, UppyFile } from '@uppy/core';
import Dashboard from '@uppy/dashboard';
import XHRUpload from '@uppy/xhr-upload';
import { HttpXsrfTokenExtractor } from '@angular/common/http';
// ...

export class UploadService {
  uppy: Uppy;
  subscriptions: Subscription[] = [];

  onBeforeUpload = (files: { [key: string]: UppyFile<{}, {}> }) => {
    if (this.filesAlreadyChecked) {
      return true;
    }
    // you can check the files here
    return false;
  };

    cancelModal = () => {
    this.uppy.cancelAll();
    const dashboard = this.uppy.getPlugin('Dashboard') as Dashboard;
    if (dashboard.isModalOpen()) {
      dashboard.closeModal();
    }
  };

  constructor(
    private apiInterceptor: ApiInterceptor,
    private httpXsrfToken: HttpXsrfTokenExtractor,
  ) {}

initUppy({ trigger }) {
    const headers = this.apiInterceptor.getAdditionalHeaders();
    headers[this.headerName] = this.httpXsrfToken.getToken();
    this.uppy = new Uppy({
      onBeforeUpload: this.onBeforeUpload,
    })
      .use(Dashboard, {
        trigger,
        inline: false,
        target: 'body',
        metaFields: [
          {
            id: 'name',
            name: 'Name',
            placeholder: 'FileName',
          },
        ],
        browserBackButtonClose: true,
        proudlyDisplayPoweredByUppy: false,
        onRequestCloseModal: this.cancelModal,
        locale: {
          strings: {}, // translatations,
        },
      })
      .use(XHRUpload, {
        endpoint: this.getRawApiUrl(),
        formData: true,
        fieldName: 'file',
        headers,
      });

    this.subscriptions.push(
      fromEvent(this.uppy, 'file-added')
        .pipe(
          map((files) => files[0]),
          bufferTime(500),
          filter((args) => args.length > 0)
        )
        .subscribe(() => {
          // triggers when a file added
        })
    );

    this.subscriptions.push(
      fromEvent(this.uppy, 'complete').subscribe((_) => {
        // triggers when completed
      })
    );
  }
}

The code snippet above I shared is just an example. If you copy directly, it may not work.

You can call the initUppy method like this:

this.uploadService.initUppy({ trigger: `#upload-button-id` });

@volo/abp.ng.file-management package uses packages below as dependency:

"@uppy/core": "^1.13.2",
"@uppy/dashboard": "^1.12.6",
"@uppy/xhr-upload": "^1.6.4",

BTW, you can achieve that easily without using the uppy. Please visit the link below to learn file uploading in Angular: https://stackoverflow.com/a/47938117/9455416

Hi,

We have created an internal issue, and found source of the problem. It will be fixed with next release. Thanks for the reporting.

Assuming your problem has been resolved, I am closing the question. Plase let me know if any problems arrise.

Hi,

The problem has been resolved as of v4.0.2. Sorry for the late response and inconvenience.

React Native application does not trust the auto-generated .NET HTTPS certificate. You should use HTTP during development. This error might be related to that.

Please take a look at the Getting Started with the React Native again. Maybe you missed something.

Hello,

After successfully logging in, IdentityServer redirects to the Angular application with query parameters such as:

https://localhost:4200?code=0C8C15544759F0A0DBA87B96402429511AF79BDFAD3461ADDA4B37AADBA25DA4&scope=openid%20AbpCommercialDemo&state=YUJLMWhlaEx6SG9saVFrRzQ0YWpsUEJ4eFdqSGxvaUdXdTVkS2VaXzM3ckd6&session_state=kVJPuS3Fa7ZtS8IwiyENThPSppljkE7-2NDoBi5LQfs.FD923014BDF36DBC68E30B148A0169C4

The angular-oauth2-oidc package installed in Angular UI use these query params to get access token by performing an HTTP call to the IdentityServer.

If you redirect to Angular without the query params, the app cannot get an access token.