151 lines
3.1 KiB
Vue
Executable file
151 lines
3.1 KiB
Vue
Executable file
<template>
|
|
<div class="wrapper" v-if="pageStatus === 'draft'">
|
|
<div class="test-wrapper">
|
|
<k-button
|
|
@click="send($event, true)"
|
|
style="width: max-content"
|
|
variant="filled"
|
|
help="test"
|
|
:theme="testBtnState.theme"
|
|
:icon="testBtnState.icon"
|
|
>{{ testBtnState.text }}</k-button
|
|
>
|
|
<footer class="k-field-footer">
|
|
<div class="k-help k-field-help k-text">
|
|
<p>
|
|
Envoie seulement aux
|
|
<a href="/panel/users" title="voir la liste">éditeurs</a>.
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
<k-box
|
|
v-if="testBtnState.error"
|
|
theme="error"
|
|
style="margin-top: var(--spacing-1)"
|
|
>{{ testBtnState.error }}</k-box
|
|
>
|
|
</div>
|
|
<div class="send-wrapper">
|
|
<k-button
|
|
@click="send($event)"
|
|
variant="filled"
|
|
:theme="sendBtnState.theme"
|
|
:icon="sendBtnState.icon"
|
|
>{{ sendBtnState.text }}</k-button
|
|
>
|
|
<k-box
|
|
v-if="sendBtnState.error"
|
|
theme="error"
|
|
style="margin-top: var(--spacing-1)"
|
|
>{{ sendBtnState.error }}</k-box
|
|
>
|
|
<footer class="k-field-footer">
|
|
<div class="k-help k-field-help k-text">
|
|
<strong>⚠ Envoie à tous les abonnés.</strong>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const { pageUri } = defineProps({
|
|
pageUri: String,
|
|
pageStatus: String,
|
|
});
|
|
|
|
const testBtnState = ref({
|
|
icon: "plane",
|
|
text: "Tester",
|
|
theme: null,
|
|
error: null,
|
|
});
|
|
|
|
const sendBtnState = ref({
|
|
icon: "plane",
|
|
text: "Envoyer",
|
|
theme: "orange",
|
|
error: null,
|
|
});
|
|
|
|
async function send(event, isTest = false) {
|
|
event.preventDefault();
|
|
|
|
const currentBtnState = isTest ? testBtnState : sendBtnState;
|
|
|
|
currentBtnState.value = {
|
|
theme: "blue",
|
|
text: "En cours…",
|
|
icon: "loader",
|
|
error: null,
|
|
};
|
|
|
|
const headers = {
|
|
method: "POST",
|
|
body: JSON.stringify({
|
|
pageUri,
|
|
isTest,
|
|
}),
|
|
};
|
|
|
|
try {
|
|
const response = await fetch("/send-newsletter.json", headers);
|
|
const data = await response.json();
|
|
|
|
if (data.status === "success") {
|
|
currentBtnState.value = {
|
|
theme: "green",
|
|
icon: "check",
|
|
text: isTest ? "Test envoyé" : "Envoi réussi",
|
|
error: null,
|
|
};
|
|
|
|
if (!isTest) {
|
|
setTimeout(() => {
|
|
location.href = location.href;
|
|
}, 2000);
|
|
} else {
|
|
currentBtnState.value = {
|
|
icon: "plane",
|
|
text: "Re-tester",
|
|
theme: null,
|
|
error: null,
|
|
};
|
|
}
|
|
} else {
|
|
throw new Error(data.message || "Erreur inconnue");
|
|
}
|
|
} catch (error) {
|
|
currentBtnState.value = {
|
|
theme: "red",
|
|
icon: "alert",
|
|
text: isTest ? "Échec du test" : "Erreur",
|
|
error: error.message,
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.wrapper {
|
|
display: flex;
|
|
gap: 10vw;
|
|
}
|
|
|
|
.k-field-footer {
|
|
width: 15rem;
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.k-field-footer {
|
|
width: 9rem;
|
|
}
|
|
}
|
|
@media screen and (min-width: 533px) {
|
|
button {
|
|
margin-top: 2.15rem;
|
|
}
|
|
}
|
|
</style>
|