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

Aufteilung details in user & listings, listings by user

Browse Source
This commit is contained in:
Andreas Knuth
2024-03-24 20:42:59 +01:00
parent a2c613c38f
commit 73ab12a694
14 changed files with 438 additions and 345 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
bizmatch/src/app/pages/details/details-user/details-user.component.html Normal file
View File

@@ -0,0 +1,131 @@
<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>
<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">
<img src="{{environment.apiBaseUrl}}/profile/{{user.id}}" class="mr-5 mb-3 lg:mb-0"
style="width:90px;height: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 ><img src="{{environment.apiBaseUrl}}/logo/{{user.id}}"
class="mr-5 lg:mb-0" style="width:100px;height:30px" /></div>
<!-- <div class="text-700 mt-2">130</div> -->
</div>
</div>
</div>
</div>
<!-- <div class="mt-3 lg:mt-0">
<button pButton pRipple icon="pi pi-bookmark" class="p-button-rounded mr-2"></button>
<button pButton pRipple icon="pi pi-heart" class="p-button-rounded p-button-success mr-2"></button>
<button pButton pRipple icon="pi pi-list" class="p-button-rounded p-button-help"></button>
</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">{{user.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">Company Overview</div>
<div class="text-900 w-full md:w-10 line-height-3">{{user.companyOverview}}</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">Services we offer</div>
<div class="text-900 w-full md:w-10">{{user.offeredServices}}</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">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 user.licensedIn; 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>
</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>

0
bizmatch/src/app/pages/details/details-user/details-user.component.scss Normal file
View File

47
bizmatch/src/app/pages/details/details-user/details-user.component.ts Normal file
View File

@@ -0,0 +1,47 @@
import { Component } from '@angular/core';
import { SharedModule } from '../../../shared/shared/shared.module';
import { GalleriaModule } from 'primeng/galleria';
import { MessageService } from 'primeng/api';
import { BusinessListing, ListingCriteria, ListingType, User } from '../../../../../../common-models/src/main.model';
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';
@Component({
selector: 'app-details-user',
standalone: true,
imports: [SharedModule, GalleriaModule],
providers: [MessageService],
templateUrl: './details-user.component.html',
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>
environment = environment;
criteria:ListingCriteria;
userListings:BusinessListing[]
constructor(private activatedRoute: ActivatedRoute,
private router: Router,
private userService: UserService,
private listingsService:ListingsService,
private messageService: MessageService,
public selectOptions: SelectOptionsService) {
}
async ngOnInit() {
this.user = await this.userService.getById(this.id);
this.userListings = await this.listingsService.getListingByUserId(this.id);
this.user$ = this.userService.getUserObservable();
}
back() {
this.router.navigate(['listings', this.criteria.listingsCategory])
}
isAdmin() {
return this.userService.hasAdminRole();
}
}