diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.html b/src/app/components/contacts/contact-detail/contact-detail.component.html index 5a8c6d9..b0b01fd 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.html +++ b/src/app/components/contacts/contact-detail/contact-detail.component.html @@ -89,7 +89,9 @@ @if(selectedUser.isOnline) { {{ "contacts.contactLastOnlineTxt" | translate }} } @else { - {{ convertTimestamp(selectedUser.lastLogin) }} + {{ selectedUser.lastLogin | date : "dd. MMM yyyy, HH:mm:ss" }} + } } diff --git a/src/app/components/contacts/contact-detail/contact-detail.component.ts b/src/app/components/contacts/contact-detail/contact-detail.component.ts index ece327e..8cc59e9 100644 --- a/src/app/components/contacts/contact-detail/contact-detail.component.ts +++ b/src/app/components/contacts/contact-detail/contact-detail.component.ts @@ -25,7 +25,7 @@ import { User } from '../../../interfaces/user.interface'; styleUrl: './contact-detail.component.scss', }) export class ContactDetailComponent { - @Input() selectedUserId: string | undefined; + @Input() selectedUserId: string | null = null; @Input() currentUser: User | null = null; @Output() closeContactEmitter = new EventEmitter(); @@ -33,11 +33,9 @@ export class ContactDetailComponent { selectedUser: User | null = null; constructor( - private router: Router, public sharedService: SharedService, public firebaseService: FirebaseService, - private userService: UserService, - private languageService: LanguageService + private userService: UserService ) {} ngOnChanges(changes: SimpleChanges) { @@ -110,89 +108,6 @@ export class ContactDetailComponent { this.sharedService.isMobileNavbarOpen = false; } - /** - * Converts a given timestamp to a human-readable date string. - * @param timestamp the timestamp to convert - * @returns a string in the format "DD. MMM. YYYY - HH:mm" in German or "MMM. DD, YYYY - hh:mm A" in English - */ - convertTimestamp(timestamp: number) { - const date = new Date(timestamp); - const monthsEN = [ - 'Jan', - 'Feb', - 'Mar', - 'Apr', - 'May', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Oct', - 'Nov', - 'Dec', - ]; - const monthsDE = [ - 'Jan', - 'Feb', - 'Mär', - 'Apr', - 'Mai', - 'Jun', - 'Jul', - 'Aug', - 'Sep', - 'Okt', - 'Nov', - 'Dez', - ]; - const months = - this.languageService.currentLang === 'de' ? monthsDE : monthsEN; - const year = date.getFullYear(); - const month = months[date.getMonth()]; - const day = date.getDate(); - - if (this.languageService.currentLang === 'de') { - const time = `${day}. ${month}. ${year}`; - return `${time} - ${this.convertTimestampHourDE(timestamp)}`; - } else { - const time = `${month}. ${day}, ${year}`; - return `${time} - ${this.convertTimestampHourEN(timestamp)}`; - } - } - - /** - * Converts a given timestamp to a human-readable time string in English. - * @param timestamp the timestamp to convert - * @returns a string in the format "hh:mm:ss AM/PM" - */ - convertTimestampHourEN(timestamp: number) { - const date = new Date(timestamp * 1000); - let hour = date.getHours(); - const minute = ('0' + date.getMinutes()).slice(-2); - const second = ('0' + date.getMinutes()).slice(-2); - const period = hour >= 12 ? 'PM' : 'AM'; - hour = hour % 12 || 12; - - let hourWithNull = ('0' + hour).slice(-2); - - return `${hourWithNull}:${minute}:${second} ${period}`; - } - - /** - * Converts a given timestamp to a human-readable time string in German. - * - * @param timestamp The timestamp to convert, in seconds. - * @returns A string in the format "HH:mm:ss Uhr". - */ - convertTimestampHourDE(timestamp: number) { - const date = new Date(timestamp * 1000); - let hour = date.getHours(); - const minute = ('0' + date.getMinutes()).slice(-2); - const second = ('0' + date.getMinutes()).slice(-2); - - return `${hour}:${minute}:${second} Uhr`; - } - @HostListener('document:click', ['$event']) /** * Handles the opening of the contact edit, new contact, and delete contact diff --git a/src/app/components/contacts/contacts.component.html b/src/app/components/contacts/contacts.component.html index 138dd9d..c4d704d 100644 --- a/src/app/components/contacts/contacts.component.html +++ b/src/app/components/contacts/contacts.component.html @@ -2,7 +2,7 @@
- @for (sortLetter of this.sortFirstLetter(); track sortLetter) { + @for (sortLetter of this.getUniqueFirstLetters(); track sortLetter) {
{{ sortLetter }}
- @for (user of this.sortUsersByFirstLetter(sortLetter); track user; let + @for (user of this.filterUsersByFirstLetter(sortLetter); track user; let index = $index) {
user.initials.substring(0, 1) === sortLetter + (user) => user.initials.substring(0, 1) === filterLetter ); } - /** - * Returns an array of unique first letters from the sorted array of users. - * The users array is first sorted by the first letter of the user's first name, - * and then the first letter of each user's first name is extracted and - * converted to uppercase. The resulting array is then deduplicated with a - * Set, and the unique letters are returned in an array. - * @returns An array of unique first letters - */ - sortFirstLetter() { - let filterteArray = this.allUsers.sort((a, b) => + getUniqueFirstLetters() { + let sortedUsers = this.allUsers.sort((a, b) => a.firstName.localeCompare(b.firstName) ); - let usersFirstLetter = Array.from( - new Set(filterteArray.map((user) => user.firstName[0].toUpperCase())) + let uniqueFirstLetters = Array.from( + new Set(sortedUsers.map((user) => user.firstName[0].toUpperCase())) ); - return usersFirstLetter; + return uniqueFirstLetters; } /** @@ -137,4 +105,13 @@ export class ContactsComponent { this.sharedService.isAnyDialogOpen = true; this.sharedService.isNewContactDialogOpen = true; } + + @HostListener('window:resize', ['$event']) + onResize() { + if (window.innerWidth <= 1150 && this.selectedUserId != undefined) { + this.showAllUsers = false; + } else { + this.showAllUsers = true; + } + } }