@autobusal/common 0.0.39 → 0.0.41

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 '@modules/Providers/types/pagination';
+
+interface Props {
+  data?: PaginationData<any>
+  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,20 @@
+import { Td } from './styles';
+
+interface Props {
+  id: number
+  data: any[]
+  withoutView?: boolean
+}
+
+// @todo: de scos id-ul din toate row-urile
+const Row = ({ id, data }: Props): JSX.Element[] => {
+  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 '@autobusal/common';
+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,62 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import Loading from './Loading';
+import NotFound from './NotFound';
+import Actions from '../Actions/Actions';
+import { Tr } from './styles';
+
+interface Props {
+  url: string
+  urlWith?: string
+  data?: JSX.Element[]
+  loading: boolean
+  colLength: number
+  t: TFunction<'common'>
+  actions?: string[]
+  handlers?: any
+  navigate: NavigateFunction
+}
+
+const Rows = ({ url, urlWith, data, loading, 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>
+      { columns }
+    </tbody>
+  );
+};
+
+export default Rows;

package/Table/Rows/styles.ts

@@ -0,0 +1,31 @@
+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 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,74 @@
+import { TFunction } from 'i18next';
+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 { ColumnData, SortingData } from './types';
+import { useNavigate } from 'react-router-dom';
+import { PaginationData } from '@modules/Providers/types/pagination';
+
+interface Props {
+  url: string
+  urlWith?: string
+  columns: ColumnData[]
+  rows?: JSX.Element[]
+  pages?: PaginationData<any>
+  sorting?: SortingData
+  search?: string | null
+  loading: boolean
+  t: TFunction<'common'>
+  actions?: string[]
+  extra?: JSX.Element
+  handlers?: any
+}
+
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, 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 }
+              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;

package/Table/Top/Top.tsx

@@ -0,0 +1,44 @@
+import { TFunction } from 'i18next';
+import { NavigateFunction } from 'react-router-dom';
+import { BsPlusCircleFill } from 'react-icons/bs';
+import Search from './Search';
+import { Container, LinkTop } from './styles';
+
+interface Props {
+  url: string
+  urlWith?: string
+  search?: string | null
+  t: TFunction<'common'>
+  actions?: string[]
+  extra?: JSX.Element
+  navigate: NavigateFunction
+}
+
+const Top = ({ url, urlWith, search, t, actions, extra, navigate }: Props): (JSX.Element | null) => {
+  if (actions === undefined) {
+    return null;
+  }
+
+  return (
+    <Container>
+      { actions.includes('create') && (
+        <LinkTop to={ `${ url }/manage/0${ urlWith ? `?${ urlWith }` : '' }` }>
+          <BsPlusCircleFill />{ t('table.actions.new', { ns: 'common' }) }
+        </LinkTop>
+      ) }
+
+      { actions.includes('extra') && extra }
+
+      { actions.includes('search') && (
+        <Search
+          value={ search }
+          url={ url }
+          t={ t }
+          navigate={ navigate }
+        />
+      ) }
+    </Container>
+  );
+};
+
+export default Top;

package/Table/Top/styles.ts

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 15px;
+`;
+
+export const LinkTop = styled(Link)`
+  display: flex;
+  gap: 6px;
+  height: 38px;
+  align-items: center;
+  justify-content: center;
+  padding: 0 20px;
+  font-weight: 700;
+  color: ${ props => props.theme.primary.contrast };
+  background: ${ props => props.theme.primary.normal };
+  border: 1px solid ${ props => props.theme.primary.normal };
+  border-radius: 100px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 15px ${ props => props.theme.primary.normal };
+  }
+`;

package/Table/browseUrl.ts

@@ -0,0 +1,21 @@
+import queryString from 'query-string';
+
+export const parseUrl = (replace: any): string => {
+  const query = queryString.parse(location.search);
+
+  Object.keys(replace).map(param => {
+    query[param] = replace[param]
+  });
+
+  const params = Object.keys(query).map(param => (
+    `${ param }=${ query[param] }`
+  ));
+
+  const url = params.join('&');
+
+  return `?${ url }`
+};
+
+export const getUrl = (): any => (
+  queryString.parse(location.search)
+);

package/Table/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  padding: 0 !important;
+`;
+
+export const Content = styled.div`
+  overflow-x: auto;
+`;
+
+export const Inner = styled.div`
+  min-width: 750px;
+`;
+
+export const ContainerTable = styled.table`
+  width: 100%;
+  font-size: ${ props => props.theme.size.s };
+`;
+
+export const Td = styled.td`
+  padding: 10px 16px;
+  border-top: 1px solid ${ props => props.theme.background.neutral };
+`;
+
+export const ContainerPaginate = styled.div`
+  padding: 10px 16px;
+  border-top: 1px solid ${ props => props.theme.background.neutral };
+`;

package/Table/types.ts

@@ -0,0 +1,11 @@
+export interface ColumnData {
+  name: string
+  width?: number
+  slug?: string
+  type?: 'az'
+}
+
+export interface SortingData {
+  slug: string
+  order: 'asc' | 'desc'
+}

package/Viewer/Actions.tsx

@@ -0,0 +1,106 @@
+import { TFunction } from 'i18next';
+import { BiEditAlt, BiTrash, BiSend } from 'react-icons/bi';
+import { RiSave2Line, RiCheckFill, RiSearchLine } from 'react-icons/ri';
+import { BsPlusCircleFill } from 'react-icons/bs';
+import { ContainerActions } from './styles';
+import { ActionData } from './types';
+import { Button } from '@autobusal/common';
+
+interface Props {
+  id: number
+  available: string[]
+  loading?: boolean
+  t: TFunction<'common'>
+  onDelete?: () => void
+}
+
+const Actions = ({ id, available, loading, t, onDelete }: Props): JSX.Element => {
+  const options: ActionData[] = [];
+
+  const onAskDelete = (): void => {
+    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+      if (onDelete) {
+        onDelete();
+      }
+    }
+  };
+
+  if (available.includes('add')) {
+    options.push({
+      label: t('table.actions.add', { ns: 'common' }),
+      icon: <BsPlusCircleFill />,
+      type: 'submit'
+    });
+  }
+
+  if (available.includes('save')) {
+    options.push({
+      label: t('table.actions.save', { ns: 'common' }),
+      icon: <RiSave2Line />,
+      type: 'submit'
+    });
+  }
+
+  if (available.includes('send')) {
+    options.push({
+      label: t('table.actions.send', { ns: 'common' }),
+      icon: <BiSend />,
+      type: 'submit'
+    });
+  }
+
+  if (available.includes('update')) {
+    options.push({
+      label: t('table.actions.update', { ns: 'common' }),
+      icon: <BiEditAlt />,
+      type: 'submit'
+    });
+  }
+
+  if (available.includes('approve')) {
+    options.push({
+      label: t('table.actions.approve', { ns: 'common' }),
+      icon: <RiCheckFill />,
+      type: 'submit'
+    });
+  }
+
+  if (available.includes('delete') && id > 0) {
+    options.push({
+      label: t('table.actions.delete', { ns: 'common' }),
+      icon: <BiTrash />,
+      subtype: 'delete',
+      handler: onAskDelete
+    });
+  }
+
+  if (available.includes('search')) {
+    options.push({
+      label: t('table.actions.search', { ns: 'common' }),
+      icon: <RiSearchLine />,
+      type: 'submit'
+    });
+  }
+
+  const items = options.map((item, index) => (
+    <Button
+      key={ index }
+      type={ item.type === 'submit' ? 'submit' : 'button' }
+      subtype={ item.subtype }
+      text={
+        <>{ item.icon } { item.label }</>
+      }
+      loading={ loading }
+      noMargin
+      onClick={ item.handler }
+    />
+  ));
+
+  return (
+    <ContainerActions>
+      { items }
+    </ContainerActions>
+  );
+};
+
+export default Actions;