64 lines
3.2 KiB
HTML
64 lines
3.2 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/{{ user.id }}.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/{{ user.id }}.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>
|