This repository has been archived on 2023-08-16. You can view files and clone it, but cannot push or open issues or pull requests.
FoodLoop-Web/src/app/dashboard/add-data.component.html

329 lines
18 KiB
HTML
Raw Normal View History

2017-06-26 17:36:48 +00:00
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
2017-08-29 17:15:47 +00:00
<div class="card">
<div class="card-header">
<strong>Submit Transaction</strong>
2017-08-29 17:15:47 +00:00
<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>
2017-08-29 17:15:47 +00:00
</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>
2017-08-29 17:15:47 +00:00
</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>
2017-08-29 17:15:47 +00:00
</div>
</div>
<org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
2017-08-29 17:15:47 +00:00
<div *ngIf="showAddStore">
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></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>
2017-08-29 17:15:47 +00:00
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Town</strong></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>
2017-08-29 17:15:47 +00:00
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Postcode</strong></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>
2017-08-29 17:15:47 +00:00
</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">
2017-06-26 17:36:48 +00:00
<div class="card-header">
2017-06-29 15:33:11 +00:00
<strong>Profile & Payroll Data</strong>
<small>Required Data marked in <strong>bold</strong>.</small>
2017-06-26 17:36:48 +00:00
</div>
2017-06-29 15:33:11 +00:00
<form class="form-horizontal" [formGroup]="payrollForm" (ngSubmit)="onSubmitPayroll()">
<div class="card-block">
2017-06-26 17:36:48 +00:00
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<input type="month" class="form-control" formControlName="entryperiod">
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-08-25 12:00:58 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total amount of Employees</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<input type="number" class="form-control" formControlName="employeeamount" placeholder="0">
2017-06-26 17:36:48 +00:00
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
2017-08-25 12:00:58 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total amount of local Employees</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<input type="number" class="form-control" formControlName="localemployeeamount" placeholder="0">
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Payroll</strong></label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="grosspayroll" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="payrollincometax" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Employees Total NI</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="payrollemployeeni" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Employers Total NI</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="payrollemployerni" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total Pensions</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="payrolltotalpension" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total Other Benefits</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="payrollotherbenefit" placeholder="0.00">
</div>
<span class="help-block">A total of other payments such as refunded fuel etc.</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
2017-08-25 11:18:14 +00:00
<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>
2017-06-29 15:33:11 +00:00
</div>
<div class="card-footer">
2017-08-25 11:18:14 +00:00
<button type="submit" [disabled]="!payrollForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
2017-06-29 15:33:11 +00:00
</div>
2017-08-29 17:15:47 +00:00
</form>
2017-06-29 15:33:11 +00:00
</div>
<div *ngIf="accountType == 'organisation'" class="card">
2017-06-29 15:33:11 +00:00
<div class="card-header">
<strong>Individual Supplier Data</strong>
<small>Optional but recommended.</small>
</div>
<form class="form-horizontal" [formGroup]="singleSupplierForm" (ngSubmit)="onSubmitSingleSupplier()">
<div class="card-block">
2017-07-03 16:20:48 +00:00
<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="entryperiod">
<span class="help-block">Must be filled in to submit this data.</span>
</div>
</div>
2017-06-26 17:36:48 +00:00
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Supplier Business Name</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<input type="text" class="form-control" formControlName="supplierbusinessname">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Postcode</label>
<div class="col-md-9">
<input type="text" class="form-control" formControlName="postcode">
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Monthly Spend</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="monthlyspend" placeholder="0.00">
2017-06-26 17:36:48 +00:00
</div>
2017-06-29 15:33:11 +00:00
<span class="help-block">This is a help text</span>
</div>
</div>
2017-08-25 11:18:14 +00:00
<div class="form-group row">
<div class="col-md-9">
<div [ngSwitch]="singleSupplierFormStatus">
<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>
2017-06-29 15:33:11 +00:00
</div>
<div class="card-footer">
2017-08-25 11:18:14 +00:00
<button type="submit" [disabled]="!singleSupplierForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
2017-06-29 15:33:11 +00:00
</div>
</form>
</div>
<div *ngIf="accountType == 'organisation'" class="card">
2017-06-29 15:33:11 +00:00
<div class="card-header">
<strong>Individual Employee Data</strong>
<small>Optional but recommended.</small>
</div>
<form class="form-horizontal" [formGroup]="employeeForm" (ngSubmit)="onSubmitEmployee()">
<div class="card-block">
2017-07-03 16:20:48 +00:00
<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="entryperiod">
<span class="help-block">Must be filled in to submit this data.</span>
</div>
</div>
2017-06-29 15:33:11 +00:00
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Employee number</label>
<div class="col-md-9">
<input type="number" class="form-control" formControlName="employeeno" 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">Gross Wage</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="employeegrosswage" placeholder="0.00">
2017-06-26 17:36:48 +00:00
</div>
2017-06-29 15:33:11 +00:00
<span class="help-block">This is a help text</span>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 form-control-label" for="text-input">Total Income Tax</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="employeeincometax" placeholder="0.00">
2017-06-26 17:36:48 +00:00
</div>
2017-06-29 15:33:11 +00:00
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="employeeni" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Employee's Pension</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="employeepension" placeholder="0.00">
</div>
<span class="help-block">This is a help text</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
<div class="form-group row">
2017-06-29 15:33:11 +00:00
<label class="col-md-3 form-control-label" for="text-input">Total Employee Other Benefits</label>
2017-06-26 17:36:48 +00:00
<div class="col-md-9">
2017-06-29 15:33:11 +00:00
<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="employeeotherbenefit" placeholder="0.00">
</div>
<span class="help-block">A total of other payments such as refunded fuel etc.</span>
2017-06-26 17:36:48 +00:00
</div>
</div>
2017-08-25 11:18:14 +00:00
<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>
2017-06-29 15:33:11 +00:00
</div>
<div class="card-footer">
2017-08-25 11:18:14 +00:00
<button type="submit" [disabled]="!employeeForm.valid" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
2017-06-29 15:33:11 +00:00
</div>
</form>
2017-06-26 17:36:48 +00:00
</div>
</div>
</div><!--/.row-->
</div>