email : create split panel

site/blueprints/pages/email.yml

@@ -10,23 +10,35 @@ image:
 
 tabs:
   contentTab:
-    fields:
+    label: Contenu
-      published:
+    icon: text
-        label: Date d'envoi
+    columns:
-        type: date
+      - width: 1/1
-        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
         fields:
-          email:
+          body:
-            type: email
+            label: Contenu
-      sendBtn:
+            type: writer
-        type: send-button
+  sendTab:
-      body:
+    label: Envoi
-        label: Contenu
+    icon: plane
-        type: writer
+    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

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;
+}
+}

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
+    }
+  });
+})();

site/plugins/send-button/src/components/SendButtonField.vue

@@ -122,11 +122,8 @@ async function send(event, isTest = false) {
 <style scoped>
 .wrapper {
   display: flex;
-  gap: 10vw;
+  justify-content: space-between;
-}
+  width: 100%;
-
-.k-field-footer {
-  width: 15rem;
 }
 
 @media screen and (max-width: 800px) {