Fully expanded trader form with API
This commit is contained in:
piratefinn
parent
439ac5494c
commit
d5edab6e2e
5 changed files with 327 additions and 174 deletions
|
|
@ -3,196 +3,248 @@
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<strong>Basic Form</strong> Elements
|
<strong>Profile & Payroll Data</strong>
|
||||||
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-block">
|
<form class="form-horizontal" [formGroup]="payrollForm" (ngSubmit)="onSubmitPayroll()">
|
||||||
<form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
|
<div class="card-block">
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label">Static</label>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Period of entry month</strong></label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<p class="form-control-static">Username</p>
|
<input type="month" class="form-control" formControlName="entryperiod">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="text-input">Text Input</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<input type="text" id="text-input" name="text-input" class="form-control" placeholder="Text">
|
|
||||||
<span class="help-block">This is a help text</span>
|
<span class="help-block">This is a help text</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label" for="email-input">Email Input</label>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of Employees</strong></label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<input type="email" id="email-input" name="email-input" class="form-control" placeholder="Enter Email">
|
<input type="number" class="form-control" formControlName="employeeamount" placeholder="0">
|
||||||
<span class="help-block">Please enter your email</span>
|
<span class="help-block">This is a help text</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label" for="password-input">Password</label>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Total amount of local Employees</strong></label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<input type="password" id="password-input" name="password-input" class="form-control" placeholder="Password">
|
<input type="number" class="form-control" formControlName="localemployeeamount" placeholder="0">
|
||||||
<span class="help-block">Please enter a complex password</span>
|
<span class="help-block">This is a help text</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label" for="disabled-input">Disabled Input</label>
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Payroll</strong></label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<input type="text" id="disabled-input" name="disabled-input" class="form-control" placeholder="Disabled" disabled>
|
<div class="input-group">
|
||||||
</div>
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
||||||
</div>
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="grosspayroll" placeholder="0.00">
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="textarea-input">Textarea</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<textarea id="textarea-input" name="textarea-input" rows="9" class="form-control" placeholder="Content.."></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="select">Select</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<select id="select" name="select" class="form-control">
|
|
||||||
<option value="0">Please select</option>
|
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="select">Select Large</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<select id="select" name="select" class="form-control form-control-lg">
|
|
||||||
<option value="0">Please select</option>
|
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="select">Select Small</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<select id="select" name="select" class="form-control form-control-sm">
|
|
||||||
<option value="0">Please select</option>
|
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="select">Disabled Select</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<select id="disabledSelect" class="form-control" disabled>
|
|
||||||
<option value="0">Please select</option>
|
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label" for="multiple-select">Multiple select</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<select id="multiple-select" name="multiple-select" class="form-control" size="5" multiple>
|
|
||||||
<option value="1">Option #1</option>
|
|
||||||
<option value="2">Option #2</option>
|
|
||||||
<option value="3">Option #3</option>
|
|
||||||
<option value="4">Option #4</option>
|
|
||||||
<option value="5">Option #5</option>
|
|
||||||
<option value="6">Option #6</option>
|
|
||||||
<option value="7">Option #7</option>
|
|
||||||
<option value="8">Option #8</option>
|
|
||||||
<option value="9">Option #9</option>
|
|
||||||
<option value="10">Option #10</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label">Radios</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<div class="radio">
|
|
||||||
<label for="radio1">
|
|
||||||
<input type="radio" id="radio1" name="radios" value="option1"> Option 1
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label for="radio2">
|
|
||||||
<input type="radio" id="radio2" name="radios" value="option2"> Option 2
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label for="radio3">
|
|
||||||
<input type="radio" id="radio3" name="radios" value="option3"> Option 3
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
<span class="help-block">This is a help text</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label">Inline Radios</label>
|
<label class="col-md-3 form-control-label" for="text-input">Total Income Tax</label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<label class="radio-inline" for="inline-radio1">
|
<div class="input-group">
|
||||||
<input type="radio" id="inline-radio1" name="inline-radios" value="option1"> One
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
||||||
</label>
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrollincometax" placeholder="0.00">
|
||||||
<label class="radio-inline" for="inline-radio2">
|
|
||||||
<input type="radio" id="inline-radio2" name="inline-radios" value="option2"> Two
|
|
||||||
</label>
|
|
||||||
<label class="radio-inline" for="inline-radio3">
|
|
||||||
<input type="radio" id="inline-radio3" name="inline-radios" value="option3"> Three
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group row">
|
|
||||||
<label class="col-md-3 form-control-label">Checkboxes</label>
|
|
||||||
<div class="col-md-9">
|
|
||||||
<div class="checkbox">
|
|
||||||
<label for="checkbox1">
|
|
||||||
<input type="checkbox" id="checkbox1" name="checkbox1" value="option1"> Option 1
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<span class="help-block">This is a help text</span>
|
||||||
<label for="checkbox2">
|
</div>
|
||||||
<input type="checkbox" id="checkbox2" name="checkbox2" value="option2"> Option 2
|
</div>
|
||||||
</label>
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input">Employees Total NI</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="payrollemployeeni" placeholder="0.00">
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<span class="help-block">This is a help text</span>
|
||||||
<label for="checkbox3">
|
</div>
|
||||||
<input type="checkbox" id="checkbox3" name="checkbox3" value="option3"> Option 3
|
</div>
|
||||||
</label>
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input">Employers Total NI</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="payrollemployerni" placeholder="0.00">
|
||||||
</div>
|
</div>
|
||||||
|
<span class="help-block">This is a help text</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label">Inline Checkboxes</label>
|
<label class="col-md-3 form-control-label" for="text-input">Total Pensions</label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<label class="checkbox-inline" for="inline-checkbox1">
|
<div class="input-group">
|
||||||
<input type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1">One
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
||||||
</label>
|
<input type="number" min="0.00" step="0.01" class="form-control" formControlName="payrolltotalpension" placeholder="0.00">
|
||||||
<label class="checkbox-inline" for="inline-checkbox2">
|
</div>
|
||||||
<input type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2">Two
|
<span class="help-block">This is a help text</span>
|
||||||
</label>
|
|
||||||
<label class="checkbox-inline" for="inline-checkbox3">
|
|
||||||
<input type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3">Three
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label" for="file-input">File input</label>
|
<label class="col-md-3 form-control-label" for="text-input">Total Other Benefits</label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<input type="file" id="file-input" name="file-input">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
</div>
|
||||||
<label class="col-md-3 form-control-label" for="file-multiple-input">Multiple File input</label>
|
<div class="card-footer">
|
||||||
<div class="col-md-9">
|
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||||
<input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<strong>Total Suppliers Data</strong>
|
||||||
|
<small>Required Data marked in <strong>bold</strong>.</small>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-footer">
|
<form class="form-horizontal" [formGroup]="suppliersForm" (ngSubmit)="onSubmitSuppliers()">
|
||||||
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
<div class="card-block">
|
||||||
<button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> Reset</button>
|
<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">This is a help text</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Gross Spend</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="grossspend" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<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"><strong>Total amount of Suppliers</strong></label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<input type="number" class="form-control" formControlName="suppliersamount" placeholder="0">
|
||||||
|
<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"><strong>Total amount of local Suppliers</strong></label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<input type="number" class="form-control" formControlName="localsuppliersamount" placeholder="0">
|
||||||
|
<span class="help-block">This is a help text</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
<strong>Individual Supplier Data</strong>
|
||||||
|
<small>Optional but recommended.</small>
|
||||||
</div>
|
</div>
|
||||||
|
<form class="form-horizontal" [formGroup]="singleSupplierForm" (ngSubmit)="onSubmitSingleSupplier()">
|
||||||
|
<div class="card-block">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label class="col-md-3 form-control-label" for="text-input">Supplier Business Name</label>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<span class="help-block">This is a help text</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<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">
|
||||||
|
<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="grosswage" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
</div>
|
||||||
|
<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="employeeni" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<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">Employee's Pension</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="employeepension" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<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 Employee Other Benefits</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="employeeotherbenefit" placeholder="0.00">
|
||||||
|
</div>
|
||||||
|
<span class="help-block">A total of other payments such as refunded fuel etc.</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<button type="submit" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Submit</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!--/.row-->
|
</div><!--/.row-->
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,106 @@ import 'rxjs/add/operator/map';
|
||||||
providers: [ApiService]
|
providers: [ApiService]
|
||||||
})
|
})
|
||||||
export class AddDataComponent {
|
export class AddDataComponent {
|
||||||
|
payrollForm: FormGroup;
|
||||||
|
suppliersForm: FormGroup;
|
||||||
|
singleSupplierForm: FormGroup;
|
||||||
|
employeeForm: FormGroup;
|
||||||
|
|
||||||
constructor() { }
|
constructor(
|
||||||
|
private http: Http,
|
||||||
|
private formBuilder: FormBuilder,
|
||||||
|
private api: ApiService,
|
||||||
|
) {
|
||||||
|
this.payrollForm = this.formBuilder.group({
|
||||||
|
entryperiod: ['', [Validators.required]],
|
||||||
|
employeeamount: ['', [Validators.required]],
|
||||||
|
localemployeeamount: ['', [Validators.required]],
|
||||||
|
grosspayroll: ['', [Validators.required]],
|
||||||
|
payrollincometax: [''],
|
||||||
|
payrollemployeeni: [''],
|
||||||
|
payrollemployerni: [''],
|
||||||
|
payrolltotalpension: [''],
|
||||||
|
payrollotherbenefit: [''],
|
||||||
|
});
|
||||||
|
this.suppliersForm = this.formBuilder.group({
|
||||||
|
entryperiod: ['', [Validators.required]],
|
||||||
|
grossspend: ['', [Validators.required]],
|
||||||
|
suppliersamount: ['', [Validators.required]],
|
||||||
|
localsuppliersamount: ['', [Validators.required]],
|
||||||
|
});
|
||||||
|
this.singleSupplierForm = this.formBuilder.group({
|
||||||
|
supplierbusinessname: [''],
|
||||||
|
postcode: [''],
|
||||||
|
monthlyspend: [''],
|
||||||
|
});
|
||||||
|
this.employeeForm = this.formBuilder.group({
|
||||||
|
employeeno: [''],
|
||||||
|
employeeincometax: [''],
|
||||||
|
employeegrosswage: [''],
|
||||||
|
employeeni: [''],
|
||||||
|
employeepension: [''],
|
||||||
|
employeeotherbenefit: [''],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmitPayroll() {
|
||||||
|
console.log(this.payrollForm.value);
|
||||||
|
|
||||||
|
this.api
|
||||||
|
.login(this.payrollForm.value)
|
||||||
|
.subscribe(
|
||||||
|
result => {
|
||||||
|
console.log('data submitted!');
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmitSuppliers() {
|
||||||
|
console.log(this.suppliersForm.value);
|
||||||
|
|
||||||
|
this.api
|
||||||
|
.login(this.suppliersForm.value)
|
||||||
|
.subscribe(
|
||||||
|
result => {
|
||||||
|
console.log('data submitted!');
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmitSingleSupplier() {
|
||||||
|
console.log(this.singleSupplierForm.value);
|
||||||
|
|
||||||
|
this.api
|
||||||
|
.login(this.singleSupplierForm.value)
|
||||||
|
.subscribe(
|
||||||
|
result => {
|
||||||
|
console.log('data submitted!');
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onSubmitEmployee() {
|
||||||
|
console.log(this.employeeForm.value);
|
||||||
|
|
||||||
|
this.api
|
||||||
|
.login(this.employeeForm.value)
|
||||||
|
.subscribe(
|
||||||
|
result => {
|
||||||
|
console.log('data submitted!');
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log( error._body );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||||
|
|
||||||
// Pagesto be used in Production
|
// Pagesto be used in Production
|
||||||
import { LeaderboardsComponent } from './leaderboards.component';
|
import { LeaderboardsComponent } from './leaderboards.component';
|
||||||
|
|
@ -31,6 +32,8 @@ import { ComponentsRoutingModule } from './components-routing.module';
|
||||||
imports: [
|
imports: [
|
||||||
ComponentsRoutingModule,
|
ComponentsRoutingModule,
|
||||||
BsDropdownModule.forRoot(),
|
BsDropdownModule.forRoot(),
|
||||||
|
FormsModule,
|
||||||
|
ReactiveFormsModule,
|
||||||
ModalModule.forRoot(),
|
ModalModule.forRoot(),
|
||||||
TabsModule
|
TabsModule
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -7,24 +7,24 @@
|
||||||
<div class="card-block">
|
<div class="card-block">
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<p class="text-muted">Sign In to your account</p>
|
<p class="text-muted">Sign In to your account</p>
|
||||||
<form [formGroup]="signin" (ngSubmit)="onSubmit()">
|
<form [formGroup]="signin" (ngSubmit)="onSubmit()">
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<span class="input-group-addon">@</span>
|
<span class="input-group-addon">@</span>
|
||||||
<input type="text" class="form-control" formControlName="email" placeholder="Email">
|
<input type="text" class="form-control" formControlName="email" placeholder="Email">
|
||||||
</div>
|
</div>
|
||||||
<div class="input-group mb-4">
|
<div class="input-group mb-4">
|
||||||
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
<span class="input-group-addon"><i class="icon-lock"></i></span>
|
||||||
<input type="password" class="form-control" formControlName="password" placeholder="Password">
|
<input type="password" class="form-control" formControlName="password" placeholder="Password">
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<button type="submit" class="btn btn-primary px-4">Login</button>
|
<button type="submit" class="btn btn-primary px-4">Login</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-6 text-right">
|
<div class="col-6 text-right">
|
||||||
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
<button type="button" class="btn btn-link px-0">Forgot password?</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
|
<div class="card card-inverse card-primary py-5 d-md-down-none" style="width:44%">
|
||||||
|
|
|
||||||
|
|
@ -116,7 +116,6 @@ export class RegisterComponent {
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
console.log( error._body );
|
console.log( error._body );
|
||||||
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Reference in a new issue