@autobusal/operator-routes 1.0.0

package/Browse.tsx

@@ -0,0 +1,79 @@
+import { TFunction } from 'i18next';
+import { useSearchParams } from 'react-router-dom';
+import { Meta, Table, Row } from '@autobusal/common';
+import { usePage } from '@autobusal/hooks';
+import { getParams } from '@autobusal/utilities';
+import { Bags, Dates } from './Information';
+import { GetRoutes } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Browse = ({ url, t }: Props): JSX.Element => {
+  const [ searchParams ] = useSearchParams();
+
+  usePage('routes');
+
+  const { data, isLoading, isFetching } = GetRoutes(getParams(searchParams, ['page', 'sort', 'order', 'q']));
+
+  const rows = data?.data.map(item => (
+    <Row
+      key={ item.id }
+      id={ item.id }
+      data={ [
+        item.name,
+        item.code,
+        item.trip.bus?.name ?? '-',
+        <Bags key={ item.id } item={ item } t={ t } />,
+        <Dates key={ item.id } item={ item } t={ t } />
+      ] }
+    />
+  ));
+
+  return (
+    <Meta title={ t('operator_routes.browse.title.manage', { ns: 'common' }) }>
+      <h1>{ t('operator_routes.browse.title.manage', { ns: 'common' }) }</h1>
+
+      <Table
+        url={ url }
+        columns={ [{
+          name: t('operator_routes.browse.name', { ns: 'common' }),
+          width: 30,
+          slug: 'name',
+          type: 'az'
+        }, {
+          name: t('operator_routes.browse.code', { ns: 'common' }),
+          slug: 'code',
+          width: 10
+        }, {
+          name: t('operator_routes.browse.bus', { ns: 'common' }),
+          width: 10
+        }, {
+          name: t('operator_routes.browse.bags', { ns: 'common' }),
+          width: 20
+        }, {
+          name: t('operator_routes.browse.info', { ns: 'common' }),
+          slug: 'date',
+          width: 20
+        }] }
+        rows={ rows }
+        pages={ data }
+        sorting={ {
+          slug: 'name',
+          order: 'asc'
+        } }
+        search={ searchParams.get('q') }
+        loading={ isLoading }
+        fetching={ isFetching }
+        t={ t }
+        actions={ [
+          'create', 'search', 'view'
+        ] }
+      />
+    </Meta>
+  );
+};
+
+export default Browse;

package/Information.tsx

@@ -0,0 +1,46 @@
+import { TFunction } from 'i18next';
+import styled from 'styled-components';
+import { RouteData } from '@autobusal/providers/types/routes';
+
+interface Props {
+  item?: RouteData
+  t: TFunction<'common'>
+}
+
+export const Bags = ({ item, t }: Props): JSX.Element => (
+  <Container>
+    <div>
+      { t('operator_routes.browse.allowed.bags_no', { ns: 'common' }) }: <strong>{ item?.trip.bags_no_display }</strong>
+    </div>
+
+    <div>
+      { t('operator_routes.browse.allowed.bags_weight', { ns: 'common' }) }: <strong>{ item?.trip.bags_weight_display }</strong>
+    </div>
+  </Container>
+);
+
+export const Dates = ({ item, t }: Props): JSX.Element => (
+  <Container>
+    { item?.available.start_date && (
+      <div>
+        { t('operator_routes.browse.dates.start_date', { ns: 'common' }) }: <strong>{ item.available.start_date }</strong>
+      </div>
+    ) }
+
+    { item?.available.end_date && (
+      <div>
+        { t('operator_routes.browse.dates.end_date', { ns: 'common' }) }: <strong>{ item.available.end_date }</strong>
+      </div>
+    ) }
+    
+    { item?.available.schedule_display && (
+      <div>
+        { t('operator_routes.browse.dates.schedule', { ns: 'common' }) }: <strong>{ item.available.schedule_display }</strong>
+      </div>
+    ) }
+  </Container>
+);
+
+const Container = styled.div`
+  text-align: left;
+`;

package/Manage.tsx

@@ -0,0 +1,238 @@
+import { useState, useEffect } from 'react';
+import { TFunction } from 'i18next';
+import { useParams, useNavigate } from 'react-router-dom';
+import { RiMoneyEuroCircleLine } from 'react-icons/ri';
+import { FaMapMarkerAlt } from 'react-icons/fa';
+import { IoCalendarClearOutline } from 'react-icons/io5';
+import { Meta, BackWithTitle, Viewer } from '@autobusal/common';
+import { usePage, useBuses, useRouteFeatures, useOperatorDrivers } from '@autobusal/hooks';
+import { success } from '@autobusal/utilities';
+import Template from './Template';
+import Options from './Options';
+import Seating from './Seating';
+import { getType, getLanguagesExtended, getTemplates, getBusType, getSeatingType, getTransiting } from './utilities';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { GetRoute, PostRoute, DeleteRoute } from './services';
+
+interface Props {
+  url: string
+  t: TFunction<'common'>
+}
+
+const Manage = ({ url, t }: Props): JSX.Element => {
+  const [ seating, setSeating ] = useState<string>('');
+
+  const params = useParams();
+
+  const id = Number(params.id);
+
+  usePage('routes');
+
+  const navigate = useNavigate();
+
+  const { data } = GetRoute(id);
+
+  const { mutate: Update, isPending: isPendingSave } = PostRoute(id, seating);
+
+  const { mutate: Delete, isPending: isPendingDelete } = DeleteRoute();
+
+  const buses = useBuses();
+
+  const features = useRouteFeatures();
+
+  const drivers = useOperatorDrivers('id');
+
+  useEffect(() => {
+    setSeating(data?.trip.seating ?? 'free');
+  }, [data]);
+
+  const onSeating = (id: string): void => {
+    setSeating(id);
+  };
+
+  const onSave = (data: RouteData): void => {
+    Update(data, {
+      onSuccess: () => {
+        success(t('operator_routes.manage.messages.saved', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+
+  const onDelete = (): void => {
+    Delete(id, {
+      onSuccess: () => {
+        success(t('operator_routes.manage.messages.deleted', { ns: 'common' }));
+
+        navigate(url);
+      }
+    });
+  };
+  
+  const title = id > 0 ? t('operator_routes.manage.title.update', { name: data?.name, ns: 'common' }) : t('operator_routes.manage.title.new', { ns: 'common' });
+
+  return (
+    <Meta title={ title }>
+      <BackWithTitle title={ title } to={ url } t={ t } />
+
+      <Viewer
+        id={ id }
+        data={ [{
+          label: t('operator_routes.manage.name', { ns: 'common' }),
+          name: 'name',
+          type: 'text',
+          value: data?.name,
+          rules: 'required|min_length:2|max_length:250'
+        }, {
+          label: t('operator_routes.manage.code', { ns: 'common' }),
+          name: 'code',
+          type: 'display',
+          value: (data?.code ?? '-')
+        }, (
+          getType(id, (data?.type ?? ''), t)
+        ), {}, {
+          label: t('operator_routes.manage.seat_reservation', { ns: 'common' }),
+          type: 'component',
+          name: 'seating',
+          value: <Seating value={ seating } t={ t } onChange={ onSeating } />
+        }, {}, (
+          getBusType(buses, seating, t, data?.trip.bus?.id)
+        ) , (
+          getSeatingType(seating, t, data?.trip)
+        ), {} , {
+          label: t('operator_routes.manage.schedule.title', { ns: 'common' }),
+          name: 'schedule',
+          type: 'link',
+          value: (
+            <>
+              <IoCalendarClearOutline />
+              { t('operator_routes.manage.schedule.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/schedule/${ id }`
+        }, (
+          getTransiting(id, t, data?.type)
+        ), {
+          label: t('operator_routes.manage.unavailable.title', { ns: 'common' }),
+          name: 'unavailable',
+          type: 'link',
+          value: (
+            <>
+              <IoCalendarClearOutline />
+              { t('operator_routes.manage.unavailable.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/unavailable/${ id }`
+        }, {}, {
+          label: t('operator_routes.manage.features', { ns: 'common' }),
+          name: 'features',
+          type: 'checkbox-list',
+          selected: data?.trip?.features ?? [],
+          values: features
+        }, {}, {
+          label: t('operator_routes.manage.bags_no', { ns: 'common' }),
+          name: 'bags_no',
+          type: 'number',
+          value: data?.trip.bags_no,
+          rules: 'required|min:1'
+        }, {
+          label: t('operator_routes.manage.bags_weight', { ns: 'common' }),
+          name: 'bags_weight',
+          type: 'number',
+          value: data?.trip.bags_weight,
+          rules: 'required|min:1'
+        }, {}, {
+          label: t('operator_routes.manage.language', { ns: 'common' }),
+          name: 'language',
+          type: 'select',
+          values: getLanguagesExtended(),
+          value: data?.language,
+          rules: 'required'
+        }, {
+          label: t('operator_routes.manage.template', { ns: 'common' }),
+          name: 'template',
+          type: 'select',
+          values: getTemplates(t),
+          value: data?.template,
+          rules: 'required'
+        }, {}, {
+          label: t('operator_routes.manage.locations.title', { ns: 'common' }),
+          type: 'link',
+          name: 'locations',
+          value: (
+            <>
+              <FaMapMarkerAlt />
+              { t('operator_routes.manage.locations.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/locations/${ id }`
+        }, {
+          label: t('operator_routes.manage.prices.title', { ns: 'common' }),
+          type: 'link',
+          name: 'prices',
+          value: (
+            <>
+              <RiMoneyEuroCircleLine />
+              { t('operator_routes.manage.prices.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/prices/${ id }`
+        }, {
+          label: t('operator_routes.manage.alternate.title', { ns: 'common' }),
+          type: 'link',
+          name: 'prices_alternates',
+          value: (
+            <>
+              <RiMoneyEuroCircleLine />
+              { t('operator_routes.manage.alternate.link', { ns: 'common' }) }
+            </>
+          ),
+          url: `/operator/routes/alternates/${ id }`
+        }, {}, {
+          label: t('operator_routes.manage.drivers', { ns: 'common' }),
+          name: 'drivers',
+          type: 'checkbox-list-all',
+          selected: data?.drivers.registered ?? [],
+          values: drivers
+        }, {}, {
+          label: t('operator_routes.manage.searchable', { ns: 'common' }),
+          name: 'searchable',
+          type: 'checkbox',
+          value: data?.searchable
+        }, {}, {
+          label: t('operator_routes.manage.policies_en', { ns: 'common' }),
+          name: 'policies_en',
+          type: 'textarea-html',
+          value: data?.policies_en
+        }, {}, {
+          label: t('operator_routes.manage.policies_sq', { ns: 'common' }),
+          name: 'policies_sq',
+          type: 'textarea-html',
+          value: data?.policies_sq
+        }, {}, {
+          label: t('operator_routes.manage.ticket.template', { ns: 'common' }),
+          type: 'component',
+          name: 'template_preview',
+          value: <Template type={ data?.template } t={ t } />
+        }, {
+          label: t('operator_routes.manage.options.title', { ns: 'common' }),
+          type: 'component',
+          name: 'options',
+          value: (
+            <Options id={ id } t={ t } />
+          )
+        }] }
+        pending={ isPendingSave || isPendingDelete }
+        t={ t }
+        actions={ [
+          'save', 'delete'
+        ]}
+        onSave={ onSave }
+        onDelete={ onDelete }
+      />
+    </Meta>
+  );
+};
+
+export default Manage;

package/Options.tsx

@@ -0,0 +1,96 @@
+import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { AiOutlineCopy, AiOutlineReload } from 'react-icons/ai';
+import { Button } from '@autobusal/common';
+import { success } from '@autobusal/utilities';
+import { PostCopy } from './services';
+
+interface Props {
+  id: number
+  t: TFunction<'normal'>
+}
+
+const Options = ({ id, t }: Props): JSX.Element => {
+  const navigate = useNavigate();
+
+  const { mutate: Copy, isPending: isPendingCopy } = PostCopy(id);
+
+  const { mutate: Reverse, isPending: isPendingReverse } = PostCopy(id, true);
+
+  const onCopy = (): void => {
+    if (!window.confirm(t('operator_routes.manage.options.confirm', { ns: 'common' }))) {
+      return;
+    }
+
+    Copy({}, {
+      onSuccess: (data) => {
+        success(t('operator_routes.manage.messages.copied', { ns: 'common' }));
+
+        navigate(`/operator/routes/manage/${ data.id }`);
+      }
+    });
+  };
+
+  const onReverse = (): void => {
+    if (!window.confirm(t('operator_routes.manage.options.confirm', { ns: 'common' }))) {
+      return;
+    }
+
+    Reverse({}, {
+      onSuccess: (data) => {
+        success(t('operator_routes.manage.messages.reversed', { ns: 'common' }));
+
+        navigate(`/operator/routes/manage/${ data.id }`);
+      }
+    });
+  };
+
+  if (id === 0) {
+    return (
+      <>-</>
+    );
+  }
+
+  return (
+    <Container>
+      <Button
+        type="button"
+        size="small"
+        subtype="secondary"
+        loading={ isPendingCopy }
+        text={
+          <>
+            <AiOutlineCopy />
+            { t('operator_routes.manage.options.copy', { ns: 'common' }) }
+          </>
+        }
+        noMargin
+        onClick={ onCopy }
+      />
+
+      <Button
+        type="button"
+        size="small"
+        subtype="secondary"
+        loading={ isPendingReverse }
+        text={
+          <>
+            <AiOutlineReload />
+            { t('operator_routes.manage.options.reverse', { ns: 'common' }) }
+          </>
+        }
+        noMargin
+        onClick={ onReverse }
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+`;
+
+export default Options;

package/Seating.tsx

@@ -0,0 +1,29 @@
+import { TFunction } from 'i18next';
+import styled from 'styled-components';
+
+interface Props {
+  value?: string
+  t: TFunction<'normal'>
+  onChange: (id: string) => void
+}
+
+const Seating = ({ value, t, onChange }: Props): JSX.Element => (
+  <Container>
+    <label>
+      <input checked={ value === 'free' } type="radio" name="seating" onChange={ () => onChange('free') } />
+      { t('operator_routes.manage.seating.free', { ns: 'common' }) }
+    </label>
+
+    <label>
+      <input checked={ value === 'reservation' } type="radio" name="seating" onChange={ () => onChange('reservation') } />
+      { t('operator_routes.manage.seating.reservation', { ns: 'common' }) }
+    </label>
+  </Container>
+);
+
+const Container = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+export default Seating;

package/Template.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import styled from 'styled-components';
+import { RiEyeFill } from 'react-icons/ri';
+import { Button, Modal } from '@autobusal/common';
+import { GetSettings } from '@autobusal/providers/services';
+
+interface Props {
+  type?: string
+  t: TFunction<'normal'>
+}
+
+const Template = ({ type, t }: Props): JSX.Element => {
+  const [ show, setShow ] = useState<boolean>(false);
+
+  const { data } = GetSettings();
+
+  if (!type) {
+    return (
+      <>-</>
+    );
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        subtype="secondary"
+        size="small"
+        text={
+          <>
+            <RiEyeFill />
+            { t('operator_routes.manage.ticket.preview', { ns: 'common' }) }
+          </>
+        }
+        noMargin
+        onClick={ () => setShow(true) }
+      />
+
+      { show && (
+        <Modal
+          title={ t('operator_routes.manage.ticket.preview', { ns: 'common' }) }
+          width={ 900 }
+          content={
+            <Image src={ `${ data.url }/tickets/${ type }.png` } />
+          }
+          onClose={ () => setShow(false) }
+        />
+      ) }
+    </>
+  );
+};
+
+const Image = styled.img`
+  display: block;
+  width: 100%;
+`;
+
+export default Template;

package/index.ts

@@ -0,0 +1,7 @@
+import Browse from './Browse';
+import Manage from './Manage';
+
+export {
+  Browse,
+  Manage
+};

package/package.json

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

package/services.ts

@@ -0,0 +1,84 @@
+import { UseMutationResult, UseQueryResult, UseSuspenseQueryResult, useMutation, useQuery, useSuspenseQuery } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+import { RouteData } from '@autobusal/providers/types/routes';
+import { TableParamsData } from '@autobusal/providers/types/other';
+
+export const GetRoutes = (params: TableParamsData): UseQueryResult<PaginationData<RouteData>> => (
+  useQuery({
+    queryKey: ['operator-routes', params],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/routes/operator/browse', { params })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const GetRoute = (id: number): UseSuspenseQueryResult<RouteData> => (
+  useSuspenseQuery({
+    queryKey: ['operator-routes-manage', { id }],
+    queryFn: async () => {
+      if (id === 0) {
+        return null;
+      }
+
+      return await apiClient
+        .get('/api/routes/operator/get', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    }
+  })
+);
+
+export const PostRoute = (id: number, seating: string): UseMutationResult<void, Error, RouteData, unknown> => (
+  useMutation({
+    mutationKey: ['operator-routes-save', { id, seating }],
+    mutationFn: async (data: RouteData) => (
+      await apiClient
+        .post('/api/routes/operator/update', {
+          ...data,
+          id,
+          seating,
+          features: JSON.stringify(data.features),
+          drivers: JSON.stringify(data.drivers)
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const DeleteRoute = (): UseMutationResult<void, Error, number, unknown> => (
+  useMutation({
+    mutationKey: ['operator-routes-delete'],
+    mutationFn: async (id: number) => (
+      await apiClient
+        .delete('/api/routes/operator/delete', {
+          params: { id }
+        })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+export const PostCopy = (id: number, reverse?: boolean): UseMutationResult<RouteData> => (
+  useMutation({
+    mutationKey: [`operator-routes-copy${ reverse && '-reverse' }`, { id }],
+    mutationFn: async () => (
+      await apiClient
+        .post(`/api/routes/operator/${ reverse ? 'reverse' : 'copy' }`, { id })
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/utilities.tsx

@@ -0,0 +1,117 @@
+import { TFunction } from 'i18next';
+import { IoGlobeOutline } from 'react-icons/io5';
+import { getLanguages } from '@autobusal/utilities';
+import { DropdownData } from '@autobusal/providers/types/other';
+import { TripData } from '@autobusal/providers/types/routes';
+import { ViewData } from '@autobusal/common/Viewer/types';
+
+export const getType = (id: number, value: string, t: TFunction<'normal'>): ViewData => {
+  if (id === 0) {
+    return {
+      label: t('operator_routes.manage.type', { ns: 'common' }),
+      name: 'type',
+      type: 'select',
+      values: getOptionsTypes(t),
+      value,
+      rules: 'required|min_length:1'
+    };
+  }
+
+  return {
+    label: t('operator_routes.manage.type', { ns: 'common' }),
+    name: 'type',
+    type: 'display',
+    value
+  };
+};
+
+const getOptionsTypes = (t: TFunction<'common'>): DropdownData[] => ([
+  {
+    name: t('data.route_types.international', { ns: 'common' }),
+    id: 'international'
+  }, {
+    name: t('data.route_types.national', { ns: 'common' }),
+    id: 'national'
+  }
+]);
+
+export const getLanguagesExtended = (): DropdownData[] => {
+  const languages = getLanguages();
+
+  languages.push({
+    name: 'Gr',
+    id: 'gr'
+  });
+
+  return languages;
+};
+
+export const getTemplates = (t: TFunction<'normal'>): DropdownData[] => ([
+  {
+    name: t('operator_routes.manage.templates.standard', { ns: 'common' }),
+    id: 'standard'
+  }
+]);
+
+export const getBusType = (buses: DropdownData[], seating: string, t: TFunction<'normal'>, value?: number): ViewData => {
+  if (seating === 'free') {
+    return {
+      label: t('operator_routes.manage.bus.reservation', { ns: 'common' }),
+      name: 'bus_id',
+      type: 'display',
+      value: t('operator_routes.manage.bus.free', { ns: 'common' })
+    };
+  }
+
+  return {
+    label: t('operator_routes.manage.bus.title', { ns: 'common' }),
+    name: 'bus_id',
+    type: 'select',
+    values: buses,
+    value,
+    rules: 'required|min:1'
+  };
+};
+
+export const getSeatingType = (seating: string, t: TFunction<'normal'>, trip?: TripData): ViewData => {
+  if (seating === 'free') {
+    return {
+      label: t('operator_routes.manage.seats.available', { ns: 'common' }),
+      name: 'available_seats',
+      type: 'number',
+      value: trip?.available_seats,
+      rules: 'required|min:1'
+    };
+  }
+
+  return {
+    label: t('operator_routes.manage.seats.blocked', { ns: 'common' }),
+    name: 'blocked_seats',
+    type: 'number',
+    value: trip?.blocked_seats
+  };
+};
+
+export const getTransiting = (id: number, t: TFunction<'normal'>, type?: string): ViewData => {
+  if (type == 'national') {
+    return {
+      label: t('operator_routes.manage.transiting.title', { ns: 'common' }),
+      name: 'transiting',
+      type: 'display',
+      value: t('operator_routes.manage.transiting.cant', { ns: 'common' })
+    };
+  }
+
+  return {
+    label: t('operator_routes.manage.transiting.title', { ns: 'common' }),
+    name: 'transiting',
+    type: 'link',
+    value: (
+      <>
+        <IoGlobeOutline />
+        { t('operator_routes.manage.transiting.link', { ns: 'common' }) }
+      </>
+    ),
+    url: `/operator/routes/transiting/${ id }`
+  };
+};