@autobusal/operator-routes 1.0.9 → 1.0.11

package/Manage.tsx

@@ -1,17 +1,18 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { TFunction } from 'i18next';
 import { useParams, useNavigate } from 'react-router-dom';
 import { RiMoneyEuroCircleLine } from 'react-icons/ri';
 import { FaMapMarkerAlt } from 'react-icons/fa';
 import { IoCalendarClearOutline } from 'react-icons/io5';
 import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
-import { usePage, useBuses, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
+import { usePage, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import Template from './Template';
 import Options from './Options';
 import Seating from './Seating';
-import { getType, getLanguagesExtended, getTemplates, getBusType, getSeatingType, getTransiting } from './utilities';
+import { getType, getLanguagesExtended, getTemplates, getTransiting } from './utilities';
 import { RouteData } from '@autobusal/providers/types/routes';
+import { SeatingOptionsData } from './types';
 import { useGetRoute, usePostRoute, useDeleteRoute } from './services';
 
 interface Props {
@@ -20,7 +21,7 @@ interface Props {
 }
 
 const Manage = ({ url, t }: Props): JSX.Element => {
-  const [ seating, setSeating ] = useState<string>('');
+  const [ seating, setSeating ] = useState<SeatingOptionsData | undefined>(undefined);
 
   const params = useParams();
 
@@ -30,26 +31,16 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = useGetRoute(id);
+  const { data, isFetching } = useGetRoute(id);
 
   const { mutate: Update, isPending: isPendingSave } = usePostRoute(id, seating);
 
   const { mutate: Delete, isPending: isPendingDelete } = useDeleteRoute();
 
-  const buses = useBuses();
-
   const features = useRouteFeatures();
 
   const drivers = useOperatorDrivers('id');
 
-  useEffect(() => {
-    setSeating(data?.trip.seating ?? 'free');
-  }, [data]);
-
-  const onSeating = (id: string): void => {
-    setSeating(id);
-  };
-
   const onSave = (data: RouteData): void => {
     Update(data, {
       onSuccess: () => {
@@ -69,7 +60,11 @@ const Manage = ({ url, t }: Props): JSX.Element => {
       }
     });
   };
-  
+
+  const onSeatingUpdated = (options: SeatingOptionsData): void => {
+    setSeating(options);
+  };
+
   const title = id > 0 ? t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }) : t('operator_routes.manage.title.new', { ns: 'common' });
 
   return (
@@ -95,12 +90,8 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           label: t('operator_routes.manage.seat_reservation', { ns: 'common' }),
           type: 'component',
           name: 'seating',
-          value: <Seating value={ seating } t={ t } onChange={ onSeating } />
-        }, {}, (
-          getBusType(buses, seating, t, data?.trip.bus?.id)
-        ) , (
-          getSeatingType(seating, t, data?.trip)
-        ), {} , {
+          value: <Seating trip={ data?.trip } t={ t } onUpdated={ onSeatingUpdated } />
+        }, {} , {
           label: t('operator_routes.manage.schedule.title', { ns: 'common' }),
           name: 'schedule',
           type: 'link',
@@ -223,6 +214,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
             <Options id={ id } t={ t } />
           )
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/Schedule/Manage.tsx

@@ -23,7 +23,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = useGetSchedule(id);
+  const { data, isFetching } = useGetSchedule(id);
 
   const { mutate: Update, isPending } = usePostSchedule(id);
 
@@ -34,7 +34,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
   const onSave = (data: AvailableData): void => {
     Update(data, {
       onSuccess: () => {
-        success(t('schedules_manage.message.saved', { ns: 'common' }));
+        success(t('schedules_manage.messages.saved', { ns: 'common' }));
 
         navigate(url);
       }
@@ -42,7 +42,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
   };
 
   const title = t('schedules_manage.title', { name: data?.name, ns: 'common' });
-  
+
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />
@@ -68,6 +68,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           values: getSchedules(t),
           selected: data?.available.schedule ?? []
         }] }
+        fetching={ isFetching }
         pending={ isPending }
         t={ t }
         actions={ [

package/Seating.tsx

@@ -1,29 +1,154 @@
+import { useState, useEffect, ChangeEvent } from 'react';
 import { TFunction } from 'i18next';
+import { useBuses } from '@autobusal/hooks';
+import { Display } from '@autobusal/common/Viewer/styles';
 import styled from 'styled-components';
+import { TripData } from '@autobusal/providers/types/routes';
+import { SeatingOptionsData } from './types';
 
 interface Props {
-  value?: string
+  trip?: TripData
   t: TFunction<'normal'>
-  onChange: (id: string) => void
+  onUpdated: (options: SeatingOptionsData) => void
 }
 
-const Seating = ({ value, t, onChange }: Props): JSX.Element => (
-  <Container>
-    <label>
-      <input checked={ value === 'free' } type="radio" name="seating" onChange={ () => onChange('free') } />
-      { t('operator_routes.manage.seating.free', { ns: 'common' }) }
-    </label>
+const Seating = ({ trip, t, onUpdated }: Props): JSX.Element => {
+  const [ data, setData ] = useState<SeatingOptionsData>({
+    seating: trip?.seating ?? 'free',
+    bus_id: trip?.bus?.id,
+    blocked_seats: Number(trip?.blocked_seats),
+    available_seats: Number(trip?.available_seats)
+  });
+  const [ type, setType ] = useState<string>(data.seating);
 
-    <label>
-      <input checked={ value === 'reservation' } type="radio" name="seating" onChange={ () => onChange('reservation') } />
-      { t('operator_routes.manage.seating.reservation', { ns: 'common' }) }
-    </label>
-  </Container>
-);
+  const buses = useBuses();
+
+  useEffect(() => {
+    onUpdated(data);
+  }, [data, onUpdated]);
+
+  const onSeatingChange = (type: string): void => {
+    const newData = { ...data };
+
+    newData.seating = type;
+
+    if (type === 'free') {
+      newData.bus_id = undefined;
+      newData.blocked_seats = 0;
+    } else {
+      newData.bus_id = Number(buses[0].id);
+      newData.available_seats = 0;
+    }
+
+    setType(type);
+    setData(newData);
+  };
+
+  const onBusChange = (event: ChangeEvent<HTMLSelectElement>): void => {
+    setData({
+      ...data,
+      bus_id: Number(event.target.value)
+    });
+  };
+
+  const onSeatsChange = (event: ChangeEvent<HTMLInputElement>, type: string): void => {
+    const seatsNo = Number(event.target.value);
+
+    if (type === 'blocked_seats') {
+      setData({
+        ...data,
+        blocked_seats: seatsNo
+      });
+    }
+
+    if (type === 'available_seats') {
+      setData({
+        ...data,
+        available_seats: seatsNo
+      });
+    }
+  };
+
+  const busOptions = buses.map(bus => (
+    <option key={ bus.id } value={ bus.id }>
+      { bus.name }
+    </option>
+  ));
+
+  return (
+    <>
+      <div className="row">
+        <Container>
+          <label>
+            <input checked={ type === 'free' } type="radio" name="seating" onChange={ () => onSeatingChange('free') } />
+            { t('operator_routes.manage.seating.free', { ns: 'common' }) }
+          </label>
+
+          <label>
+            <input checked={ type === 'reservation' } type="radio" name="seating" onChange={ () => onSeatingChange('reservation') } />
+            { t('operator_routes.manage.seating.reservation', { ns: 'common' }) }
+          </label>
+        </Container>
+      </div>
+
+      <Column className="column">
+        <div className="row">
+          { type === 'reservation' && (
+            <>
+              { t('operator_routes.manage.bus.reservation', { ns: 'common' }) }
+
+              <select defaultValue={ trip?.bus?.id } onChange={ onBusChange }>
+                { busOptions }
+              </select>
+            </>
+          ) }
+
+          { type === 'free' && (
+            <>
+              { t('operator_routes.manage.bus.title', { ns: 'common' }) }
+
+              <Display className="row-data">{ t('operator_routes.manage.bus.free', { ns: 'common' }) }</Display>
+            </>
+          ) }
+        </div>
+
+        <div className="row row-nomargin">
+          { type === 'reservation' && (
+            <>
+              { t('operator_routes.manage.seats.blocked', { ns: 'common' }) }
+
+              <input type="number" name="blocked_seats" defaultValue={ data.blocked_seats } onChange={ (event) => onSeatsChange(event, 'blocked_seats') } />
+            </>
+          ) }
+
+          { type === 'free' && (
+            <>
+              { t('operator_routes.manage.seats.available', { ns: 'common' }) }
+
+              <input type="number" name="available_seats" defaultValue={ data.available_seats } onChange={ (event) => onSeatsChange(event, 'available_seats') } />
+            </>
+          ) }
+        </div>
+      </Column>
+    </>
+  );
+};
 
 const Container = styled.div`
   display: flex;
   gap: 15px;
 `;
 
+const Column = styled.div`
+  & > div:first-of-type {
+    margin-bottom: 15px;
+  }
+
+  @media (min-width: 540px) {
+    & > div:first-of-type {
+      margin-bottom: 0;
+    }
+  }
+`;
+
 export default Seating;

package/Transiting/Manage.tsx

@@ -24,7 +24,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data: CountriesData, isLoading } = useCountries('available');
 
-  const { data, refetch } = useGetTransiting(id);
+  const { data, isFetching, refetch } = useGetTransiting(id);
 
   const { mutate: Update, isPending: isPendingSave } = usePostTransiting(id);
 
@@ -79,6 +79,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           value: 0,
           rules: 'required|min:1'
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/Unavailable/Manage.tsx

@@ -23,7 +23,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const navigate = useNavigate();
 
-  const { data } = useGetUnavailable(routeId, id);
+  const { data, isFetching } = useGetUnavailable(routeId, id);
 
   const { mutate: Update, isPending: isPendingSave } = usePostUnavailable(routeId, id);
 
@@ -76,6 +76,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
           value: unavailable?.end_inactive,
           rules: 'required'
         }] }
+        fetching={ isFetching }
         pending={ isPendingSave || isPendingDelete }
         t={ t }
         actions={ [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/operator-routes",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "type": "module",
   "main": "index.ts"
 }

package/services.ts

@@ -3,6 +3,7 @@ import { apiClient } from '@autobusal/providers';
 import { PaginationData } from '@autobusal/providers/types/pagination';
 import { RouteData } from '@autobusal/providers/types/routes';
 import { TableParamsData } from '@autobusal/providers/types/other';
+import { SeatingOptionsData } from './types';
 
 export const useGetRoutes = (params: TableParamsData): UseQueryResult<PaginationData<RouteData>> => (
   useQuery({
@@ -36,7 +37,7 @@ export const useGetRoute = (id: number): UseSuspenseQueryResult<RouteData> => (
   })
 );
 
-export const usePostRoute = (id: number, seating: string): UseMutationResult<void, Error, RouteData, unknown> => (
+export const usePostRoute = (id: number, seating?: SeatingOptionsData): UseMutationResult<void, Error, RouteData, unknown> => (
   useMutation({
     mutationKey: ['operator-routes-save', { id, seating }],
     mutationFn: async (data: RouteData) => (
@@ -44,7 +45,7 @@ export const usePostRoute = (id: number, seating: string): UseMutationResult<voi
         .post('/api/routes/operator/update', {
           ...data,
           id,
-          seating,
+          ...seating,
           features: JSON.stringify(data.features),
           drivers: JSON.stringify(data.drivers)
         })

package/types.ts

@@ -0,0 +1,6 @@
+export interface SeatingOptionsData {
+  seating: string
+  bus_id?: number
+  blocked_seats?: number
+  available_seats?: number
+}

package/utilities.tsx

@@ -2,7 +2,6 @@ import { TFunction } from 'i18next';
 import { IoGlobeOutline } from 'react-icons/io5';
 import { getLanguages } from '@autobusal/utilities';
 import { DropdownData } from '@autobusal/providers/types/other';
-import { TripData } from '@autobusal/providers/types/routes';
 import { ViewData } from '@autobusal/common/Viewer/types';
 
 export const getType = (id: number, value: string, t: TFunction<'normal'>): ViewData => {
@@ -53,45 +52,6 @@ export const getTemplates = (t: TFunction<'normal'>): DropdownData[] => ([
   }
 ]);
 
-export const getBusType = (buses: DropdownData[], seating: string, t: TFunction<'normal'>, value?: number): ViewData => {
-  if (seating === 'free') {
-    return {
-      label: t('operator_routes.manage.bus.reservation', { ns: 'common' }),
-      name: 'bus_id',
-      type: 'display',
-      value: t('operator_routes.manage.bus.free', { ns: 'common' })
-    };
-  }
-
-  return {
-    label: t('operator_routes.manage.bus.title', { ns: 'common' }),
-    name: 'bus_id',
-    type: 'select',
-    values: buses,
-    value,
-    rules: 'required|min:1'
-  };
-};
-
-export const getSeatingType = (seating: string, t: TFunction<'normal'>, trip?: TripData): ViewData => {
-  if (seating === 'free') {
-    return {
-      label: t('operator_routes.manage.seats.available', { ns: 'common' }),
-      name: 'available_seats',
-      type: 'number',
-      value: trip?.available_seats,
-      rules: 'required|min:1'
-    };
-  }
-
-  return {
-    label: t('operator_routes.manage.seats.blocked', { ns: 'common' }),
-    name: 'blocked_seats',
-    type: 'number',
-    value: trip?.blocked_seats
-  };
-};
-
 export const getTransiting = (id: number, t: TFunction<'normal'>, type?: string): ViewData => {
   if (type == 'national') {
     return {