@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
181 lines (174 loc) • 22.7 kB
JavaScript
import * as i0 from '@angular/core';
import { Pipe, input, output, Component, signal, computed, inject, forwardRef } from '@angular/core';
import { ApplicationAvailability, ApplicationService } from '@c8y/client';
import { ListGroupComponent, ListItemComponent, ListItemBodyComponent, AppIconComponent, IconDirective, C8yTranslatePipe, HumanizeAppNamePipe, C8yTranslateDirective, AppStateService } from '@c8y/ngx-components';
import { AsyncPipe } from '@angular/common';
import { PopoverDirective } from 'ngx-bootstrap/popover';
import { gettext } from '@c8y/ngx-components/gettext';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
class AlreadyInArrayPipe {
transform(application, appIdsOfGlobalRoles) {
if (!application || !appIdsOfGlobalRoles || Array.isArray(appIdsOfGlobalRoles) === false) {
return false;
}
return appIdsOfGlobalRoles.includes(application.id);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlreadyInArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: AlreadyInArrayPipe, isStandalone: true, name: "alreadyInArray" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: AlreadyInArrayPipe, decorators: [{
type: Pipe,
args: [{
name: 'alreadyInArray'
}]
}] });
class NotAvailableInOwnerPipe {
transform(application, ownerUser) {
const ownerApps = ownerUser?.applications;
if (!ownerApps) {
return false;
}
const isAvailable = ownerApps.some(app => app.id === application.id);
return !isAvailable;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotAvailableInOwnerPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.19", ngImport: i0, type: NotAvailableInOwnerPipe, isStandalone: true, name: "notAvailableInOwner" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: NotAvailableInOwnerPipe, decorators: [{
type: Pipe,
args: [{
name: 'notAvailableInOwner'
}]
}] });
class ApplicationAccessSubListComponent {
constructor() {
this.applications = input(...(ngDevMode ? [undefined, { debugName: "applications" }] : []));
this.legend = input('', ...(ngDevMode ? [{ debugName: "legend" }] : []));
this.legendHelpText = input('', ...(ngDevMode ? [{ debugName: "legendHelpText" }] : []));
this.noOwnerAvailable = input(false, ...(ngDevMode ? [{ debugName: "noOwnerAvailable" }] : []));
this.appIdsOfGlobalRoles = input([], ...(ngDevMode ? [{ debugName: "appIdsOfGlobalRoles" }] : []));
this.disabledEdit = input(false, ...(ngDevMode ? [{ debugName: "disabledEdit" }] : []));
this.userWithOwner = input(null, ...(ngDevMode ? [{ debugName: "userWithOwner" }] : []));
this.selectedAppIds = input([], ...(ngDevMode ? [{ debugName: "selectedAppIds" }] : []));
this.allSelected = input(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
this.accessToggled = output();
this.noOwnerMessage = gettext(`You don't have the permission required to manage application access for {{ user.userName }}.`);
}
toggleAccess(application) {
this.accessToggled.emit(application);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ApplicationAccessSubListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.19", type: ApplicationAccessSubListComponent, isStandalone: true, selector: "c8y-application-access-sub-list", inputs: { applications: { classPropertyName: "applications", publicName: "applications", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, legendHelpText: { classPropertyName: "legendHelpText", publicName: "legendHelpText", isSignal: true, isRequired: false, transformFunction: null }, noOwnerAvailable: { classPropertyName: "noOwnerAvailable", publicName: "noOwnerAvailable", isSignal: true, isRequired: false, transformFunction: null }, appIdsOfGlobalRoles: { classPropertyName: "appIdsOfGlobalRoles", publicName: "appIdsOfGlobalRoles", isSignal: true, isRequired: false, transformFunction: null }, disabledEdit: { classPropertyName: "disabledEdit", publicName: "disabledEdit", isSignal: true, isRequired: false, transformFunction: null }, userWithOwner: { classPropertyName: "userWithOwner", publicName: "userWithOwner", isSignal: true, isRequired: false, transformFunction: null }, selectedAppIds: { classPropertyName: "selectedAppIds", publicName: "selectedAppIds", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { accessToggled: "accessToggled" }, ngImport: i0, template: "@if (applications().length) {\n <div class=\"legend form-block\">\n {{ legend() | translate }}\n @if (legendHelpText()) {\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpText() | translate\"\n type=\"button\"\n [triggers]=\"'focus'\"\n ></button>\n }\n </div>\n\n @if (disabledEdit() && noOwnerAvailable()) {\n <div class=\"alert alert-info\">\n {{ noOwnerMessage | translate: { 'user.userName': userWithOwner()?.user.userName } }}\n </div>\n }\n\n <c8y-list-group>\n @for (application of applications(); track application.id) {\n @let applicationAlreadyInappIdsOfGlobalRoles =\n application | alreadyInArray: appIdsOfGlobalRoles();\n @let applicationName = application | humanizeAppName | async;\n <c8y-list-item>\n <c8y-list-item-body>\n <div class=\"d-flex\">\n <label class=\"c8y-checkbox a-i-center\">\n <input\n [attr.aria-label]=\"applicationName\"\n type=\"checkbox\"\n [checked]=\"\n allSelected() ||\n (application | alreadyInArray: selectedAppIds()) ||\n applicationAlreadyInappIdsOfGlobalRoles\n \"\n (click)=\"toggleAccess(application)\"\n [disabled]=\"disabledEdit() || applicationAlreadyInappIdsOfGlobalRoles\"\n />\n <span></span>\n <span class=\"icon-36 l-h-1 p-l-8\">\n <c8y-app-icon [app]=\"application\"></c8y-app-icon>\n </span>\n <span\n class=\"m-l-8 text-normal l-h-1\"\n [title]=\"applicationName\"\n >\n {{ applicationName }}\n <br />\n <small class=\"text-muted\">{{ application.contextPath }}</small>\n </span>\n </label>\n <span class=\"m-l-auto\"></span>\n @if (applicationAlreadyInappIdsOfGlobalRoles) {\n <button\n class=\"btn-help\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"\n 'This application is already made available in a global role' | translate\n \"\n type=\"button\"\n [triggers]=\"'focus'\"\n ></button>\n }\n\n @if (\n (application | notAvailableInOwner: userWithOwner()?.owner) &&\n !applicationAlreadyInappIdsOfGlobalRoles\n ) {\n <button\n class=\"btn-dot\"\n [attr.aria-label]=\"'This application is not accessible by the owner.' | translate\"\n [popover]=\"'This application is not accessible by the owner.' | translate\"\n type=\"button\"\n [triggers]=\"'focus'\"\n >\n <i\n class=\"text-warning\"\n [c8yIcon]=\"'warning'\"\n ></i>\n </button>\n }\n </div>\n </c8y-list-item-body>\n </c8y-list-item>\n }\n </c8y-list-group>\n}\n", dependencies: [{ kind: "directive", type: PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "component", type: ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "component", type: AppIconComponent, selector: "c8y-app-icon", inputs: ["contextPath", "name", "app"] }, { kind: "directive", type: IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: HumanizeAppNamePipe, name: "humanizeAppName" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AlreadyInArrayPipe, name: "alreadyInArray" }, { kind: "pipe", type: NotAvailableInOwnerPipe, name: "notAvailableInOwner" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ApplicationAccessSubListComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-application-access-sub-list', imports: [
C8yTranslateDirective,
C8yTranslatePipe,
HumanizeAppNamePipe,
PopoverDirective,
ListGroupComponent,
ListItemComponent,
ListItemBodyComponent,
AppIconComponent,
AsyncPipe,
AlreadyInArrayPipe,
NotAvailableInOwnerPipe,
IconDirective
], template: "@if (applications().length) {\n <div class=\"legend form-block\">\n {{ legend() | translate }}\n @if (legendHelpText()) {\n <button\n class=\"btn-help btn-help--sm\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"legendHelpText() | translate\"\n type=\"button\"\n [triggers]=\"'focus'\"\n ></button>\n }\n </div>\n\n @if (disabledEdit() && noOwnerAvailable()) {\n <div class=\"alert alert-info\">\n {{ noOwnerMessage | translate: { 'user.userName': userWithOwner()?.user.userName } }}\n </div>\n }\n\n <c8y-list-group>\n @for (application of applications(); track application.id) {\n @let applicationAlreadyInappIdsOfGlobalRoles =\n application | alreadyInArray: appIdsOfGlobalRoles();\n @let applicationName = application | humanizeAppName | async;\n <c8y-list-item>\n <c8y-list-item-body>\n <div class=\"d-flex\">\n <label class=\"c8y-checkbox a-i-center\">\n <input\n [attr.aria-label]=\"applicationName\"\n type=\"checkbox\"\n [checked]=\"\n allSelected() ||\n (application | alreadyInArray: selectedAppIds()) ||\n applicationAlreadyInappIdsOfGlobalRoles\n \"\n (click)=\"toggleAccess(application)\"\n [disabled]=\"disabledEdit() || applicationAlreadyInappIdsOfGlobalRoles\"\n />\n <span></span>\n <span class=\"icon-36 l-h-1 p-l-8\">\n <c8y-app-icon [app]=\"application\"></c8y-app-icon>\n </span>\n <span\n class=\"m-l-8 text-normal l-h-1\"\n [title]=\"applicationName\"\n >\n {{ applicationName }}\n <br />\n <small class=\"text-muted\">{{ application.contextPath }}</small>\n </span>\n </label>\n <span class=\"m-l-auto\"></span>\n @if (applicationAlreadyInappIdsOfGlobalRoles) {\n <button\n class=\"btn-help\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"\n 'This application is already made available in a global role' | translate\n \"\n type=\"button\"\n [triggers]=\"'focus'\"\n ></button>\n }\n\n @if (\n (application | notAvailableInOwner: userWithOwner()?.owner) &&\n !applicationAlreadyInappIdsOfGlobalRoles\n ) {\n <button\n class=\"btn-dot\"\n [attr.aria-label]=\"'This application is not accessible by the owner.' | translate\"\n [popover]=\"'This application is not accessible by the owner.' | translate\"\n type=\"button\"\n [triggers]=\"'focus'\"\n >\n <i\n class=\"text-warning\"\n [c8yIcon]=\"'warning'\"\n ></i>\n </button>\n }\n </div>\n </c8y-list-item-body>\n </c8y-list-item>\n }\n </c8y-list-group>\n}\n" }]
}], propDecorators: { applications: [{ type: i0.Input, args: [{ isSignal: true, alias: "applications", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], legendHelpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "legendHelpText", required: false }] }], noOwnerAvailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "noOwnerAvailable", required: false }] }], appIdsOfGlobalRoles: [{ type: i0.Input, args: [{ isSignal: true, alias: "appIdsOfGlobalRoles", required: false }] }], disabledEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledEdit", required: false }] }], userWithOwner: [{ type: i0.Input, args: [{ isSignal: true, alias: "userWithOwner", required: false }] }], selectedAppIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedAppIds", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }], accessToggled: [{ type: i0.Output, args: ["accessToggled"] }] } });
class ApplicationAccessListComponent {
constructor() {
this.allApps = signal([], ...(ngDevMode ? [{ debugName: "allApps" }] : []));
this.nonMicroserviceApps = computed(() => {
return this.allApps().filter(app => app.type !== 'MICROSERVICE');
}, ...(ngDevMode ? [{ debugName: "nonMicroserviceApps" }] : []));
this.marketApps = computed(() => {
return this.nonMicroserviceApps().filter(app => app.availability === ApplicationAvailability.MARKET);
}, ...(ngDevMode ? [{ debugName: "marketApps" }] : []));
this.privateApps = computed(() => {
return this.nonMicroserviceApps().filter(app => app.availability === ApplicationAvailability.PRIVATE);
}, ...(ngDevMode ? [{ debugName: "privateApps" }] : []));
this.userWithOwner = input(null, ...(ngDevMode ? [{ debugName: "userWithOwner" }] : []));
this.appIdsOfGlobalRoles = computed(() => {
const userWithOwner = this.userWithOwner();
if (!userWithOwner || !userWithOwner.user?.groups) {
return [];
}
const allApps = userWithOwner.user.groups.references
.map(groupReference => groupReference.group.applications || [])
.flat();
return Array.from(new Set(allApps.map(app => app.id)));
}, ...(ngDevMode ? [{ debugName: "appIdsOfGlobalRoles" }] : []));
this.disabledEdit = signal(false, ...(ngDevMode ? [{ debugName: "disabledEdit" }] : []));
this.userOwnerAvailable = computed(() => {
const userWithOwner = this.userWithOwner();
if (userWithOwner?.owner) {
return true;
}
return false;
}, ...(ngDevMode ? [{ debugName: "userOwnerAvailable" }] : []));
this.selectedApps = signal([], ...(ngDevMode ? [{ debugName: "selectedApps" }] : []));
this.selectedAppIds = computed(() => {
return this.selectedApps().map(app => app.id);
}, ...(ngDevMode ? [{ debugName: "selectedAppIds" }] : []));
this.allSelected = input(false, ...(ngDevMode ? [{ debugName: "allSelected" }] : []));
this.applicationService = inject(ApplicationService);
this.appState = inject(AppStateService);
}
async ngOnInit() {
const { data: apps } = await this.applicationService.listByUser(this.appState.currentUser.value, { dropOverwrittenApps: true, noPaging: true });
const sortedApps = apps.sort((a, b) => a.name.localeCompare(b.name));
this.allApps.set(sortedApps);
}
toggleAccess(app) {
const selectedAppIds = this.selectedAppIds();
if (selectedAppIds.includes(app.id)) {
this.selectedApps.set(this.selectedApps().filter(selectedApp => selectedApp.id !== app.id));
}
else {
this.selectedApps.set([...this.selectedApps(), app]);
}
if (this.onChange) {
this.onChange(this.selectedApps());
}
if (this.onTouched) {
this.onTouched();
}
}
writeValue(selectedApps) {
this.selectedApps.set(selectedApps);
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
setDisabledState(isDisabled) {
this.disabledEdit.set(isDisabled);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ApplicationAccessListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.19", type: ApplicationAccessListComponent, isStandalone: true, selector: "c8y-application-access-list", inputs: { userWithOwner: { classPropertyName: "userWithOwner", publicName: "userWithOwner", isSignal: true, isRequired: false, transformFunction: null }, allSelected: { classPropertyName: "allSelected", publicName: "allSelected", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => ApplicationAccessListComponent)
}
], ngImport: i0, template: "<c8y-application-access-sub-list\n [applications]=\"marketApps()\"\n [legend]=\"'Subscribed applications' | translate\"\n [noOwnerAvailable]=\"!userOwnerAvailable()\"\n [appIdsOfGlobalRoles]=\"appIdsOfGlobalRoles()\"\n [userWithOwner]=\"userWithOwner()\"\n [disabledEdit]=\"disabledEdit()\"\n (accessToggled)=\"toggleAccess($event)\"\n [selectedAppIds]=\"selectedAppIds()\"\n [allSelected]=\"allSelected()\"\n></c8y-application-access-sub-list>\n\n<c8y-application-access-sub-list\n [applications]=\"privateApps()\"\n [legend]=\"'Custom applications' | translate\"\n [legendHelpText]=\"'Applications owned by your tenant' | translate\"\n [noOwnerAvailable]=\"!userOwnerAvailable()\"\n [appIdsOfGlobalRoles]=\"appIdsOfGlobalRoles()\"\n [userWithOwner]=\"userWithOwner()\"\n [disabledEdit]=\"disabledEdit()\"\n (accessToggled)=\"toggleAccess($event)\"\n [selectedAppIds]=\"selectedAppIds()\"\n [allSelected]=\"allSelected()\"\n></c8y-application-access-sub-list>\n", dependencies: [{ kind: "component", type: ApplicationAccessSubListComponent, selector: "c8y-application-access-sub-list", inputs: ["applications", "legend", "legendHelpText", "noOwnerAvailable", "appIdsOfGlobalRoles", "disabledEdit", "userWithOwner", "selectedAppIds", "allSelected"], outputs: ["accessToggled"] }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.19", ngImport: i0, type: ApplicationAccessListComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-application-access-list', imports: [C8yTranslatePipe, ApplicationAccessSubListComponent], providers: [
{
provide: NG_VALUE_ACCESSOR,
multi: true,
useExisting: forwardRef(() => ApplicationAccessListComponent)
}
], template: "<c8y-application-access-sub-list\n [applications]=\"marketApps()\"\n [legend]=\"'Subscribed applications' | translate\"\n [noOwnerAvailable]=\"!userOwnerAvailable()\"\n [appIdsOfGlobalRoles]=\"appIdsOfGlobalRoles()\"\n [userWithOwner]=\"userWithOwner()\"\n [disabledEdit]=\"disabledEdit()\"\n (accessToggled)=\"toggleAccess($event)\"\n [selectedAppIds]=\"selectedAppIds()\"\n [allSelected]=\"allSelected()\"\n></c8y-application-access-sub-list>\n\n<c8y-application-access-sub-list\n [applications]=\"privateApps()\"\n [legend]=\"'Custom applications' | translate\"\n [legendHelpText]=\"'Applications owned by your tenant' | translate\"\n [noOwnerAvailable]=\"!userOwnerAvailable()\"\n [appIdsOfGlobalRoles]=\"appIdsOfGlobalRoles()\"\n [userWithOwner]=\"userWithOwner()\"\n [disabledEdit]=\"disabledEdit()\"\n (accessToggled)=\"toggleAccess($event)\"\n [selectedAppIds]=\"selectedAppIds()\"\n [allSelected]=\"allSelected()\"\n></c8y-application-access-sub-list>\n" }]
}], propDecorators: { userWithOwner: [{ type: i0.Input, args: [{ isSignal: true, alias: "userWithOwner", required: false }] }], allSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "allSelected", required: false }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { ApplicationAccessListComponent };
//# sourceMappingURL=c8y-ngx-components-application-access-list.mjs.map