@autobusal/operator-routes 1.0.10 → 1.1.0

package/Alternates/Browse.tsx

@@ -2,7 +2,7 @@ import { TFunction } from 'i18next';
 import { useParams, Navigate, useNavigate } from 'react-router-dom';
 import { BsPlusCircleFill } from 'react-icons/bs';
 import { Meta, BackWithTitle, Button, Table, Row } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import { useGetAlternates, usePostAdd, useDeleteAlternate } from './services';
 
@@ -17,6 +17,7 @@ const Browse = ({ url, backUrl, t }: Props): JSX.Element => {
 
   const id = Number(params.id);
 
+  const baseUrl = backUrl;
   url = url.replace('[id]', String(id));
   backUrl = backUrl.replace('[id]', String(id));
 
@@ -26,6 +27,16 @@ const Browse = ({ url, backUrl, t }: Props): JSX.Element => {
 
   const { data, isLoading, isFetching, refetch } = useGetAlternates(id);
 
+  const title = t('alternates.browse.title', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/manage/[id]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url: backUrl
+  }]);
+
   const { mutate: Add, isPending } = usePostAdd(id);
 
   const { mutate: Delete } = useDeleteAlternate(id);
@@ -68,8 +79,6 @@ const Browse = ({ url, backUrl, t }: Props): JSX.Element => {
     />
   ));
 
-  const title = t('alternates.browse.title', { name: data?.name, ns: 'common' });
-
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ backUrl } t={ t } />

package/Browse.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useSearchParams } from 'react-router-dom';
 import { Meta, Table, Row } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { getParams } from '@autobusal/utilities';
 import { Bags, Dates } from './Information';
 import { useGetRoutes } from './services';
@@ -16,6 +16,8 @@ const Browse = ({ url, t }: Props): JSX.Element => {
 
   usePage('routes');
 
+  useBreadcrumbs(t('operator_routes.browse.title.manage', { ns: 'common' }));
+
   const { data, isLoading, isFetching } = useGetRoutes(getParams(searchParams, ['page', 'sort', 'order', 'q']));
 
   const rows = data?.data.map(item => (

package/Locations/Manage.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useParams } from 'react-router-dom';
 import { Meta, BackWithTitle, Report } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import Add from './Add/Add';
 import Browse from './Browse/Browse';
 import { useGetLocations } from './services';
@@ -16,18 +16,27 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const id = Number(params.id);
 
+  const baseUrl = url;
   url = url.replace('[id]', String(id));
 
   usePage('routes');
 
   const { data, refetch } = useGetLocations(id);
 
+  const title = t('locations_manage.title', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/manage/[id]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url
+  }]);
+
   const onReload = (): void => {
     refetch();
   };
 
-  const title = t('locations_manage.title', { name: data?.name, ns: 'common' });
-
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />

package/Manage.tsx

@@ -1,11 +1,11 @@
-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, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import Template from './Template';
 import Options from './Options';
@@ -33,6 +33,10 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data, isFetching } = useGetRoute(id);
 
+  const title = id > 0 ? t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }) : t('operator_routes.manage.title.new', { ns: 'common' });
+
+  useBreadcrumbs(title, [{ name: t('operator_routes.browse.title.manage', { ns: 'common' }), url }]);
+
   const { mutate: Update, isPending: isPendingSave } = usePostRoute(id, seating);
 
   const { mutate: Delete, isPending: isPendingDelete } = useDeleteRoute();
@@ -65,8 +69,6 @@ const Manage = ({ url, t }: Props): JSX.Element => {
     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 (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />

package/Prices/Manage.tsx

@@ -1,10 +1,11 @@
 import { TFunction } from 'i18next';
 import { useParams } from 'react-router-dom';
 import { Meta, BackWithTitle } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import Options from './Options/Options';
 import Schedule from './Schedule/Schedule';
 import Browse from './Browse/Browse';
+import { getBreadcrumbs } from './utilities';
 import { useGetPrices } from './services';
 
 interface Props {
@@ -19,18 +20,21 @@ const Manage = ({ type, url, t }: Props): JSX.Element => {
   const id = Number(params.id);
   const name = String(params.name ?? '');
 
+  const baseUrl = url;
   url = url.replace('[id]', String(id));
   
   usePage('routes');
 
   const { data, refetch } = useGetPrices(id, type, name);
 
+  const title = t(`prices_manage.title.${ type }`, { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, getBreadcrumbs(type, baseUrl, url, t, data?.name));
+
   const onReload = () => {
     refetch();
   };
 
-  const title = t(`prices_manage.title.${ type }`, { name: data?.name, ns: 'common' });
-
   // get the correct column
   const prices = type === 'alternate' ? data?.alternates : data?.prices;
 

package/Prices/Schedule/Schedule.tsx

@@ -71,7 +71,7 @@ const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
         <div className="row">
           <label>
             <input type="checkbox" value="1" defaultChecked={ details?.offer } { ...register('offer') } />&nbsp;
-            { t('alternates_manage.offer', { ns: 'common' }) }
+            { t('alternates.manage.offer', { ns: 'common' }) }
           </label>
         </div>
 

package/Prices/utilities.ts

@@ -0,0 +1,33 @@
+import { TFunction } from 'i18next';
+import { BreadcrumbData } from '@autobusal/providers/types/pages';
+
+export const getBreadcrumbs = (type: string, baseUrl: string, backUrl: string, t: TFunction<'common'>, name?: string): BreadcrumbData[] => {
+  const final: BreadcrumbData[] = [];
+
+  let rootUrl = baseUrl.replace('/manage/[id]', '');
+  let backUrlFinal = backUrl;
+
+  if (type === 'alternate') {
+    rootUrl = baseUrl.replace('/alternates/[id]', '');
+    backUrlFinal = backUrlFinal.replace('/alternates/', '/manage/');
+  }
+
+  final.push({
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: rootUrl
+  });
+
+  final.push({
+    name: t('operator_routes.manage.title.update', { name, ns: 'common' }),
+    url: backUrlFinal
+  }); 
+
+  if (type === 'alternate') {
+    final.push({
+      name: t('alternates.browse.title', { name: name, ns: 'common' }),
+      url: backUrl
+    });
+  }
+
+  return final;
+};

package/Schedule/Manage.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useParams, Navigate, useNavigate } from 'react-router-dom';
 import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import { getSchedules } from './utilities';
 import { AvailableData } from '@autobusal/providers/types/routes';
@@ -17,6 +17,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const id = Number(params.id);
 
+  const baseUrl = url;
   url = url.replace('[id]', String(id));
 
   usePage('routes');
@@ -25,6 +26,16 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data, isFetching } = useGetSchedule(id);
 
+  const title = t('schedules_manage.title', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/manage/[id]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url
+  }]);
+
   const { mutate: Update, isPending } = usePostSchedule(id);
 
   if (id === 0) {
@@ -41,8 +52,6 @@ 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 } />

package/Seating.tsx

@@ -25,7 +25,7 @@ const Seating = ({ trip, t, onUpdated }: Props): JSX.Element => {
 
   useEffect(() => {
     onUpdated(data);
-  }, [data]);
+  }, [data, onUpdated]);
 
   const onSeatingChange = (type: string): void => {
     const newData = { ...data };

package/Transiting/Manage.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useParams, Navigate } from 'react-router-dom';
 import { Meta, BackWithTitle, Viewer, Box } from '@autobusal/common';
-import { usePage, useCountries } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs, useCountries } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import Countries from './Countries';
 import { filterCountries } from './utilities';
@@ -18,6 +18,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const id = Number(params.id);
 
+  const baseUrl = url;
   url = url.replace('[id]', String(id));
 
   usePage('routes');
@@ -26,6 +27,16 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data, isFetching, refetch } = useGetTransiting(id);
 
+  const title = t('transiting_manage.title', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/manage/[id]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url
+  }]);
+
   const { mutate: Update, isPending: isPendingSave } = usePostTransiting(id);
 
   const { mutate: Delete, isPending: isPendingDelete } = useDeleteTransiting(id);
@@ -58,8 +69,6 @@ const Manage = ({ url, t }: Props): JSX.Element => {
     });
   };
 
-  const title = t('transiting_manage.title', { name: data?.name, ns: 'common' });
-
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />

package/Unavailable/Browse.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useParams, Navigate } from 'react-router-dom';
 import { Meta, BackWithTitle, Table, Row } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { useGetUnavailableDates, useDeleteUnavailable } from './services';
 
 interface Props {
@@ -14,12 +14,23 @@ const Browse = ({ url, t }: Props): JSX.Element => {
 
   const id = Number(params.id);
 
+  const baseUrl = url;
   url = url.replace('[id]', String(id));
 
   usePage('routes');
 
   const { data, isLoading, isFetching, refetch } = useGetUnavailableDates(id);
 
+  const title = t('unavailable.browse.title', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/manage/[id]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url
+  }]);
+
   const { mutate: Delete } = useDeleteUnavailable(id);
 
   if (id === 0) {
@@ -42,8 +53,6 @@ const Browse = ({ url, t }: Props): JSX.Element => {
     />
   ));
 
-  const title = t('unavailable.browse.title', { name: data?.name, ns: 'common' });
-
   return (
     <Meta title={ title }>
       <BackWithTitle title={ title } to={ url } t={ t } />

package/Unavailable/Manage.tsx

@@ -1,7 +1,7 @@
 import { TFunction } from 'i18next';
 import { useParams, Navigate, useNavigate } from 'react-router-dom';
 import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
-import { usePage } from '@autobusal/hooks';
+import { usePage, useBreadcrumbs } from '@autobusal/hooks';
 import { success } from '@autobusal/utilities';
 import { UnavailableData } from '@autobusal/providers/types/routes';
 import { useGetUnavailable, usePostUnavailable, useDeleteUnavailable } from './services';
@@ -17,6 +17,7 @@ const Manage = ({ url, t }: Props): JSX.Element => {
   const id = Number(params.id);
   const routeId = Number(params.route_id);
 
+  const baseUrl = url;
   url = url.replace('[routeId]', String(routeId));
 
   usePage('routes');
@@ -25,6 +26,19 @@ const Manage = ({ url, t }: Props): JSX.Element => {
 
   const { data, isFetching } = useGetUnavailable(routeId, id);
 
+  const title = id > 0 ? t('unavailable.manage.title.update', { name: data?.name, ns: 'common' }) : t('unavailable.manage.title.new', { name: data?.name, ns: 'common' });
+
+  useBreadcrumbs(title, [{
+    name: t('operator_routes.browse.title.manage', { ns: 'common' }),
+    url: baseUrl.replace('/unavailable/[routeId]', '')
+  }, {
+    name: t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }),
+    url: baseUrl.replace('/unavailable/[routeId]', `/manage/${ routeId }`)
+  }, {
+    name: t('unavailable.browse.title', { name: data?.name, ns: 'common' }),
+    url
+  }]);
+
   const { mutate: Update, isPending: isPendingSave } = usePostUnavailable(routeId, id);
 
   const { mutate: Delete, isPending: isPendingDelete } = useDeleteUnavailable(routeId);
@@ -53,8 +67,6 @@ const Manage = ({ url, t }: Props): JSX.Element => {
     });
   };
 
-  const title = id > 0 ? t('unavailable.manage.title.update', { name: data?.name, ns: 'common' }) : t('unavailable.manage.title.new', { name: data?.name, ns: 'common' });
-
   const unavailable = data?.unavailable !== undefined && data.unavailable.length > 0 ? data.unavailable[0] : undefined;
 
   return (

package/package.json

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