@autobusal/operator-routes 1.0.2 → 1.0.3

package/Transiting/Countries.tsx

@@ -0,0 +1,42 @@
+import { TFunction } from 'i18next';
+import { BiTrash } from 'react-icons/bi';
+import { Container, Item, ButtonDelete } from './styles';
+import { TransitingData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  transiting: TransitingData[]
+  t: TFunction<'normal'>
+  onDelete: (id: number) => void
+}
+
+const Countries = ({ transiting, t, onDelete }: Props): JSX.Element => {
+  if (transiting.length == 0) {
+    return (
+      <>-</>
+    );
+  }
+
+  const onDeleteConfirm = (id: number): void => {
+    if (window.confirm(t('private.transiting_manage.confirm'))) {
+      onDelete(id);
+    }
+  };
+
+  const items = transiting.map(item => (
+    <Item key={ item.id }>
+      { item.country.name }
+
+      <ButtonDelete type="button" onClick={ () => onDeleteConfirm(item.country.id) }>
+        <BiTrash />
+      </ButtonDelete>
+    </Item>
+  ));
+
+  return (
+    <Container>
+      { items }
+    </Container>
+  );
+};
+
+export default Countries;

package/Transiting/Manage.tsx

@@ -0,0 +1,93 @@
+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 { success } from '@autobusal/utilities';
+import Countries from './Countries';
+import { filterCountries } from './utilities';
+import { TransitingData } from '@autobusal/providers/types/routes';
+import { GetTransiting, PostTransiting, DeleteTransiting } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  url = url.replace('[id]', String(id));
+
+  usePage('routes');
+
+  const { data: CountriesData, isLoading } = useCountries('available');
+
+  const { data, refetch } = GetTransiting(id);
+
+  const { mutate: Update, isPending: isPendingSave } = PostTransiting(id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteTransiting(id);
+
+  if (id === 0) {
+    return <Navigate to={ url } />;
+  }
+
+  if (isLoading) {
+    return <Box />;
+  }
+
+  const onSave = (data: TransitingData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('transiting_manage.messages.saved', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  const onDelete = (id: number): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('transiting_manage.messages.deleted', { ns: 'common' }));
+
+        refetch();
+      }
+    });
+  };
+
+  const title = t('transiting_manage.title', { name: data?.name, ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('transiting_manage.transiting', { ns: 'common' }),
+          type: 'component',
+          name: 'transiting',
+          value: <Countries transiting={ data?.transiting ?? [] } t={ t } onDelete={ onDelete } />
+        }, {}, {
+          label: t('transiting_manage.countries', { ns: 'common' }),
+          name: 'country_id',
+          type: 'select',
+          values: filterCountries(data?.transiting ?? [], CountriesData),
+          value: 0,
+          rules: 'required|min:1'
+        }] }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={ [
+          'add'
+        ]}
+        onSave={ onSave }
+      />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Transiting/services.ts

@@ -0,0 +1,52 @@
+import { UseMutationResult, UseSuspenseQueryResult, useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData, TransitingData } from '@autobusal/providers/types/routes';
+
+export const GetTransiting = (id: number): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: ['operator-transiting', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/transiting/operator/browse', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostTransiting = (id: number): UseMutationResult<void, Error, TransitingData, unknown> => (
+  useMutation({
+    mutationKey: ['operator-transiting-save', { id }],
+    mutationFn: async (data: TransitingData) => (
+      await apiClient
+        .post('/api/transiting/operator/update', {
+          ...data,
+          id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteTransiting = (id: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-transiting-delete'],
+    mutationFn: async (countryId: number) => (
+      await apiClient
+        .delete('/api/transiting/operator/delete', {
+          params: {
+            id,
+            country_id: countryId
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Transiting/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;
+
+export const Item = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 10px;
+  font-weight: 700;
+  border: 1px solid ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const ButtonDelete = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: ${ props => props.theme.font.error };
+  font-size: ${ props => props.theme.size.l };
+`;

package/Transiting/utilities.ts

@@ -0,0 +1,11 @@
+import { CountryData } from '@autobusal/providers/types/locations';
+import { DropdownData } from '@autobusal/providers/types/other';
+import { TransitingData } from '@autobusal/providers/types/routes';
+
+export const filterCountries = (transiting: TransitingData[], countries?: CountryData[]): DropdownData[] => {
+  const ids = transiting.map(item => item.country.id);
+
+  const available = countries?.filter(item => !ids.includes(item.id));
+
+  return available ?? [];
+};

package/index.ts

@@ -1,9 +1,11 @@
 import Browse from './Browse';
 import Manage from './Manage';
 import SchedulesManage from './Schedule/Manage';
+import TransitingManage from './Transiting/Manage';
 
 export {
   Browse,
   Manage,
-  SchedulesManage
+  SchedulesManage,
+  TransitingManage
 };

package/package.json

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