-
+
+
-
- {{ name }}
+
+ {{ name }}
+ {{ name }}
- {{ name }}
-
- {{ appendCaption }}
-
+ {{ appendCaption }}
{{ caption }}
diff --git a/packages/ui-core/shared/src/lib/components/avatar/avatar.component.scss b/packages/ui-core/shared/src/lib/components/avatar/avatar.component.scss
index 8cd3522114a..7dfbb13eab4 100644
--- a/packages/ui-core/shared/src/lib/components/avatar/avatar.component.scss
+++ b/packages/ui-core/shared/src/lib/components/avatar/avatar.component.scss
@@ -1,187 +1,204 @@
@import 'themes';
@mixin common {
- .inner-wrapper {
- border-radius: var(--button-rectangle-border-radius);
- align-items: center;
- overflow: hidden;
- display: flex;
- gap: 8px;
- }
-
- .avatar-wrapper {
- width: 100%;
- border-radius: var(--border-radius);
- }
-
- .names-wrapper {
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
-
- .link-text {
- cursor: pointer;
- text-decoration: none;
- font-style: normal;
- line-height: 15px;
- letter-spacing: 0;
- white-space: nowrap;
- width: 100%;
- text-overflow: ellipsis;
- }
-
- .link-text:hover {
- text-decoration: underline;
- }
-
- .image-container {
- width: 20px;
- cursor: pointer;
- border-radius: var(--border-radius);
- display: flex;
-
- img {
- width: 20px;
- height: 20px;
- object-fit: cover;
- border-radius: var(--border-radius) !important;
- }
- }
+ .inner-wrapper {
+ border-radius: var(--button-rectangle-border-radius);
+ align-items: center;
+ overflow: hidden;
+ display: flex;
+ gap: 8px;
+ }
+
+ .avatar-wrapper {
+ width: 100%;
+ border-radius: var(--border-radius);
+ }
+
+ .names-wrapper {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ .link-text {
+ cursor: pointer;
+ text-decoration: none;
+ font-style: normal;
+ line-height: 15px;
+ letter-spacing: 0;
+ white-space: nowrap;
+ width: 100%;
+ text-overflow: ellipsis;
+ }
+
+ .link-text:hover {
+ text-decoration: underline;
+ }
+
+ .image-container {
+ width: 20px;
+ cursor: pointer;
+ border-radius: var(--border-radius);
+ display: flex;
+ position: relative;
+
+ img {
+ width: 20px;
+ height: 20px;
+ object-fit: cover;
+ border-radius: var(--border-radius) !important;
+ }
+ .status-indicator {
+ position: absolute;
+ width: 10px;
+ height: 10px;
+ border-radius: 8px;
+ border: 2px solid #ebebeb;
+ right: 0;
+ top: 0;
+
+ &.online {
+ background-color: #4caf50; /* Green for online */
+ }
+ &.offline {
+ background-color: #f44336; /* Red for offline */
+ }
+ }
+ }
}
:host {
- display: block;
-
- .link-text {
- font-size: 14px;
- font-weight: 600;
- line-height: 16px;
- cursor: pointer;
- text-decoration: none;
- letter-spacing: 0em;
- color: nb-theme(gauzy-text-contact);
- }
-
- .caption {
- font-size: 11px;
- font-weight: 400;
- line-height: 11px;
- letter-spacing: 0em;
- color: var(--gauzy-text-color-2);
- }
-
- .link-text:hover {
- text-decoration: underline;
- }
-
- .image-container {
- width: 48px;
- cursor: pointer;
-
- img {
- width: 48px;
- height: 48px;
- object-fit: cover;
- }
-
- &.lg {
- width: 64px;
-
- img {
- width: 64px;
- height: 64px;
- }
- }
-
- &.sm {
- width: 32px;
-
- img {
- width: 32px;
- height: 32px;
- }
- }
- }
+ display: block;
+
+ .link-text {
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 16px;
+ cursor: pointer;
+ text-decoration: none;
+ letter-spacing: 0em;
+ color: nb-theme(gauzy-text-contact);
+ }
+
+ .caption {
+ font-size: 11px;
+ font-weight: 400;
+ line-height: 11px;
+ letter-spacing: 0em;
+ color: var(--gauzy-text-color-2);
+ }
+
+ .link-text:hover {
+ text-decoration: underline;
+ }
+
+ .image-container {
+ width: 48px;
+ cursor: pointer;
+
+ img {
+ width: 48px;
+ height: 48px;
+ object-fit: cover;
+ }
+
+ &.lg {
+ width: 64px;
+
+ img {
+ width: 64px;
+ height: 64px;
+ }
+ }
+
+ &.sm {
+ width: 32px;
+
+ img {
+ width: 32px;
+ height: 32px;
+ }
+ }
+ }
}
:host-context(.report-table) {
- width: 100%;
-
- .inner-wrapper {
- width: fit-content;
- @include nb-ltr(padding, 3px 9px 3px 3px);
- @include nb-rtl(padding, 3px 3px 3px 9px);
- background-color: var(--color-primary-transparent-100);
- }
-
- .link-text {
- font-size: 12px;
- font-weight: 400;
- text-overflow: ellipsis;
- color: var(--text-primary-color) !important;
- }
-
- @include common;
+ width: 100%;
+
+ .inner-wrapper {
+ width: fit-content;
+ @include nb-ltr(padding, 3px 9px 3px 3px);
+ @include nb-rtl(padding, 3px 3px 3px 9px);
+ background-color: var(--color-primary-transparent-100);
+ }
+
+ .link-text {
+ font-size: 12px;
+ font-weight: 400;
+ text-overflow: ellipsis;
+ color: var(--text-primary-color) !important;
+ }
+
+ @include common;
}
:host-context(.avatar-dashboard) {
- width: 100%;
-
- .inner-wrapper {
- width: 100%;
- }
-
- .names-wrapper {
- width: 100%;
- }
-
- .link-text {
- font-size: 14px;
- font-weight: 600;
- color: var(--gauzy-text-color-1) !important;
- }
-
- &.activity {
- .image-container {
- width: 28px;
- border-radius: var(--button-rectangle-border-radius) !important;
-
- img {
- border-radius: var(--button-rectangle-border-radius) !important;
- width: 28px;
- height: 28px;
- }
- }
- }
-
- @include common;
+ width: 100%;
+
+ .inner-wrapper {
+ width: 100%;
+ }
+
+ .names-wrapper {
+ width: 100%;
+ }
+
+ .link-text {
+ font-size: 14px;
+ font-weight: 600;
+ color: var(--gauzy-text-color-1) !important;
+ }
+
+ &.activity {
+ .image-container {
+ width: 28px;
+ border-radius: var(--button-rectangle-border-radius) !important;
+
+ img {
+ border-radius: var(--button-rectangle-border-radius) !important;
+ width: 28px;
+ height: 28px;
+ }
+ }
+ }
+
+ @include common;
}
:host-context(.workspace) {
- $radius: var(--border-radius);
- width: 100%;
-
- .inner-wrapper {
- width: fit-content;
- padding: calc($radius / 4);
- background-color: var(--color-primary-transparent-100);
- border-radius: calc($radius / 2) !important;
- }
-
- @include common;
-
- .image-container {
- &,
- img {
- border-radius: calc($radius / 4) !important;
- }
- }
-
- .names-wrapper {
- a.link-text {
- text-decoration: none;
- cursor: none;
- }
- }
+ $radius: var(--border-radius);
+ width: 100%;
+
+ .inner-wrapper {
+ width: fit-content;
+ padding: calc($radius / 4);
+ background-color: var(--color-primary-transparent-100);
+ border-radius: calc($radius / 2) !important;
+ }
+
+ @include common;
+
+ .image-container {
+ &,
+ img {
+ border-radius: calc($radius / 4) !important;
+ }
+ }
+
+ .names-wrapper {
+ a.link-text {
+ text-decoration: none;
+ cursor: none;
+ }
+ }
}
diff --git a/packages/ui-core/shared/src/lib/components/avatar/avatar.component.ts b/packages/ui-core/shared/src/lib/components/avatar/avatar.component.ts
index d5a23e16e80..1e5de62a44b 100644
--- a/packages/ui-core/shared/src/lib/components/avatar/avatar.component.ts
+++ b/packages/ui-core/shared/src/lib/components/avatar/avatar.component.ts
@@ -1,6 +1,8 @@
import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
-import { ID } from '@gauzy/contracts';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ID, IEmployee } from '@gauzy/contracts';
@Component({
selector: 'ngx-avatar',
@@ -8,15 +10,28 @@ import { ID } from '@gauzy/contracts';
styleUrls: ['./avatar.component.scss']
})
export class AvatarComponent implements OnInit {
+ public online$: Observable
;
+
@Input() size: 'lg' | 'sm' | 'md' = 'md';
@Input() src: string;
@Input() appendCaption: string;
@Input() caption: string;
- @Input() id: string;
+ @Input() id: ID;
@Input() isOption: boolean;
+ /**
+ * A class member and getter/setter for managing an employee object.
+ */
+ private _employee = new BehaviorSubject(null);
+ @Input() set employee(value: IEmployee) {
+ this._employee.next(value);
+ }
+ get employee(): IEmployee {
+ return this._employee.getValue();
+ }
+
// Added for set component value when used for angular2-smart-table renderer.
- @Input() set value(object) {
+ @Input() set value(object: any) {
for (const key in object) {
if (Object.prototype.hasOwnProperty.call(object, key)) {
this[key] = object[key];
@@ -25,29 +40,25 @@ export class AvatarComponent implements OnInit {
}
/**
- * A class member and getter/setter for managing a string name.
- */
- _name: string;
-
- /**
- * Getter method for the 'name' property, providing access to the private _name variable.
- * @returns The current value of the 'name' property.
- */
- get name(): string {
- return this._name;
- }
-
- /**
- * Setter method for the 'name' property, annotated with @Input().
- * @param value - The new value to set for the 'name' property.
+ * A class member and getter/setter for managing an employee name.
*/
+ private _name: string;
@Input() set name(value: string) {
this._name = value;
}
+ get name(): string {
+ return this._name;
+ }
constructor(private readonly router: Router) {}
- ngOnInit() {}
+ ngOnInit() {
+ if (this.id) {
+ this.online$ = this._employee
+ .asObservable()
+ .pipe(map((employee) => employee?.isOnline && !employee?.isAway));
+ }
+ }
/**
* Navigates to the employee edit page based on the provided employee ID.