myprojplanet_vite/src/modules/viaggi/components/feedback/FeedbackForm.vue

<template>
  <div class="feedback-form">
    <!-- Header -->
    <div class="feedback-form__header">
      <div class="feedback-form__user">
        <q-avatar size="56px" class="feedback-form__avatar">
          <img v-if="userImg" :src="userImg" />
          <span v-else>{{ userInitials }}</span>
        </q-avatar>
        <div class="feedback-form__user-info">
          <span class="feedback-form__user-name">{{ userName }}</span>
          <span class="feedback-form__role">
            {{ role === 'driver' ? '🚗 Conducente' : '👤 Passeggero' }}
          </span>
        </div>
      </div>

      <div v-if="rideInfo" class="feedback-form__ride">
        <q-icon name="directions_car" size="16px" />
        <span>{{ rideInfo }}</span>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <!-- Rating principale -->
    <div class="feedback-form__main-rating">
      <div class="feedback-form__label">Come è andato il viaggio?</div>
      <div class="feedback-form__stars">
        <button
          v-for="star in 5"
          :key="star"
          type="button"
          :class="[
            'feedback-form__star',
            { 'feedback-form__star--active': star <= localFeedback.rating },
            { 'feedback-form__star--hover': star <= hoverRating }
          ]"
          @click="setRating(star)"
          @mouseenter="hoverRating = star"
          @mouseleave="hoverRating = 0"
        >
          <q-icon
            :name="star <= (hoverRating || localFeedback.rating) ? 'star' : 'star_outline'"
            size="48px"
          />
        </button>
      </div>
      <div class="feedback-form__rating-label">
        {{ ratingLabel }}
      </div>
    </div>

    <!-- Categorie dettagliate -->
    <transition name="expand">
      <div v-if="localFeedback.rating > 0" class="feedback-form__categories">
        <div class="feedback-form__label">Valuta in dettaglio (opzionale)</div>

        <div class="feedback-form__category" v-for="category in visibleCategories" :key="category.key">
          <div class="feedback-form__category-header">
            <span class="feedback-form__category-icon">{{ category.icon }}</span>
            <span class="feedback-form__category-label">{{ category.label }}</span>
          </div>
          <div class="feedback-form__category-stars">
            <q-rating
              v-model="localFeedback.categories[category.key]"
              size="24px"
              color="amber"
              icon="star_outline"
              icon-selected="star"
              icon-half="star_half"
            />
          </div>
        </div>
      </div>
    </transition>

    <!-- Tags -->
    <transition name="expand">
      <div v-if="localFeedback.rating > 0" class="feedback-form__tags">
        <div class="feedback-form__label">
          {{ localFeedback.rating >= 4 ? 'Cosa ti è piaciuto?' : 'Cosa si può migliorare?' }}
        </div>

        <div class="feedback-form__tags-grid">
          <q-chip
            v-for="tag in relevantTags"
            :key="tag.value"
            :selected="localFeedback.tags.includes(tag.value)"
            :color="localFeedback.tags.includes(tag.value) ? (tag.isPositive ? 'positive' : 'negative') : undefined"
            :text-color="localFeedback.tags.includes(tag.value) ? 'white' : undefined"
            :outline="!localFeedback.tags.includes(tag.value)"
            clickable
            @click="toggleTag(tag.value)"
          >
            {{ tag.icon }} {{ tag.label }}
          </q-chip>
        </div>
      </div>
    </transition>

    <!-- Commento -->
    <transition name="expand">
      <div v-if="localFeedback.rating > 0" class="feedback-form__comment">
        <div class="feedback-form__label">Racconta la tua esperienza (opzionale)</div>
        <q-input
          v-model="localFeedback.comment"
          type="textarea"
          :placeholder="commentPlaceholder"
          outlined
          autogrow
          :maxlength="1000"
          counter
        />
      </div>
    </transition>

    <!-- Pro e Contro -->
    <transition name="expand">
      <div v-if="showProsCons && localFeedback.rating > 0" class="feedback-form__pros-cons">
        <div class="row q-gutter-md">
          <!-- Pro -->
          <div class="col-12 col-sm-6">
            <div class="feedback-form__label text-positive">
              <q-icon name="thumb_up" /> Punti di forza
            </div>
            <q-input
              v-model="newPro"
              placeholder="Aggiungi un punto di forza..."
              outlined
              dense
              @keyup.enter="addPro"
            >
              <template v-slot:append>
                <q-btn flat round dense icon="add" color="positive" @click="addPro" />
              </template>
            </q-input>
            <div class="feedback-form__list">
              <q-chip
                v-for="(pro, index) in localFeedback.pros"
                :key="index"
                removable
                color="positive"
                text-color="white"
                icon="add"
                @remove="removePro(index)"
              >
                {{ pro }}
              </q-chip>
            </div>
          </div>

          <!-- Contro -->
          <div class="col-12 col-sm-6">
            <div class="feedback-form__label text-negative">
              <q-icon name="thumb_down" /> Aree di miglioramento
            </div>
            <q-input
              v-model="newCon"
              placeholder="Aggiungi un'area di miglioramento..."
              outlined
              dense
              @keyup.enter="addCon"
            >
              <template v-slot:append>
                <q-btn flat round dense icon="add" color="negative" @click="addCon" />
              </template>
            </q-input>
            <div class="feedback-form__list">
              <q-chip
                v-for="(con, index) in localFeedback.cons"
                :key="index"
                removable
                color="negative"
                text-color="white"
                icon="remove"
                @remove="removeCon(index)"
              >
                {{ con }}
              </q-chip>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- Visibilità -->
    <transition name="expand">
      <div v-if="localFeedback.rating > 0" class="feedback-form__visibility">
        <q-toggle
          v-model="localFeedback.isPublic"
          label="Rendi visibile pubblicamente questa recensione"
          color="primary"
        />
        <p class="text-caption text-grey">
          Le recensioni pubbliche aiutano gli altri utenti a scegliere con chi viaggiare
        </p>
      </div>
    </transition>

    <!-- Actions -->
    <div class="feedback-form__actions">
      <q-btn
        v-if="showCancel"
        flat
        label="Annulla"
        color="grey"
        @click="$emit('cancel')"
      />
      <q-btn
        :label="submitLabel"
        color="primary"
        unelevated
        :disable="!canSubmit"
        :loading="submitting"
        @click="submit"
      />
    </div>
  </div>
</template>

<script lang="ts" src="./FeedbackForm.ts" />
<style lang="scss" src="./FeedbackForm.scss" />