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

Rework of major pages

Browse Source
This commit is contained in:
Andreas Knuth
2024-04-24 14:31:32 +02:00
parent 9e03620be7
commit 4230867608
17 changed files with 995 additions and 837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.html
View File

@@ -1,33 +1,45 @@
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8 h-full">
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">My Listings</div>
<p-divider></p-divider>
<p-table [value]="myListings" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id" [paginator]="true" [rows]="10" [rowsPerPageOptions]="[10, 20, 50]" [showCurrentPageReport]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
<ng-template pTemplate="header">
<tr>
<th class="wide-column">Title</th>
<th>Category</th>
<th>Located in</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-listing>
<tr>
<td class="wide-column line-height-3">{{ listing.title }}</td>
<td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
<td>{{ selectOptions.getState(listing.location) }}</td>
<td>
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editListing',listing.id]"></button>
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="confirm($event,listing)"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
<div class="p-fluid flex flex-column lg:flex-row">
<menu-account></menu-account>
<p-toast></p-toast>
<p-confirmPopup></p-confirmPopup>
<div class="surface-card p-5 shadow-2 border-round flex-auto">
<div class="text-900 font-semibold text-lg mt-3">My Listings</div>
<p-divider></p-divider>
<p-table
[value]="myListings"
[tableStyle]="{ 'min-width': '50rem' }"
dataKey="id"
[paginator]="true"
[rows]="10"
[rowsPerPageOptions]="[10, 20, 50]"
[showCurrentPageReport]="true"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
>
<ng-template pTemplate="header">
<tr>
<th class="wide-column">Title</th>
<th>Category</th>
<th>Located in</th>
<th></th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-listing>
<tr>
<td class="wide-column line-height-3">{{ listing.title }}</td>
<td>{{ selectOptions.getListingsCategory(listing.listingsCategory) }}</td>
<td>{{ selectOptions.getState(listing.city) }}</td>
<td>
@if(isBusinessListing(listing)){
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editBusinessListing', listing.id]"></button>
} @if(isCommercialPropertyListing(listing)){
<button pButton pRipple icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" [routerLink]="['/editCommercialPropertyListing', listing.id]"></button>
}
<button pButton pRipple icon="pi pi-trash" class="p-button-rounded p-button-warning" (click)="confirm($event, listing)"></button>
</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
</div>

75
bizmatch/src/app/pages/subscription/my-listing/my-listing.component.ts
View File

@@ -1,52 +1,53 @@
import { ChangeDetectorRef, Component } from '@angular/core';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import dataListings from '../../../../assets/data/listings.json';
import { SharedModule } from '../../../shared/shared/shared.module';
import { UserService } from '../../../services/user.service';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';
import { SelectOptionsService } from '../../../services/select-options.service';
import { ConfirmationService, MessageService } from 'primeng/api';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { getListingType } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { getListingType, isBusinessListing, isCommercialPropertyListing } from '../../../utils/utils';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
@Component({
selector: 'app-my-listing',
standalone: true,
imports: [MenuAccountComponent, SharedModule],
providers:[ConfirmationService,MessageService],
providers: [ConfirmationService, MessageService],
templateUrl: './my-listing.component.html',
styleUrl: './my-listing.component.scss'
styleUrl: './my-listing.component.scss',
})
export class MyListingComponent {
user: User;
listings: Array<ListingType> =[]//dataListings as unknown as Array<BusinessListing>;
myListings: Array<ListingType>
constructor(public userService: UserService,private listingsService:ListingsService, private cdRef:ChangeDetectorRef,public selectOptions:SelectOptionsService,private confirmationService: ConfirmationService,private messageService: MessageService){
this.user=this.userService.getUser();
}
async ngOnInit(){
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
}
async deleteListing(listing:ListingType){
await this.listingsService.deleteListing(listing.id,getListingType(listing));
// this.listings=await lastValueFrom(this.listingsService.getAllListings());
this.myListings=this.listings.filter(l=>l.userId===this.user.id);
listings: Array<ListingType> = []; //dataListings as unknown as Array<BusinessListing>;
myListings: Array<ListingType>;
userId: string;
isBusinessListing = isBusinessListing;
isCommercialPropertyListing = isCommercialPropertyListing;
constructor(
public userService: UserService,
private listingsService: ListingsService,
private cdRef: ChangeDetectorRef,
public selectOptions: SelectOptionsService,
private confirmationService: ConfirmationService,
private messageService: MessageService,
) {}
async ngOnInit() {
this.userId = await this.userService.getId();
this.myListings = await this.listingsService.getListingByUserId(this.userId);
}
confirm(event: Event,listing:ListingType) {
async deleteListing(listing: ListingType) {
await this.listingsService.deleteListing(listing.id, getListingType(listing));
this.myListings = await this.listingsService.getListingByUserId(this.userId);
}
confirm(event: Event, listing: ListingType) {
this.confirmationService.confirm({
target: event.target as EventTarget,
message: 'Are you sure you want to delet this listing?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been deleted', life: 3000 });
this.deleteListing(listing);
}
target: event.target as EventTarget,
message: 'Are you sure you want to delet this listing?',
icon: 'pi pi-exclamation-triangle',
accept: () => {
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been deleted', life: 3000 });
this.deleteListing(listing);
},
});
}
}
}