feature: shows availability of objects when lending through event settings

Author: ShaileshS1702

lego-webapp/components/Form/SelectInput.tsx

@@ -26,6 +26,8 @@ type Props<Option, IsMulti extends boolean = false> = {
   isClearable?: boolean;
   filter?: string[];
   SuggestionComponent?: SuggestionComponent<Option>;
+  formatOptionLabel?: ComponentProps<typeof Select>['formatOptionLabel'];
+  isOptionDisabled?: ComponentProps<typeof Select>['isOptionDisabled'];
 } & Pick<ComponentProps<Creatable>, 'onBlur'>;
 
 export type SuggestionComponent<Option = { label: string; value: number }> =
@@ -96,6 +98,7 @@ const SelectInput = <
   creatable,
   onSearch,
   SuggestionComponent,
+  isOptionDisabled,
   ...props
 }: Props<Option, IsMulti>) => {
   if (props.tags) {
@@ -117,6 +120,7 @@ const SelectInput = <
           value={value}
           isValidNewOption={isValidNewOption}
           options={options}
+          isOptionDisabled={isOptionDisabled}
           isLoading={fetching}
           styles={selectStyle ?? selectStyles}
           theme={selectTheme}
@@ -143,6 +147,7 @@ const SelectInput = <
         instanceId={name}
         value={value}
         options={options}
+        isOptionDisabled={isOptionDisabled}
         isLoading={fetching}
         onInputChange={(value) => {
           onSearch?.(value);

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

@@ -2,26 +2,102 @@ 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 { fetchAllLendableObjects, fetchAvailableLendableObjectIdsByDate } from '~/redux/actions/LendableObjectActions';
 import { useAppDispatch, useAppSelector } from '~/redux/hooks';
-import { selectAllLendableObjects } from '~/redux/slices/lendableObjects';
+import {
+  selectAllLendableObjects,
+  selectAvailableLendableObjectIds,
+} from '~/redux/slices/lendableObjects';
+import type { FormatOptionLabelMeta, StylesConfig } from 'react-select';
 import styles from '../EventEditor.module.css';
+import type { EntityId } from '@reduxjs/toolkit';
 
 type Props = {
   values: EditingEvent;
 };
 
+type LendingObjectOption = {
+  label: string;
+  value: EntityId;
+  isAvailable: boolean;
+};
+
 const LendingSection: React.FC<Props> = ({ values }) => {
   const dispatch = useAppDispatch();
+  const availableLendableObjectIds = useAppSelector(
+    selectAvailableLendableObjectIds,
+  );
 
   usePreparedEffect(
     'fetchAllLendableObjects',
     () => dispatch(fetchAllLendableObjects()),
     [],
   );
 
+  usePreparedEffect(
+    'fetchAvailableLendableObjectIdsByDate',
+    () => {
+      if (values.startTime && values.endTime) {
+        dispatch(
+          fetchAvailableLendableObjectIdsByDate(
+            values.startTime,
+            values.endTime,
+          ),
+        );
+      }
+    },
+    [values.startTime, values.endTime],
+  );
+
   const lendableObjects = useAppSelector(selectAllLendableObjects);
   const availableObjects = lendableObjects.filter((obj) => obj.canLend);
+  const availableObjectIds = new Set(availableLendableObjectIds ?? []);
+  const availabilityKnown = availableLendableObjectIds !== null;
+  const lendingObjectOptions: LendingObjectOption[] = availableObjects.map(
+    (obj) => ({
+    label: obj.title,
+    value: obj.id,
+    isAvailable: !availabilityKnown || availableObjectIds.has(obj.id),
+    }),
+  );
+
+  const lendingSelectStyle: StylesConfig<
+    LendingObjectOption,
+    true
+  > = {
+    option: (base, state) => ({
+      ...base,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: '0.75rem',
+      color: state.data.isAvailable ? 'var(--lego-font-color)' : 'var(--placeholder-color)',
+      fontWeight: state.data.isAvailable ? 500 : 400,
+      opacity: state.data.isAvailable ? 1 : 0.65,
+    }),
+    menuPortal: (base) => ({
+      ...base,
+      zIndex: 100,
+    }),
+  };
+
+  const formatLendingOptionLabel = (
+    option: LendingObjectOption,
+    { context }: FormatOptionLabelMeta<LendingObjectOption>,
+  ) => {
+    if (context === 'value' || option.isAvailable) {
+      return option.label;
+    }
+
+    return (
+      <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', gap: '0.75rem' }}>
+        <span style={{ textDecoration: option.isAvailable ? 'none' : 'line-through' }}>{option.label}</span>
+        <span style={{ fontSize: '12px', color: 'var(--placeholder-color)', textDecoration: 'none' }}>
+          Ikke tilgjengelig i den valgte perioden
+        </span>
+      </div>
+    );
+  };
 
   return (
     <>
@@ -30,14 +106,16 @@ const LendingSection: React.FC<Props> = ({ values }) => {
         label="Søk etter utlånsobjekt"
         fieldClassName={styles.metaField}
         component={SelectInput.Field}
-        options={availableObjects.map((obj) => ({
-          label: obj.title,
-          value: obj.id,
-        }))}
+        options={lendingObjectOptions}
+        selectStyle={lendingSelectStyle}
+        formatOptionLabel={formatLendingOptionLabel}
+        isOptionDisabled={(option) => !option.isAvailable}
         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. "
       />
+      {console.log(values)}
+      {console.log(values.lendingObjects)}
 
       {values.lendingObjects &&
         values.lendingObjects.length > 0 &&

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

@@ -393,7 +393,7 @@ const EventEditor = () => {
             <EditorSection title="Påmelding" initiallyExpanded={!isEditPage}>
               <Registration values={values} />
             </EditorSection>
-            <EditorSection title="Utstyrslån" initiallyExpanded={true}>
+            <EditorSection title="Utstyrslån" initiallyExpanded={!isEditPage}>
               <LendingSection values={values} />
             </EditorSection>
             <EditorSection title="Beskrivelse" collapsible={false}>

lego-webapp/redux/actionTypes.ts

@@ -88,6 +88,7 @@ export const Joblistings = {
 
 export const LendableObjects = {
   FETCH: generateStatuses('LendableObject.FETCH_ALL'),
+  FETCH_AVAILABLE: generateStatuses('LendableObject.FETCH_AVAILABLE'),
   FETCH_AVAILABILITY: generateStatuses('LendableObject.FETCH_AVAILABILITY'),
   CREATE: generateStatuses('LendableObject.CREATE'),
   EDIT: generateStatuses('LendableObject.EDIT'),

lego-webapp/redux/actions/LendableObjectActions.ts

@@ -8,6 +8,7 @@ import type {
   EditLendableObject,
   ListLendableObject,
 } from '~/redux/models/LendableObject';
+import { Dateish } from 'app/models';
 
 export const fetchAllLendableObjects = () =>
   callAPI<ListLendableObject[]>({
@@ -20,6 +21,21 @@ export const fetchAllLendableObjects = () =>
     propagateError: true,
   });
 
+
+export const fetchAvailableLendableObjectIdsByDate = (
+  start_date: string | Dateish,
+  end_date: string | Dateish,
+) =>
+  callAPI<EntityId[]>({
+    types: LendableObjects.FETCH_AVAILABLE,
+    endpoint: '/lending/objects/available/',
+    query: { start_date, end_date },
+    meta: {
+      errorMessage: 'Henting av tilgjengelige utlånsobjekter feilet',
+    },
+    propagateError: true,
+  });
+
 export const fetchLendableObjectById = (id: EntityId) =>
   callAPI<DetailLendableObject>({
     types: LendableObjects.FETCH,

lego-webapp/redux/models/LendableObject.ts

@@ -25,7 +25,7 @@ export type ListLendableObject = Pick<
   | 'canLend'
   | 'availability'
   | 'category'
-> & { responsibleGroups: EntityId[] };
+> & { responsibleGroups: EntityId[], available?: boolean /* Currently used by event management to show availability of lending objects in given timeframe */ };
 
 export type DetailLendableObject = ListLendableObject &
   Pick<LendableObject, 'actionGrant'> &

lego-webapp/redux/slices/lendableObjects.ts

@@ -2,19 +2,26 @@ import { createSlice } from '@reduxjs/toolkit';
 import { LendableObjects } from '~/redux/actionTypes';
 import createLegoAdapter from '~/redux/legoAdapter/createLegoAdapter';
 import { EntityType } from '~/redux/models/entities';
+import type { EntityId } from '@reduxjs/toolkit';
+import type { AnyAction } from '@reduxjs/toolkit';
 import type { RootState } from '~/redux/rootReducer';
 
 const legoAdapter = createLegoAdapter(EntityType.LendableObjects);
 
 const lendableObjectsSlice = createSlice({
   name: EntityType.LendableObjects,
-  initialState: legoAdapter.getInitialState(),
+  initialState: legoAdapter.getInitialState({
+    availableIds: null as EntityId[] | null,
+  }),
   reducers: {},
   extraReducers: legoAdapter.buildReducers({
     fetchActions: [LendableObjects.FETCH],
     deleteActions: [LendableObjects.DELETE],
     extraCases: (addCase) => {
-      addCase(LendableObjects.FETCH_AVAILABILITY.SUCCESS, (state, action) => {
+      addCase(LendableObjects.FETCH_AVAILABLE.SUCCESS, (state, action: AnyAction) => {
+        state.availableIds = action.payload;
+      });
+      addCase(LendableObjects.FETCH_AVAILABILITY.SUCCESS, (state, action: AnyAction) => {
         const id = action.meta.id;
         legoAdapter.updateOne(state, {
           id,
@@ -32,3 +39,6 @@ export const {
   selectById: selectLendableObjectById,
   selectAll: selectAllLendableObjects,
 } = legoAdapter.getSelectors((state: RootState) => state.lendableObjects);
+
+export const selectAvailableLendableObjectIds = (state: RootState) =>
+  state.lendableObjects.availableIds;