Calendar tweaks (#12115)

* Support initial filters for UseCalendar

* [UI] Calendar updates

- Allow calendars to display completed / cancelled items also

src/frontend/src/components/calendar/OrderCalendar.tsx

@@ -47,12 +47,14 @@ export default function OrderCalendar({
   role,
   params,
   filters,
+  initialFilters,
   tooltip
 }: {
   model: ModelType;
   role: UserRoles;
   params: Record<string, any>;
   filters?: TableFilter[];
+  initialFilters?: TableFilter[];
   tooltip?: (event: EventContentArg) => React.ReactNode;
 }) {
   const navigate = useNavigate();
@@ -94,7 +96,8 @@ export default function OrderCalendar({
   const calendarState = useCalendar({
     endpoint: modelInfo.api_endpoint,
     name: model.toString(),
-    queryParams: params
+    queryParams: params,
+    initialFilters: initialFilters
   });
 
   // Build the events

src/frontend/src/hooks/UseCalendar.tsx

@@ -2,7 +2,7 @@ import type FullCalendar from '@fullcalendar/react';
 import type { ApiEndpoints } from '@lib/enums/ApiEndpoints';
 import { apiUrl } from '@lib/functions/Api';
 import useFilterSet from '@lib/hooks/UseFilterSet';
-import type { FilterSetState } from '@lib/types/Filters';
+import type { FilterSetState, TableFilter } from '@lib/types/Filters';
 import type { UseModalReturn } from '@lib/types/Modals';
 import type { DateValue } from '@mantine/dates';
 import { type UseQueryResult, useQuery } from '@tanstack/react-query';
@@ -54,15 +54,17 @@ export type CalendarState = {
 export default function useCalendar({
   name,
   endpoint,
-  queryParams
+  queryParams,
+  initialFilters
 }: {
   name: string;
   endpoint: ApiEndpoints;
   queryParams?: any;
+  initialFilters?: TableFilter[];
 }): CalendarState {
   const ref = useRef<FullCalendar>(null as any);
 
-  const filterSet = useFilterSet(`calendar-${name}`);
+  const filterSet = useFilterSet(`calendar-${name}`, initialFilters);
 
   const [searchTerm, setSearchTerm] = useState<string>('');
 

src/frontend/src/pages/build/BuildIndex.tsx

@@ -48,8 +48,9 @@ function BuildOrderCalendar() {
     <OrderCalendar
       model={ModelType.build}
       role={UserRoles.build}
-      params={{ outstanding: true, part_detail: true }}
+      params={{ part_detail: true }}
       filters={calendarFilters}
+      initialFilters={[{ name: 'outstanding', value: 'true' }]}
       tooltip={renderTooltip}
     />
   );

src/frontend/src/pages/purchasing/PurchasingIndex.tsx

@@ -51,8 +51,9 @@ function PurchaseOrderCalendar() {
     <OrderCalendar
       model={ModelType.purchaseorder}
       role={UserRoles.purchase_order}
-      params={{ outstanding: true, supplier_detail: true }}
+      params={{ supplier_detail: true }}
       filters={calendarFilters}
+      initialFilters={[{ name: 'outstanding', value: 'true' }]}
       tooltip={renderTooltip}
     />
   );

src/frontend/src/pages/sales/SalesIndex.tsx

@@ -49,8 +49,9 @@ function SalesOrderCalendar() {
     <OrderCalendar
       model={ModelType.salesorder}
       role={UserRoles.sales_order}
-      params={{ outstanding: true, customer_detail: true }}
+      params={{ customer_detail: true }}
       filters={calendarFilters}
+      initialFilters={[{ name: 'outstanding', value: 'true' }]}
       tooltip={renderTooltip}
     />
   );
@@ -73,8 +74,9 @@ const ReturnOrderCalendar = () => {
     <OrderCalendar
       model={ModelType.returnorder}
       role={UserRoles.return_order}
-      params={{ outstanding: true, customer_detail: true }}
+      params={{ customer_detail: true }}
       filters={calendarFilters}
+      initialFilters={[{ name: 'outstanding', value: 'true' }]}
       tooltip={renderTooltip}
     />
   );

src/frontend/src/pages/stock/LocationDetail.tsx

@@ -70,8 +70,9 @@ function TransferOrderCalendar() {
     <OrderCalendar
       model={ModelType.transferorder}
       role={UserRoles.transfer_order}
-      params={{ outstanding: true }}
+      params={{}}
       filters={calendarFilters}
+      initialFilters={[{ name: 'outstanding', value: 'true' }]}
     />
   );
 }