@autobusal/operator-routes 1.0.3 → 1.0.4

package/Unavailable/Browse.tsx

@@ -0,0 +1,72 @@
+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 { GetUnavailableDates, DeleteUnavailable } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  url = url.replace('[id]', String(id));
+
+  usePage('routes');
+
+  const { data, isLoading, isFetching, refetch } = GetUnavailableDates(id);
+
+  const { mutate: Delete } = DeleteUnavailable(id);
+
+  if (id === 0) {
+    return <Navigate to={ url } />;
+  }
+
+  const onDelete = (id: number): void => {
+    Delete(id, {
+      onSuccess: () => refetch()
+    });
+  };
+
+  const rows = data?.unavailable.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        `${ item.start_inactive } - ${ item.end_inactive }`
+      ] }
+    />
+  ));
+
+  const title = t('unavailable.browse.title', { name: data?.name, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Table
+        url={ `/operator/routes/unavailable/${ id }` }
+        columns={ [{
+          name: t('unavailable.browse.date', { ns: 'common' }),
+          width: 90
+        }] }
+        rows={ rows }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'create', 'view', 'delete'
+        ] }
+        handlers={ {
+          delete: onDelete
+        } }
+      />
+    </Meta>
+  );
+};
+
+export default Browse;

package/Unavailable/Manage.tsx

@@ -0,0 +1,91 @@
+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 { success } from '@autobusal/utilities';
+import { UnavailableData } from '@autobusal/providers/types/routes';
+import { GetUnavailable, PostUnavailable, DeleteUnavailable } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+  const routeId = Number(params.route_id);
+
+  url = url.replace('[routeId]', String(routeId));
+
+  usePage('routes');
+
+  const navigate = useNavigate();
+
+  const { data } = GetUnavailable(routeId, id);
+
+  const { mutate: Update, isPending: isPendingSave } = PostUnavailable(routeId, id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteUnavailable(routeId);
+
+  if (routeId === 0) {
+    return <Navigate to={ url } />;
+  }
+
+  const onSave = (data: UnavailableData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('unavailable.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('unavailable.manage.messages.deleted', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  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 (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('unavailable.manage.start_inactive', { ns: 'common' }),
+          name: 'start_inactive',
+          type: 'picker',
+          value: unavailable?.start_inactive,
+          rules: 'required'
+        }, {
+          label: t('unavailable.manage.end_inactive', { ns: 'common' }),
+          name: 'end_inactive',
+          type: 'picker',
+          value: unavailable?.end_inactive,
+          rules: 'required'
+        }] }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={ [
+          'save', 'delete'
+        ]}
+        onSave={ onSave }
+        onDelete={ onDelete }
+      />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Unavailable/services.ts

@@ -0,0 +1,72 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { UnavailableData } from '@autobusal/providers/types/routes';
+
+export const GetUnavailableDates = (id: number): UseQueryResult<RouteData> => (
+  useQuery({
+    queryKey: ['operators-unavailable', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/unavailable/operator/browse', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetUnavailable = (routeId: number, id: number): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: ['operator-unavailable-manage', { routeId, id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/unavailable/operator/get', {
+          params: {
+            route_id: routeId,
+            id
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostUnavailable = (routeId: number, id: number): UseMutationResult<void, Error, UnavailableData, unknown> => (
+  useMutation({
+    mutationKey: ['unavailable-operator-save', { routeId, id }],
+    mutationFn: async (data: UnavailableData) => (
+      await apiClient
+        .post('/api/unavailable/operator/update', {
+          ...data,
+          route_id: routeId,
+          id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteUnavailable = (routeId: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['unavailable-operator-delete', { routeId }],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .delete('/api/unavailable/operator/delete', {
+          params: {
+            route_id: routeId,
+            id
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/index.ts

@@ -2,10 +2,14 @@ import Browse from './Browse';
 import Manage from './Manage';
 import SchedulesManage from './Schedule/Manage';
 import TransitingManage from './Transiting/Manage';
+import UnavailableBrowse from './Unavailable/Browse';
+import UnavailableManage from './Unavailable/Manage';
 
 export {
   Browse,
   Manage,
   SchedulesManage,
-  TransitingManage
+  TransitingManage,
+  UnavailableBrowse,
+  UnavailableManage
 };

package/package.json

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