initial release

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

@@ -0,0 +1,33 @@
+
+<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.getLocation(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>
+</div>

bizmatch/src/app/pages/subscription/my-listing/my-listing.component.scss

@@ -0,0 +1,3 @@
+.wide-column{
+    width: 40%;
+}

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

@@ -0,0 +1,49 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { MenuAccountComponent } from '../../menu-account/menu-account.component';
+import dataListings from '../../../../assets/data/listings.json';
+import { BusinessListing, ListingType, User } from '../../../models/main.model';
+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';
+@Component({
+  selector: 'app-my-listing',
+  standalone: true,
+  imports: [MenuAccountComponent, SharedModule],
+  providers:[ConfirmationService,MessageService],
+  templateUrl: './my-listing.component.html',
+  styleUrl: './my-listing.component.scss'
+})
+export class MyListingComponent {
+  user: User;
+  listings: Array<BusinessListing> //dataListings as unknown as Array<BusinessListing>;
+  myListings: Array<BusinessListing>
+  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);
+    this.listings=await lastValueFrom(this.listingsService.getAllListings());   
+    this.myListings=this.listings.filter(l=>l.userId===this.user.id);
+  }
+
+  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);
+        }
+    });
+}
+}