format on save, resolve compile errors, functionality 1. stage
This commit is contained in:
@@ -0,0 +1,90 @@
|
||||
<div class="surface-ground h-full">
|
||||
<div class="px-6 py-5">
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="flex justify-content-between align-items-center align-content-center">
|
||||
<div class="font-medium text-3xl text-900 mb-3">{{ listing?.title }}</div>
|
||||
<!-- <button pButton pRipple type="button" label="Go back to listings" icon="pi pi-user-plus" class="mr-3 p-button-rounded"></button> -->
|
||||
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
|
||||
</div>
|
||||
<!-- <div class="text-500 mb-5">Egestas sed tempus urna et pharetra pharetra massa massa ultricies.</div> -->
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ul class="list-none p-0 m-0 border-top-1 border-300">
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Description</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3" [innerHTML]="description"></div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Property Category</div>
|
||||
<div class="text-900 w-full md:w-10">{{ selectOptions.getCommercialProperty(listing.type) }}</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Located in</div>
|
||||
<div class="text-900 w-full md:w-10">{{ selectOptions.getState(listing.state) }}</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">City</div>
|
||||
<div class="text-900 w-full md:w-10">{{ listing.city }}</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Zip Code</div>
|
||||
<div class="text-900 w-full md:w-10">{{ listing.zipCode }}</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">County</div>
|
||||
<div class="text-900 w-full md:w-10">{{ listing.county }}</div>
|
||||
</li>
|
||||
<li class="flex align-items-center py-3 px-2 flex-wrap">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Asking Price:</div>
|
||||
<div class="text-900 w-full md:w-10">{{ listing.price | currency }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p-galleria [value]="propertyImages" [showIndicators]="true" [showThumbnails]="false" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5">
|
||||
<ng-template pTemplate="item" let-item>
|
||||
<img src="{{ environment.apiBaseUrl }}/property/{{ listing.id }}/{{ item.name }}" style="width: 100%" />
|
||||
</ng-template>
|
||||
<!-- <ng-template pTemplate="thumbnail" let-item>
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img src="{{environment.apiBaseUrl}}/property/{{listing.id}}/{{item.name}}" />
|
||||
</div>
|
||||
</ng-template> -->
|
||||
</p-galleria>
|
||||
@if(listing && user && (user.id===listing?.userId || isAdmin())){
|
||||
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/editListing', listing.id]"></button>
|
||||
}
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="surface-card p-4 border-round p-fluid">
|
||||
<div class="font-medium text-xl text-primary text-900 mb-3">Contact The Author of This Listing</div>
|
||||
<div class="font-italic text-sm text-900 mb-5">Please Include your contact info below:</div>
|
||||
<div class="grid formgrid p-fluid">
|
||||
<div class="field mb-4 col-12 md:col-6">
|
||||
<label for="name" class="font-medium text-900">Your Name</label>
|
||||
<input id="name" type="text" pInputText [(ngModel)]="mailinfo.sender.name" />
|
||||
</div>
|
||||
<div class="field mb-4 col-12 md:col-6">
|
||||
<label for="email" class="font-medium text-900">Your Email</label>
|
||||
<input id="email" type="text" pInputText [(ngModel)]="mailinfo.sender.email" />
|
||||
</div>
|
||||
<div class="field mb-4 col-12 md:col-6">
|
||||
<label for="phoneNumber" class="font-medium text-900">Phone Number</label>
|
||||
<input id="phoneNumber" type="text" pInputText [(ngModel)]="mailinfo.sender.phoneNumber" />
|
||||
</div>
|
||||
<div class="field mb-4 col-12 md:col-6">
|
||||
<label for="state" class="font-medium text-900">Country/State</label>
|
||||
<input id="state" type="text" pInputText [(ngModel)]="mailinfo.sender.state" />
|
||||
</div>
|
||||
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
|
||||
<div class="field mb-4 col-12">
|
||||
<label for="notes" class="font-medium text-900">Questions/Comments</label>
|
||||
<textarea id="notes" pInputTextarea [autoResize]="true" [rows]="5" [(ngModel)]="mailinfo.sender.comments"></textarea>
|
||||
</div>
|
||||
<div class="surface-border border-top-1 opacity-50 mb-4 col-12"></div>
|
||||
</div>
|
||||
<button pButton pRipple label="Submit" icon="pi pi-file" class="w-auto" (click)="mail()"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,87 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import onChange from 'on-change';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
import { ImageProperty, ListingCriteria, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { MailService } from '../../../services/mail.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'app-details-commercial-property-listing',
|
||||
standalone: true,
|
||||
imports: [SharedModule, GalleriaModule],
|
||||
providers: [MessageService],
|
||||
templateUrl: './details-commercial-property-listing.component.html',
|
||||
styleUrl: './details-commercial-property-listing.component.scss',
|
||||
})
|
||||
export class DetailsCommercialPropertyListingComponent {
|
||||
// listings: Array<BusinessListing>;
|
||||
responsiveOptions = [
|
||||
{
|
||||
breakpoint: '1199px',
|
||||
numVisible: 1,
|
||||
numScroll: 1,
|
||||
},
|
||||
{
|
||||
breakpoint: '991px',
|
||||
numVisible: 2,
|
||||
numScroll: 1,
|
||||
},
|
||||
{
|
||||
breakpoint: '767px',
|
||||
numVisible: 1,
|
||||
numScroll: 1,
|
||||
},
|
||||
];
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
private type: 'business' | 'commercialProperty' | undefined = this.activatedRoute.snapshot.params['type'] as 'business' | 'commercialProperty' | undefined;
|
||||
listing: CommercialPropertyListing;
|
||||
criteria: ListingCriteria;
|
||||
mailinfo: MailInfo;
|
||||
propertyImages: ImageProperty[] = [];
|
||||
environment = environment;
|
||||
user: User;
|
||||
description: SafeHtml;
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private listingsService: ListingsService,
|
||||
private router: Router,
|
||||
private userService: UserService,
|
||||
public selectOptions: SelectOptionsService,
|
||||
private mailService: MailService,
|
||||
private messageService: MessageService,
|
||||
private sanitizer: DomSanitizer,
|
||||
) {
|
||||
this.userService.getUserObservable().subscribe(user => {
|
||||
this.user = user;
|
||||
});
|
||||
this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
|
||||
this.mailinfo = { sender: {}, userId: '' };
|
||||
}
|
||||
|
||||
async ngOnInit() {
|
||||
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type));
|
||||
this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id);
|
||||
this.description = this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
|
||||
}
|
||||
back() {
|
||||
this.router.navigate(['commercialPropertyListings']);
|
||||
}
|
||||
isAdmin() {
|
||||
return this.userService.hasAdminRole();
|
||||
}
|
||||
async mail() {
|
||||
this.mailinfo.userId = this.listing.userId;
|
||||
await this.mailService.mail(this.mailinfo);
|
||||
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user