format on save, resolve compile errors, functionality 1. stage
This commit is contained in:
@@ -1,132 +1,121 @@
|
||||
<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="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>
|
||||
<p-button icon="pi pi-times" [rounded]="true" severity="danger" (click)="back()"></p-button>
|
||||
</div> -->
|
||||
<div class="surface-section px-6 pt-5">
|
||||
<div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
|
||||
<div class="flex align-items-start flex-column md:flex-row">
|
||||
@if(user.hasProfile){
|
||||
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}.avif" class="mr-5 mb-3 lg:mb-0"
|
||||
style="width:90px" />
|
||||
} @else {
|
||||
<img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width:90px" />
|
||||
}
|
||||
<div>
|
||||
<span class="text-900 font-medium text-3xl">{{user.firstname}} {{user.lastname}}</span>
|
||||
<i class="pi pi-star text-2xl ml-4 text-yellow-500"></i>
|
||||
<div class="flex align-items-center flex-wrap text-sm">
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Company</span>
|
||||
<div class="text-700 mt-2">{{user.companyName}}</div>
|
||||
</div>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">For Sale</span>
|
||||
<div class="text-700 mt-2">12</div>
|
||||
</div>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Sold</span>
|
||||
<div class="text-700 mt-2">8</div>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<!-- <span class="font-medium text-500">Logo</span> -->
|
||||
<div >
|
||||
@if(user.hasCompanyLogo){
|
||||
<img src="{{environment.apiBaseUrl}}/logo/{{user.id}}.avif"
|
||||
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" />
|
||||
}
|
||||
<!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
|
||||
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
|
||||
</div>
|
||||
<!-- <div class="text-700 mt-2">130</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="surface-section px-6 pt-5">
|
||||
<div class="flex align-items-start flex-column lg:flex-row lg:justify-content-between">
|
||||
<div class="flex align-items-start flex-column md:flex-row">
|
||||
@if(user.hasProfile){
|
||||
<img src="{{ environment.apiBaseUrl }}/profile/{{ user.id }}.avif" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
|
||||
} @else {
|
||||
<img src="assets/images/person_placeholder.jpg" class="mr-5 mb-3 lg:mb-0" style="width: 90px" />
|
||||
}
|
||||
<div>
|
||||
<span class="text-900 font-medium text-3xl">{{ user.firstname }} {{ user.lastname }}</span>
|
||||
<i class="pi pi-star text-2xl ml-4 text-yellow-500"></i>
|
||||
<div class="flex align-items-center flex-wrap text-sm">
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Company</span>
|
||||
<div class="text-700 mt-2">{{ user.companyName }}</div>
|
||||
</div>
|
||||
<p class="mt-2 text-700 line-height-3 text-l font-semibold">{{user.description}}</p>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">For Sale</span>
|
||||
<div class="text-700 mt-2">12</div>
|
||||
</div>
|
||||
<div class="mr-5 mt-3">
|
||||
<span class="font-medium text-500">Sold</span>
|
||||
<div class="text-700 mt-2">8</div>
|
||||
</div>
|
||||
<div class="flex align-items-center mt-3">
|
||||
<!-- <span class="font-medium text-500">Logo</span> -->
|
||||
<div>
|
||||
@if(user.hasCompanyLogo){
|
||||
<img src="{{ environment.apiBaseUrl }}/logo/{{ user.id }}.avif" class="mr-5 lg:mb-0" style="height: 60px; max-width: 100px" />
|
||||
}
|
||||
<!-- <img *ngIf="!user.hasCompanyLogo" src="assets/images/placeholder.png"
|
||||
class="mr-5 lg:mb-0" style="height:60px;max-width:100px" /> -->
|
||||
</div>
|
||||
<!-- <div class="text-700 mt-2">130</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Company Profile</div>
|
||||
<div class="text-500 mb-5" [innerHTML]="companyOverview"></div>
|
||||
<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 surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Name</div>
|
||||
<div class="text-900 w-full md:w-10">{{user.firstname}} {{user.lastname}}</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">Phone Number</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{user.phoneNumber}}</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">EMail Address</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{user.email}}</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">Company Location</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{user.companyLocation}}</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">Services we offer</div>
|
||||
<div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></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">Areas we serve</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
@for (area of user.areasServed; track area) {
|
||||
<p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag>
|
||||
}
|
||||
<!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-2 text-700 line-height-3 text-l font-semibold">{{ user.description }}</p>
|
||||
</div>
|
||||
<div class="px-6 py-5">
|
||||
<div class="surface-card p-4 shadow-2 border-round">
|
||||
<div class="font-medium text-3xl text-900 mb-3">Company Profile</div>
|
||||
<div class="text-500 mb-5" [innerHTML]="companyOverview"></div>
|
||||
<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 surface-ground">
|
||||
<div class="text-500 w-full md:w-2 font-medium">Name</div>
|
||||
<div class="text-900 w-full md:w-10">{{ user.firstname }} {{ user.lastname }}</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">Phone Number</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{ user.phoneNumber }}</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">EMail Address</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{ user.email }}</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">Company Location</div>
|
||||
<div class="text-900 w-full md:w-10 line-height-3">{{ user.companyLocation }}</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">Services we offer</div>
|
||||
<div class="text-900 w-full md:w-10" [innerHTML]="offeredServices"></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">Areas we serve</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
@for (area of user.areasServed; track area) {
|
||||
<p-tag styleClass="mr-2" [value]="area" [rounded]="true"></p-tag>
|
||||
}
|
||||
<!-- <p-tag styleClass="mr-2" severity="success" value="Javascript" [rounded]="true"></p-tag>
|
||||
<p-tag styleClass="mr-2" severity="danger" value="Python" [rounded]="true"></p-tag>
|
||||
<p-tag severity="warning" value="SQL" [rounded]="true"></p-tag> -->
|
||||
</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">Licensed In</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
@for (license of userLicensedIn; track license) {
|
||||
<div>{{license.name}} : {{license.value}}</div>
|
||||
}
|
||||
</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">My Listings For Sale</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
<div class="grid mt-0 mr-0">
|
||||
@for (listing of userListings; track listing) {
|
||||
<div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-listing/business',listing.id]">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<span [class]="selectOptions.getBgColorType(listing.type)"
|
||||
class="inline-flex border-circle align-items-center justify-content-center mr-3"
|
||||
style="width:38px;height:38px">
|
||||
<i [class]="selectOptions.getIconAndTextColorType(listing.type)"
|
||||
class="pi text-xl"></i>
|
||||
</span>
|
||||
<span
|
||||
class="font-medium">{{selectOptions.getBusiness(listing.type)}}</span>
|
||||
</div>
|
||||
<div class="text-700">{{listing.title}}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</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">Licensed In</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
@for (license of userLicensedIn; track license) {
|
||||
<div>{{ license.name }} : {{ license.value }}</div>
|
||||
}
|
||||
</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">My Listings For Sale</div>
|
||||
<div class="text-900 w-full md:w-10">
|
||||
<div class="grid mt-0 mr-0">
|
||||
@for (listing of userListings; track listing) {
|
||||
<div class="col-12 md:col-6 cursor-pointer" [routerLink]="['/details-listing/business', listing.id]">
|
||||
<div class="p-3 border-1 surface-border border-round surface-card">
|
||||
<div class="text-900 mb-2">
|
||||
<span [class]="selectOptions.getBgColorType(listing.type)" class="inline-flex border-circle align-items-center justify-content-center mr-3" style="width: 38px; height: 38px">
|
||||
<i [class]="selectOptions.getIconAndTextColorType(listing.type)" class="pi text-xl"></i>
|
||||
</span>
|
||||
<span class="font-medium">{{ selectOptions.getBusiness(listing.type) }}</span>
|
||||
</div>
|
||||
<div class="text-700">{{ listing.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
@if( user?.id===(user$| async)?.id || isAdmin()){
|
||||
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto"
|
||||
[routerLink]="['/account',user.id]"></button>
|
||||
}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@if( user?.id===(user$| async)?.id || isAdmin()){
|
||||
<button pButton pRipple label="Edit" icon="pi pi-file-edit" class="w-auto" [routerLink]="['/account']"></button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { GalleriaModule } from 'primeng/galleria';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { Observable } from 'rxjs';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { Observable } from 'rxjs';
|
||||
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-details-user',
|
||||
@@ -20,38 +20,41 @@ import { KeyValue, ListingCriteria } from '../../../../../../bizmatch-server/src
|
||||
imports: [SharedModule, GalleriaModule],
|
||||
providers: [MessageService],
|
||||
templateUrl: './details-user.component.html',
|
||||
styleUrl: './details-user.component.scss'
|
||||
styleUrl: './details-user.component.scss',
|
||||
})
|
||||
export class DetailsUserComponent {
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
user: User;
|
||||
user$:Observable<User>
|
||||
user$: Observable<User>;
|
||||
environment = environment;
|
||||
criteria:ListingCriteria;
|
||||
userListings:BusinessListing[]
|
||||
companyOverview:SafeHtml;
|
||||
offeredServices:SafeHtml;
|
||||
userLicensedIn :KeyValue[]
|
||||
constructor(private activatedRoute: ActivatedRoute,
|
||||
criteria: ListingCriteria;
|
||||
userListings: BusinessListing[];
|
||||
companyOverview: SafeHtml;
|
||||
offeredServices: SafeHtml;
|
||||
userLicensedIn: KeyValue[];
|
||||
constructor(
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private router: Router,
|
||||
private userService: UserService,
|
||||
private listingsService:ListingsService,
|
||||
private listingsService: ListingsService,
|
||||
private messageService: MessageService,
|
||||
public selectOptions: SelectOptionsService,
|
||||
private sanitizer: DomSanitizer,
|
||||
private imageService:ImageService) {
|
||||
}
|
||||
private imageService: ImageService,
|
||||
) {}
|
||||
|
||||
async ngOnInit() {
|
||||
this.user = await this.userService.getById(this.id);
|
||||
this.userLicensedIn = this.user.licensedIn.map(l=>{return {name:l.split('|')[0],value:l.split('|')[1]}})
|
||||
this.userLicensedIn = this.user.licensedIn.map(l => {
|
||||
return { name: l.split('|')[0], value: l.split('|')[1] };
|
||||
});
|
||||
this.userListings = await this.listingsService.getListingByUserId(this.id);
|
||||
this.user$ = this.userService.getUserObservable();
|
||||
this.companyOverview=this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview);
|
||||
this.offeredServices=this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices);
|
||||
this.companyOverview = this.sanitizer.bypassSecurityTrustHtml(this.user.companyOverview);
|
||||
this.offeredServices = this.sanitizer.bypassSecurityTrustHtml(this.user.offeredServices);
|
||||
}
|
||||
back() {
|
||||
this.router.navigate(['listings', this.criteria.listingsCategory])
|
||||
this.router.navigate(['brokerListings']);
|
||||
}
|
||||
isAdmin() {
|
||||
return this.userService.hasAdminRole();
|
||||
|
||||
Reference in New Issue
Block a user