- aggiornamento di tante cose...

- generazione Volantini
- pagina RIS

src/components/Dashboard/TemplateShowcase/TemplateShowcase.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="template-showcase">
+    <!-- Loading -->
+    <div v-if="isLoading" class="templates-list">
+      <div v-for="i in 4" :key="i" class="template-skeleton">
+        <q-skeleton type="rect" width="60px" height="80px" />
+        <div class="skeleton-content">
+          <q-skeleton type="text" width="80%" />
+          <q-skeleton type="text" width="50%" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Templates List -->
+    <div v-else class="templates-list">
+      <div
+        v-for="template in templates"
+        :key="template._id"
+        class="template-item"
+        @click="$emit('select', template)"
+      >
+        <div class="template-preview" :style="getPreviewStyle(template)" />
+        <div class="template-info">
+          <h4>{{ template.name }}</h4>
+          <p>{{ formatType(template.templateType) }}</p>
+          <div class="usage-count" v-if="template.metadata?.usageCount">
+            <q-icon name="trending_up" size="12px" />
+            {{ template.metadata.usageCount }} usi
+          </div>
+        </div>
+        <q-icon name="chevron_right" size="20px" class="item-arrow" />
+      </div>
+    </div>
+
+    <!-- Browse All -->
+    <q-btn
+      flat
+      color="primary"
+      label="Vedi tutti i template"
+      icon-right="arrow_forward"
+      class="browse-all-btn"
+      @click="$router.push('/templates')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  templates: any[];
+  isLoading: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', template: any): void;
+}>();
+
+const formatType = (type: string) => {
+  return type.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+};
+
+const getPreviewStyle = (template: any) => {
+  if (template.thumbnailUrl) {
+    return {
+      backgroundImage: `url(${template.thumbnailUrl})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center'
+    };
+  }
+
+  const palette = template.palette || {};
+  return {
+    background: `linear-gradient(135deg, ${palette.primary || '#667eea'}, ${palette.secondary || '#764ba2'})`
+  };
+};
+</script>
+
+<style lang="scss" scoped>
+.template-showcase {
+  background: white;
+  border-radius: 16px;
+  padding: 1rem;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+}
+
+.templates-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.template-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: #f5f5f5;
+
+    .item-arrow {
+      transform: translateX(4px);
+    }
+  }
+}
+
+.template-preview {
+  width: 50px;
+  height: 70px;
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.template-info {
+  flex: 1;
+  min-width: 0;
+
+  h4 {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  p {
+    margin: 0.15rem 0 0;
+    font-size: 0.75rem;
+    color: #888;
+  }
+
+  .usage-count {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    margin-top: 0.35rem;
+    font-size: 0.7rem;
+    color: #4caf50;
+    font-weight: 500;
+  }
+}
+
+.item-arrow {
+  color: #ccc;
+  transition: transform 0.2s ease;
+}
+
+.template-skeleton {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem;
+
+  .skeleton-content {
+    flex: 1;
+  }
+}
+
+.browse-all-btn {
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+// Dark mode
+.body--dark {
+  .template-showcase {
+    background: #1e1e1e;
+  }
+
+  .template-item:hover {
+    background: #2a2a2a;
+  }
+
+  .template-info h4 {
+    color: #fff;
+  }
+}
+</style>