Add Template Creation Functionality in Admin Panel (#729)

* Add create template functionality in Admin Panel

- Implemented a new endpoint for creating templates in AdminController, utilizing the GenerateTemplate command.
- Added a form in the admin settings Vue component to allow users to input a template description and submit it.
- Enhanced the user experience with loading states and success/error alerts during template creation.

These changes facilitate the generation of new form templates directly from the admin interface, improving usability and functionality.

* Update template prompt validation length in AdminController

- Increased the maximum length of the 'template_prompt' field from 1000 to 4000 characters in the createTemplate method.

This change allows for more extensive template descriptions, enhancing the flexibility of template creation in the admin panel.

* Refactor template generation to use job-based approach

- Migrate template generation logic from the GenerateTemplate command to a new GenerateTemplateJob class for improved separation of concerns and better handling of asynchronous processing.
- Update AdminController to utilize the new job for generating templates, enhancing maintainability and clarity in the codebase.
- Remove unused dependencies and streamline the command's handle method for better performance and readability.

* fix lint

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/settings/admin.vue

@@ -62,6 +62,28 @@
           Fetch User
         </v-button>
       </form>
+
+      <form
+        class="pb-8 max-w-lg"
+        @submit.prevent="createTemplate"
+        @keydown="createTemplateForm.onKeydown($event)"
+      >
+        <text-area-input
+          name="template_prompt"
+          :form="createTemplateForm"
+          label="Template Description"
+          :required="true"
+          help="Describe the template you want to create"
+        />
+        <v-button
+          :loading="templateLoading"
+          type="success"
+          color="blue"
+          class="mt-4 w-full"
+        >
+          Create Template
+        </v-button>
+      </form>
     </template>
 
     <div
@@ -136,7 +158,11 @@ export default {
     fetchUserForm: useForm({
       identifier: ''
     }),
-    loading: false
+    createTemplateForm: useForm({
+      template_prompt: ''
+    }),
+    loading: false,
+    templateLoading: false
   }),
 
   computed: {
@@ -193,6 +219,29 @@ export default {
       } else if (workspaces.some(w => w.plan === 'pro')) {
         this.userPlan = 'pro'
       }
+    },
+    async createTemplate() {
+      if (!this.createTemplateForm.template_prompt) {
+        this.useAlert.error('Template prompt is required.')
+        return  
+      }
+
+      this.templateLoading = true
+      opnFetch(`/moderator/create-template`, {
+        method: 'POST',
+        body: {
+          template_prompt: this.createTemplateForm.template_prompt
+        }
+      }).then((data) => {
+        this.templateLoading = false
+        this.createTemplateForm.reset()
+        this.useAlert.success('Template created.')
+        useRouter().push({ name: 'templates-slug', params: { slug: data.template_slug } })
+      })
+      .catch((error) => {
+        this.templateLoading = false
+        this.useAlert.error(error.data.message)
+      })
     }
   }
 }