diff options
3 files changed, 20 insertions, 51 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index 6c2e5c6..6e70951 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -14,13 +14,20 @@ display: flex; margin: 10px; - * { - border: 3px solid #000; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - margin-right: 5px; - border-bottom: 0px; - } + +} + +.tab, .selected-tab { + background-color: lightgray; + border: 3px solid #000; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + margin-right: 5px; + border-bottom: 0px; +} + +.selected-tab { + background-color: white; } #create-form, #delete-form, #update-form { diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 41bb4a7..9b74b2a 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -5,8 +5,8 @@ <div *ngIf="isManager()" > <h2 > Admin View </h2> <div id="menu"> - <button (click)="selectForm('create')">Create new Need</button> - <button (click)="selectForm('update')">Update existing Need</button> + <button [ngClass]="selectedForm === 'create' ? 'selected-tab' : 'tab'" (click)="selectForm('create')">Create new Need</button> + <button [ngClass]="selectedForm === 'update' ? 'selected-tab' : 'tab'" (click)="selectForm('update')">Update existing Need</button> </div> <div id="create-form" *ngIf="selectedForm === 'create'"> <h1> Create a new need </h1> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index f8023c3..646c4ff 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts @@ -16,7 +16,7 @@ import { NeedListComponent } from '../need-list/need-list.component'; export class CupboardComponent implements OnInit { protected statusText = new BehaviorSubject("") - + selectedForm = "create" needs: any; @ViewChild("needList") needList?: NeedListComponent @@ -24,9 +24,6 @@ export class CupboardComponent implements OnInit { ngOnInit(): void { this.cupboardService.getNeeds().subscribe(n => this.needs = n); - this.close(); - this.openmenu(); - if (this.isManager()) { console.log("Admin view of Cupboard"); } else { @@ -41,44 +38,9 @@ export class CupboardComponent implements OnInit { type: '' }; selectedNeedId: number | null = null; - - private hideElement(element: any) { - if (element) { - element.style.visibility = 'hidden'; - element.style.position = 'absolute'; - } - } - - private showElement(element: any) { - if (element) { - element.style.visibility = 'visible'; - element.style.position = 'relative'; - } - } - openmenu() { - const menuElement = document.getElementById('menu'); - this.showElement(menuElement); - } - - opencreate() { - this.close(); - this.showElement(document.getElementById('create-form')); - } - - openupdate() { - this.close(); - this.showElement(document.getElementById('update-form')); - } - - back() { - this.close(); - this.openmenu(); - } - - close() { - this.hideElement(document.getElementById('create-form')); - this.hideElement(document.getElementById('destroy-form')); - this.hideElement(document.getElementById('update-form')); + + selectForm(name: string) { + this.selectedForm = name; } populateForm(need: any): void { |