339 lines
20 KiB
HTML
339 lines
20 KiB
HTML
<div class="animated fadeIn">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<strong>Submit Transaction</strong>
|
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
|
</div>
|
|
<div class="card-block">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="datetime-local" class="form-control" [min]="minDate" [(ngModel)]="myDate" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Enter the date and time the transaction occurred.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="amount" (ngModelChange)="transactionFormValidate()">
|
|
</div>
|
|
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<input type="checkbox" class="mr-auto" [(ngModel)]="essentialPurchase" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Recurring Purchase</label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<input type="checkbox" class="mr-auto" [(ngModel)]="recurringPurchase" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Tick if the purchase frequently recurs, such as monthly.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="recurringPurchase" class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="row">
|
|
<div class="col-md-6 btn-group-vertical">
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'daily'">
|
|
<input value="daily" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Daily
|
|
</label>
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'weekly'">
|
|
<input value="weekly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Weekly
|
|
</label>
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'fortnightly'">
|
|
<input value="fortnightly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Fortnightly
|
|
</label>
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'monthly'">
|
|
<input value="monthly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Monthly
|
|
</label>
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'quarterly'">
|
|
<input value="quarterly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Quarterly
|
|
</label>
|
|
<label class="btn btn-secondary mb-0" [class.active]="recurringType == 'yearly'">
|
|
<input value="yearly" type="radio" name="radios" style="display:none;" [(ngModel)]="recurringType" (ngModelChange)="transactionFormValidate()">Yearly
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
|
|
<div class="col-md-9">
|
|
<div class="row">
|
|
<div class="col-md-6 btn-group-vertical">
|
|
<label class="btn btn-secondary mb-0" [class.active]="categoryId == null">
|
|
<input value="" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">Uncategorised
|
|
</label>
|
|
<label *ngFor="let category of leftCategoryList" class="btn btn-secondary mb-0" [class.active]="categoryId == category">
|
|
<input [value]="category" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category] }}
|
|
</label>
|
|
</div>
|
|
<div class="col-md-6 btn-group-vertical">
|
|
<label *ngFor="let category2 of rightCategoryList" class="btn btn-secondary mb-0" [class.active]=" categoryId == category2">
|
|
<input [value]="category2" type="radio" name="radios" style="display:none;" [(ngModel)]="categoryId">{{ categoryList[category2] }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Name</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="text" class="form-control" placeholder="Organisation Name" [(ngModel)]="submitOrg.name" (input)="organisationSearch($event)" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Enter the name of the organisation money was spent. Choose existing ones from below or if not found, enter the details below.</span>
|
|
</div>
|
|
</div>
|
|
<org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
|
|
<div *ngIf="showAddStore">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Organisation Street Name</label>
|
|
<div class="col-md-9">
|
|
<input type="text" class="form-control" placeholder="Which Street?" [(ngModel)]="submitOrg.street_name" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Enter the street name where the organisation is located at.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Organisation Town</label>
|
|
<div class="col-md-9">
|
|
<input type="text" class="form-control" placeholder="Which Town?" [(ngModel)]="submitOrg.town" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Enter the name of the town where the organisation is located at.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Organisation Postcode</label>
|
|
<div class="col-md-9">
|
|
<input type="text" class="form-control" placeholder="Postcode if known" [(ngModel)]="submitOrg.postcode" (ngModelChange)="transactionFormValidate()">
|
|
<span class="help-block">Enter the postcode where the organisation is located at.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-9">
|
|
<div [ngSwitch]="transactionFormStatus">
|
|
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
|
|
Submit Succeeded.
|
|
</div>
|
|
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
|
|
{{transactionFormStatusError}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="submit" (click)="postTransaction()" [disabled]="transactionFormInvalid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="accountType == 'organisation'" class="card">
|
|
<div class="card-header">
|
|
<strong>Profile & Payroll Data</strong>
|
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
|
</div>
|
|
<form class="form-horizontal" [formGroup]="payrollForm" (ngSubmit)="onSubmitPayroll()">
|
|
<div class="card-block">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="month" class="form-control" formControlName="entry_period">
|
|
<span class="help-block">Enter the month and year for this information.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="number" class="form-control" formControlName="employee_amount" placeholder="0">
|
|
<span class="help-block">Enter the amount of employees the organisation has for the entry month.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="number" class="form-control" formControlName="local_employee_amount" placeholder="0">
|
|
<span class="help-block">Enter the amount of employees that live locally to the organisation for the entry month.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Payroll</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="gross_payroll" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Enter the Gross Payroll for the organisation for the entry month.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Income Tax</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payroll_income_tax" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Enter the organisation's total income tax for the entry month.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Employees Total NI</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payroll_employee_ni" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Total of Employees National Insurance contributions for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Employers Total NI</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payroll_employer_ni" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Employers National Insurance contributions for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Pensions</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payroll_total_pension" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Total spent on employee pensions by the organisation for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Other Benefits</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payroll_other_benefit" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">A total of other payments such as refunded fuel etc. for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-9">
|
|
<div [ngSwitch]="payrollFormStatus">
|
|
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
|
|
Submit Succeeded.
|
|
</div>
|
|
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
|
|
Error received, please try again.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="submit" [disabled]="!payrollForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div *ngIf="false" class="card">
|
|
<div class="card-header">
|
|
<strong>Individual Employee Data</strong>
|
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
|
</div>
|
|
<form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmitEmployee()">
|
|
<div class="card-block">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="month" class="form-control" formControlName="entry_period">
|
|
<span class="help-block">Enter the month and year for this information.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Employee number</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="number" class="form-control" formControlName="employee_no" placeholder="0">
|
|
<span class="help-block">Used to identify employee anonymously</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Wage</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employee_gross_wage" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Enter the gross wage of the employee for the entry month.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Income Tax</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employee_income_tax" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Enter the total income tax of the employee for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Employee NI</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employee_ni" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Individual Employees National Insurance Contributions for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Employee's Pension</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employee_pension" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">Individual Employees Pension contributions for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total Employee Other Benefits</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="employee_other_benefit" placeholder="0.00">
|
|
</div>
|
|
<span class="help-block">A total of other payments such as refunded fuel etc. for the entry month</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="col-md-9">
|
|
<div [ngSwitch]="employeeFormStatus">
|
|
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
|
|
Submit Succeeded.
|
|
</div>
|
|
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
|
|
Error received, please try again.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<button type="submit" [disabled]="!employeeForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div><!--/.row-->
|
|
</div>
|