aknuth/bizmatch-project
1
0
Fork 0
Code Issues 9 Pull Requests Packages Projects 5 Releases Wiki Activity

Umbau commercial-edit & user-details

Browse Source
This commit is contained in:
Andreas Knuth
2024-07-05 17:39:01 +02:00
parent 677b95c21c
commit e0dbebb61c
6 changed files with 256 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

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

@@ -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);
}
}