@if (!isFeature) {
<div
class="card pointer card--d-col notFeature"
data-cy="application-card--extensions-list"
>
<div
class="card-block text-center card-column-40"
data-cy="application-card--package-name"
(click)="detail()"
>
@if (packageType !== PACKAGE_TYPE.CUSTOM) {
<button
class="card__ribbon btn-clean"
[attr.aria-label]="
(app.label || app.manifest?.label | translatePackageLabel) +
': ' +
(packageTypeLabels[packageType].tooltip | translate)
"
tooltip="{{ packageTypeLabels[packageType].tooltip | translate }}"
placement="right"
type="button"
[delay]="500"
>
<span
[ngClass]="{
'bg-info': packageType === PACKAGE_TYPE.COMMUNITY,
'bg-primary': packageType === PACKAGE_TYPE.OFFICIAL,
'bg-warning': packageType === PACKAGE_TYPE.ARCHIVED
}"
>
{{ app.label || app.manifest?.label | translatePackageLabel }}
</span>
</button>
}
<div class="card-appicon">
@if (!isPackage && !isFeature && !isMicroservice && !isExternal) {
<c8y-app-icon
[app]="app"
[contextPath]="app.contextPath"
[name]="app.name"
></c8y-app-icon>
}
@if (isPackage) {
<i c8yIcon="big-parcel"></i>
}
@if (isMicroservice) {
<i c8yIcon="microchip"></i>
}
@if (isExternal) {
<i c8yIcon="globe1"></i>
}
</div>
<div style="line-height: 1.3">
<p class="e2e-appCardName text-medium text-break-word">
{{ app | humanizeAppName | async }}
</p>
@if (isShowVersion) {
<p class="small text-muted">
<em>{{ app.manifest.version }}</em>
@if (shouldUpgradePackage && isUnpacked) {
<button
class="btn-clean m-l-4"
[attr.aria-label]="'Update available' | translate"
[tooltip]="'Update available' | translate"
>
<i
class="text-warning icon-16"
c8yIcon="exclamation-triangle"
></i>
</button>
}
</p>
}
@if (app.manifest?.author) {
<p class="small text-break-word">
{{ app.manifest.author }}
</p>
}
</div>
</div>
<div
class="card-block p-0 no-min-height card--d-col card-column-80 flex-grow"
(click)="detail()"
>
<div class="card-block no-min-height p-t-0 p-b-0 card-column-80">
<div class="text-center-grid">
<div class="p-b-8 card-hidden-grid"></div>
@if (app.description ?? app.manifest?.description) {
<p class="small l-h-tight p-b-8 p-l-0 p-r-0 text-break-word">
{{ app.description ?? app.manifest?.description | translate }}
</p>
} @else {
<p class="small l-h-tight p-b-8 p-l-0 p-r-0">
<em class="text-muted">{{ 'No description available.' | translate }}</em>
</p>
}
</div>
</div>
<div
class="card-block no-min-height p-t-0 p-b-0 d-flex card-column-20 text-center-grid flex-wrap gap-8"
>
<button
class="btn-clean"
[attr.aria-label]="
((isUnpacked ? UNPACKED_LABEL : appState?.label) | translate) +
': ' +
(appState?.tooltip | translate)
"
[tooltip]="appState?.tooltip | translate"
placement="top"
[delay]="500"
>
<span
class="label"
[ngClass]="appState?.class"
>
{{ appState?.label | translate }}
</span>
</button>
@if (isPackage) {
<button
class="btn-clean"
[attr.aria-label]="
(packageContentState?.label | translate) +
': ' +
(packageContentState?.tooltip
? packageContentState?.tooltip
: PACKAGE_CONTENT_UNDETERMINED_LABEL) | translate
"
[tooltip]="
(packageContentState?.tooltip
? packageContentState?.tooltip
: PACKAGE_CONTENT_UNDETERMINED_LABEL
) | translate
"
placement="top"
>
<span
class="label"
[ngClass]="packageContentState?.class ? packageContentState?.class : 'label-danger'"
>
{{
packageContentState?.label || packageTypeLabels[PACKAGE_TYPE.UNKNOWN].label
| translate
}}
</span>
</button>
}
</div>
<div class="card-footer no-min-height p-t-0 p-b-0 card-column-20 text-center-grid">
<div class="p-b-16 card-hidden-list"></div>
@if (canOpenInBrowser) {
<button
class="btn btn-sm btn-default"
[title]="openButtonTitle | translate"
type="button"
(click)="openApp(); $event.stopPropagation()"
[disabled]="disableOpenInBrowser"
>
<i
class="m-r-4"
c8yIcon="external-link"
></i>
{{ 'Open' | translate }}
</button>
}
<div class="p-b-32 card-hidden-list"></div>
</div>
</div>
<div class="p-r-40 card-hidden-grid"></div>
@if (canEdit || canOpenInBrowser || canDelete) {
<div class="card-actions m-t-0">
<div
class="dropdown"
#appCardDropdown="bs-dropdown"
dropdown
[cdkTrapFocus]="appCardDropdown.isOpen"
>
<button
class="dropdown-toggle c8y-dropdown"
title="{{ 'Settings' | translate }}"
type="button"
data-cy="application-card--settings-button"
dropdownToggle
>
<i c8yIcon="ellipsis-v"></i>
</button>
<ul
class="dropdown-menu dropdown-menu-right"
*dropdownMenu
>
@if (canEdit) {
<li>
<button
title="{{ 'Edit' | translate }}"
data-cy="application-card--edit-button"
(click)="detail()"
>
<i
class="m-r-4"
c8yIcon="pencil"
></i>
{{ 'Edit' | translate }}
</button>
</li>
}
<ng-container *c8yIfAllowed="['ROLE_APPLICATION_MANAGEMENT_ADMIN']">
<li>
<button
[title]="canDelete ? ('Delete' | translate) : (CANNOT_DELETE_HINT | translate)"
type="button"
data-cy="application-card--delete-button"
[disabled]="!canDelete"
(click)="delete()"
>
<i
class="m-r-4"
c8yIcon="delete"
></i>
{{ 'Delete' | translate }}
</button>
</li>
@if (canClone) {
<li>
@if (isPackage) {
<button
[title]="'Clone`package,verb`' | translate"
type="button"
(click)="clone()"
>
<i
class="m-r-4"
c8yIcon="copy"
></i>
{{ 'Clone`package,verb`' | translate }}
</button>
}
@if (!isPackage) {
<button
[title]="'Clone`application,verb`' | translate"
type="button"
(click)="clone()"
>
<i
class="m-r-4"
c8yIcon="copy"
></i>
{{ 'Clone`application,verb`' | translate }}
</button>
}
</li>
}
</ng-container>
</ul>
</div>
</div>
}
</div>
}
@if (isFeature) {
<button
class="card pointer card--d-col"
type="button"
(click)="detail()"
>
<div class="card-block text-center card-column-40">
<div class="card-appicon">
@if (!isPackage && !isFeature && !isMicroservice && !isExternal) {
<c8y-app-icon
[app]="app"
[contextPath]="app.contextPath"
[name]="app.name"
></c8y-app-icon>
}
<i c8yIcon="tab"></i>
</div>
<div>
<p
class="e2e-appCardName text-medium"
title="{{ app | humanizeAppName | async }}"
>
{{ app | humanizeAppName | async }}
</p>
@if (isShowVersion) {
<p class="small text-muted">
<em>{{ app.manifest.version }}</em>
@if (shouldUpgradePackage && isUnpacked) {
<i
class="text-warning m-l-4"
c8yIcon="exclamation-triangle"
[tooltip]="'Update available' | translate"
></i>
}
</p>
}
</div>
</div>
<div class="card-block p-0 no-min-height card--d-col card-column-80 flex-grow">
<div class="card-block no-min-height p-t-0 p-b-0 card-column-80">
@if (app.description ?? app.manifest?.description) {
<div class="text-center-grid">
<div class="p-b-8 card-hidden-grid"></div>
<p class="small l-h-tight p-b-8 p-l-0 p-r-0">
{{ app.description ?? app.manifest?.description | translate }}
</p>
</div>
}
</div>
<div class="card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid">
<span
class="label"
[ngClass]="appState.class"
>
{{ appState.label | translate }}
</span>
</div>
@if (isPackage) {
<div class="card-block no-min-height p-t-0 p-b-0 card-column-20 text-center-grid">
<span
class="label"
[ngClass]="packageContentState.class"
>
{{ packageContentState.label | translate }}
</span>
</div>
}
<div class="p-b-32 card-hidden-list"></div>
</div>
</button>
}