509 lines
26 KiB
HTML
509 lines
26 KiB
HTML
<div class="container mx-auto p-4">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<form #accountForm="ngForm" class="space-y-4">
|
|
<h2 class="text-2xl font-bold mb-4">Account Details</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="md:col-span-2">
|
|
<label for="email" class="block text-sm font-medium text-gray-700">E-mail (required)</label>
|
|
<input type="email" id="email" name="email" [(ngModel)]="user.email" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
<p class="text-xs text-gray-500 mt-1">You can only modify your email by contacting us at support@bizwatch.net</p>
|
|
</div>
|
|
<div class="flex flex-row items-center justify-around md:space-x-4">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-700 mb-1">Company Logo</p>
|
|
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center">
|
|
<img src="https://placehold.co/80x80" alt="Company logo" class="max-w-full max-h-full" />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Upload
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-700 mb-1">Your Profile Picture</p>
|
|
<div class="w-20 h-20 w-full rounded-md flex items-center justify-center">
|
|
<img src="https://placehold.co/80x80" alt="Profile picture" class="max-w-full max-h-full" />
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="mt-2 w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Upload
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="firstname" class="block text-sm font-medium text-gray-700">First Name</label>
|
|
<input type="text" id="firstname" name="firstname" [(ngModel)]="user.firstname" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
</div>
|
|
<div>
|
|
<label for="lastname" class="block text-sm font-medium text-gray-700">Last Name</label>
|
|
<input type="text" id="lastname" name="lastname" [(ngModel)]="user.lastname" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="customerType" class="block text-sm font-medium text-gray-700">Customer Type</label>
|
|
<select id="customerType" name="customerType" [(ngModel)]="user.customerType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option *ngFor="let type of customerTypes" [value]="type">{{ type | titlecase }}</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="customerSubType" class="block text-sm font-medium text-gray-700">Professional Type</label>
|
|
<select id="customerSubType" name="customerSubType" [(ngModel)]="user.customerSubType" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option *ngFor="let subType of customerSubTypes" [value]="subType">{{ subType | titlecase }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<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>
|
|
<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>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<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>
|
|
<div>
|
|
<label for="companyWebsite" class="block text-sm font-medium text-gray-700">Company Website</label>
|
|
<input type="url" id="companyWebsite" name="companyWebsite" [(ngModel)]="user.companyWebsite" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
</div>
|
|
<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>
|
|
|
|
<div>
|
|
<label for="companyOverview" class="block text-sm font-medium text-gray-700">Company Overview</label>
|
|
<quill-editor [(ngModel)]="user.companyOverview" name="companyOverview"></quill-editor>
|
|
</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"></quill-editor>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Areas We Serve</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>
|
|
<select id="state" name="state" [(ngModel)]="user.areasServed[0].state" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option value="TEXAS">TEXAS</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="county" class="block text-sm font-medium text-gray-700">County</label>
|
|
<input type="text" id="county" name="county" [(ngModel)]="user.areasServed[0].county" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
</div>
|
|
</div>
|
|
<div class="mt-2">
|
|
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2">+</button>
|
|
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md">-</button>
|
|
<span class="text-sm text-gray-500 ml-2">[Add more Areas or remove existing ones.]</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Licensed In</h3>
|
|
@for (licensedIn of user.licensedIn; track licensedIn){
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="licenseState" class="block text-sm font-medium text-gray-700">State</label>
|
|
<select id="licenseState" name="licenseState" [(ngModel)]="licensedIn.state" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
|
|
<option value="TEXAS">TEXAS</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="licenseNumber" class="block text-sm font-medium text-gray-700">License Number</label>
|
|
<input type="text" id="licenseNumber" name="licenseNumber" [(ngModel)]="licensedIn.registerNo" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
|
|
</div>
|
|
</div>
|
|
}
|
|
<div class="mt-2">
|
|
<button type="button" class="px-2 py-1 bg-green-500 text-white rounded-md mr-2">+</button>
|
|
<button type="button" class="px-2 py-1 bg-red-500 text-white rounded-md">-</button>
|
|
<span class="text-sm text-gray-500 ml-2">[Add more licenses or remove existing ones.]</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-start">
|
|
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">Update Profile</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- <div class="mt-8">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Modified</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Business Broker</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 24, 2024</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 24, 2024</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Feb 12, 9999</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">active</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> -->
|
|
<div class="mt-8">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
|
|
<div class="overflow-x-auto">
|
|
<div class="inline-block min-w-full">
|
|
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Level</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Start Date</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date Modified</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">End Date</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Business Broker</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 24, 2024</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">May 24, 2024</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Feb 12, 9999</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">active</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Responsive version for small screens -->
|
|
<div class="mt-8 sm:hidden">
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">Membership Level</h3>
|
|
<div class="space-y-6">
|
|
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:px-6">
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">ID</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">1</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Level</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">Business Broker</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Start Date</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">May 24, 2024</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Date Modified</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">May 24, 2024</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">End Date</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">Feb 12, 9999</dd>
|
|
</div>
|
|
<div class="sm:col-span-1">
|
|
<dt class="text-sm font-medium text-gray-500">Status</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">active</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <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">
|
|
@if (user){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="state" class="block font-medium text-900 mb-2">E-mail (required)</label>
|
|
<input id="state" type="text" [disabled]="true" pInputText [(ngModel)]="user.email" />
|
|
<p class="font-italic text-xs line-height-1">You can only modify your email by contacting us at support@bizmatch.net</p>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="customerType" class="block font-medium text-900 mb-2">Customer Type</label>
|
|
<p-dropdown id="customerType" [options]="selectOptions?.customerTypes" [(ngModel)]="user.customerType" optionLabel="name" optionValue="value" placeholder="State" [style]="{ width: '100%' }"></p-dropdown>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="customerType" class="block font-medium text-900 mb-2">Professional Role</label>
|
|
<p-dropdown
|
|
id="customerSubType"
|
|
[options]="selectOptions?.customerSubTypes"
|
|
[(ngModel)]="user.customerSubType"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
placeholder="State"
|
|
[style]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="firstname" class="block font-medium text-900 mb-2">First Name</label>
|
|
<input id="firstname" type="text" pInputText [(ngModel)]="user.firstname" />
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="lastname" class="block font-medium text-900 mb-2">Last Name</label>
|
|
<input id="lastname" type="text" pInputText [(ngModel)]="user.lastname" />
|
|
</div>
|
|
</div>
|
|
@if (isProfessional){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="firstname" class="block font-medium text-900 mb-2">Company Name</label>
|
|
<input id="firstname" type="text" pInputText [(ngModel)]="user.companyName" />
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="lastname" class="block font-medium text-900 mb-2">Describe yourself</label>
|
|
<input id="lastname" type="text" pInputText [(ngModel)]="user.description" />
|
|
</div>
|
|
</div>
|
|
} @if (isProfessional){
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
|
|
<p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="companyWebsite" class="block font-medium text-900 mb-2">Company Website</label>
|
|
<input id="companyWebsite" type="text" pInputText [(ngModel)]="user.companyWebsite" />
|
|
</div>
|
|
<div class="mb-4 col-12 md:col-4">
|
|
<label for="companyLocation" class="block font-medium text-900 mb-2">Company Location</label>
|
|
<p-autoComplete [(ngModel)]="user.companyLocation" [suggestions]="suggestions" (completeMethod)="search($event)"></p-autoComplete>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="grid">
|
|
<div class="mb-4 col-12 md:col-6">
|
|
<label for="phoneNumber" class="block font-medium text-900 mb-2">Your Phone Number</label>
|
|
<p-inputMask mask="(999) 999-9999" placeholder="(123) 456-7890" [(ngModel)]="user.phoneNumber"></p-inputMask>
|
|
</div>
|
|
</div>
|
|
} @if (isProfessional){
|
|
<div class="mb-4">
|
|
<label for="companyOverview" class="block font-medium text-900 mb-2">Company Overview</label>
|
|
<p-editor [(ngModel)]="user.companyOverview" [style]="{ height: '320px' }" [modules]="editorModules">
|
|
<ng-template pTemplate="header"></ng-template>
|
|
</p-editor>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="companyOverview" class="block font-medium text-900 mb-2">Services We offer</label>
|
|
<p-editor [(ngModel)]="user.offeredServices" [style]="{ height: '320px' }" [modules]="editorModules">
|
|
<ng-template pTemplate="header"></ng-template>
|
|
</p-editor>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="areasServed" class="block font-medium text-900 mb-2">Areas We Serve</label>
|
|
@for (areasServed of user.areasServed; track areasServed){
|
|
<div class="grid">
|
|
<div class="flex col-12 md:col-6">
|
|
<p-dropdown
|
|
[filter]="true"
|
|
filterBy="name"
|
|
id="states"
|
|
[options]="selectOptions?.states"
|
|
[(ngModel)]="areasServed.state"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
placeholder="State"
|
|
[ngStyle]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="flex col-12 md:col-6">
|
|
<input id="county" type="text" pInputText [(ngModel)]="areasServed.county" placeholder="Area/County Served" />
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
|
|
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addArea()"></p-button>
|
|
<p-button icon="pi pi-minus" severity="danger" (click)="removeArea()" [disabled]="user.areasServed?.length < 2"></p-button>
|
|
<span class="text-xs"> (Add more Areas or remove existing ones.)</span>
|
|
</div>
|
|
<div>
|
|
<label for="companyOverview" class="block font-medium text-900 mb-2">Licensed In</label>
|
|
@for (licensedIn of user.licensedIn; track licensedIn){
|
|
<div class="grid">
|
|
<div class="flex col-12 md:col-6">
|
|
<p-dropdown
|
|
[filter]="true"
|
|
filterBy="name"
|
|
id="states"
|
|
[options]="selectOptions?.states"
|
|
[(ngModel)]="licensedIn.state"
|
|
optionLabel="name"
|
|
optionValue="value"
|
|
placeholder="State"
|
|
[ngStyle]="{ width: '100%' }"
|
|
></p-dropdown>
|
|
</div>
|
|
<div class="flex col-12 md:col-6">
|
|
<input id="registerNo" type="text" pInputText [(ngModel)]="licensedIn.registerNo" placeholder="Licence Number" />
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<div class="field mb-5 col-12 md:col-6 flex align-items-center">
|
|
<p-button class="mr-1" icon="pi pi-plus" severity="success" (click)="addLicence()"></p-button>
|
|
<p-button icon="pi pi-minus" severity="danger" (click)="removeLicence()" [disabled]="user.licensedIn?.length < 2"></p-button>
|
|
<span class="text-xs"> (Add more licenses or remove existing ones.)</span>
|
|
</div>
|
|
} }
|
|
<div>
|
|
<button pButton pRipple label="Update Profile" class="w-auto" (click)="updateProfile(user)"></button>
|
|
</div>
|
|
</div>
|
|
@if (isProfessional){
|
|
<div>
|
|
<div class="flex flex-column align-items-center flex-or mb-8">
|
|
<span class="font-medium text-900 mb-2">Company Logo</span>
|
|
<span class="font-medium text-xs mb-2">(is shown in every offer)</span>
|
|
@if(user?.hasCompanyLogo){
|
|
<div class="image-wrap">
|
|
<img src="{{ companyLogoUrl }}" class="rounded-profile" />
|
|
<fa-icon [icon]="faTrash" (click)="deleteConfirm('logo')"></fa-icon>
|
|
</div>
|
|
} @else {
|
|
<img src="assets/images/placeholder.png" class="rounded-profile" />
|
|
}
|
|
<p-fileUpload
|
|
#companyUpload
|
|
mode="basic"
|
|
chooseLabel="Upload"
|
|
name="file"
|
|
[customUpload]="true"
|
|
accept="image/*"
|
|
[maxFileSize]="maxFileSize"
|
|
(onSelect)="select($event, 'company')"
|
|
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
|
|
></p-fileUpload>
|
|
</div>
|
|
<p-divider></p-divider>
|
|
<div class="flex flex-column align-items-center flex-or">
|
|
<span class="font-medium text-900 mb-2">Your Profile Picture</span>
|
|
@if(user?.hasProfile){
|
|
<div class="image-wrap">
|
|
<img src="{{ profileUrl }}" class="rounded-profile" />
|
|
<fa-icon [icon]="faTrash" (click)="deleteConfirm('profile')"></fa-icon>
|
|
</div>
|
|
} @else {
|
|
<img src="assets/images/person_placeholder.jpg" class="rounded-profile" />
|
|
}
|
|
<p-fileUpload
|
|
#profileUpload
|
|
mode="basic"
|
|
chooseLabel="Upload"
|
|
name="file"
|
|
[customUpload]="true"
|
|
accept="image/*"
|
|
[maxFileSize]="maxFileSize"
|
|
(onSelect)="select($event, 'profile')"
|
|
styleClass="p-button-outlined p-button-plain p-button-rounded mt-4"
|
|
></p-fileUpload>
|
|
</div>
|
|
</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>
|
|
<p-confirmDialog></p-confirmDialog> -->
|