From 989f042158bfdb0e6b30b98ad280ade765ba73ff Mon Sep 17 00:00:00 2001 From: isUnknown Date: Fri, 7 Feb 2025 10:44:01 +0100 Subject: [PATCH] email : create split panel --- site/blueprints/pages/email.yml | 50 +++++--- site/plugins/send-button/index.css | 17 ++- site/plugins/send-button/index.js | 118 +++++++++++++++++- .../src/components/SendButtonField.vue | 7 +- 4 files changed, 166 insertions(+), 26 deletions(-) diff --git a/site/blueprints/pages/email.yml b/site/blueprints/pages/email.yml index d956450..9423456 100644 --- a/site/blueprints/pages/email.yml +++ b/site/blueprints/pages/email.yml @@ -10,23 +10,35 @@ image: tabs: contentTab: - fields: - published: - label: Date d'envoi - type: date - width: 1/3 - help: Affichée dans la version web - testAdressList: - label: Liste d'adresses de test - type: structure - width: 2/3 - sortBy: email asc - help: Le bouton "Tester" ci-dessous tentera d'envoyer l'email aux adresses de cette liste + label: Contenu + icon: text + columns: + - width: 1/1 fields: - email: - type: email - sendBtn: - type: send-button - body: - label: Contenu - type: writer + body: + label: Contenu + type: writer + sendTab: + label: Envoi + icon: plane + columns: + - width: 1/4 + fields: + published: + label: Date d'envoi + type: date + help: Automatiquement rempli au moment de l'envoi. + disabled: true + width: 1/2 + - width: 1/2 + fields: + testAdressList: + label: Liste d'adresses de test + type: structure + sortBy: email asc + help: Le bouton "Tester" ci-dessous tentera d'envoyer l'email aux adresses de cette liste + fields: + email: + type: email + sendBtn: + type: send-button diff --git a/site/plugins/send-button/index.css b/site/plugins/send-button/index.css index 2cd2464..104dc38 100644 --- a/site/plugins/send-button/index.css +++ b/site/plugins/send-button/index.css @@ -1 +1,16 @@ -.wrapper[data-v-17f2f6fa]{display:flex;gap:10vw}.k-field-footer[data-v-17f2f6fa]{width:15rem}@media screen and (max-width: 800px){.k-field-footer[data-v-17f2f6fa]{width:9rem}}@media screen and (min-width: 533px){button[data-v-17f2f6fa]{margin-top:2.15rem}} + +.wrapper[data-v-4847e765] { + display: flex; + justify-content: space-between; + width: 100%; +} +@media screen and (max-width: 800px) { +.k-field-footer[data-v-4847e765] { + width: 9rem; +} +} +@media screen and (min-width: 533px) { +button[data-v-4847e765] { + margin-top: 2.15rem; +} +} diff --git a/site/plugins/send-button/index.js b/site/plugins/send-button/index.js index e76bdf6..8e191d6 100644 --- a/site/plugins/send-button/index.js +++ b/site/plugins/send-button/index.js @@ -1 +1,117 @@ -(function(){"use strict";function d(n,e,r,t,o,l,a,i){var s=typeof n=="function"?n.options:n;return s.render=e,s.staticRenderFns=r,s._compiled=!0,s._scopeId="data-v-"+l,{exports:n,options:s}}const _={__name:"SendButtonField",props:{pageUri:String,pageStatus:String},setup(n){const{pageUri:e}=n,r=Vue.ref({icon:"plane",text:"Tester",theme:null,error:null}),t=Vue.ref({icon:"plane",text:"Envoyer",theme:"orange",error:null});async function o(l,a=!1){l.preventDefault();const i=a?r:t;i.value={theme:"blue",text:"En cours…",icon:"loader",error:null};const s={method:"POST",body:JSON.stringify({pageUri:e,isTest:a})};try{const c=await(await fetch("/send-newsletter.json",s)).json();if(console.log(c),c.status==="success")i.value={theme:"green",icon:"check",text:a?"Test envoyé":"Envoi réussi",error:null},setTimeout(()=>{location.href=location.href},2e3);else{let h=c.message||"Erreur inconnue";throw new Error(h)}}catch(u){i.value={theme:"red",icon:"alert",text:a?"Échec du test":"Erreur",error:u.message}}}return{__sfc:!0,testBtnState:r,sendBtnState:t,send:o}}};var f=function(){var e=this,r=e._self._c,t=e._self._setupProxy;return e.pageStatus!=="listed"?r("div",{staticClass:"wrapper"},[r("div",{staticClass:"test-wrapper"},[r("k-button",{staticStyle:{width:"max-content"},attrs:{variant:"filled",help:"test",theme:t.testBtnState.theme,icon:t.testBtnState.icon},on:{click:function(o){return t.send(o,!0)}}},[e._v(e._s(t.testBtnState.text))]),e._m(0),t.testBtnState.error?r("k-box",{staticStyle:{"margin-top":"var(--spacing-1)"},attrs:{theme:"error"}},[e._v(e._s(t.testBtnState.error))]):e._e()],1),r("div",{staticClass:"send-wrapper"},[r("k-button",{attrs:{variant:"filled",theme:t.sendBtnState.theme,icon:t.sendBtnState.icon},on:{click:function(o){return t.send(o)}}},[e._v(e._s(t.sendBtnState.text))]),t.sendBtnState.error?r("k-box",{staticStyle:{"margin-top":"var(--spacing-1)"},attrs:{theme:"error"}},[e._v(e._s(t.sendBtnState.error))]):e._e(),e._m(1)],1)]):e._e()},p=[function(){var n=this,e=n._self._c;return n._self._setupProxy,e("footer",{staticClass:"k-field-footer"},[e("div",{staticClass:"k-help k-field-help k-text"},[e("p",[n._v("Envoie seulement à la liste ci-dessus")])])])},function(){var n=this,e=n._self._c;return n._self._setupProxy,e("footer",{staticClass:"k-field-footer"},[e("div",{staticClass:"k-help k-field-help k-text"},[e("strong",[n._v("⚠ Envoie à tous les abonnés.")])])])}],v=d(_,f,p,!1,null,"17f2f6fa");const m=v.exports;window.panel.plugin("adrienpayet/send-button",{fields:{"send-button":m}})})(); +(function() { + "use strict"; + function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) { + var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports; + { + options.render = render; + options.staticRenderFns = staticRenderFns; + options._compiled = true; + } + { + options._scopeId = "data-v-" + scopeId; + } + return { + exports: scriptExports, + options + }; + } + const _sfc_main = { + __name: "SendButtonField", + props: { + pageUri: String, + pageStatus: String + }, + setup(__props) { + const { pageUri } = __props; + const testBtnState = Vue.ref({ + icon: "plane", + text: "Tester", + theme: null, + error: null + }); + const sendBtnState = Vue.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(); + console.log(data); + if (data.status === "success") { + currentBtnState.value = { + theme: "green", + icon: "check", + text: isTest ? "Test envoyé" : "Envoi réussi", + error: null + }; + setTimeout(() => { + location.href = location.href; + }, 2e3); + } else { + let errorMessage = data.message || "Erreur inconnue"; + throw new Error(errorMessage); + } + } catch (error) { + currentBtnState.value = { + theme: "red", + icon: "alert", + text: isTest ? "Échec du test" : "Erreur", + error: error.message + }; + } + } + return { __sfc: true, testBtnState, sendBtnState, send }; + } + }; + var _sfc_render = function render() { + var _vm = this, _c = _vm._self._c, _setup = _vm._self._setupProxy; + return _vm.pageStatus !== "listed" ? _c("div", { staticClass: "wrapper" }, [_c("div", { staticClass: "test-wrapper" }, [_c("k-button", { staticStyle: { "width": "max-content" }, attrs: { "variant": "filled", "help": "test", "theme": _setup.testBtnState.theme, "icon": _setup.testBtnState.icon }, on: { "click": function($event) { + return _setup.send($event, true); + } } }, [_vm._v(_vm._s(_setup.testBtnState.text))]), _vm._m(0), _setup.testBtnState.error ? _c("k-box", { staticStyle: { "margin-top": "var(--spacing-1)" }, attrs: { "theme": "error" } }, [_vm._v(_vm._s(_setup.testBtnState.error))]) : _vm._e()], 1), _c("div", { staticClass: "send-wrapper" }, [_c("k-button", { attrs: { "variant": "filled", "theme": _setup.sendBtnState.theme, "icon": _setup.sendBtnState.icon }, on: { "click": function($event) { + return _setup.send($event); + } } }, [_vm._v(_vm._s(_setup.sendBtnState.text))]), _setup.sendBtnState.error ? _c("k-box", { staticStyle: { "margin-top": "var(--spacing-1)" }, attrs: { "theme": "error" } }, [_vm._v(_vm._s(_setup.sendBtnState.error))]) : _vm._e(), _vm._m(1)], 1)]) : _vm._e(); + }; + var _sfc_staticRenderFns = [function() { + var _vm = this, _c = _vm._self._c; + _vm._self._setupProxy; + return _c("footer", { staticClass: "k-field-footer" }, [_c("div", { staticClass: "k-help k-field-help k-text" }, [_c("p", [_vm._v("Envoie seulement à la liste ci-dessus")])])]); + }, function() { + var _vm = this, _c = _vm._self._c; + _vm._self._setupProxy; + return _c("footer", { staticClass: "k-field-footer" }, [_c("div", { staticClass: "k-help k-field-help k-text" }, [_c("strong", [_vm._v("⚠ Envoie à tous les abonnés.")])])]); + }]; + _sfc_render._withStripped = true; + var __component__ = /* @__PURE__ */ normalizeComponent( + _sfc_main, + _sfc_render, + _sfc_staticRenderFns, + false, + null, + "4847e765" + ); + __component__.options.__file = "/Users/adrienpayet/code/actuel-inactuel/site/plugins/send-button/src/components/SendButtonField.vue"; + const SendButtonField = __component__.exports; + window.panel.plugin("adrienpayet/send-button", { + fields: { + "send-button": SendButtonField + } + }); +})(); diff --git a/site/plugins/send-button/src/components/SendButtonField.vue b/site/plugins/send-button/src/components/SendButtonField.vue index dfef282..5bba736 100755 --- a/site/plugins/send-button/src/components/SendButtonField.vue +++ b/site/plugins/send-button/src/components/SendButtonField.vue @@ -122,11 +122,8 @@ async function send(event, isTest = false) {