Merge branch 'main' into new-ui

resources/js/pages/forms/create.vue

@@ -171,6 +171,7 @@ export default {
       this.form = new Form({
         title: 'My Form',
         description: null,
+        visibility: 'public',
         workspace_id: this.workspace?.id,
         properties: [],
 

resources/js/pages/forms/show-public.vue

@@ -11,7 +11,7 @@
       >
         <img alt="Logo Picture" :src="form.logo_picture"
              :class="{'top-5':!form.cover_picture, '-top-10':form.cover_picture}"
-             class="w-20 h-20 absolute left-5 transition-all"
+             class="w-20 h-20 object-contain absolute left-5 transition-all"
         >
       </div>
     </div>

resources/js/pages/forms/show.vue

@@ -5,6 +5,7 @@
       <div v-if="form" class="sm:px-6">
         <h2 class="text-nt-blue text-3xl font-bold z-10 mt-6 mb-3">
           {{ form.title }}
+          <span v-if="form.visibility=='draft'" class="float-right text-white p-2 text-xs inline rounded-lg font-semibold mr-2 bg-gray-400 dark:bg-gray-700">Draft (not public)</span>
         </h2>
 
         <p class="mb-3">
@@ -305,7 +306,7 @@ import FormSubmissions from '../../components/open/forms/components/FormSubmissi
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }
 

resources/js/pages/home.vue

@@ -10,13 +10,11 @@
             Create a new form
           </v-button>
         </div>
-        <div v-if="formsLoading" class="text-center">
-          <loader class="h-6 w-6 text-nt-blue mx-auto" />
-        </div>
-        <p v-else-if="enrichedForms.length === 0 && !isFilteringForms">
+
+        <p v-if="!formsLoading && enrichedForms.length === 0 && !isFilteringForms">
           You don't have any form yet.
         </p>
-        <div v-else class="mb-10">
+        <div v-else-if="forms.length > 0" class="mb-10">
           <text-input v-if="forms.length > 5" class="mb-6" :form="searchForm" name="search" label="Search a form"
                       placeholder="Name of form to search"
           />
@@ -31,7 +29,8 @@
           </div>
           <div v-if="enrichedForms && enrichedForms.length" class="border border border-gray-300 dark:bg-notion-dark-light rounded-md w-full">
             <div v-for="(form, index) in enrichedForms" :key="form.id"
-                 class="p-4 w-full mx-auto border-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer relative" :class="{'border-t':index!==0}"
+                 class="p-4 w-full mx-auto border-gray-300 hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors cursor-pointer relative" 
+                 :class="{'border-t':index!==0, 'bg-gray-50 dark:bg-gray-400':form.visibility=='draft'}"
             >
               <div class="items-center space-x-4 truncate">
                 <p class="truncate float-left">
@@ -65,6 +64,9 @@
             </template>.
           </p>
         </div>
+        <div v-if="formsLoading" class="text-center">
+          <loader class="h-6 w-6 text-nt-blue mx-auto" />
+        </div>
       </div>
     </div>
     <open-form-footer class="mt-8 border-t" />
@@ -82,7 +84,7 @@ import OpenFormFooter from '../components/pages/OpenFormFooter'
 const loadForms = function () {
   store.commit('open/forms/startLoading')
   store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
   })
 }