Merge pull request #72 from bernhardh/display-btn-on-form-59

Display the Button on Create and Update forms #59
dillingham · May 19, 2021 · 6ece3d7 · 6ece3d7
2 parents 2bc9bfd + bdfdf08
commit 6ece3d7
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 50 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/field.js b/resources/field.js
@@ -0,0 +1,24 @@
+import {queue} from './js/queue';
+
+export default {
+    data() {
+        return {
+            openModal: false
+        }
+    },
+    methods: {
+        reload() {
+            if(this.field.reload && queue.allowsReload()) {
+                window.setTimeout(() => {
+                    this.$router.go()
+                }, 200)
+            }
+        },
+        modalReload() {
+            window.setTimeout(() => {
+                this.openModal = false;
+                this.reload()
+            }, 400)
+        }
+    }
+}
diff --git a/resources/js/components/DetailField.vue b/resources/js/components/DetailField.vue
@@ -41,30 +41,10 @@
 </template>
 
 <script>
-
-import { queue } from '../queue.js';
+import field from '../../field';
 
 export default {
     props: ['resource', 'resourceName', 'resourceId', 'field'],
-    data() {
-        return {
-            openModal: false
-        }
-    },
-    methods: {
-        reload() {
-            if(this.field.reload && queue.allowsReload()) {
-                window.setTimeout(() => {
-                    this.$router.go()
-                }, 200)
-            }
-        },
-        modalReload() {
-            window.setTimeout(() => {
-                this.openModal = false;
-                this.reload()
-            }, 400)
-        }
-    }
+    mixins: [field]
 }
-</script>
+</script>
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="flex border-b border-40 nova-button-wrapper" v-if="field.visible">
+        <div class="w-1/4 py-4">
+            <label class="font-normal text-80">{{ field.label }}</label>
+        </div>
+        <div class="w-3/4 py-4">
+            <span v-if="field.confirm == null">
+                <nova-button
+                    :field="field"
+                    :resourceName="resourceName"
+                    :resourceId="resourceId"
+                    @finished="reload"
+                />
+            </span>
+            <div v-else>
+                <a :class="field.classes" v-html="field.text" @click="openModal = true" />
+                <portal to="modals">
+                    <transition name="fade">
+                        <modal v-if="openModal" @modal-close="openModal = false">
+                            <div class="bg-white rounded-lg shadow-lg overflow-hidden" style="width: 460px;">
+                                <div class="p-8">
+                                    <heading :level="2" class="mb-6" v-html="field.confirm.title"></heading>
+                                    <p class="text-80 leading-normal" v-html="field.confirm.body"></p>
+                                </div>
+                                <div
+                                    class="border-t border-50 px-6 py-3 ml-auto flex items-center"
+                                    style="min-height: 70px; flex-direction: row-reverse">
+                                    <a
+                                        style="order: 2;"
+                                        class="cursor-pointer btn text-80 font-normal px-3 mr-3 btn-link"
+                                        @click.prevent="openModal = false">Cancel</a>
+                                    <nova-button v-bind="$props" @finished="modalReload" />
+                                </div>
+                            </div>
+                        </modal>
+                    </transition>
+                </portal>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import field from '../../field';
+
+export default {
+    props: ['resource', 'resourceName', 'resourceId', 'field'],
+    mixins: [field]
+}
+</script>
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -41,31 +41,10 @@
 </template>
 
 <script>
-
-import { queue } from '../queue.js';
+import field from '../../field';
 
 export default {
     props: ['resourceName', 'field'],
-    data() {
-        return {
-            openModal: false
-        }
-    },
-    methods: {
-        reload()  {
-            if(this.field.reload && queue.allowsReload()) {
-                window.setTimeout(() => {
-                    this.$router.go()
-                }, 200)
-            }
-        },
-        modalReload()
-        {
-            window.setTimeout(() => {
-                this.openModal = false;
-                this.reload()
-            }, 400)
-        }
-    }
+    mixins: [field]
 }
 </script>
diff --git a/resources/js/field.js b/resources/js/field.js
@@ -1,5 +1,6 @@
 Nova.booting((Vue, router) => {
-    Vue.component('nova-button', require('./components/NovaButton').default);
-    Vue.component('index-nova-button', require('./components/IndexField').default);
-    Vue.component('detail-nova-button', require('./components/DetailField').default);
+    Vue.component('nova-button', require('./components/NovaButton'));
+    Vue.component('index-nova-button', require('./components/IndexField'));
+    Vue.component('detail-nova-button', require('./components/DetailField'));
+    Vue.component('form-nova-button', require('./components/FormField'));
 })