wip: create field as enum value

PR suggestion

Author: Pascal-Delange

packages/app-builder/public/locales/en/data.json

@@ -17,6 +17,8 @@
   "create_field.description_placeholder": "Field description",
   "create_field.required": "Required",
   "create_field.type": "Type",
+  "create_field.is_enum.title": "This field is an enumerated value",
+  "create_field.is_enum.subtitle": "It takes a limited number of distinct values, like a status code",
   "create_table.title": "Create a new table",
   "create_table.name_placeholder": "Table name",
   "create_table.button_accept": "Create table",
@@ -39,5 +41,7 @@
   "edit_table.button_accept": "Save changes",
   "edit_table.title": "Edit description",
   "empty_description": "No description",
-  "upload_data": "Upload data"
+  "upload_data": "Upload data",
+  "required": "Required",
+  "nullable": "Nullable"
 }

packages/app-builder/src/routes/__builder/data.tsx

@@ -43,8 +43,9 @@ const mapFieldToTableRow = (field: DataModelField) => ({
   id: field.id,
   name: field.name,
   description: field.description,
-  type: field.dataType,
-  required: field.nullable ? 'optional' : 'required',
+  type: field.isEnum ? `${field.dataType} (enum)` : field.dataType,
+  nullable: field.nullable,
+  isEnum: field.isEnum,
 });
 
 const mapLinkToTableRow = (table: TableModel, link: LinksToSingle) => ({
@@ -122,14 +123,19 @@ function TableDetails({
       {
         id: 'type',
         accessorKey: 'type',
-        size: 80,
+        size: 130,
         header: t('data:field_type'),
       },
       {
         id: 'required',
         accessorKey: 'required',
         size: 80,
         header: t('data:field_required'),
+        cell: ({ cell }) => {
+          return cell.row.original.nullable
+            ? t('data:nullable')
+            : t('data:required');
+        },
       },
       {
         id: 'description',

packages/app-builder/src/routes/ressources/data/createField.tsx

@@ -8,11 +8,17 @@ import {
 import { setToastMessage } from '@app-builder/components/MarbleToaster';
 import { isStatusConflictHttpError } from '@app-builder/models';
 import { serverServices } from '@app-builder/services/init.server';
-import { parseFormSafe } from '@app-builder/utils/input-validation';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { type ActionArgs, json } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
-import { Button, HiddenInputs, Input, Modal, Select } from '@ui-design-system';
+import {
+  Button,
+  Checkbox,
+  HiddenInputs,
+  Input,
+  Modal,
+  Select,
+} from '@ui-design-system';
 import { Plus } from '@ui-icons';
 import { type Namespace } from 'i18next';
 import { useEffect, useState } from 'react';
@@ -27,12 +33,13 @@ export const handle = {
 const createFieldFormSchema = z.object({
   name: z
     .string()
-    .nonempty()
+    .min(1)
     .regex(/^[a-zA-Z0-9_]+$/, { message: 'Only alphanumeric and _' }),
   description: z.string(),
   required: z.string(),
   type: z.enum(['String', 'Bool', 'Timestamp', 'Float', 'Int']),
   tableId: z.string(),
+  isEnum: z.boolean(),
 });
 
 const VALUE_TYPES = [
@@ -52,24 +59,27 @@ export async function action({ request }: ActionArgs) {
     failureRedirect: '/login',
   });
 
-  const parsedForm = await parseFormSafe(request, createFieldFormSchema);
-  if (!parsedForm.success) {
-    parsedForm.error.flatten((issue) => issue);
+  const parsedData = createFieldFormSchema.safeParse(await request.json());
+
+  if (!parsedData.success) {
+    parsedData.error.flatten((issue) => issue);
 
     return json({
       success: false as const,
-      values: parsedForm.formData,
-      error: parsedForm.error.format(),
+      values: null,
+      error: parsedData.error.format(),
     });
   }
-  const { name, description, type, required, tableId } = parsedForm.data;
+  const { name, description, type, required, tableId, isEnum } =
+    parsedData.data;
 
   try {
     await apiClient.postDataModelTableField(tableId, {
       name: name,
       description: description,
       type,
       nullable: required === 'optional',
+      is_enum: isEnum,
     });
     return json({
       success: true as const,
@@ -87,15 +97,15 @@ export async function action({ request }: ActionArgs) {
       return json(
         {
           success: false as const,
-          values: parsedForm.data,
+          values: parsedData.data,
           error: error,
         },
         { headers: { 'Set-Cookie': await commitSession(session) } }
       );
     } else {
       return json({
         success: false as const,
-        values: parsedForm.data,
+        values: parsedData.data,
         error: error,
       });
     }
@@ -115,6 +125,7 @@ export function CreateField({ tableId }: { tableId: string }) {
       description: '',
       type: VALUE_TYPES[0].value,
       tableId: tableId,
+      isEnum: false,
     },
   });
   const { control, register, reset } = formMethods;
@@ -137,10 +148,11 @@ export function CreateField({ tableId }: { tableId: string }) {
       <Modal.Content>
         <Form
           control={control}
-          onSubmit={({ formData }) => {
-            fetcher.submit(formData, {
+          onSubmit={({ formDataJson }) => {
+            fetcher.submit(formDataJson, {
               method: 'POST',
               action: '/ressources/data/createField',
+              encType: 'application/json',
             });
           }}
         >
@@ -242,6 +254,28 @@ export function CreateField({ tableId }: { tableId: string }) {
                     )}
                   />
                 </div>
+                <FormField
+                  name="isEnum"
+                  control={control}
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center gap-4">
+                      <FormControl>
+                        <Checkbox
+                          onCheckedChange={(checked) => {
+                            field.onChange(checked);
+                          }}
+                        />
+                      </FormControl>
+                      <FormLabel>
+                        <p>{t('data:create_field.is_enum.title')}</p>
+                        <p className="text-xs">
+                          {t('data:create_field.is_enum.subtitle')}
+                        </p>
+                      </FormLabel>
+                      <FormError />
+                    </FormItem>
+                  )}
+                />
               </div>
               <div className="flex flex-1 flex-row gap-2">
                 <Modal.Close asChild>

packages/marble-api/scripts/openapi.yaml

@@ -1923,6 +1923,8 @@ components:
           enum: [Bool, Int, Float, String, Timestamp]
         nullable:
           type: boolean
+        is_enum:
+          type: boolean
     UpdateTableFieldBody:
       type: object
       properties:

packages/marble-api/src/generated/marble-api.ts

@@ -279,6 +279,7 @@ export type CreateTableFieldBody = {
     description: string;
     "type": "Bool" | "Int" | "Float" | "String" | "Timestamp";
     nullable: boolean;
+    is_enum?: boolean;
 };
 export type UpdateTableFieldBody = {
     description?: string;