From dd74e70e107b06bcf47a24e6c88415c58974b963 Mon Sep 17 00:00:00 2001
From: Rohan Moniz <60864468+rm03@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:12:35 -0500
Subject: [PATCH] update extension serializer and add frontend

---
 backend/clubs/serializers.py                  | 14 +++--
 .../ClubEditPage/ApplicationsPage.tsx         | 52 ++++++++++++++++++-
 frontend/components/ModelForm.tsx             |  7 ++-
 3 files changed, 63 insertions(+), 10 deletions(-)

diff --git a/backend/clubs/serializers.py b/backend/clubs/serializers.py
index 9cfcfb883..cc564e74d 100644
--- a/backend/clubs/serializers.py
+++ b/backend/clubs/serializers.py
@@ -2428,11 +2428,10 @@ class Meta:
 class ApplicationExtensionSerializer(serializers.ModelSerializer):
     first_name = serializers.CharField(source="user.first_name", read_only=True)
     last_name = serializers.CharField(source="user.last_name", read_only=True)
-    email = serializers.CharField(source="user.email", read_only=True)
+    username = serializers.CharField(source="user.username", read_only=False)
     graduation_year = serializers.CharField(
         source="user.profile.graduation_year", read_only=True
     )
-    username = serializers.CharField(write_only=True)
 
     class Meta:
         model = ApplicationExtension
@@ -2441,7 +2440,6 @@ class Meta:
             "username",
             "first_name",
             "last_name",
-            "email",
             "graduation_year",
             "end_time",
         )
@@ -2450,10 +2448,10 @@ def validate_username(self, value):
         user = get_user_model().objects.filter(username=value).first()
         if not user:
             raise serializers.ValidationError("Please provide a valid username!")
-        return user
+        return value
 
     def create(self, validated_data):
-        username = validated_data.pop("username")
+        username = validated_data.get("user").pop("username")
         validated_data["user"] = get_user_model().objects.get(username=username)
 
         application_pk = self.context["view"].kwargs.get("application_pk")
@@ -2464,11 +2462,11 @@ def create(self, validated_data):
         return super().create(validated_data)
 
     def update(self, instance, validated_data):
-        if "username" in validated_data:
-            username = validated_data.pop("username")
+        user_field = validated_data.pop("user", None)
+        if user_field:
+            username = user_field.pop("username")
             user = get_user_model().objects.get(username=username)
             instance.user = user
-
         return super().update(instance, validated_data)
 
 
diff --git a/frontend/components/ClubEditPage/ApplicationsPage.tsx b/frontend/components/ClubEditPage/ApplicationsPage.tsx
index a364e964b..ea51b487f 100644
--- a/frontend/components/ClubEditPage/ApplicationsPage.tsx
+++ b/frontend/components/ClubEditPage/ApplicationsPage.tsx
@@ -22,7 +22,13 @@ import { doApiRequest, getApiUrl, getSemesterFromDate } from '~/utils'
 import { Checkbox, Loading, Modal, Text } from '../common'
 import { Icon } from '../common/Icon'
 import Table from '../common/Table'
-import { CheckboxField, SelectField, TextField } from '../FormComponents'
+import {
+  CheckboxField,
+  DateTimeField,
+  SelectField,
+  TextField,
+} from '../FormComponents'
+import ModelForm from '../ModelForm'
 
 const StyledHeader = styled.div.attrs({ className: 'is-clearfix' })`
   margin-bottom: 20px;
@@ -476,6 +482,14 @@ export default function ApplicationsPage({
     { label: 'Graduation Year', name: 'graduation_year' },
   ]
 
+  const extensionTableFields = [
+    { label: 'First Name', name: 'first_name' },
+    { label: 'Last Name', name: 'last_name' },
+    { label: 'Username', name: 'username' },
+    { label: 'Graduation Year', name: 'graduation_year' },
+    { label: 'Extension End Time', name: 'end_time' },
+  ]
+
   const columns = useMemo(
     () =>
       responseTableFields.map(({ label, name }) => ({
@@ -784,6 +798,42 @@ export default function ApplicationsPage({
             </a>
           </div>
         )}
+      <br></br>
+      <div>
+        {currentApplication != null ? (
+          <>
+            <StyledHeader style={{ marginBottom: '2px' }}>
+              Extensions
+            </StyledHeader>
+            <ModelForm
+              key={currentApplication.id}
+              baseUrl={`/clubs/${club.code}/applications/${currentApplication.id}/extensions/`}
+              fields={
+                <>
+                  <Field
+                    name="username"
+                    as={TextField}
+                    required={true}
+                    helpText="The username (PennKey) of the applicant to be granted an extension."
+                  />
+                  <Field
+                    name="end_time"
+                    as={DateTimeField}
+                    required={true}
+                    helpText="The extended end time for this applicant's application."
+                  />
+                </>
+              }
+              tableFields={extensionTableFields}
+              confirmDeletion
+              searchableColumns={['username']}
+              noun="Extension"
+            />
+          </>
+        ) : (
+          <Loading />
+        )}
+      </div>
       {showModal && (
         <Modal
           show={showModal}
diff --git a/frontend/components/ModelForm.tsx b/frontend/components/ModelForm.tsx
index 48f3a61b4..8b55ae052 100644
--- a/frontend/components/ModelForm.tsx
+++ b/frontend/components/ModelForm.tsx
@@ -73,6 +73,7 @@ type ModelFormProps = {
   empty?: ReactElement | string
   fields: any
   tableFields?: TableField[]
+  searchableColumns?: string[]
   filterOptions?: FilterOption[]
   currentTitle?: (object: ModelObject) => ReactElement | string
   noun?: string
@@ -112,6 +113,7 @@ type ModelTableProps = {
   tableFields: TableField[]
   filterOptions?: FilterOption[]
   objects: ModelObject[]
+  searchableColumns?: string[]
   allowEditing?: boolean
   allowDeletion?: boolean
   confirmDeletion?: boolean
@@ -131,6 +133,7 @@ export const ModelTable = ({
   tableFields,
   filterOptions,
   objects,
+  searchableColumns,
   allowEditing = false,
   allowDeletion = false,
   confirmDeletion = false,
@@ -216,7 +219,7 @@ export const ModelTable = ({
       <Table
         data={objects}
         columns={tableFields}
-        searchableColumns={['name']}
+        searchableColumns={searchableColumns || ['name']}
         filterOptions={filterOptions || []}
         draggable={draggable}
         onDragEnd={onDragEnd}
@@ -258,6 +261,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
     fields,
     tableFields,
     filterOptions,
+    searchableColumns,
     onUpdate,
     currentTitle,
     noun = 'Object',
@@ -466,6 +470,7 @@ export const ModelForm = (props: ModelFormProps): ReactElement => {
           noun={noun}
           tableFields={tableFields}
           filterOptions={filterOptions}
+          searchableColumns={searchableColumns}
           objects={objects}
           allowDeletion={allowDeletion}
           confirmDeletion={confirmDeletion}