frontend/src/index.css

@@ -72,6 +72,10 @@ textarea:disabled {
   @apply dark:bg-slate-700 dark:text-slate-400;
 }
 
+.errorlist {
+  @apply mt-4 mb-1 pl-3 py-2 bg-red-600 text-slate-200 w-[300px];
+}
+
 @media screen and (min-width: 768px) {
   form input,
   select,

games/forms.py

@@ -77,7 +77,10 @@ class PurchaseForm(forms.ModelForm):
     )
     platform = forms.ModelChoiceField(queryset=Platform.objects.order_by("name"))
     related_purchase = forms.ModelChoiceField(
-        queryset=Purchase.objects.order_by("edition__sort_name")
+        queryset=Purchase.objects.filter(type=Purchase.GAME).order_by(
+            "edition__sort_name"
+        ),
+        required=False,
     )
 
     class Meta:

games/models.py

@@ -2,6 +2,7 @@ from datetime import timedelta
 
 from django.core.exceptions import ValidationError
 from django.db import models
+from django.core.exceptions import ValidationError
 from django.db.models import F, Manager, Sum
 from django.utils import timezone
 
@@ -118,9 +119,7 @@ class Purchase(models.Model):
         max_length=2, choices=OWNERSHIP_TYPES, default=DIGITAL
     )
     type = models.CharField(max_length=255, choices=TYPES, default=GAME)
-    name = models.CharField(
+    name = models.CharField(max_length=255, default="", null=True, blank=True)
-        max_length=255, default="Unknown Name", null=True, blank=True
-    )
     related_purchase = models.ForeignKey(
         "Purchase", on_delete=models.SET_NULL, default=None, null=True, blank=True
     )
@@ -137,6 +136,10 @@ class Purchase(models.Model):
     def save(self, *args, **kwargs):
         if self.type == Purchase.GAME:
             self.name = ""
+        elif self.type != Purchase.GAME and not self.related_purchase:
+            raise ValidationError(
+                f"{self.get_type_display()} must have a related purchase."
+            )
         super().save(*args, **kwargs)
 
 

games/static/base.css

@@ -1157,6 +1157,19 @@ textarea:disabled) {
   color: rgb(148 163 184 / var(--tw-text-opacity));
 }
 
+.errorlist {
+  margin-top: 1rem;
+  margin-bottom: 0.25rem;
+  width: 300px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
 @media screen and (min-width: 768px) {
   form input,
   select,