Merge pull request #140 from oksanasalohubova/138-create-economic-event

138 create economic event

src/HOC/modules/CreateMenuHOK/CreateDropdown.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { Dropdown } from '../../../ui/modules/Dropdown';
+import { Plus, PlusSquare, Users, X } from 'react-feather';
+import { Flex, Text } from 'rebass/styled-components';
+import { Trans } from '@lingui/macro';
+import styled from '../../../ui/themes/styled';
+
+type TCreateDropdown = {
+  toggleDropdown: () => void;
+  createCommunity: () => void;
+  createIntent: () => void;
+  createResource: () => void;
+};
+
+export const CreateDropdown: React.FC<TCreateDropdown> = ({
+  toggleDropdown,
+  createCommunity,
+  createIntent,
+  createResource
+}) => {
+  return (
+    <Dropdown orientation={'top'} close={toggleDropdown}>
+      <Action>
+        <StyledClose onClick={toggleDropdown}>
+          <X color="#05244F" />
+        </StyledClose>
+      </Action>
+      <List lined>
+        <Item variant="link" onClick={() => createCommunity()}>
+          <span>
+            <Users size={16} color={'#333'} />
+          </span>
+          <Text variant="text">
+            <Trans>New Community</Trans>
+          </Text>
+        </Item>
+        <Item variant="link" onClick={() => createIntent()}>
+          <span>
+            <PlusSquare size={16} color={'#333'} />
+          </span>
+          <Text variant="text">
+            <Trans>Create a new intent</Trans>
+          </Text>
+        </Item>
+        <Item variant="link" onClick={() => createResource()}>
+          <span>
+            <Plus size={16} color={'#333'} />
+          </span>
+          <Text variant="text">
+            <Trans>Create a new resource</Trans>
+          </Text>
+        </Item>
+      </List>
+    </Dropdown>
+  );
+};
+
+const List = styled.div<{ lined?: boolean }>`
+  padding: 8px;
+`;
+
+const Action = styled(Flex)`
+  justify-content: flex-end;
+  padding: 12px 20px;
+`;
+const Item = styled(Flex)`
+  line-height: 50px;
+  height: 50px;
+  cursor: pointer;
+  align-items: center;
+
+  & span {
+    display: inline-block;
+    margin-right: 8px;
+
+    .--rtl & {
+      margin-right: 0px;
+      margin-left: 8px;
+    }
+
+    & svg {
+      vertical-align: sub;
+    }
+  }
+
+  & a {
+    color: inherit !important;
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: ${props => props.theme.colors.primary};
+  }
+`;
+
+export const StyledClose = styled.button`
+  width: 18px;
+  height: 18px;
+  position: relative;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+  margin: 0;
+  &:focus {
+    outline: none;
+  }
+`;

src/HOC/modules/CreateMenuHOK/CreateMenuHOK.tsx

@@ -0,0 +1,75 @@
+import React, { useReducer } from 'react';
+import { CreateDropdown } from './CreateDropdown';
+import Modal from '../../../ui/modules/Modal';
+import { CreateCommunityPanelHOC } from '../CreateCommunityPanel/createCommunityPanelHOC';
+import { CreateIntentPanelHOC } from '../CreateIntentPanel/createIntentPanelHOC';
+import { CreateLocationPanelHOC } from '../CreateLocationPanel/CreateLocationPanelHOK';
+import { CreateResourcePanelHOC } from '../CreateResourcePanel/CreateResourcePanelHOC';
+import { useNotifyMustLogin } from '../../lib/notifyMustLogin';
+
+export type Props = {
+  open: boolean;
+  openHandler: (open: boolean) => void;
+};
+
+export const CreateMenuHOK: React.FC<Props> = ({ open, openHandler }: Props) => {
+  const notifiedMustLogin = useNotifyMustLogin();
+  const [showCreateLocation, toggleShowCreateLocation] = React.useState(false);
+  const [showCreateCommunity, toggleShowCreateCommunity] = useReducer(
+    is => (notifiedMustLogin() ? false : !is),
+    false
+  );
+
+  const [showCreateIntent, toggleShowCreateIntent] = useReducer(
+    is => (notifiedMustLogin() ? false : !is),
+    false
+  );
+
+  const [showCreateResource, toggleShowCreateResource] = useReducer(
+    is => (notifiedMustLogin() ? false : !is),
+    false
+  );
+
+  const CreateCommunityModal = showCreateCommunity ? (
+    <Modal closeModal={toggleShowCreateCommunity}>
+      <CreateCommunityPanelHOC done={toggleShowCreateCommunity} />
+    </Modal>
+  ) : null;
+
+  const CreateIntentModal = showCreateIntent ? (
+    <Modal closeModal={toggleShowCreateIntent}>
+      <CreateIntentPanelHOC done={toggleShowCreateIntent} />
+    </Modal>
+  ) : null;
+
+  const CreateResourceModal = showCreateResource ? (
+    <Modal closeModal={toggleShowCreateResource}>
+      {showCreateLocation ? (
+        <CreateLocationPanelHOC done={toggleShowCreateLocation} />
+      ) : (
+        <CreateResourcePanelHOC
+          done={toggleShowCreateResource}
+          toggleCreateLocation={toggleShowCreateLocation}
+        />
+      )}
+    </Modal>
+  ) : null;
+
+  return (
+    <>
+      {CreateCommunityModal}
+      {CreateIntentModal}
+      {CreateResourceModal}
+      {open && (
+        <CreateDropdown
+          createCommunity={toggleShowCreateCommunity}
+          createResource={toggleShowCreateIntent}
+          createIntent={toggleShowCreateResource}
+          toggleDropdown={() => {
+            openHandler(!open);
+          }}
+        />
+      )}
+    </>
+  );
+};

src/HOC/modules/CreateResourcePanel/CreateResourcePanelHOC.tsx

@@ -69,11 +69,11 @@ export const CreateResourcePanelHOC: FC<Props> = ({
 
   const formik = useFormik<any>({
     initialValues: {
-      name: '',
-      note: '',
-      image: undefined,
+      name: resource?.name || '',
+      note: resource?.note || '',
+      image: resource?.image || '',
       atLocation: {
-        id: '',
+        id: resource?.currentLocation?.id || '',
         label: ''
       },
       action: {
@@ -116,8 +116,7 @@ export const CreateResourcePanelHOC: FC<Props> = ({
       })
         .then((response: any) => {
           if (!response.errors) {
-            const newId =
-              response?.data?.createEconomicEvent.economicEvent.resourceInventoriedAs.id;
+            const newId = response?.data?.createEconomicEvent?.economicResource?.id;
             const redirect = `/resource/${newId} `;
             done();
             history.replace(redirect);

src/HOC/modules/EconomicEventManager/EconomicEventManager.graphql

@@ -32,7 +32,6 @@ query unitsPages {unitsPages(limit: 30) {
 }
 }
 
-
 query users {users {
   edges {
     id

src/HOC/modules/EconomicEventManager/EconomicEventManagerHOC.tsx

@@ -6,9 +6,7 @@ import { useCreateDefaultResource } from '../../../fe/resourceDefault/useCreateD
 import { useAgentsQuery } from '../../../fe/resourceDefault/useCreateResource.generated';
 import { useActionsQuery } from '../IntentPanel/Actions.generated';
 import { EconomicEventManagerProps } from '../../../ui/modules/EconomicEventManager';
-import {
-  useUnitsPagesQuery,
-} from './EconomicEventManager.generated';
+import { useUnitsPagesQuery } from './EconomicEventManager.generated';
 
 export const EconomicEventManagerHOC: FC = ({ children }) => {
   const [providerList, setProviderList] = React.useState<
@@ -17,7 +15,6 @@ export const EconomicEventManagerHOC: FC = ({ children }) => {
   const [receiverList, setReceiverList] = React.useState<
     null | undefined | [] | { id: string; name: string }[]
   >([]);
-  const [action, setAction] = React.useState('');
 
   const intentActionsQ = useActionsQuery();
   const { data } = useAgentsQuery();
@@ -72,7 +69,7 @@ export const EconomicEventManagerHOC: FC = ({ children }) => {
     providerList: providerList,
     receiverList: receiverList,
     unitPages,
-    setAction
+    setAction: () => {}
   };
 
   const childrenWithProps = React.Children.map(children, child => {

src/HOC/modules/EconomicEventOnResourcePanel/CreateEconomicEventOnResourcePanelHOC.tsx

@@ -1,17 +1,23 @@
 import { useFormik } from 'formik';
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import { Slide, toast } from 'react-toastify';
 import { CreateEventOnResourcePanel } from '../../../ui/modules/CreateEventOnResourcePanel';
 import * as Yup from 'yup';
 import { TestUrlOrFile } from 'HOC/lib/formik-validations';
 import { useCreateEventOnResource } from '../../../fe/resource/create/useCreateEventOnResource';
 import {
-  TCreateResourcePanel,
+  TCreateEventOnResourcePanel,
   CreateEventOnResourceFormValues
 } from '../../../ui/modules/CreateEventOnResourcePanel';
 import { EconomicResource } from '../../pages/inventory/InventoryPage';
 import { EconomicEventManagerHOC } from '../EconomicEventManager/EconomicEventManagerHOC';
 
+import styled from 'ui/themes/styled';
+import { Flex } from 'rebass/styled-components';
+import { Trans } from '@lingui/macro';
+import { CreateLocationPanelHOC } from '../CreateLocationPanel/CreateLocationPanelHOK';
+import { CreateResourcePanelHOC } from '../CreateResourcePanel/CreateResourcePanelHOC';
+
 export interface BasicCreateEventFormValues {
   name: string;
   summary: string;
@@ -163,16 +169,79 @@ export const CreateEconomicEventOnResourcePanelHOC: FC<Props> = ({ done, resourc
     }
   });
 
-  const CreateResourcePanelProps: TCreateResourcePanel = {
+  const CreateEventOnResourcePanelProps: TCreateEventOnResourcePanel = {
     ...props,
     title: `Create a new event on resource ${resource.name}`,
     formik,
     done
   };
 
+  const handlerCloseSecondTab = () => {
+    toggleTab(0);
+    done();
+  };
+  const [showCreateLocation, toggleShowCreateLocation] = useState(false);
+  const CreateResourceModal = (
+    <>
+      {showCreateLocation ? (
+        <CreateLocationPanelHOC done={toggleShowCreateLocation} />
+      ) : (
+        <CreateResourcePanelHOC
+          done={handlerCloseSecondTab}
+          toggleCreateLocation={toggleShowCreateLocation}
+          resource={formik.values}
+        />
+      )}
+    </>
+  );
+
+  const CreateEventOnExistResourceModal = (
+    <CreateEventOnResourcePanel {...CreateEventOnResourcePanelProps} />
+  );
+
+  const [tab, toggleTab] = useState(0);
   return (
     <EconomicEventManagerHOC>
-      <CreateEventOnResourcePanel {...CreateResourcePanelProps} />
+      <TabController>
+        <TabButton className={tab === 0 ? 'active button' : 'button'} onClick={() => toggleTab(0)}>
+          <Trans>Create a new event on exist resource</Trans>
+        </TabButton>
+        <TabButton className={tab === 1 ? 'active button' : 'button'} onClick={() => toggleTab(1)}>
+          <Trans>Create a new Resource</Trans>
+        </TabButton>
+      </TabController>
+      {tab ? CreateResourceModal : CreateEventOnExistResourceModal}
     </EconomicEventManagerHOC>
   );
 };
+
+export const TabButton = styled('button')`
+  padding: 10px 30px;
+  text-align: center;
+  outline: none;
+  border: none;
+  text-transform: uppercase;
+  margin: 10px 10px 0;
+  border-radius: 4px 4px 0 0;
+  transition: background-color 0.4s ease;
+  font-weight: bold;
+
+  &:hover {
+    background: #05244f;
+    color: #fff;
+  }
+
+  &.active {
+    background: #05244f;
+    color: #fff;
+  }
+`;
+
+export const TabController = styled(Flex)`
+  width: 100%;
+  justify-content: stretch;
+  align-items: stretch;
+  flex-grow: 1;
+  flex-direction: row;
+  border-bottom: 1px solid #05244f;
+`;

src/HOC/modules/EconomicEventOnResourcePanel/UpdateEconomicResourceHOC.tsx

@@ -41,22 +41,13 @@ export const UpdateEconomicResourceHOC: FC<Props> = ({ done, resource, ...props
     initialValues: React.useMemo(() => {
       let values = {
         note: '',
-        image: '' || undefined,
-        location: ''
+        image: '' || undefined
       };
       if (resource) {
         values = {
           //@ts-ignore
-          name: resource.name || '',
           note: resource.note || '',
-          image: resource.image || undefined,
-          atLocation: resource.currentLocation
-            ? {
-                id: resource.currentLocation.id,
-                value: resource.currentLocation.id,
-                label: resource.currentLocation.name
-              }
-            : { id: '', label: '', value: '' }
+          image: resource.image || undefined
         };
       }
       return values;
@@ -69,9 +60,7 @@ export const UpdateEconomicResourceHOC: FC<Props> = ({ done, resource, ...props
     onSubmit: (values: UpdateResourceVariables) => {
       return update({
         id: resource.id,
-        name: values.name,
         note: values.note,
-        atLocation: values.atLocation?.id,
         image: values.image
       })
         .then((response: any) => {