126 lines
4 KiB
HTML
126 lines
4 KiB
HTML
<section>
|
|
<div class="header">
|
|
<div class="headline">
|
|
<div class="title">{{ "contacts.headline" | translate }}</div>
|
|
<div class="blue-bar"></div>
|
|
<div class="metrics-txt">
|
|
{{ "contacts.headlineDescription" | translate }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="btn-back"
|
|
[ngClass]="{ 'd-none': !selectedUserId }"
|
|
(click)="emitCloseContact()"
|
|
>
|
|
<img src="./../../../../assets/img/arrow-left.svg" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Show contact details if a user is selected -->
|
|
@if (selectedUser && selectedUserId) {
|
|
<div
|
|
class="contact-details"
|
|
[ngClass]="{
|
|
'animation-coming-in': selectedUserId
|
|
}"
|
|
>
|
|
<div class="content">
|
|
<div
|
|
class="circle"
|
|
[ngStyle]="{
|
|
'background-color': selectedUser.color
|
|
}"
|
|
>
|
|
<!-- Show online icon if user is online, else offline icon -->
|
|
@if(selectedUser.isOnline) {
|
|
<img src="./../../../assets/img/online.svg" alt="" />
|
|
} @else {
|
|
<img src="./../../../assets/img/offline.svg" alt="" />
|
|
}
|
|
<div class="initials">
|
|
{{ selectedUser.initials }}
|
|
</div>
|
|
</div>
|
|
<div class="word-wrap">
|
|
<div class="name">
|
|
{{ selectedUser.firstName }}
|
|
{{ selectedUser.lastName }}
|
|
|
|
<!-- Show "you" if contact is logged in user -->
|
|
@if (currentUser && selectedUser.id === currentUser.id) {
|
|
{{ "contacts.you" | translate }}
|
|
}
|
|
</div>
|
|
|
|
<!-- Show edit and delete buttons if user is not contact only -->
|
|
@if(selectedUser.isContactOnly || currentUser && selectedUser.id ===
|
|
currentUser.id) {
|
|
<div class="btns">
|
|
<div class="btn btn-edit" (click)="editContact(selectedUser)">
|
|
<img src="./../../../../assets/img/contact/edit.svg" alt="" />
|
|
<p>
|
|
{{ "contacts.btnEdit0" | translate }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Show delete button if user is not contact only -->
|
|
@if (selectedUser.isContactOnly || currentUser && selectedUser.id !==
|
|
currentUser.id) {
|
|
<div class="btn btn-delete" (click)="toggleConfirmDialog()">
|
|
<img src="./../../../../assets/img/contact/delete.svg" alt="" />
|
|
<p>
|
|
{{ "contacts.btnDelete0" | translate }}
|
|
</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="btn-mobile" (click)="toggleNav()">
|
|
<img src="./../../../assets/img/contact/points.svg" alt="check" />
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="contact word-wrap">
|
|
<div class="headline">{{ "contacts.contactInfo" | translate }}</div>
|
|
<div class="info">
|
|
<p>{{ "contacts.contactEmail" | translate }}</p>
|
|
<a [href]="'mail:' + selectedUser.email">
|
|
{{ selectedUser.email }}
|
|
</a>
|
|
|
|
<!-- Show phone number if it exists -->
|
|
@if(selectedUser.phone) {
|
|
<p>{{ "contacts.contactPhone" | translate }}</p>
|
|
<a [href]="'tel:' + selectedUser.phone">
|
|
<span>{{ selectedUser.phone }}</span>
|
|
</a>
|
|
}
|
|
<!-- Show last login if user is not contact only -->
|
|
@if(!selectedUser.isContactOnly) {
|
|
<p>{{ "contacts.contactLastOnline" | translate }}</p>
|
|
|
|
<!-- Show last login if user is online, else if user has never logged in, else show last login -->
|
|
@if(selectedUser.isOnline) {
|
|
<span>{{ "contacts.contactCurrentlyOnline" | translate }}</span>
|
|
} @else if (!selectedUser.lastLogin ) {
|
|
<span>{{ "contacts.contactNeverSeenOnline" | translate }}</span>
|
|
} @else {
|
|
<span
|
|
>{{ selectedUser.lastLogin | date : "dd. MMM yyyy, HH:mm:ss" }}
|
|
</span>
|
|
} }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} @if (showMobileNavbar) {
|
|
<!-- TODO -->
|
|
}
|
|
</section>
|
|
|
|
<!-- Confirm dialog -->
|
|
<app-confirm-dialog
|
|
*ngIf="showConfirmDialog"
|
|
[message]="'confirmDialogComponent.deleteContact' | translate"
|
|
(onConfirm)="deleteContact()"
|
|
(onCancel)="toggleConfirmDialog()"
|
|
></app-confirm-dialog>
|