Skip to content

Add contact form #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: production
Choose a base branch
from
Open

Add contact form #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 188 additions & 0 deletions tryit-frontend/components/home/ContactForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<template>

<v-dialog
v-model="isVisible"
max-width="600px"
>
<v-alert
v-model="contact_400_alert"
type="error"
close-text="Cerrar"
color="error"
dismissible
>
Ha habido un error al enviar el mensaje de contacto
</v-alert>
<v-alert
v-model="show_info_alert"
type="info"
close-text="Cerrar"
color="info"
dismissible
>
Se ha envidado el mensaje de contacto correctamente
</v-alert>
<v-card color="primary">
<v-card-title class="white--text">
Contacta con nosotros
</v-card-title>


</v-card>

<v-card>
<v-row
align="center"
justify="space-around"
class="mt-5"
>
<v-col
cols="3"
sm="10"
>

Introduce tu nombre, correo y mensaje para contactar con nosotros.
</v-col>

</v-row>
<v-row
flex-grow="1"
class="mt-5, mx-10"
sm="10"
>
<v-form
ref="form"
>
<v-text-field
justify="center"
v-model="name"
label="NOMBRE*"
:rules="nameRules"
required
></v-text-field>
<v-text-field
justify="center"
v-model="email"
label="CORREO*"
type="email"
required
></v-text-field>
<v-textarea
v-model="message"
density="confortable"
flex-grow="1"
sm="10"
single-line="false"
label="MENSAJE*"
:rules="nameRules"
required
></v-textarea>
</v-form>
</v-row>
<v-row
align="center"
justify="space-around"
v-if="credits"
>

<v-spacer></v-spacer>
<v-avatar color="green">
<v-icon dark>
mdi-hand-coin
</v-icon>
</v-avatar>
<h5 class="mx-5"> {{credits}} </h5>
<v-spacer></v-spacer>
</v-row>
<v-card-actions>
<v-spacer></v-spacer>

<v-btn
rounded
x-large
dark
color="accept"
@click="contactFormQuery()"
>
<v-icon
left
x-large
color="white"
class="mx-3"
>
<!-- mdi-information-outline -->
mdi-send
</v-icon>
Enviar mensaje
</v-btn>
<v-btn
dark
rounded
x-large
color="close"
@click="hideDialog"
>
<v-icon
left
dark
x-large
color="white"
class="mx-3"
>
<!-- mdi-information-outline -->
mdi-close
</v-icon>

Cerrar
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

</template>

<script>


export default {
data() {
return{
contact_400_alert: false,
show_info_alert: false,
isVisible: false,
name: "",
email: "",
message: "",
credits: null,
}
},

methods: {

hideDialog() {
this.isVisible = false
},
async contactFormQuery() {


try {
const res = await this.$axios.$post(process.env.api + `/api/contact/send_message/`, {
full_name: this.name,
email: this.email,
message: this.message
})
this.show_info_alert = true

} catch (error) {
console.log(error)
this.contact_400_alert = true
}
},
},
created() {
this.$nuxt.$on("toggleContactForm", () => {
this.isVisible = !this.isVisible
})
}
}
</script>
2 changes: 1 addition & 1 deletion tryit-frontend/components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,4 @@ export { default as DialButton } from "./home/DialButton.vue"
export { default as Timeline } from "./home/Timeline.vue"
export { default as QRReader } from "./home/QRReader.vue"
export { default as PopupLottery } from "./home/PopupLottery.vue"

export { default as ContactForm } from "./home/ContactForm.vue"
18 changes: 18 additions & 0 deletions tryit-frontend/layouts/default.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,20 @@

LOGOUT
</v-tab>
<v-tab
@click="launchContactForm()"
>
<v-icon
left
dark
color="white"
class="mx-3"
>
mdi-account
</v-icon>

CONTACTA
</v-tab>
</v-tabs>
</template>
</v-app-bar>
Expand Down Expand Up @@ -177,6 +191,7 @@ import * as Components from "../components";
PopupLogin: Components.PopupLogin,
Timeline: Components.Timeline,
QRReader: Components.QRReader,
ContactForm: Components.ContactForm,
}
})

Expand Down Expand Up @@ -206,6 +221,9 @@ export default class extends Vue {
checkLogin() { // @info Returns TRUE iff user is currently logged in and is admin
return this.$store.getters.getLogged && this.$store.getters.getAdmin
}
launchContactForm() {
this.$nuxt.$emit("toggleContactForm")
}
}
</script>

Expand Down
8 changes: 7 additions & 1 deletion tryit-frontend/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<Timeline />
<QRReader />
<PopupLottery />
<ContactForm />

<v-card>
<h2 align="center">¿Qué ofrecemos?</h2>
Expand Down Expand Up @@ -151,6 +152,7 @@ import {
QRReader,
ViewEcts,
PopupLottery,
ContactForm,
} from "../components"
//import { Context } from '@nuxt/types'

Expand All @@ -164,7 +166,8 @@ import {
DialButton,
Timeline,
QRReader,
PopupLottery
PopupLottery,
ContactForm,
},
})

Expand Down Expand Up @@ -194,6 +197,9 @@ export default class extends Vue {
toggleQRReader() {
this.$nuxt.$emit("toggleQRReader")
}
toggleContactForm() {
this.$nuxt.$emit("toggleContactForm")
}

}
</script>
Expand Down