@autobusal/common 0.0.40 → 0.0.41

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

@@ -1,48 +1,53 @@
 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 { 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 = ({ available, loading, t }: Props): JSX.Element => {
+const Actions = ({ id, available, loading, t, onDelete }: Props): JSX.Element => {
+  const options: ActionData[] = [];
 
-// function Actions({ id, actions, status, t, deleter }) {
-  let options: ActionData[] = [];
-
-//   const askDeletion = () => {
-//     if (window.confirm(t('general:table.confirm'))) {
-//       deleter();
-//     }
-//   };
+  const onAskDelete = (): void => {
+    if (window.confirm(t('table.confirm', { ns: 'common' }))) {
+      if (onDelete) {
+        onDelete();
+      }
+    }
+  };
 
-//   if (actions.includes('add')) {
-//     options.push({
-//       label: t('general:table.action.add'),
-//       icon: <BsPlusCircleFill />
-//     });
-//   }
+  if (available.includes('add')) {
+    options.push({
+      label: t('table.actions.add', { ns: 'common' }),
+      icon: <BsPlusCircleFill />,
+      type: 'submit'
+    });
+  }
 
-//   if (actions.includes('save')) {
-//     options.push({
-//       label: t('general:table.action.save'),
-//       icon: <RiSave2Line />
-//     });
-//   }
+  if (available.includes('save')) {
+    options.push({
+      label: t('table.actions.save', { ns: 'common' }),
+      icon: <RiSave2Line />,
+      type: 'submit'
+    });
+  }
 
-//   if (actions.includes('send')) {
-//     options.push({
-//       label: t('general:table.action.send'),
-//       icon: <BiSend />
-//     });
-//   }
+  if (available.includes('send')) {
+    options.push({
+      label: t('table.actions.send', { ns: 'common' }),
+      icon: <BiSend />,
+      type: 'submit'
+    });
+  }
 
   if (available.includes('update')) {
     options.push({
@@ -52,39 +57,42 @@ const Actions = ({ available, loading, t }: Props): JSX.Element => {
     });
   }
 
-//   if (actions.includes('approve')) {
-//     options.push({
-//       label: t('general:table.action.approve'),
-//       icon: <RiCheckFill />
-//     });
-//   }
+  if (available.includes('approve')) {
+    options.push({
+      label: t('table.actions.approve', { ns: 'common' }),
+      icon: <RiCheckFill />,
+      type: 'submit'
+    });
+  }
 
-//   if (actions.includes('delete') && id > 0) {
-//     options.push({
-//       label: t('general:table.action.delete'),
-//       icon: <BiTrash />,
-//       type: 'button',
-//       className: "delete",
-//       handler: askDeletion
-//     });
-//   }
+  if (available.includes('delete') && id > 0) {
+    options.push({
+      label: t('table.actions.delete', { ns: 'common' }),
+      icon: <BiTrash />,
+      subtype: 'delete',
+      handler: onAskDelete
+    });
+  }
 
-//   if (actions.includes('search')) {
-//     options.push({
-//       label: t('general:table.action.search'),
-//       icon: <RiSearchLine />
-//     });
-//   }
+  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 }
     />
   ));
 

package/Viewer/Data.tsx

@@ -1,30 +1,63 @@
+import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import CheckboxList from './Items/CheckboxList';
+import Linked from './Items/Linked';
+import TextareaHtml from './Items/TextareaHtml';
+import Password from '../Password/Password';
 import Dropdown from './Items/Dropdown';
+import DatePicker from './Items/DatePicker';
 import { ViewData } from './types';
 import Calendar from '../Calendar/Calendar';
 import File from '../File/File';
 import { validate } from '@autobusal/utilities';
-import { TFunction } from 'i18next';
+import { Display } from './styles';
 
 interface Props {
+  id: number
   item: ViewData
   refs: UseFormRegister<any>
   t: TFunction<'common'>
   onUpdate: UseFormSetValue<any>
 }
 
-const Data = ({ item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
+const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
   if (item.name === undefined) {
     return null;
   }
 
   switch (item.type) {
+    case 'checkbox':
+      return <input type="checkbox" value={ 1 } defaultChecked={ Number(item.value) == 1 } { ...refs(item.name, validate(String(item.rules), t)) } />;
+
+    case 'checkbox-list':
+    case 'checkbox-list-all':
+      return (
+        <CheckboxList
+          name={ item.name }
+          values={ item.values }
+          selected={ item.selected }
+          withAll={ item.type !== 'checkbox-list' }
+          t={ t }
+          refs={ refs }
+        />
+      );
+
+    case 'component':
+      return <div className="row-data">{ item.value }</div>;
+
+    case 'display':
+      return <Display className="row-data">{ item.value }</Display>;
+
+    case 'date':
     case 'dob':
+    case 'picker':
+      const value = item.value !== null && item.value !== undefined ? String(item.value) : undefined;
+
       return (
         <Calendar
           type={ item.type }
           name={ item.name }
-          defaultValue={ item.value !== null ? String(item.value) : undefined }
+          defaultValue={ value }
           t={ t }
           validation={ item.rules }
           refs={ refs }
@@ -32,25 +65,57 @@ const Data = ({ item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
         />
       );
 
+    case 'date-picker':
+      return <DatePicker item={ item } t={ t } refs={ refs } onUpdate={ onUpdate } />;
+
+    case 'email':
+      return <input type="email" defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
+
     case 'file':
+    case 'files':
       return (
         <File
           name={ item.name }
-          value={ item.value !== undefined ? String(item.value) : undefined }
+          value={ item.value ? String(item.value) : undefined }
           validation={ item.rules }
+          multiple={ item.type === 'files' }
           t={ t }
           refs={ refs }
         />
       );
 
+    case 'float':
+      return <input type="number" defaultValue={ item.value ? Number(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } step="0.01" />;
+
+    case 'link':
+      return <Linked id={ id } value={ item.value } url={ item.url } />;
+
+    case 'number':
+      return <input type="number" defaultValue={ item.value ? Number(item?.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />
+
+    case 'password':
+      return <Password name={ item.name } validation={ item.rules } t={ t } refs={ refs } />;
+
     case 'select':
       return <Dropdown item={ item } refs={ refs } t={ t } />;
 
     case 'text':
-      return <input type="text" defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) } />;
+      return <input type="text" defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
 
     case 'textarea':
-      return <textarea defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) }></textarea>;
+      return <textarea defaultValue={ item.value ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) }></textarea>;
+
+    case 'textarea-html':
+      return (
+        <TextareaHtml
+          name={ item.name }
+          value={ item.value ? String(item.value) : undefined }
+          validation={ item.rules }
+          t={ t }
+          refs={ refs }
+          onUpdate={ onUpdate }
+        />
+      );
   }
 
   return null;