291 lines
8.5 KiB
Vue
291 lines
8.5 KiB
Vue
|
<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>
|