Switch Case -logiikka

[Kinnari98]

Switch Case -logiikka on se, joka pyörittää palauteratkaisua ja toimii sen pohjalta. Kalle suunnittelee, tekee ja implementoi.

[juhamikael]

Angularilla luotu ensimmäinen testi versio:

feedback.component.ts

import { Component } from '@angular/core';

interface AdditionalQuestions {
  [key: number]: string[];
}

@Component({
  selector: 'app-feedback',
  templateUrl: './feedback.component.html',
  styleUrls: ['./feedback.component.css']
})

export class FeedbackComponent {
  public showAdditionalQuestions = false;
  public rating = 0;
  public showInput = false;
  public feedbackMessage = "";
  public feedback = {
    "rating": 0,
    "feedbackType": "",
    "feedback": this.feedbackMessage
  };

  public ratings = [1, 2, 3, 4, 5];
  public additionalQuestions: AdditionalQuestions = {
    1: ['Tilaus oli vaikea tehdä', 'Tuotteet oli katogorisoitu huonosti', 'Toimitus oli myöhässä', "Muuta?"],
    2: ['Tilaus oli vaikea tehdä', 'Tuotteet oli katogorisoitu huonosti', "Muuta?"],
    3: ['Tilaus oli vaikea tehdä', 'Tuotteet oli katogorisoitu huonosti', "Muuta?"],
  };

  public thankYouMessage = "Kiitos palautteestasi!";
  public showThankYouMessage = false;
  public isFormFilled = false;

  resetForm(): void {
    this.showAdditionalQuestions = false;
    this.rating = 0;
    this.showInput = false;
    this.feedbackMessage = "";
    this.feedback = {
      "rating": 0,
      "feedbackType": "",
      "feedback": ""
    };
  }

  handleFeedback(feedbackType: string): void {
    this.feedback = {
      "rating": this.rating,
      "feedbackType": feedbackType,
      "feedback": ""
    };
    if (feedbackType === 'Muuta?') {
      this.showInput = true;
    } else {
      this.showInput = false;
    }
  }

  isFormValid(): boolean {
    if (this.showInput && (this.feedbackMessage.trim() === '' || this.feedbackMessage.trim().length < 10)) {
      return false
    }
    return this.feedback.rating !== 0 && this.feedback.feedbackType !== "";
  }

  handleClick(rating: number): void {

    this.showAdditionalQuestions = true;
    this.rating = rating;
    this.showInput = false;
    this.feedbackMessage = "";
    this.feedback = {
      "rating": this.rating,
      "feedbackType": "",
      "feedback": ""
    };
  }

  handleSubmit(): void {
    if (this.feedbackMessage.trim() !== '') {
      this.feedback.feedback = this.feedbackMessage;
    }

    // Send feedback to backend and reset the form
    console.log('Submitting feedback:', this.feedback);

    this.resetForm();
    this.showThankYouMessage = true;
    setTimeout(() => {
      // Show thank you message for 20 seconds
      this.showThankYouMessage = false;
    }, 20000);
  }
}

feedback.component.html

<div class="flex justify-center">
  <div>
    <h1 class="text-lg font-black text-center">Kuinka onnistuimme?</h1>
    <div class="flex justify-center">
      <div class="flex flex-row gap-x-3 font-bold py-4">
        <button
          *ngFor="let r of ratings"
          [ngClass]="{
            'bg-[#ec6608]/60 rounded-full transition-all text-xl': rating === r
          }"
          class="px-5 py-3 hover:bg-gray-200 hover:rounded-full transition-all"
          (click)="handleClick(r)"
        >
          {{ r }}
        </button>
      </div>
    </div>

    <ng-container *ngIf="showAdditionalQuestions; else noQuestions">
      <div
        class="flex flex-col"
        *ngFor="let question of additionalQuestions[rating]"
      >
        <button
          (click)="handleFeedback(question)"
          [ngClass]="{
            'bg-[#ec6608]/60 font-bold': feedback.feedbackType === question
          }"
          class="p-4 hover:bg-gray-200 rounded-xl transition-all"
        >
          {{ question }}
        </button>

        <div class="border border-b my-2"></div>
      </div>
    </ng-container>

    <ng-template #noQuestions>
      <div *ngIf="rating === 5">Kiitos palautteestasi!</div>
    </ng-template>

    <div *ngIf="showInput">
      <textarea
        [ngClass]="[
          'w-full',
          'p-4',
          'border',
          'border-gray-400',
          'rounded-lg',
          'py-4',
          'mt-2'
        ]"
        placeholder="Kirjoita palautteesi tähän"
        [(ngModel)]="feedbackMessage"
      ></textarea>
    </div>
    <div class="flex justify-center">
      <button
        class="pt-6 p-4 w-full font-bold"
        [disabled]="!isFormValid()"
        (click)="handleSubmit()"
        [ngClass]="{
          'bg-green-200 hover:bg-green-200/80': isFormValid(),
          'bg-gray-200 text-black/40': !isFormValid()
        }"
      >
        Lähetä
      </button>
    </div>

    <p class="font-bold text-center" *ngIf="showThankYouMessage">
      {{ thankYouMessage }}
    </p>
  </div>
</div>

[Kinnari98]

Käytännössä:

= 4: Ei tule jatkotoimenpiteitä < 4 >= 3: Jokin ei ole mennyt toivotusti -> Sama kuin alemmat vai jokin muu? 3: Asiat ovat menneet huonosti -> Kysytään käyttäjältä, missä vika (tarjotaanko vaihtoehtoja vai annetaanko vapaa sana?)