@autobusal/operator-routes 1.0.5 → 1.0.7

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 '../../../modules/OperatorRoutes/Alternates/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/Browse/Browse.tsx

@@ -0,0 +1,33 @@
+import { TFunction } from 'i18next';
+import Item from './Item';
+import { Items } from './styles';
+import { PriceData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  data?: PriceData[]
+  name: string
+  t: TFunction<'normal'>
+}
+
+const Browse = ({ id, type, data, name, t }: Props): JSX.Element | JSX.Element[] | undefined => {
+  const items = data?.map(item => (
+    <Item
+      key={ item.id }
+      id={ id }
+      type={ type }
+      item={ item }
+      name={ name }
+      t={ t }
+    />
+  ));
+
+  return (
+    <Items>
+      { items }
+    </Items>
+  );
+};
+
+export default Browse;

package/Prices/Browse/Item.tsx

@@ -0,0 +1,106 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { BiEditAlt } from 'react-icons/bi';
+import { Button } from '@autobusal/common';
+import { Validate, Display, success } from '@autobusal/utilities';
+import { Prices, Actions } from './styles';
+import { PriceData } from '@autobusal/providers/types/routes';
+import { PriceForm } from '../types';
+import { PostPrice } from '../services';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  item: PriceData
+  name: string
+  t: TFunction<'normal'>
+}
+
+const Item = ({ id, type, item, name, t }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors } } = useForm<PriceForm>();
+
+  const { mutate: Save, isPending } = PostPrice(id, item.id, type, name);
+
+  const onSubmit = (data: PriceForm): void => {
+    Save(data, {
+      onSuccess: () => success(t('prices_manage.messages.saved', { ns: 'common' }))
+    });
+  };
+
+  return (
+    <div className="box">
+      <h4>
+        { item.from.city.name } ({ item.from.city.country?.name }) &rsaquo; { item.to.city.name } ({ item.to.city.country?.name })
+      </h4>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Prices>
+          <div className="row">
+            { t('prices_manage.prices.adult', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.adult } { ...register('adult', Validate('required', t)) } />
+
+            { Display(errors.adult) }
+          </div>
+
+          <div className="row">
+            { t('prices_manage.prices.child', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.child } { ...register('child', Validate('required', t)) } />
+
+            { Display(errors.child) }
+          </div>
+
+          <div className="row">
+            { t('prices_manage.prices.baby', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.baby } { ...register('baby', Validate('required', t)) } />
+
+            { Display(errors.baby) }
+          </div>
+        </Prices>
+
+        <Prices>
+          <div className="row">
+            { t('prices_manage.prices.adult_return', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.adult_return } { ...register('adult_return', Validate('required', t)) } />
+
+            { Display(errors.adult_return) }
+          </div>
+
+          <div className="row">
+            { t('prices_manage.prices.child_return', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.child_return } { ...register('child_return', Validate('required', t)) } />
+
+            { Display(errors.child_return) }
+          </div>
+        
+          <div className="row">
+            { t('prices_manage.prices.baby_return', { ns: 'common' }) }
+
+            <input type="number" defaultValue={ item.baby_return } { ...register('baby_return', Validate('required', t)) } />
+
+            { Display(errors.baby_return) }
+          </div>
+        </Prices>
+
+        <Actions>
+          <Button
+            type="submit"
+            loading={ isPending }
+            text={
+              <>
+                <BiEditAlt />
+                { t('table.actions.update', { ns: 'common' }) }
+              </>
+            }
+          />
+        </Actions>
+      </form>
+    </div>
+  );
+};
+
+export default Item;

package/Prices/Browse/styles.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Items = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;
+
+export const Prices = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  @media (min-width: 540px) {
+    flex-direction: row;
+    gap: 15px;
+  }
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: center;
+`;

package/Prices/Manage.tsx

@@ -0,0 +1,65 @@
+import { TFunction } from 'i18next';
+import { useParams } from 'react-router-dom';
+import { Meta, BackWithTitle } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import Options from './Options/Options';
+import Schedule from './Schedule/Schedule';
+import Browse from './Browse/Browse';
+import { GetPrices } from './services';
+
+interface Props {
+  type: 'normal' | 'alternate'
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ type, url, t }: Props): JSX.Element => {
+  const params = useParams();
+
+  const id = Number(params.id);
+  const name = String(params.name ?? '');
+
+  url = url.replace('[id]', String(id));
+  
+  usePage('routes');
+
+  const { data, refetch } = GetPrices(id, type, 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;
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <div className="route-prices">
+        <Options
+          id={ id }
+          type={ type }
+          name={ name }
+          t={ t }
+          onReload={ onReload }
+        />
+
+        { type === 'alternate' && (
+          <Schedule
+            id={ id }
+            data={ data?.alternates }
+            name={ name }
+            t={ t }
+          />
+        ) }
+
+        <Browse id={ id } type={ type } data={ prices } name={ name } t={ t } />
+      </div>
+    </Meta>
+  );
+};
+
+export default Manage;

package/Prices/Options/Options.tsx

@@ -0,0 +1,63 @@
+import { useState, useRef } from 'react';
+import { TFunction } from 'i18next';
+import { FaCaretDown } from 'react-icons/fa';
+import { Inline } from '@autobusal/common';
+import { useOutside } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import { Container, ButtonMore, Submenu, ButtonOption, Loading } from './styles';
+import { PostCopy } from '../services';
+
+interface Props {
+  id: number
+  type: 'normal' | 'alternate'
+  name: string
+  t: TFunction<'normal'>
+  onReload: () => void
+}
+
+const Options = ({ id, type, name, t, onReload }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  const ref = useRef(null);
+
+  const { mutate: Copy, isPending } = PostCopy(id, type, name);
+
+  useOutside(ref, () => setShow(false));
+
+  const onCopy = (): void => {
+    if (window.confirm(t('prices_manage.options.copy.ask', { ns: 'common' }))) {
+      Copy({}, {
+        onSuccess: () => {
+          success(t('prices_manage.messages.copied', { ns: 'common' }));
+
+          onReload();
+        }
+      });
+    }
+  };
+
+  if (isPending) {
+    return (
+      <Loading>
+        <Inline text={ t('prices_manage.options.copy.loading', { ns: 'common' }) } />
+      </Loading>
+    );
+  }
+
+  return (
+    <Container ref={ ref }>
+      <ButtonMore onClick={ () => setShow(true) }>
+        { t('prices_manage.options.more', { ns: 'common' }) }
+        <FaCaretDown />
+      </ButtonMore>
+
+      { show && (
+        <Submenu>
+          <ButtonOption onClick={ onCopy }>{ t('prices_manage.options.copy.text', { ns: 'common' }) }</ButtonOption>
+        </Submenu>
+      ) }
+    </Container>
+  );
+};
+
+export default Options;

package/Prices/Options/styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  margin-bottom: 10px;
+`;
+
+export const ButtonMore = styled.button`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  color: ${ props => props.theme.font.info };
+  font-size: ${ props => props.theme.size.xs };
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+
+export const Submenu = styled.div`
+  position: absolute;
+  top: 25px;
+  right: 0;
+  width: 200px;
+  padding: 5px;
+  background: ${ props => props.theme.submenu.transparent };
+  border-radius: ${ props => props.theme.borderRadius };
+  box-shadow: ${ props => props.theme.boxShadow };
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+`;
+
+export const ButtonOption = styled.button`
+  display: block;
+  width: 100%;
+  padding: 5px 10px;
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.submenu.font };
+  border-radius: ${ props => props.theme.borderRadius };
+
+  &:hover {
+    background: ${ props => props.theme.submenu.hover };
+  }
+`;
+
+export const Loading = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 25px 0;
+`;

package/Prices/Schedule/Schedule.tsx

@@ -0,0 +1,93 @@
+import { TFunction } from 'i18next';
+import { useForm } from 'react-hook-form';
+import { BiEditAlt } from 'react-icons/bi';
+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 '../../Alternates/services';
+import { ScheduleForm } from '../types';
+
+interface Props {
+  id: number
+  data?: AlternateData[]
+  name: string
+  t: TFunction<'normal'>
+}
+
+const Schedule = ({ id, data, name, t }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<ScheduleForm>();
+
+  // we get the 1st value, as they're identical
+  const details = data !== undefined ? data[0] : undefined;
+
+  const { mutate: Save, isPending } = PostSchedule(id, name);
+
+  const onSubmit = (data: ScheduleForm): void => {
+    Save(data, {
+      onSuccess: () => success(t('alternates.manage.messages.saved', { ns: 'common' }))
+    });
+  };
+
+  return (
+    <Container className="box">
+      <h2>{ t('alternates.manage.title', { ns: 'common' }) }</h2>
+
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Dates>
+          <div className="row">
+            { t('alternates.manage.from', { ns: 'common' }) }
+
+            <Calendar
+              type="picker"
+              name="date_from"
+              defaultValue={ details?.date_from }
+              t={ t }
+              validation="required"
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { Display(errors.date_from) }
+          </div>
+
+          <div className="row">
+            { t('alternates.manage.to', { ns: 'common' }) }
+
+            <Calendar
+              type="picker"
+              name="date_to"
+              defaultValue={ details?.date_to }
+              t={ t }
+              validation="required"
+              refs={ register }
+              onUpdate={ setValue }
+            />
+
+            { Display(errors.date_to) }
+          </div>
+        </Dates>
+
+        <div className="row">
+          <label>
+            <input type="checkbox" value="1" defaultChecked={ details?.offer } { ...register('offer') } />&nbsp;
+            { t('alternates_manage.offer', { ns: 'common' }) }
+          </label>
+        </div>
+
+        <Button
+          type="submit"
+          loading={ isPending }
+          text={
+            <>
+              <BiEditAlt />
+              { t('table.actions.update', { ns: 'common' }) }
+            </>
+          }
+        />
+      </form>
+    </Container>
+  );
+};
+
+export default Schedule;

package/Prices/Schedule/styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin-bottom: 50px;
+`;
+
+export const Dates = styled.div`
+  display: flex;
+  gap: 15px;
+`;

package/Prices/services.ts

@@ -0,0 +1,59 @@
+import { UseMutationResult, UseSuspenseQueryResult, useMutation, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { PriceForm } from './types';
+
+export const GetPrices = (id: number, type: string, name: string): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: [`operator-prices-${ type }`, { id, type, name }],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/prices/operator/get', {
+          params: {
+            id,
+            type,
+            name
+          }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostPrice = (id: number, price_id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void, Error, PriceForm, unknown> => (
+  useMutation({
+    mutationKey: ['operator-prices-save', { id, price_id, type, name }],
+    mutationFn: async (data: PriceForm) => (
+      await apiClient
+        .post('/api/prices/operator/update', {
+          ...data,
+          id,
+          price_id,
+          type,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostCopy = (id: number, type: ('normal' | 'alternate'), name: string): UseMutationResult<void> => (
+  useMutation({
+    mutationKey: ['operator-prices-copy', { id, type, name }],
+    mutationFn: async () => (
+      await apiClient
+        .post('/api/prices/operator/copy', {
+          id,
+          type,
+          name
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/Prices/types.ts

@@ -0,0 +1,14 @@
+export interface PriceForm {
+  adult: number
+  child: number
+  baby: number
+  adult_return: number
+  child_return: number
+  baby_return: number
+}
+
+export interface ScheduleForm {
+  date_from: string
+  date_to: string
+  offer: number
+}

package/index.ts

@@ -1,6 +1,8 @@
 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';
 import TransitingManage from './Transiting/Manage';
 import UnavailableBrowse from './Unavailable/Browse';
@@ -9,7 +11,9 @@ import UnavailableManage from './Unavailable/Manage';
 export {
   Browse,
   Manage,
+  AlternatesBrowse,
   LocationsManage,
+  PricesManage,
   SchedulesManage,
   TransitingManage,
   UnavailableBrowse,

package/package.json

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