Ticket Fixing: #111, #110, #108 (SortBy)

bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html

@@ -22,7 +22,7 @@
           <div class="py-4 print:hidden">
             @if(listing && listingUser && (listingUser?.email===user?.email || isAdmin())){
             <div class="inline">
-              <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center" [routerLink]="['/editBusinessListing', listing.id]">
+              <button class="share share-edit text-white font-bold text-xs py-1.5 px-2 inline-flex items-center" [routerLink]="['/editCommercialPropertyListing', listing.id]">
                 <i class="fa-regular fa-pen-to-square"></i>
                 <span class="ml-2">Edit</span>
               </button>

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

@@ -18,11 +18,15 @@
           <span class="bg-red-100 text-red-800 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Draft</span>
           }
         </h2>
-        <!-- State Badge -->
-        <span class="w-fit inline-flex items-center justify-center px-2 py-1 mb-4 text-xs font-bold leading-none bg-gray-200 text-gray-700 rounded-full">
-          {{ selectOptions.getState(listing.location.state) }}
-        </span>
-
+        <div class="flex justify-between">
+          <!-- State Badge -->
+          <span class="w-fit inline-flex items-center justify-center px-2 py-1 mb-4 text-xs font-bold leading-none bg-gray-200 text-gray-700 rounded-full">
+            {{ selectOptions.getState(listing.location.state) }}
+          </span>
+          <p class="text-sm text-gray-600 mb-4">
+            <strong>{{ getDaysListed(listing) }} days listed</strong>
+          </p>
+        </div>
         <!-- Asking Price hervorgehoben -->
         <p class="text-base font-bold text-gray-800 mb-2">
           <strong>Asking price:</strong> <span class="text-green-600"> {{ listing.price | currency : 'USD' : 'symbol' : '1.0-0' }}</span>
@@ -31,6 +35,7 @@
         <p class="text-sm text-gray-600 mb-2"><strong>Net profit:</strong> {{ listing.cashFlow | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
         <p class="text-sm text-gray-600 mb-2"><strong>Location:</strong> {{ listing.location.name }}</p>
         <p class="text-sm text-gray-600 mb-4"><strong>Established:</strong> {{ listing.established }}</p>
+
         <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ listing.imageName }}.avif?_ts={{ ts }}" alt="Company logo" class="absolute bottom-[80px] right-[20px] h-[45px] w-auto" />
         <!-- Position und Größe des Bildes angepasst -->
         <div class="flex-grow"></div>
@@ -48,37 +53,6 @@
   </div>
 </div>
 
-<!-- <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 z-[0]">
-        <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 }}
-          @if(listing.draft){
-          <span class="bg-red-100 text-red-800 text-sm font-medium me-2 ml-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Draft</span>
-          }
-        </h2>
-        <p class="text-sm text-gray-600 mb-1">Asking price: {{ listing.price | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
-        <p class="text-sm text-gray-600 mb-1">Sales revenue: {{ listing.salesRevenue | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
-        <p class="text-sm text-gray-600 mb-1">Net profit: {{ listing.cashFlow | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
-        <p class="text-sm text-gray-600 mb-1">Location: {{ listing.location.name }} - {{ listing.location.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> -->
 @if(pageCount>1){
 <app-paginator [page]="page" [pageCount]="pageCount" (pageChange)="onPageChange($event)"></app-paginator>
 }

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import dayjs from 'dayjs';
 import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
 import { BusinessListingCriteria, LISTINGS_PER_PAGE, ListingType, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -83,4 +84,7 @@ export class BusinessListingsComponent {
   reset() {
     this.criteria.title = null;
   }
+  getDaysListed(listing: BusinessListing) {
+    return dayjs().diff(listing.created, 'day');
+  }
 }

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.html

@@ -8,9 +8,14 @@
       <img src="assets/images/placeholder_properties.jpg" alt="Image" class="w-full h-48 object-cover" />
       }
       <div class="p-4 flex flex-col flex-grow">
-        <div class="flex items-center justify-between mb-2">
+        <span [class]="selectOptions.getTextColorTypeOfCommercial(listing.type)" class="text-sm font-semibold"
+          ><i [class]="selectOptions.getIconAndTextColorTypeOfCommercials(listing.type)" class="mr-1"></i> {{ selectOptions.getCommercialProperty(listing.type) }}</span
+        >
+        <div class="flex items-center justify-between my-2">
           <span class="bg-gray-200 text-gray-700 text-xs font-semibold px-2 py-1 rounded">{{ selectOptions.getState(listing.location.state) }}</span>
-          <span class="text-gray-600 text-sm"><i [class]="selectOptions.getIconTypeOfCommercials(listing.type)" class="mr-1"></i> {{ selectOptions.getCommercialProperty(listing.type) }}</span>
+          <p class="text-sm text-gray-600 mb-4">
+            <strong>{{ getDaysListed(listing) }} days listed</strong>
+          </p>
         </div>
         <h3 class="text-lg font-semibold mb-2">
           {{ listing.title }}

bizmatch/src/app/pages/listings/commercial-property-listings/commercial-property-listings.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import dayjs from 'dayjs';
 import { CommercialPropertyListing } from '../../../../../../bizmatch-server/src/models/db.model';
 import { CommercialPropertyListingCriteria, LISTINGS_PER_PAGE, ResponseCommercialPropertyListingArray } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -81,4 +82,7 @@ export class CommercialPropertyListingsComponent {
   getTS() {
     return new Date().getTime();
   }
+  getDaysListed(listing: CommercialPropertyListing) {
+    return dayjs().diff(listing.created, 'day');
+  }
 }

bizmatch/src/app/pages/pricing/pricing.component.html

@@ -33,9 +33,11 @@
           </li>
         </ul>
       </div>
+      @if(!pricingOverview){
       <div class="px-6 py-4 mt-auto">
         <button (click)="register()" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
       </div>
+      }
     </div>
     }
 
@@ -79,9 +81,11 @@
           </li>
         </ul>
       </div>
+      @if(!pricingOverview){
       <div class="px-6 py-4 mt-auto">
         <button (click)="register('price_1PpSkpDjmFBOcNBs9UDPgBos')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
       </div>
+      }
     </div>
 
     <!-- Business Broker Plan -->
@@ -128,9 +132,11 @@
           </li>
         </ul>
       </div>
+      @if(!pricingOverview){
       <div class="px-6 py-4 mt-auto">
         <button (click)="register('price_1PpSmRDjmFBOcNBsaaSp2nk9')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
       </div>
+      }
     </div>
   </div>
 

bizmatch/src/app/pages/pricing/pricing.component.ts

@@ -21,6 +21,7 @@ import { map2User } from '../../utils/utils';
 export class PricingComponent {
   private apiBaseUrl = environment.apiBaseUrl;
   private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  pricingOverview: boolean | undefined = this.activatedRoute.snapshot.data['pricingOverview'] as boolean | undefined;
   keycloakUser: KeycloakUser;
   user: User;
   constructor(public keycloakService: KeycloakService, private http: HttpClient, private stripeService: StripeService, private activatedRoute: ActivatedRoute, private userService: UserService, private router: Router) {}
@@ -36,12 +37,14 @@ export class PricingComponent {
         this.router.navigate([`/account`]);
       } else if (this.id) {
         this.checkout({ priceId: atob(this.id), email: this.keycloakUser.email, name: `${this.keycloakUser.firstName} ${this.keycloakUser.lastName}` });
-      } else if (!this.id) {
+      } else if (!this.id && !this.pricingOverview) {
         this.user = await this.userService.getByMail(this.keycloakUser.email);
         if (this.user.subscriptionId) {
           this.router.navigate([`/account`]);
         }
       }
+    } else {
+      this.pricingOverview = false;
     }
   }