add frontend comment form for application

frontend/src/Components/ApplicationCommentForm/ApplicationCommentForm.tsx

@@ -0,0 +1,42 @@
+import type React from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Textarea } from '~/Components';
+
+type CommentFormProps = {
+  commentText?: string;
+  handlePost: () => void;
+};
+
+export function ApplicationCommentForm({ commentText, handlePost }: CommentFormProps) {
+  const [comment, setComment] = useState(commentText || '');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const prevCommentRef = useRef(comment);
+
+  // Update state if initialData changes
+  useEffect(() => {
+    setComment(commentText || '');
+  }, [commentText]);
+
+  // Handle blur event
+  const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {
+    // TODO: implement actuall comment logic
+    const newValue = event.target.value;
+
+    // Only update if the value has changed
+    if (newValue !== prevCommentRef.current) {
+      // Update the ref to the current value
+      prevCommentRef.current = newValue;
+
+      // Update state
+      setComment(newValue);
+
+      handlePost();
+    }
+  };
+
+  return (
+    <div>
+      <Textarea ref={textareaRef} value={comment} onChange={(e) => setComment(e.target.value)} onBlur={handleBlur} />
+    </div>
+  );
+}

frontend/src/Components/ApplicationCommentForm/index.ts

@@ -0,0 +1 @@
+export { ApplicationCommentForm } from './ApplicationCommentForm';

frontend/src/Components/RecruitmentApplicantsStatus/RecruitmentApplicantsStatus.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { TimeDisplay, ToolTip } from '~/Components';
+import { ApplicationCommentForm, TimeDisplay, ToolTip } from '~/Components';
 import { Dropdown, type DropdownOption } from '~/Components/Dropdown/Dropdown';
 import { Table } from '~/Components/Table';
 import { Text } from '~/Components/Text/Text';
@@ -57,6 +57,10 @@ export function RecruitmentApplicantsStatus({
   const { t } = useTranslation();
   const navigate = useCustomNavigate();
 
+  const postComment = () => {
+    alert('---TODO--- Comment updated');
+  };
+
   const tableColumns = [
     { content: t(KEY.recruitment_applicant), sortable: true, hideSortButton: false },
     { content: t(KEY.recruitment_priority), sortable: true, hideSortButton: false },
@@ -66,7 +70,7 @@ export function RecruitmentApplicantsStatus({
     { content: t(KEY.recruitment_recruiter_priority), sortable: true, hideSortButton: false },
     { content: t(KEY.recruitment_recruiter_guide), sortable: true, hideSortButton: false },
     { content: t(KEY.recruitment_recruiter_status), sortable: false, hideSortButton: false },
-    { content: t(KEY.recruitment_interview_notes), sortable: false, hideSortButton: true },
+    { content: t(KEY.common_comment), sortable: false, hideSortButton: true },
   ];
 
   function updateApplications(id: string, field: string, value: string | number | undefined) {
@@ -218,6 +222,10 @@ export function RecruitmentApplicantsStatus({
             />
           ),
         },
+        {
+          value: application.comment,
+          content: <ApplicationCommentForm commentText={application.comment} handlePost={postComment} />,
+        },
       ],
     };
   });

frontend/src/Components/index.ts

@@ -1,5 +1,6 @@
 export { AccessDenied } from './AccessDenied';
 export { Alert } from './Alert';
+export { ApplicationCommentForm } from './ApplicationCommentForm';
 export { BackButton } from './BackButton';
 export { Breadcrumb } from './Breadcrumb';
 export { Button } from './Button';

frontend/src/PagesAdmin/RecruitmentPositionOverviewPage/components/ProcessedApplicants/ProcessedApplicants.tsx

@@ -30,6 +30,7 @@ export function ProcessedApplicants({ data, type, revertStateFunction }: Process
 
   const rows = data.map((application) => {
     const applicantName = `${application.user.first_name} ${application.user.last_name}`;
+    const applicationComment = application.comment;
     return {
       cells: [
         {

frontend/src/i18n/constants.ts

@@ -202,6 +202,7 @@ export const KEY = {
   common_membership_number: 'common_membership_number',
   common_to_payment: 'common_to_payment',
 
+  common_comment: 'common_comment',
   //About page
   common_age_limit: 'common_age_limit',
   common_rent_services: 'common_rent_services',

frontend/src/i18n/translations.ts

@@ -186,6 +186,7 @@ export const nb = prepareTranslations({
 
   [KEY.common_membership_number]: 'Medlemsnummer',
   [KEY.common_to_payment]: 'Til betaling',
+  [KEY.common_comment]: 'Kommentar',
 
   //About page
   [KEY.common_rent_services]: 'leie og tjenester',
@@ -796,6 +797,7 @@ export const en = prepareTranslations({
   [KEY.common_available]: 'Available',
   [KEY.common_membership_number]: 'Membership number',
   [KEY.common_to_payment]: 'To payment',
+  [KEY.common_comment]: 'Comment',
 
   //About page
   [KEY.common_rent_services]: 'Renting and other services',