My Profile
carlosuscamayta
javascript
11 days ago
14 kB
2
Indexable
Never
Collapse component
<div class="rounded-4 bg-white shadow-sm row px-3 py-2 align-items-center">
<div class="col-sm-4 p-0 fw-bold">{{ title }}</div>
<div class="col-sm-7 p-0 d-flex align-items-center justify-content-between gap-3 flex-grow-1">
<div class="mx-2">{{ description }}</div>
<div class="p-0 d-flex justify-content-end">
<a class="btn p-0 text-toggle" (click)="toggleCollapse()">
<i class="bi" [ngClass]="isCollapsed[id] ? 'bi-caret-up-fill fs-4' : 'bi-caret-down-fill fs-4'"></i>
</a>
</div>
</div>
<div class="card card-body border-0 gap-3" [ngClass]="{'collapse': !isCollapsed[id], 'show': isCollapsed[id]}" [id]="id">
<div>
<ng-content></ng-content>
</div>
</div>
</div>
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-collapse',
templateUrl: './collapse.component.html',
styleUrls: ['./collapse.component.css'],
standalone: true,
imports: [CommonModule]
})
export class CollapseComponent {
@Input() id: string = '';
@Input() title: string = '';
@Input() description: string = '';
isCollapsed: { [key: string]: boolean } = {
[this.id]: false
};
toggleCollapse() {
this.isCollapsed[this.id] = !this.isCollapsed[this.id];
}
}
UserProfile Component HTML
<!-- Pre-Authorized Payment -->
<app-collapse
id="collapsePreAuthorizedPayment"
title="Pre-Authorized Payment"
description="Sign up for pre-authorized payments">
<div class="card card-body border-0 gap-3">
<div class="container mt-4">
<h5>Account(s) set up with paperless billing</h5>
<table class="table table-hover align-middle">
<thead class="table table-hover">
<tr>
<th>Account Name</th>
<th>Account Number</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let account of accounts">
<td>
<a href="#" class="text-decoration-none">{{ account.name }}</a>
</td>
<td>{{ account.number }}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
[(ngModel)]="account.enabled" />
</div>
</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-center mt-3">
<button class="btn btn-outline-secondary">Load More</button>
</div>
</div>
<p class="fst-italic">You can find this information on one of your cheques, through you online
banking account, or by contacting your financial institution.</p>
<div class="row">
<div class="col-md-6">
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Transit</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="transit" id="transit">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Institution</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="institution"
id="institution">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Account</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="account" id="account">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0"></div>
<div class="col-6 p-0 d-flex align-items-center gap-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="termandconditions">
<label class="form-check-label" for="termandconditions">
I agree to the <a href="#">Terms & Conditions</a>
</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="../../../assets/images/echeque.gif"
alt="Payment information">
</div>
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-primary text-white" data-bs-toggle="collapse"
href="#collapsePreAuthorizedPayments">Save</button>
<button class="btn btn-secondary">Reset</button>
</div>
</div>
</app-collapse>
<!-- Paperless Billing -->
<app-collapse
id="collapsePaperlessBilling"
title="Paperless Billing"
description="We will send your bill to the email provided">
<div class="card card-body border-0 gap-3">
<div class="container mt-4">
<h5>Account(s) set up with paperless billing</h5>
<table class="table table-hover align-middle">
<thead class="table table-hover">
<tr>
<th>Account Name</th>
<th>Account Number</th>
<th>Enabled</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let account of accounts">
<td>
<a href="#" class="text-decoration-none">{{ account.name }}</a>
</td>
<td>{{ account.number }}</td>
<td>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox"
[(ngModel)]="account.enabled" />
</div>
</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-center mt-3">
<button class="btn btn-outline-secondary">Load More</button>
</div>
</div>
<p class="fst-italic">You can find this information on one of your cheques, through you online
banking account, or by contacting your financial institution.</p>
<div class="row">
<div class="col-md-6">
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Transit</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="transit" id="transit">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Institution</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="institution"
id="institution">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0 fw-bold">Account</div>
<div class="col-8 p-0 d-flex align-items-center gap-3">
<div class="p-0 d-flex align-items-center gap-3 flex-grow-1">
<div class="flex-grow-1">
<input class="form-control" type="text" name="account" id="account">
</div>
</div>
</div>
</div>
<div class="row px-3 py-2 align-items-center">
<div class="col-4 p-0"></div>
<div class="col-6 p-0 d-flex align-items-center gap-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="termandconditions">
<label class="form-check-label" for="termandconditions">
I agree to the <a href="#">Terms & Conditions</a>
</label>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<img class="img-fluid" src="../../../assets/images/echeque.gif"
alt="Payment information">
</div>
</div>
<div class="d-flex justify-content-end gap-2">
<button class="btn btn-primary text-white" data-bs-toggle="collapse"
href="#collapsePreAuthorizedPayments">Save</button>
<button class="btn btn-secondary">Reset</button>
</div>
</div>
</app-collapse>
user profile typescript
accounts = [
{ name: '33 WILLOW DR, AYLMER', number: '151600-8', enabled: false },
{ name: '100 SOUTH ST E, AYLMER', number: '152219-3', enabled: true },
{ name: '66 ALBERT ST. UNIT 12, CLINTON', number: '88201510-9', enabled: true },
{ name: '110 THAMES ST S, INGERSOL', number: '94240-10', enabled: false },
{ name: '28 MONTREAL ST UNIT 2, GODERICH', number: '42546-3', enabled: false },
{ name: '373 SHERWOOD AVE, BELMONT', number: '156676-3', enabled: true },
{ name: '122 WIDDER ST UNIT NET METER, GODERICH', number: '11001879-0', enabled: true },
{ name: '178 EARL ST UNIT NET METER, GODERICH', number: '11002135-0', enabled: true },
{ name: '143 BELL ST, INGERSOL', number: '10652-0', enabled: false }
];
Leave a Comment