Ver Fonte

criada a exibicao de icones das estatisticas da landingpage de forma dinamica conforme o cadastro nas configs da empresa no sistema web serprati_digital

Gustavo Zanatta há 1 mês atrás
pai
commit
d9fe4fee22

+ 1 - 0
src/i18n/locales/en.json

@@ -489,6 +489,7 @@
       "title": "Stat {n}",
       "value": "Value (Stat {n})",
       "label": "Label (Stat {n})",
+      "icon": "Icon",
       "preview": "How it looks on the landing page"
     },
     "contact": {

+ 1 - 0
src/i18n/locales/es.json

@@ -490,6 +490,7 @@
       "title": "Estadística {n}",
       "value": "Valor (Estadística {n})",
       "label": "Etiqueta (Estadística {n})",
+      "icon": "Ícono",
       "preview": "Cómo se ve en la landing page"
     },
     "contact": {

+ 1 - 0
src/i18n/locales/pt.json

@@ -490,6 +490,7 @@
       "title": "Estatística {n}",
       "value": "Valor (Estatística {n})",
       "label": "Rótulo (Estatística {n})",
+      "icon": "Ícone",
       "preview": "Como aparece na landing page"
     },
     "contact": {

+ 15 - 2
src/pages/company-settings/CompanySettingsPage.vue

@@ -96,11 +96,20 @@
                         v-model:error="validationErrors[`stat${n}_label`]"
                         :label="$t('company_settings.stat.label', { n })"
                       />
+                      <MdiIconPicker
+                        v-model="form[`stat${n}_icon`]"
+                        :label="$t('company_settings.stat.icon')"
+                      />
 
                       <q-separator class="q-my-xs" />
 
                       <div class="stat-preview rounded-borders q-pa-md column items-start q-gutter-xs">
-                        <q-icon :name="statIcons[n]" size="28px" class="text-white" style="opacity: .9" />
+                        <q-icon
+                          :name="form[`stat${n}_icon`] || STAT_FALLBACK_ICONS[n]"
+                          size="28px"
+                          class="text-white"
+                          style="opacity: .9"
+                        />
                         <span class="text-white text-weight-bold" style="font-size: 1.35rem; line-height: 1.2;">
                           {{ form[`stat${n}_value`] || "—" }}
                         </span>
@@ -387,6 +396,7 @@ import { useSubmitHandler } from "src/composables/useSubmitHandler";
 
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultInput from "src/components/defaults/DefaultInput.vue";
+import MdiIconPicker from "src/components/defaults/MdiIconPicker.vue";
 
 const AddEditBenefitDialog = defineAsyncComponent(
   () => import("./components/AddEditBenefitDialog.vue"),
@@ -401,7 +411,7 @@ const { t } = useI18n();
 const heroFormRef = useTemplateRef("heroFormRef");
 const imageInputRef = useTemplateRef("imageInputRef");
 
-const statIcons = { 1: "mdi-account-group", 2: "mdi-handshake", 3: "mdi-heart-outline" };
+const STAT_FALLBACK_ICONS = { 1: "mdi-account-group", 2: "mdi-handshake", 3: "mdi-heart-outline" };
 
 const settings = ref({});
 const uploadingImage = ref(false);
@@ -416,10 +426,13 @@ const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
   hero_subtitle: "",
   stat1_value: "",
   stat1_label: "",
+  stat1_icon: "",
   stat2_value: "",
   stat2_label: "",
+  stat2_icon: "",
   stat3_value: "",
   stat3_label: "",
+  stat3_icon: "",
   about_vision: "",
   about_mission: "",
   about_values: "",