ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
When creating a new paid edition i want to have only a montly or yearly subscription Edition Management
But i can't save the new edition without filling in daily and weekly price
When testing stripe webhooks I get the following error in Stripe: 405 (Method Not Allowed) UnsupportedHttpVerb
In stripe i have created an Endpoint to my angular client: https://fitpeopleusa.azureedge.net/Stripe/WebHooks
In my Appsettings.json i have created the required keys
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
Hi, I need the functionality to have a subscription per user instead of per tenant.
Can you point me in the right direction, architect wise, to create such a functionality?
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
The paginator of the Metronics Theme looks like this:
Metronics sample
The paginator component from PrimeNG in aspnetzero.com looks like this:
So is there a css hero who can help me? Should i add a .less file?
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
I have added a pipe: 'vimeo-url.pipe.ts' in the folder Web.Host\src\shared\common\pipes
import { Injector, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'vimeoUrl'
})
export class VimeoUrlPipe implements PipeTransform {
_sanitizer: DomSanitizer;
constructor(injector: Injector) {
this._sanitizer = injector.get(DomSanitizer);
}
transform(value: any, args?: any): any {
let url = value.replace("vimeo.com/", "player.vimeo.com/video/");
return this._sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
In the utils.module.ts i'm importing this pipe:
import { VimeoUrlPipe } from '@shared/common/pipes/vimeo-url.pipe';
I've add it to the declarations in utils.module.ts and also to the exports
The admin-shared.module.ts imports the utils.module.ts And my courses.module.ts imports the admin-shared.module.ts
When running i get the error "No pipe found with the name 'vimeoUrl'
What am i missing? What is the correct way to add a new pipe?
Thanks in advance
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
One of the many reasons why I use ASP.NET zero is the solid architecture of the software, as i am not an software architect.
We want to implement Vimeo Videos in the ANZ platform and i will use the VimeoDotNet wrapper for this. I want some advice what is the correct architecture way to do this?
Do i add a VimeoVideoContollerBase to the web.core project? or do i add a VimeoVideoController to the web.host project? How to implement it in the Application project?
Please give me some guidlines on how to do this the ASP.NET Zero way
Details i will try to figure out myself
Are there any other ANZ users who already have this implemented?
Kind regards, Rene van Woezik
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
I want to bind the style background image to angular model by:
<div class="image-input image-input-empty image-input-outline" id="kt_user_edit_avatar" [style.background-image]="'url(' + course.courseImageUrl + ')'">
But it doesn't show the image, when i use:
<img [src]="course.courseImageUrl"/> the image is visible
Image is set by this:
setCourseImageUrl(course: CourseListDto): void {
this._localStorageService.getItem(AppConsts.authorization.encrptedAuthTokenName,
function(err, value) {
let courseImageUrl = AppConsts.remoteServiceBaseUrl +
'/Course/GetCourseImageByCourse?courseId=' +
course.id +
'&' +
AppConsts.authorization.encrptedAuthTokenName +
'=' +
encodeURIComponent(value.token);
(course as any).courseImageUrl = courseImageUrl;
});
}
ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0
I have an entity named Course, Course has an Image I copied the functionality from change-profile-picture
Here is my change-course-image-modal.ts
import { IAjaxResponse, TokenService} from 'abp-ng2-module';
import { Component, Injector, ViewChild } from '@angular/core';
import { AppConsts } from '@shared/AppConsts';
import { AppComponentBase } from '@shared/common/app-component-base';
import { CourseServiceProxy, UpdateCourseImageInput } from '@shared/service-proxies/service-proxies';
import { FileUploader, FileUploaderOptions, FileItem } from 'ng2-file-upload';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { finalize } from 'rxjs/operators';
import {ImageCroppedEvent, base64ToFile} from 'ngx-image-cropper';
@Component({
selector: 'changeCourseImageModal',
templateUrl: './change-course-image-modal.component.html'
})
export class ChangeCourseImageModalComponent extends AppComponentBase {
@ViewChild('changeCourseImageModal', {static: true}) modal: ModalDirective;
courseId = 0;
public active = false;
public uploader: FileUploader;
public temporaryPictureUrl: string;
public saving = false;
public maxCourseImageBytesUserFriendlyValue = 5;
private temporaryPictureFileName: string;
private _uploaderOptions: FileUploaderOptions = {};
imageChangedEvent: any = '';
constructor(
injector: Injector,
private _courseService: CourseServiceProxy,
private _tokenService: TokenService
) {
super(injector);
}
initializeModal(courseId: number): void {
this.active = true;
this.temporaryPictureUrl = '';
this.temporaryPictureFileName = '';
this.initFileUploader();
this.courseId = courseId;
}
show(courseId?: number): void {
this.initializeModal(courseId);
this.modal.show();
}
close(): void {
this.active = false;
this.imageChangedEvent = '';
this.uploader.clearQueue();
this.modal.hide();
}
fileChangeEvent(event: any): void {
if (event.target.files[0].size > 5242880) { //5MB
this.message.warn(this.l('CourseImage_Warn_SizeLimit', this.maxCourseImageBytesUserFriendlyValue));
return;
}
this.imageChangedEvent = event;
}
imageCroppedFile(event: ImageCroppedEvent) {
this.uploader.clearQueue();
this.uploader.addToQueue([<File>base64ToFile(event.base64)]);
}
initFileUploader(): void {
this.uploader = new FileUploader({ url: AppConsts.remoteServiceBaseUrl + '/Course/UploadCourseImage' });
this._uploaderOptions.autoUpload = false;
this._uploaderOptions.authToken = 'Bearer ' + this._tokenService.getToken();
this._uploaderOptions.removeAfterUpload = true;
this.uploader.onAfterAddingFile = (file) => {
file.withCredentials = false;
};
this.uploader.onBuildItemForm = (fileItem: FileItem, form: any) => {
form.append('FileType', fileItem.file.type);
form.append('FileName', 'CourseImage');
form.append('FileToken', this.guid());
form.append('CourseId', this.courseId);
};
this.uploader.onSuccessItem = (item, response, status) => {
const resp = <IAjaxResponse>JSON.parse(response);
if (resp.success) {
this.updateCourseImage(resp.result.fileToken);
} else {
this.message.error(resp.error.message);
}
};
this.uploader.setOptions(this._uploaderOptions);
}
updateCourseImage(fileToken: string): void {
const input = new UpdateCourseImageInput();
input.fileToken = fileToken;
input.x = 0;
input.y = 0;
input.width = 0;
input.height = 0;
input.courseId = this.courseId;
this.saving = true;
this._courseService.updateCourseImage(input)
.pipe(finalize(() => { this.saving = false; }))
.subscribe(() => {
abp.event.trigger('courseImageChanged');
this.close();
});
}
guid(): string {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
save(): void {
this.uploader.uploadAll();
}
}
And here is my change-course-modal.html
<div appBsModal #changeCourseImageModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" [config]="{backdrop: 'static'}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form *ngIf="active" #changeCourseImageModalForm="ngForm" (ngSubmit)="save()">
<div class="modal-header">
<h5 class="modal-title">
<span>{{"ChangeProductPicture" | localize}}</span>
</h5>
<button type="button" class="close" [attr.aria-label]="l('Close')" (click)="close()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" (change)="fileChangeEvent($event)" />
<span class="help-block m-b-none">{{"CourseImage_Change_Info" | localize:maxCourseImageBytesUserFriendlyValue}}</span>
</div>
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 4"
[resizeToWidth]="128"
format="png"
(imageCroppedFile)="imageCroppedFile($event)"
></image-cropper>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()" [disabled]="saving">{{"Cancel" | localize}}</button>
<button type="submit" class="btn btn-primary" [disabled]="!changeCourseImageModalForm.form.valid || saving"><i class="fa fa-save"></i> <span>{{"Save" | localize}}</span></button>
</div>
</form>
</div>
</div>
</div>
Problem is that when pressing save on the modal after image resize nothing happens,
save(): void {
this.uploader.uploadAll();
}
This gets fired but it doesn't do anyting, i'm not getting any errors. Banging my head on the keyboard several times but without result.
Please advice
ASP.NET CORE & Angular (single solution) .NET Core 3.1 v9.0.0
Hi, tryin to add new page to main module
`<div [@routerTransition]>
</sub-header>
<div [class]="containerClass">
</div>
</div>
In the ts file i have added:
import { AppComponentBase } from '@shared/common/app-component-base';
when using npm start i get the error: error NG8001: 'sub-header' is not a known element:
What am i missing, must be something stupid, existing pages in the main module with sub-headers are working.
Thanks in advance
Hi i am migrating my app to the latest 8.9.2 and i am getting No pipe found with name 'localize' error
What has changed?
Thanks in advance, Rene