wip

src/registrar/assets/js/get-gov.js

@@ -866,7 +866,7 @@ document.addEventListener('DOMContentLoaded', function() {
                           ${expirationDate ? expirationDate.toLocaleDateString() : ''}
                       </td>
                       <td data-label="Status">
-                          ${domain.status_text}
+                          ${domain.state_display}
                           <svg 
                               class="usa-icon usa-tooltip usa-tooltip--registrar text-middle margin-bottom-05 text-accent-cool no-click-outline-and-cursor-help" 
                               data-position="top"

src/registrar/models/domain.py

@@ -1024,14 +1024,6 @@ class Domain(TimeStampedModel, DomainHelper):
         verbose_name="domain state",
     )
 
-    @property
-    def status_text(self):
-        if self.is_expired and self.state != Domain.State.UNKNOWN:
-            return "Expired"
-        elif self.state == Domain.State.UNKNOWN or self.state == Domain.State.DNS_NEEDED:
-            return "DNS needed"
-        else:
-            return self.get_state_display()  # Assuming get_state_display returns the capitalized state name
 
     expiration_date = DateField(
         null=True,
@@ -1071,6 +1063,15 @@ class Domain(TimeStampedModel, DomainHelper):
         now = timezone.now().date()
         return self.expiration_date < now
 
+    def state_display(self):
+        """Return the display status of the domain."""
+        if self.is_expired() and self.state != self.State.UNKNOWN:
+            return 'Expired'
+        elif self.state == self.State.UNKNOWN or self.state == self.State.DNS_NEEDED:
+            return 'DNS needed'
+        else:
+            return self.state.capitalize()
+
     def map_epp_contact_to_public_contact(self, contact: eppInfo.InfoContactResultData, contact_id, contact_type):
         """Maps the Epp contact representation to a PublicContact object.
 

src/registrar/templates/home.html

@@ -32,7 +32,7 @@
         <tr>
           <th data-sortable="name" scope="col" role="columnheader">Domain name</th>
           <th data-sortable="expiration_date" scope="col" role="columnheader">Expires</th>
-          <th data-sortable="status_text" scope="col" role="columnheader">Status</th>
+          <th data-sortable="state_display" scope="col" role="columnheader">Status</th>
           <th 
             scope="col" 
             role="columnheader" 

src/registrar/views/domains_json.py

@@ -18,16 +18,32 @@ def get_domains_json(request):
     sort_by = request.GET.get('sort_by', 'id')  # Default to 'id'
     order = request.GET.get('order', 'asc')  # Default to 'asc'
 
-    if order == 'desc':
+    if sort_by == 'state_display':
-        sort_by = f'-{sort_by}'
+        # Fetch the objects and sort them in Python
-
+        objects = list(objects)  # Evaluate queryset to a list
-    objects = objects.order_by(sort_by)
+        objects.sort(key=lambda domain: domain.state_display(), reverse=(order == 'desc'))
+    else:
+        if order == 'desc':
+            sort_by = f'-{sort_by}'
+        objects = objects.order_by(sort_by)
 
     paginator = Paginator(objects, 2)
     page_number = request.GET.get('page')
     page_obj = paginator.get_page(page_number)
 
-    domains = list(page_obj.object_list.values())  # Convert QuerySet to list of dicts
+    # Convert objects to JSON-serializable format
+    domains = [
+        {
+            'id': domain.id,
+            'name': domain.name,
+            'expiration_date': domain.expiration_date,
+            'state': domain.state,
+            'state_display': domain.state_display(),
+            'get_state_help_text': domain.get_state_help_text(),
+            # Add other fields as necessary
+        }
+        for domain in page_obj.object_list
+    ]
 
     return JsonResponse({
         'domains': domains,