@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
205 lines (199 loc) • 7.22 kB
JavaScript
import { HttpClient, httpResource } from '@angular/common/http';
import * as i0 from '@angular/core';
import { inject, Injector, signal, model, computed, linkedSignal, input, effect, Directive } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { AppConfig } from '@koalarx/ui/core/config';
import { first } from 'rxjs/internal/operators/first';
import { map } from 'rxjs/internal/operators/map';
class HttpBase {
resource;
appConfig = inject(AppConfig);
injector = inject(Injector);
http = inject(HttpClient);
url;
hostApi;
constructor(resource, hostApi) {
this.resource = resource;
this.hostApi = hostApi || this.appConfig.hostApi || '';
this.url = `${this.hostApi}/${this.resource}`;
}
post(data, endpoint = '') {
return this.http.post(`${this.url}${endpoint}`, data).pipe(first());
}
put(id, data) {
return this.http.put(`${this.url}/${id}`, data).pipe(first());
}
patch(id, data) {
return this.http.patch(`${this.url}/${id}`, data).pipe(first());
}
delete(id) {
return this.http.delete(`${this.url}/${id}`).pipe(first());
}
getMany(query, endpoint = '') {
return this.http.get(`${this.url}${endpoint}`, {
params: query,
});
}
getById(id) {
return this.http.get(`${this.url}/${id}`);
}
getManyWithResource(query, { endpoint = '', mapOption, } = {}) {
return httpResource(() => {
return {
url: `${this.url}${endpoint}`,
params: query(),
};
}, {
parse: mapOption,
});
}
getByIdWithResource(id, endpoint = ':id', mapResponse) {
return httpResource(() => {
const resourceId = id();
if (!resourceId) {
return undefined;
}
return `${this.url}/${endpoint.replace(':id', resourceId)}`;
}, {
parse: mapResponse,
});
}
getByOneWithResource(endpoint, params, mapResponse) {
return httpResource(() => {
const resourceUrl = endpoint();
if (!resourceUrl) {
return undefined;
}
return {
url: `${this.url}/${resourceUrl}`,
params: params ? params() : undefined,
};
}, {
parse: mapResponse,
});
}
getManyForSelector(query, mapOption) {
return rxResource({
defaultValue: [],
params: () => (query instanceof Function ? query() : query),
stream: (data) => this.getMany(data.params).pipe(map((response) => response.items.map((item) => ({
...mapOption(item),
data: item,
})))),
});
}
}
class ListBase {
componentFilter;
reloading = false;
currentPaginationType = 'paginator';
resourceRef;
limitPage = signal(30);
page = signal(1);
filter = signal({});
resource;
totalItemsOnPage = signal(0);
totalItems = signal(0);
list = signal([]);
sortFilter = signal(null);
paginationType = model('paginator');
withPagination = computed(() => {
this.currentPaginationType = this.paginationType();
return this.currentPaginationType === 'paginator';
});
datatableConfig = linkedSignal(() => ({
currentPage: this.page(),
totalItems: this.totalItems(),
totalItemsOnPage: this.totalItemsOnPage(),
currentPageSize: this.limitPage(),
isLoading: this.resourceRef.isLoading(),
hasError: !!this.resourceRef.error(),
}));
queryParams = computed(() => ({
page: this.page(),
limit: this.limitPage(),
...(this.sortFilter() ?? {}),
...this.filter(),
}));
reload = input(false);
constructor(
// eslint-disable-next-line @angular-eslint/prefer-inject
resource,
// eslint-disable-next-line @angular-eslint/prefer-inject
componentFilter) {
this.componentFilter = componentFilter;
this.resource = inject(resource);
this.resourceRef = this.resource.getManyWithResource(this.queryParams);
effect(() => {
this.filter();
this.page.set(1);
});
effect(() => {
const queryParams = this.queryParams();
if (queryParams.page === 1 && !this.reloading) {
this.reloading = true;
return;
}
});
effect(() => {
const withPagination = this.currentPaginationType === 'paginator';
const result = this.resourceRef.value();
if (!withPagination && !this.reloading) {
if (result) {
this.list.update((current) => [...current, ...result.items]);
this.totalItemsOnPage.update((current) => current + result.items.length);
this.totalItems.set(result.count);
}
this.reloading = false;
return;
}
if (!result) {
this.list.set([]);
this.totalItemsOnPage.set(0);
this.totalItems.set(0);
this.reloading = false;
return;
}
this.list.set(result.items);
this.totalItemsOnPage.set(result.items.length);
this.totalItems.set(result.count);
this.reloading = false;
});
effect(() => {
if (this.reload()) {
this.reloadList();
}
});
}
sort(sortFilter) {
this.sortFilter.set(sortFilter);
}
reloadList() {
this.reloading = true;
this.list.set([]);
this.totalItemsOnPage.set(0);
this.totalItems.set(0);
this.page.set(1);
this.resourceRef.reload();
}
loadMore() {
this.page.update((current) => current + 1);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListBase, deps: [{ token: i0.Type }, { token: i0.Type }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: ListBase, isStandalone: true, inputs: { paginationType: { classPropertyName: "paginationType", publicName: "paginationType", isSignal: true, isRequired: false, transformFunction: null }, reload: { classPropertyName: "reload", publicName: "reload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { paginationType: "paginationTypeChange" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ListBase, decorators: [{
type: Directive
}], ctorParameters: () => [{ type: i0.Type }, { type: i0.Type }] });
class PageBase {
reload = signal(false);
reloadList() {
this.reload.set(true);
setTimeout(() => this.reload.set(false));
}
}
/**
* Generated bundle index. Do not edit.
*/
export { HttpBase, ListBase, PageBase };
//# sourceMappingURL=koalarx-ui-core-base.mjs.map