initial release
This commit is contained in:
@@ -0,0 +1,108 @@
|
||||
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="p-fluid flex flex-column lg:flex-row">
|
||||
<menu-account></menu-account>
|
||||
<p-toast></p-toast>
|
||||
<div class="surface-card p-5 shadow-2 border-round flex-auto">
|
||||
<div class="text-900 font-semibold text-lg mt-3">Account Details</div>
|
||||
<p-divider></p-divider>
|
||||
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
||||
<div class="flex-auto p-fluid">
|
||||
<div class="mb-4">
|
||||
<label for="email" class="block font-medium text-900 mb-2">Username</label>
|
||||
<input id="email" type="text" [disabled]="true" pInputText [(ngModel)]="user.username">
|
||||
<p class="font-italic text-sm line-height-1">Usernames cannot be changed.</p>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="state" class="block font-medium text-900 mb-2">First Name</label>
|
||||
<input id="state" type="text" pInputText [(ngModel)]="user.firstname">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="state" class="block font-medium text-900 mb-2">Last Name</label>
|
||||
<input id="state" type="text" pInputText [(ngModel)]="user.lastname">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
|
||||
<input id="state" type="text" pInputText [(ngModel)]="user.email">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="state" class="block font-medium text-900 mb-2">New Password</label>
|
||||
<p class="font-italic text-sm line-height-1">If you would like to change the password type a new one. Otherwise leave this blank.</p>
|
||||
<input id="state" type="text" pInputText>
|
||||
<p class="font-italic text-sm line-height-1">Password repetition</p>
|
||||
<input id="state" type="text" pInputText>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-column align-items-center flex-or">
|
||||
<span class="font-medium text-900 mb-2">Profile Picture</span>
|
||||
<img [src]="imageUrl" (error)="setImageToFallback($event)" class="rounded-image"/>
|
||||
<!-- <p-image src="http://localhost:3000/public/user.png" alt="Image" width="10rem" [preview]="true"></p-image> -->
|
||||
<!-- <button pButton type="button" icon="pi pi-pencil" class="p-button-rounded -mt-4"></button> -->
|
||||
<p-fileUpload mode="basic" chooseLabel="Upload" name="file" [url]="uploadUrl" accept="image/*" [maxFileSize]="maxFileSize" (onUpload)="onUpload($event)" [auto]="true" styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"></p-fileUpload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-900 font-semibold text-lg mt-3">Membership Level</div>
|
||||
<p-divider></p-divider>
|
||||
<p-table [value]="userSubscriptions" [tableStyle]="{ 'min-width': '50rem' }" dataKey="id">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 5rem"></th>
|
||||
<th>ID</th>
|
||||
<th>Level</th>
|
||||
<th>Start Date</th>
|
||||
<th>Date Modified</th>
|
||||
<th>End Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-subscription let-expanded="expanded">
|
||||
<tr>
|
||||
<td>
|
||||
<button type="button" pButton pRipple [pRowToggler]="subscription" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
</td>
|
||||
<td>{{ subscription.id }}</td>
|
||||
<td>{{ subscription.level }}</td>
|
||||
<td>{{ subscription.start | date }}</td>
|
||||
<td>{{ subscription.modified | date }}</td>
|
||||
<td>{{ subscription.end | date }}</td>
|
||||
<td>{{ subscription.status }}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-subscription>
|
||||
<tr>
|
||||
<td colspan="7">
|
||||
<div class="p-3">
|
||||
<p-table [value]="subscription.invoices" dataKey="id">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th style="width: 5rem"></th>
|
||||
<th>ID</th>
|
||||
<th>Date</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-invoice>
|
||||
<tr>
|
||||
<td>
|
||||
<button pButton pRipple icon="pi pi-print" class="p-button-rounded p-button-success mr-2" (click)="printInvoice(invoice)"></button>
|
||||
</td>
|
||||
<td>{{ invoice.id }}</td>
|
||||
<td>{{ invoice.date | date}}</td>
|
||||
<td>{{ invoice.price | currency}}</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,9 @@
|
||||
.rounded-image {
|
||||
border-radius: 6px;
|
||||
width: 120px;
|
||||
height: 30px;
|
||||
border: 1px solid #6b7280;
|
||||
padding: 1px 1px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { BusinessListing, Invoice, KeyValue, Subscription, User } from '../../../models/main.model';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { SubscriptionsService } from '../../../services/subscriptions.service';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { MessageService } from 'primeng/api';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { FileUploadModule } from 'primeng/fileupload';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-account',
|
||||
standalone: true,
|
||||
// imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, TableModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule ],
|
||||
imports: [SharedModule,FileUploadModule],
|
||||
providers:[MessageService],
|
||||
templateUrl: './account.component.html',
|
||||
styleUrl: './account.component.scss'
|
||||
})
|
||||
export class AccountComponent {
|
||||
user:User;
|
||||
subscriptions:Array<Subscription>;
|
||||
userSubscriptions:Array<Subscription>=[];
|
||||
uploadUrl:string;
|
||||
maxFileSize=1000000;
|
||||
imageUrl:string;
|
||||
constructor(public userService: UserService, private subscriptionService: SubscriptionsService,private messageService: MessageService) {
|
||||
this.user=this.userService.getUser()
|
||||
}
|
||||
async ngOnInit(){
|
||||
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}`
|
||||
this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
|
||||
this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/account/uploadPhoto/${this.user.id}`;
|
||||
}
|
||||
printInvoice(invoice:Invoice){}
|
||||
updateProfile(user:User){
|
||||
this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
|
||||
}
|
||||
onUpload(event:any){
|
||||
const uniqueSuffix = '?_ts=' + new Date().getTime();
|
||||
this.imageUrl = `${environment.apiBaseUrl}/profile_${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
|
||||
}
|
||||
setImageToFallback(event: Event) {
|
||||
(event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
|
||||
<div class="surface-ground px-4 py-8 md:px-6 lg:px-8">
|
||||
<div class="p-fluid flex flex-column lg:flex-row">
|
||||
<menu-account></menu-account>
|
||||
<p-toast></p-toast>
|
||||
<div class="surface-card p-5 shadow-2 border-round flex-auto">
|
||||
<div class="text-900 font-semibold text-lg mt-3">{{mode==='create'?'New':'Edit'}} Listing</div>
|
||||
<p-divider></p-divider>
|
||||
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
||||
<div class="flex-auto p-fluid">
|
||||
<div class="mb-4">
|
||||
<label for="listingCategory" class="block font-medium text-900 mb-2">Listing category</label>
|
||||
<p-dropdown id="listingCategory" [options]="selectOptions?.listingCategories" [(ngModel)]="listing.listingsCategory" optionLabel="name"
|
||||
optionValue="value" placeholder="Listing category" [disabled]="mode==='edit'"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="email" class="block font-medium text-900 mb-2">Title of Listing</label>
|
||||
<input id="email" type="text" pInputText [(ngModel)]="listing.title">
|
||||
</div>
|
||||
@if (listing.listingsCategory==='business' || listing.listingsCategory==='professionals_brokers'){
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="summary" class="block font-medium text-900 mb-2">Summary (Brief description)</label>
|
||||
<textarea id="summary" type="text" pInputTextarea rows="5" [autoResize]="true" [ngModel]="listing.summary | arrayToString:'\n\n'" (ngModelChange)="updateSummary($event)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="description" class="block font-medium text-900 mb-2">Description</label>
|
||||
<textarea id="description" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.description"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@if (listing.listingsCategory==='business'){
|
||||
<div class="mb-4">
|
||||
<label for="listingCategory" class="block font-medium text-900 mb-2">Type of business</label>
|
||||
<p-dropdown id="listingCategory" [options]="selectOptions?.typesOfBusiness" [(ngModel)]="listing.type" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Type of business"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
}
|
||||
<div class="mb-4">
|
||||
<label for="listingCategory" class="block font-medium text-900 mb-2">Location</label>
|
||||
<p-dropdown id="listingCategory" [options]="selectOptions?.locations" [(ngModel)]="listing.location" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Location"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
@if (listing.listingsCategory==='professionals_brokers'){
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="address" class="block font-medium text-900 mb-2">Address</label>
|
||||
<input id="address" type="text" pInputText [(ngModel)]="listing.address">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (listing.listingsCategory==='professionals_brokers' || listing.listingsCategory==='investment'){
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="email" class="block font-medium text-900 mb-2">Email</label>
|
||||
<input id="address" type="text" pInputText [(ngModel)]="listing.email">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="website" class="block font-medium text-900 mb-2">Website</label>
|
||||
<input id="address" type="text" pInputText [(ngModel)]="listing.website">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@if (listing.listingsCategory==='professionals_brokers'){
|
||||
<div class="mb-4">
|
||||
<label for="category" class="block font-medium text-900 mb-2">Category</label>
|
||||
<p-dropdown id="category" [options]="selectOptions?.categories" [(ngModel)]="listing.category" optionLabel="name"
|
||||
optionValue="value" [showClear]="true" placeholder="Category"
|
||||
[style]="{ width: '100%'}"></p-dropdown>
|
||||
</div>
|
||||
}
|
||||
@if (listing.listingsCategory==='investment'){
|
||||
<div>
|
||||
<div class="mb-4">
|
||||
<label for="phoneNumber" class="block font-medium text-900 mb-2">Phone Number</label>
|
||||
<input id="phoneNumber" type="text" pInputText [(ngModel)]="listing.phoneNumber">
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<p-divider></p-divider>
|
||||
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
||||
<div class="flex-auto p-fluid">
|
||||
@if (listing.listingsCategory==='business'){
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="price" class="block font-medium text-900 mb-2">Price</label>
|
||||
<!-- <input id="price" type="text" pInputText [(ngModel)]="listing.price"> -->
|
||||
<p-inputNumber mode="currency" currency="USD" inputId="price" type="text" [(ngModel)]="listing.price"></p-inputNumber>
|
||||
</div>
|
||||
<div class="mb-4 col-12 md:col-6 flex align-items-end justify-content-center">
|
||||
<p-checkbox [binary]="true" [(ngModel)]="listing.realEstateIncluded"></p-checkbox>
|
||||
<span class="ml-2 text-900">Real Estate Included</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="salesRevenue" class="block font-medium text-900 mb-2">Sales Revenue</label>
|
||||
<!-- <input id="salesRevenue" type="text" pInputText [(ngModel)]="listing.salesRevenue"> -->
|
||||
<p-inputNumber mode="currency" currency="USD" inputId="salesRevenue" type="text" [(ngModel)]="listing.salesRevenue"></p-inputNumber>
|
||||
</div>
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="cashFlow" class="block font-medium text-900 mb-2">Cash Flow</label>
|
||||
<!-- <input id="cashFlow" type="text" pInputText [(ngModel)]="listing.cashFlow"> -->
|
||||
<p-inputNumber mode="currency" currency="USD" inputId="cashFlow" type="text" [(ngModel)]="listing.cashFlow"></p-inputNumber>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="netProfit" class="block font-medium text-900 mb-2">Net Profit</label>
|
||||
<!-- <input id="netProfit" type="text" pInputText [(ngModel)]="listing.netProfit"> -->
|
||||
<p-inputNumber mode="currency" currency="USD" inputId="netProfit" type="text" [(ngModel)]="listing.netProfit"></p-inputNumber>
|
||||
</div>
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="employees" class="block font-medium text-900 mb-2">Employees</label>
|
||||
<!-- <input id="employees" type="text" pInputText [(ngModel)]="listing.employees"> -->
|
||||
<p-inputNumber mode="employees" mode="decimal" inputId="employees" type="text" [(ngModel)]="listing.employees"></p-inputNumber>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="inventory" class="block font-medium text-900 mb-2">Inventory</label>
|
||||
<textarea id="inventory" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.inventory"></textarea>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="reasonForSale" class="block font-medium text-900 mb-2">Reason for Sale</label>
|
||||
<textarea id="reasonForSale" type="text" pInputTextarea rows="5" [autoResize]="true" [(ngModel)]="listing.reasonForSale"></textarea>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="brokerLicensing" class="block font-medium text-900 mb-2">Broker Licensing</label>
|
||||
<input id="brokerLicensing" type="text" pInputText [(ngModel)]="listing.brokerLicencing">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="internalListing" class="block font-medium text-900 mb-2">Internal Listing (Will not be shown on the listing, for your records only.)</label>
|
||||
<input id="internalListing" type="text" pInputText [(ngModel)]="listing.internals">
|
||||
</div>
|
||||
}
|
||||
<div>
|
||||
@if (mode==='create'){
|
||||
<button pButton pRipple label="Post Listing" class="w-auto" (click)="create()"></button>
|
||||
} @else {
|
||||
<button pButton pRipple label="Update Listing" class="w-auto" (click)="update(listing.id)"></button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { BusinessListing, InvestmentsListing, Invoice, KeyValue, ProfessionalsBrokersListing, User } from '../../../models/main.model';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import data from '../../../../assets/data/user.json';
|
||||
import dataListings from '../../../../assets/data/listings.json';
|
||||
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { createGenericObject } from '../../../utils/utils';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { InputNumberModule } from 'primeng/inputnumber';
|
||||
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { MessageService } from 'primeng/api';
|
||||
@Component({
|
||||
selector: 'create-listing',
|
||||
standalone: true,
|
||||
imports: [SharedModule,ArrayToStringPipe],
|
||||
providers:[MessageService],
|
||||
templateUrl: './edit-listing.component.html',
|
||||
styleUrl: './edit-listing.component.scss'
|
||||
})
|
||||
export class EditListingComponent {
|
||||
listingCategory:'Business'|'Professionals/Brokers Directory'|'Investment Property';
|
||||
category:string;
|
||||
location:string;
|
||||
mode:'edit'|'create';
|
||||
separator:'\n\n'
|
||||
listing:BusinessListing|ProfessionalsBrokersListing|InvestmentsListing = createGenericObject<BusinessListing>();
|
||||
private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
|
||||
user:User;
|
||||
constructor(public selectOptions:SelectOptionsService,private router: Router,private activatedRoute: ActivatedRoute,private listingsService:ListingsService,public userService: UserService,private messageService: MessageService){
|
||||
this.user=this.userService.getUser();
|
||||
// Abonniere Router-Events, um den aktiven Link zu ermitteln
|
||||
this.router.events.subscribe(event => {
|
||||
if (event instanceof NavigationEnd) {
|
||||
this.mode = event.url==='/createListing'?'create':'edit';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
async ngOnInit(){
|
||||
if (this.mode==='edit'){
|
||||
this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));
|
||||
} else {
|
||||
this.listing=createGenericObject<BusinessListing>();
|
||||
this.listing.userId=this.user.id
|
||||
this.listing.listingsCategory='business';
|
||||
}
|
||||
}
|
||||
updateSummary(value: string): void {
|
||||
const lines = value.split('\n');
|
||||
(<BusinessListing>this.listing).summary = lines.filter(l=>l.trim().length>0);
|
||||
}
|
||||
async update(id:string){
|
||||
await this.listingsService.update(this.listing,this.listing.id);
|
||||
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been updated', life: 3000 });
|
||||
}
|
||||
async create(){
|
||||
await this.listingsService.create(this.listing);
|
||||
this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing has been created', life: 3000 });
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
|
||||
<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>
|
||||
<div class="surface-card p-5 shadow-2 border-round flex-auto">
|
||||
<div class="text-900 font-semibold text-lg mt-3">Contact Us</div>
|
||||
<p-divider></p-divider>
|
||||
<div class="flex gap-5 flex-column-reverse md:flex-row">
|
||||
<div class="flex-auto p-fluid">
|
||||
<div class="grid">
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="name" class="block font-medium text-900 mb-2">Your name</label>
|
||||
<input id="name" type="text" pInputText>
|
||||
</div>
|
||||
<div class="mb-4 col-12 md:col-6">
|
||||
<label for="email" class="block font-medium text-900 mb-2">Your Email</label>
|
||||
<input id="email" type="text" pInputText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="phone" class="block font-medium text-900 mb-2">Your Phone</label>
|
||||
<input id="phone" type="text" pInputText>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="help" class="block font-medium text-900 mb-2">How can we help you ?</label>
|
||||
<textarea id="help" type="text" pInputTextarea rows="5" [autoResize]="true"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<button pButton pRipple label="Submit" class="w-auto"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { CheckboxModule } from 'primeng/checkbox';
|
||||
import { InputTextModule } from 'primeng/inputtext';
|
||||
import { StyleClassModule } from 'primeng/styleclass';
|
||||
import { BusinessListing, Invoice, KeyValue, User } from '../../../models/main.model';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { DropdownModule } from 'primeng/dropdown';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ToggleButtonModule } from 'primeng/togglebutton';
|
||||
import { TagModule } from 'primeng/tag';
|
||||
import data from '../../../../assets/data/user.json';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { InputTextareaModule } from 'primeng/inputtextarea';
|
||||
import { ChipModule } from 'primeng/chip';
|
||||
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
|
||||
import { DividerModule } from 'primeng/divider';
|
||||
import { TableModule } from 'primeng/table';
|
||||
@Component({
|
||||
selector: 'app-email-us',
|
||||
standalone: true,
|
||||
imports: [CommonModule, StyleClassModule, MenuAccountComponent, DividerModule,ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, ChipModule,InputTextareaModule],
|
||||
templateUrl: './email-us.component.html',
|
||||
styleUrl: './email-us.component.scss'
|
||||
})
|
||||
export class EmailUsComponent {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
<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>
|
||||
<div class="surface-card p-5 shadow-2 border-round flex-auto">
|
||||
<div class="text-900 font-semibold text-lg mt-3">My Favorites</div>
|
||||
<p-divider></p-divider>
|
||||
<p-table [value]="favorites" [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-eye" class="p-button-rounded p-button-success mr-2" [routerLink]="['/details',listing.id]"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
.wide-column{
|
||||
width: 40%;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
|
||||
import dataListings from '../../../../assets/data/listings.json';
|
||||
import { BusinessListing, User } from '../../../models/main.model';
|
||||
import { SharedModule } from '../../../shared/shared/shared.module';
|
||||
import { UserService } from '../../../services/user.service';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-favorites',
|
||||
standalone: true,
|
||||
imports: [MenuAccountComponent, SharedModule],
|
||||
templateUrl: './favorites.component.html',
|
||||
styleUrl: './favorites.component.scss'
|
||||
})
|
||||
export class FavoritesComponent {
|
||||
user: User;
|
||||
listings: Array<BusinessListing> //= dataListings as unknown as Array<BusinessListing>;
|
||||
favorites: Array<BusinessListing>
|
||||
constructor(public userService: UserService, private listingsService:ListingsService, public selectOptions:SelectOptionsService){
|
||||
this.user=this.userService.getUser();
|
||||
}
|
||||
async ngOnInit(){
|
||||
this.listings=await lastValueFrom(this.listingsService.getAllListings());
|
||||
this.favorites=this.listings.filter(l=>l.favoritesForUser?.includes(this.user.id));
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
@@ -0,0 +1,3 @@
|
||||
.wide-column{
|
||||
width: 40%;
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user