Form focused mode

api/app/Http/Requests/UserFormRequest.php

@@ -29,6 +29,7 @@ public function rules()
             'visibility' => ['required', Rule::in(Form::VISIBILITY)],
 
             // Customization
+            'format' => ['required', Rule::in(Form::FORMATS)],
             'language' => ['required', Rule::in(Form::LANGUAGES)],
             'font_family' => 'string|nullable',
             'theme' => ['required', Rule::in(Form::THEMES)],

api/app/Models/Forms/Form.php

@@ -41,6 +41,8 @@ class Form extends Model implements CachableAttributes
 
     public const VISIBILITY = ['public', 'draft', 'closed'];
 
+    public const FORMATS = ['regular', 'focused'];
+
     public const LANGUAGES = ['en', 'fr', 'hi', 'es', 'ar', 'zh', 'ja'];
 
     protected $fillable = [
@@ -54,6 +56,7 @@ class Form extends Model implements CachableAttributes
         'visibility',
 
         // Customization
+        'format',
         'language',
         'font_family',
         'custom_domain',

api/database/factories/FormFactory.php

@@ -50,6 +50,7 @@ public function definition()
             'title' => $this->faker->text(30),
             'description' => $this->faker->randomHtml(1),
             'visibility' => 'public',
+            'format' => 'regular',
             'language' => 'en',
             'theme' => $this->faker->randomElement(Form::THEMES),
             'size' => $this->faker->randomElement(Form::SIZES),

api/database/migrations/2024_12_04_163142_add_format_to_forms_table.php

@@ -0,0 +1,27 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('format')->default('regular');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('format');
+        });
+    }
+};

client/components/open/editors/FormatChangeModal.vue

@@ -0,0 +1,75 @@
+<template>
+  <modal
+    :show="show && form.format === 'focused' && removeBlocks.length > 0"
+    :compact-header="true"
+    :closeable="false"
+    @close="onCancel"
+  >
+    <template #icon>
+      <Icon
+        name="heroicons:document-text"
+        class="w-10 h-10 text-blue"
+      />
+    </template>
+    <template #title>
+      Format Change
+    </template>
+
+    <div class="p-4">
+      If you change the format, below block(s) will be removed from the form:
+      <ul
+        v-if="removeBlocks.length > 0"
+        class="list-disc ml-4 mt-2"
+      >
+        <li
+          v-for="block in removeBlocks"
+          :key="block.id"
+        >
+          {{ block.name }}
+        </li>
+      </ul>
+
+      <div class="flex justify-end mt-4 px-6">
+        <v-button
+          class="mr-2"
+          @click.prevent="changeFormat"
+        >
+          It's ok
+        </v-button>
+        <v-button
+          color="white"
+          @click.prevent="onCancel"
+        >
+          Cancel
+        </v-button>
+      </div>
+    </div>    
+  </modal>
+</template>
+
+<script setup>
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const emit = defineEmits(['close'])
+const removeTypes = ['nf-page-break','nf-divider','nf-image','nf-code']
+const formStore = useWorkingFormStore()
+const form = computed(() => formStore.content)
+
+const removeBlocks = computed(() => form.value.properties.filter(field => removeTypes.includes(field.type)))
+
+const changeFormat = () => {
+  form.value.properties = form.value.properties.filter(property => !removeTypes.includes(property.type))
+  form.value.format = 'focused'
+  emit('close')
+}
+
+const onCancel = () => {
+  form.value.format = 'regular'
+  emit('close')
+}
+</script>

client/components/open/forms/OpenCompleteForm.vue

@@ -108,7 +108,7 @@
         key="form"
       >
         <open-form
-          v-if="form && !form.is_closed"
+          v-if="form && !form.is_closed && form.format === 'regular'"
           :form="form"
           :loading="loading"
           :fields="form.properties"
@@ -130,6 +130,29 @@
             </open-form-button>
           </template>
         </open-form>
+        <open-form-focused
+          v-else-if="form && !form.is_closed && form.format === 'focused'"
+          :form="form"
+          :loading="loading"
+          :fields="form.properties"
+          :theme="theme"
+          :dark-mode="darkMode"
+          :admin-preview="adminPreview"
+          @submit="submitForm"
+        >
+          <template #submit-btn="{submitForm}">
+            <open-form-button
+              :loading="loading"
+              :theme="theme"
+              :color="form.color"
+              class="mt-2 px-8 mx-1"
+              :class="submitButtonClass"
+              @click.prevent="submitForm"
+            >
+              {{ form.submit_button_text }}
+            </open-form-button>
+          </template>
+        </open-form-focused>  
         <p
           v-if="!form.no_branding"
           class="text-center w-full mt-2"
@@ -202,6 +225,8 @@
 <script>
 import OpenForm from './OpenForm.vue'
 import OpenFormButton from './OpenFormButton.vue'
+import OpenFormFocused from './OpenFormFocused.vue'
+import FormTimer from './FormTimer.vue'
 import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
 import VTransition from '~/components/global/transitions/VTransition.vue'
 import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
@@ -210,7 +235,7 @@ import ThemeBuilder from "~/lib/forms/themes/ThemeBuilder.js"
 import FirstSubmissionModal from '~/components/open/forms/components/FirstSubmissionModal.vue'
 
 export default {
-  components: { VTransition, OpenFormButton, OpenForm, FormCleanings, FirstSubmissionModal },
+  components: { VTransition, OpenFormButton, OpenForm, OpenFormFocused, FormCleanings, FormTimer, FirstSubmissionModal },
 
   props: {
     form: { type: Object, required: true },

client/components/open/forms/OpenForm.vue

@@ -275,6 +275,7 @@ export default {
     previousFieldsPageBreak() {
       if (this.formPageIndex === 0) return null
       const previousFields = this.fieldGroups[this.formPageIndex - 1]
+      if (!previousFields?.length) return null
       const block = previousFields[previousFields.length - 1]
       if (block && block.type === 'nf-page-break') return block
       return null