This commit is contained in:
Andreas Knuth 2024-08-15 12:36:54 +02:00
parent 7f756a71e8
commit 8c6c6e3dbd
8 changed files with 89 additions and 44 deletions

View File

@ -90,61 +90,67 @@
<div>
<label for="price" class="block mb-2 text-sm font-medium text-gray-900">Price</label>
<div class="flex items-center space-x-2">
<input
<app-validated-price name="price-from" [(ngModel)]="criteria.minPrice" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
<!-- <input
type="number"
id="price-from"
[(ngModel)]="criteria.minPrice"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="From"
/>
/> -->
<span>-</span>
<input
<!-- <input
type="number"
id="price-to"
[(ngModel)]="criteria.maxPrice"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="To"
/>
/> -->
<app-validated-price name="price-to" [(ngModel)]="criteria.maxPrice" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
</div>
</div>
<div>
<label for="salesRevenue" class="block mb-2 text-sm font-medium text-gray-900">Sales Revenue</label>
<div class="flex items-center space-x-2">
<input
<!-- <input
type="number"
id="salesRevenue-from"
[(ngModel)]="criteria.minRevenue"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="From"
/>
/> -->
<app-validated-price name="salesRevenue-from" [(ngModel)]="criteria.minRevenue" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
<span>-</span>
<input
<!-- <input
type="number"
id="salesRevenue-to"
[(ngModel)]="criteria.maxRevenue"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="To"
/>
/> -->
<app-validated-price name="salesRevenue-to" [(ngModel)]="criteria.maxRevenue" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
</div>
</div>
<div>
<label for="cashflow" class="block mb-2 text-sm font-medium text-gray-900">Cashflow</label>
<div class="flex items-center space-x-2">
<input
<!-- <input
type="number"
id="cashflow-from"
[(ngModel)]="criteria.minCashFlow"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="From"
/>
/> -->
<app-validated-price name="cashflow-from" [(ngModel)]="criteria.minCashFlow" placeholder="From" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
<span>-</span>
<input
<app-validated-price name="cashflow-to" [(ngModel)]="criteria.maxCashFlow" placeholder="To" inputClasses="bg-gray-50 text-sm !mt-0 p-2.5"></app-validated-price>
<!-- <input
type="number"
id="cashflow-to"
[(ngModel)]="criteria.maxCashFlow"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-1/2 p-2.5"
placeholder="To"
/>
/> -->
</div>
</div>
<div>
@ -181,15 +187,33 @@
<label class="block mb-2 text-sm font-medium text-gray-900">Type of Property</label>
<div class="space-y-2">
<div class="flex items-center">
<input [(ngModel)]="criteria.realEstateChecked" type="radio" id="realEstateChecked" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" checked />
<input
[(ngModel)]="criteria.realEstateChecked"
(ngModelChange)="onCheckboxChange('realEstateChecked', $event)"
type="checkbox"
name="realEstateChecked"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="realEstateChecked" class="ml-2 text-sm font-medium text-gray-900">Real Estate</label>
</div>
<div class="flex items-center">
<input [(ngModel)]="criteria.leasedLocation" type="radio" id="leasedLocation" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" />
<input
[(ngModel)]="criteria.leasedLocation"
(ngModelChange)="onCheckboxChange('leasedLocation', $event)"
type="checkbox"
name="leasedLocation"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="leasedLocation" class="ml-2 text-sm font-medium text-gray-900">Leased Location</label>
</div>
<div class="flex items-center">
<input [(ngModel)]="criteria.franchiseResale" type="radio" id="franchiseResale" name="wbs" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500" />
<input
[(ngModel)]="criteria.franchiseResale"
(ngModelChange)="onCheckboxChange('franchiseResale', $event)"
type="checkbox"
name="franchiseResale"
class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500"
/>
<label for="franchiseResale" class="ml-2 text-sm font-medium text-gray-900">Franchise</label>
</div>
</div>

View File

@ -12,12 +12,13 @@ import { UserService } from '../../services/user.service';
import { SharedModule } from '../../shared/shared/shared.module';
import { resetBusinessListingCriteria, resetCommercialPropertyListingCriteria, resetUserListingCriteria } from '../../utils/utils';
import { ValidatedCityComponent } from '../validated-city/validated-city.component';
import { ValidatedPriceComponent } from '../validated-price/validated-price.component';
import { ModalService } from './modal.service';
@UntilDestroy()
@Component({
selector: 'app-search-modal',
standalone: true,
imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule, ValidatedCityComponent],
imports: [SharedModule, AsyncPipe, NgIf, NgSelectModule, ValidatedCityComponent, ValidatedPriceComponent],
templateUrl: './search-modal.component.html',
styleUrl: './search-modal.component.scss',
})
@ -71,22 +72,6 @@ export class SearchModalComponent {
}
}
}
// private loadCities() {
// this.cities$ = concat(
// of([]), // default items
// this.cityInput$.pipe(
// distinctUntilChanged(),
// tap(() => (this.cityLoading = true)),
// switchMap(term =>
// this.geoService.findCitiesStartingWith(term).pipe(
// catchError(() => of([])), // empty list on error
// // map(cities => cities.map(city => city.city)), // transform the list of objects to a list of city names
// tap(() => (this.cityLoading = false)),
// ),
// ),
// ),
// );
// }
private loadCounties() {
this.counties$ = concat(
of([]), // default items
@ -169,4 +154,13 @@ export class SearchModalComponent {
close() {
this.modalService.reject(this.backupCriteria);
}
onCheckboxChange(checkbox: string, value: boolean) {
// Deaktivieren Sie alle Checkboxes
(<BusinessListingCriteria>this.criteria).realEstateChecked = false;
(<BusinessListingCriteria>this.criteria).leasedLocation = false;
(<BusinessListingCriteria>this.criteria).franchiseResale = false;
// Aktivieren Sie nur die aktuell ausgewählte Checkbox
this.criteria[checkbox] = value;
}
}

View File

@ -1,4 +1,5 @@
<div>
@if(label){
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
@ -11,6 +12,7 @@
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
}
<input
type="text"
[id]="name"
@ -18,9 +20,10 @@
(ngModelChange)="onInputChange($event)"
(blur)="onTouched()"
[attr.name]="name"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 {{ inputClasses }}"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
autocomplete="off"
[placeholder]="placeholder"
/>
</div>

View File

@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
import { Component, forwardRef } from '@angular/core';
import { Component, forwardRef, Input } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgxCurrencyDirective } from 'ngx-currency';
import { BaseInputComponent } from '../base-input/base-input.component';
@ -18,14 +18,17 @@ import { ValidationMessagesService } from '../validation-messages.service';
},
],
templateUrl: './validated-price.component.html',
styles: `:host{width:100%}`,
})
export class ValidatedPriceComponent extends BaseInputComponent {
@Input() inputClasses: string;
@Input() placeholder: string;
constructor(validationMessagesService: ValidationMessagesService) {
super(validationMessagesService);
}
onInputChange(event: Event): void {
this.value = event;
this.value = !event ? null : event;
this.onChange(event);
}
}

View File

@ -101,9 +101,9 @@
<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 }}</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">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" />

View File

@ -19,7 +19,7 @@
}
</h3>
<p class="text-gray-600 mb-2">{{ listing.location.name }}</p>
<p class="text-xl font-bold mb-4">{{ listing.price | currency }}</p>
<p class="text-xl font-bold mb-4">{{ listing.price | currency : 'USD' : 'symbol' : '1.0-0' }}</p>
<button [routerLink]="['/details-commercial-property-listing', listing.id]" class="bg-green-500 text-white px-4 py-2 rounded-full w-full hover:bg-green-600 transition duration-300">
View Full Listing <i class="fas fa-arrow-right ml-1"></i>
</button>

View File

@ -129,15 +129,36 @@
<div class="flex mb-4 space-x-4">
<div class="flex items-center">
<input type="checkbox" id="realEstateIncluded" [(ngModel)]="listing.realEstateIncluded" (change)="onCheckboxChange('realEstateIncluded')" name="realEstateIncluded" class="mr-2" />
<input
type="checkbox"
id="realEstateIncluded"
[(ngModel)]="listing.realEstateIncluded"
(ngModelChange)="onCheckboxChange('realEstateIncluded', $event)"
name="realEstateIncluded"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
/>
<label for="realEstateIncluded" class="text-sm font-bold text-gray-700">Real Estate Included</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="leasedLocation" [(ngModel)]="listing.leasedLocation" (change)="onCheckboxChange('leasedLocation')" name="leasedLocation" class="mr-2" />
<input
type="checkbox"
id="leasedLocation"
[(ngModel)]="listing.leasedLocation"
(ngModelChange)="onCheckboxChange('leasedLocation', $event)"
name="leasedLocation"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
/>
<label for="leasedLocation" class="text-sm font-bold text-gray-700">Leased Location</label>
</div>
<div class="flex items-center">
<input type="checkbox" id="franchiseResale" [(ngModel)]="listing.franchiseResale" (change)="onCheckboxChange('franchiseResale')" name="franchiseResale" class="mr-2" />
<input
type="checkbox"
id="franchiseResale"
[(ngModel)]="listing.franchiseResale"
(ngModelChange)="onCheckboxChange('franchiseResale', $event)"
name="franchiseResale"
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 mr-2"
/>
<label for="franchiseResale" class="text-sm font-bold text-gray-700">Franchise Re-Sale</label>
</div>
</div>

View File

@ -160,13 +160,13 @@ export class EditBusinessListingComponent {
}
target[keys[keys.length - 1]] = value;
}
onCheckboxChange(checkbox: string) {
onCheckboxChange(checkbox: string, value: boolean) {
// Deaktivieren Sie alle Checkboxes
this.listing.realEstateIncluded = false;
this.listing.leasedLocation = false;
this.listing.franchiseResale = false;
// Aktivieren Sie nur die aktuell ausgewählte Checkbox
this.listing[checkbox] = true;
this.listing[checkbox] = value;
}
}