re-structure to monorepo.

packages/webapp/src/containers/Projects/components/ExpenseSelect.tsx

@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '@/components';
+
+/**
+ *
+ * @param query
+ * @param expense
+ * @param _index
+ * @param exactMatch
+ */
+const expenseItemPredicate = (query, expense, _index, exactMatch) => {
+  const normalizedTitle = expense.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${expense.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param expense
+ * @param param1
+ * @returns
+ */
+const expenseItemRenderer = (expense, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={expense.id}
+      onClick={handleClick}
+      text={expense.name}
+    />
+  );
+};
+
+const expenseSelectProps = {
+  itemPredicate: expenseItemPredicate,
+  itemRenderer: expenseItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function ExpenseSelect({ expenses, defaultText, ...rest }) {
+  return (
+    <FSelect
+      items={expenses}
+      {...expenseSelectProps}
+      {...rest}
+      input={ExpenseSelectButton}
+    />
+  );
+}
+
+function ExpenseSelectButton({ label, ...rest }) {
+  return (
+    <Button
+      text={label ? label : intl.get('choose_an_estimated_expense')}
+      {...rest}
+    />
+  );
+}

packages/webapp/src/containers/Projects/components/FInputGroupComponent.tsx

@@ -0,0 +1,20 @@
+// @ts-nocheck
+import React from 'react';
+import { FInputGroup } from '@/components';
+import { useFormikContext } from 'formik';
+
+export function FInputGroupComponent({ toField, ...props }) {
+  const { values, setFieldValue } = useFormikContext();
+  const { expenseQuantity, expenseUnitPrice } = values;
+  const total = expenseQuantity * expenseUnitPrice;
+
+  const handleBlur = () => {
+    setFieldValue(toField, total);
+  };
+
+  const inputGroupProps = {
+    onBlur: handleBlur,
+    ...props,
+  };
+  return <FInputGroup {...inputGroupProps} />;
+}

packages/webapp/src/containers/Projects/components/ProjectBillableEntriesLink.tsx

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import * as R from 'ramda';
+
+import { ButtonLink } from '@/components';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+
+function ProjectBillableEntriesLinkComponent({
+  // #ownProps
+  children,
+  projectId,
+  className,
+
+  // #withDialogAction
+  openDialog,
+}) {
+  const handleBillableEntries = (event) => {
+    openDialog('project-billable-entries', { projectId });
+    event.preventDefault();
+  };
+
+  return (
+    <BillableEntriesLink className={className} onClick={handleBillableEntries}>
+      {children}
+    </BillableEntriesLink>
+  );
+}
+
+export const ProjectBillableEntriesLink = R.compose(withDialogActions)(
+  ProjectBillableEntriesLinkComponent,
+);
+
+const BillableEntriesLink = styled(ButtonLink)`
+  font-size: 11px;
+  margin-top: 6px;
+`;

packages/webapp/src/containers/Projects/components/ProjectBillableTypeSuggestField.tsx

@@ -0,0 +1,132 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { Menu, MenuItem } from '@blueprintjs/core';
+import { Suggest } from '@blueprintjs/select';
+import { FormattedMessage as T } from '@/components';
+
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+
+/**
+ * @param {*} billableType
+ * @param {*} param1
+ * @returns {JSX.Element}
+ */
+const billableTypeItemRenderer = (
+  billableType,
+  { handleClick, modifiers, query },
+) => {
+  return (
+    <MenuItem
+      disabled={modifiers.disabled}
+      key={billableType.id}
+      text={billableType.name}
+      onClick={handleClick}
+    />
+  );
+};
+
+/**
+ *
+ * @param {*} query
+ * @param {*} billableType
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const billableTypeItemPredicate = (query, billableType, _index, exactMatch) => {
+  const normalizedTitle = billableType.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return (
+      `${billableType.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+    );
+  }
+};
+
+/**
+ *
+ * @param inputValue
+ * @returns
+ */
+const billableTypeInputValueRenderer = (inputValue) => {
+  if (inputValue) {
+    return inputValue.name.toString();
+  }
+  return '';
+};
+
+/**
+ * Project billable type suggest field.
+ * @param
+ */
+export function ProjectBillableTypeSuggestField({
+  billableType,
+  initialBillableTypeId,
+  selectedBillableTypeId,
+
+  defautlSelectText = 'Placeholder Type...',
+  onBillableTypeSelected,
+  popoverFill = false,
+
+  ...suggestProps
+}) {
+  const initialBillableType = React.useMemo(
+    () => billableType.find((b) => b.id === initialBillableTypeId),
+    [initialBillableTypeId, billableType],
+  );
+
+  const [selectedBillableType, setSelectedBillableType] = React.useState(
+    initialBillableType || null,
+  );
+
+  React.useEffect(() => {
+    if (typeof selectedBillableTypeId !== 'undefined') {
+      const billableType = selectedBillableTypeId
+        ? billableType.find((a) => a.id === selectedBillableTypeId)
+        : null;
+      setSelectedBillableType(billableType);
+    }
+  }, [selectedBillableTypeId, billableType, setSelectedBillableType]);
+
+  /**
+   *
+   * @param {*} billableType
+   * @returns
+   */
+  const billableTypetemSelect = React.useCallback(
+    (billableType) => {
+      if (billableType.id) {
+        setSelectedBillableType({ ...billableType });
+        onBillableTypeSelected && onBillableTypeSelected(billableType);
+      }
+    },
+    [setSelectedBillableType, onBillableTypeSelected],
+  );
+
+  const billableTypeSelectProps = {
+    itemRenderer: billableTypeItemRenderer,
+    itemPredicate: billableTypeItemPredicate,
+    inputValueRenderer: billableTypeInputValueRenderer,
+  };
+  return (
+    <Suggest
+      items={billableType}
+      selectedItem={selectedBillableType}
+      onItemSelect={billableTypetemSelect}
+      inputProps={{ placeholder: defautlSelectText }}
+      fill={true}
+      resetOnClose={true}
+      popoverProps={{ minimal: true, boundary: 'window' }}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...billableTypeSelectProps}
+      {...suggestProps}
+    />
+  );
+}

packages/webapp/src/containers/Projects/components/ProjectMultiSelect.tsx

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem } from '@blueprintjs/core';
+import { FMultiSelect } from '@/components';
+
+/**
+ *
+ * @param query
+ * @param project
+ * @param _index
+ * @param exactMatch
+ */
+const projectItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param project
+ * @param param1
+ * @param param2
+ * @returns
+ */
+const projectItemRenderer = (
+  project,
+  { handleClick, modifiers, query },
+  { isSelected },
+) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      icon={isSelected ? 'tick' : 'blank'}
+      key={project.id}
+      text={project.name}
+      onClick={handleClick}
+    />
+  );
+};
+
+const projectSelectProps = {
+  itemPredicate: projectItemPredicate,
+  itemRenderer: projectItemRenderer,
+  valueAccessor: (item) => item.id,
+  labelAccessor: (item) => item.name,
+  tagRenderer: (item) => item.name,
+};
+
+/**
+ * projects mulit select.
+ * @param param0
+ * @returns {JSX.Element}
+ */
+export function ProjectMultiSelect({
+  projects,
+
+  ...rest
+}) {
+  return (
+    <FMultiSelect
+      items={projects}
+      placeholder={intl.get('projects_multi_select.placeholder')}
+      popoverProps={{ minimal: true }}
+      {...projectSelectProps}
+      {...rest}
+    />
+  );
+}

packages/webapp/src/containers/Projects/components/ProjectSuggestField.tsx

@@ -0,0 +1,144 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import intl from 'react-intl-universal';
+import { Menu, MenuItem } from '@blueprintjs/core';
+import { Suggest } from '@blueprintjs/select';
+import { FormattedMessage as T } from '@/components';
+
+import classNames from 'classnames';
+import { CLASSES } from '@/constants/classes';
+import { firstLettersArgs } from '@/utils';
+
+/**
+ * project suggest field.
+ * @returns
+ */
+export function ProjectSuggestField({
+  projects,
+  initialProjectId,
+  selectedProjectId,
+  defaultSelectText = intl.get('select_project'),
+  popoverFill = false,
+  onProjectSelected,
+  ...suggestProps
+}) {
+  const initialProject = React.useMemo(
+    () => projects.find((b) => b.id === initialProjectId),
+    [initialProjectId, projects],
+  );
+
+  const [selectedProject, setSelectedProject] = React.useState(
+    initialProject || null,
+  );
+
+  React.useEffect(() => {
+    if (typeof selectedProjectId !== 'undefined') {
+      const project = selectedProjectId
+        ? projects.find((a) => a.id === selectedProjectId)
+        : null;
+      setSelectedProject(project);
+    }
+  }, [selectedProjectId, projects, setSelectedProject]);
+
+  /**
+   * @param {*} project
+   * @param {*} param1
+   * @returns {JSX.Element}
+   */
+  const projectsItemRenderer = (project, { handleClick, modifiers, query }) => {
+    return (
+      <MenuItem
+        icon={<AvatarSelect text={project} />}
+        disabled={modifiers.disabled}
+        key={project.id}
+        text={project.name}
+        onClick={handleClick}
+      />
+    );
+  };
+
+  /**
+   *
+   * @param {*} query
+   * @param {*} project
+   * @param {*} _index
+   * @param {*} exactMatch
+   * @returns
+   */
+  const projectsItemPredicate = (query, project, _index, exactMatch) => {
+    const normalizedTitle = project.name.toLowerCase();
+    const normalizedQuery = query.toLowerCase();
+
+    if (exactMatch) {
+      return normalizedTitle === normalizedQuery;
+    } else {
+      return (
+        `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
+      );
+    }
+  };
+
+  /**
+   *
+   * @param {*} project
+   * @returns
+   */
+  const projectItemSelect = React.useCallback(
+    (project) => {
+      if (project.id) {
+        setSelectedProject({ ...project });
+        onProjectSelected && onProjectSelected(project);
+      }
+    },
+    [setSelectedProject, onProjectSelected],
+  );
+
+  /**
+   *
+   * @param {*} inputVaue
+   * @returns
+   */
+  const projectInputValueRenderer = (inputValue) => {
+    if (inputValue) {
+      return inputValue.name.toString();
+    }
+    return '';
+  };
+
+  return (
+    <Suggest
+      items={projects}
+      noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
+      itemRenderer={projectsItemRenderer}
+      itemPredicate={projectsItemPredicate}
+      onItemSelect={projectItemSelect}
+      selectedItem={selectedProject}
+      inputProps={{ placeholder: defaultSelectText }}
+      resetOnClose={true}
+      fill={true}
+      popoverProps={{ minimal: true, boundary: 'window' }}
+      inputValueRenderer={projectInputValueRenderer}
+      className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...suggestProps}
+    />
+  );
+}
+
+const AvatarSelect = ({ text }) => {
+  return <AvaterContent>{firstLettersArgs(text?.name)}</AvaterContent>;
+};
+
+const AvaterContent = styled.div`
+  display: inline-block;
+  background: #adbcc9;
+  text-align: center;
+  font-weight: 400;
+  color: #fff;
+  height: 22px;
+  width: 22px;
+  line-height: 22px;
+  font-size: 12px;
+`;

packages/webapp/src/containers/Projects/components/ProjectTaskChargeTypeSelect.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+import React from 'react';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '@/components';
+
+/**
+ *
+ * @param {*}
+ * @param {*} param1
+ * @returns
+ */
+const chargeTypeItemRenderer = (item, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      label={item.label}
+      key={item.name}
+      onClick={handleClick}
+      text={item.name}
+    />
+  );
+};
+
+const chargeTypeSelectProps = {
+  itemRenderer: chargeTypeItemRenderer,
+  valueAccessor: 'value',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param param0
+ * @returns
+ */
+export function ProjectTaskChargeTypeSelect({ items, ...rest }) {
+  return (
+    <FSelect
+      {...chargeTypeSelectProps}
+      {...rest}
+      items={items}
+      input={ChargeTypeSelectButton}
+    />
+  );
+}
+/**
+ *
+ * @param param0
+ * @returns
+ */
+function ChargeTypeSelectButton({ label }) {
+  return <Button text={label} />;
+}

packages/webapp/src/containers/Projects/components/ProjectTaskSelect.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '@/components';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} task
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const taskItemPredicate = (query, task, _index, exactMatch) => {
+  const normalizedTitle = task.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${task.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} task
+ * @param {*} param1
+ * @returns
+ */
+const taskItemRenderer = (task, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={task.id}
+      onClick={handleClick}
+      text={task.name}
+    />
+  );
+};
+
+const taskSelectProps = {
+  itemPredicate: taskItemPredicate,
+  itemRenderer: taskItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+/**
+ * 
+ * @param param0 
+ * @returns 
+ */
+export function ProjectTaskSelect({ tasks, ...rest }) {
+  return (
+    <FSelect
+      items={tasks}
+      {...taskSelectProps}
+      {...rest}
+      input={TaskSelectButton}
+    />
+  );
+}
+
+function TaskSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('choose_a_task')} />;
+}

packages/webapp/src/containers/Projects/components/ProjectsSelect.tsx

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '@/components';
+import { CLASSES } from '@/constants/classes';
+import classNames from 'classnames';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} project
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const projectsItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} project
+ * @param {*} param1
+ * @returns
+ */
+const projectsItemRenderer = (project, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      disabled={modifiers.disabled}
+      key={project.id}
+      onClick={handleClick}
+      text={project.name}
+    />
+  );
+};
+
+const projectSelectProps = {
+  itemPredicate: projectsItemPredicate,
+  itemRenderer: projectsItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function ProjectsSelect({ projects, popoverFill, ...rest }) {
+  return (
+    <FSelect
+      {...projectSelectProps}
+      items={projects}
+      popoverProps={{ minimal: true, usePortal: !popoverFill }}
+      className={classNames('form-group--select-list', {
+        [CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
+      })}
+      {...rest}
+    />
+  );
+}
+/**
+ *
+ * @param {*} param0
+ * @returns
+ */
+export function ProjectSelectButton({ label, ...rest }) {
+  return (
+    <Button
+      text={label ? label : intl.get('find_or_choose_a_project')}
+      {...rest}
+    />
+  );
+}

packages/webapp/src/containers/Projects/components/index.ts

@@ -0,0 +1,10 @@
+// @ts-nocheck
+export * from './ExpenseSelect';
+export * from './ProjectTaskSelect';
+export * from './ProjectTaskChargeTypeSelect';
+export * from './ProjectsSelect';
+export * from './ProjectMultiSelect';
+export * from './FInputGroupComponent';
+export * from './ProjectSuggestField';
+export * from './ProjectBillableTypeSuggestField';
+export * from './ProjectBillableEntriesLink';