Activities of "rvanwoezik"

Thnx!

So if i want to upload Video to Vimeo i should use the controllers, to list the vimeo video's i should use Appservices Thanks!

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;

            });
    }

Found it! So stupid

<image-cropper
                        [imageChangedEvent]="imageChangedEvent"
                        [maintainAspectRatio]="true"
                        [aspectRatio]="4 / 4"
                        [resizeToWidth]="128"
                        format="png"
                        (imageCroppedFile)="imageCroppedFile($event)"
                    ></image-cropper>

(imageCroppedFile)="imageCroppedFile($event)" should be (imageCropped)="imageCroppedFile($event)"

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">&times;</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

I'm getting old, Alzheimer Light. Thanks!

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

I have the same issue

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

here is my calendar.component.less

`body .fc .fc-event { background-color: #ffb822 !important; }

.fc-title { color: #ffffff !important; }`