Merge pull request #6 from Lemoncode/feature/Implement_employee_layout

Feature/implement employee layout

Author: brauliodiez

package.json

@@ -41,13 +41,15 @@
   "dependencies": {
     "@lemoncode/fonk": "^1.3.0",
     "@lemoncode/fonk-final-form": "^2.3.1",
+    "@lemoncode/fonk-formik": "^4.0.1",
     "@lemoncode/fonk-match-field-validator": "^1.0.1",
     "@material-ui/core": "4.9.11",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.47",
     "axios": "^0.19.0",
     "emotion": "^10.0.23",
     "final-form": "^4.18.6",
+    "formik": "^2.1.4",
     "graphql-request": "^1.8.2",
     "lodash.flowright": "^3.5.0",
     "lodash.get": "^4.4.2",

src/common-app/command-footer/command-footer.component.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { cx } from 'emotion';
+import Button from '@material-ui/core/Button';
+import * as classes from './command-footer.style';
+
+interface LabelProps {
+  cancelButton?: string;
+  saveButton?: string;
+}
+
+interface Props {
+  onCancel: () => void;
+  onSave?: () => void;
+  labels?: LabelProps;
+  className?: string;
+}
+
+export const CommandFooterComponent: React.FunctionComponent<Props> = props => {
+  const { onCancel, onSave, className } = props;
+  const labels: LabelProps = {
+    cancelButton: 'Cancelar',
+    saveButton: 'Guardar',
+    ...props.labels,
+  };
+
+  return (
+    <div className={cx(classes.footerButtonsContainer, className)}>
+      <Button variant="contained" color="primary" onClick={onCancel}>
+        {labels.cancelButton}
+      </Button>
+      <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        onClick={() => {
+          if (onSave) onSave();
+        }}
+      >
+        {labels.saveButton}
+      </Button>
+    </div>
+  );
+};

src/common-app/command-footer/command-footer.style.ts

@@ -0,0 +1,8 @@
+import { css } from 'emotion';
+
+export const footerButtonsContainer = css`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 1rem;
+`;

src/common-app/command-footer/index.ts

@@ -0,0 +1 @@
+export * from './command-footer.component';

src/common-app/command-footer/translations/en.ts

@@ -0,0 +1,6 @@
+import { keys } from './keys';
+
+export const en = {
+  [keys.buttons.cancel]: 'Cancel',
+  [keys.buttons.save]: 'Save',
+};

src/common-app/command-footer/translations/es.ts

@@ -0,0 +1,6 @@
+import { keys } from './keys';
+
+export const es = {
+  [keys.buttons.cancel]: 'Atrás',
+  [keys.buttons.save]: 'Guardar',
+};

src/common-app/command-footer/translations/index.ts

@@ -0,0 +1,3 @@
+export * from './keys';
+export * from './en';
+export * from './es';

src/common-app/command-footer/translations/keys.ts

@@ -0,0 +1,6 @@
+export const keys = {
+  buttons: {
+    cancel: 'buttons.cancel',
+    save: 'buttons.save',
+  },
+};

src/common/components/form/checkbox/checkbox.component.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useField } from 'formik';
+import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import * as classes from './checkbox.styles';
+
+interface Props extends CheckboxProps {
+  label?: string;
+  labelPlacement?: 'end' | 'start' | 'top' | 'bottom';
+  error?: boolean;
+  helperText?: string;
+}
+
+export const CheckboxComponent: React.FunctionComponent<Props> = props => {
+  const {
+    label,
+    labelPlacement,
+    error,
+    name,
+    checked,
+    onChange,
+    onBlur,
+    ...checkboxProps
+  } = props;
+  const [field, meta] = Boolean(name) ? useField(name) : [];
+  const hasError = error || Boolean(meta && meta.touched && meta.error);
+  const helperText = Boolean(field) ? meta?.error : props.helperText;
+
+  return (
+    <FormControl
+      className={classes.root}
+      error={hasError}
+      fullWidth={true}
+      margin="normal"
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            {...checkboxProps}
+            name={name}
+            checked={checked || field?.value}
+            onChange={onChange || field?.onChange}
+            onBlur={onBlur || field?.onBlur}
+          />
+        }
+        label={label}
+        labelPlacement={labelPlacement}
+      />
+
+      {hasError && <FormHelperText>{helperText}</FormHelperText>}
+    </FormControl>
+  );
+};

src/common/components/form/checkbox/checkbox.styles.ts

@@ -0,0 +1,6 @@
+import { css } from 'emotion';
+import { theme } from 'core/theme';
+
+export const root = css`
+  justify-content: flex-end;
+`;