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

initial release

Browse Source
This commit is contained in:
Andreas Knuth
2024-02-29 10:23:41 -06:00
commit 5146c8e919
210 changed files with 11040 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
bizmatch/src/app/pages/subscription/account/account.component.html Normal file
View File

@@ -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>