LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'model vue postulación' (#10) from status-postulacion into main 

Reviewed-on: #10
This commit is contained in:
Esteban Paz 2026-02-20 00:15:36 +00:00
parent 495a26e3e3 a00b9fd331
commit 0eb3fce416
8 changed files with 1752 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
astro.config.mjs
View File

@ -6,6 +6,8 @@ import markdoc from "@astrojs/markdoc";
import icon from "astro-icon";
import node from "@astrojs/node";
import vue from "@astrojs/vue";
// https://astro.build/config
export default defineConfig({
vite: {
@ -14,7 +16,7 @@ export default defineConfig({
//base: '/mockup/',
integrations: [markdoc(), icon()],
integrations: [markdoc(), icon(), vue()],
i18n: {
locales: ["es", "en", "fr", "he", "uk", "pt-br"],

1455
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -11,6 +11,7 @@
"dependencies": {
"@astrojs/markdoc": "^0.15.10",
"@astrojs/node": "^9.5.3",
"@astrojs/vue": "^5.1.4",
"@coreui/icons": "^3.0.1",
"@dotenvx/dotenvx": "^1.52.0",
"@fontsource-variable/kameron": "^5.2.8",
@ -18,6 +19,7 @@
"@fontsource-variable/rokkitt": "^5.2.8",
"@fontsource/poppins": "^5.2.7",
"@iconify-json/ph": "^1.2.2",
"@iconify/vue": "^5.0.0",
"@tailwindcss/vite": "^4.1.18",
"@unpic/astro": "^1.0.2",
"astro": "^5.17.1",
@ -27,7 +29,8 @@
"dayjs": "^1.11.19",
"googleapis": "^171.4.0",
"swiper": "^12.1.0",
"tailwindcss": "^4.1.18"
"tailwindcss": "^4.1.18",
"vue": "^3.5.28"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.19",

7
src/components/BoxContainer.astro
View File

@ -2,7 +2,8 @@
const { props } = Astro.props;
import { Icon } from "astro-icon/components";
import Button from "./ui/Button.astro";
import Modal from "./Modal.astro";
import RegisterModal from "../components/RegisterModal.vue";
const background = props.bgImage || props.bgColor;
---
@ -26,8 +27,8 @@ const background = props.bgImage || props.bgColor;
)}
{props.hasInput && (
<div class="flex gap-2 w-full mt-5" title={props.buttonLabel}>
<Modal />
<div class="flex gap-2 w-full mt-5">
<RegisterModal client:load locale={Astro.currentLocale} />
</div>
)}
</div>

89
src/components/Modal.astro
View File

@ -1,89 +0,0 @@
---
import Button from "./ui/Button.astro";
import { Icon } from "astro-icon/components";
const { id, title } = Astro.props;
import { createTranslator, t } from '../i18n';
const tl = createTranslator(Astro.currentLocale);
---
<!-- Open the modal using ID.showModal() method -->
<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">{tl("info.register")}</button>
<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
<form method="dialog">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
</form>
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">{tl("info.modal.title")}</h3>
<p class="text-lg font-primary text-center mt-10">{tl("info.modal.text")}</p>
<!-- <div class="form py-4 mt-6 ">
<form id="voluteenFrom"
action="/api/emailPostulacion/send"
method="post"
class="flex flex-col gap-2 place-items-center">
<label class="input rounded-none bg-white">
<span>Nombres <span class="text-error">*</span></span>
<input name="nombres" type="text" placeholder="Nombres"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input rounded-none bg-white">
<span>Apellidos <span class="text-error">*</span></span>
<input name="apellidos" type="text" placeholder="Apellidos"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input rounded-none bg-white">
<span>País</span>
<input name="pais" type="text" placeholder="Pais"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Lugar</span>
<input name="lugar" type="text" placeholder="Lugar"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Dirección</span>
<input name="direccion" type="text" placeholder="Dirección"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Teléfono <span class="text-error">*</span></span>
<input name="telefono" type="text" placeholder="Teléfono"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input validator rounded-none bg-white">
<span>Email <span class="text-error">*</span></span>
<input name="email" type="email"
placeholder="Ingresa Correo Electrónico"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<button type="submit"
class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
Enviar
</button>
</form>
</div> -->
</div>
</dialog>
<script>
</script>

181
src/components/RegisterModal.vue Normal file
View File

@ -0,0 +1,181 @@
<script setup>
import { ref} from "vue";
import { Icon } from '@iconify/vue'
const props = defineProps({
locale: String
})
import { createTranslator, t } from "../i18n";
const tl = createTranslator(props.locale);
const loading = ref(false);
const modalRef = ref(null);
const isFormPendiente = ref(true);
const openModal = () => {
modalRef.value?.showModal();
};
const closeModal = () => {
modalRef.value?.close();
};
const handleSubmit = async (e) => {
e.preventDefault();
loading.value = true;
const formData = new FormData(e.target);
try {
const response = await fetch("/api/emailPostulacion/send", {
method: "POST",
body: formData,
});
if (!response.ok) throw new Error();
} catch (error) {
console.error(error);
} finally {
e.target.reset();
loading.value = false;
closeModal();
}
};
</script>
<template>
<template v-if="isFormPendiente">
<button
@click="openModal"
class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
>
{{ tl("info.register") }}
</button>
<dialog
ref="modalRef"
class="modal modal-bottom sm:modal-middle p-8"
>
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
<!-- Botón cerrar -->
<button
type="button"
@click="closeModal"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
>
<Icon icon="ph:x" class="text-2xl" />
</button>
<!-- Título -->
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">
{{ tl("info.modal.title") }}
</h3>
<!-- Texto -->
<p class="text-lg font-primary text-center mt-10">
{{ tl("info.modal.text") }}
</p>
</div>
</dialog>
</template>
<template v-else>
<button
@click="openModal"
class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
>
{{ tl("info.register") }}
</button>
<dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
<div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
<form method="dialog">
<button
v-on:click="closeModal"
type="button"
class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
>
<Icon icon="ph:x" class="w-6 h-6" />
</button>
</form>
<h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
Formulario de Registro
</h3>
<div class="form py-4 mt-6 ">
<form
id="voluteenFrom"
action="/api/emailPostulacion/send"
method="post"
@submit="handleSubmit"
class="flex flex-col gap-2 place-items-center">
<label class="input rounded-none bg-white">
<span>Nombres <span class="text-error">*</span></span>
<input name="nombres" type="text" placeholder="Nombres"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input rounded-none bg-white">
<span>Apellidos <span class="text-error">*</span></span>
<input name="apellidos" type="text" placeholder="Apellidos"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input rounded-none bg-white">
<span>País</span>
<input name="pais" type="text" placeholder="Pais"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Lugar</span>
<input name="lugar" type="text" placeholder="Lugar"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Dirección</span>
<input name="direccion" type="text" placeholder="Dirección"
class="w-full max-w-xs rounded-none" />
</label>
<label class="input rounded-none bg-white">
<span>Teléfono <span class="text-error">*</span></span>
<input name="telefono" type="text" placeholder="Teléfono"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<label class="input validator rounded-none bg-white">
<span>Email <span class="text-error">*</span></span>
<input name="email" type="email"
placeholder="Ingresa Correo Electrónico"
class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
required />
</label>
<button
type="submit"
:disabled="loading"
class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
{{ loading ? "Enviando..." : "Enviar" }}
</button>
</form>
</div>
</div>
</dialog>
</template>
</template>

71
src/components/section/FooterSection.astro
View File

@ -1,7 +1,8 @@
---
import { Icon } from "astro-icon/components";
import { Image } from "astro:assets";
import jbp from "@assets/DRJBP-1.webp";
import jbp from "../../assets/DRJBP-1.webp";
import FormContact from "./FormContact.vue";
import { createTranslator, t } from '../../i18n';
const tl = createTranslator(Astro.currentLocale);
@ -24,72 +25,8 @@ const tl = createTranslator(Astro.currentLocale);
<p class="text-lg font-light mb-10 break-words" set:html={tl("footer.text2")}></p>
<!-- FORMULARIO -->
<form method="POST" action="/api/emailInfo/send" class="flex flex-col gap-4">
<fieldset>
<input
name="nombre"
type="text"
placeholder={tl("footer.form.name")}
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
/>
<input
name="email"
type="email"
placeholder="E-Mail"
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
/>
<textarea
name="mensaje"
placeholder={tl("footer.form.mesagge")}
rows="5"
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
></textarea>
</fieldset>
<div class="flex flex-row justify-between items-center mt-4">
<ul class="flex flex-row gap-2">
<li class="border-r pr-2">
<a href="https://x.com/CRPazYJusticia" target="_blank">
<Icon name="ph:x-logo-thin" class="text-3xl" />
</a>
</li>
<li class="border-r pr-2">
<a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
<Icon name="ph:instagram-logo-thin" class="text-3xl" />
</a>
</li>
<li class="border-r pr-2">
<a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
<Icon name="ph:facebook-logo-thin" class="text-3xl" />
</a>
</li>
<li>
<a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
<Icon name="ph:youtube-logo-thin" class="text-3xl" />
</a>
</li>
</ul>
<button
type="submit"
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
>
{tl("footer.form.button")}
</button>
</div>
</form>
<FormContact client:load locale ={Astro.currentLocale}/>
</div>
<div class="flex lg:justify-between mt-10 lg:mt-0 align-center justify-center">

102
src/components/section/FormContact.vue Normal file
View File

@ -0,0 +1,102 @@
<script setup>
import { Icon } from "@iconify/vue";
import { createTranslator } from "../../i18n";
const props = defineProps({
locale: String
});
const tl = createTranslator(props.locale);
const handleSubmit = async (e) => {
const formData = new FormData(e.target);
try {
const response = await fetch("/api/emailInfo/send", {
method: "POST",
body: formData,
});
e.target.reset();
if (!response.ok)
throw new Error();
} catch (error) {
console.error(error);
}
};
</script>
<template>
<form
@submit.prevent="handleSubmit"
class="flex flex-col gap-4"
>
<fieldset>
<input
name="nombre"
type="text"
:placeholder="tl('footer.form.name')"
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
/>
<input
name="email"
type="email"
placeholder="E-Mail"
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
/>
<textarea
name="mensaje"
:placeholder="tl('footer.form.mesagge')"
rows="5"
required
class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
></textarea>
</fieldset>
<div class="flex flex-row justify-between items-center mt-4">
<!-- Social Icons -->
<ul class="flex flex-row gap-2">
<li class="border-r pr-2">
<a href="https://x.com/CRPazYJusticia" target="_blank">
<Icon icon="ph:x-logo-thin" class="text-3xl" />
</a>
</li>
<li class="border-r pr-2">
<a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
<Icon icon="ph:instagram-logo-thin" class="text-3xl" />
</a>
</li>
<li class="border-r pr-2">
<a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
<Icon icon="ph:facebook-logo-thin" class="text-3xl" />
</a>
</li>
<li>
<a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
<Icon icon="ph:youtube-logo-thin" class="text-3xl" />
</a>
</li>
</ul>
<!-- Submit -->
<button
type="submit"
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
>
{{ tl("footer.form.button") }}
</button>
</div>
</form>
</template>