@autobusal/common 0.0.40 → 0.0.41

package/Viewer/Item.tsx

@@ -1,10 +1,12 @@
 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'>
@@ -12,11 +14,12 @@ 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 }
@@ -24,83 +27,9 @@ const Item = ({ data, refs, t, errors, onUpdate }: Props): JSX.Element => (
     />
 
     { 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 '@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

@@ -14,6 +14,17 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
     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 }
@@ -23,14 +34,9 @@ const Dropdown = ({ item, refs, t }: Props): (JSX.Element | null) => {
       { item.name }
     </option>
   ));
-
-//   // add a custom onchange listener
-//   if (item.onChange) {
-//     item.validation.onChange = (e) => data.onChange(e.target.value);
-//   }
   
   return (
-    <select defaultValue={ item.value } { ...refs(item.name, validate(String(item.rules), t)) }>
+    <select defaultValue={ item?.value } { ...refs(item.name, rules) }>
       { values }
     </select>
   );

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

@@ -1,29 +1,56 @@
-// import { EditorState, ContentState, convertToRaw } from 'draft-js';
-// import { Editor } from 'react-draft-wysiwyg';
-// import htmlToDraft from 'html-to-draftjs';
-// import draftToHtml from 'draftjs-to-html';
-// import '../../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+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';
 
-// function TextareaHtml({ data, onUpdate, refs }) {
-//   const [ value, setValue ] = useState('');
+interface Props {
+  name: string
+  value?: string
+  validation?: string
+  t: TFunction<'common'>
+  refs: UseFormRegister<any>
+  onUpdate: UseFormSetValue<any>
+}
 
-//   useEffect(() => {
-//     let html = data.value ?? '';
-//     const content = htmlToDraft(html);
+const TextareaHtml = ({ name, value, validation, t, refs, onUpdate }: Props): JSX.Element => {
+  const editorRef = useRef<TinyMceEditor | null>(null);
 
-//     const contentHtml = ContentState.createFromBlockArray(content);
-//     setValue(EditorState.createWithContent(contentHtml));
-//   }, []);
+  const onChange = (content: string): void => {
+    onUpdate(name, content);
+  };
 
-//   const onEditorChange = (state) => {
-//     setValue(state);
-//     onUpdate(data.name, draftToHtml(convertToRaw(value.getCurrentContent())));
-//   };
+  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
+        }}
+      />
 
-//   return (
-//     <>
-//       <Editor editorState={ value } onEditorStateChange={ onEditorChange } />
-//       <textarea defaultValue={ data.value } { ...refs(data.name, data.validation) } style={{ display: 'none' }}></textarea>
-//     </>
-//   );
-// }
+      <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

@@ -6,24 +6,23 @@ 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
+  onSave?: (data: any) => void
+  onDelete?: () => void
 }
 
-const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
-  const { register, handleSubmit, formState: { errors }, setValue, reset } = useForm<any>();
-
-  // reset on id change
-//   useEffect(() => {
-//     reset();
-//   }, [id]);
+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 }
@@ -33,14 +32,20 @@ const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
   ));
 
   const onSubmit = (data: any): void => {
-    onSave(data);
+    if (onSave !== undefined) {
+      onSave(data);
+    }
   };
-  
-//   return (
-//     <div className="box">
-//       { actions.length > 0 ? <form className="form form-viewer" onSubmit={ handleSubmit(onSubmit) }>{ display }</form> : <div className="form form-viewer">{ display }</div> }
-//     </div>
-//   );
+
+  if (type === 'simple') {
+    return (
+      <div className="box">
+        <Container>
+          { items }
+        </Container>
+      </div>
+    );
+  }
 
   return (
     <div className="box">
@@ -51,9 +56,11 @@ const Viewer = ({ data, loading, actions, t, onSave }: Props): JSX.Element => {
 
         { (actions !== undefined && actions.length > 0) && (
           <Actions
+            id={ id }
             available={ actions }
             loading={ loading }
             t={ t }
+            onDelete={ onDelete }
           />
         ) }
       </form>

package/Viewer/styles.ts

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
 export const Container = styled.div`
-  @media (min-width: 480px) {
+  & > div.row-checkbox {
+    flex-direction: row-reverse;
+    justify-content: left;
+    height: 20px;
+  }
+
+  @media (min-width: 540px) {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
@@ -31,8 +37,22 @@ export const Container = styled.div`
 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

@@ -1,19 +1,22 @@
+import { DropdownData } from '@modules/Providers/types/other';
+
 export interface ViewData {
   label?: string
   name?: string
-  type?: 'text' | 'select' | 'dob' | 'textarea' | 'file'
-  value?: string | number
-  values?: ValuesData[]
+  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
-}
-
-export interface ValuesData {
-  id: number
-  name: string
+  notice?: string
+  url?: string
+  onChange?: (id: 'string' | 'number') => void
 }
 
 export interface ActionData {
   label: string
   icon: any
   type?: 'submit'
+  subtype?: 'delete'
+  handler?: () => void
 }