Umbau: header & businessListing

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

@@ -1,4 +1,4 @@
-<div id="sky-line" class="hidden-lg-down"></div>
+<!-- <div id="sky-line" class="hidden-lg-down"></div>
 <div class="search">
   <div class="wrapper">
     <div class="grid p-4 align-items-center">
@@ -82,4 +82,33 @@
       <p-paginator (onPageChange)="onPageChange($event)" [first]="first" [rows]="rows" [totalRecords]="totalRecords" [rowsPerPageOptions]="[12, 24, 48]"></p-paginator>
     </div>
   </div>
+</div> -->
+<!-- business-listing.component.html -->
+<!-- <div class="w-full bg-slate-100"> -->
+<div class="container mx-auto p-4">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    @for (listing of listings; track listing.id) {
+    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+      <div class="p-4 flex flex-col h-full relative">
+        <div class="flex items-center mb-2">
+          <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
+          <span [class]="selectOptions.getTextColorType(listing.type)" class="font-semibold">{{ selectOptions.getBusiness(listing.type) }}</span>
+        </div>
+        <h2 class="text-lg font-semibold mb-2">{{ listing.title }}</h2>
+        <p class="text-sm text-gray-600 mb-1">Asking price: {{ listing.price | currency }}</p>
+        <p class="text-sm text-gray-600 mb-1">Sales revenue: {{ listing.salesRevenue | currency }}</p>
+        <p class="text-sm text-gray-600 mb-1">Net profit: {{ listing.cashFlow | currency }}</p>
+        <p class="text-sm text-gray-600 mb-1">Location: {{ selectOptions.getState(listing.state) }}</p>
+        <p class="text-sm text-gray-600 mb-1">Established: {{ listing.established }}</p>
+        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[70px] right-[30px] h-[35px] w-auto" />
+        <div class="flex-grow"></div>
+        <button class="bg-green-500 text-white px-4 py-2 rounded-md w-full flex items-center justify-center mt-2" [routerLink]="['/details-business-listing', listing.id]">
+          View Full Listing
+          <i class="fas fa-arrow-right ml-2"></i>
+        </button>
+      </div>
+    </div>
+    }
+  </div>
 </div>
+<!-- </div> -->

bizmatch/src/app/pages/listings/business-listings/business-listings.component.scss

@@ -1,30 +1,32 @@
-#sky-line {
-  background-image: url(../../../../assets/images/bw-sky.jpg);
-  height: 204px;
-  background-position: bottom;
-  background-size: cover;
-  margin-bottom: -1px;
-}
-.search {
-  background-color: #343f69;
-}
-::ng-deep p-paginator div {
-  background-color: var(--surface-200) !important;
-}
-.icon-pos {
-  position: absolute;
-  bottom: 1.5rem; /* Gleich dem Padding des Containers */
-  right: 1.5rem; /* Gleich dem Padding des Containers */
-}
-.rounded-image {
-  border-radius: 6px;
-  // width: 100px;
-  max-width: 100px;
-  height: 35px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 1px 1px;
-  object-fit: contain;
-}
-::ng-deep span.p-button-label {
-  font-weight: 500;
+// #sky-line {
+//   background-image: url(../../../../assets/images/bw-sky.jpg);
+//   height: 204px;
+//   background-position: bottom;
+//   background-size: cover;
+//   margin-bottom: -1px;
+// }
+// .search {
+//   background-color: #343f69;
+// }
+// ::ng-deep p-paginator div {
+//   background-color: var(--surface-200) !important;
+// }
+// .icon-pos {
+//   position: absolute;
+//   bottom: 1.5rem;
+//   right: 1.5rem;
+// }
+// .rounded-image {
+//   border-radius: 6px;
+//   max-width: 100px;
+//   height: 35px;
+//   border: 1px solid rgba(0, 0, 0, 0.2);
+//   padding: 1px 1px;
+//   object-fit: contain;
+// }
+// ::ng-deep span.p-button-label {
+//   font-weight: 500;
+// }
+:host {
+  width: 100%;
 }

bizmatch/src/app/pages/listings/business-listings/business-listings.component.ts

@@ -79,7 +79,9 @@ export class BusinessListingsComponent {
       this.init();
     });
   }
-  async ngOnInit() {}
+  async ngOnInit() {
+    //initFlowbite();
+  }
   async init() {
     const statesResult = await this.listingsService.getAllStates('business');
     this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
@@ -94,8 +96,8 @@ export class BusinessListingsComponent {
     const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
     this.listings = listingReponse.data;
     this.totalRecords = listingReponse.total;
-    this.cdRef.markForCheck();
-    this.cdRef.detectChanges();
+    // this.cdRef.markForCheck();
+    // this.cdRef.detectChanges();
   }
   onPageChange(event: any) {
     this.criteria.start = event.first;