@autobusal/common 0.0.40 → 1.0.0

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, { ParsedQuery } 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 = (): ParsedQuery<string> => (
+  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 Button from '../Button/Button';
 import { ContainerActions } from './styles';
 import { ActionData } from './types';
-import { Button } from '@autobusal/common';
 
 interface Props {
+  id: number
   available: string[]
-  loading?: boolean
+  pending?: boolean
   t: TFunction<'common'>
+  onDelete?: () => void
 }
 
-const Actions = ({ available, loading, t }: Props): JSX.Element => {
+const Actions = ({ id, available, pending, 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 }
+      loading={ pending }
       noMargin
+      onClick={ item.handler }
     />
   ));
 

package/Viewer/Data.tsx

@@ -1,56 +1,122 @@
+import { TFunction } from 'i18next';
 import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
-import Dropdown from './Items/Dropdown';
-import { ViewData } from './types';
+import { Validate } from '@autobusal/utilities';
+import Password from '../Password/Password';
 import Calendar from '../Calendar/Calendar';
 import File from '../File/File';
-import { validate } from '@autobusal/utilities';
-import { TFunction } from 'i18next';
+import CheckboxList from './Items/CheckboxList';
+import Linked from './Items/Linked';
+import TextareaHtml from './Items/TextareaHtml';
+import Dropdown from './Items/Dropdown';
+import DatePicker from './Items/DatePicker';
+import { Display } from './styles';
+import { ViewData } from './types';
 
 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 }
           onUpdate={ onUpdate }
         />
       );
+    }
+
+    case 'date-picker':
+      return <DatePicker item={ item } t={ t } refs={ refs } onUpdate={ onUpdate } />;
+
+    case 'email':
+      return <input type="email" defaultValue={ item.value !== undefined ? 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 }
           validation={ item.rules }
+          multiple={ item.type === 'files' }
           t={ t }
           refs={ refs }
         />
       );
 
+    case 'float':
+      return <input type="number" defaultValue={ item.value !== undefined ? 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 !== undefined ? 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 !== undefined ? 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 !== undefined ? 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;

package/Viewer/Item.tsx

@@ -1,10 +1,12 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
-import { display } from '@autobusal/utilities';
+import { Display } from '@autobusal/utilities';
 import Data from './Data';
+import { Notice } from './styles';
 import { ViewData } from './types';
 import { TFunction } from 'i18next';
 
 interface Props {
+  id: number
   data: ViewData
   refs: UseFormRegister<any>
   t: TFunction<'common'>
@@ -12,95 +14,22 @@ interface Props {
   onUpdate: UseFormSetValue<any>
 }
 
-const Item = ({ data, refs, t, errors, onUpdate }: Props): JSX.Element => (
-  <div className={ `row ${ data.label === undefined && 'spacer' }` }>
+const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
+  <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
     { data.label }
 
     <Data
+      id={ id }
       item={ data }
       refs={ refs }
       t={ t }
       onUpdate={ onUpdate }
     />
 
-    { data.name && display(errors[data.name]) }
+    { data.name && Display(errors[data.name]) }
+
+    { data.notice && <Notice>* { data.notice }</Notice> }
   </div>
 );
 
-export default Item;
-
-// function Input({ data, refs, onUpdate, errors, t }) {
-//   let input;
-  
-//   switch (data.type) {
-//     case 'display':
-//       input = <div className="display">{ data.value }</div>;
-//     break;
-
-//     case 'email':
-//       input = <input type="email" defaultValue={ data.value } { ...refs(data.name, data.validation) } />;
-//     break;
-
-//     case 'number':
-//       input = <input type="number" defaultValue={ data.value } { ...refs(data.name, data.validation) } />
-//     break;
-
-//     case 'float':
-//       input = <input type="number" defaultValue={ data.value } { ...refs(data.name, data.validation) } step="0.01" />
-//     break;
-
-//     case 'checkbox':
-//       input = <input type="checkbox" value="1" defaultChecked={ data.value == 1 } { ...refs(data.name, data.validation) } />;
-//     break;
-
-//     case 'checkbox-list':
-//       input = <CheckboxList name={ data.name } values={ data.values } selected={ data.selected } hasAll={ data?.hasAll ?? true } refs={ refs } t={ t } />;
-//     break;
-
-//     case 'textarea-html':
-//       input = <TextareaHtml data={ data } onUpdate={ onUpdate } refs={ refs } />;
-//     break;
-
-//     case 'password':
-//       input = <Password refs={ refs(data.name, data.validation) } />
-//     break;
-
-//     case 'picker':
-//     
-//     case 'date':
-//       input = (
-//         <div className="display">
-//           <Calendar type={ data.type } name={ data.name } value={ data.value } refs={ refs } validation={ data.validation } t={ t } onUpdate={ onUpdate } />
-//         </div>
-//       );
-//     break;
-
-//     case 'extra':
-//       input = data.value;
-//     break;
-//   }
-
-//   let extra;
-
-//   switch (data.type) {
-//     case 'password':
-//       extra = ' item-password';
-//     break;
-
-//     case 'textarea-html':
-//       extra = ' full';
-//     break;
-//   }
-
-//   if (data.extra) {
-//     extra = ' ' + data.extra;
-//   }
-  
-//   return (
-//     <div className={ `item${ extra ?? '' }` }>
-//       { input }
-      
-//       { data.notice ? <div className="notice">* { data.notice }</div> : null }
-//     </div>
-//   );
-// }
+export default Item;

package/Viewer/Items/CheckboxList.tsx

@@ -1,30 +1,53 @@
-// function CheckboxList({ name, values, selected, hasAll, refs, t }) {
-//   const [ all, setAll ] = useState(selected?.includes('all') ?? true);
-
-//   const checkboxes = values.map((item, index) => {
-//     if (all) {
-//       return null;
-//     }
-
-//     return (
-//       <label key={ index }>
-//         <input type="checkbox" value={ item.value } defaultChecked={ selected?.includes(item.value + '') } { ...refs(name + '[' + (index + 1) + ']') } /> { item.name }
-//       </label>
-//     );
-//   });
-  
-//   const onAll = () => {
-//     setAll(all ? false : true);
-//   };
-
-//   return (
-//     <div className="display list">
-//       { hasAll ? <label key={ -1 }><input type="checkbox" value="all" defaultChecked={ all } onClick={ () => onAll() } { ...refs(name + '[' + 0 + ']') } /> { t('general:table.checkbox.all') }</label> : null }
-
-//       { checkboxes }
-
-//       <div className="clear"></div>
-//     </div>
-//   );
-// }
-// }
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { ContainerCheckboxList, ListLabel } from './styles';
+import { DropdownData } from '@autobusal/providers/types/other';
+
+interface Props {
+  name: string
+  values?: DropdownData[]
+  selected?: any[]
+  withAll: boolean
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+}
+
+const CheckboxList = ({ name, values, selected, withAll, t, refs }: Props): JSX.Element => {
+  const [ all, setAll ] = useState(selected?.includes('all') ?? withAll);
+
+  const items = values?.map((item, index) => (
+    <ListLabel key={ index }>
+      <input
+        type="checkbox"
+        value={ item.id }
+        defaultChecked={ selected?.includes(String(item.id)) || selected?.includes(Number(item.id)) }
+        { ...refs(`${ name }[${ (index + 1) }]`) }
+      />
+
+      { item.name }
+    </ListLabel>
+  ));
+
+  return (
+    <ContainerCheckboxList>
+      { withAll && (
+        <ListLabel>
+          <input
+            type="checkbox"
+            value="all"
+            defaultChecked={ all }
+            onClick={ () => setAll(!all) }
+            { ...refs(`${ name }[0]`) }
+          />
+
+          { t('table.checkbox', { ns: 'common' }) }
+        </ListLabel> 
+      ) }
+
+      { !all && items }
+    </ContainerCheckboxList>
+  );
+};
+
+export default CheckboxList;