feat: changing framework_version to be a little more flexible

Author: tomgobich

app/actions/framework_versions/get_framework_versions.ts

@@ -2,6 +2,6 @@ import FrameworkVersion from '#models/framework_version'
 
 export default class GetFrameworkVersions {
   static async handle() {
-    return await FrameworkVersion.query().orderBy('name')
+    return await FrameworkVersion.query().orderBy('slug')
   }
 }

app/dtos/framework_version.ts

@@ -3,19 +3,24 @@ import { BaseModelDto } from '@adocasts.com/dto/base'
 
 export default class FrameworkVersionDto extends BaseModelDto {
   declare id: number
-  declare name: string
+  declare framework: string
+  declare version: string
   declare slug: string
   declare createdAt: string
   declare updatedAt: string
+  declare name: string
 
   constructor(frameworkVersion?: FrameworkVersion) {
     super()
 
     if (!frameworkVersion) return
     this.id = frameworkVersion.id
-    this.name = frameworkVersion.name
+    this.framework = frameworkVersion.framework
+    this.version = frameworkVersion.version
     this.slug = frameworkVersion.slug
     this.createdAt = frameworkVersion.createdAt?.toISO()!
     this.updatedAt = frameworkVersion.updatedAt?.toISO()!
+
+    this.name = `${frameworkVersion.framework} ${frameworkVersion.version}`
   }
 }

app/models/framework_version.ts

@@ -10,7 +10,10 @@ export default class FrameworkVersion extends AppBaseModel {
   declare id: number
 
   @column()
-  declare name: string
+  declare framework: string
+
+  @column()
+  declare version: string
 
   @column()
   declare slug: string

app/validators/framework_version.ts

@@ -10,7 +10,8 @@ export const frameworkVersionIndexValidator = vine.compile(
 
 export const frameworkVersionValidator = vine.compile(
   vine.object({
-    name: vine.string().trim().maxLength(100),
+    framework: vine.string().trim().maxLength(100),
+    version: vine.string().trim().maxLength(10),
     slug: vine
       .string()
       .trim()

database/migrations/1779553200000_create_framework_versions_table.ts

@@ -6,8 +6,11 @@ export default class extends BaseSchema {
   async up() {
     this.schema.createTable(this.tableName, (table) => {
       table.increments('id')
-      table.string('name', 100).notNullable().unique()
+      table.string('framework', 100).notNullable()
+      table.string('version', 10).notNullable()
       table.string('slug', 100).notNullable().unique()
+      table.integer('sort').nullable()
+      table.boolean('is_active').defaultTo(true)
       table.timestamp('created_at')
       table.timestamp('updated_at')
     })

inertia/pages/framework_versions/form.vue

@@ -10,7 +10,8 @@ const props = defineProps<{
 }>()
 
 const form = useForm({
-  name: props.frameworkVersion?.name ?? '',
+  framework: props.frameworkVersion?.framework ?? '',
+  version: props.frameworkVersion?.version ?? '',
   slug: props.frameworkVersion?.slug ?? '',
 })
 
@@ -41,7 +42,7 @@ function onSubmit() {
         <BreadcrumbSeparator class="hidden md:block" />
         <BreadcrumbItem>
           <BreadcrumbPage>{{
-            frameworkVersion?.id ? `Editing "${frameworkVersion.name}"` : 'New Framework Version'
+            frameworkVersion?.id ? `Editing "${frameworkVersion.framework} ${frameworkVersion.version}"` : 'New Framework Version'
           }}</BreadcrumbPage>
         </BreadcrumbItem>
       </BreadcrumbList>
@@ -60,16 +61,23 @@ function onSubmit() {
       class="flex flex-col gap-4 bg-white shadow-xl p-3 lg:p-6 border border-slate-200 rounded-lg w-full lg:w-3/5"
     >
       <FormInput
-        v-model="form.name"
-        label="Name"
-        placeholder="e.g., Vue 3, React 18, Laravel 10"
-        :error="form.errors.name"
+        v-model="form.framework"
+        label="Framework"
+        placeholder="e.g., AdonisJS, Vue, Inertia"
+        :error="form.errors.framework"
+      />
+
+      <FormInput
+        v-model="form.version"
+        label="Version"
+        placeholder="e.g., 3, 18, 10"
+        :error="form.errors.version"
       />
 
       <FormInput
         v-model="form.slug"
         label="Slug"
-        placeholder="e.g., vue-3, react-18, laravel-10"
+        placeholder="e.g., adonisjs-7, vue-3, inertia-2"
         :error="form.errors.slug"
       />