Component aggiunta-evento, personalizzazione

Component aggiunta-evento, personalizzazione

Il Component “vuoto” è già stato creato, funziona ed è anche indirizzabile. Bisogna ora personalizzarlo per fargli fare quello che ci serve, ovvero l’introduzione dei dati utili a definire un nuova nuova manifestazione di ballo: titolo dell’evento, nazione e città dove si svolge, quando inizia e finisce, quali stili si ballano e infine l’url del sito relativo.

In html gli elementi chiave per l’input dei dati sono:

  • il tag <form> che racchiude i campi di input
  • il tag <input> che identifica ciascuno degli elementi di input
  • il <button> con type=submit che indica che i dati del form dovranno essere inoltrati alla funzione specificata nel tag form

 

Con Angular gestiamo facilmente lo scambio di informazioni bidirezionale dagli elementi html alle variabili di typescript attraverso la classe formGroup.

MODIFICA DEL FILE  aggiunta-evento-component.ts

Definiamo la variabile eventForm, di tipo FormGroup,  che contiene i dati associati ai campi testo del form.

Definiamo anche il metodo onFormSubmit che chiede al servizio externalDataService di preoccuparsi di memorizzare i nuovi dati.

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { ExternalDataService } from "../../services/external-data.service";
import { FormBuilderFormGroupNgForm } from "@angular/forms";

@Component({
  selector: "aggiunta-evento-add",
  templateUrl: "./aggiunta-evento.component.html",
  styleUrls: ["./aggiunta-evento.component.css"]
})
export class AggiuntaEventoComponent implements OnInit {
  eventFormFormGroup;

  constructor(
    private router: Router,
    private externalDataServiceExternalDataService,
    private formBuilderFormBuilder
  ) {}

  ngOnInit() {
    this.eventForm = this.formBuilder.group({
      name: [""],
      site2: [""],
      country: [""],
      town: [""],
      startdate: [""],
      stopdate: [""],
      styles: ""
    });
  }

  onFormSubmit(formNgForm) {
    this.externalDataService.addEvento(form);
    this.router.navigate(["/"]);
  }
  
}

MODIFICA DEL FILE app.module.ts

Per poter utilizzare i moduli FormBuilder, FormGroup e NgForm è necessario importarli in app.module.ts. Ecco come modificare il file:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import {
  MatInputModule,
  MatPaginatorModule,
  MatProgressSpinnerModule,
  MatSortModule,
  MatTableModule,
  MatIconModule,
  MatButtonModule,
  MatCardModule,
  MatFormFieldModule
} from "@angular/material";
import { MatSelectModule } from "@angular/material/select";
import { MatDialogModule } from "@angular/material";

import { ListaEventiComponent } from "./components/lista-eventi/lista-eventi.component";
import { DettaglioEventoComponent } from "./components/dettaglio-evento/dettaglio-evento.component";
import { DialogCancellazioneEvento } from "./components/dettaglio-evento/dialog-cancellazione-evento";
import { AggiuntaEventoComponent } from "./components/aggiunta-evento/aggiunta-evento.component";

@NgModule({
  declarations: [
    AppComponent,
    ListaEventiComponent,
    DettaglioEventoComponent,
    DialogCancellazioneEvento,
    AggiuntaEventoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatTableModule,
    MatPaginatorModule,
    MatSelectModule,
    MatSortModule,
    MatProgressSpinnerModule,
    MatIconModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatDialogModule
  ],
  providers: [],
  entryComponents: [DialogCancellazioneEvento],
  bootstrap: [AppComponent]
})
export class AppModule {}

MODIFICA DEL FILE aggiunta-evento.component.html

<div class="inner-single">
  <div class="container mat-elevation-z8">
    <span>
      <div class="button-row">
        <a mat-flat-button color="primary" [routerLink]="['/']"
          ><mat-icon>list</mat-icon></a
        >
      </div>
    </span>
    <mat-card class="example-card">
      <form [formGroup]="eventForm" (ngSubmit)="onFormSubmit(eventForm.value)">
        <mat-form-field class="example-full-width">
          <input
            matInput
            placeholder="Nome dell'Evento"
            formControlName="name"
          />
        </mat-form-field>
 
        <mat-form-field class="example-full-width">
          <input
            matInput
            placeholder="Sito Web"
            formControlName="site2"
            id="site2"
            type="text"
          />
        </mat-form-field>
        <br /><br />
 
        <mat-form-field>
          <input
            matInput
            placeholder="Nazione"
            formControlName="country"
            class="example-full-width"
          />
        </mat-form-field>
 
        <mat-form-field>
          <input matInput placeholder="Città" formControlName="town" />
        </mat-form-field>
 
        <mat-form-field>
          <input matInput placeholder="Balli" formControlName="styles" />
        </mat-form-field>
        <br /><br />
 
        <mat-form-field>
          <input
            matInput
            placeholder="Data di Inizio"
            formControlName="startdate"
          />
        </mat-form-field>
 
        <mat-form-field class="example-full-width">
          <input
            matInput
            placeholder="Data di Fine"
            formControlName="stopdate"
          />
        </mat-form-field>
        <br /><br /><br />
 
        <div class="button-row">
          <button type="submit" mat-flat-button color="primary">
            <mat-icon>save</mat-icon>
          </button>
        </div>
      </form>
    </mat-card>
  </div>
</div>

 

MODIFICA DEL FILE aggiunta-evento-component.css

.mat-form-field {
  width: 300px;
  margin: 5px;
}

MODIFICA DEL FILE external-data-service.ts

L’implementazione delle funzionalità del servizio non è efficiente, ma è chiara nella sua semplicità. Optiamo per questa scelta vistane la natura provvisoria. A regime il servizio utilizzerà dati esterni recuperati on-line.

import { Injectable } from "@angular/core";
import { Router } from "@angular/router";
 
var dati_Lista_Eventi = [];
var last_event_id = 226;
 
@Injectable({
  providedIn: "root"
})
export class ExternalDataService {
  constructor(private router: Router) {
    dati_Lista_Eventi = [
      {
        id: 13,
        name: "Swing Fastival",
        country: " United Kingdom",
        town: " Torquay, Devon ",
        site2: "http://www.swingfastival.co.uk",
        styles: " Balboa, Shag",
        startdate: "2019-11-08",
        stopdate: "2019-11-10"
      },
      {
        id: 14,
        name: "Boulevard Blues",
        country: " Belgium",
        town: " Hasselt",
        site2: "www.boulevardblues.be ",
        styles: " Blues",
        startdate: "2019-11-08",
        stopdate: "2019-11-11"
      },
      {
        id: 124,
        name: "Montpellier Balboa Rendez-Vous",
        country: " France",
        town: " Montpellier",
        site2: "http://www.swingcatcie.com/montpellier-balboa-rendezvous/",
        styles: " Balboa, Shag",
        startdate: "2020-02-14",
        stopdate: "2020-02-16"
      },
      {
        id: 125,
        name: "Holy lollies",
        country: "France",
        town: " Strasbourg",
        site2: "http://www.holylollies.fr",
        styles: " Balboa",
        startdate: "2020-02-14",
        stopdate: "2020-02-16"
      },
      {
        id: 208,
        name: "Black Forest Hop",
        country: " Germany",
        town: " Freiburg",
        site2: "http://www.blackforesthop.com",
        styles: " Lindy Hop",
        startdate: "2020-06-05",
        stopdate: "2020-06-07"
      },
      {
        id: 223,
        name: "JazzOut SwingFest",
        country: " Netherlands",
        town: " Nijmegen",
        site2: "http://www.jazzoutswingfest.com/",
        styles: " Jazz, Lindy Hop",
        startdate: "2020-08-28",
        stopdate: "2020-08-30"
      },
      {
        id: 224,
        name: "Shirt Tail Stompers 10 Year Aniversary Weekend",
        country: " Lithuania",
        town: " Vilnius",
        site2: "https://www.facebook.com/events/2981610321881346/",
        styles: " Balboa, Charleston, Jazz, Lindy Hop, Shag",
        startdate: "2020-08-28",
        stopdate: "2020-08-30"
      },
      {
        id: 225,
        name: "Swinging and Sail",
        country: " Greece",
        town: " Athens - Ithaca",
        site2: "http://www.swingnsail.com",
        styles: " Lindy Hop",
        startdate: "2020-08-28",
        stopdate: "2020-09-05"
      },
      {
        id: 226,
        name: "Madrid in Pulse",
        country: " Spain",
        town: " Madrid",
        site2: "http://www.madridinpulse.es/?lang=en",
        styles: " Balboa",
        startdate: "2020-09-04",
        stopdate: "2020-09-06"
      }
 
    ];
  }
 
  getEventi() {
    return dati_Lista_Eventi;
  }
 
  getEvento(id: number) {
    for (var i in dati_Lista_Eventi) {
      if (dati_Lista_Eventi[i].id == id) {
        return dati_Lista_Eventi[+i];
      }
    }
    return null;
  }
 
  deleteEvento(id: number) {
    var pos: number = -1;
    for (var i in dati_Lista_Eventi) {
      if (dati_Lista_Eventi[i].id === id) {
        pos = +i;
      }
    }
    if (pos !== -1) {
      dati_Lista_Eventi.splice(pos, 1);
    }
  }
 
  addEvento(form) {
    /*
    console.log("name = " + evento.name);
    console.log("site = " + evento.site2);
    console.log("country = " + evento.country);
    console.log("town = " + evento.town);
    console.log("startdate = " + evento.startdate);
    console.log("stopdate = " + evento.stopdate);
    */

    last_event_id += 1;
    dati_Lista_Eventi.push({
      id: last_event_id,
      name: form.name,
      country: form.country,
      town: form.town,
      site2: form.site2,
      styles: form.styles,
      startdate: form.startdate,
      stopdate: form.stopdate
    });
  }
 
}

 

MODIFICA DEL FILE lista-eventi.component.html

Vogliamo linkare il nostro nuovo Component dalla Lista-Eventi cliccando su un opportuno bottone “Add” posto immediatamente sopra la lista stessa.

<div class="inner-list">
  <div>
    <span>
      <a mat-flat-button color="warn" [routerLink]="['/aggiunta-evento']"
        ><mat-icon>add</mat-icon></a
      >
    </span>
  </div>

  <table
    mat-table
    [dataSource]="datiListaEventi"
    class="event-table"
    matSort
    matSortActive="startdate"
    matSortDisableClear
    matSortDirection="asc"
  >
    <ng-container matColumnDef="evento">
      <th mat-header-cell *matHeaderCellDef>Evento</th>
      <td mat-cell *matCellDef="let row">{{ row.name }}</td>
    </ng-container>

    <ng-container matColumnDef="luogo">
      <th mat-header-cell *matHeaderCellDef>Luogo</th>
      <td mat-cell *matCellDef="let row">{{ row.country }} / {{ row.town }}</td>
    </ng-container>

    <ng-container matColumnDef="balli">
      <th mat-header-cell *matHeaderCellDef>Balli</th>
      <td mat-cell *matCellDef="let row">{{ row.styles }}</td>
    </ng-container>

    <ng-container matColumnDef="inizio">
      <th mat-header-cell *matHeaderCellDef>Inizio</th>
      <td mat-cell *matCellDef="let row">{{ row.startdate }}</td>
    </ng-container>

    <ng-container matColumnDef="fine">
      <th mat-header-cell *matHeaderCellDef>Fine</th>
      <td mat-cell *matCellDef="let row">{{ row.stopdate }}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
      mat-row
      *matRowDef="let row; columns: displayedColumns"
      [routerLink]="['/dettaglio-evento/', row.id]"
    ></tr>
  </table>
</div>

Dopo le modifiche illustrate in questo articolo, dalla pagina Lista Eventi, premendo sul bottone “Add” sarà possibile aggiungere un nuovo appuntamento di ballo alla nostra lista (in alternativa è possibile usare direttamente l’url http://localhost:4200/aggiunta-evento).

Per farlo abbiamo creato un nuovo Component: aggiunta-evento. Abbiamo imparato ad usare il form e i campi di input per farse inserire i dati all’utente. Abbiamo imparato come usare gli strumenti Angular  come formGroup per la più agevole gestione dei dati inseriti dal form.

No Comments

Sorry, the comment form is closed at this time.