@autobusal/common 0.0.39 → 0.0.41

package/Viewer/Data.tsx

@@ -0,0 +1,124 @@
+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 { Display } from './styles';
+
+interface Props {
+  id: number
+  item: ViewData
+  refs: UseFormRegister<any>
+  t: TFunction<'common'>
+  onUpdate: UseFormSetValue<any>
+}
+
+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={ 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 ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
+
+    case 'file':
+    case 'files':
+      return (
+        <File
+          name={ item.name }
+          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 ? String(item.value) : undefined } { ...refs(item.name, validate(String(item.rules), t)) } />;
+
+    case '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;
+};
+
+export default Data;

package/Viewer/Item.tsx

@@ -0,0 +1,35 @@
+import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
+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'>
+  errors: FieldErrors<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+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.notice && <Notice>* { data.notice }</Notice> }
+  </div>
+);
+
+export default Item;

package/Viewer/Items/CheckboxList.tsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { ContainerCheckboxList, ListLabel } from './styles';
+import { DropdownData } from '@modules/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;

package/Viewer/Items/DatePicker.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { Button } from '@autobusal/common';
+import { FaCalendar } from 'react-icons/fa';
+import Calendar from '../../Calendar/Calendar';
+import { Picker, ContainerPicker, PickerClose } from './styles';
+import { ViewData } from '../types';
+import { RiCloseCircleFill } from 'react-icons/ri';
+
+interface Props {
+  item: ViewData
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const DatePicker = ({ item, t, refs, onUpdate }: Props): JSX.Element => {
+  const value = item.value !== null && item.value !== undefined && item.value !== '' ? String(item.value) : undefined;
+
+  const [ choose, setChoose ] = useState<boolean>(value !== undefined);
+
+  if (!choose) {
+    return (
+      <Picker>
+        <Button
+          type="button"
+          subtype="secondary"
+          size="small"
+          text={
+            <>
+              <FaCalendar />
+              { t('table.date-picker', { ns: 'common' }) }
+            </>
+          }
+          onClick={ () => setChoose(true) }
+          noMargin
+        />
+      </Picker>
+    );
+  }
+
+  const name = item.name ?? '';
+
+  const onCancel = (): void => {
+    setChoose(false);
+
+    onUpdate(name, undefined);
+  };
+
+  return (
+    <ContainerPicker>
+      <Calendar
+        type="date"
+        name={ name }
+        defaultValue={ value }
+        t={ t }
+        validation={ item.rules }
+        refs={ refs }
+        onUpdate={ onUpdate }
+      />
+
+      <PickerClose type="button" onClick={ onCancel }>
+        <RiCloseCircleFill />
+      </PickerClose>
+    </ContainerPicker>
+  );
+};
+
+export default DatePicker;

package/Viewer/Items/Dropdown.tsx

@@ -0,0 +1,45 @@
+import { TFunction } from 'i18next';
+import { UseFormRegister } from 'react-hook-form';
+import { validate } from '@autobusal/utilities';
+import { ViewData } from '../types';
+
+interface Props {
+  item: ViewData
+  refs: UseFormRegister<any>
+  t: TFunction<'common'>
+}
+
+const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
+  if (item.name === undefined) {
+    return null;
+  }
+
+  if (typeof item.value !== 'string' && typeof item.value !== 'number' && typeof item.value !== 'undefined') {
+    return null;
+  }
+
+  const rules = validate(String(item.rules), t);
+
+  // we listen for the change
+  if (item.onChange !== undefined) {
+    rules.onChange = (event: React.EventHandler<any>) => item.onChange(event.target.value);
+  }
+
+  const values = item.values?.map((item, index) => (
+    <option
+      key={ index }
+      value={ item.id }
+      // disabled={ item.disabled === true }
+    >
+      { item.name }
+    </option>
+  ));
+  
+  return (
+    <select defaultValue={ item?.value } { ...refs(item.name, rules) }>
+      { values }
+    </select>
+  );
+};
+
+export default Dropdown;

package/Viewer/Items/Linked.tsx

@@ -0,0 +1,27 @@
+import { ContainerLink, LinkMore } from './styles';
+
+interface Props {
+  id: number
+  value?: JSX.Element | string | number
+  url?: string
+}
+
+const Linked = ({ id, value, url }: Props): JSX.Element => {
+  if (id === 0) {
+    return (
+      <div className="row-data">
+        <ContainerLink>-</ContainerLink>
+      </div>
+    );
+  }
+
+  return (
+    <div className="row-data">
+      <ContainerLink>
+        <LinkMore to={ url ?? '' }>{ value }</LinkMore>
+      </ContainerLink>
+    </div>
+  );
+};
+
+export default Linked;

package/Viewer/Items/TextareaHtml.tsx

@@ -0,0 +1,56 @@
+import { useRef } from 'react';
+import { TFunction } from 'i18next';
+import { UseFormRegister, UseFormSetValue } from 'react-hook-form';
+import { Editor } from '@tinymce/tinymce-react';
+import { Editor as TinyMceEditor } from 'tinymce';
+import { validate } from '@modules/Utilities/form';
+import { Textarea } from './styles';
+
+interface Props {
+  name: string
+  value?: string
+  validation?: string
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
+
+const TextareaHtml = ({ name, value, validation, t, refs, onUpdate }: Props): JSX.Element => {
+  const editorRef = useRef<TinyMceEditor | null>(null);
+
+  const onChange = (content: string): void => {
+    onUpdate(name, content);
+  };
+
+  return (
+    <div className="row-data">
+      <Editor
+        onInit={ (event, editor) => editorRef.current = editor }
+        onEditorChange={ onChange }
+        initialValue={ value ?? '' }
+        tinymceScriptSrc="/tinymce/tinymce.min.js"
+        init={{
+          height: 350,
+          menubar: false,
+          license_key: 'gpl',
+          plugins: [
+            'autolink', 'link', 'image', 'media', 'table', 'help', 'lists', 'charmap', 'advlist'
+          ],
+          toolbar: (
+            'bold italic backcolor | alignleft aligncenter ' +
+            'alignright alignjustify | bullist numlist outdent indent | ' +
+            'image media table | ' +
+            'removeformat | help'
+          ),
+          content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px; }',
+          promotion: false,
+          highlight_on_focus: false
+        }}
+      />
+
+      <Textarea defaultValue={ value ?? '' } { ...refs(name, validate(String(validation), t)) }></Textarea>
+    </div>
+  );
+};
+
+export default TextareaHtml;

package/Viewer/Items/styles.ts

@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const ContainerCheckboxList = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 3px;
+  min-height: 38px;
+`;
+
+export const ListLabel = styled.label`
+  display: flex;
+  gap: 2px;
+  padding: 2px 6px 2px 4px;
+  font-size: ${ props => props.theme.size.xs };
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const ContainerLink = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+`;
+
+export const LinkMore = styled(Link)`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px;
+  font-weight: 700;
+  font-size: calc(${ props => props.theme.size.xs } + 1px);
+  background: ${ props => props.theme.background.neutral };
+  border-radius: 100px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 4px 15px ${ props => props.theme.background.neutral };
+  }
+`;
+
+export const Textarea = styled.textarea`
+  display: none;
+`;
+
+export const Picker = styled.div`
+  display: flex;
+  height: 38px;
+  align-items: center;
+`;
+
+export const ContainerPicker = styled.div`
+  position: relative;
+`;
+
+export const PickerClose = styled.button`
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 38px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: ${ props => props.theme.size.xl };
+  background: ${ props => props.theme.inputs.background };
+  border-left: 1px solid ${ props => props.theme.inputs.border };
+  border-top-right-radius: ${ props => props.theme.borderRadius };
+  border-bottom-right-radius: ${ props => props.theme.borderRadius };
+`;

package/Viewer/Viewer.tsx

@@ -0,0 +1,71 @@
+import { useForm } from 'react-hook-form';
+import { TFunction } from 'i18next';
+import Item from './Item';
+import Actions from './Actions';
+import { Container } from './styles';
+import { ViewData } from './types';
+
+interface Props {
+  id: number
+  type?: 'simple'
+  data: ViewData[]
+  loading?: boolean
+  actions?: string[]
+  t: TFunction<'common'>
+  onSave?: (data: any) => void
+  onDelete?: () => void
+}
+
+const Viewer = ({ id, type, data, loading, actions, t, onSave, onDelete }: Props): JSX.Element => {
+  const { register, handleSubmit, formState: { errors }, setValue } = useForm<any>();
+
+  const items = data.map((item, index) => (
+    <Item
+      key={ index }
+      id={ id }
+      data={ item }
+      refs={ register }
+      t={ t }
+      errors={ errors }
+      onUpdate={ setValue }
+    />
+  ));
+
+  const onSubmit = (data: any): void => {
+    if (onSave !== undefined) {
+      onSave(data);
+    }
+  };
+
+  if (type === 'simple') {
+    return (
+      <div className="box">
+        <Container>
+          { items }
+        </Container>
+      </div>
+    );
+  }
+
+  return (
+    <div className="box">
+      <form onSubmit={ handleSubmit(onSubmit) }>
+        <Container>
+          { items }
+        </Container>
+
+        { (actions !== undefined && actions.length > 0) && (
+          <Actions
+            id={ id }
+            available={ actions }
+            loading={ loading }
+            t={ t }
+            onDelete={ onDelete }
+          />
+        ) }
+      </form>
+    </div>
+  );
+};
+
+export default Viewer;

package/Viewer/styles.ts

@@ -0,0 +1,58 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  & > div.row-checkbox {
+    flex-direction: row-reverse;
+    justify-content: left;
+    height: 20px;
+  }
+
+  @media (min-width: 540px) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    & > div.row {
+      margin-bottom: 0;
+    }
+
+    & > div {
+      flex-basis: calc(50% - 10px);
+    }
+
+    & > div.spacer {
+      flex-basis: 100%;
+      height: 1px;
+      background: ${ props => props.theme.background.neutral };
+    }
+  }
+
+  @media (min-width: 1300px) {
+    & > div {
+      flex-basis: calc(33.33333% - 14px);
+    }
+  }
+`;
+
+export const ContainerActions = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 25px;
+  padding: 15px 10px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Display = styled.div`
+  min-height: 38px;
+  padding: 8px 10px;
+  background: ${ props => props.theme.background.neutral };
+  border-radius: ${ props => props.theme.borderRadius };
+`;
+
+export const Notice = styled.div`
+  font-size: ${ props => props.theme.size.xxs };
+  color: ${ props => props.theme.font.info };
+  font-weight: 400;
+`;

package/Viewer/types.ts

@@ -0,0 +1,22 @@
+import { DropdownData } from '@modules/Providers/types/other';
+
+export interface ViewData {
+  label?: string
+  name?: string
+  type?: 'text' | 'select' | 'date' | 'dob' | 'picker' | 'textarea' | 'textarea-html' | 'file' | 'files' | 'email' | 'password' | 'display' | 'component' | 'checkbox' | 'checkbox-list' | 'checkbox-list-all' | 'link' | 'number' | 'float' | 'date-picker'
+  value?: string | number | JSX.Element
+  values?: DropdownData[]
+  selected?: any[]
+  rules?: string
+  notice?: string
+  url?: string
+  onChange?: (id: 'string' | 'number') => void
+}
+
+export interface ActionData {
+  label: string
+  icon: any
+  type?: 'submit'
+  subtype?: 'delete'
+  handler?: () => void
+}