New feature visibility - public/draft (#10)

* New feature visibility - public/draft

* fix bg for dark mode

resources/js/components/open/forms/components/form-components/FormInformation.vue

@@ -27,6 +27,11 @@
                 placeholder="Select Tag(s)" :multiple="true" :allowCreation="true"
                 :options="allTagsOptions"
     />
+    <select-input name="visibility" label="Visibility" :form="form" class="mt-3 mb-6"
+                help="Only public form will be accessible"
+                placeholder="Select Visibility" :required="true"
+                :options="visibilityOptions"
+    />
     <button
       v-if="copyFormOptions.length > 0"
       class="group mt-3 cursor-pointer relative w-full rounded-lg border-transparent flex-1 appearance-none border border-gray-300 dark:border-gray-600 w-full py-2 px-4 bg-white text-gray-700 dark:bg-notion-dark-light dark:text-gray-300 dark:placeholder-gray-500 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:border-transparent focus:ring-opacity-100"
@@ -86,7 +91,17 @@ export default {
   data () {
     return {
       showCopyFormSettingsModal: false,
-      copyFormId: null
+      copyFormId: null,
+      visibilityOptions: [
+        {
+          name: "Public",
+          value: "public"
+        },
+        {
+          name: "Draft (form won't be accessible)",
+          value: "draft"
+        }
+      ]
     }
   },
 

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.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">

resources/js/pages/home.vue

@@ -31,7 +31,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">