Umbau auf postgres 2. step

bizmatch/src/app/pages/listings/broker-listings/broker-listings.component.html

@@ -0,0 +1,59 @@
+<div id="sky-line" class="hidden-lg-down">
+</div>
+<div class="search">
+    <div class="wrapper">
+        <div class="grid p-4 align-items-center">
+            <div [ngClass]="{'col-offset-9':type==='commercialProperty','col-offset-7':type==='professionals_brokers'}"
+                class="col-1">
+                <p-button label="Refine" (click)="search()"></p-button>
+            </div>
+        </div>
+
+    </div>
+</div>
+<div class="surface-200 h-full">
+    <div class="wrapper">
+        <div class="grid">
+
+            @for (user of users; track user.id) {
+            <div class="col-12 lg:col-6 xl:col-4 p-4 flex flex-column flex-grow-1">
+                <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="{{environment.apiBaseUrl}}/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="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif" 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">
+            <div class="mx-1 text-color">Total number of Listings: {{totalRecords}}</div>
+            <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows"
+                [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
+        </div>
+
+    </div>
+</div>