Better form editor (#187)

2023-09-05 19:55:33 +05:30 · 2023-09-05 19:55:33 +05:30 · c66c09e17b
parent a21eb851aa
commit c66c09e17b
7 changed files with 101 additions and 104 deletions
--- a/resources/js/components/App.vue
+++ b/resources/js/components/App.vue
@ -84,7 +84,8 @@ export default {
      message: '',
      confirmationProceed: null,
      confirmationCancel: null
-    }
+    },
+    navbarHidden: false
  }),

  mounted () {
@ -106,6 +107,9 @@ export default {
    },
    workspaceAdded () {
      this.$router.push({ name: 'home' })
+    },
+    hideNavbar (hidden = true) {
+      this.navbarHidden = hidden
    }
  },

--- a/resources/js/components/Navbar.vue
+++ b/resources/js/components/Navbar.vue
@ -183,7 +183,7 @@ export default {
          return false
        }
      }
-      return true
+      return !this.$root.navbarHidden
    },
    isIframe() {
      return window.location !== window.parent.location || window.frameElement
--- a/resources/js/components/open/forms/OpenCompleteForm.vue
+++ b/resources/js/components/open/forms/OpenCompleteForm.vue
@ -1,6 +1,6 @@
 <template>
  <div v-if="form" class="open-complete-form">
-    <h1 v-if="!isHideTitle" class="mb-4 px-2" :class="{&quot;mt-4&quot;:isEmbedPopup}" v-text="form.title" />
+    <h1 v-if="!isHideTitle" class="mb-4 px-2" :class="{'mt-4':isEmbedPopup}" v-text="form.title" />

    <div v-if="isPublicFormPage && form.is_password_protected">
      <p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">
@ -76,7 +76,7 @@
        >
          <template #submit-btn="{submitForm}">
            <open-form-button :loading="loading" :theme="theme" :color="form.color" class="mt-2 px-8 mx-1"
-                                @click.prevent="submitForm"
+                                :class="submitButtonClass" @click.prevent="submitForm"
            >
              {{ form.submit_button_text }}
            </open-form-button>
@ -123,7 +123,8 @@ export default {
  props: {
    form: { type: Object, required: true },
    creating: { type: Boolean, default: false }, // If true, fake form submit
-    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
+    submitButtonClass: { type: String, default: '' }
  },

  mixins: [FormPendingSubmissionKey],
--- a/resources/js/components/open/forms/components/FormEditor.vue
+++ b/resources/js/components/open/forms/components/FormEditor.vue
@ -1,54 +1,80 @@
 <template>
-  <div v-if="form" id="form-editor" class="w-full flex flex-grow relative overflow-x-hidden">
-    <!-- Form fields selection -->
-    <div class="w-full md:w-1/2 lg:w-2/5 border-r relative overflow-y-scroll md:max-w-sm flex-shrink-0">
-      <div class="p-4 bg-blue-50 border-b text-nt-blue-dark md:hidden">
-        We suggest you create this form on a device with a larger screen such as computed. That will allow you
-        to preview your form changes.
-      </div>
-      <div class="p-4 pb-0">
-        <a v-if="!isGuest" href="#" @click.prevent="$router.back()" class="flex text-blue mb-2 font-semibold text-sm">
-          <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
-                  stroke-linejoin="round"/>
-          </svg>
-          Go back
-        </a>
-        <template v-if="isEdit">
-          <h3 class="font-semibold text-lg">{{ form.title }}</h3>
-          <small class="text-gray-500">Edited {{ form.last_edited_human }}</small>
-        </template>
+  <div v-if="form" id="form-editor" class="relative flex w-full flex-col grow max-h-screen">
+    <!--  Navbar  -->
+    <div class="w-full border-b p-2 flex items-center justify-between bg-white">
+      <a v-if="backButton" href="#" class="ml-2 flex text-blue font-semibold text-sm"
+         @click.prevent="$router.back()"
+      >
+        <svg class="w-3 h-3 text-blue mt-1 mr-1" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M5 9L1 5L5 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                stroke-linejoin="round"
+          />
+        </svg>
+        Go back
+      </a>
+      <div class="hidden md:flex items-center ml-3">
+        <h3 class="font-semibold text-lg max-w-[14rem] truncate text-gray-500">
+          {{ form.title }}
+        </h3>
      </div>

-      <div class="p-4 border-b sticky top-0 z-10 bg-white">
-        <v-button v-track.save_form_click class="w-full" :loading="updateFormLoading"
-                  @click="saveForm">
-          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      <div class="flex items-center" :class="{'mx-auto md:mx-0':!backButton}">
+        <div class="hidden md:block mr-10 relative">
+          <a href="#"
+             class="text-sm px-3 py-2 hover:bg-gray-50 cursor-pointer rounded-md text-gray-500 px-0 sm:px-3 hover:text-gray-800 cursor-pointer mt-1"
+             @click.prevent="$crisp.push(['do', 'helpdesk:search'])"
+          >
+            Help
+          </a>
+        </div>
+        <v-button v-track.save_form_click size="small" class="w-full px-8 md:px-4 py-2"
+                  :loading="updateFormLoading" :class="saveButtonClass"
+                  @click="saveForm"
+        >
+          <svg class="w-4 h-4 text-white inline mr-1 -mt-1" viewBox="0 0 24 24" fill="none"
+               xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M17 21V13H7V21M7 3V8H15M19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H16L21 8V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21Z"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            />
          </svg>
-
-          Save changes
+          <template v-if="form.visibility === 'public'">
+            Publish Form
+          </template>
+          <template v-else>
+            Save Changes
+          </template>
        </v-button>
      </div>
-
-      <form-information/>
-      <form-structure/>
-      <form-customization/>
-      <form-about-submission/>
-      <form-notifications/>
-      <form-security-privacy/>
-      <form-custom-seo />
-      <form-custom-code/>
-      <form-integrations/>
    </div>

-    <form-editor-preview/>
+    <div class="w-full flex grow overflow-y-scroll">
+      <div class="relative w-full shrink-0 overflow-y-scroll border-r md:w-1/2 md:max-w-sm lg:w-2/5">
+        <div class="border-b bg-blue-50 p-5 text-nt-blue-dark md:hidden">
+          Please create this form on a device with a larger screen. That will allow you to preview your form changes.
+        </div>

-    <!-- Form Error Modal -->
-    <form-error-modal :show="showFormErrorModal"
-                      :validation-error-response="validationErrorResponse"
-                      @close="showFormErrorModal=false"
-    />
+        <form-information/>
+        <form-structure/>
+        <form-customization/>
+        <form-about-submission/>
+        <form-notifications/>
+        <form-security-privacy/>
+        <form-custom-seo />
+        <form-custom-code/>
+        <form-integrations/>
+      </div>
+
+      <form-editor-preview/>
+
+      <!-- Form Error Modal -->
+      <form-error-modal 
+        :show="showFormErrorModal"
+        :validation-error-response="validationErrorResponse"
+        @close="showFormErrorModal=false"
+      />
+    </div>
  </div>
  <div v-else class="flex justify-center items-center">
    <loader class="w-6 h-6"/>
@ -98,6 +124,16 @@ export default {
      type: Boolean,
      default: false
    },
+    backButton: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    saveButtonClass: {
+      required: false,
+      type: String,
+      default: ''
+    }
  },

  data() {
@ -170,6 +206,11 @@ export default {

  mounted() {
    this.$emit('mounted')
+    this.$root.hideNavbar()
+  },
+
+  beforeDestroy () {
+    this.$root.hideNavbar(false)
  },

  methods: {
--- a/resources/js/pages/forms/create-guest.vue
+++ b/resources/js/pages/forms/create-guest.vue
@ -6,11 +6,8 @@
                                @close="showInitialFormModal=false"/>
        <form-editor v-if="!workspacesLoading" ref="editor"
                     class="w-full flex flex-grow"
-                     :style="{
-                       'max-height': editorMaxHeight + 'px'
-                     }" :error="error"
+                     :error="error"
                     :isGuest="isGuest"
-                     @mounted="onResize"
                     @openRegister="openRegister"
        />
        <div v-else class="text-center mt-4 py-6">
@ -61,7 +58,6 @@ export default {
      stateReady: false,
      loading: false,
      error: '',
-      editorMaxHeight: 500,
      registerModal: false,
      isGuest: true,
      showInitialFormModal: false
@ -120,25 +116,13 @@ export default {
    this.stateReady = true
  },

-  created() {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created() {},
+  destroyed() {},

  methods: {
    ...mapActions({
      loadWorkspaces: 'open/workspaces/load'
    }),
-    /**
-     * Compute max height of editor
-     */
-    onResize() {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
-      }
-    },
    openRegister() {
      this.registerModal = true
    },
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@ -6,10 +6,7 @@
                                @close="showInitialFormModal=false"/>
        <form-editor v-if="!workspacesLoading" ref="editor"
                     class="w-full flex flex-grow"
-                     :style="{
-                       'max-height': editorMaxHeight + 'px'
-                     }" :error="error"
-                     @mounted="onResize"
+                     :error="error"
                     @on-save="formInitialHash=null"
        />
        <div v-else class="text-center mt-4 py-6">
@ -64,7 +61,6 @@ export default {
      stateReady: false,
      loading: false,
      error: '',
-      editorMaxHeight: 500,
      showInitialFormModal: false,
      formInitialHash: null
    }
@ -125,25 +121,13 @@ export default {
    this.stateReady = this.user !== null
  },

-  created() {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created() {},
+  destroyed() {},

  methods: {
    ...mapActions({
      loadWorkspaces: 'open/workspaces/loadIfEmpty'
    }),
-    /**
-     * Compute max height of editor
-     */
-    onResize() {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = window.innerHeight - this.$refs.editor.$el.offsetTop
-      }
-    },
    formGenerated(form) {
      this.form = new Form({...this.form.data(), ...form})
    },
--- a/resources/js/pages/forms/edit.vue
+++ b/resources/js/pages/forms/edit.vue
@ -1,11 +1,7 @@
 <template>
  <div class="w-full flex flex-col">
    <form-editor v-if="pageLoaded" ref="editor"
-                 :style="{
-                   'max-height': editorMaxHeight + 'px'
-                 }"
                 :isEdit="true"
-                 @mounted="onResize"
                 @on-save="formInitialHash=null"
    />
    <div v-else-if="!loading && error" class="mt-4 rounded-lg max-w-xl mx-auto p-6 bg-red-100 text-red-500">
@ -61,7 +57,6 @@ export default {
    return {
      loading: false,
      error: null,
-      editorMaxHeight: 500,
      formInitialHash: null
    }
  },
@ -96,12 +91,8 @@ export default {
    }
  },

-  created () {
-    window.addEventListener('resize', this.onResize)
-  },
-  destroyed () {
-    window.removeEventListener('resize', this.onResize)
-  },
+  created () {},
+  destroyed () {},

  mounted () {
    window.onbeforeunload = () => {
@ -120,14 +111,6 @@ export default {
  },
  
  methods: {
-    /**
-     * Compute max height of editor
-     */
-    onResize () {
-      if (this.$refs.editor) {
-        this.editorMaxHeight = Math.max(500, window.innerHeight - this.$refs.editor.$el.offsetTop)
-      }
-    },
    isDirty () {
      return !this.loading && this.formInitialHash && this.formInitialHash !== this.hashString(JSON.stringify(this.updatedForm.data()))
    },