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

conversion inputs to components

This commit is contained in:
Andreas Knuth 2024-08-02 20:14:07 +02:00
parent 29f88d610f
commit c9305749d2
28 changed files with 528 additions and 300 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
bizmatch-server/src/models/db.model.ts
View File

@ -98,55 +98,142 @@ export const LicensedInSchema = z.object({
state: z.string().nonempty('State is required'),
});
// export const UserSchema = z
// .object({
// id: z.string().uuid('Invalid ID format. Must be a valid UUID').optional(),
// firstname: z.string().min(2, 'First name must be at least 2 characters long'),
// lastname: z.string().min(2, 'Last name must be at least 2 characters long'),
// email: z.string().email('Invalid email address'),
// phoneNumber: z.string().optional().nullable(),
// description: z.string().min(10, 'Description must be at least 10 characters long').optional().nullable(),
// companyName: z.string().optional().nullable(),
// companyOverview: z.string().min(10, 'Company overview must be at least 10 characters long').optional().nullable(),
// companyWebsite: z.string().url('Invalid company website URL').optional().nullable(),
// companyLocation: z.string().optional().nullable(), // Additional validation for US locations could be implemented here
// offeredServices: z.string().min(10, 'Offered services must be at least 10 characters long').optional().nullable(),
// areasServed: z.array(AreasServedSchema).optional().nullable(),
// hasProfile: z.boolean().optional().nullable(),
// hasCompanyLogo: z.boolean().optional().nullable(),
// licensedIn: z.array(LicensedInSchema).optional().nullable(),
// gender: GenderEnum.optional().nullable(),
// customerType: CustomerTypeEnum.optional().nullable(),
// customerSubType: CustomerSubTypeEnum.optional().nullable(),
// created: z.date().optional().nullable(),
// updated: z.date().optional().nullable(),
// latitude: z.number().optional().nullable(),
// longitude: z.number().optional().nullable(),
// })
// .refine(
// data => {
// if (data.customerType === 'professional') {
// return !!data.customerSubType && !!data.phoneNumber && !!data.companyOverview && !!data.description && !!data.offeredServices && !!data.companyLocation && data.areasServed && data.areasServed.length > 0;
// }
// return true;
// },
// {
// message: 'For professional customers, additional fields are required: customer subtype, phone number, company overview, description, offered services, company location, and at least one area served',
// path: ['customerType'],
// },
// )
// .refine(
// data => {
// if (data.customerType === 'professional') {
// return /\(\d{3}\) \d{3}-\d{4}$/.test(data.phoneNumber || '');
// }
// return true;
// },
// {
// message: 'Phone number must be in US format: +1 (XXX) XXX-XXXX',
// path: ['phoneNumber'],
// },
// );
const phoneRegex = /^\+1 \(\d{3}\) \d{3}-\d{4}$/;
export const UserSchema = z
.object({
id: z.string().uuid('Invalid ID format. Must be a valid UUID').optional(),
firstname: z.string().min(2, 'First name must be at least 2 characters long'),
lastname: z.string().min(2, 'Last name must be at least 2 characters long'),
email: z.string().email('Invalid email address'),
id: z.string().uuid(),
firstname: z.string().min(2, { message: 'First name must contain at least 2 characters' }),
lastname: z.string().min(2, { message: 'Last name must contain at least 2 characters' }),
email: z.string().email({ message: 'Invalid email address' }),
phoneNumber: z.string().optional().nullable(),
description: z.string().min(10, 'Description must be at least 10 characters long').optional().nullable(),
description: z.string().optional().nullable(),
companyName: z.string().optional().nullable(),
companyOverview: z.string().min(10, 'Company overview must be at least 10 characters long').optional().nullable(),
companyWebsite: z.string().url('Invalid company website URL').optional().nullable(),
companyLocation: z.string().optional().nullable(), // Additional validation for US locations could be implemented here
offeredServices: z.string().min(10, 'Offered services must be at least 10 characters long').optional().nullable(),
companyOverview: z.string().optional().nullable(),
companyWebsite: z.string().url({ message: 'Invalid URL format' }).optional().nullable(),
companyLocation: z.string().optional().nullable(),
offeredServices: z.string().optional().nullable(),
areasServed: z.array(AreasServedSchema).optional().nullable(),
hasProfile: z.boolean().optional().nullable(),
hasCompanyLogo: z.boolean().optional().nullable(),
licensedIn: z.array(LicensedInSchema).optional().nullable(),
gender: GenderEnum.optional().nullable(),
customerType: CustomerTypeEnum.optional().nullable(),
customerType: CustomerTypeEnum,
customerSubType: CustomerSubTypeEnum.optional().nullable(),
created: z.date().optional().nullable(),
updated: z.date().optional().nullable(),
latitude: z.number().optional().nullable(),
longitude: z.number().optional().nullable(),
})
.refine(
data => {
.superRefine((data, ctx) => {
if (data.customerType === 'professional') {
return !!data.customerSubType && !!data.phoneNumber && !!data.companyOverview && !!data.description && !!data.offeredServices && !!data.companyLocation && data.areasServed && data.areasServed.length > 0;
if (!data.customerSubType) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Customer subtype is required for professional customers',
path: ['customerSubType'],
});
}
return true;
},
{
message: 'For professional customers, additional fields are required: customer subtype, phone number, company overview, description, offered services, company location, and at least one area served',
path: ['customerType'],
},
)
.refine(
data => {
if (data.customerType === 'professional') {
return /\(\d{3}\) \d{3}-\d{4}$/.test(data.phoneNumber || '');
}
return true;
},
{
message: 'Phone number must be in US format: +1 (XXX) XXX-XXXX',
if (!data.phoneNumber || !phoneRegex.test(data.phoneNumber)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Phone number is required and must be in US format (+1 (XXX) XXX-XXXX) for professional customers',
path: ['phoneNumber'],
},
);
});
}
if (!data.companyOverview || data.companyOverview.length < 10) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Company overview must contain at least 10 characters for professional customers',
path: ['companyOverview'],
});
}
if (!data.description || data.description.length < 10) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Description must contain at least 10 characters for professional customers',
path: ['description'],
});
}
if (!data.offeredServices || data.offeredServices.length < 10) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Offered services must contain at least 10 characters for professional customers',
path: ['offeredServices'],
});
}
if (!data.companyLocation) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'Company location is required for professional customers',
path: ['companyLocation'],
});
}
if (!data.areasServed || data.areasServed.length < 1) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: 'At least one area served is required for professional customers',
path: ['areasServed'],
});
}
}
});
export type AreasServed = z.infer<typeof AreasServedSchema>;
export type LicensedIn = z.infer<typeof LicensedInSchema>;

4
bizmatch/src/app/components/base-input/base-input.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Input } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { initFlowbite } from 'flowbite';
import { Subscription } from 'rxjs';
import { ValidationMessagesService } from '../validation-messages.service';
@ -23,6 +24,9 @@ export abstract class BaseInputComponent implements ControlValueAccessor {
this.subscription = this.validationMessagesService.messages$.subscribe(() => {
this.updateValidationMessage();
});
setTimeout(() => {
initFlowbite();
}, 10);
}
ngOnDestroy() {

8
bizmatch/src/app/components/tooltip/tooltip.component.html Normal file
View File

@ -0,0 +1,8 @@
<div
[id]="id"
role="tooltip"
class="max-w-72 w-max absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
{{ text }}
<div class="tooltip-arrow" data-popper-arrow></div>
</div>

0
bizmatch/src/app/components/validated-input/validated-input.component.scss → bizmatch/src/app/components/tooltip/tooltip.component.scss
View File

19
bizmatch/src/app/components/tooltip/tooltip.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { initFlowbite } from 'flowbite';
@Component({
selector: 'app-tooltip',
standalone: true,
imports: [CommonModule],
templateUrl: './tooltip.component.html',
})
export class TooltipComponent {
@Input() id;
@Input() text;
ngOnInit() {
setTimeout(() => {
initFlowbite();
}, 10);
}
}

24
bizmatch/src/app/components/validated-input/validated-input.component.html
View File

@ -1 +1,23 @@
<p>validated-input works!</p>
<div>
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
<input
[type]="kind"
[id]="name"
[ngModel]="value"
(input)="onInputChange($event)"
(blur)="onTouched()"
[attr.name]="name"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
/>
</div>

31
bizmatch/src/app/components/validated-input/validated-input.component.ts
View File

@ -1,30 +1,15 @@
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-input',
template: `
<div>
<label [for]="name" class="block text-sm font-medium text-gray-700">
{{ label }}
<span class="text-red-500 ml-1">{{ validationMessage }}</span>
</label>
<input
type="text"
[id]="name"
[ngModel]="value"
(input)="onInputChange($event)"
(blur)="onTouched()"
[attr.name]="name"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
/>
</div>
`,
templateUrl: './validated-input.component.html',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, TooltipComponent],
providers: [
{
provide: NG_VALUE_ACCESSOR,
@ -35,15 +20,13 @@ import { ValidationMessagesService } from '../validation-messages.service';
})
export class ValidatedInputComponent extends BaseInputComponent {
@Output() valueChange = new EventEmitter<any>();
@Input() kind: 'text' | 'number' | 'email' | 'tel' = 'text';
constructor(validationMessagesService: ValidationMessagesService) {
super(validationMessagesService);
}
onInputChange(event: Event): void {
const value = (event.target as HTMLInputElement).value;
this.value = value;
this.onChange(value);
this.valueChange.emit(value);
this.value = event;
this.onChange(event);
}
}

14
bizmatch/src/app/components/validated-ng-select/validated-ng-select.component.html Normal file
View File

@ -0,0 +1,14 @@
<div>
<label for="type" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit"
>Property Category @if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
<ng-select [items]="items" bindLabel="name" bindValue="value" [(ngModel)]="value" (ngModelChange)="onInputChange($event)" name="type"> </ng-select>
</div>

31
bizmatch/src/app/components/validated-ng-select/validated-ng-select.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { CommonModule } from '@angular/common';
import { Component, forwardRef, Input } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-ng-select',
standalone: true,
imports: [CommonModule, FormsModule, NgSelectModule, TooltipComponent],
templateUrl: './validated-ng-select.component.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValidatedNgSelectComponent),
multi: true,
},
],
})
export class ValidatedNgSelectComponent extends BaseInputComponent {
@Input() items;
constructor(validationMessagesService: ValidationMessagesService) {
super(validationMessagesService);
}
onInputChange(event: Event): void {
this.value = event;
this.onChange(this.value);
}
}

25
bizmatch/src/app/components/validated-price/validated-price.component.html Normal file
View File

@ -0,0 +1,25 @@
<div>
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
<input
type="text"
[id]="name"
[ngModel]="value"
(input)="onInputChange($event)"
(blur)="onTouched()"
[attr.name]="name"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div>

31
bizmatch/src/app/components/validated-price/validated-price.component.ts Normal file
View File

@ -0,0 +1,31 @@
import { CommonModule } from '@angular/common';
import { Component, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgxCurrencyDirective } from 'ngx-currency';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-price',
standalone: true,
imports: [CommonModule, FormsModule, TooltipComponent, NgxCurrencyDirective],
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ValidatedPriceComponent),
multi: true,
},
],
templateUrl: './validated-price.component.html',
})
export class ValidatedPriceComponent extends BaseInputComponent {
constructor(validationMessagesService: ValidationMessagesService) {
super(validationMessagesService);
}
onInputChange(event: Event): void {
this.value = event;
this.onChange(event);
}
}

13
bizmatch/src/app/components/validated-quill/validated-quill.component.html Normal file
View File

@ -0,0 +1,13 @@
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
<quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>

16
bizmatch/src/app/components/validated-quill/validated-quill.component.ts
View File

@ -3,21 +3,17 @@ import { Component, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { QuillModule } from 'ngx-quill';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-quill',
template: `
<div>
<label [for]="name" class="block text-sm font-medium text-gray-700">
{{ label }}
<span class="text-red-500 ml-1">{{ validationMessage }}</span>
</label>
<quill-editor [(ngModel)]="value" (ngModelChange)="onInputChange($event)" (onBlur)="onTouched()" [id]="name" [attr.name]="name" [modules]="quillModules"></quill-editor>
</div>
`,
templateUrl: './validated-quill.component.html',
styles: `quill-editor {
width: 100%;
}`,
standalone: true,
imports: [CommonModule, FormsModule, QuillModule],
imports: [CommonModule, FormsModule, QuillModule, TooltipComponent],
providers: [
{
provide: NG_VALUE_ACCESSOR,

21
bizmatch/src/app/components/validated-select/validated-select.component.html
View File

@ -1 +1,20 @@
<p>validated-select works!</p>
<div>
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
</label>
<select [id]="name" [name]="name" [ngModel]="value" (change)="onSelectChange($event)" (blur)="onTouched()" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
<option value="" disabled selected>Select an option</option>
<option *ngFor="let option of options" [value]="option.value">
{{ option.label }}
</option>
</select>
</div>

0
bizmatch/src/app/components/validated-select/validated-select.component.scss
View File

27
bizmatch/src/app/components/validated-select/validated-select.component.ts
View File

@ -2,33 +2,14 @@ import { CommonModule } from '@angular/common';
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-select',
template: `
<div>
<label [for]="name" class="block text-sm font-medium text-gray-700">
{{ label }}
<span class="text-red-500 ml-1">{{ validationMessage }}</span>
</label>
<select
[id]="name"
[name]="name"
[ngModel]="value"
(change)="onSelectChange($event)"
(blur)="onTouched()"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
>
<option value="" disabled selected>Select an option</option>
<option *ngFor="let option of options" [value]="option.value">
{{ option.label }}
</option>
</select>
</div>
`,
templateUrl: './validated-select.component.html',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, TooltipComponent],
providers: [
{
provide: NG_VALUE_ACCESSOR,
@ -38,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
],
})
export class ValidatedSelectComponent extends BaseInputComponent {
// @Input() required: boolean = false;
// @Input() validationMessage: string = '';
@Input() options: Array<{ value: any; label: string }> = [];
@Output() valueChange = new EventEmitter<any>();

16
bizmatch/src/app/components/validated-textarea/validated-textarea.component.html Normal file
View File

@ -0,0 +1,16 @@
<div>
<label [for]="name" class="block text-sm font-bold text-gray-700 mb-1 relative w-fit">
{{ label }}
@if(validationMessage){
<div
attr.data-tooltip-target="tooltip-{{ name }}"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip id="tooltip-{{ name }}" [text]="validationMessage"></app-tooltip>
}
<span class="text-red-500 ml-1">{{ validationMessage }}</span>
</label>
<textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div>

17
bizmatch/src/app/components/validated-textarea/validated-textarea.component.ts
View File

@ -1,22 +1,15 @@
import { CommonModule } from '@angular/common';
import { Component, EventEmitter, forwardRef, Output } from '@angular/core';
import { Component, forwardRef } from '@angular/core';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BaseInputComponent } from '../base-input/base-input.component';
import { TooltipComponent } from '../tooltip/tooltip.component';
import { ValidationMessagesService } from '../validation-messages.service';
@Component({
selector: 'app-validated-textarea',
template: `
<div>
<label [for]="name" class="block text-sm font-medium text-gray-700">
{{ label }}
<span class="text-red-500 ml-1">{{ validationMessage }}</span>
</label>
<textarea [id]="name" [ngModel]="value" (ngModelChange)="onInputChange($event)" [attr.name]="name" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div>
`,
templateUrl: './validated-textarea.component.html',
standalone: true,
imports: [CommonModule, FormsModule],
imports: [CommonModule, FormsModule, TooltipComponent],
providers: [
{
provide: NG_VALUE_ACCESSOR,
@ -26,8 +19,6 @@ import { ValidationMessagesService } from '../validation-messages.service';
],
})
export class ValidatedTextareaComponent extends BaseInputComponent {
@Output() valueChange = new EventEmitter<any>();
constructor(validationMessagesService: ValidationMessagesService) {
super(validationMessagesService);
}

17
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.html
View File

@ -38,7 +38,7 @@
<h3 class="text-lg font-semibold mb-4">Contact the Author of this Listing</h3>
<p class="text-sm mb-4">Please include your contact info below</p>
<form class="space-y-4">
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<div class="w-full sm:w-1/2">
<label for="name" class="block text-sm font-medium text-gray-700">Your Name</label>
<input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
@ -53,8 +53,12 @@
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
<app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
</div>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<!-- <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<div class="w-full sm:w-1/2">
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
<input
@ -76,8 +80,12 @@
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
<app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
</div>
<div>
<!-- <div>
<label for="comments" class="block text-sm font-medium text-gray-700">Questions/Comments</label>
<textarea
id="comments"
@ -86,6 +94,9 @@
[(ngModel)]="mailinfo.sender.comments"
class="mt-1 block w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
></textarea>
</div> -->
<div>
<app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
</div>
@if(listingUser){
<div class="flex items-center space-x-2">

4
bizmatch/src/app/pages/details/details-business-listing/details-business-listing.component.ts
View File

@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { BusinessListingCriteria, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
import { HistoryService } from '../../../services/history.service';
import { ListingsService } from '../../../services/listings.service';
import { MailService } from '../../../services/mail.service';
@ -17,7 +19,7 @@ import { getCriteriaStateObject, getSessionStorageHandler, map2User } from '../.
@Component({
selector: 'app-details-business-listing',
standalone: true,
imports: [SharedModule],
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
providers: [],
templateUrl: './details-business-listing.component.html',
styleUrl: '../details.scss',

16
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.html
View File

@ -176,8 +176,8 @@
<div class="mt-6">
<h2 class="text-xl font-semibold mb-4">Contact the Author of this Listing</h2>
<p class="text-sm text-gray-600 mb-4">Please include your contact info below</p>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<form class="space-y-4">
<!-- <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Your Name</label>
<input type="text" id="name" name="name" [(ngModel)]="mailinfo.sender.name" class="w-full px-3 py-2 border border-gray-300 rounded-md" />
@ -198,7 +198,19 @@
<div class="mb-4">
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Questions/Comments</label>
<textarea id="message" name="message" [(ngModel)]="mailinfo.sender.comments" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Your Name" name="name" [(ngModel)]="mailinfo.sender.name"></app-validated-input>
<app-validated-input label="Your Email" name="email" [(ngModel)]="mailinfo.sender.email" kind="email"></app-validated-input>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Phone Number" name="phoneNumber" [(ngModel)]="mailinfo.sender.phoneNumber" kind="tel"></app-validated-input>
<app-validated-input label="Country/State" name="state" [(ngModel)]="mailinfo.sender.state"></app-validated-input>
</div>
<div>
<app-validated-textarea label="Questions/Comments" name="comments" [(ngModel)]="mailinfo.sender.comments"></app-validated-textarea>
</div>
<div class="flex items-center justify-between">
@if(listingUser){
<div class="flex items-center space-x-2">

4
bizmatch/src/app/pages/details/details-commercial-property-listing/details-commercial-property-listing.component.ts
View File

@ -7,6 +7,8 @@ import { lastValueFrom } from 'rxjs';
import { CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { CommercialPropertyListingCriteria, ErrorResponse, KeycloakUser, MailInfo } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
import { HistoryService } from '../../../services/history.service';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
@ -19,7 +21,7 @@ import { map2User } from '../../../utils/utils';
@Component({
selector: 'app-details-commercial-property-listing',
standalone: true,
imports: [SharedModule],
imports: [SharedModule, ValidatedInputComponent, ValidatedTextareaComponent],
providers: [],
templateUrl: './details-commercial-property-listing.component.html',
styleUrl: '../details.scss',

38
bizmatch/src/app/pages/subscription/account/account.component.html
View File

@ -84,18 +84,20 @@
</div>
@if (isProfessional){
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<!-- <div>
<label for="companyName" class="block text-sm font-medium text-gray-700">Company Name</label>
<input type="text" id="companyName" name="companyName" [(ngModel)]="user.companyName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
<div>
</div> -->
<!-- <div>
<label for="description" class="block text-sm font-medium text-gray-700">Describe yourself</label>
<input type="text" id="description" name="description" [(ngModel)]="user.description" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
</div> -->
<app-validated-input label="Company Name" name="companyName" [(ngModel)]="user.companyName"></app-validated-input>
<app-validated-input label="Describe yourself" name="description" [(ngModel)]="user.description"></app-validated-input>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<!-- <div>
<label for="phoneNumber" class="block text-sm font-medium text-gray-700">Your Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" [(ngModel)]="user.phoneNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
@ -106,21 +108,37 @@
<div>
<label for="companyLocation" class="block text-sm font-medium text-gray-700">Company Location</label>
<input type="text" id="companyLocation" name="companyLocation" [(ngModel)]="user.companyLocation" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
</div>
</div> -->
<app-validated-input label="Your Phone Number" name="phoneNumber" [(ngModel)]="user.phoneNumber"></app-validated-input>
<app-validated-input label="Company Website" name="companyWebsite" [(ngModel)]="user.companyWebsite"></app-validated-input>
<app-validated-input label="Company Location" name="companyLocation" [(ngModel)]="user.companyLocation"></app-validated-input>
</div>
<!-- <div>
<label for="companyOverview" class="block text-sm font-medium text-gray-700">Company Overview</label>
<quill-editor [(ngModel)]="user.companyOverview" name="companyOverview" [modules]="quillModules"></quill-editor>
</div> -->
<app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview" (ngModelChange)="test($event)"></app-validated-quill>
<div>
<label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
<quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor>
<app-validated-quill label="Company Overview" name="companyOverview" [(ngModel)]="user.companyOverview"></app-validated-quill>
</div>
<div>
<!-- <label for="offeredServices" class="block text-sm font-medium text-gray-700">Services We Offer</label>
<quill-editor [(ngModel)]="user.offeredServices" name="offeredServices" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Services We Offer" name="offeredServices" [(ngModel)]="user.offeredServices"></app-validated-quill>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Areas We Serve</h3>
<h3 class="text-lg font-medium text-gray-700 mb-2 relative w-fit">
Areas We Serve @if(getValidationMessage('areasServed')){
<div
[attr.data-tooltip-target]="tooltipTarget"
class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 dark:border-gray-900 hover:cursor-pointer"
>
!
</div>
<app-tooltip [id]="tooltipTarget" [text]="getValidationMessage('areasServed')"></app-tooltip>
}
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="state" class="block text-sm font-medium text-gray-700">State</label>

9
bizmatch/src/app/pages/subscription/account/account.component.ts
View File

@ -3,6 +3,7 @@ import { ChangeDetectorRef, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { NgSelectModule } from '@ng-select/ng-select';
import { initFlowbite } from 'flowbite';
import { KeycloakService } from 'keycloak-angular';
import { NgxCurrencyDirective } from 'ngx-currency';
import { ImageCropperComponent } from 'ngx-image-cropper';
@ -16,6 +17,7 @@ import { ConfirmationService } from '../../../components/confirmation/confirmati
import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
import { MessageComponent } from '../../../components/message/message.component';
import { MessageService } from '../../../components/message/message.service';
import { TooltipComponent } from '../../../components/tooltip/tooltip.component';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
import { ValidatedSelectComponent } from '../../../components/validated-select/validated-select.component';
@ -45,6 +47,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
ValidatedInputComponent,
ValidatedSelectComponent,
ValidatedQuillComponent,
TooltipComponent,
],
providers: [TitleCasePipe],
templateUrl: './account.component.html',
@ -71,6 +74,7 @@ export class AccountComponent {
validationMessages: ValidationMessage[] = [];
customerTypeOptions: Array<{ value: string; label: string }> = [];
customerSubTypeOptions: Array<{ value: string; label: string }> = [];
tooltipTarget = 'tooltip-areasServed';
constructor(
public userService: UserService,
private subscriptionService: SubscriptionsService,
@ -89,6 +93,9 @@ export class AccountComponent {
private validationMessagesService: ValidationMessagesService,
) {}
async ngOnInit() {
setTimeout(() => {
initFlowbite();
}, 10);
if (this.id) {
this.user = await this.userService.getById(this.id);
} else {
@ -127,6 +134,7 @@ export class AccountComponent {
await this.userService.save(this.user);
this.messageService.addMessage({ severity: 'success', text: 'Account changes have been persisted', duration: 3000 });
this.validationMessagesService.clearMessages(); // Löschen Sie alle bestehenden Validierungsnachrichten
this.validationMessages = [];
} catch (error) {
this.messageService.addMessage({
severity: 'danger',
@ -135,6 +143,7 @@ export class AccountComponent {
});
if (error.error && Array.isArray(error.error?.message)) {
this.validationMessagesService.updateMessages(error.error.message);
this.validationMessages = error.error.message;
}
}
}

58
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.html
View File

@ -2,28 +2,37 @@
<div class="bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if(listing){
<form #listingForm="ngForm">
<form #listingForm="ngForm" class="space-y-4">
<div class="mb-4">
<label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
<ng-select [readonly]="mode === 'edit'" [items]="selectOptions?.listingCategories" bindLabel="name" bindValue="value" [(ngModel)]="listing.listingsCategory" name="listingsCategory"> </ng-select>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
<input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
</div> -->
<div>
<app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
<quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor>
</div> -->
<div>
<app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="type" class="block text-sm font-bold text-gray-700 mb-1">Type of business</label>
<ng-select [items]="typesOfBusiness" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
</div> -->
<div>
<app-validated-ng-select label="Type of business" name="type" [(ngModel)]="listing.type" [items]="typesOfBusiness"></app-validated-ng-select>
</div>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
@ -32,9 +41,13 @@
<label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
<input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="State" name="state" [(ngModel)]="listing.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.city"></app-validated-input>
</div>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
<input
@ -59,9 +72,13 @@
currencyMask
/>
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
<app-validated-price label="Sales Revenue" name="salesRevenue" [(ngModel)]="listing.salesRevenue"></app-validated-price>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="cashFlow" class="block text-sm font-bold text-gray-700 mb-1">Cash Flow</label>
<input
type="text"
@ -72,9 +89,12 @@
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div> -->
<div>
<app-validated-price label="Cash Flow" name="cashFlow" [(ngModel)]="listing.cashFlow"></app-validated-price>
</div>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="established" class="block text-sm font-bold text-gray-700 mb-1">Years Established Since</label>
<input type="number" id="established" [(ngModel)]="listing.established" name="established" class="w-full p-2 border border-gray-300 rounded-md" />
@ -83,6 +103,10 @@
<label for="employees" class="block text-sm font-bold text-gray-700 mb-1">Employees</label>
<input type="number" id="employees" [(ngModel)]="listing.employees" name="employees" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Years Established Since" name="established" [(ngModel)]="listing.established" kind="number"></app-validated-input>
<app-validated-input label="Employees" name="employees" [(ngModel)]="listing.employees" kind="number"></app-validated-input>
</div>
<div class="flex mb-4 space-x-4">
@ -100,17 +124,20 @@
</div>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="supportAndTraining" class="block text-sm font-bold text-gray-700 mb-1">Support & Training</label>
<input type="text" id="supportAndTraining" [(ngModel)]="listing.supportAndTraining" name="supportAndTraining" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
<div class="mb-4">
<label for="reasonForSale" class="block text-sm font-bold text-gray-700 mb-1">Reason for Sale</label>
<input type="text" id="reasonForSale" [(ngModel)]="listing.reasonForSale" name="reasonForSale" class="w-full p-2 border border-gray-300 rounded-md" />
</div>-->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Support & Training" name="supportAndTraining" [(ngModel)]="listing.supportAndTraining"></app-validated-input>
<app-validated-input label="Reason for Sale" name="reasonForSale" [(ngModel)]="listing.reasonForSale"></app-validated-input>
</div>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="brokerLicencing" class="block text-sm font-bold text-gray-700 mb-1">Broker Licensing</label>
<input type="text" id="brokerLicencing" [(ngModel)]="listing.brokerLicencing" name="brokerLicencing" class="w-full p-2 border border-gray-300 rounded-md" />
@ -119,11 +146,18 @@
<label for="internalListingNumber" class="block text-sm font-bold text-gray-700 mb-1">Internal Listing Number</label>
<input type="number" id="internalListingNumber" [(ngModel)]="listing.internalListingNumber" name="internalListingNumber" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Broker Licensing" name="brokerLicencing" [(ngModel)]="listing.brokerLicencing"></app-validated-input>
<app-validated-input label="Internal Listing Number" name="internalListingNumber" [(ngModel)]="listing.internalListingNumber" kind="number"></app-validated-input>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="internals" class="block text-sm font-bold text-gray-700 mb-1">Internal Notes (Will not be shown on the listing, for your records only.)</label>
<textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div> -->
<div>
<app-validated-textarea label="Internal Notes (Will not be shown on the listing, for your records only.)" name="internals" [(ngModel)]="listing.internals"></app-validated-textarea>
</div>
<div class="flex items-center mb-4">

19
bizmatch/src/app/pages/subscription/edit-business-listing/edit-business-listing.component.ts
View File

@ -17,6 +17,11 @@ import { AutoCompleteCompleteEvent, ImageProperty, createDefaultBusinessListing,
import { environment } from '../../../../environments/environment';
import { MessageService } from '../../../components/message/message.service';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
import { ValidatedTextareaComponent } from '../../../components/validated-textarea/validated-textarea.component';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
@ -27,7 +32,19 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'business-listing',
standalone: true,
imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
imports: [
SharedModule,
ArrayToStringPipe,
DragDropModule,
QuillModule,
NgxCurrencyDirective,
NgSelectModule,
ValidatedInputComponent,
ValidatedQuillComponent,
ValidatedNgSelectComponent,
ValidatedPriceComponent,
ValidatedTextareaComponent,
],
providers: [],
templateUrl: './edit-business-listing.component.html',
styleUrl: './edit-business-listing.component.scss',

193
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.html
View File

@ -1,177 +1,34 @@
<!-- <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 *ngIf="listing" 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]="listingsCategory"
optionLabel="name"
optionValue="value"
(ngModelChange)="changeListingCategory($event)"
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>
<div>
<div class="mb-4">
<label for="description" class="block font-medium text-900 mb-2">Description</label>
<p-editor [(ngModel)]="listing.description" [style]="{ height: '320px' }" [modules]="editorModules">
<ng-template pTemplate="header"></ng-template>
</p-editor>
</div>
</div>
<div class="mb-4">
<label for="type" class="block font-medium text-900 mb-2">Property Category</label>
<p-dropdown
id="type"
[filter]="true"
filterBy="name"
[options]="typesOfCommercialProperty"
[(ngModel)]="listing.type"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="Property Category"
[style]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="states" class="block font-medium text-900 mb-2">State</label>
<p-dropdown
[filter]="true"
filterBy="name"
id="states"
[options]="selectOptions?.states"
[(ngModel)]="listing.state"
optionLabel="name"
optionValue="value"
[showClear]="true"
placeholder="State"
[style]="{ width: '100%' }"
></p-dropdown>
</div>
<div class="mb-4 col-12 md:col-6">
<label for="city" class="block font-medium text-900 mb-2">City</label>
<p-autoComplete id="city" [(ngModel)]="listing.city" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<label for="zipCode" class="block font-medium text-900 mb-2">Zip Code</label>
<input id="zipCode" type="text" pInputText [(ngModel)]="listing.zipCode" />
</div>
<div class="mb-4 col-12 md:col-6">
<label for="county" class="block font-medium text-900 mb-2">County</label>
<input id="county" type="text" pInputText [(ngModel)]="listing.county" />
</div>
</div>
</div>
</div>
<div class="grid">
<div class="mb-4 col-12 md:col-6">
<p-inputSwitch inputId="draft" [(ngModel)]="listing.draft"></p-inputSwitch>
<span class="ml-2 text-900 absolute translate-y-5">Draft Mode (Will not be shown as public listing)</span>
</div>
</div>
<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="price" class="block font-medium text-900 mb-2">Price</label>
<app-inputNumber mode="currency" currency="USD" locale="en-US" inputId="price" [(ngModel)]="listing.price"></app-inputNumber>
</div>
<div class="mb-4 col-12 md:col-6">
<div class="flex flex-column align-items-center flex-or">
<span class="font-medium text-900 mb-2">Property Pictures</span>
<span class="font-light text-sm text-900 mb-2">(Pictures can be uploaded once the listing is posted initially)</span>
<p-fileUpload
mode="basic"
chooseLabel="Upload"
[customUpload]="true"
name="file"
accept="image/*"
[maxFileSize]="maxFileSize"
(onSelect)="select($event)"
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
[disabled]="!listing.id"
>
</p-fileUpload>
</div>
</div>
</div>
@if (listing && listing.imageOrder?.length>0){
<div class="p-2 border-1 surface-border border-round mb-4 image-container" cdkDropListGroup mixedCdkDragDrop (dropped)="onDrop($event)" cdkDropListOrientation="horizontal">
@for (image of listing.imageOrder; track listing.imageOrder) {
<span cdkDropList mixedCdkDropList>
<div cdkDrag mixedCdkDragSizeHelper class="image-wrap">
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="shadow-2" cdkDrag />
<fa-icon [icon]="faTrash" (click)="deleteConfirm(image)"></fa-icon>
</div>
</span>
}
</div>
}
<div>
@if (mode==='create'){
<button pButton pRipple label="Post Listing" class="w-auto" (click)="save()"></button>
} @else {
<button pButton pRipple label="Update Listing" class="w-auto" (click)="save()"></button>
}
</div>
</div>
</div>
</div>
</div>
</div>
<p-toast></p-toast>
<p-confirmDialog></p-confirmDialog>
</div> -->
<div class="container mx-auto p-4">
<div class="bg-white rounded-lg shadow-md p-6">
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
@if (listing){
<form #listingForm="ngForm">
<div class="mb-4">
<form #listingForm="ngForm" class="space-y-4">
<div>
<label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
<select id="listingsCategory" [ngModel]="listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
<option value="business">Business</option>
<option value="commercialProperty">Commercial Property</option>
</select>
<ng-select [readonly]="mode === 'edit'" [items]="selectOptions?.listingCategories" bindLabel="name" bindValue="value" [(ngModel)]="listing.listingsCategory" name="listingsCategory"> </ng-select>
</div>
<div class="mb-4">
<!-- <div class="mb-4">
<label for="title" class="block text-sm font-bold text-gray-700 mb-1">Title of Listing</label>
<input type="text" id="title" [(ngModel)]="listing.title" name="title" class="w-full p-2 border border-gray-300 rounded-md" />
</div> -->
<div>
<app-validated-input label="Title of Listing" name="title" [(ngModel)]="listing.title"></app-validated-input>
</div>
<div class="mb-4">
<label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
<quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor>
<div>
<!-- <label for="description" class="block text-sm font-bold text-gray-700 mb-1">Description</label>
<quill-editor [(ngModel)]="listing.description" name="description" [modules]="quillModules"></quill-editor> -->
<app-validated-quill label="Description" name="description" [(ngModel)]="listing.description"></app-validated-quill>
</div>
<div class="mb-4">
<!-- <div>
<label for="type" class="block text-sm font-bold text-gray-700 mb-1">Property Category</label>
<ng-select [items]="typesOfCommercialProperty" bindLabel="name" bindValue="value" [(ngModel)]="listing.type" name="type"> </ng-select>
</div>
</div> -->
<app-validated-ng-select label="Property Category" name="type" [(ngModel)]="listing.type" [items]="typesOfCommercialProperty"></app-validated-ng-select>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="state" class="block text-sm font-bold text-gray-700 mb-1">State</label>
<ng-select [items]="selectOptions?.states" bindLabel="name" bindValue="value" [(ngModel)]="listing.state" name="state"> </ng-select>
@ -180,9 +37,13 @@
<label for="city" class="block text-sm font-bold text-gray-700 mb-1">City</label>
<input type="text" id="city" [(ngModel)]="listing.city" name="city" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-ng-select label="State" name="state" [(ngModel)]="listing.state" [items]="selectOptions?.states"></app-validated-ng-select>
<app-validated-input label="City" name="city" [(ngModel)]="listing.city"></app-validated-input>
</div>
<div class="flex mb-4 space-x-4">
<!-- <div class="flex mb-4 space-x-4">
<div class="w-1/2">
<label for="zipCode" class="block text-sm font-bold text-gray-700 mb-1">Zip Code</label>
<input type="text" id="zipCode" [(ngModel)]="listing.zipCode" name="zipCode" class="w-full p-2 border border-gray-300 rounded-md" />
@ -191,6 +52,10 @@
<label for="county" class="block text-sm font-bold text-gray-700 mb-1">County</label>
<input type="text" id="county" [(ngModel)]="listing.county" name="county" class="w-full p-2 border border-gray-300 rounded-md" />
</div>
</div> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<app-validated-input label="Zip Code" name="zipCode" [(ngModel)]="listing.zipCode"></app-validated-input>
<app-validated-input label="County" name="county" [(ngModel)]="listing.county"></app-validated-input>
</div>
<!-- <div class="mb-4">
@ -198,8 +63,9 @@
<textarea id="internals" [(ngModel)]="listing.internals" name="internals" class="w-full p-2 border border-gray-300 rounded-md" rows="3"></textarea>
</div> -->
<div class="flex items-center mb-4">
<div class="w-1/2">
<!-- <div class="flex items-center mb-4"> -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- <div class="w-1/2">
<label for="price" class="block text-sm font-bold text-gray-700 mb-1">Price</label>
<input
type="text"
@ -210,8 +76,9 @@
[options]="{ prefix: '$', thousands: ',', decimal: '.', precision: 0, align: 'left' }"
currencyMask
/>
</div>
<div class="w-1/2 flex justify-center">
</div> -->
<app-validated-price label="Price" name="price" [(ngModel)]="listing.price"></app-validated-price>
<div class="flex justify-center">
<label class="flex items-center cursor-pointer">
<div class="relative">
<input type="checkbox" [(ngModel)]="listing.draft" name="draft" class="hidden" />

20
bizmatch/src/app/pages/subscription/edit-commercial-property-listing/edit-commercial-property-listing.component.ts
View File

@ -21,6 +21,10 @@ import { ConfirmationComponent } from '../../../components/confirmation/confirma
import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
import { MessageService } from '../../../components/message/message.service';
import { ValidatedInputComponent } from '../../../components/validated-input/validated-input.component';
import { ValidatedNgSelectComponent } from '../../../components/validated-ng-select/validated-ng-select.component';
import { ValidatedPriceComponent } from '../../../components/validated-price/validated-price.component';
import { ValidatedQuillComponent } from '../../../components/validated-quill/validated-quill.component';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
@ -31,7 +35,21 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
selector: 'commercial-property-listing',
standalone: true,
imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, DragDropMixedComponent],
imports: [
SharedModule,
ArrayToStringPipe,
DragDropModule,
QuillModule,
NgxCurrencyDirective,
NgSelectModule,
ImageCropperComponent,
ConfirmationComponent,
DragDropMixedComponent,
ValidatedInputComponent,
ValidatedQuillComponent,
ValidatedNgSelectComponent,
ValidatedPriceComponent,
],
providers: [],
templateUrl: './edit-commercial-property-listing.component.html',
styleUrl: './edit-commercial-property-listing.component.scss',