117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
Vue
<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>
|