fix: prevent source and language name overflow

web-app/django/VIM/apps/instruments/migrations/0012_alter_instrumentname_source_name.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.5 on 2025-12-17 16:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("instruments", "0011_language_html_direction"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="instrumentname",
+            name="source_name",
+            field=models.CharField(
+                help_text="Who or what called the instrument this?", max_length=255
+            ),
+        ),
+    ]

web-app/django/VIM/apps/instruments/models/instrument_name.py

@@ -6,7 +6,7 @@ class InstrumentName(models.Model):
     language = models.ForeignKey("Language", on_delete=models.PROTECT)
     name = models.CharField(max_length=100, blank=False)
     source_name = models.CharField(
-        max_length=50, blank=False, help_text="Who or what called the instrument this?"
+        max_length=255, blank=False, help_text="Who or what called the instrument this?"
     )  # Stand-in for source data; format TBD
     verification_status = models.CharField(
         max_length=50,

web-app/django/VIM/apps/instruments/views/update_umil_db.py

@@ -45,6 +45,7 @@ def add_name(request: HttpRequest) -> JsonResponse:
             },
             status=400,
         )
+
     # Fetch the instrument from the database, if it does not exist return does not exist error
     instrument = get_object_or_404(Instrument, wikidata_id=wikidata_id)
 

web-app/django/VIM/templates/instruments/detail.html

@@ -115,7 +115,7 @@ <h2 class="notranslate">{{ active_instrument_label.name|title }}</h2>
                           </td>
                           <td>
                             <div class="d-flex flex-row justify-content-between align-items-center gap-2 edit-container">
-                              <span class="view-field flex-grow-1">{{ names.label.source_name }}</span>
+                              <span class="view-field flex-grow-1">{{ names.label.source_name|truncatechars:40 }}</span>
                             </div>
                           </td>
                           {% if user.is_authenticated %}
@@ -182,7 +182,7 @@ <h2 class="notranslate">{{ active_instrument_label.name|title }}</h2>
                       <!-- Source -->
                       <div class="mb-1">
                         <div class="fw-bold text-muted small">Source</div>
-                        <span class="view-field">{{ names.label.source_name }}</span>
+                        <span class="view-field">{{ names.label.source_name|truncatechars:50 }}</span>
                       </div>
                       {% if user.is_authenticated %}
                         <!-- Status column -->

web-app/frontend/src/instruments/helpers/AddNameManager.ts

@@ -29,7 +29,7 @@ export class AddNameManager {
       .join('');
 
     row.innerHTML = `
-      <div class="col-md-3 language-input">
+      <div class="col-md-2 language-input">
         <label for="language${index}" class="form-label-sm">Language</label>
         <input list="languages${index}" class="form-control" id="language${index}" name="language[]" placeholder="Type to search" required />
         <datalist id="languages${index}">
@@ -44,7 +44,7 @@ export class AddNameManager {
         <div class="valid-feedback"></div>
         <div class="invalid-feedback"></div>
       </div>
-      <div class="col-md-3 source-input">
+      <div class="col-md-5 source-input">
         <label for="source${index}" class="form-label-sm">Source</label>
         <input type="text" class="form-control" id="source${index}" name="source[]" placeholder="Enter source" required />
         <div class="valid-feedback"></div>

web-app/frontend/src/instruments/helpers/NameValidator.ts

@@ -55,8 +55,14 @@ export class NameValidator {
   /**
    * Validates that the name field is not empty
    */
-  validateNameField(nameInput: string): ValidationResult {
-    if (nameInput.trim() === '') {
+  validateNameField(
+    nameInput: string,
+    minLength = 2,
+    maxLength = 50,
+  ): ValidationResult {
+    const trimmed = nameInput.trim();
+
+    if (trimmed === '') {
       return {
         isValid: false,
         message:
@@ -65,6 +71,22 @@ export class NameValidator {
       };
     }
 
+    if (trimmed.length < minLength) {
+      return {
+        isValid: false,
+        message: `Name must be at least ${minLength} characters long.`,
+        type: 'error',
+      };
+    }
+
+    if (trimmed.length > maxLength) {
+      return {
+        isValid: false,
+        message: `Name cannot exceed ${maxLength} characters.`,
+        type: 'error',
+      };
+    }
+
     return {
       isValid: true,
       message: '',
@@ -75,15 +97,37 @@ export class NameValidator {
   /**
    * Validates that the source field is not empty
    */
-  validateSource(sourceInput: string): ValidationResult {
-    if (sourceInput.trim() === '') {
+  validateSource(
+    sourceInput: string,
+    minLength = 2,
+    maxLength = 255,
+  ): ValidationResult {
+    const trimmed = sourceInput.trim();
+
+    if (trimmed === '') {
       return {
         isValid: false,
         message: 'Please enter the source of this name.',
         type: 'error',
       };
     }
 
+    if (trimmed.length < minLength) {
+      return {
+        isValid: false,
+        message: `Source must be at least ${minLength} characters long.`,
+        type: 'error',
+      };
+    }
+
+    if (trimmed.length > maxLength) {
+      return {
+        isValid: false,
+        message: `Source cannot exceed ${maxLength} characters.`,
+        type: 'error',
+      };
+    }
+
     return {
       isValid: true,
       message: '',