made input two columns if wide enough
This commit is contained in:
parent
d11fbcb4e6
commit
bf965448c5
2 changed files with 34 additions and 9 deletions
|
@ -25,15 +25,33 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label class="col-md-3 form-control-label" for="text-input">Category</label>
|
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<div class="radio" *ngFor="let category of categoryIdList, let i=index">
|
<div class="row">
|
||||||
<label>
|
<div class="col-md-6">
|
||||||
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
|
<div>
|
||||||
{{ categoryNameList[i] }}
|
<label>
|
||||||
</label>
|
<input value="" type="radio" name="radios" [(ngModel)]="categoryId">
|
||||||
|
Uncategorised
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="radio" *ngFor="let category of leftCategoryIdList, let i=index">
|
||||||
|
<label>
|
||||||
|
<input [value]="category" type="radio" name="radios" [(ngModel)]="categoryId">
|
||||||
|
{{ categoryNameList[i] }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<div class="radio" *ngFor="let category2 of rightCategoryIdList, let i=index">
|
||||||
|
<label>
|
||||||
|
<input [value]="category2" type="radio" name="radios" [(ngModel)]="categoryId">
|
||||||
|
{{ categoryNameList[category2 - 1] }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span class="help-block"><strong>Optional:</strong> Choose the relevant Category for the purchase.</span>
|
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
|
|
|
@ -39,7 +39,8 @@ export class AddDataComponent implements OnInit {
|
||||||
transactionFormInvalid = true;
|
transactionFormInvalid = true;
|
||||||
myDate: any;
|
myDate: any;
|
||||||
minDate: any;
|
minDate: any;
|
||||||
categoryIdList: number[] = [];
|
leftCategoryIdList: number[] = [];
|
||||||
|
rightCategoryIdList: number[] = [];
|
||||||
categoryNameList: string[] = [];
|
categoryNameList: string[] = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
|
@ -85,8 +86,14 @@ export class AddDataComponent implements OnInit {
|
||||||
}
|
}
|
||||||
|
|
||||||
private setCategoryList(data: any) {
|
private setCategoryList(data: any) {
|
||||||
this.categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
|
let categoryIdList = Object.keys(data.ids).map(key => data.ids[key]);
|
||||||
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
|
this.categoryNameList = Object.keys(data.names).map(key => data.names[key]);
|
||||||
|
console.log(categoryIdList);
|
||||||
|
let halfLength = Math.floor(categoryIdList.length / 2);
|
||||||
|
this.leftCategoryIdList = categoryIdList.splice(0, halfLength);
|
||||||
|
console.log(this.leftCategoryIdList);
|
||||||
|
this.rightCategoryIdList = categoryIdList;
|
||||||
|
console.log(this.rightCategoryIdList);
|
||||||
}
|
}
|
||||||
|
|
||||||
getMinDate() {
|
getMinDate() {
|
||||||
|
|
Reference in a new issue