feat: adding max length indicator and description fields to forms

adocasts · Dec 24, 2024 · 66edad6 · 66edad6
1 parent 50cb245
commit 66edad6
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 12 deletions.
diff --git a/app/controllers/taxonomies_controller.ts b/app/controllers/taxonomies_controller.ts
@@ -40,10 +40,7 @@ export default class TaxonomiesController {
 
     const { parentId } = await request.validateUsing(taxonomyCreateValidator)
     const parent = parentId ? await Taxonomy.findOrFail(parentId) : null
-    console.log({
-      parentId,
-      parent,
-    })
+
     return inertia.render('taxonomies/form', {
       parent: parent ? new TaxonomyDto(parent) : null,
     })

diff --git a/app/enums/video_types.ts b/app/enums/video_types.ts
@@ -2,12 +2,21 @@ enum VideoTypes {
   YOUTUBE = 1,
   BUNNY = 2,
   NONE = 3,
+  R2 = 4,
 }
 
+export const VideoTypesOrdered: VideoTypes[] = [
+  VideoTypes.YOUTUBE,
+  VideoTypes.BUNNY,
+  VideoTypes.R2,
+  VideoTypes.NONE,
+]
+
 export const VideoTypeDesc: Record<VideoTypes, string> = {
   [VideoTypes.YOUTUBE]: 'YouTube',
   [VideoTypes.BUNNY]: 'Bunny Stream',
   [VideoTypes.NONE]: 'No Video',
+  [VideoTypes.R2]: 'Cloudflare R2',
 }
 
 export default VideoTypes
diff --git a/inertia/components/FormInput.vue b/inertia/components/FormInput.vue
@@ -83,9 +83,10 @@ defineExpose({ inputEl })
       />
     </Label>
     <div class="flex items-center justify-between gap-3">
-      <div v-show="error" class="flex-1 text-red-500 text-xs">
+      <div v-if="error" class="flex-1 text-red-500 text-xs">
         {{ error }}
       </div>
+      <div v-else></div>
       <div v-if="typeof internalValue === 'string' && max" class="text-slate-500 text-xs">
         {{ internalValue.length }} / {{ max }}
       </div>

diff --git a/inertia/pages/collections/form.vue b/inertia/pages/collections/form.vue
@@ -98,6 +98,7 @@ function onSubmit(stateId: States = form.stateId) {
         label="Title"
         v-model="form.name"
         :errors="form.errors.name"
+        :max="100"
         placeholder="My Cool Collection"
         required
       />
@@ -106,9 +107,18 @@ function onSubmit(stateId: States = form.stateId) {
         label="Slug"
         v-model="form.slug"
         :errors="form.errors.slug"
+        :max="150"
         placeholder="Will auto generate from title if left empty"
       />
 
+      <FormInput
+        type="textarea"
+        label="Description"
+        v-model="form.description"
+        :errors="form.errors.description"
+        :max="255"
+      />
+
       <Collapsible>
         <CollapsibleTrigger as-child>
           <Button variant="outline" class="w-full flex items-center justify-between">
@@ -122,13 +132,16 @@ function onSubmit(stateId: States = form.stateId) {
               label="Page Title"
               v-model="form.pageTitle"
               :errors="form.errors.pageTitle"
+              :max="100"
               placeholder="Enter a concise SEO friendly page title, uses post title when left empty"
             />
 
             <FormInput
+              type="textarea"
               label="Meta Description"
               v-model="form.metaDescription"
               :errors="form.errors.metaDescription"
+              :max="255"
               placeholder="Enter a concise SEO friendly meta description, uses post description when left empty"
             />
           </div>
@@ -177,6 +190,7 @@ function onSubmit(stateId: States = form.stateId) {
         type="url"
         v-model="form.repositoryUrl"
         :errors="form.errors.repositoryUrl"
+        :max="255"
         placeholder="Have code associated with this collection? Provide the repository URL here"
       />
 
@@ -185,6 +199,7 @@ function onSubmit(stateId: States = form.stateId) {
         type="url"
         v-model="form.youtubePlaylistUrl"
         :errors="form.errors.youtubePlaylistUrl"
+        :max="255"
         placeholder="Have a YouTube playlist for this series? Link it here"
       />
 

diff --git a/inertia/pages/posts/form.vue b/inertia/pages/posts/form.vue
@@ -4,7 +4,7 @@ import TaxonomyDto from '#dtos/taxonomy'
 import PaywallTypes, { PaywallTypeDesc } from '#enums/paywall_types'
 import PostTypes, { PostTypeDesc } from '#enums/post_types'
 import States from '#enums/states'
-import VideoTypes, { VideoTypeDesc } from '#enums/video_types'
+import VideoTypes, { VideoTypeDesc, VideoTypesOrdered } from '#enums/video_types'
 import { useForm } from '@inertiajs/vue3'
 import { Link } from '@tuyau/inertia/vue'
 import { BookCheck, BookDashed, BookKey, BookLock, ChevronsUpDown } from 'lucide-vue-next'
@@ -124,6 +124,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
         label="Title"
         v-model="form.title"
         :errors="form.errors.title"
+        :max="100"
         placeholder="My Cool Post"
         required
       />
@@ -132,9 +133,18 @@ function onSubmit(stateId: States = Number(form.stateId)) {
         label="Slug"
         v-model="form.slug"
         :errors="form.errors.slug"
+        :max="255"
         placeholder="Will auto generate from title if left empty"
       />
 
+      <FormInput
+        type="textarea"
+        label="Description"
+        v-model="form.description"
+        :error="form.errors.description"
+        :max="255"
+      />
+
       <Collapsible>
         <CollapsibleTrigger as-child>
           <Button variant="outline" class="w-full flex items-center justify-between">
@@ -148,13 +158,16 @@ function onSubmit(stateId: States = Number(form.stateId)) {
               label="Page Title"
               v-model="form.pageTitle"
               :errors="form.errors.pageTitle"
+              :max="100"
               placeholder="Enter a concise SEO friendly page title, uses post title when left empty"
             />
 
             <FormInput
               label="Meta Description"
+              type="textarea"
               v-model="form.metaDescription"
               :errors="form.errors.metaDescription"
+              :max="255"
               placeholder="Enter a concise SEO friendly meta description, uses post description when left empty"
             />
 
@@ -163,6 +176,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
               type="url"
               v-model="form.canonical"
               :errors="form.errors.canonical"
+              :max="255"
               placeholder="Cross-posting from another site? Link the original here"
             />
           </div>
@@ -212,6 +226,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
         type="url"
         v-model="form.repositoryUrl"
         :errors="form.errors.repositoryUrl"
+        :max="255"
         placeholder="Have code associated with this post? Provide the repository URL here"
       />
 
@@ -254,12 +269,8 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             placeholder="Have a video? Where is it stored?"
             :errors="form.errors.videoTypeId"
           >
-            <SelectItem
-              v-for="name in enumKeys(VideoTypes)"
-              :key="name"
-              :value="VideoTypes[name].toString()"
-            >
-              {{ VideoTypeDesc[VideoTypes[name]] }}
+            <SelectItem v-for="id in VideoTypesOrdered" :key="id" :value="id.toString()">
+              {{ VideoTypeDesc[id] }}
             </SelectItem>
           </FormInput>
 
@@ -269,6 +280,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             type="url"
             v-model="form.videoUrl"
             :errors="form.errors.videoUrl"
+            :max="255"
             placeholder="Enter the YouTube Video URL"
           />
 
@@ -277,6 +289,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             label="Bunny Video Id"
             v-model="form.videoBunnyId"
             :errors="form.errors.videoBunnyId"
+            :max="500"
             placeholder="Enter the Bunny Stream Video Id"
           />
 

diff --git a/inertia/pages/taxonomies/form.vue b/inertia/pages/taxonomies/form.vue
@@ -110,6 +110,7 @@ function onSubmit() {
         label="Name"
         v-model="form.name"
         :errors="form.errors.name"
+        :max="100"
         placeholder="My Cool Taxonomy"
         required
       />
@@ -118,9 +119,18 @@ function onSubmit() {
         label="Slug"
         v-model="form.slug"
         :errors="form.errors.slug"
+        :max="150"
         placeholder="Will auto generate from title if left empty"
       />
 
+      <FormInput
+        type="textarea"
+        label="Description"
+        v-model="form.description"
+        :errors="form.errors.description"
+        :max="255"
+      />
+
       <Collapsible>
         <CollapsibleTrigger as-child>
           <Button variant="outline" class="w-full flex items-center justify-between">
@@ -134,13 +144,16 @@ function onSubmit() {
               label="Page Title"
               v-model="form.pageTitle"
               :errors="form.errors.pageTitle"
+              :max="100"
               placeholder="Enter a concise SEO friendly page title, uses post title when left empty"
             />
 
             <FormInput
+              type="textarea"
               label="Meta Description"
               v-model="form.metaDescription"
               :errors="form.errors.metaDescription"
+              :max="255"
               placeholder="Enter a concise SEO friendly meta description, uses post description when left empty"
             />
           </div>