98 lines
5.0 KiB
HTML
98 lines
5.0 KiB
HTML
<!-- <div id="sky-line" class="hidden-lg-down"></div>
|
|
<div class="search">
|
|
<div class="wrapper">
|
|
<div class="grid p-4 align-items-center">
|
|
<div class="col-2">
|
|
<p-dropdown [filter]="true" filterBy="name" [options]="states" [(ngModel)]="criteria.state" optionLabel="name" optionValue="value" [showClear]="true" placeholder="Location" [style]="{ width: '100%' }">
|
|
<ng-template let-state pTemplate="item">
|
|
<div class="flex align-items-center gap-2">
|
|
<div>{{ state.name }} ({{ state.count }})</div>
|
|
</div>
|
|
</ng-template>
|
|
</p-dropdown>
|
|
</div>
|
|
<div class="col-2">
|
|
<p-inputGroup>
|
|
<input id="name" type="text" pInputText [(ngModel)]="criteria.name" placeholder="Name" />
|
|
<button type="button" pButton icon="pi pi-times" class="p-button-secondary" (click)="reset()"></button>
|
|
</p-inputGroup>
|
|
</div>
|
|
<div class="col-1 col-offset-7">
|
|
<p-button label="Refine" (click)="refine()"></p-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="surface-200 h-full">
|
|
<div class="wrapper">
|
|
<div class="grid">
|
|
@for (user of users; track user) {
|
|
<div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column">
|
|
<div class="surface-card shadow-2 p-2 flex flex-column flex-grow-1 justify-content-between" style="border-radius: 10px">
|
|
<div class="surface-card p-4 flex flex-column align-items-center md:flex-row md:align-items-stretch h-full">
|
|
<span>
|
|
@if(user.hasProfile){
|
|
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-5rem" />
|
|
} @else {
|
|
<img src="assets/images/person_placeholder.jpg" class="w-5rem" />
|
|
}
|
|
</span>
|
|
<div class="flex flex-column align-items-center md:align-items-stretch ml-4 mt-4 md:mt-0">
|
|
<p class="mt-0 mb-3 line-height-3 text-center md:text-left">{{ user.description }}</p>
|
|
<span class="text-900 font-medium mb-1 mt-auto">{{ user.firstname }} {{ user.lastname }}</span>
|
|
<div class="text-600 text-sm">{{ user.companyName }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 text-right flex justify-content-between align-items-center">
|
|
@if(user.hasCompanyLogo){
|
|
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-image" />
|
|
} @else {
|
|
<img src="assets/images/placeholder.png" class="rounded-image" />
|
|
}
|
|
<button pButton pRipple icon="pi pi-arrow-right" iconPos="right" label="View Full profile" class="p-button-rounded p-button-success" [routerLink]="['/details-user', user.id]"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="mb-2 surface-200 flex align-items-center justify-content-center paginator-bar">
|
|
<div class="mx-1 text-color">Total number of Professionals/Brokers: {{ totalRecords }}</div>
|
|
<p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="container mx-auto px-4 py-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Amanda Taylor -->
|
|
@for (user of users; track user) {
|
|
<div class="bg-white rounded-lg shadow-md p-6 flex flex-col justify-between">
|
|
<div class="flex items-start space-x-4">
|
|
<!-- <img src="https://placehold.co/80x105" alt="Portrait of Amanda Taylor, a professional woman with long dark hair" class="rounded-md w-20 h-26 object-cover" /> -->
|
|
@if(user.hasProfile){
|
|
<img src="{{ env.imageBaseUrl }}/pictures/profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="rounded-md w-20 h-26 object-cover" />
|
|
} @else {
|
|
<img src="assets/images/person_placeholder.jpg" class="rounded-md w-20 h-26 object-cover" />
|
|
}
|
|
<div class="flex-1">
|
|
<p class="text-sm text-gray-800 mb-2">{{ user.description }}</p>
|
|
<h3 class="text-lg font-semibold">{{ user.firstname }} {{ user.lastname }}</h3>
|
|
<p class="text-sm text-gray-600">{{ user.companyName }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<!-- <img src="https://placehold.co/35x45" alt="Lone Star Business Brokers logo" class="w-8 h-10 object-contain" /> -->
|
|
@if(user.hasCompanyLogo){
|
|
<img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-8 h-10 object-contain" />
|
|
} @else {
|
|
<img src="assets/images/placeholder.png" class="w-8 h-10 object-contain" />
|
|
}
|
|
<button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-full flex items-center" [routerLink]="['/details-user', user.id]">
|
|
View Full profile
|
|
<i class="fas fa-arrow-right ml-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|