Allow users to create private form templates (#210)

* Allow users to create private form templates * Improve back-end efficiency --------- Co-authored-by: Julien Nahum <[email protected]>
JhumanJ · Oct 13, 2023 · 82d7be3 · 82d7be3
1 parent f0939f3
commit 82d7be3
Show file tree

Hide file tree

Showing 15 changed files with 307 additions and 145 deletions.
diff --git a/app/Http/Controllers/TemplateController.php b/app/Http/Controllers/TemplateController.php
@@ -7,6 +7,7 @@
 use App\Http\Resources\FormTemplateResource;
 use App\Models\Template;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
 
 class TemplateController extends Controller
 {
@@ -16,12 +17,16 @@ public function index(Request $request)
         if ($request->offsetExists('limit') && $request->get('limit') > 0) {
             $limit = (int) $request->get('limit');
         }
-        return FormTemplateResource::collection(
-            Template::where('publicly_listed', true)
-                ->orderByDesc('created_at')
-                ->limit($limit)
-                ->get()
-        );
+
+        $templates = Template::where('publicly_listed', true)
+            ->when(Auth::check(), function ($query) {
+                $query->orWhere('creator_id', Auth::id());
+            })
+            ->orderByDesc('created_at')
+            ->limit($limit)
+            ->get();
+
+        return FormTemplateResource::collection($templates);
     }
 
     public function create(FormTemplateRequest $request)
@@ -34,7 +39,8 @@ public function create(FormTemplateRequest $request)
 
         return $this->success([
             'message' => 'Template was created.',
-            'template_id' => $template->id
+            'template_id' => $template->id,
+            'data' => new FormTemplateResource($template)
         ]);
     }
 

diff --git a/app/Http/Requests/Templates/FormTemplateRequest.php b/app/Http/Requests/Templates/FormTemplateRequest.php
@@ -77,6 +77,7 @@ public function getTemplate(): Template
         }
 
         return new Template([
+            'creator_id' => $this->user()?->id ?? null,
             'publicly_listed' => $this->publicly_listed,
             'name' => $this->name,
             'slug' => $this->slug,

diff --git a/app/Models/Template.php b/app/Models/Template.php
@@ -14,6 +14,7 @@ class Template extends Model
     use HasFactory, HasSlug;
 
     protected $fillable = [
+        'creator_id',
         'name',
         'slug',
         'description',
@@ -41,6 +42,15 @@ class Template extends Model
         'publicly_listed' => false,
     ];
 
+    protected $appends = [
+        'share_url',
+    ];
+
+    public function getShareUrlAttribute()
+    {
+        return url('/form-templates/'.$this->slug);
+    }
+
     public function setDescriptionAttribute($value)
     {
         // Strip out unwanted html

diff --git a/app/Models/User.php b/app/Models/User.php
@@ -4,6 +4,7 @@
 
 use App\Http\Controllers\SubscriptionController;
 use App\Models\Forms\Form;
+use App\Models\Template;
 use App\Notifications\ResetPassword;
 use App\Notifications\VerifyEmail;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -140,6 +141,11 @@ public function forms()
         return $this->hasMany(Form::class,'creator_id');
     }
 
+    public function formTemplates()
+    {
+        return $this->hasMany(Template::class, 'creator_id');
+    }
+
     /**
      * =================================
      *  Oauth Related

diff --git a/app/Policies/TemplatePolicy.php b/app/Policies/TemplatePolicy.php
@@ -18,7 +18,7 @@ class TemplatePolicy
      */
     public function create(User $user)
     {
-        return $user->admin || $user->template_editor;
+        return $user !== null;
     }
 
     /**
@@ -30,7 +30,7 @@ public function create(User $user)
      */
     public function update(User $user, Template $template)
     {
-        return $user->admin || $user->template_editor;
+        return $user->admin || $user->template_editor || $template->creator_id === $user->id;
     }
 
     /**
@@ -42,6 +42,6 @@ public function update(User $user, Template $template)
      */
     public function delete(User $user, Template $template)
     {
-        return $user->admin || $user->template_editor;
+        return $user->admin || $user->template_editor || $template->creator_id === $user->id;
     }
 }
diff --git a/database/migrations/2023_09_21_092812_add_creator_id_to_templates.php b/database/migrations/2023_09_21_092812_add_creator_id_to_templates.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('templates', function (Blueprint $table) {
+            $table->foreignIdFor(\App\Models\User::class,'creator_id')->nullable();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('templates', function (Blueprint $table) {
+            $table->dropColumn('creator_id');
+        });
+    }
+};
diff --git a/resources/js/components/Navbar.vue b/resources/js/components/Navbar.vue
@@ -68,6 +68,15 @@
                     My Forms
                   </router-link>
 
+                  <router-link v-if="userOnboarded" :to="{ name: 'my_templates' }"
+                               class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                    </svg>
+                    My Templates
+                  </router-link>
+
                   <router-link :to="{ name: 'settings.profile' }"
                                class="block block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                   >

diff --git a/resources/js/components/open/forms/components/templates/FormTemplateModal.vue b/resources/js/components/open/forms/components/templates/FormTemplateModal.vue
@@ -18,13 +18,13 @@
     </template>
     <div class="p-4">
       <p v-if="!template">
-        New template will be create from your form <span class="font-semibold">{{ form.title }}</span>.
+        New template will be create from your form: <span class="font-semibold">{{ form.title }}</span>.
       </p>
 
       <form v-if="templateForm" class="mt-6" @submit.prevent="onSubmit" @keydown="templateForm.onKeydown($event)">
         <div class="-m-6">
           <div class="border-t py-4 px-6">
-            <toggle-switch-input name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
+            <toggle-switch-input v-if="user && (user.admin || user.template_editor)" name="publicly_listed" :form="templateForm" class="mt-4" label="Publicly Listed?" />
             <text-input name="name" :form="templateForm" class="mt-4" label="Title" :required="true" />
             <text-input name="slug" :form="templateForm" class="mt-4" label="Slug" :required="true" />
             <text-area-input name="short_description" :form="templateForm" class="mt-4" label="Short Description"
@@ -74,7 +74,7 @@
 <script>
 import Form from 'vform'
 import store from '~/store'
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
 import axios from 'axios'
 import QuestionsEditor from './QuestionsEditor.vue'
 
@@ -93,7 +93,7 @@ export default {
 
   mounted () {
     this.templateForm = new Form(this.template ?? {
-      publicly_listed: true,
+      publicly_listed: false,
       name: '',
       slug: '',
       short_description: '',
@@ -113,6 +113,9 @@ export default {
       industries: state => state['open/templates'].industries,
       types: state => state['open/templates'].types
     }),
+    ...mapGetters({
+      user: 'auth/user'
+    }),
     typesOptions () {
       return Object.values(this.types).map((type) => {
         return {
@@ -153,6 +156,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
+        this.$store.commit('open/templates/addOrUpdate', response.data.data)
         this.$emit('close')
       })
     },
@@ -162,7 +166,7 @@ export default {
         if (response.data.message) {
           this.alertSuccess(response.data.message)
         }
-        this.$store.dispatch('open/templates/addOrUpdate', response.data.data)
+        this.$store.commit('open/templates/addOrUpdate', response.data.data)
         this.$emit('close')
       })
     },
@@ -173,7 +177,7 @@ export default {
           this.alertSuccess(response.data.message)
         }
         this.$router.push({ name: 'templates' })
-        this.$store.dispatch('open/templates/remove', response.data.data)
+        this.$store.commit('open/templates/remove', this.template)
         this.$emit('close')
       })
     }

diff --git a/resources/js/components/pages/forms/show/ExtraMenu.vue b/resources/js/components/pages/forms/show/ExtraMenu.vue
@@ -20,7 +20,7 @@
           </svg>
         </v-button>
       </template>
-      <router-link v-if="isMainPage" :to="{name:'forms.show_public', params: {slug: form.slug}}" target="_blank"
+      <router-link v-if="isMainPage && user" :to="{name:'forms.show_public', params: {slug: form.slug}}" target="_blank"
                     class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
                     v-track.view_form_click="{form_id:form.id, form_slug:form.slug}"
         >
@@ -67,7 +67,7 @@
         </svg>
         Duplicate form
       </a>
-      <a href="#" v-if="user && user.template_editor"
+      <a href="#" v-if="!isMainPage" v-track.create_template_click="{form_id:form.id, form_slug:form.slug}"
          class="block block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
          @click.prevent="showFormTemplateModal=true"
       >
@@ -117,7 +117,7 @@
       </div>
     </modal>
 
-    <form-template-modal :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false"/>
+    <form-template-modal v-if="!isMainPage && user" :form="form" :show="showFormTemplateModal" @close="showFormTemplateModal=false"/>
   </div>
 </template>
 

diff --git a/resources/js/components/pages/pricing/CheckoutDetailsModal.vue b/resources/js/components/pages/pricing/CheckoutDetailsModal.vue
@@ -44,7 +44,7 @@ export default {
 
   watch: {
     user () {
-      this.form.email = this.user.email
+      this.updateUser()
     },
     show () {
       // Wait for modal to open and focus on first field
@@ -59,13 +59,16 @@ export default {
   },
 
   mounted () {
-    if (this.user) {
-      this.form.name = this.user.name
-      this.form.email = this.user.email
-    }
+    this.updateUser()
   },
 
   methods: {
+    updateUser() {
+      if (this.user) {
+        this.form.name = this.user.name
+        this.form.email = this.user.email
+      }
+    },
     saveDetails () {
       if (this.form.busy) return
       this.form.put('api/subscription/update-customer-details').then(() => {