@autobusal/common 0.0.40 → 1.0.0

package/Seats/styles.ts

@@ -87,46 +87,4 @@ export const TitleUnavailable = styled.div`
   align-items: center;
   font-weight: 700;
   font-size: ${ props => props.theme.size.s };
-`;
-
-// // @todo: finish adding a seat
-// // .choose-seats {
-// //   .bus-plan {
-// //     .bus-seat {
-// //       .remove {
-// //         position: absolute;
-// //         top: 0;
-// //         right: 0;
-// //         z-index: 1;
-// //         width: 20px;
-// //         height: 20px;
-// //         background-color: $red;
-// //         border-radius: $border-radius - 3;
-
-// //         svg {
-// //           margin: 1px auto 0;
-// //           font-size: $size-info;
-// //           color: $white;
-// //         }
-// //       }
-// //     }
-
-// //     .add-seat {
-// //       display: block;
-// //       position: absolute;
-// //       z-index: 5;
-// //       bottom: -58px;
-// //       width: 50px;
-// //       height: 38px;
-// //       text-align: center;
-// //       line-height: 32px;
-// //       color: $blue;
-// //       border: 3px solid $blue;
-// //       border-radius: 100px;
-
-// //       svg {
-// //         margin: 0;
-// //       }
-// //     }
-// //   }
-// // }
+`;

package/Table/Actions/Actions.tsx

@@ -0,0 +1,40 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Get from './Get';
+import { Container } from './styles';
+import { Td } from '../styles';
+
+interface Props {
+  id: number
+  url: string
+  urlWith?: string
+  available?: string[]
+  t: TFunction<'common'>
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Actions = ({ id, url, urlWith, available, t, handlers, navigate }: Props): JSX.Element => {
+  const actions = available?.map((action, index) => (
+    <Get
+      key={ index }
+      id={ id }
+      url={ url }
+      urlWith={ urlWith }
+      type={ action }
+      t={ t }
+      handlers={ handlers }
+      navigate={ navigate }
+    />
+  ));
+
+  return (
+    <Td>
+      <Container>
+        { actions }
+      </Container>
+    </Td>
+  );
+};
+
+export default Actions;

package/Table/Actions/Get.tsx

@@ -0,0 +1,49 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Icon from './Icon';
+import { ButtonAction } from './styles';
+
+interface Props {
+  id: number
+  url: string
+  urlWith?: string
+  type: string
+  t: TFunction<'common'>
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Get = ({ id, url, urlWith, type, t, handlers, navigate }: Props): (JSX.Element | null) => {
+  if (['create', 'search'].includes(type)) {
+    return null;
+  }
+
+  const onAskDeletion = (): void => {
+    // ask for the deletion of the object
+    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+      handlers.delete(id);
+    }
+  };
+
+  const onClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+    event.stopPropagation();
+
+    if (type === 'view' || type === 'update') {
+      navigate(`${ url }/manage/${ id }${ urlWith ? `?${ urlWith }` : '' }`);
+    } else if (type === 'delete') {
+      onAskDeletion();
+    } else {
+      if (handlers[type]) {
+        handlers[type](id);
+      }
+    }
+  };
+
+  return (
+    <ButtonAction $type={ type } onClick={ (event) => onClick(event) }>
+      <Icon type={ type } t={ t } />
+    </ButtonAction>
+  );
+};
+
+export default Get;

package/Table/Actions/Icon.tsx

@@ -0,0 +1,54 @@
+import { TFunction } from 'i18next';
+import { AiOutlineCheck, AiOutlineCloudDownload } from 'react-icons/ai';
+import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
+import { FaTrash } from 'react-icons/fa';
+import { GiMoneyStack } from 'react-icons/gi';
+import { IoDocumentLockOutline } from 'react-icons/io5';
+import { RiBusLine, RiEyeLine, RiLoginCircleLine } from 'react-icons/ri';
+
+interface Props {
+  type: string
+  t: TFunction<'common'>
+}
+
+const Icon = ({ type, t }: Props): (JSX.Element | null) => {
+  switch (type) {
+    case 'view':
+    case 'preview':
+      return <RiEyeLine title={ t('table.actions.view', { ns: 'common' }) } />;
+
+    case 'delete':
+      return <BiTrash title={ t('table.actions.delete', { ns: 'common' }) } />;
+
+    case 'login_as':
+      return <RiLoginCircleLine title={ t('table.actions.custom.login_as', { ns: 'common' }) } />;
+
+    case 'approve':
+      return <AiOutlineCheck title={ t('table.actions.custom.approve', { ns: 'common' }) } />;
+
+    case 'deny':
+      return <FaTrash title={ t('table.actions.custom.deny', { ns: 'common' }) } />;
+
+    case 'update':
+      return <BiEditAlt title={ t('table.actions.custom.update', { ns: 'common' }) } />;
+
+    case 'transactions':
+      return <BiTransfer title={ t('table.actions.custom.transactions', { ns: 'common' }) } />;
+
+    case 'comissions':
+      return <GiMoneyStack title={ t('table.actions.custom.comissions', { ns: 'common' }) }  />;
+
+    case 'download':
+      return <AiOutlineCloudDownload  title={ t('table.actions.custom.download', { ns: 'common' }) }  />;
+
+    case 'bus':
+      return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
+
+    case 'douane':
+      return <IoDocumentLockOutline  title={ t('table.actions.custom.douane', { ns: 'common' }) }  />;
+  }
+
+  return null;
+};
+
+export default Icon;

package/Table/Actions/styles.ts

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+`;
+
+export const ButtonAction = styled.button<{ $type: string }>`
+  display: flex;
+  align-items: center;
+  font-size: ${ props => props.theme.size.xxl };
+  color: ${ props => props.theme.font.info };
+
+  ${ props => (props.$type === 'delete' || props.$type === 'deny') && css`
+    color: ${ props => props.theme.font.error };
+  ` }
+
+  ${ props => props.$type === 'approve' && css`
+    color: ${ props => props.theme.font.success };
+  ` }
+`;

package/Table/Header/Header.tsx

@@ -0,0 +1,46 @@
+import { TFunction } from 'i18next';
+import Sort from './Sort';
+import { getUrl } from '../browseUrl';
+import { Container, Td, Column, Text } from './styles';
+import { ColumnData, SortingData } from '../types';
+
+interface Props {
+  url: string
+  data: ColumnData[]
+  sorting?: SortingData
+  t: TFunction<'common'>
+  actions?: string[]
+}
+
+const Header = ({ url, data, sorting, t, actions }: Props): JSX.Element => {
+  const params = getUrl();
+
+  const columns = data.map((item, index) => (
+    <Td key={ index } $width={ item.width }>
+      <Column>
+        { item.slug
+          ? <Sort item={ item } url={ url } params={ params } sorting={ sorting } />
+          : <Text>{ item.name }</Text>
+        }
+      </Column>
+    </Td>
+  ));
+
+  return (
+    <Container>
+      <tr>
+        { columns }
+
+        { (actions !== undefined && actions.length > 0) && (
+          <Td $width={ 10 }>
+            <Column>
+              <Text>{ t('table.options', { ns: 'common' }) }</Text>
+            </Column>
+          </Td>
+        ) }
+      </tr>
+    </Container>
+  );
+};
+
+export default Header;

package/Table/Header/Sort.tsx

@@ -0,0 +1,33 @@
+import { BiSortDown, BiSortUp } from 'react-icons/bi';
+import { parseUrl } from '../browseUrl';
+import { LinkHeader } from './styles';
+import { ColumnData, SortingData } from '../types';
+
+interface Props {
+  item: ColumnData
+  url: string
+  params: any
+  sorting?: SortingData
+}
+
+const Sort = ({ item, url, params, sorting }: Props): JSX.Element => {
+  const isCurrent = params.sort === item.slug || (params.sort === undefined && sorting?.slug === item.slug);
+
+  const order = params.order ?? (
+    isCurrent ? sorting?.order : (item.type === 'az' ? 'asc' : 'desc')
+  );
+
+  const sort = parseUrl({ page: 1, sort: item.slug, order: (
+    order === 'desc' ? 'asc' : 'desc'
+  ) });
+
+  return (
+    <LinkHeader to={ `${ url }${ sort }` }>
+      { item.name }
+
+      { isCurrent && (order == 'desc' ? <BiSortDown /> : <BiSortUp />) }
+    </LinkHeader>
+  );
+};
+
+export default Sort;

package/Table/Header/styles.ts

@@ -0,0 +1,48 @@
+import styled, { css } from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.thead`
+  background: ${ props => props.theme.background.neutral };
+
+  & > tr > td:first-of-type > div {
+    justify-content: left;
+  }
+`;
+
+interface TdData {
+  $width?: number
+}
+
+export const Td = styled.td<TdData>`
+  ${ props => props.$width && css<TdData>`
+    width: ${ props => props.$width }%;
+  ` }
+`;
+
+export const Column = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  color: ${ props => props.theme.font.faded };
+  font-weight: 700;
+  text-transform: uppercase;
+  font-size: ${ props => props.theme.size.xs };
+`;
+
+export const Text = styled.span`
+  cursor: default;
+`;
+
+export const LinkHeader = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: ${ props => props.theme.font.faded };
+  transition: all 0.3s ease;
+
+  &:hover {
+    opacity: .7;
+    text-decoration: none;
+  }
+`;

package/Table/Paginate.tsx

@@ -0,0 +1,34 @@
+import { TFunction } from 'i18next';
+import Pagination from '../Pagination/Pagination';
+import { ContainerPaginate } from './styles';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+
+interface Props {
+  data?: PaginationData<unknown>
+  colLength: number
+  t: TFunction<'common'>
+}
+
+const Paginate = ({ data, colLength, t }: Props): (JSX.Element | null) => {
+  if (data === undefined) {
+    return null;
+  }
+
+  if (data.last_page < 2) {
+    return null;
+  }
+
+  return (
+    <tfoot>
+      <tr>
+        <td colSpan={ colLength }>
+          <ContainerPaginate>
+            <Pagination pages={ data } t={ t } />
+          </ContainerPaginate>
+        </td>
+      </tr>
+    </tfoot>
+  );
+};
+
+export default Paginate;

package/Table/Row.tsx

@@ -0,0 +1,22 @@
+import { Td } from './styles';
+
+interface Props {
+  id?: number
+  data: any[]
+}
+
+const Row = ({ id, data }: Props): JSX.Element[] => {
+  if (id === undefined) {
+    return [];
+  }
+
+  const columns = data.map((item, index) => (
+    <Td key={ index }>
+      { item }
+    </Td>
+  ));
+
+  return columns;
+};
+
+export default Row;

package/Table/Rows/Loading.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { Inline } from '../../Loading/Loading';
+import { ContainerLoading } from './styles';
+
+interface Props {
+  length: number
+  t: TFunction<'common'>
+}
+
+const Loading = ({ length, t }: Props): JSX.Element => (
+  <tbody>
+    <tr>
+      <td colSpan={ length }>
+        <ContainerLoading>
+          <Inline text={ t('table.loading_data', { ns: 'common' }) } />
+        </ContainerLoading>
+      </td>
+    </tr>
+  </tbody>
+);
+
+export default Loading;

package/Table/Rows/NotFound.tsx

@@ -0,0 +1,22 @@
+import { TFunction } from 'i18next';
+import { RiEmotionUnhappyLine } from 'react-icons/ri';
+import { ContainerNotFound } from './styles';
+
+interface Props {
+  length: number
+  t: TFunction<'common'>
+}
+
+const NotFound = ({ length, t }: Props): JSX.Element => (
+  <tbody>
+    <tr>
+      <td colSpan={ length }>
+        <ContainerNotFound>
+          <RiEmotionUnhappyLine />{ t('table.no_data', { ns: 'common' }) }
+        </ContainerNotFound>
+      </td>
+    </tr>
+  </tbody>
+);
+
+export default NotFound;

package/Table/Rows/Rows.tsx

@@ -0,0 +1,63 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Loading from './Loading';
+import NotFound from './NotFound';
+import Actions from '../Actions/Actions';
+import { Tbody, Tr } from './styles';
+
+interface Props {
+  url: string
+  urlWith?: string
+  data?: JSX.Element[]
+  loading: boolean
+  fetching: boolean
+  colLength: number
+  t: TFunction<'common'>
+  actions?: string[]
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
+  if (loading) {
+    return <Loading length={ colLength } t={ t } />;
+  }
+
+  if (data?.length === 0) {
+    return <NotFound length={ colLength } t={ t } />;
+  }
+
+  const isViewable = actions?.includes('view');
+  
+  const onClick = (id: number): void => {
+    if (isViewable) {
+      navigate(`${ url }/manage/${ id }${ urlWith ? `?${ urlWith }` : '' }`);
+    }
+  };
+
+  const columns = data?.map((item, index) => (
+    <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
+      { item }
+
+      { (actions !== undefined && actions.length > 0) && (
+        <Actions
+          id={ item.props.id }
+          url={ url }
+          urlWith={ urlWith }
+          available={ actions }
+          t={ t }
+          handlers={ handlers }
+          navigate={ navigate }
+        />
+      ) }
+    </Tr>
+  ));
+
+  return (
+    <Tbody $fetching={ fetching }>
+      { columns }
+    </Tbody>
+  );
+};
+
+export default Rows;

package/Table/Rows/styles.ts

@@ -0,0 +1,37 @@
+import styled, { css } from 'styled-components';
+
+export const ContainerLoading = styled.div`
+  padding: 25px 0;
+`;
+
+export const ContainerNotFound = styled(ContainerLoading)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  font-size: ${ props => props.theme.size.s };
+  color: ${ props => props.theme.font.faded };
+`;
+
+export const Tbody = styled.tbody<{ $fetching: boolean }>`
+  ${ props => props.$fetching && css`
+    opacity: .5;
+  ` }
+`;
+
+export const Tr = styled.tr<{ $viewable?: boolean }>`
+  ${ props => props.$viewable && css`
+    cursor: pointer;
+  ` }
+
+  text-align: center;
+
+  & > td:first-of-type {
+    text-align: left;
+    font-weight: 700;
+  }
+
+  &:hover {
+    background: ${ props => props.theme.background.neutral };
+  }
+`;

package/Table/Table.tsx

@@ -0,0 +1,76 @@
+import { TFunction } from 'i18next';
+import { useNavigate } from 'react-router-dom';
+import Top from './Top/Top';
+import Header from './Header/Header';
+import Rows from './Rows/Rows';
+import Paginate from './Paginate';
+import { Container, Content, Inner, ContainerTable } from './styles';
+import { PaginationData } from '@autobusal/providers/types/pagination';
+import { ColumnData, SortingData } from './types';
+
+interface Props {
+  url: string
+  urlWith?: string
+  columns: ColumnData[]
+  rows?: JSX.Element[]
+  pages?: PaginationData<any>
+  sorting?: SortingData
+  search?: string | null
+  loading: boolean
+  fetching: boolean
+  t: TFunction<'common'>
+  actions?: string[]
+  extra?: JSX.Element
+  handlers?: any
+}
+
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, handlers }: Props): JSX.Element => {
+  const navigate = useNavigate();
+
+  const colLength = columns.length + 1;
+
+  return (
+    <Container className="box">
+      <Top
+        url={ url }
+        urlWith={ urlWith }
+        search={ search }
+        t={ t }
+        actions={ actions }
+        extra={ extra }
+        navigate={ navigate }
+      />
+
+      <Content>
+        <Inner>
+          <ContainerTable cellPadding={ 0 } cellSpacing={ 0 }>
+            <Header
+              url={ url }
+              data={ columns }
+              sorting={ sorting }
+              t={ t }
+              actions={ actions }
+            />
+
+            <Rows
+              url={ url }
+              urlWith={ urlWith }
+              data={ rows }
+              loading={ loading }
+              fetching={ fetching }
+              colLength={ colLength }
+              t={ t }
+              actions={ actions }
+              handlers={ handlers }
+              navigate={ navigate }
+            />
+
+            <Paginate data={ pages } colLength={ colLength } t={ t } />
+          </ContainerTable>
+        </Inner>
+      </Content>
+    </Container>
+  );
+};
+
+export default Table;

package/Table/Top/Search.tsx

@@ -0,0 +1,36 @@
+import { FormEvent, useState } from 'react';
+import { NavigateFunction } from 'react-router-dom';
+import { TFunction } from 'i18next';
+import { parseUrl } from '../browseUrl';
+
+interface Props {
+  value?: string | null
+  url: string
+  t: TFunction<'common'>
+  navigate: NavigateFunction
+}
+
+const Search = ({ value, url, t, navigate }: Props): JSX.Element => {
+  const [ q, setQ ] = useState<string>(String(value ?? ''));
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
+    event.preventDefault();
+
+    const search = parseUrl({ page: 1, q });
+
+    navigate(`${ url }${ search }`);
+  }
+
+  return (
+    <form onSubmit={ handleSubmit }>
+      <input
+        type="text"
+        value={ q }
+        placeholder={ t('table.search', { ns: 'common' }) }
+        onChange={ (event) => setQ(event.target.value) }
+      />
+    </form>
+  );
+};
+
+export default Search;