Hi,
Is there a way to include the standard looks and designs for the primeng functionality into the angular core project?
I am trying to use some of the standard functionality of the primeng tables suchs as: ColGroup <a class="postlink" href="https://www.primefaces.org/primeng/#/table/colgroup">https://www.primefaces.org/primeng/#/table/colgroup</a>
However as soon as i try to use this it appears exceedingly ugly and sometimes the overall structures are ruined and things get malaligned.
I'm not sure how to handle the CSS regarding the ASPNet Zero template designs.
Any assistance will be greatly appreciated.
Regards, Gideon Badenhorst
Hi,
I am experiencing a weird issue in the template when generating functionality with Rad Tool. (I don't think the issue is Rad related though)
After i generate my entity and run the project i get this error:
ERROR in src/app/main/BusinessPartners/businessPartners/create-or-edit-businessPartner-modal.component.ts(52,6): error TS2339: Property 'finally' does not exist on type 'Observable<void>'. src/app/main/ProjectTasks/projectTasks/create-or-edit-projectTask-modal.component.ts(57,6): error TS2339: Property 'finally' does not exist on type 'Observable<void>'. src/app/main/Projects/projects/create-or-edit-project-modal.component.ts(57,6): error TS2339: Property 'finally' does not exist on type 'Observable<void>'.
When i comment out:
//.finally(() => { this.saving = false; })
Everything runs fine.
The stranger part comes in with the objects in typescript. When i open the CreateOrEdit ts file, i can barely "use" the objects without referencing back to the back end code. An example of this issue would be: I generated the object as FullAudited however the audit related properties such as Id is missing. Attached screenshot as example :
[attachment=0:2qv405h4]image1.PNG[/attachment:2qv405h4]
This is the case for quite a few properties, some strings are shown as booleans however when inspecting it it is created as a string(which is correct) by nswag.
I am not 100% sure how to explain some of these property related issues.
Is there some updates I need to run for some of the software since 5.4.1 or is it an issue currently in the template?
Thanks,
Gideon
Thank you Yekalkan
The problem only occurs when i have navigation properties included it seems. normal entities with only primitive properties work as should.
sure, here it is:
That is what I don't understand, everything looks fine and it is an extremely weird scenario where I can't find where the data mappings go wrong.
i have about 4 entities if i remember correctly which is currently doing this.
<div [@routerTransition]> <div class="m-subheader"> <div class="d-flex align-items-center"> <div class="mr-auto col-xs-6"> <h3 class="m-subheader__title m-subheader__title--separator"> <span>{{l("ServiceCallTasks")}}</span> </h3> <span class="m-section__sub"> {{l("ServiceCallTasksHeaderInfo")}} </span> </div> <div class="col-xs-6 text-right"> <button (click)="exportToExcel()" class="btn btn-outline-success"><i class="fa fa-file-excel-o"></i> {{l("ExportToExcel")}}</button> <button *ngIf="isGranted('Pages.ServiceCallTasks.Create')" (click)="createServiceCallTask()" class="btn btn-primary blue"><i class="fa fa-plus"></i> {{l("CreateNewServiceCallTask")}}</button> </div> </div> </div> <div class="m-content"> <div class="m-portlet m-portlet--mobile"> <div class="m-portlet__body">
<form class="horizontal-form" autocomplete="off">
<div class="m-form m-form--label-align-right">
<div class="row align-items-center m--margin-bottom-10">
<div class="col-xl-12">
<div class="form-group m-form__group align-items-center">
<div class="input-group">
<input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')" type="text">
<span class="input-group-btn">
<button (click)="getServiceCallTasks()" class="btn btn-primary" type="submit"><i class="flaticon-search-1"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row m--margin-bottom-10" [hidden]="!advancedFiltersAreShown">
<div class="col-md-12">
<div class="m-separator m-separator--dashed"></div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="form-group">
<div class="m-stack__item">
<label>{{l("Task")}}</label>
<div class="m-separator m-separator--dashed"></div>
<input type="text" class="form-control" name="taskFilter" [(ngModel)]="taskFilter">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="form-group">
<div class="m-stack__item">
<label>{{l("Details")}}</label>
<div class="m-separator m-separator--dashed"></div>
<input type="text" class="form-control" name="detailsFilter" [(ngModel)]="detailsFilter">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="form-group">
<div class="m-stack__item">
<label>{{l("MinMax")}} {{l("HoursRequired")}}</label>
<div class="m-separator m-separator--dashed"></div>
<input type="number" class="form-control" [(ngModel)]="minHoursRequiredFilter" placeholder="{{l('MinValue')}}" name="minHoursRequiredFilter" />
</div>
<div class="m-stack__item">
<input type="number" class="form-control" [(ngModel)]="maxHoursRequiredFilter" placeholder="{{l('MaxValue')}}" name="maxHoursRequiredFilter" />
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="m-stack__item">
<label for="CompletedFilterSelect">{{l("Completed")}}</label>
<div class="m-separator m-separator--dashed"></div>
<select class="form-control" name="CompletedFilter" id="CompletedFilterSelect" [(ngModel)]="completedFilter">
<option value="-1">{{l("All")}}</option>
<option value="0">{{l("False")}}</option>
<option value="1">{{l("True")}}</option>
</select>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="form-group">
<div class="m-stack__item">
<label>({{l("ServiceCall")}}) {{l("Subject")}}</label>
<div class="m-separator m-separator--dashed"></div>
<input type="text" class="form-control" name="serviceCallSubjectFilter" [(ngModel)]="serviceCallSubjectFilter">
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="m-stack m-stack--ver m-stack--general m-stack--demo">
<div class="form-group">
<div class="m-stack__item">
<label>({{l("ServiceCallSchedule")}}) {{l("Subject")}}</label>
<div class="m-separator m-separator--dashed"></div>
<input type="text" class="form-control" name="serviceCallScheduleSubjectFilter" [(ngModel)]="serviceCallScheduleSubjectFilter">
</div>
</div>
</div>
</div>
</div>
<div class="row margin-bottom-10">
<div class="col-sm-12">
<span class="clickable-item text-muted" *ngIf="!advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-down"></i> {{l("ShowAdvancedFilters")}}</span>
<span class="clickable-item text-muted" *ngIf="advancedFiltersAreShown" (click)="advancedFiltersAreShown=!advancedFiltersAreShown"><i class="fa fa-angle-up"></i> {{l("HideAdvancedFilters")}}</span>
</div>
</div>
</div>
</form>
<div class="row align-items-center">
<div class="primeng-datatable-container"
[busyIf]="primengTableHelper.isLoading">
<p-table #dataTable
(onLazyLoad)="getServiceCallTasks($event)"
[value]="primengTableHelper.records"
rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
[paginator]="false"
[lazy]="true"
[scrollable]="true"
ScrollWidth="100%"
[responsive]="primengTableHelper.isResponsive"
[resizableColumns]="primengTableHelper.resizableColumns">
<ng-template pTemplate="header">
<tr>
<th style="width: 130px" [hidden]="!isGrantedAny('Pages.ServiceCallTasks.Edit', 'Pages.ServiceCallTasks.Delete')">{{l('Actions')}}</th>
<th style="width: 150px" pSortableColumn="serviceCallTask.task">
{{l('Task')}}
<p-sortIcon field="serviceCallTask.task"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="serviceCallTask.details">
{{l('Details')}}
<p-sortIcon field="serviceCallTask.details"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="serviceCallTask.hoursRequired">
{{l('HoursRequired')}}
<p-sortIcon field="serviceCallTask.hoursRequired"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="serviceCallTask.completed">
{{l('Completed')}}
<p-sortIcon field="serviceCallTask.completed"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="serviceCallSubject">
{{l('Subject')}}
<p-sortIcon field="serviceCallSubject"></p-sortIcon>
</th>
<th style="width: 150px" pSortableColumn="serviceCallScheduleSubject">
{{l('Subject')}}
<p-sortIcon field="serviceCallScheduleSubject"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-record="$implicit">
<tr>
<td style="width: 130px"
[hidden]="!isGrantedAny('Pages.ServiceCallTasks.Edit', 'Pages.ServiceCallTasks.Delete')">
<div class="btn-group dropdown" normalizePosition>
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Actions")}}
</button>
<ul class="dropdown-menu">
<li>
<a
(click)="viewServiceCallTaskModal.show(record)">{{l('View')}}</a>
</li>
<li>
<a *ngIf="permission.isGranted('Pages.ServiceCallTasks.Edit')"
(click)="createOrEditServiceCallTaskModal.show(record.serviceCallTask.id)">{{l('Edit')}}</a>
</li>
<li>
<a *ngIf="permission.isGranted('Pages.ServiceCallTasks.Delete')"
(click)="deleteServiceCallTask(record.serviceCallTask)">{{l('Delete')}}</a>
</li>
</ul>
</div>
</td>
<td style="width:150px">{{record.serviceCallSubject}}</td>
<td style="width:150px">{{record.serviceCallScheduleSubject}}</td>
<td style="width:150px">{{record.serviceCallTask.task}}</td>
<td style="width:150px">{{record.serviceCallTask.details}}</td>
<td style="width:150px">{{record.serviceCallTask.hoursRequired}}</td>
<td style="width:150px">
<div *ngIf="record.serviceCallTask.completed" class="text-center"><i class="fa fa-check-circle m--font-success" title="True"></i></div>
<div *ngIf="!record.serviceCallTask.completed" class="text-center"><i class="fa fa-times-circle" title="False"></i></div>
</td>
</tr>
</ng-template>
</p-table>
<div class="primeng-paging-container">
<p-paginator rows="{{primengTableHelper.defaultRecordsCountPerPage}}"
#paginator
(onPageChange)="getServiceCallTasks($event)"
[totalRecords]="primengTableHelper.totalRecordsCount"
[rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
</p-paginator>
<span class="total-records-count">
{{l('TotalRecordsCount', primengTableHelper.totalRecordsCount)}}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<createOrEditServiceCallTaskModal #createOrEditServiceCallTaskModal (modalSave)="getServiceCallTasks()"></createOrEditServiceCallTaskModal>
<viewServiceCallTaskModal #viewServiceCallTaskModal></viewServiceCallTaskModal>
</div>
The entity itself is fine by the looks of it and the updating and viewing handles the data correctly. The only weird part is the grid.
Yes, the entity loads correctly.
The bindings in the html side looks fine and i can't really see anything wrong on the componen.ts either.
Here is the component.ts:
import { Component, Injector, ViewEncapsulation, ViewChild } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Http } from '@angular/http'; import { ServiceCallTasksServiceProxy, ServiceCallTaskDto } from '@shared/service-proxies/service-proxies'; import { NotifyService } from '@abp/notify/notify.service'; import { AppComponentBase } from '@shared/common/app-component-base'; import { TokenAuthServiceProxy } from '@shared/service-proxies/service-proxies'; import { CreateOrEditServiceCallTaskModalComponent } from './create-or-edit-serviceCallTask-modal.component'; import { ViewServiceCallTaskModalComponent } from './view-serviceCallTask-modal.component'; import { appModuleAnimation } from '@shared/animations/routerTransition'; import { Table } from 'primeng/components/table/table'; import { Paginator } from 'primeng/components/paginator/paginator'; import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent'; import { FileDownloadService } from '@shared/utils/file-download.service'; import * as moment from 'moment';
@Component({ templateUrl: './serviceCallTasks.component.html', encapsulation: ViewEncapsulation.None, animations: [appModuleAnimation()] }) export class ServiceCallTasksComponent extends AppComponentBase {
@ViewChild('createOrEditServiceCallTaskModal') createOrEditServiceCallTaskModal: CreateOrEditServiceCallTaskModalComponent;
@ViewChild('viewServiceCallTaskModalComponent') viewServiceCallTaskModal: ViewServiceCallTaskModalComponent;
@ViewChild('dataTable') dataTable: Table;
@ViewChild('paginator') paginator: Paginator;
advancedFiltersAreShown = false;
filterText = '';
taskFilter = '';
detailsFilter = '';
maxHoursRequiredFilter : number;
maxHoursRequiredFilterEmpty : number;
minHoursRequiredFilter : number;
minHoursRequiredFilterEmpty : number;
completedFilter = -1;
serviceCallSubjectFilter = '';
serviceCallScheduleSubjectFilter = '';
constructor(
injector: Injector,
private _http: Http,
private _serviceCallTasksServiceProxy: ServiceCallTasksServiceProxy,
private _notifyService: NotifyService,
private _tokenAuth: TokenAuthServiceProxy,
private _activatedRoute: ActivatedRoute,
private _fileDownloadService: FileDownloadService
) {
super(injector);
}
getServiceCallTasks(event?: LazyLoadEvent) {
if (this.primengTableHelper.shouldResetPaging(event)) {
this.paginator.changePage(0);
return;
}
this.primengTableHelper.showLoadingIndicator();
this._serviceCallTasksServiceProxy.getAll(
this.filterText,
this.taskFilter,
this.detailsFilter,
this.maxHoursRequiredFilter == null ? this.maxHoursRequiredFilterEmpty: this.maxHoursRequiredFilter,
this.minHoursRequiredFilter == null ? this.minHoursRequiredFilterEmpty: this.minHoursRequiredFilter,
this.completedFilter,
this.serviceCallSubjectFilter,
this.serviceCallScheduleSubjectFilter,
this.primengTableHelper.getSorting(this.dataTable),
this.primengTableHelper.getSkipCount(this.paginator, event),
this.primengTableHelper.getMaxResultCount(this.paginator, event)
).subscribe(result => {
this.primengTableHelper.totalRecordsCount = result.totalCount;
this.primengTableHelper.records = result.items;
this.primengTableHelper.hideLoadingIndicator();
});
}
reloadPage(): void {
this.paginator.changePage(this.paginator.getPage());
}
createServiceCallTask(): void {
this.createOrEditServiceCallTaskModal.show();
}
deleteServiceCallTask(serviceCallTask: ServiceCallTaskDto): void {
this.message.confirm(
'',
(isConfirmed) => {
if (isConfirmed) {
this._serviceCallTasksServiceProxy.delete(serviceCallTask.id)
.subscribe(() => {
this.reloadPage();
this.notify.success(this.l('SuccessfullyDeleted'));
});
}
}
);
}
exportToExcel(): void {
this._serviceCallTasksServiceProxy.getServiceCallTasksToExcel(
this.filterText,
this.taskFilter,
this.detailsFilter,
this.maxHoursRequiredFilter == null ? this.maxHoursRequiredFilterEmpty: this.maxHoursRequiredFilter,
this.minHoursRequiredFilter == null ? this.minHoursRequiredFilterEmpty: this.minHoursRequiredFilter,
this.completedFilter,
this.serviceCallSubjectFilter,
this.serviceCallScheduleSubjectFilter,
)
.subscribe(result => {
this._fileDownloadService.downloadTempFile(result);
});
}
}
Hi,
Just want to start this off with: well done with the new Rad Tool features, they are extremely helpful and will make life so much easier with the generation from existing tables especially. Thanks!
I am not sure if this has been mention before by someone.
When an entity is generated it is correct. however, when you load the entity again and regenerate it, it seems to mess up the bindings on the grids.
[attachment=0:53psbal7]ServiceCallTaskFieldsSwappedAroundAfterRegeneration.PNG[/attachment:53psbal7]
Example of fields in the grid that is mixed up.
Task is correct
Details -> Text under completed(Supposed to be a bool)
Hours Required -> Numbers under subject
Completed -> Under 2nd subject.
I am using Core + Angular 5.4.1
Thanks,
Gideon Badenhorst
Hi,
This is more of just an information question on future RAD Tool functionality.
Will the RAD Tool in the future include File Upload and File Download Lookup generation?
It will be quite a handy feature to have: CreateOrEdit(Upload component for anyfiles as basic - users can later then obviously modify code as they want) View(Download files option) Delete(Option to delete file uploaded)
Thanks! Gideon BAdenhorst
Hi @yekalkan
Thank you, was a misunderstanding on my side (Lack of knowledge relating to swagger).
I ended up moving Lookup/Link DTOs which are used more than once to a shared folder and just removing the newly created ones as suggested.
Love the RAD tool. The linked entities how it is implemented now with the RAD tool is saving me sooooo much time.