feat: allow collections to have optional fields

internal/models/field_types.go

@@ -34,6 +34,7 @@ func IsValidFieldType(fieldType string) bool {
 }
 
 type Field struct {
-	Name string    `json:"name"`
-	Type FieldType `json:"type"`
+	Name     string    `json:"name"`
+	Type     FieldType `json:"type"`
+	Optional bool      `json:"optional,omitempty"`
 }

ui/src/components/modals/CreateCollectionModal.tsx

@@ -15,6 +15,7 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
   const [fields, setFields] = useState<Field[]>([]);
   const [newFieldName, setNewFieldName] = useState("");
   const [newFieldType, setNewFieldType] = useState<FieldType>(FieldType.STRING);
+  const [newFieldOptional, setNewFieldOptional] = useState<boolean>(false)
   const [error, setError] = useState<string | null>(null);
   const [fieldsError, setFieldsError] = useState<string | null>(null);
   const { request, loading } = useApi();
@@ -30,6 +31,10 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
     setNewFieldName(e.target.value);
   };
 
+  const handleNewOptionalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewFieldOptional(e.target.checked)
+  }
+
   const addField = () => {
     if (newFieldName.trim() === "") {
       setFieldsError("Field name cannot be empty.");
@@ -48,6 +53,7 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
       {
         name: newFieldName.trim().toLowerCase(),
         type: newFieldType,
+        optional: newFieldOptional
       },
     ]);
     setNewFieldName("");
@@ -120,7 +126,7 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
           {fields.map((field, index) => (
             <div key={index} className="flex items-center mb-2">
               <p className="mr-2">
-                {field.name} ({field.type})
+                {field.name} ({field.type}{field.optional && ', optional'})
               </p>
               <button
                 className="btn btn-sm btn-error btn-outline"
@@ -153,6 +159,16 @@ const CreateCollectionModal: React.FC<CreateCollectionModalProps> = ({
               Add Field
             </button>
           </div>
+          <label className="label justify-start gap-2">
+            <input
+              id="field-optional"
+              type="checkbox"
+              className="checkbox"
+              checked={newFieldOptional}
+              onChange={handleNewOptionalChange}
+            />
+            Optional
+          </label>
         </div>
         {fieldsError && <p className="text-red-500 mt-2">{fieldsError}</p>}
         <div className="modal-action">

ui/src/components/modals/CreateEntryModal.tsx

@@ -48,13 +48,13 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
   const handleSubmit = async () => {
     console.log("fields", fields);
 
-    const hasEmptyFields = fields.some(
-      (field) => formState[field.name].trim() === "",
+    const hasRequiredFields = fields.some(
+      (field) => !field.optional && formState[field.name].trim() === "",
     );
 
-    console.log("hasEmptyFields", hasEmptyFields);
+    console.log("hasEmptyFields", hasRequiredFields);
 
-    if (hasEmptyFields) {
+    if (hasRequiredFields) {
       setError("All fields are required.");
       return;
     }
@@ -64,8 +64,10 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
       // Prepare data with types
       const dataWithTypes = fields.reduce(
         (acc, field) => {
+          let value = formState[field.name]
+          if (field.optional && value.trim() === "") value = null
           acc[field.name] = {
-            value: formState[field.name],
+            value,
             type: field.type,
           };
           return acc;
@@ -101,7 +103,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       case FieldType.STRING:
@@ -113,7 +115,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       case FieldType.TEXT:
@@ -124,7 +126,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="textarea textarea-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       case FieldType.NUMBER:
@@ -136,7 +138,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       case FieldType.BOOLEAN:
@@ -147,7 +149,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="select select-bordered w-full"
-            required
+            required={!field.optional}
           >
             <option disabled selected>
               Select an option
@@ -165,7 +167,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       case FieldType.IMAGE:
@@ -177,7 +179,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
       default:
@@ -189,7 +191,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
             value={formState[field.name]}
             onChange={handleInputChange}
             className="input input-bordered w-full"
-            required
+            required={!field.optional}
           />
         );
     }
@@ -207,7 +209,7 @@ const CreateEntryModal: React.FC<CreateEntryModalProps> = ({
                 className="block text-sm font-medium text-gray-700 mb-2"
                 htmlFor={field.name}
               >
-                {field.name} ({field.type})
+                {field.name} ({field.type}{field.optional && ', optional'})
               </label>
               {renderFieldInput(field)}
             </div>

ui/src/pages/collections/Detail.tsx

@@ -139,7 +139,7 @@ const CollectionDetailsPage: React.FC = () => {
                 <h3 className="text-display text-base font-medium text-base-content mb-1">
                   {field.name}
                 </h3>
-                <p className="badge-bare">{field.type}</p>
+                <p className="badge-bare">{field.type}{field.optional && ', optional'}</p>
               </div>
             ))}
           </div>

ui/src/types/fields.ts

@@ -15,4 +15,5 @@ export const VALID_FIELD_TYPES = Object.values(FieldType);
 export interface Field {
   name: string;
   type: FieldType;
-}
+  optional?: boolean;
+}