Toast/shows-admin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Components/create-edit-modal: add controls for adding and removing images

Browse source
This commit is contained in:
Toast 2025-02-06 18:42:26 +01:00
parent aec0a34f71
commit b2cfda8c32
2 changed files with 37 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/create-edit-modal/create-edit-modal.component.html
View file

@ -30,6 +30,28 @@
<input formControlName="description" type="text" class="form-control" placeholder=""/>
<label class="form-label">Description</label>
</div>
<label class="form-label">Images</label>
<div class="card" formArrayName="images">
<ul class="list-group list-group-flush">
@for (imageControl of images.controls; track imageControl) {
<li class="list-group-item">
<div class="input-group">
<div class="form-floating">
<input formControlName="{{$index}}" type="text" class="form-control" placeholder="">
<label class="form-label">Image {{ $index + 1 }} URL</label>
</div>
<button type="button" class="btn btn-outline-danger" (click)="removeImageControl($index)"><i
class="bi bi-x-lg"></i></button>
</div>
</li>
}
<li class="list-group-item">
<button type="button" class="btn btn-outline-primary" (click)="addImageControl()">
<i class="bi bi-plus-lg"></i> Add new image
</button>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" [disabled]="newShowForm.invalid">Submit</button>

17
src/components/create-edit-modal/create-edit-modal.component.ts
View file

@ -1,6 +1,6 @@
import {Component, inject} from '@angular/core';
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {FormArray, FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {ShowsApiService} from '../../services/shows/shows-api.service';
import {ShowsApiCreation} from '../../interfaces/shows-api-creation';
import {ToastService} from '../../services/toast/toast.service';
@ -41,14 +41,27 @@ export class CreateEditModalComponent {
seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]),
date: new FormControl(formattedDate, Validators.required),
episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]),
description: new FormControl(this.show?.description, Validators.required)
description: new FormControl(this.show?.description, Validators.required),
images: new FormArray([])
})
}
get images(): FormArray {
return this.newShowForm.get("images") as FormArray
}
protected dismiss() {
this.activeModal.dismiss()
}
protected addImageControl() {
this.images.push(new FormControl(""))
}
protected removeImageControl(index: number) {
this.images.removeAt(index)
}
protected formSubmitted(form: FormGroup) {
let show: Show = {
title: form.get("title")?.value,