diff options
Diffstat (limited to '')
3 files changed, 29 insertions, 78 deletions
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css index faff4d4..e45d929 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.css +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css @@ -4,7 +4,7 @@  }  #box { -    width: 1000px; +    width: 800px;      display: flex;      flex-direction: column;  } @@ -22,7 +22,7 @@     border-top-left-radius: 5px;     border-top-right-radius: 5px;     margin-right: 5px; -   border-bottom: 0px; +   border-bottom: 0;  }  .selected-tab { @@ -30,13 +30,25 @@  }  #create-form, #delete-form, #update-form { -   background-color: #d9d9d9; +   background-color: #3a3a3a;     padding: 10px 20px 20px 20px;     border: 2px solid #000;     border-radius: 5px;     visibility: visible; +    /*position: absolute;*/  } -#create-button { -   padding: 10px 20px; +#header { +    display: flex; +    gap: 20px; +    align-items: center; + +    h1 { +        display: inline; +        width: min-content; +    } + +    button { +        margin-top: 3px; +    }  } diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html index 6f7799e..37954bb 100644 --- a/ufund-ui/src/app/components/cupboard/cupboard.component.html +++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html @@ -1,13 +1,14 @@  <div id="box"> -    <h1> Cupboard </h1> +    <div id="header"> +        <h1> Cupboard </h1> +        <button *ngIf="isManager()" class="button2" (click)="this.selectForm('create')"><span class="icon">add</span>Create Need</button> +    </div>      <app-need-list (currentNeed) = populateForm($event) #needList></app-need-list>  </div> -<div *ngIf="isManager()" > -    <h2 > Admin View </h2> -    <div id="menu"> -        <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> +<ng-template [ngIf]="isManager()" > +<div> +    <app-need-edit *ngIf="selectedForm === 'update'" [selectedNeed]="selectedNeed" (refreshNeedList)="needList.refresh()"></app-need-edit> +    <div>      <div id="create-form" *ngIf="selectedForm === 'create'">          <h1> Create Need </h1>          <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)"> @@ -26,35 +27,12 @@              <label>Physical</label><br>              <input type="checkbox" name="urgent" value="false" ngModel>              <label>Urgent</label><br> -            <label>Description</label> -            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br> +            <label>Description</label><br> +            <textarea name="description"></textarea><br>              <input type="submit" value="Submit">          </form>      </div> -    <div id="update-form" *ngIf="selectedForm === 'update'"> -        <h1> Update Need </h1> -        <label>Needs:</label><br> -        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)"> -            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br> -            <input type="text" name="image" [(ngModel)]="selectedNeed.image"><br> -            <input type="text" name="location" [(ngModel)]="selectedNeed.location"><br> -            <label>Max Goal:</label><br> -            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br> -            <label>Type</label><br> -            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type"> -            <label>Monetary</label><br> -            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type"> -            <label>Physical</label><br> -            <input type="checkbox" name="urgent" [(ngModel)]="selectedNeed.urgent"> -            <label>Urgent</label> <br> -            <label>Description</label> <br> -            <textarea name="description" [(ngModel)]="selectedNeed.description"></textarea><br> -            <input type="submit" value="Submit"> - -        </form> -      </div> -    <hr> -  </div> +</ng-template> diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts index 662def4..2230cd3 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 {ToastsService, ToastType} from '../../services/toasts.service';  export class CupboardComponent implements OnInit { -    selectedForm = "create"; +    selectedForm?: string = undefined;      needs: any;      @ViewChild("needList") needList?: NeedListComponent @@ -82,45 +82,6 @@ export class CupboardComponent implements OnInit {          return type === ("MANAGER" as unknown as userType);      } -    update(form: any) { -        console.log(form); -        const need: Need = { -            name: form.name, -            image: form.image, -            location: form.location, -            id: this.selectedNeed.id, //system will control this -            maxGoal: form.maxGoal, -            type: GoalType[form.type as keyof typeof GoalType], -            urgent: form.urgent, -            filterAttributes: [], -            current: 0, -            description: form.description -        }; - -        this.cupboardService.updateNeed(need.id, need) -            .pipe(catchError((ex, _) => { -                if (ex.status == 500) { -                    this.toastService.sendToast(ToastType.ERROR, 'Fields cannot be blank'); -                } else if (ex.status == 400) { -                    this.toastService.sendToast(ToastType.ERROR, ex.error); -                } else { -                    this.toastService.sendToast(ToastType.ERROR, "Error on creating need"); -                } -                return of() -            })) -            .subscribe( -                (result) => { -                    if (result) { -                        console.log("need updated successfully"); -                        this.needList?.refresh() -                    } else { -                        console.log("need update failed"); -                    } -                } - -            ); -    } -      submit(form: any) {          const need: Need = {              name: form.name,  | 
