pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge doing topping and re-save file

Browse source
This commit is contained in:
pakintada@gmail.com 2024-02-05 12:22:24 +07:00
parent aaa60216b2
commit 5889499a7e
5 changed files with 119 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

87
client/src/app/features/toppings/toppings.component.html
View file

@ -1,6 +1,15 @@
<main class="relative overflow-auto max-h-[80%] h-[88vh]">
<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
<div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
<button class="btn" (click)="showToppingBuilder = true">
<p>New Topping</p>
</button>
<button class="btn">
<p>Save Changes</p>
</button>
</div>
<table class="table w-full" [formGroup]="toppingGroupForm">
<thead class="text-xs sticky top-0">
<thead class="text-xs sticky top-12">
<tr class="bg-primary">
<th>Is Use</th>
<th>ID</th>
@ -12,28 +21,72 @@
</tr>
</thead>
<tbody formArrayName="toppingGroup" *ngFor="let tpg of toppingGroup.controls; let i = index">
<tr formGroupName="{{i}}">
<td><input class="toggle" type="checkbox" formControlName="inUse"></td>
<td><input class="input input-sm" formControlName="groupID"></td>
<td><input class="input input-sm" formControlName="name"></td>
<td><input class="input input-sm" formControlName="otherName"></td>
<td><input class="input input-sm" formControlName="Desc"></td>
<tbody
formArrayName="toppingGroup"
*ngFor="let tpg of toppingGroup.controls; let i = index"
>
<tr formGroupName="{{ i }}">
<td>
<input class="toggle" type="checkbox" formControlName="inUse" />
</td>
<td>
<input
class="input input-sm input-bordered"
formControlName="groupID"
/>
</td>
<td>
<input class="input input-sm input-bordered" formControlName="name" />
</td>
<td>
<input
class="input input-sm input-bordered"
formControlName="otherName"
/>
</td>
<td>
<input class="input input-sm input-bordered" formControlName="Desc" />
</td>
<!-- <td>{{tpg.idDefault}}</td> -->
<td class=" rounded-md">
<div *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))">
<td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
<div
*ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))"
>
<button
class="button border-solid border-2 border-black rounded-md p-2 hover:bg-yellow-300"
[ngClass]="{ 'button bg-red-200': m == getAttrFromForm(i, 'idDefault') }"
class="button border-solid border-2 border-black rounded-md p-2"
[ngClass]="{
'button bg-red-200': m == getAttrFromForm(i, 'idDefault')
}"
(click)="setDefaultOfToppingGroup(i, m)"
>
{{ returnThisOrElse(getMemberData(getAttrFromForm(i, 'groupID'), m).name, "") }} ({{
m
}})
{{
returnThisOrElse(
getMemberData(getAttrFromForm(i, "groupID"), m).name,
""
)
}}
({{ m }})
</button>
<!-- <button>Edit</button> -->
</div>
</td>
</tr>
</tbody>
</table>
</main>
<!-- modal -->
<input
type="checkbox"
id="topping_builder_modal"
class="modal-toggle"
#checkbox="ngModel"
[(ngModel)]="showToppingBuilder"
/>
<label for="topping_builder_modal" class="modal">
<div class="modal-box max-w-5xl">
<h3 class="text-xl font-bold">Topping Builder</h3>
<!-- body -->
</div>
</label>