@autobusal/operator-routes 1.0.4 → 1.0.5

package/Locations/Add/Add.tsx

@@ -0,0 +1,71 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { FiPlus } from 'react-icons/fi';
+import { Button } from '@autobusal/common';
+import { Validate, Display, success } from '@autobusal/utilities';
+import Loading from './Loading';
+import { getStops } from '../utilities';
+import { Container, Title, ContainerAdd, Choose, Notice } from './styles';
+import { AddForm } from '../types';
+import { GetStops, AddLocation } from '../services';
+
+interface Props {
+  routeId: number
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Add = ({ routeId, t, onReload }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<AddForm>();
+
+  const { data, isLoading } = GetStops(routeId);
+
+  const { mutate: Save, isPending } = AddLocation(routeId);
+
+  if (isLoading) {
+    return <Loading t={ t } />;
+  }
+
+  const onSubmit = (data: AddForm): void => {
+    Save(data, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.added', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+
+  return (
+    <Container className="box">
+      <Title>{ t('locations_manage.add_city.title', { ns: 'common' }) }</Title>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <ContainerAdd>
+          <Choose>
+            <select { ...register('group_id', Validate('required', t)) }>
+              { getStops(t, data) }
+            </select>
+
+            { Display(errors.group_id) }
+          </Choose>
+
+          <Button
+            loading={ isPending }
+            text={
+              <>
+                <FiPlus />
+                { t('locations_manage.add_city.action', { ns: 'common' }) }
+              </>
+            }
+            noMargin
+          />
+        </ContainerAdd>
+
+        <Notice>{ t('locations_manage.add_city.notice', { ns: 'common' }) }</Notice>
+      </form>
+    </Container>
+  );
+};
+
+export default Add;

package/Locations/Add/Loading.tsx

@@ -0,0 +1,17 @@
+import { TFunction } from 'i18next';
+import { Inline } from '@autobusal/common';
+import { Container, Title } from './styles';
+
+interface Props {
+  t: TFunction<'normal'>
+}
+
+const Loading = ({ t }: Props): JSX.Element => (
+  <Container className="box">
+    <Title>{ t('locations_manage.add_city.title', { ns: 'common' }) }</Title>
+
+    <Inline text={ t('locations_manage.add_city.loading', { ns: 'common' }) } />
+  </Container>
+);
+
+export default Loading;

package/Locations/Add/styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 25px;
+`;
+
+export const Title = styled.h5`
+  margin-bottom: 10px;
+  padding-bottom: 15px;
+  font-size: ${ props => props.theme.size.m };
+  border-bottom: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const ContainerAdd = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 20px;
+
+  @media (min-width: 640px) {
+    flex-direction: row;
+  }
+`;
+
+export const Choose = styled.div`
+  flex: 1;
+  width: 100%;
+`;
+
+export const Notice = styled.div`
+  margin-top: 15px;
+  font-size: ${ props => props.theme.size.xs };
+  color: ${ props => props.theme.font.info };
+  text-align: center;
+
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+`;

package/Locations/Browse/Actions.tsx

@@ -0,0 +1,90 @@
+import { TFunction } from 'i18next';
+import { FiArrowDownCircle, FiArrowUpCircle } from 'react-icons/fi';
+import { BiEditAlt, BiTrash } from 'react-icons/bi';
+import { Button } from '@autobusal/common';
+import { ContainerActions, Group } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+interface Props {
+  item: LocationData
+  loading: boolean
+  t: TFunction<'normal'>
+  onMove: (order: number) => void
+  onDelete: () => void
+}
+
+const Actions = ({ item, loading, t, onMove, onDelete }: Props): JSX.Element => {
+  const onChange = (type: 'up' | 'down'): void => {
+    if (!window.confirm(t('locations_manage.actions.move', { ns: 'common' }))) {
+      return;
+    }
+
+    const order = type === 'up' ? item.order_id - 1 : item.order_id + 1;
+
+    onMove(order);
+  };
+
+  const onAskDelete = (): void => {
+    if (window.confirm(t('locations_manage.actions.delete', { ns: 'common' }))) {
+      onDelete();
+    }
+  };
+
+  return (
+    <ContainerActions>
+      <Group>
+        <Button
+          type="button"
+          loading={ loading }
+          subtype="secondary"
+          size="small"
+          text={ <FiArrowUpCircle /> }
+          noMargin
+          onClick={ () => onChange('up') }
+        />
+
+        <Button
+          type="button"
+          subtype="secondary"
+          loading={ loading }
+          size="small"
+          text={ <FiArrowDownCircle /> }
+          noMargin
+          onClick={ () => onChange('down') }
+        />
+      </Group>
+
+      <Group>
+        <Button
+          type="submit"
+          loading={ loading }
+          size="small"
+          text={
+            <>
+              <BiEditAlt />
+              { t('table.actions.update', { ns: 'common' }) }
+            </>
+          }
+          noMargin
+        />
+
+        <Button
+          type="button"
+          loading={ loading }
+          size="small"
+          subtype="delete"
+          text={
+            <>
+              <BiTrash />
+              { t('table.actions.delete', { ns: 'common' }) }
+            </>
+          }
+          noMargin
+          onClick={ onAskDelete }
+        />
+      </Group>
+    </ContainerActions>
+  );
+};
+
+export default Actions;

package/Locations/Browse/Browse.tsx

@@ -0,0 +1,45 @@
+import { TFunction } from 'i18next';
+import Item from './Item';
+import { Items, NotFound } from './styles';
+import { LocationData } from '@autobusal/providers/types/locations';
+
+interface Props {
+  routeId: number
+  data?: LocationData[]
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Browse = ({ routeId, data, t, onReload }: Props): JSX.Element => {
+  if (data === undefined || data.length === 0) {
+    return (
+      <NotFound className="box">
+        { t('locations_manage.no_locations', { ns: 'common' }) }
+      </NotFound>
+    );
+  }
+
+  const items = data.map(item => (
+    <Item
+      key={ item.id }
+      item={ item }
+      routeId={ routeId }
+      t={ t }
+      onReload={ onReload }
+      />
+  ));
+
+  return (
+    <>
+      <h2>
+        { t('locations_manage.browse', { ns: 'common' }) }
+      </h2>
+
+      <Items>
+        { items }
+      </Items>
+    </>
+  );
+};
+
+export default Browse;

package/Locations/Browse/Item.tsx

@@ -0,0 +1,92 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { Validate, Display, success } from '@autobusal/utilities';
+import Actions from './Actions';
+import { getTomorrow } from '../utilities';
+import { Data } from './styles';
+import { LocationForm } from '../types';
+import { LocationData } from '@autobusal/providers/types/locations';
+import { PostMove, DeleteLocation, PostUpdate } from '../services';
+
+interface Props {
+  routeId: number
+  item: LocationData
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Item = ({ routeId, item, t, onReload }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<LocationForm>();
+
+  const { mutate: Save, isPending: isPendingUpdate } = PostUpdate(routeId, item.id);
+
+  const { mutate: Move, isPending: isPendingMove } = PostMove(routeId, item.id);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteLocation(routeId, item.id);
+
+  const onSubmit = (data: LocationForm): void => {
+    Save(data);
+  };
+
+  const onMove = (order: number): void => {
+    Move(order, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.moved', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete({}, {
+      onSuccess: () => {
+        success(t('locations_manage.messages.deleted', { ns: 'common' }));
+
+        onReload();
+      }
+    });
+  };
+  
+  return (
+    <div className="box">
+      <h4>{ item.city.country?.name } &rsaquo; { item.city.name } &rsaquo; { item.stop?.name }</h4>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Data>
+          <div className="row">
+            { t('locations_manage.city.tomorrow', { ns: 'common' }) }
+
+            <select defaultValue={ item.tomorrow } { ...register('tomorrow') }>
+              { getTomorrow(t) }
+            </select>
+          </div>
+
+          <div className="row">
+            { t('locations_manage.city.departure', { ns: 'common' }) }
+
+            <input type="text" defaultValue={ item.departure } { ...register('departure', Validate('required', t)) } />
+            { Display(errors.departure) }
+          </div>
+
+          <div className="row">
+            { t('locations_manage.city.arrival', { ns: 'common' }) }
+
+            <input type="text" defaultValue={ item.arrival } { ...register('arrival', Validate('required', t)) } />
+            { Display(errors.arrival) }
+          </div>
+        </Data>
+
+        <Actions
+          item={ item }
+          loading={ isPendingMove || isPendingDelete || isPendingUpdate }
+          t={ t }
+          onMove={ onMove }
+          onDelete={ onDelete }
+        />
+      </form>
+    </div>
+  );
+};
+
+export default Item;

package/Locations/Browse/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+export const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const NotFound = styled.div`
+  margin-top: 15px;
+  padding: 30px 0;
+  color: ${ props => props.theme.font.neutral };
+  text-align: center;
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const Data = styled.div`
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+
+  @media (min-width: 480px) {
+    flex-direction: row;
+    gap: 15px;
+  }
+`;
+
+export const ContainerActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Group = styled.div`
+  display: flex;
+  gap: 10px;
+`;

package/Locations/Manage.tsx

@@ -0,0 +1,44 @@
+import { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { Meta, BackWithTitle, Report } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import Add from './Add/Add';
+import Browse from './Browse/Browse';
+import { GetLocations } 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, refetch } = GetLocations(id);
+
+  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 } />
+
+      <Add routeId={ id } t={ t } onReload={ onReload } />
+
+      <Report margin={ 15 } question={ t('locations_manage.report', { ns: 'common' }) } type="location" t={ t } />
+
+      <Browse routeId={ id } data={ data?.locations } t={ t } onReload={ onReload } />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Locations/services.ts

@@ -0,0 +1,105 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { CountryData } from '@autobusal/providers/types/locations';
+import { AddForm, LocationForm } from './types';
+
+export const GetLocations = (id: number): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: ['operator-locations', { id }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/locations/operator/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetStops = (routeId: number): UseQueryResult<CountryData[]> => (
+  useQuery({
+    queryKey: ['operator-stops', { routeId }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/stops/operator/browse', {
+          params: {
+            route_id: routeId
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const AddLocation = (id: number): UseMutationResult<void, Error, AddForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-add', { id }],
+    mutationFn: async (data: AddForm) => {
+      await apiClient
+        .post('/api/locations/operator/add', {
+          ...data,
+          id
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);
+
+export const PostMove = (id: number, location_id: number): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-move', { id, location_id }],
+    mutationFn: async (order: number) => (
+      await apiClient
+        .post('/api/locations/operator/move', {
+          order,
+          id,
+          location_id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteLocation = (id: number, location_id: number): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['operator-locations-delete', { id, location_id }],
+    mutationFn: async () => (
+      await apiClient
+        .delete('/api/locations/operator/delete', {
+          params: {
+            id,
+            location_id
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostUpdate = (id: number, location_id: number): UseMutationResult<void, Error, LocationForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-locations-update', { id, location_id }],
+    mutationFn: async (data: LocationForm) => (
+      await apiClient
+        .post('/api/locations/operator/update', {
+          ...data,
+          id,
+          location_id
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Locations/types.ts

@@ -0,0 +1,9 @@
+export interface AddForm {
+  group_id: string
+}
+
+export interface LocationForm {
+  tomorrow: number
+  departure: string
+  arrival: string
+}

package/Locations/utilities.tsx

@@ -0,0 +1,53 @@
+import { TFunction } from 'i18next';
+import { CityData, CountryData } from '@autobusal/providers/types/locations';
+
+export const getStops = (t: TFunction<'normal'>, countries?: CountryData[]): JSX.Element[] => {
+  const options: JSX.Element[] = [
+    <option key="-none=" value="">{ t('locations_manage.add_city.choose', { ns: 'common' }) }</option>
+  ];
+
+  countries?.forEach(country => {
+    options.push(
+      <optgroup key={ country.id } label={ country.name }>
+        { getOptions(country.cities) }
+      </optgroup>
+    );
+  });
+
+  return options;
+};
+
+const getOptions = (cities?: CityData[]): JSX.Element[] => {
+  const options: JSX.Element[] = [];
+
+  cities?.forEach(city => {
+    city.stops?.forEach(stop => {
+      const value = `${ city.id }#${ stop.id }`;
+
+      options.push(
+        <option key={ value } value={ value }>{ city.name } &rsaquo; { stop.name }</option>
+      );
+    });
+  });
+
+  return options;
+};
+
+export const getTomorrow = (t: TFunction<'normal'>): JSX.Element[] => {
+  const available = [
+    { name: t('locations_manage.tomorrow.same_day', { ns: 'common' }), value: 0 },
+    { name: t('locations_manage.tomorrow.1_day', { ns: 'common' }), value: 1 },
+    { name: t('locations_manage.tomorrow.2_days', { ns: 'common' }), value: 2 },
+    { name: t('locations_manage.tomorrow.3_days', { ns: 'common' }), value: 3 },
+    { name: t('locations_manage.tomorrow.4_days', { ns: 'common' }), value: 4 },
+    { name: t('locations_manage.tomorrow.5_days', { ns: 'common' }), value: 5 },
+    { name: t('locations_manage.tomorrow.6_days', { ns: 'common' }), value: 6 },
+    { name: t('locations_manage.tomorrow.7_days', { ns: 'common' }), value: 7 }
+  ];
+
+  const options = available.map(item => (
+    <option key={ item.value } value={ item.value }>{ item.name }</option>
+  ));
+
+  return options;
+};

package/Transiting/Countries.tsx

@@ -17,7 +17,7 @@ const Countries = ({ transiting, t, onDelete }: Props): JSX.Element => {
   }
 
   const onDeleteConfirm = (id: number): void => {
-    if (window.confirm(t('private.transiting_manage.confirm'))) {
+    if (window.confirm(t('transiting_manage.confirm', { ns: 'confirm' }))) {
       onDelete(id);
     }
   };

package/index.ts

@@ -1,5 +1,6 @@
 import Browse from './Browse';
 import Manage from './Manage';
+import LocationsManage from './Locations/Manage';
 import SchedulesManage from './Schedule/Manage';
 import TransitingManage from './Transiting/Manage';
 import UnavailableBrowse from './Unavailable/Browse';
@@ -8,6 +9,7 @@ import UnavailableManage from './Unavailable/Manage';
 export {
   Browse,
   Manage,
+  LocationsManage,
   SchedulesManage,
   TransitingManage,
   UnavailableBrowse,

package/package.json

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