- Parte 3 : Viaggi

- Chat

src/modules/viaggi/components/feedback/FeedbackSummary.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="feedback-summary">
+    <!-- Rating compatto -->
+    <div class="feedback-summary__rating">
+      <q-icon name="star" color="amber" size="20px" />
+      <span class="feedback-summary__value">{{ rating.toFixed(1) }}</span>
+      <span class="feedback-summary__count">({{ totalCount }})</span>
+    </div>
+
+    <!-- Barra progresso -->
+    <div v-if="showProgress" class="feedback-summary__progress">
+      <div
+        class="feedback-summary__progress-fill"
+        :style="{ width: `${(rating / 5) * 100}%` }"
+      ></div>
+    </div>
+
+    <!-- Label -->
+    <span v-if="showLabel" class="feedback-summary__label">
+      {{ ratingLabel }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'FeedbackSummary',
+
+  props: {
+    rating: {
+      type: Number,
+      default: 0
+    },
+    totalCount: {
+      type: Number,
+      default: 0
+    },
+    showProgress: {
+      type: Boolean,
+      default: false
+    },
+    showLabel: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  setup(props) {
+    const ratingLabel = computed(() => {
+      if (props.rating >= 4.5) return 'Eccellente';
+      if (props.rating >= 4) return 'Ottimo';
+      if (props.rating >= 3.5) return 'Molto buono';
+      if (props.rating >= 3) return 'Buono';
+      if (props.rating >= 2) return 'Sufficiente';
+      if (props.rating > 0) return 'Da migliorare';
+      return 'Non valutato';
+    });
+
+    return { ratingLabel };
+  }
+});
+</script>
+
+<style lang="scss">
+.feedback-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &__rating {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  &__value {
+    font-weight: 700;
+    font-size: 16px;
+  }
+
+  &__count {
+    font-size: 13px;
+    color: var(--q-grey-6);
+  }
+
+  &__progress {
+    flex: 1;
+    height: 6px;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    min-width: 60px;
+  }
+
+  &__progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #ffc107, #ff9800);
+    border-radius: 3px;
+  }
+
+  &__label {
+    font-size: 13px;
+    color: var(--q-grey-7);
+  }
+}
+
+.body--dark {
+  .feedback-summary {
+    &__progress {
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+</style>