@autobusal/operator-routes 1.0.6 → 1.0.8

package/Alternates/Browse.tsx

@@ -0,0 +1,112 @@
+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 { success } from '@autobusal/utilities';
+import { GetAlternates, PostAdd, DeleteAlternate } from './services';
+
+interface Props {
+  url: string
+  backUrl: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, backUrl, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  url = url.replace('[id]', String(id));
+  backUrl = backUrl.replace('[id]', String(id));
+
+  const navigate = useNavigate();
+
+  usePage('routes');
+
+  const { data, isLoading, isFetching, refetch } = GetAlternates(id);
+
+  const { mutate: Add, isPending } = PostAdd(id);
+
+  const { mutate: Delete } = DeleteAlternate(id);
+
+  if (id === 0) {
+    return <Navigate to={ backUrl } />;
+  }
+
+  const onNew = (): void => {
+    if (!window.confirm(t('alternates.browse.confirm', { ns: 'common' }))) {
+      return;
+    }
+
+    Add({}, {
+      onSuccess: (data) => {
+        success(t('alternates.browse.messages.saved', { ns: 'common' }));
+
+        navigate(`${ url }/manage/${ data.id }`);
+      }
+    });
+  };
+
+  const onDelete = (name: number): void => {
+    Delete(name, {
+      onSuccess: () => {
+        success(t('alternates.browse.messages.deleted', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  const rows = data?.alternates.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        `${ item.date_from } - ${ item.date_to }`
+      ] }
+    />
+  ));
+
+  const title = t('alternates.browse.title', { name: data?.name, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ backUrl } t={ t } />
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('alternates.browse.from', { ns: 'common' }),
+          width: 75
+        }] }
+        rows={ rows }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'view', 'delete', 'extra'
+        ] }
+        handlers={ {
+          delete: onDelete
+        } }
+        extra={
+          <Button
+            type="button"
+            loading={ isPending }
+            text={
+              <>
+                <BsPlusCircleFill />
+                { t('table.actions.new', { ns: 'common' }) }
+              </>
+            }
+            noMargin
+            onClick={ onNew }
+          />
+        }
+      />
+    </Meta>
+  );
+};
+
+export default Browse;

package/Alternates/services.ts

@@ -0,0 +1,67 @@
+import { UseMutationResult, UseQueryResult, useMutation, useQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData, AlternateData } from '@autobusal/providers/types/routes';
+import { ScheduleForm } from '../Prices/types';
+
+export const GetAlternates = (id: number): UseQueryResult<RouteData> => (
+  useQuery({
+    queryKey: ['operator-alternates', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/alternates/operator/browse', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostAdd = (id: number): UseMutationResult<AlternateData> => (
+  useMutation({
+    mutationKey: ['operator-alternates-add', { id }],
+    mutationFn: async () => (
+      await apiClient
+        .post('/api/alternates/operator/add', { id })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostSchedule = (id: number, name: string): UseMutationResult<void, Error, ScheduleForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-alternates-schedule', { id, name }],
+    mutationFn: async (data: ScheduleForm) => (
+      await apiClient
+        .post('/api/alternates/operator/schedule', {
+          ...data,
+          id,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteAlternate = (id: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-alternates-delete'],
+    mutationFn: async (name: number) => (
+      await apiClient
+        .delete('/api/alternates/operator/delete', {
+          params: {
+            id,
+            name
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Prices/Schedule/Schedule.tsx

@@ -5,7 +5,7 @@ import { Calendar, Button } from '@autobusal/common';
 import { Display, success } from '@autobusal/utilities';
 import { Container, Dates } from './styles';
 import { AlternateData } from '@autobusal/providers/types/routes';
-import { PostSchedule } from '@pages/Operator/Alternates/services';
+import { PostSchedule } from '../../Alternates/services';
 import { ScheduleForm } from '../types';
 
 interface Props {
@@ -25,18 +25,18 @@ const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
 
   const onSubmit = (data: ScheduleForm): void => {
     Save(data, {
-      onSuccess: () => success(t('alternates_manage.messages.saved', { ns: 'common' }))
+      onSuccess: () => success(t('alternates.manage.messages.saved', { ns: 'common' }))
     });
   };
 
   return (
     <Container className="box">
-      <h2>{ t('alternates_manage.title', { ns: 'common' }) }</h2>
+      <h2>{ t('alternates.manage.title', { ns: 'common' }) }</h2>
 
       <form onSubmit={ handleSubmit(onSubmit) }>
         <Dates>
           <div className="row">
-            { t('alternates_manage.from', { ns: 'common' }) }
+            { t('alternates.manage.from', { ns: 'common' }) }
 
             <Calendar
               type="picker"
@@ -52,7 +52,7 @@ const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
           </div>
 
           <div className="row">
-            { t('alternates_manage.to', { ns: 'common' }) }
+            { t('alternates.manage.to', { ns: 'common' }) }
 
             <Calendar
               type="picker"

package/index.ts

@@ -1,5 +1,6 @@
 import Browse from './Browse';
 import Manage from './Manage';
+import AlternatesBrowse from './Alternates/Browse';
 import LocationsManage from './Locations/Manage';
 import PricesManage from './Prices/Manage';
 import SchedulesManage from './Schedule/Manage';
@@ -10,6 +11,7 @@ import UnavailableManage from './Unavailable/Manage';
 export {
   Browse,
   Manage,
+  AlternatesBrowse,
   LocationsManage,
   PricesManage,
   SchedulesManage,

package/package.json

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