add lending to event creating/editing

Author: ShaileshS1702

lego-webapp/pages/events/src/EventEditor/EditorSection/LendingSection.tsx

@@ -0,0 +1,57 @@
+import { usePreparedEffect } from '@webkom/react-prepare';
+import { Field } from 'react-final-form';
+import { SelectInput, TextInput } from '~/components/Form';
+import { type EditingEvent } from '~/pages/events/utils';
+import { fetchAllLendableObjects } from '~/redux/actions/LendableObjectActions';
+import { useAppDispatch, useAppSelector } from '~/redux/hooks';
+import { selectAllLendableObjects } from '~/redux/slices/lendableObjects';
+import styles from '../EventEditor.module.css';
+
+type Props = {
+  values: EditingEvent;
+};
+
+const LendingSection: React.FC<Props> = ({ values }) => {
+  const dispatch = useAppDispatch();
+
+  usePreparedEffect(
+    'fetchAllLendableObjects',
+    () => dispatch(fetchAllLendableObjects()),
+    [],
+  );
+
+  const lendableObjects = useAppSelector(selectAllLendableObjects);
+  const availableObjects = lendableObjects.filter((obj) => obj.canLend);
+
+  return (
+    <>
+      <Field
+        name="lendingObjects"
+        label="Søk etter utlånsobjekt"
+        fieldClassName={styles.metaField}
+        component={SelectInput.Field}
+        options={availableObjects.map((obj) => ({
+          label: obj.title,
+          value: obj.id,
+        }))}
+        placeholder="Utlånsobjekt"
+        isMulti
+        description="Dette gjør det mulig for arrangementet å låne objekter for et arrangmenet. Dette gjøres ved å lage en separat utlånsforespørsel etter at arrangementet er opprettet, i ditt navn. Objektene vil ikke være reservert før utlånsforespørselen er godkjent. Objektene vil heller ikke endres hvis arrangment endres på. Du er selv ansvarlig for å sjekke at objektene er tilgjengelige for utlån på det tidspunktet arrangementet skal være. "
+      />
+
+      {values.lendingObjects &&
+        values.lendingObjects.length > 0 &&
+        values.lendingObjects.map((obj, i) => (
+          <Field
+            key={obj.value || i}
+            name={`lendingDescription.${i}`}
+            label={`Kommentar til lån av ${obj.label}`}
+            placeholder="Forklar hva dere skal bruke objektet til, og eventuelle andre detaljer."
+            component={TextInput.Field}
+          />
+        ))}
+    </>
+  );
+};
+
+export default LendingSection;

lego-webapp/pages/events/src/EventEditor/EditorSection/index.tsx

@@ -58,3 +58,4 @@ export { default as Header } from './Header';
 export { default as Details } from './Details';
 export { default as Registration } from './Registration';
 export { default as Descriptions } from './Descriptions';
+export { default as LendingSection } from './LendingSection';

lego-webapp/pages/events/src/EventEditor/index.tsx

@@ -61,11 +61,14 @@ import EditorSection, {
   Details,
   Registration,
   Descriptions,
+  LendingSection,
 } from './EditorSection';
+import { createLendingRequest } from '~/redux/actions/LendingRequestActions';
 import type { ActionGrant } from 'app/models';
 import type { EditingEvent } from '~/pages/events/utils';
 import type { UploadArgs } from '~/redux/actions/FileActions';
 import type { AdministrateEvent } from '~/redux/models/Event';
+import type { CreateLendingRequest } from '~/redux/models/LendingRequest';
 
 const TypedLegoForm = LegoFinalForm<EditingEvent>;
 
@@ -206,15 +209,30 @@ const EventEditor = () => {
   }
 
   const onSubmit = (values: EditingEvent) => {
-    (isEditPage
+    const eventAction = isEditPage
       ? dispatch(editEvent(transformEvent(values)))
-      : dispatch(createEvent(transformEvent(values)))
-    ).then((res) => {
+      : dispatch(createEvent(transformEvent(values)));
+
+    eventAction.then((res) => {
       const key: string = values.cover.split(':')[0];
       const token: string = values.cover.split(':')[1];
       if (values.saveToImageGallery) {
         dispatch(setSaveForUse(key, token, true));
       }
+
+      // Create lending request if lendingObjects exist and we're creating a new event
+      if (values.lendingObjects && values.lendingObjects.length > 0) {
+        for (let i = 0; i < values.lendingObjects.length; i++) {
+          const lendingRequestData: CreateLendingRequest = {
+            lendableObject: values.lendingObjects[i].value,
+            comment: values.lendingDescription[i] || '',
+            startDate: values.startTime,
+            endDate: values.endTime,
+          };
+          dispatch(createLendingRequest(lendingRequestData));
+        }
+      }
+
       navigate(
         isEditPage
           ? `/events/${eventIdOrSlug}`
@@ -369,19 +387,18 @@ const EventEditor = () => {
                 setImageGalleryUrl={setImageGalleryUrl}
               />
             </EditorSection>
-
             <EditorSection title="Detaljer" initiallyExpanded={!isEditPage}>
               <Details values={values} />
             </EditorSection>
-
             <EditorSection title="Påmelding" initiallyExpanded={!isEditPage}>
               <Registration values={values} />
             </EditorSection>
-
+            <EditorSection title="Utstyrslån" initiallyExpanded={false}>
+              <LendingSection values={values} />
+            </EditorSection>
             <EditorSection title="Beskrivelse" collapsible={false}>
               <Descriptions uploadFile={uploadFile} values={values} />
             </EditorSection>
-
             {!isEditPage && (
               <Field
                 label={
@@ -419,7 +436,6 @@ const EventEditor = () => {
                 required
               />
             )}
-
             <ButtonGroup>
               {isEditPage && (
                 <LinkButton flat href={`/events/${eventIdOrSlug}`}>
@@ -430,7 +446,6 @@ const EventEditor = () => {
                 {isEditPage ? 'Lagre endringer' : 'Opprett'}
               </SubmitButton>
             </ButtonGroup>
-
             {isEditPage && <Admin actionGrant={actionGrant} event={values} />}
           </Form>
         )}

lego-webapp/pages/events/utils.ts

@@ -118,6 +118,8 @@ export type EditingEvent = Event & {
   responsibleUsers: PublicUser[];
   saveToImageGallery: boolean;
   date: [Dateish, Dateish];
+  lendingObjects: Option[];
+  lendingDescription: string[];
 };
 
 // Event fields that should be created or updated based on the API.