From f2d4ad56749256a7c574f3408dd4ddcf3d37de9e Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Sun, 4 Dec 2022 23:40:35 +0100
Subject: [PATCH] Add global save button

---
 package-lock.json                             | 15 ++++++
 package.json                                  |  1 +
 resources/img/svg/save.svg                    |  1 +
 resources/js/app.js                           | 15 +++---
 resources/js/components/SaveButton.vue        | 22 +++++++++
 resources/js/components/SidebarHeader.vue     | 27 ++++++++---
 resources/js/layouts/AppLayout.vue            | 48 +++++++++----------
 resources/js/views/member/VForm.vue           |  6 +--
 resources/js/views/setting/Bill.vue           | 11 +++--
 resources/js/views/setting/Mailman.vue        | 10 ++--
 .../views/subscription/SubscriptionForm.vue   |  5 +-
 11 files changed, 107 insertions(+), 54 deletions(-)
 create mode 100644 resources/img/svg/save.svg
 create mode 100644 resources/js/components/SaveButton.vue

diff --git a/package-lock.json b/package-lock.json
index 6f889d76..9187c4d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
                 "@inertiajs/inertia-vue": "^0.8.0",
                 "lodash": "^4.17.21",
                 "merge": "^2.1.1",
+                "portal-vue": "^2.1.7",
                 "postcss-import": "^14.0.1",
                 "query-string": "^7.0.0",
                 "svg-sprite": "^2.0.2",
@@ -7791,6 +7792,14 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/portal-vue": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+            "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+            "peerDependencies": {
+                "vue": "^2.5.18"
+            }
+        },
         "node_modules/portfinder": {
             "version": "1.0.28",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -16790,6 +16799,12 @@
             "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
             "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
         },
+        "portal-vue": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+            "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+            "requires": {}
+        },
         "portfinder": {
             "version": "1.0.28",
             "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
diff --git a/package.json b/package.json
index fc74aaaf..47f30215 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "@inertiajs/inertia-vue": "^0.8.0",
         "lodash": "^4.17.21",
         "merge": "^2.1.1",
+        "portal-vue": "^2.1.7",
         "postcss-import": "^14.0.1",
         "query-string": "^7.0.0",
         "svg-sprite": "^2.0.2",
diff --git a/resources/img/svg/save.svg b/resources/img/svg/save.svg
new file mode 100644
index 00000000..7986d893
--- /dev/null
+++ b/resources/img/svg/save.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 60 60" width="480" height="480" xmlns="http://www.w3.org/2000/svg"><path d="m59.707 8.293-8-8A1 1 0 0 0 51 0H5a5.006 5.006 0 0 0-5 5v50a5.006 5.006 0 0 0 5 5h50a5.006 5.006 0 0 0 5-5V9a1 1 0 0 0-.293-.707ZM46 2v16a1 1 0 0 1-1 1H15a1 1 0 0 1-1-1V2ZM8 58V33a3 3 0 0 1 3-3h38a3 3 0 0 1 3 3v25zm50-3a3 3 0 0 1-3 3h-1V33a5.006 5.006 0 0 0-5-5H11a5.006 5.006 0 0 0-5 5v25H5a3 3 0 0 1-3-3V5a3 3 0 0 1 3-3h7v16a3 3 0 0 0 3 3h30a3 3 0 0 0 3-3V2h2.586L58 9.414Z"/><path d="M37 17h6a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1zm1-11h4v9h-4zM45 43H15a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2zM45 37H15a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2zM45 49H15a1 1 0 0 0 0 2h30a1 1 0 0 0 0-2z"/></svg>
\ No newline at end of file
diff --git a/resources/js/app.js b/resources/js/app.js
index 3ddc3808..921dbcd3 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -2,10 +2,6 @@ import Vue from 'vue';
 import {App as InertiaApp, plugin, Link as ILink} from '@inertiajs/inertia-vue';
 
 import SvgSprite from './components/SvgSprite.js';
-import FText from './components/FText.vue';
-import FSwitch from './components/FSwitch.vue';
-import FSelect from './components/FSelect.vue';
-import FTextarea from './components/FTextarea.vue';
 import VPages from './components/VPages.vue';
 import VLabel from './components/VLabel.vue';
 import VBool from './components/VBool.vue';
@@ -14,19 +10,22 @@ import Heading from './components/Heading.vue';
 import AppLayout from './layouts/AppLayout.vue';
 import VTooltip from 'v-tooltip';
 import hasModule from './mixins/hasModule.js';
+import PortalVue from 'portal-vue';
 
 Vue.use(plugin);
+Vue.use(PortalVue);
 Vue.use(VTooltip);
-Vue.component('f-text', FText);
-Vue.component('f-switch', FSwitch);
-Vue.component('f-select', FSelect);
-Vue.component('f-textarea', FTextarea);
+Vue.component('f-text', () => import(/* webpackChunkName: "form" */ './components/FText'));
+Vue.component('f-switch', () => import(/* webpackChunkName: "form" */ './components/FSwitch'));
+Vue.component('f-select', () => import(/* webpackChunkName: "form" */ './components/FSelect'));
+Vue.component('f-textarea', () => import(/* webpackChunkName: "form" */ './components/FTextarea'));
 Vue.component('SvgSprite', SvgSprite);
 Vue.component('VPages', VPages);
 Vue.component('v-bool', VBool);
 Vue.component('v-label', VLabel);
 Vue.component('box', Box);
 Vue.component('heading', Heading);
+Vue.component('save-button', () => import(/* webpackChunkName: "form" */ './components/SaveButton'));
 
 const el = document.getElementById('app');
 
diff --git a/resources/js/components/SaveButton.vue b/resources/js/components/SaveButton.vue
new file mode 100644
index 00000000..3cd17e87
--- /dev/null
+++ b/resources/js/components/SaveButton.vue
@@ -0,0 +1,22 @@
+<template>
+    <portal to="toolbar-right">
+        <button
+            :form="form"
+            type="submit"
+            class="flex items-center transition-all justify-center w-8 h-8 bg-primary-700 hover:bg-primary-600 rounded"
+            v-tooltip="`speichern`"
+        >
+            <svg-sprite class="w-4 h-4 text-white" src="save"></svg-sprite>
+        </button>
+    </portal>
+</template>
+
+<script>
+export default {
+    props: {
+        form: {
+            required: true,
+        },
+    },
+};
+</script>
diff --git a/resources/js/components/SidebarHeader.vue b/resources/js/components/SidebarHeader.vue
index da32fb45..410bf389 100644
--- a/resources/js/components/SidebarHeader.vue
+++ b/resources/js/components/SidebarHeader.vue
@@ -2,11 +2,22 @@
     <div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
         <div class="flex items-center">
             <span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
-            <a v-for="link, index in links.filter(link => link.icon === undefined)" :key="index" @click.prevent="$emit(link.event)" href="#" class="btn label btn-primary-light">
+            <a
+                v-for="(link, index) in links.filter((link) => link.icon === undefined)"
+                :key="index"
+                @click.prevent="$emit(link.event)"
+                href="#"
+                class="btn label btn-primary-light"
+            >
                 <span v-if="link.label" v-text="link.label"></span>
                 <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
             </a>
-            <a v-for="link, index in links.filter(link => link.icon !== undefined)" :key="index" :href="link.href" class="btn label icon btn-primary-light ml-1">
+            <a
+                v-for="(link, index) in links.filter((link) => link.icon !== undefined)"
+                :key="index"
+                :href="link.href"
+                class="btn label icon btn-primary-light ml-1"
+            >
                 <span v-if="link.label" v-text="link.label"></span>
                 <svg-sprite v-if="link.icon" :src="link.icon"></svg-sprite>
             </a>
@@ -23,11 +34,15 @@
 export default {
     props: {
         links: {
-            default: function() { return []; }
+            default: function () {
+                return [];
+            },
         },
         title: {
-            default: function() { return ''; }
-        }
-    }
+            default: function () {
+                return '';
+            },
+        },
+    },
 };
 </script>
diff --git a/resources/js/layouts/AppLayout.vue b/resources/js/layouts/AppLayout.vue
index 3a00635d..52acf524 100644
--- a/resources/js/layouts/AppLayout.vue
+++ b/resources/js/layouts/AppLayout.vue
@@ -36,36 +36,36 @@
             class="grow bg-gray-900 flex flex-col transition-all"
             :class="{'ml-56': menuVisible, 'ml-0': !menuVisible}"
         >
-            <div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
-                <div class="flex space-x-3 items-center">
-                    <a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
-                        <svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
-                    </a>
-                    <span
-                        class="text-sm md:text-xl font-semibold text-white leading-none"
-                        v-html="$page.props.title"
-                    ></span>
-                    <div class="flex ml-4">
-                        <i-link
-                            v-for="(link, index) in filterMenu"
-                            :key="index"
-                            :href="link.href"
-                            class="btn label mr-2"
-                            :class="`btn-${link.color}`"
-                            v-tooltip="tooltipsVisible ? link.label : ''"
-                        >
-                            <svg-sprite v-show="link.icon" class="w-3 h-3 xl:mr-2" :src="link.icon"></svg-sprite>
-                            <span class="hidden xl:inline" v-text="link.label"></span>
-                        </i-link>
-                    </div>
+            <div class="h-16 px-6 flex items-center space-x-3 border-b border-gray-600">
+                <a href="#" @click.prevent="menuOverflowVisible = !menuOverflowVisible" class="lg:hidden">
+                    <svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
+                </a>
+                <span
+                    class="text-sm md:text-xl font-semibold text-white leading-none"
+                    v-html="$page.props.title"
+                ></span>
+                <i-link
+                    v-for="(link, index) in filterMenu"
+                    :key="index"
+                    :href="link.href"
+                    class="btn label mr-2"
+                    :class="`btn-${link.color}`"
+                    v-tooltip="tooltipsVisible ? link.label : ''"
+                >
+                    <svg-sprite v-show="link.icon" class="w-3 h-3 xl:mr-2" :src="link.icon"></svg-sprite>
+                    <span class="hidden xl:inline" v-text="link.label"></span>
+                </i-link>
+                <div class="flex grow justify-between">
+                    <portal-target name="toolbar-left"> </portal-target>
+                    <portal-target name="toolbar-right"> </portal-target>
                 </div>
                 <label
                     for="search"
                     :class="{'opacity-0 sm:opacity-100': !searchVisible, 'opacity-100': searchVisible}"
-                    class="absolute left-14 sm:static transition-all"
+                    class="absolute left-10 sm:static transition-all"
                 >
                     <input
-                        class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400"
+                        class="shadow-lg bg-gray-800 rounded-lg py-2 px-3 h-10 text-gray-300 hover:bg-gray-700 focus:bg-gray-700 placeholder-gray-400"
                         placeholder="Suchen…"
                         name="search"
                         v-model="isearch"
diff --git a/resources/js/views/member/VForm.vue b/resources/js/views/member/VForm.vue
index 3db9831d..6384ca76 100644
--- a/resources/js/views/member/VForm.vue
+++ b/resources/js/views/member/VForm.vue
@@ -1,5 +1,6 @@
 <template>
-    <form class="flex grow relative" @submit.prevent="submit">
+    <form class="flex grow relative" id="memberedit" @submit.prevent="submit">
+        <save-button form="memberedit"></save-button>
         <popup heading="Ein Konflikt ist aufgetreten" v-if="conflict === true">
             <div>
                 <p class="mt-4">
@@ -164,9 +165,6 @@
                             required
                         ></f-select>
                     </div>
-                    <div>
-                        <button type="submit" class="mt-3 btn btn-sm inline-block btn-primary">Speichern</button>
-                    </div>
                 </div>
             </box>
             <box heading="Prävention">
diff --git a/resources/js/views/setting/Bill.vue b/resources/js/views/setting/Bill.vue
index 4e590079..2eede038 100644
--- a/resources/js/views/setting/Bill.vue
+++ b/resources/js/views/setting/Bill.vue
@@ -1,5 +1,10 @@
 <template>
-    <form class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
+    <form
+        id="billsettingform"
+        class="grow p-6 grid grid-cols-2 gap-3 items-start content-start"
+        @submit.prevent="submit"
+    >
+        <save-button form="billsettingform"></save-button>
         <f-text
             label="Absender"
             hint="Absender-Name in Kurzform, i.d.R. der kurze Stammesname"
@@ -26,10 +31,6 @@
         <f-text label="Webseite" v-model="inner.website" name="website" id="website"></f-text>
         <f-text label="IBAN" v-model="inner.iban" name="iban" id="iban"></f-text>
         <f-text label="BIC" v-model="inner.bic" name="bic" id="bic"></f-text>
-
-        <div>
-            <button type="submit" class="mt-3 btn block btn-primary">Speichern</button>
-        </div>
     </form>
 </template>
 
diff --git a/resources/js/views/setting/Mailman.vue b/resources/js/views/setting/Mailman.vue
index fde12259..5d7329e4 100644
--- a/resources/js/views/setting/Mailman.vue
+++ b/resources/js/views/setting/Mailman.vue
@@ -1,5 +1,10 @@
 <template>
-    <form class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
+    <form
+        id="mailmansettingform"
+        class="grow p-6 grid grid-cols-2 gap-3 items-start content-start"
+        @submit.prevent="submit"
+    >
+        <save-button form="mailmansettingform"></save-button>
         <div class="col-span-full text-gray-100 mb-3">
             <p class="text-sm">
                 Scoutrobot kann automatisch Mailinglisten erstellen, wenn es mit einem existierenden
@@ -49,9 +54,6 @@
             :options="lists"
         ></f-select>
         <div></div>
-        <div>
-            <button type="submit" class="mt-3 btn block btn-primary">Speichern</button>
-        </div>
     </form>
 </template>
 
diff --git a/resources/js/views/subscription/SubscriptionForm.vue b/resources/js/views/subscription/SubscriptionForm.vue
index 42d8b023..9cfa4f15 100644
--- a/resources/js/views/subscription/SubscriptionForm.vue
+++ b/resources/js/views/subscription/SubscriptionForm.vue
@@ -1,5 +1,6 @@
 <template>
-    <form class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
+    <form id="subedit" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
+        <save-button form="subedit"></save-button>
         <f-text id="name" v-model="inner.name" label="Name" required></f-text>
         <f-select
             id="fee_id"
@@ -10,8 +11,6 @@
             required
         ></f-select>
         <f-text id="amount" v-model="inner.amount" label="Interner Beitrag" mode="area" required></f-text>
-
-        <button type="submit" class="btn btn-primary">Absenden</button>
     </form>
 </template>