sub-assets/group-info.component.ts
| selector | c8y-group-info |
| imports |
BsDropdownDirective
BsDropdownToggleDirective
PopoverDirective
BsDropdownMenuDirective
C8yTranslatePipe
FilterMapperPipe
GroupedFilterChips
|
| templateUrl | ./group-info.component.html |
IconDirective
FormsModule
FormGroupComponent
C8yTranslateDirective
RequiredInputPlaceholderDirective
ProductExperienceDirective
TextareaAutoresizeDirective
BsDropdownDirective
BsDropdownToggleDirective
PopoverDirective
BsDropdownMenuDirective
NgClass
C8yTranslatePipe
AsyncPipe
DatePipe
FilterMapperPipe
GroupedFilterChips
OnDestroy
OnChanges
<div class="bg-level-1 separator-bottom">
<div class="card-block p-t-24 p-b-24 large-padding">
<div class="content-flex-70">
<div class="text-center col-1">
<i
class="c8y-icon-duocolor icon-48"
[c8yIcon]="groupIcon"
></i>
<p>
@if (group.c8y_IsDynamicGroup) {
<small class="label label-info">
{{ 'Smart group' | translate }}
</small>
}
@if (!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent) {
<small
class="label label-info text-truncate d-inline-block"
title="{{ label | translate }}"
>
{{ label | translate }}
</small>
}
@if (group.com_cumulocity_model_Agent) {
<small class="label label-info">
{{ 'Remote group' | translate }}
</small>
}
</p>
</div>
<div class="flex-grow col-10">
<div class="content-flex-80">
<div class="col-9">
<form #groupNameForm="ngForm">
<c8y-form-group class="form-group-lg m-b-0">
<label
class="sr-only"
for="groupName"
translate
>
Name
</label>
@if (!canEdit) {
<p class="form-control-static">
{{ groupInfoModel.name }}
</p>
}
@if (canEdit) {
<div class="input-group input-group-lg input-group-editable">
<input
class="form-control"
title="{{ groupInfoModel.name }}"
id="groupName"
placeholder="{{ 'e.g. My group' | translate }}"
name="name"
type="text"
required
[(ngModel)]="groupInfoModel.name"
size="{{ groupInfoModel.name.length + 2 }}"
maxlength="254"
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.EVENT"
[actionData]="{
component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,
action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,
property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME
}"
/>
<span></span>
<div class="input-group-btn">
<button
class="btn btn-primary"
title="{{ 'Save' | translate }}"
type="submit"
[disabled]="groupNameForm.form.invalid"
(click)="
update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()
"
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.EVENT"
[actionData]="{
component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,
result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,
property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.NAME
}"
>
{{ 'Save' | translate }}
</button>
</div>
</div>
}
</c8y-form-group>
</form>
<form #groupDescriptionForm="ngForm">
<label
class="sr-only"
for="description"
translate
>
Description
</label>
@if (canEdit) {
<div class="input-group input-group-editable">
<textarea
class="form-control no-resize"
title="{{
groupInfoModel.c8y_Notes
? groupInfoModel.c8y_Notes
: (descriptionLabel | translate)
}}"
id="description"
placeholder="{{ descriptionLabel | translate }}"
name="description"
c8y-textarea-autoresize
[(ngModel)]="groupInfoModel.c8y_Notes"
cols="{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}"
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.EVENT"
[actionData]="{
component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,
action: PRODUCT_EXPERIENCE.GROUP_INFO.ACTIONS.EDIT,
property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION
}"
></textarea>
<span></span>
<div class="input-group-btn">
<button
class="btn btn-primary"
title="{{ 'Save' | translate }}"
type="submit"
[disabled]="groupDescriptionForm.form.invalid"
(click)="
update({ c8y_Notes: groupInfoModel.c8y_Notes });
groupDescriptionForm.form.markAsPristine()
"
c8yProductExperience
[actionName]="PRODUCT_EXPERIENCE.EVENT"
[actionData]="{
component: PRODUCT_EXPERIENCE.GROUP_INFO.COMPONENTS.GROUP_INFO,
result: PRODUCT_EXPERIENCE.GROUP_INFO.RESULTS.EDIT_SAVED,
property: PRODUCT_EXPERIENCE.GROUP_INFO.PROPERTIES.DESCRIPTION
}"
>
{{ 'Save' | translate }}
</button>
</div>
</div>
} @else {
<p class="form-control-static">
{{ groupInfoModel.c8y_Notes }}
</p>
}
</form>
@if (isSmartGroup()) {
<div
class="dropdown m-t-8"
placement="bottom left"
container="body"
type="button"
dropdown
#ddFilters="bs-dropdown"
[insideClick]="true"
>
<button
class="btn btn-default btn-sm"
title="{{ 'Smart group filters' | translate }}"
aria-haspopup="true"
dropdownToggle
data-cy="c8y-data-grid--filters"
[disabled]="columnsWithFilter?.length === 0"
>
<i
class="m-r-4"
c8yIcon="filter"
></i>
<span>{{ 'Smart group filters' | translate }}</span>
@if (columnsWithFilter?.length > 0) {
<span class="p-relative p-l-4 p-r-16">
<span
class="badge badge-system p-absolute"
data-cy="group-info--filter-number"
>
{{ columnsWithFilter?.length }}
</span>
</span>
}
</button>
<button
class="btn-help btn-help--sm m-r-4"
[attr.aria-label]="'Help' | translate"
popover="{{ filterMsg | translate }}"
placement="right"
triggers="focus"
container="body"
type="button"
data-cy="group-info--help-button"
></button>
<div
class="dropdown-menu"
*dropdownMenu
(click)="$event.stopPropagation()"
>
<div class="data-grid__dropdown bg-level-0">
<ul class="list-unstyled m-0">
@for (column of columnsWithFilter; track column; let last = $last) {
<li [ngClass]="{ 'separator-bottom': !last }">
<div
class="dropdown-header sticky-top text-truncate no-border-top p-b-0"
title="{{ (column.header | translate) || column.name }}"
>
<label>
{{ (column.header | translate) || column.name }}
</label>
</div>
@for (
groupedFilterChips of column
| mapToFilterChips
| async
| groupedFilterChips;
track groupedFilterChips;
let first = $first
) {
<div
class="list-group-item borderless d-flex d-col"
[ngClass]="{ 'p-t-0': first }"
>
@if (groupedFilterChips.label) {
<p class="small p-b-4">
{{ groupedFilterChips.label | translate }}
</p>
}
<div class="d-flex a-i-center gap-4 flex-wrap">
@for (chip of groupedFilterChips.chips; track chip) {
<span
class="tag tag--info chip"
data-cy="group-info--grouped-filter-chip"
>
{{ chip.displayValue | translate }}
</span>
}
</div>
</div>
}
</li>
}
</ul>
</div>
</div>
</div>
}
</div>
<div class="flex-grow">
<ul class="list-unstyled small">
<li class="p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap">
<label class="small m-b-0 m-r-8">{{ 'Created' | translate }}</label>
<span class="m-l-auto">{{ group.creationTime | c8yDate }}</span>
</li>
<li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
<label class="small m-b-0 m-r-8">{{ 'Last updated' | translate }}</label>
<span class="m-l-auto">{{ group.lastUpdated | c8yDate }}</span>
</li>
@if (group.com_cumulocity_model_Agent) {
<li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
<label class="small m-b-0 m-r-8">{{ 'Status' | translate }}</label>
@if (group.c8y_BrokerSource) {
<span class="m-l-auto">
{{ group.c8y_BrokerSource.status | translate }}
</span>
}
@if (!group.c8y_BrokerSource) {
<span class="m-l-auto">
{{ 'Offline' | translate }}
</span>
}
</li>
}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>