72 lines
2 KiB
HTML
72 lines
2 KiB
HTML
<section>
|
|
<div class="left-frame">
|
|
<button class="btn" type="submit">
|
|
<div class="btn-inside">
|
|
<span>Add new contact</span>
|
|
<img src="./../../../assets/img/contact/add.svg" alt="check" />
|
|
</div>
|
|
</button>
|
|
|
|
<div class="content">
|
|
@for (sortLetter of usersFirstLetter; track allUsers) {
|
|
<div class="first-letter">{{ sortLetter }}</div>
|
|
<div class="line"></div>
|
|
@for (count of usersByFirstLetter[sortLetter]; track usersByFirstLetter;
|
|
let index = $index) {
|
|
<div
|
|
class="contact"
|
|
routerLink="/contacts/{{ usersByFirstLetter[sortLetter] }}"
|
|
>
|
|
<div
|
|
class="circle"
|
|
[ngStyle]="{
|
|
'background-color': userService.displayUserDetails(
|
|
usersByFirstLetter[sortLetter][index],
|
|
'color'
|
|
)
|
|
}"
|
|
>
|
|
<div class="initials">
|
|
{{
|
|
userService.displayUserDetails(
|
|
usersByFirstLetter[sortLetter][index],
|
|
"initials"
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="details">
|
|
<div class="name">
|
|
<div class="first-name">
|
|
{{
|
|
userService.displayUserDetails(
|
|
usersByFirstLetter[sortLetter][index],
|
|
"firstName"
|
|
)
|
|
}}
|
|
</div>
|
|
<span>, </span>
|
|
<div class="last-name">
|
|
{{
|
|
userService.displayUserDetails(
|
|
usersByFirstLetter[sortLetter][index],
|
|
"lastName"
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="email">
|
|
{{
|
|
userService.displayUserDetails(
|
|
usersByFirstLetter[sortLetter][index],
|
|
"email"
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
} }
|
|
</div>
|
|
</div>
|
|
<app-contact-detail [currentUserId]="currentUserId"></app-contact-detail>
|
|
</section>
|