- aggiornata la grafica della Home di RISO
- Profilo Completition - Email Verificata - Invita un Amico (invio di email)
This commit is contained in:
Surya Paolo
290
src/components/InvitaAmico/InvitaAmico.vue
Normal file
290
src/components/InvitaAmico/InvitaAmico.vue
Normal file
@@ -0,0 +1,290 @@
|
||||
<template>
|
||||
<q-page class="invita-amico-page">
|
||||
<div class="q-pa-md">
|
||||
<q-card class="invita-amico-card">
|
||||
<!-- Header -->
|
||||
<q-card-section class="bg-primary text-white text-center">
|
||||
<div class="text-h5 q-mb-xs">
|
||||
<q-icon
|
||||
name="person_add"
|
||||
size="md"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
Invita un Amico
|
||||
</div>
|
||||
<div class="text-subtitle2">Condividi la nostra app con i tuoi amici!</div>
|
||||
|
||||
<!-- Stats Badge -->
|
||||
<div
|
||||
v-if="invitaStore.totaleInviti > 0"
|
||||
class="stats-badge q-mt-md"
|
||||
>
|
||||
<q-chip
|
||||
color="white"
|
||||
text-color="primary"
|
||||
icon="email"
|
||||
class="q-mx-xs"
|
||||
>
|
||||
{{ invitaStore.contatoreInvitiRiusciti }} inviati
|
||||
</q-chip>
|
||||
<q-chip
|
||||
v-if="invitaStore.percentualeSuccesso > 0"
|
||||
color="white"
|
||||
text-color="primary"
|
||||
icon="trending_up"
|
||||
class="q-mx-xs"
|
||||
>
|
||||
{{ invitaStore.percentualeSuccesso }}% successo
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator />
|
||||
|
||||
<!-- Form Section -->
|
||||
<q-card-section>
|
||||
<q-form
|
||||
@submit="onInviaEmail"
|
||||
class="q-gutter-md"
|
||||
>
|
||||
<!-- Email Input -->
|
||||
<q-input
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
label="Email del tuo amico *"
|
||||
hint="Inserisci l'indirizzo email della persona che vuoi invitare"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) => !!val || 'L\'email è obbligatoria',
|
||||
(val) => invitaStore.isValidEmail(val) || 'Inserisci un\'email valida',
|
||||
(val) =>
|
||||
!invitaStore.isEmailGiaInvitata(val) ||
|
||||
'Email già invitata nelle ultime 24 ore',
|
||||
]"
|
||||
outlined
|
||||
:disable="invitaStore.loading"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="email" />
|
||||
</template>
|
||||
|
||||
<!-- Badge se già invitata -->
|
||||
<template
|
||||
v-slot:append
|
||||
v-if="form.email && invitaStore.isEmailGiaInvitata(form.email)"
|
||||
>
|
||||
<q-icon
|
||||
name="info"
|
||||
color="orange"
|
||||
>
|
||||
<q-tooltip>Già invitato nelle ultime 24h</q-tooltip>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<!-- Messaggio Personalizzato (opzionale) -->
|
||||
<q-input
|
||||
v-model="form.messaggio"
|
||||
type="textarea"
|
||||
label="Messaggio personalizzato (opzionale)"
|
||||
hint="Aggiungi un messaggio personale al tuo invito"
|
||||
outlined
|
||||
rows="3"
|
||||
counter
|
||||
maxlength="500"
|
||||
:disable="invitaStore.loading"
|
||||
>
|
||||
<!-- Bottone per cancellare messaggio salvato -->
|
||||
<template
|
||||
v-slot:append
|
||||
v-if="form.messaggio"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="clear"
|
||||
@click.stop="cancellaMessaggioSalvato"
|
||||
>
|
||||
<q-tooltip>Cancella messaggio salvato</q-tooltip>
|
||||
</q-btn>
|
||||
</template>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="message" />
|
||||
</template>
|
||||
</q-input>
|
||||
<!-- Info che viene salvato -->
|
||||
<div
|
||||
v-if="form.messaggio"
|
||||
class="text-caption text-grey-6"
|
||||
>
|
||||
<q-icon
|
||||
name="info"
|
||||
size="xs"
|
||||
/>
|
||||
Questo messaggio sarà riutilizzato nei prossimi inviti
|
||||
</div>
|
||||
|
||||
<!-- Alert errore -->
|
||||
<q-banner
|
||||
v-if="invitaStore.error"
|
||||
class="bg-negative text-white"
|
||||
rounded
|
||||
dense
|
||||
>
|
||||
<template v-slot:avatar>
|
||||
<q-icon name="error" />
|
||||
</template>
|
||||
{{ invitaStore.error }}
|
||||
</q-banner>
|
||||
|
||||
<!-- Bottone Invio Email -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
label="Invia Invito via Email"
|
||||
icon="email"
|
||||
color="primary"
|
||||
size="lg"
|
||||
class="full-width"
|
||||
:loading="invitaStore.loading"
|
||||
:disable="invitaStore.loading || !form.email"
|
||||
unelevated
|
||||
/>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator inset />
|
||||
|
||||
<!-- Sezione Telegram -->
|
||||
<q-card-section>
|
||||
<div class="text-center q-mb-md">
|
||||
<div class="text-subtitle1 text-grey-8 q-mb-xs">
|
||||
Oppure invita tramite Telegram
|
||||
</div>
|
||||
<div class="text-caption text-grey-6">
|
||||
Genera un messaggio da condividere su Telegram
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
@click="onInviaTelegram"
|
||||
label="Invia via Telegram"
|
||||
icon="telegram"
|
||||
color="blue-9"
|
||||
size="lg"
|
||||
class="full-width"
|
||||
outline
|
||||
:disable="invitaStore.loading"
|
||||
/>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Info Section -->
|
||||
<q-card-section class="bg-blue-1">
|
||||
<div class="text-center">
|
||||
<q-icon
|
||||
name="info"
|
||||
color="primary"
|
||||
size="sm"
|
||||
class="q-mr-xs"
|
||||
/>
|
||||
<span class="text-grey-8">
|
||||
Il tuo amico riceverà un link per registrarsi all'app
|
||||
</span>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Cronologia Inviti (opzionale) -->
|
||||
<q-card-section v-if="invitaStore.hasCronologia && mostraCronologia">
|
||||
<div class="text-subtitle2 text-grey-8 q-mb-sm">
|
||||
<q-icon
|
||||
name="history"
|
||||
class="q-mr-xs"
|
||||
/>
|
||||
Ultimi inviti
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="close"
|
||||
size="sm"
|
||||
@click="mostraCronologia = false"
|
||||
class="float-right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-list
|
||||
dense
|
||||
bordered
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
v-for="invito in invitaStore.ultimi5Inviti"
|
||||
:key="invito.id"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon
|
||||
:name="invito.successo ? 'check_circle' : 'error'"
|
||||
:color="invito.successo ? 'positive' : 'negative'"
|
||||
/>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ invito.email }}</q-item-label>
|
||||
<q-item-label caption>
|
||||
{{ formatDate(invito.data) }}
|
||||
<span
|
||||
v-if="invito.errore"
|
||||
class="text-negative"
|
||||
>
|
||||
- {{ invito.errore }}
|
||||
</span>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
round
|
||||
icon="delete"
|
||||
size="sm"
|
||||
@click="invitaStore.rimuoviDaCronologia(invito.id)"
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<div class="text-center q-mt-sm">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
label="Cancella cronologia"
|
||||
color="negative"
|
||||
size="sm"
|
||||
@click="confermaEliminaCronologia"
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<!-- Bottone per mostrare cronologia -->
|
||||
<q-card-section v-if="invitaStore.hasCronologia && !mostraCronologia">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
label="Mostra cronologia inviti"
|
||||
icon="history"
|
||||
color="primary"
|
||||
class="full-width"
|
||||
@click="mostraCronologia = true"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" src="./InvitaAmico.ts"></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './InvitaAmico.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user