select component updated

This commit is contained in:
Jonas Winkler 2020-10-28 20:21:00 +01:00
parent 54c47de38a
commit 0221fc0402
3 changed files with 34 additions and 40 deletions

View File

@ -1,7 +1,18 @@
<div class="form-group">
<label [for]="inputId">{{title}}</label>
<select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
<option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
</select>
<div [class.input-group]="showPlusButton()">
<select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()"
[disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor">
<option *ngIf="allowNull" [ngValue]="null" class="form-control">---</option>
<option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option>
</select>
<div *ngIf="showPlusButton()" class="input-group-append">
<button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#plus" />
</svg>
</button>
</div>
</div>
<small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
</div>

View File

@ -1,4 +1,4 @@
import { Component, forwardRef, Input, OnInit } from '@angular/core';
import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { v4 as uuidv4 } from 'uuid';
import { AbstractInputComponent } from '../abstract-input';
@ -28,4 +28,14 @@ export class SelectComponent extends AbstractInputComponent<number> {
@Input()
backgroundColor: any
@Input()
allowNull: boolean = false
@Output()
createNew = new EventEmitter()
showPlusButton(): boolean {
return this.createNew.observers.length > 0
}
}

View File

@ -23,15 +23,15 @@
<div class="row">
<div class="col-xl">
<form [formGroup]='documentForm' (ngSubmit)="save()">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" formControlName='title'>
</div>
<app-input-text title="Title" formControlName="title"></app-input-text>
<div class="form-group">
<label for="archive_serial_number">Archive Serial Number</label>
<input type="number" class="form-control" id="archive_serial_number"
formControlName='archive_serial_number'>
</div>
<div class="form-row">
<div class="form-group col">
<label for="created_date">Date created</label>
@ -42,43 +42,16 @@
<input type="time" class="form-control" id="created_time" formControlName='created_time'>
</div>
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea class="form-control" id="content" rows="5" formControlName='content'></textarea>
</div>
<div class="form-group">
<label for="correspondent">Correspondent</label>
<div class="input-group">
<select class="form-control" id="correspondent" formControlName="correspondent_id">
<option [ngValue]="null">---</option>
<option *ngFor='let c of correspondents' [ngValue]="c.id">{{c.name}}</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" (click)="createCorrespondent()">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#plus" />
</svg>
</button>
</div>
</div>
</div>
<div class="form-group">
<label for="document_type">Document Type</label>
<div class="input-group">
<select class="form-control" id="document_type" formControlName="document_type_id">
<option [ngValue]="null">---</option>
<option *ngFor="let dt of documentTypes" [ngValue]="dt.id">{{dt.name}}</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" (click)="createDocumentType()">
<svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#plus" />
</svg>
</button>
</div>
</div>
</div>
<app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent_id" allowNull="true" (createNew)="createCorrespondent()"></app-input-select>
<app-input-select [items]="documentTypes" title="Document type" formControlName="document_type_id" allowNull="true" (createNew)="createDocumentType()"></app-input-select>
<div class="form-group">
<label for="exampleFormControlTextarea1">Tags</label>