Umbau commercial-edit & user-details

bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.scss

@@ -34,3 +34,20 @@
   margin-right: 0;
   font-weight: bold;
 }
+::ng-deep ul {
+  display: block;
+  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px; /* Standard-Einrückung für Listen */
+}
+::ng-deep li {
+  display: list-item; /* Zeigt das Element als Listenelement an */
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}

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

@@ -34,3 +34,20 @@
   margin-right: 0;
   font-weight: bold;
 }
+::ng-deep ul {
+  display: block;
+  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px; /* Standard-Einrückung für Listen */
+}
+::ng-deep li {
+  display: list-item; /* Zeigt das Element als Listenelement an */
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}

bizmatch/src/app/pages/details/details-user/details-user.component.html

@@ -139,172 +139,129 @@
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b">
       <div class="flex items-center space-x-4">
-        <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" />
+        <!-- <img src="https://placehold.co/80x80" alt="Profile picture of Avery Brown smiling" class="w-20 h-20 rounded-full" /> -->
+        @if(user.hasProfile){
+        <img src="{{ env.imageBaseUrl }}/pictures//profile/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-20 h-20 rounded-full object-cover" />
+        } @else {
+        <img src="assets/images/person_placeholder.jpg" class="w-20 h-20 rounded-full" />
+        }
         <div>
           <h1 class="text-2xl font-bold flex items-center">
-            Avery Brown
+            {{ user.firstname }} {{ user.lastname }}
             <span class="text-yellow-400 ml-2">&#9733;</span>
           </h1>
           <p class="text-gray-600">
             Company
             <span class="mx-1">-</span>
-            New Mexico Business Sales
+            {{ user.companyName }}
             <span class="mx-2">|</span>
             For Sale
             <span class="mx-1">-</span>
             <!-- <i class="fas fa-building text-red-500"></i> -->
-            <span>9</span>
+            <span>{{ businessListings?.length + commercialPropListings?.length }}</span>
           </p>
         </div>
-        <img src="https://placehold.co/45x60" class="w-11 h-14" />
+        @if(user.hasCompanyLogo){
+        <img src="{{ env.imageBaseUrl }}/pictures/logo/{{ emailToDirName(user.email) }}.avif?_ts={{ ts }}" class="w-11 h-14" />
+        }
+        <!-- <img src="https://placehold.co/45x60" class="w-11 h-14" /> -->
       </div>
-      <button class="text-red-500 text-2xl">&times;</button>
+      <button class="text-red-500 text-2xl" (click)="historyService.goBack()">&times;</button>
     </div>
 
     <!-- Description -->
-    <p class="p-4 text-gray-700">Helping business owners in southern New Mexico sell their businesses and assisting buyers in finding the perfect opportunity.</p>
+    <p class="p-4 text-gray-700">{{ user.description }}</p>
 
     <!-- Company Profile -->
     <div class="p-4">
       <h2 class="text-xl font-semibold mb-4">Company Profile</h2>
-      <p class="text-gray-700 mb-4">
+      <p class="text-gray-700 mb-4" [innerHTML]="companyOverview"></p>
-        New Mexico Business Sales is a trusted business brokerage firm serving the southern New Mexico market. Our team of experienced brokers is committed to providing personalized service and expert guidance to ensure
-        a smooth and successful transaction for our clients.
-      </p>
 
       <!-- Profile Details -->
       <div class="space-y-2">
         <div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
           <span class="font-semibold w-40 p-2">Name</span>
-          <span class="p-2 flex-grow">Avery Brown</span>
+          <span class="p-2 flex-grow">{{ user.firstname }} {{ user.lastname }}</span>
         </div>
         <div class="flex flex-col sm:flex-row sm:items-center">
           <span class="font-semibold w-40 p-2">Phone Number</span>
-          <span class="p-2 flex-grow">(575) 555-7890</span>
+          <span class="p-2 flex-grow">{{ formatPhoneNumber(user.phoneNumber) }}</span>
         </div>
         <div class="flex flex-col sm:flex-row sm:items-center bg-gray-100">
           <span class="font-semibold w-40 p-2">EMail Address</span>
-          <span class="p-2 flex-grow">avery.brown&#64;nmbizsales.com</span>
+          <span class="p-2 flex-grow">{{ user.email }}</span>
         </div>
         <div class="flex flex-col sm:flex-row sm:items-center">
           <span class="font-semibold w-40 p-2">Company Location</span>
-          <span class="p-2 flex-grow">Las Cruces - NM</span>
+          <span class="p-2 flex-grow">{{ user.companyLocation }}</span>
         </div>
       </div>
 
       <!-- Services -->
       <div class="mt-6">
         <h3 class="font-semibold mb-2">Services we offer</h3>
-        <h4 class="font-medium">What We Offer</h4>
+        <p class="text-gray-700 mb-4" [innerHTML]="offeredServices"></p>
-        <ul class="list-disc pl-5 text-gray-700">
-          <li>Business listings</li>
-          <li>Buyer search and qualification</li>
-          <li>Due diligence support</li>
-          <li>Financing assistance</li>
-          <li>Closing coordination</li>
-        </ul>
       </div>
 
       <!-- Areas Served -->
       <div class="mt-6">
         <h3 class="font-semibold mb-2">Areas (Counties) we serve</h3>
         <div class="flex flex-wrap gap-2">
-          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Doña Ana County-NM</span>
+          @for (area of user.areasServed; track area) {
-          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Otero County-NM</span>
+          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">{{ area.county }}-{{ area.state }}</span>
-          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Luna County-NM</span>
+          }
-          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Sierra County-NM</span>
-          <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-sm">Grant County-NM</span>
         </div>
       </div>
 
       <!-- Licensed In -->
       <div class="mt-6">
         <h3 class="font-semibold mb-2">Licensed In</h3>
-        <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">4.2700P-NM</span>
+        @for (license of user.licensedIn; track license) {
+        <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-sm">{{ license.registerNo }}-{{ license.state }}</span>
+        }
       </div>
     </div>
 
     <!-- Business Listings -->
+
     <div class="p-4">
+      @if(businessListings?.length>0){
       <h2 class="text-xl font-semibold mb-4">My Business Listings For Sale</h2>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="border rounded-lg p-4">
+        @for (listing of businessListings; track listing) {
+        <div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-business-listing', listing.id]">
           <div class="flex items-center mb-2">
-            <i class="fas fa-utensils text-blue-500 mr-2"></i>
+            <i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="mr-2"></i>
-            <span class="font-medium">Food and Restaurant</span>
+            <span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
           </div>
-          <p class="text-gray-700">Successful Coffee Shop in The Colony</p>
+          <p class="text-gray-700">{{ listing.title }}</p>
         </div>
-        <div class="border rounded-lg p-4">
+        }
-          <div class="flex items-center mb-2">
+      </div>
-            <i class="fas fa-utensils text-blue-500 mr-2"></i>
+      }
-            <span class="font-medium">Food and Restaurant</span>
+      <!-- Commercial Property Listings -->
-          </div>
+      @if(commercialPropListings?.length>0){
-          <p class="text-gray-700">Established Craft Beer Bar in Wylie</p>
+      <div class="p-4">
-        </div>
+        <h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
-        <div class="border rounded-lg p-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <div class="flex items-center mb-2">
+          @for (listing of commercialPropListings; track listing) {
-            <i class="fas fa-industry text-yellow-500 mr-2"></i>
+          <div class="border rounded-lg p-4 hover:cursor-pointer" [routerLink]="['/details-commercial-property-listing', listing.id]">
-            <span class="font-medium">Industrial Services</span>
+            <div class="flex items-center space-x-4">
-          </div>
+              @if (listing.imageOrder?.length>0){
-          <p class="text-gray-700">Profitable Electrical Contracting Business in New Braunfels</p>
+              <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ listing.imageOrder[0] }}?_ts={{ ts }}" class="w-12 h-12 object-cover rounded" />
-        </div>
+              } @else {
-        <div class="border rounded-lg p-4">
+              <img src="assets/images/placeholder_properties.jpg" class="w-12 h-12 object-cover rounded" />
-          <div class="flex items-center mb-2">
+              }
-            <i class="fas fa-dumbbell text-green-500 mr-2"></i>
+              <div>
-            <span class="font-medium">Service</span>
+                <p class="font-medium">{{ selectOptions.getCommercialProperty(listing.type) }}</p>
-          </div>
+                <p class="text-gray-700">{{ listing.title }}</p>
-          <p class="text-gray-700">Successful Fitness Center in Coppell</p>
+              </div>
-        </div>
+            </div>
-        <div class="border rounded-lg p-4">
-          <div class="flex items-center mb-2">
-            <i class="fas fa-building text-purple-500 mr-2"></i>
-            <span class="font-medium">Mixed Use</span>
-          </div>
-          <p class="text-gray-700">Mixed-Use Development Opportunity</p>
-        </div>
-        <div class="border rounded-lg p-4">
-          <div class="flex items-center mb-2">
-            <i class="fas fa-tree text-green-500 mr-2"></i>
-            <span class="font-medium">Land</span>
-          </div>
-          <p class="text-gray-700">Upscale Golf Course</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Commercial Property Listings -->
-    <div class="p-4">
-      <h2 class="text-xl font-semibold mb-4">My Commercial Property Listings For Sale</h2>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="border rounded-lg p-4">
-          <div class="flex items-center space-x-4">
-            <img src="https://placehold.co/45x45" alt="Car Dealership and Service Center" class="w-12 h-12 object-cover rounded" />
-            <div>
-              <p class="font-medium">Mixed Use</p>
-              <p class="text-gray-700">Car Dealership and Service Center</p>
-            </div>
-          </div>
-        </div>
-        <div class="border rounded-lg p-4">
-          <div class="flex items-center space-x-4">
-            <img src="https://placehold.co/45x45" alt="Cold Storage Warehouse" class="w-12 h-12 object-cover rounded" />
-            <div>
-              <p class="font-medium">Industrial</p>
-              <p class="text-gray-700">Cold Storage Warehouse</p>
-            </div>
-          </div>
-        </div>
-        <div class="border rounded-lg p-4">
-          <div class="flex items-center space-x-4">
-            <img src="https://placehold.co/45x45" alt="Retail Strip Center in Round Rock" class="w-12 h-12 object-cover rounded" />
-            <div>
-              <p class="font-medium">Retail</p>
-              <p class="text-gray-700">Retail Strip Center in Round Rock</p>
-            </div>
           </div>
+          }
         </div>
       </div>
+      }
     </div>
   </div>
 </div>

bizmatch/src/app/pages/details/details-user/details-user.component.scss

@@ -1,3 +1,53 @@
-:host ::ng-deep p {
+::ng-deep p {
-    margin:3px 0;
+  display: block;
-}
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-size: 1rem; /* oder 1rem, abhängig vom Browser und den Standardeinstellungen */
+  line-height: 1.5;
+}
+::ng-deep h1 {
+  display: block;
+  font-size: 2em; /* etwa 32px */
+  margin-top: 0.67em;
+  margin-bottom: 0.67em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+::ng-deep h2 {
+  display: block;
+  font-size: 1.5em; /* etwa 24px */
+  margin-top: 0.83em;
+  margin-bottom: 0.83em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+::ng-deep h3 {
+  display: block;
+  font-size: 1.17em; /* etwa 18.72px */
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: bold;
+}
+::ng-deep ul {
+  display: block;
+  list-style-type: disc; /* listet Punkte (•) vor jedem Listenelement auf */
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 40px; /* Standard-Einrückung für Listen */
+}
+::ng-deep li {
+  display: list-item; /* Zeigt das Element als Listenelement an */
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+}

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

@@ -142,3 +142,104 @@
   <p-toast></p-toast>
   <p-confirmDialog></p-confirmDialog>
 </div> -->
+
+<div class="container mx-auto p-4">
+  <div class="bg-white rounded-lg shadow-md p-6">
+    <h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
+    <form #listingForm="ngForm">
+      <div class="mb-4">
+        <label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
+        <select id="listingsCategory" [(ngModel)]="listing.listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
+          <option value="business">Business</option>
+          <option value="commercialProperty">Commercial Property</option>
+        </select>
+      </div>
+
+      <div class="mb-4">
+        <label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
+        <input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
+      </div>
+
+      <div class="mb-4">
+        <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
+        <quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor>
+      </div>
+
+      <div class="mb-4">
+        <label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
+        <ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
+      </div>
+
+      <div class="flex mb-4 space-x-4">
+        <div class="w-1/2">
+          <label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
+          <ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
+        </div>
+        <div class="w-1/2">
+          <label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
+          <input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
+        </div>
+      </div>
+
+      <div class="flex mb-4 space-x-4">
+        <div class="w-1/2">
+          <label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
+          <input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
+        </div>
+        <div class="w-1/2">
+          <label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
+          <input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
+        </div>
+      </div>
+
+      <!-- <div class="mb-4">
+        <label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
+        <textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
+      </div> -->
+
+      <div class="flex items-center mb-4">
+        <div class="w-1/2">
+          <label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
+          <input
+            type="text"
+            id="price"
+            [(ngModel)]="listing.price"
+            name="price"
+            class="w-full p-2 border border-gray-300 rounded-md"
+            [options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
+            currencyMask
+          />
+        </div>
+        <div class="w-1/2 flex justify-center">
+          <label class="flex items-center cursor-pointer">
+            <div class="relative">
+              <input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />
+              <div class="toggle-bg block w-12 h-6 rounded-full bg-gray-600 transition"></div>
+            </div>
+            <div class="ml-3 text-gray-700 font-medium">Draft Mode (Will not be shown as public listing)</div>
+          </label>
+        </div>
+      </div>
+      <div class="container mx-auto p-4">
+        <div cdkDropList class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" (cdkDropListDropped)="drop($event)">
+          @for (image of listing.imageOrder; track listing.imageOrder) {
+          <div cdkDrag class="relative aspect-video cursor-move">
+            <!-- <img [src]="image" class="w-full h-full object-cover rounded-lg shadow-md" /> -->
+            <img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
+            <div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </div>
+          </div>
+          }
+        </div>
+      </div>
+      @if (mode==='create'){
+      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Post Listing</button>
+      } @else {
+      <button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
+      }
+    </form>
+  </div>
+</div>

bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts

@@ -5,11 +5,14 @@ import { ListingsService } from '../../../services/listings.service';
 import { SelectOptionsService } from '../../../services/select-options.service';
 import { createDefaultCommercialPropertyListing, map2User, routeListingWithState } from '../../../utils/utils';
 
-import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { NgSelectModule } from '@ng-select/ng-select';
 import { AngularCropperjsModule } from 'angular-cropperjs';
 import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
 import { KeycloakService } from 'keycloak-angular';
+import { NgxCurrencyDirective } from 'ngx-currency';
+import { QuillModule } from 'ngx-quill';
 import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
 import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
 import { environment } from '../../../../environments/environment';
@@ -23,7 +26,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
 @Component({
   selector: 'commercial-property-listing',
   standalone: true,
-  imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule],
+  imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
   providers: [],
   templateUrl: './edit-commercial-property-listing.component.html',
   styleUrl: './edit-commercial-property-listing.component.scss',
@@ -68,6 +71,9 @@ export class EditCommercialPropertyListingComponent {
   typesOfCommercialProperty = [];
   env = environment;
   ts = new Date().getTime();
+  quillModules = {
+    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
+  };
   constructor(
     public selectOptions: SelectOptionsService,
     private router: Router,
@@ -197,4 +203,7 @@ export class EditCommercialPropertyListingComponent {
   changeListingCategory(value: 'business' | 'commercialProperty') {
     routeListingWithState(this.router, value, this.listing);
   }
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
+  }
 }