├── src
    ├── login
    │   ├── style.css
    │   └── index.js
    ├── validate
    │   ├── wrapper.js
    │   ├── style.css
    │   └── index.js
    ├── work
    │   ├── wrapper.js
    │   ├── style.css
    │   └── index.js
    ├── agentPlans
    │   ├── style.css
    │   ├── index.js
    │   └── wrapper.js
    ├── agentRelationships
    │   ├── style.css
    │   └── index.js
    ├── images
    │   ├── bg.png
    │   └── sample.png
    ├── index.css
    ├── fragmentTypes.json
    ├── components
    │   ├── alert
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── button
    │   │   ├── index.js
    │   │   └── index.css
    │   ├── textarea
    │   │   ├── index.js
    │   │   └── index.css
    │   ├── title
    │   │   ├── index.js
    │   │   └── index.css
    │   ├── loading
    │   │   ├── style.css
    │   │   └── index.js
    │   ├── cardModal
    │   │   ├── modalNote.js
    │   │   ├── modalTitle
    │   │   │   ├── modalTitle.js
    │   │   │   └── index.js
    │   │   ├── modalMembers
    │   │   │   └── modalMembers.js
    │   │   ├── modalStatus.js
    │   │   ├── modalDue.js
    │   │   ├── index.js
    │   │   ├── CardModal.js
    │   │   ├── logEvent
    │   │   │   └── logEvent.js
    │   │   └── modalActivities
    │   │   │   └── editWrapper.js
    │   ├── bin
    │   │   ├── style.css
    │   │   ├── editNote.js
    │   │   ├── editTitle.js
    │   │   ├── archive.js
    │   │   ├── editStart.js
    │   │   └── editScope.js
    │   ├── flag
    │   │   ├── index.js
    │   │   ├── flag.js
    │   │   └── style.css
    │   ├── inventoryItem
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── modal
    │   │   ├── index.js
    │   │   ├── modal.js
    │   │   └── style.css
    │   ├── planModal
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── newCommitmentModal
    │   │   ├── wrapper.js
    │   │   └── style.css
    │   ├── cards
    │   │   ├── index.js
    │   │   └── style.css
    │   ├── feed
    │   │   ├── feed.js
    │   │   ├── index.css
    │   │   └── index.js
    │   ├── newBin
    │   │   └── style.css
    │   └── sidebar
    │   │   ├── index.js
    │   │   └── style.css
    ├── overview
    │   ├── wrapper.js
    │   └── style.css
    ├── queries
    │   ├── getNotifications.js
    │   ├── getUnits.js
    │   ├── getAgentPlans.js
    │   ├── getResources.js
    │   ├── getOrganizations.js
    │   ├── getPlans.js
    │   ├── getInventory.js
    │   ├── getRelationships.js
    │   ├── getEvents.js
    │   ├── getProcess.js
    │   ├── getCommitment.js
    │   ├── getEventClaim.js
    │   ├── getCommitmentClaim.js
    │   ├── getAgent.js
    │   ├── getClaim.js
    │   ├── getProcessClaim.js
    │   ├── getPlan.js
    │   └── getClaims.js
    ├── mutations
    │   ├── deleteNotification.js
    │   ├── login.js
    │   ├── deletePlan.js
    │   ├── deleteProcess.js
    │   ├── deleteEvent.js
    │   ├── updateNotification.js
    │   ├── CreatePlan.js
    │   ├── updatePlan.js
    │   ├── updateCommitmentTitle.js
    │   ├── updateCommitmentStatus.js
    │   ├── deleteCommitment.js
    │   ├── createValidation.js
    │   ├── deleteValidation.js
    │   ├── updateProcess.js
    │   ├── updateEvent.js
    │   ├── createProcess.js
    │   ├── createEvent.js
    │   ├── updateCommitment.js
    │   └── CreateCommitment.js
    ├── helpers
    │   ├── index.js
    │   └── router.js
    ├── AuthenticatedOnly.js
    ├── mixins.css
    ├── plan
    │   ├── style.css
    │   ├── wrapper.js
    │   └── index.js
    ├── inventory
    │   ├── index.js
    │   ├── wrapper.js
    │   └── style.css
    ├── postcss.config.js
    ├── agent
    │   ├── wrapper.js
    │   ├── index.js
    │   └── style.css
    ├── variables.css
    ├── store
    │   ├── index.js
    │   └── resolvers.js
    ├── network
    │   ├── wrapper.js
    │   └── index.js
    ├── canvas
    │   ├── style.css
    │   └── index.js
    ├── planCanvas
    │   └── index.js
    ├── index.js
    ├── templates
    │   └── AppTemplate
    │   │   ├── style.css
    │   │   └── index.js
    ├── settings
    │   └── index.js
    └── registerServiceWorker.js
├── postcss.config.js
├── .vscode
    └── settings.json
├── public
    ├── manifest.json
    └── index.html
├── config
    ├── jest
    │   ├── fileTransform.js
    │   └── cssTransform.js
    ├── polyfills.js
    ├── paths.js
    ├── env.js
    └── webpackDevServer.config.js
├── .gitignore
├── .github
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── scripts
    ├── test.js
    └── start.js
├── app.test.js
├── README.md
└── package.json


/src/login/style.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/validate/wrapper.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/work/wrapper.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "standard.enable": false
3 | }


--------------------------------------------------------------------------------
/src/agentPlans/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 |     display: initial;
3 | }


--------------------------------------------------------------------------------
/src/agentRelationships/style.css:
--------------------------------------------------------------------------------
1 | .container {
2 |     display: initial;
3 | }


--------------------------------------------------------------------------------
/src/images/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opencooperativeecosystem/agent/HEAD/src/images/bg.png


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 |   margin: 0;
3 |   padding: 10px;
4 |   font-family: sans-serif;
5 | }
6 | 


--------------------------------------------------------------------------------
/src/images/sample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/opencooperativeecosystem/agent/HEAD/src/images/sample.png


--------------------------------------------------------------------------------
/src/fragmentTypes.json:
--------------------------------------------------------------------------------
1 | {"__schema":{"types":[{"kind":"INTERFACE","name":"Agent","possibleTypes":[{"name":"Organization"},{"name":"Person"}]}]}}


--------------------------------------------------------------------------------
/src/components/alert/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import style from './style.css'
3 | const Alert = ({children}) => (
4 |     <div className={style.alert}>{children}</div>
5 | )
6 | 
7 | export default Alert


--------------------------------------------------------------------------------
/src/components/alert/style.css:
--------------------------------------------------------------------------------
1 | .alert {
2 |     border-radius: 4px;
3 |     height: 26px;
4 |     line-height: 26px;
5 |     color: white;
6 |     background: red;
7 |     padding: 0 10px;
8 |     font-size: 14px;
9 | }


--------------------------------------------------------------------------------
/src/overview/wrapper.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Component from '../agent/wrapper'
3 | 
4 | const Overview = ({id}) => {
5 |   return <Component agentProfile={id} />
6 | }
7 | 
8 | export default Overview
9 | 


--------------------------------------------------------------------------------
/src/queries/getNotifications.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 |   query {
 5 |     notifications @client {
 6 |         id
 7 |         message
 8 |         type
 9 |     }
10 |   }
11 | `
12 |   


--------------------------------------------------------------------------------
/src/mutations/deleteNotification.js:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 | 
3 | export default gql`
4 |   mutation deleteNotification($id: String!){
5 |       deleteNotification(id: $id) @client {
6 |           message
7 |       }
8 |   }
9 | `


--------------------------------------------------------------------------------
/src/components/button/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import style from './index.css'
3 | 
4 | const Button = ({action, type, title}) => (
5 |     <button onClick={action} className={style[type]} >{title}</button>
6 | )
7 | 
8 | export default Button


--------------------------------------------------------------------------------
/src/mutations/login.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const loginMutation = gql`
 4 | mutation($username: String! $password: String!) {
 5 |   createToken(username: $username, password: $password) {
 6 |     token
 7 |   }
 8 | }
 9 | `
10 | 
11 | export default loginMutation
12 | 


--------------------------------------------------------------------------------
/src/mutations/deletePlan.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const deletePlan = gql`
 4 | mutation ($token: String!, $id: Int!) {
 5 |     deletePlan(token: $token, id: $id) {
 6 |       plan {
 7 |         name
 8 |       }
 9 |     }
10 |   }`
11 | 
12 | export default deletePlan
13 | 


--------------------------------------------------------------------------------
/src/helpers/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { branch, renderComponent } from 'recompose'
 3 | 
 4 | const Loading = () => (
 5 |   <div>Loading....</div>
 6 | )
 7 | 
 8 | export const withLoadingComponent = branch(
 9 |   props => props.loading,
10 |   renderComponent(Loading)
11 | )
12 | 


--------------------------------------------------------------------------------
/src/components/textarea/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import style from './index.css'
3 | 
4 | const TextArea = ({action, type, title, placeholder}) => (
5 |     <textarea placeholder={placeholder} onChange={action} className={style[type]} value={title} />  
6 | )
7 | 
8 | export default TextArea
9 | 


--------------------------------------------------------------------------------
/src/mutations/deleteProcess.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const deleteProcess = gql`
 4 | mutation ($token: String!, $id: Int!) {
 5 |     deleteProcess(token: $token, id: $id) {
 6 |       process {
 7 |         name
 8 |       }
 9 |     }
10 |   }`
11 | 
12 | export default deleteProcess
13 | 


--------------------------------------------------------------------------------
/src/queries/getUnits.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | const getUnitsQuery = gql`
 4 |   query($token: String!) {
 5 |     viewer(token: $token) {
 6 |       allUnits {
 7 |         id
 8 |         name
 9 |         symbol
10 |       }
11 |     }
12 |   }
13 | `;
14 | 
15 | export default getUnitsQuery;
16 | 


--------------------------------------------------------------------------------
/src/components/title/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './index.css'
 3 | 
 4 | const Title = ({icon, title}) => (
 5 |   <h2 className={style.header_title}>
 6 |     {icon ? <span className={style.content_icon}>{icon}</span> : ''}
 7 |     {title}
 8 |   </h2>
 9 | )
10 | 
11 | export default Title


--------------------------------------------------------------------------------
/src/mutations/deleteEvent.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 | mutation ($token: String!, $id: Int!) {
 5 |     deleteEconomicEvent(
 6 |       token: $token,
 7 |       id: $id
 8 |     ) {
 9 |       economicEvent {
10 |         action
11 |         start
12 |       }
13 |     }
14 | }
15 | `


--------------------------------------------------------------------------------
/src/mutations/updateNotification.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 |   mutation addNotification($message: String!, $type: String){
 5 |       addNotification(message: $message, type: $type) @client {
 6 |           id,
 7 |           type,
 8 |           message
 9 |       }
10 |   }
11 | `


--------------------------------------------------------------------------------
/src/queries/getAgentPlans.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const agentPlans = gql`
 4 |   query($token: String) {
 5 |     viewer(token: $token) {
 6 |       myAgent {
 7 |         id
 8 |         agentPlans {
 9 |             id
10 |         }
11 |       }
12 |     }
13 |   }
14 | `;
15 | 
16 | export default agentPlans


--------------------------------------------------------------------------------
/src/AuthenticatedOnly.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | class AuthenticatedOnly extends React.Component {
 4 |   render () {
 5 |     let isLoggedIn = localStorage.getItem('oce_token')
 6 |     return (isLoggedIn ? this.props.children : this.props.unauthenticatedComponent)
 7 |   }
 8 | }
 9 | 
10 | export default AuthenticatedOnly
11 | 


--------------------------------------------------------------------------------
/src/components/loading/style.css:
--------------------------------------------------------------------------------
 1 | .wrapper {
 2 |     margin-top: 20px;
 3 |     text-align: center;
 4 | }
 5 | 
 6 | .wrapperLoader h1 {
 7 |     display: inline-block;
 8 |     margin-left: 10px;
 9 |     color: #606984;
10 |     font-size: 16px;
11 |     vertical-align: middle;
12 | }
13 | 
14 | .loaderIcon {
15 |     vertical-align: sub;
16 | }


--------------------------------------------------------------------------------
/src/components/cardModal/modalNote.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import style from "./index.css";
 3 | 
 4 | const Note = ({ note }) => (
 5 |   <div className={style.content_note}>
 6 |     <h3 className={style.note_desc}>
 7 |       <span className={style.note_icon} />
 8 |       {note}
 9 |     </h3>
10 |   </div>
11 | );
12 | 
13 | export default Note;
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     }
10 |   ],
11 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/queries/getResources.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | const getResourcesQuery = gql`
 4 | query ($token: String, $action: Action) {
 5 |   viewer(token: $token) {
 6 |     resourceClassificationsByAction(action: $action) {
 7 |       name
 8 |       category
 9 |       processCategory
10 |       id
11 |     }
12 |   }
13 | }`;
14 | 
15 | export default getResourcesQuery;
16 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | 
 5 | // This is a custom Jest transformer turning file imports into filenames.
 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 7 | 
 8 | module.exports = {
 9 |   process(src, filename) {
10 |     return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 |   },
12 | };
13 | 


--------------------------------------------------------------------------------
/src/mutations/CreatePlan.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag';
 2 | 
 3 | const createPlan = gql`
 4 | mutation($token: String!, $name: String!, $due: String!, $note: String) {
 5 |   createPlan(token: $token, name: $name, due: $due, note: $note) {
 6 |     plan {
 7 |       id
 8 |       name
 9 |       due
10 |       note
11 |     }
12 |   }
13 | }
14 | `;
15 | 
16 | export default createPlan
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # production
10 | /build
11 | 
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 | 
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 | yarn.lock


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/validate/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     user-select: none;
 3 |     white-space: nowrap;
 4 |     overflow-x: auto;
 5 |     overflow-y: hidden;
 6 |     position: absolute;
 7 |     top: 0;
 8 |     right: 0;
 9 |     bottom: 0;
10 |     left: 0;
11 | }
12 | 
13 | .container_link {
14 |     position: relative;
15 |     margin: 10px;
16 | }
17 | 
18 | .active > div {
19 |     border: 2px solid #419bf9;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/work/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     user-select: none;
 3 |     white-space: nowrap;
 4 |     overflow-x: auto;
 5 |     overflow-y: hidden;
 6 |     position: absolute;
 7 |     top: 0;
 8 |     right: 0;
 9 |     bottom: 0;
10 |     left: 0;
11 | }
12 | 
13 | .container_link {
14 |     position: relative;
15 |     margin: 10px;
16 | }
17 | 
18 | .active > div {
19 |     border: 2px solid #419bf9;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/queries/getOrganizations.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const allOrganizations = gql`
 4 | query($token: String) {
 5 |     viewer(token: $token) {
 6 |       fcOrganizations (visibility:"public", joiningStyle:"moderated") {
 7 |         id
 8 |         name
 9 |         image
10 |         note
11 |         type
12 |         __typename
13 |       }
14 |     }
15 |   }`
16 | 
17 | export default allOrganizations
18 | 


--------------------------------------------------------------------------------
/src/components/bin/style.css:
--------------------------------------------------------------------------------
 1 | .form_note {
 2 |     display: block;
 3 |     height: 135px;
 4 | }
 5 | 
 6 | .h5 {
 7 |     font-size: 14px;
 8 |     font-weight: 600;
 9 |     margin: 0;
10 |     margin-bottom: 10px;
11 | }
12 | 
13 | .inputTitle {
14 |     font-weight: 500;
15 |     font-size: 13px;
16 |     letter-spacing: .5;
17 |     margin-top: 16px;
18 |     color: #99ADC6;
19 |     margin-bottom: 8px;
20 |     text-transform: capitalize;
21 | }


--------------------------------------------------------------------------------
/src/mutations/updatePlan.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag';
 2 | 
 3 | const updatePlan = gql`
 4 | mutation ($token: String!, $id: Int!, $name: String, $note: String, $due: String) {
 5 |     updatePlan(token: $token, id:$id, name: $name, note: $note, due: $due) {
 6 |       plan {
 7 |         id
 8 |         name
 9 |         due
10 |         note
11 |         plannedOn
12 |       }
13 |     }
14 |   }
15 | `;
16 | 
17 | export default updatePlan
18 | 


--------------------------------------------------------------------------------
/src/components/flag/index.js:
--------------------------------------------------------------------------------
 1 | import {deleteCurrentFlagAction} from '../../store/actions/flags'
 2 | import {connect} from 'react-redux'
 3 | import Flag from './flag'
 4 | 
 5 | const mapStateToProps = state => ({
 6 |   data: state.flags
 7 | })
 8 | 
 9 | const mapDispatchToProps = dispatch => {
10 |   return {
11 |     deleteFlag: () => dispatch(deleteCurrentFlagAction())
12 |   }
13 | }
14 | 
15 | export default connect(mapStateToProps, mapDispatchToProps)(Flag)
16 | 


--------------------------------------------------------------------------------
/src/components/loading/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Icons} from 'oce-components/build'
 3 | import style from './style.css'
 4 | 
 5 | export const LoadingMini = () => (
 6 |     <div className={style.wrapper}>
 7 |       <div className={style.wrapperLoader}>
 8 |         <span className={style.loaderIcon}><Icons.Loading width="24" height="24" color='#606984' /></span>
 9 |         <h1>Loading...</h1>
10 |       </div>
11 |     </div>
12 | )
13 | 
14 | 


--------------------------------------------------------------------------------
/src/mutations/updateCommitmentTitle.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const UpdateCommitmentTitle = gql`
 4 | mutation ($token: String!, $id: Int!, $note: String, $due: String, $isFinished: Boolean ) {
 5 |     updateCommitment(token: $token, note: $note, id: $id, due: $due, isFinished:$isFinished ) {
 6 |     commitment {
 7 |         id
 8 |         note
 9 |         isFinished,
10 |         due
11 |     }
12 |     }
13 | }
14 | `
15 | 
16 | export default UpdateCommitmentTitle
17 | 


--------------------------------------------------------------------------------
/src/mutations/updateCommitmentStatus.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const UpdateCommitmentStatus = gql`
 4 | mutation ($token: String!, $id: Int!, $isFinished: Boolean ) {
 5 |     updateCommitment(
 6 |       token: $token, 
 7 |       id: $id, 
 8 |       isFinished: $isFinished
 9 |     ) {
10 |       commitment {
11 |         id
12 |         isFinished
13 |         inputOf {
14 |           id
15 |         }
16 |       }
17 |     }
18 |   }`
19 | 
20 | export default UpdateCommitmentStatus
21 | 


--------------------------------------------------------------------------------
/src/components/inventoryItem/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | 
 4 | const Item = ({item}) => (
 5 |   <div className={style.list_item}>
 6 |     <div className={style.item_desc}>
 7 |       <span>{item.currentQuantity.numericValue + ' ' + item.currentQuantity.unit.name }</span> of <b>{item.resourceClassifiedAs.name}</b>
 8 |     </div>
 9 |     <div className={style.type}>{item.resourceClassifiedAs.category}</div>
10 |   </div>
11 | )
12 | 
13 | export default Item
14 | 


--------------------------------------------------------------------------------
/src/queries/getPlans.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const agentQuery = gql`
 4 | query ($token: String, $id: Int) {
 5 |     viewer(token: $token) {
 6 |       agent(id: $id) {
 7 |         agentPlans (isFinished: false)  {
 8 |           name
 9 |           id
10 |           note
11 |           due
12 |           plannedOn
13 |           planProcesses {
14 |             isStarted
15 |             isFinished
16 |             name
17 |           }
18 |         }
19 |       }
20 |     }
21 |   }
22 | `
23 | 
24 | export default agentQuery
25 | 


--------------------------------------------------------------------------------
/src/components/title/index.css:
--------------------------------------------------------------------------------
 1 | .header_title {
 2 |     font-size: 18px;
 3 |     margin: 0 0 9px;
 4 |     color: #444444;
 5 |     position: relative;
 6 |     /* margin-left: 10px; */
 7 |     display: inline-block;
 8 |     width: 400px;
 9 |     vertical-align: middle;
10 | }
11 | 
12 | .header_title .content_icon {
13 |   position: absolute;
14 |   left: -34px;
15 | }
16 | 
17 | /* .content_module .content_icon {
18 |     left: -38px;
19 |     position: absolute;
20 |     top: 8px;
21 |   } */
22 |   
23 |   .content_icon svg {
24 |     stroke: 2;
25 |   }


--------------------------------------------------------------------------------
/src/mutations/deleteCommitment.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 | mutation ($token: String!, $id: Int!) {
 5 |     deleteCommitment(token: $token, id: $id) {
 6 |       commitment {
 7 |         action
 8 |         fulfilledBy {
 9 |           fulfilledBy {
10 |             action
11 |             start
12 |             id
13 |             requestDistribution
14 |             note
15 |             provider {
16 |               id
17 |               name
18 |               image
19 |             }
20 |           }
21 |         }
22 |       }
23 |     }
24 | }`


--------------------------------------------------------------------------------
/src/queries/getInventory.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetCommitment = gql`
 4 | query ($token: String) {
 5 |   viewer(token: $token) {
 6 |     myAgent {
 7 |       ownedEconomicResources {
 8 |         id
 9 |         resourceClassifiedAs {
10 |         name
11 |         category
12 |         }
13 |         trackingIdentifier
14 |         currentQuantity {
15 |         numericValue
16 |         unit {
17 |             name
18 |         }
19 |         }
20 |         image
21 |         note
22 |       }
23 |     }
24 |   }
25 | }
26 | `
27 | 
28 | export default GetCommitment
29 |   


--------------------------------------------------------------------------------
/src/components/cardModal/modalTitle/modalTitle.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from '../index.css'
 3 | import Title from '../../title'
 4 | // import {Cross, More} from '../../../icons'
 5 | import {Icons} from 'oce-components/build'
 6 | 
 7 | export default function ModalTitle ({action, unit, amount, resource }) {
 8 |   return (
 9 |       <div className={style.content_header}>
10 |         <span className={style.header_icons}><Icons.Text width='20' width='20' color='#999'/></span>
11 |         <h1 className={style.title}>{action + ' ' + amount + ' ' + unit}<span>of</span>{resource}</h1>
12 |       </div>
13 |     )
14 | }


--------------------------------------------------------------------------------
/src/queries/getRelationships.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const relationshipQuery = gql`
 4 | query ($token: String) {
 5 |     viewer(token: $token) {
 6 |       myAgent {
 7 |         id
 8 |         agentRelationships {
 9 |           relationship {
10 |             label
11 |             category
12 |           }
13 |           object {
14 |             id
15 |             name
16 |             note
17 |             image
18 |           }
19 |           subject {
20 |             name
21 |             image
22 |             id
23 |           }
24 |         }
25 |       }
26 |     }
27 |   }
28 | `
29 | 
30 | export default relationshipQuery
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | 
 5 | ---
 6 | 
 7 | **Is your feature request related to a problem? Please describe.**
 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 9 | 
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 | 
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 | 
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 | 


--------------------------------------------------------------------------------
/src/mutations/createValidation.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const createValidation = gql`
 4 | mutation ($token: String!, $validatedById: Int!, $economicEventId: Int!) {
 5 |   createValidation(token: $token,
 6 |     validatedById: $validatedById,
 7 |     economicEventId: $economicEventId
 8 |   ) {
 9 |     validation {
10 |       id
11 |       validatedBy {
12 |         name
13 |         id
14 |       }
15 |       economicEvent {
16 |         id
17 |         inputOf {
18 |           id
19 |           processPlan {
20 |             id
21 |           }
22 |         }
23 |       }
24 |       validationDate
25 |     }
26 |   }
27 | }`
28 | 
29 | export default createValidation
30 |   


--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | if (typeof Promise === 'undefined') {
 4 |   // Rejection tracking prevents a common issue where React gets into an
 5 |   // inconsistent state due to an error, but it gets swallowed by a Promise,
 6 |   // and the user has no idea what causes React's erratic future behavior.
 7 |   require('promise/lib/rejection-tracking').enable();
 8 |   window.Promise = require('promise/lib/es6-extensions.js');
 9 | }
10 | 
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 | 
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 | 


--------------------------------------------------------------------------------
/src/components/modal/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom";
 3 | import Modal from "./modal";
 4 | const modalRoot = document.getElementById('modal');
 5 | 
 6 | class Portal extends React.Component {
 7 |   constructor(props) {
 8 |     super(props);
 9 |     this.el = document.createElement('div');
10 |   }
11 | 
12 |   componentDidMount() {
13 |     modalRoot.appendChild(this.el);
14 |   }
15 | 
16 |   componentWillUnmount() {
17 |     modalRoot.removeChild(this.el);
18 |   }
19 | 
20 |   render() {
21 |     return ReactDOM.createPortal(
22 |       this.props.children,
23 |       this.el
24 |     );
25 |   }
26 | }
27 | 
28 | export default (props) => <Portal><Modal {...props} /></Portal>;


--------------------------------------------------------------------------------
/src/components/textarea/index.css:
--------------------------------------------------------------------------------
 1 | textarea {
 2 |     outline: none;
 3 |     box-sizing: border-box;
 4 |     -webkit-appearance: none;
 5 |     background-color: #E2E4E6;
 6 |     border: 1px solid #CDD2D4;
 7 |     border-radius: 3px;
 8 |     display: block;
 9 |     margin-bottom: 9pt;
10 |     min-height: 2pc;
11 |     padding: 7px;
12 |     resize: vertical;
13 |     width: 100%;
14 |     font-size: 14px;
15 |     line-height: 20px;
16 |     clear: both;
17 |     font-weight: 400;
18 |     margin: 0 0 4px;
19 |     overflow: hidden;
20 |     word-wrap: break-word;
21 |     color: #4d4d4d;
22 |     font-family: 'Fira Sans';
23 |     
24 | }
25 | textarea.white {
26 |     background: transparent;
27 |     border: none;
28 | }


--------------------------------------------------------------------------------
/src/components/planModal/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Component from "./PlanModal";
 3 | import Modal from "../modal";
 4 | 
 5 | const PlanModal = ({
 6 |   toggleModal,
 7 |   isOpen,
 8 |   planId,
 9 |   match,
10 |   scopeId,
11 |   isDeletable,
12 |   title,
13 |   note,
14 |   history,
15 |   due,
16 |   start
17 | }) =>  (
18 |   <Modal isOpen={isOpen} toggleModal={toggleModal}>
19 |     <Component
20 |       planId={planId}
21 |       match={match}
22 |       scopeId={scopeId}
23 |       title={title}
24 |       note={note}
25 |       history={history}
26 |       isDeletable={isDeletable}
27 |       due={due}
28 |       start={start}
29 |     />
30 |   </Modal>
31 | );
32 | 
33 | export default PlanModal;
34 | 


--------------------------------------------------------------------------------
/src/components/inventoryItem/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .list_item {
 3 |     background: rgba(65, 155, 249, .2);
 4 |     border: 1px solid rgba(65, 155, 249, .6);
 5 |     border-radius: 2px;
 6 |     margin-bottom: 10px;
 7 |     lost-utility: clearfix;
 8 |     padding: 10px;
 9 | }
10 | 
11 | .list_item .item_desc {
12 |     float: left;
13 |     color: #f0f0f0;
14 |     font-weight: 400;
15 |     font-size: 15px;
16 |     line-height: 22px;
17 | }
18 | 
19 | .list_item .item_desc b {
20 |     font-weight: 500
21 | }
22 | 
23 | .list_item .type {
24 |     float: right;
25 |     background: rgba(65, 155, 249, 1);
26 |     padding: 2px 10px;
27 |     border-radius: 30px;
28 |     font-size: 12px;
29 |     color: white;
30 |     letter-spacing: .5px;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/cardModal/modalMembers/modalMembers.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from '../index.css'
 3 | import {Icons} from 'oce-components/build'
 4 | 
 5 | export default function ModalMembers ({members}) {
 6 |   return (
 7 |     <div>
 8 |       <div className={style.labels_members}>
 9 |         <span className={style.members_icon}><Icons.Users width='20' height='20' color='#8D8D8D' /></span>
10 |         {members.map((member, i) => (
11 |           <div key={i} className={style.members}>
12 |             <span className={style.members_item}>
13 |               <img src={member.image} alt={member.name} />
14 |             </span>
15 |           </div>
16 |         )
17 |         )}
18 |       </div>
19 |     </div>
20 |   )
21 | }
22 | 


--------------------------------------------------------------------------------
/src/components/modal/modal.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {Icons} from 'oce-components/build'
 3 | import style from './style.css'
 4 | 
 5 | const Modal = ({ isOpen, toggleModal, content, children }) => {
 6 |   return isOpen ? (
 7 |     <div className={style.Wrapper}>
 8 |       <div className={style.Background} onClick={toggleModal} />
 9 |       <div className={style.Dialog}>
10 |         <div className={style.Actions}>
11 |           <div className={style.Close} onClick={toggleModal}><Icons.Cross width='20' height='20' color='#333' /></div>
12 |         </div>
13 |         <div className={style.Content}>
14 |           {children}
15 |         </div>
16 |       </div>
17 |     </div>
18 |   ) : null;
19 | };
20 | 
21 | export default Modal;
22 | 


--------------------------------------------------------------------------------
/src/agentPlans/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Icons, Panel } from "oce-components/build";
 3 | import Cards from "../components/cards";
 4 | import style from "./style.css";
 5 | 
 6 | const AgentPlans = props => {
 7 |   return (
 8 |     <div className={style.container}>
 9 |       <Panel
10 |         icon={<Icons.Card width="18" height="18" color="#f0f0f0" />}
11 |         title="Plans"
12 |       >
13 |         {props.data.agentPlans.length > 0 ? (
14 |           <Cards
15 |             data={props.data.agentPlans}
16 |             link='/canvas'
17 |         />
18 |         ) : (
19 |           <div>No item in this section</div>
20 |         )}
21 |       </Panel>
22 |     </div>
23 |   );
24 | };
25 | 
26 | export default AgentPlans;
27 | 


--------------------------------------------------------------------------------
/src/mixins.css:
--------------------------------------------------------------------------------
 1 | /* MEDIA QUERY */
 2 | 
 3 | @define-mixin for-phone-only {
 4 |     @media (max-width: 599px) { @mixin-content; }
 5 | }
 6 | 
 7 | @define-mixin for-tablet-portrait-up {
 8 |     @media (min-width: 600px) { @mixin-content; }
 9 | }
10 | 
11 | @define-mixin for-tablet-landscape-up {
12 |     @media (min-width: 900px) { @mixin-content; }
13 | }
14 | 
15 | @define-mixin for-desktop-up {
16 |     @media (min-width: 1200px) { @mixin-content; }
17 | }
18 | 
19 | @define-mixin for-big-desktop-up {
20 |     @media (min-width: 1800px) { @mixin-content; }
21 | }
22 | 
23 | 
24 | /* UTILITY  */
25 | @define-mixin clearfix {
26 |     &:before, &:after {
27 |       content: " ";
28 |       display: table; }
29 |     &:after {
30 |       clear: both; }
31 |   }
32 |   


--------------------------------------------------------------------------------
/src/mutations/deleteValidation.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const deleteValidation = gql`
 4 | mutation ($token: String!, $id: Int!) {
 5 |     deleteValidation(token: $token, id: $id) {
 6 |       validation {
 7 |         validatedBy {
 8 |           name
 9 |           id
10 |         }
11 |         economicEvent {
12 |           id
13 |           inputOf {
14 |             id
15 |             processPlan {
16 |               id
17 |             }
18 |           }
19 |           action
20 |           affectedQuantity {
21 |             numericValue
22 |             unit {
23 |               name
24 |             }
25 |           }
26 |         }
27 |         validationDate
28 |       }
29 |     }
30 |   }`
31 | 
32 | export default deleteValidation
33 | 


--------------------------------------------------------------------------------
/src/queries/getEvents.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 | query ($token: String!, $id: Int!) {
 5 |     viewer(token: $token) {
 6 |         commitment(id: $id) {
 7 |           id
 8 |           fulfilledBy {
 9 |             fulfilledBy {
10 |               action
11 |               requestDistribution
12 |               start
13 |               id
14 |               note
15 |               provider {
16 |                 name
17 |                 image
18 |                 id
19 |               }
20 |             }
21 |             fulfilledQuantity {
22 |               numericValue
23 |               unit {
24 |                 id
25 |                 name
26 |               }
27 |             }
28 |           }
29 |         }
30 |     }
31 | }
32 | `


--------------------------------------------------------------------------------
/src/components/newCommitmentModal/wrapper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CardModal from './index'
 3 | import Modal from '../modal'
 4 | import {  ApolloConsumer } from "react-apollo";
 5 | 
 6 | const NCModal = ({toggleNewCommitmentModal, modalIsOpen, closeModal, planId, match, scopeId, processId}) => (
 7 |   <Modal
 8 |     isOpen={modalIsOpen}
 9 |     toggleModal={toggleNewCommitmentModal}
10 |     >
11 |         <ApolloConsumer>
12 |        {client => (
13 |       <CardModal
14 |         processId={processId}
15 |         planId={planId}
16 |         match={match}
17 |         scopeId={scopeId}
18 |         client={client}
19 |         toggleModal={toggleNewCommitmentModal}
20 |       />
21 |     )}
22 |     </ApolloConsumer>
23 |   </Modal>
24 | )
25 | 
26 | export default NCModal
27 | 


--------------------------------------------------------------------------------
/src/components/cardModal/modalStatus.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Icons } from "oce-components/build";
 3 | import style from "./index.css";
 4 | 
 5 | const Status = ({ isFinished }) => (
 6 |   <div className={style.labels_actions}>
 7 |     <div
 8 |       className={
 9 |         isFinished
10 |           ? style.labels_isFinished
11 |           : style.labels_isFinished + " " + style.incomplete
12 |       }
13 |     >
14 |       <span className={style.labels_icon}>
15 |         {isFinished ? (
16 |           <Icons.Check width="18" height="18" color="#36B37E" />
17 |         ) : (
18 |           <Icons.Cross width="18" height="18" color="#FFAB00" />
19 |         )}
20 |       </span>
21 |       <h5>{isFinished ? "Completed" : "Incompleted"}</h5>
22 |     </div>
23 |   </div>
24 | );
25 | 
26 | export default Status;
27 | 


--------------------------------------------------------------------------------
/src/plan/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     user-select: none;
 3 |     white-space: nowrap;
 4 |     overflow-x: auto;
 5 |     overflow-y: hidden;
 6 |     position: absolute;
 7 |     top: 0;
 8 |     right: 0;
 9 |     bottom: 0;
10 |     left: 0;
11 | }
12 | 
13 | .panel_container {
14 |     padding: 10px;
15 | }
16 | 
17 | .container span {
18 |     display: block;
19 |     margin-bottom: 10px;
20 | }
21 | 
22 | .form_note {
23 |     height: 250px;
24 | }
25 | 
26 | .dates {
27 |     lost-utility: clearfix;
28 | }
29 | 
30 | .item_date {
31 |     float: left;
32 |     margin-right: 10px;
33 | }
34 | 
35 | .item_date h5 {
36 |     font-size: 14px;
37 |     margin: 0;
38 |     margin-bottom: 5px;
39 |     font-weight: 500;
40 |     text-transform: uppercase;
41 |     color: white;
42 | }
43 | 
44 | .item_date:last-of-type {
45 |     margin-right: 0;
46 | }


--------------------------------------------------------------------------------
/src/components/flag/flag.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | // import {Shield} from '../../icons'
 4 | import {Icons} from 'oce-components/build'
 5 | 
 6 | const Flag = ({data, deleteFlag}) => {
 7 |   return (
 8 |     <div className={data.title ? style.flag + ' ' + style.active : style.flag}>
 9 |       <div className={style.flag_internal}>
10 |         <div className={style.internal_icon}><Icons.Shield width={18} heigth={18} color={'#DE350B'}/></div>
11 |         <div className={style.internal_content}>
12 |           <h1>{data.title || ''}</h1>
13 |           <h5 className={style.flag_description}>{data.message || ''}</h5>
14 |           <button onClick={() => deleteFlag()} className={style.flag_close}>Close</button>
15 |         </div>
16 |       </div>
17 |     </div>
18 |   )
19 | }
20 | 
21 | export default Flag
22 | 


--------------------------------------------------------------------------------
/src/components/cardModal/modalDue.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Icons } from "oce-components/build";
 3 | import moment from 'moment'
 4 | import style from './index.css'
 5 | 
 6 | const Due = ({due}) => {
 7 |   let duration = moment
 8 |     .duration(moment(due).diff(moment()))
 9 |     .asHours();
10 |   let deadline = duration < 0 ? 'expired' : duration < 48 ? 'soon' : ''
11 |   return (
12 |   <div className={style.labels_actions}>
13 |     <div className={style.due + ' ' + style[deadline]}>
14 |        <span className={style.labels_icon}><Icons.Clock width='18' height='18' color={deadline === 'soon' ? '#fff' : deadline === 'expired' ? '#fff' : '#8D8D8D' } /></span>
15 |       <span className={style.due_item}>
16 |         {moment(due).format("DD MMM YYYY")}
17 |       </span>
18 |     </div>
19 |   </div>
20 | )};
21 | 
22 | 
23 | export default Due


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | const jest = require('jest');
19 | const argv = process.argv.slice(2);
20 | 
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 |   argv.push('--watch');
24 | }
25 | 
26 | 
27 | jest.run(argv);
28 | 


--------------------------------------------------------------------------------
/src/mutations/updateProcess.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | export const UpdateProcess = gql`
 4 |   mutation(
 5 |     $token: String!
 6 |     $id: Int!
 7 |     $isFinished: Boolean
 8 |     $name: String
 9 |     $scopeId: Int
10 |     $note: String
11 |     $start: String
12 |   ) {
13 |     updateProcess(
14 |       token: $token
15 |       id: $id
16 |       isFinished: $isFinished
17 |       name: $name
18 |       scopeId: $scopeId
19 |       note: $note
20 |       plannedStart: $start
21 |     ) {
22 |       process {
23 |         processPlan {
24 |           id
25 |         }
26 |         id
27 |         name
28 |         scope{
29 |           id
30 |           name
31 |         }
32 |         note
33 |         isDeletable
34 |         plannedStart
35 |         isFinished
36 |       }
37 |     }
38 |   }
39 | `;
40 | 
41 | export default UpdateProcess;
42 | 


--------------------------------------------------------------------------------
/src/components/modal/style.css:
--------------------------------------------------------------------------------
 1 | .Background {
 2 |   position: fixed;
 3 |   top: 0;
 4 |   left: 0;
 5 |   right: 0;
 6 |   bottom: 0;
 7 |   background-color: rgba(51, 60, 69, .95);
 8 |   z-index: 10000000;
 9 |   height: 100%;
10 |   justify-content: center;
11 |   overflow: auto;
12 |   cursor: pointer;
13 | }
14 | 
15 | 
16 | .Dialog {
17 |   width: 700px;
18 |   box-shadow: 0 2px 8px 3px rgba(0, 0, 0, 0.3);
19 |   z-index: 9999999999;
20 |   background-color: #edeff0;
21 |   padding: 0;
22 |   margin: 40px auto;
23 |   position: relative;
24 |   border-radius: 3px;
25 |   padding-bottom: 20px;
26 |   outline: none;
27 | }
28 | 
29 | 
30 | .Actions {
31 |   lost-utility: clearfix;
32 |   padding-top: 10px;
33 |   padding-right: 10px;
34 |   margin-bottom: -50px;
35 | }
36 | .Content {
37 |   lost-utility: clearfix;
38 | }
39 | .Close {
40 |   float: right;
41 |   cursor: pointer;
42 | }


--------------------------------------------------------------------------------
/src/overview/style.css:
--------------------------------------------------------------------------------
 1 | .panel {
 2 |     width: 320px;
 3 |     background: #292D37;
 4 |     border-radius: 3px;
 5 |     min-height: 100vh;
 6 |     flex: 1;
 7 |     margin-right: 10px;
 8 |     margin: 0 5px;
 9 |     margin-left: 5px;
10 |     height: 100%;
11 |     -webkit-box-sizing: border-box;
12 |     box-sizing: border-box;
13 |     display: inline-block;
14 |     vertical-align: top;
15 |     white-space: nowrap;
16 |     position: relative;
17 |     border: 3px;
18 | }
19 | 
20 | .panel_title {
21 |     height: 40px;
22 |     background: #313542;
23 |     lost-utility: clearfix;
24 | }
25 | 
26 | .panel_title h1 {
27 |     font-size: 14px;
28 |     color: #F0F0F0;
29 |     font-weight: 500;
30 |     float: left;
31 |     margin: 0;
32 |     line-height: 40px;
33 |     margin-left: 10px;
34 | }
35 | 
36 | .panel_title span {
37 |     float: left;
38 |     margin-left: 10px;
39 |     vertical-align: sub;
40 |     margin-top: 6px;
41 | }


--------------------------------------------------------------------------------
/src/inventory/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import Item from '../components/inventoryItem'
 4 | 
 5 | const Network = ({data}) => (
 6 |     <section className={style.agent}>
 7 |       <div className={style.agent_profile}>
 8 |         <div className={style.agent_info}>
 9 |           <div className={style.info_data}>
10 |             <h1 className={style.info_title}>Inventory</h1>
11 |             <h5 className={style.info_note}>Internet Advertising Trends You Won T Be Disappointed Internet Advertising Trends You Won T Be Disappointed</h5>
12 |           </div>
13 |         </div>
14 |         <div className={style.section}>
15 |         <div className={style.section_wrapper}>
16 |             {data.ownedEconomicResources.map((item, i) => (
17 |               <Item item={item} key={i} />
18 |             ))}
19 |         </div>
20 |       </div>
21 |     </div>
22 |   </section>
23 | )
24 | 
25 | export default Network
26 | 


--------------------------------------------------------------------------------
/src/postcss.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   plugins: {
 3 |     'postcss-import': {},
 4 |     'postcss-font-magician' : {
 5 |       variants: {
 6 |           'Fira Sans': {
 7 |               '300': [],
 8 |               '500': [],
 9 |               '700': []
10 |           }
11 |       },
12 |       foundries: ['google']
13 |     },
14 |     'postcss-cssnext': {
15 |       browsers: ['last 2 versions', '> 5%'],
16 |     },
17 |     'postcss-custom-media': {},
18 |     'postcss-flexbugs-fixes': {},
19 |     // 'postcss-simple-vars': {
20 |     //   variables: function variables() {
21 |     //     return require('../src/variables')
22 |     //   },
23 |     //   unknown: function unknown(node, name, result) {
24 |     //     node.warn(result, 'Unknown variable ' + name)
25 |     //   }
26 |     // },
27 |     // 'postcss-mixins': {
28 |     //   mixins: require('../src/mixins')
29 |     // },
30 |     'lost': {},
31 |     'postcss-utilities': {}
32 |   },
33 | };


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | 
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 | 
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Desktop (please complete the following information):**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 22]
27 | 
28 | **Smartphone (please complete the following information):**
29 |  - Device: [e.g. iPhone6]
30 |  - OS: [e.g. iOS8.1]
31 |  - Browser [e.g. stock browser, safari]
32 |  - Version [e.g. 22]
33 | 
34 | **Additional context**
35 | Add any other context about the problem here.
36 | 


--------------------------------------------------------------------------------
/src/components/cardModal/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CardModal from "./CardModal";
 3 | import Modal from '../modal'
 4 | 
 5 | const CommitmentModal = ({
 6 |   param,
 7 |   loading,
 8 |   actionPopup,
 9 |   toggleActions,
10 |   modalIsOpen,
11 |   error,
12 |   commitment,
13 |   units,
14 |   modalDescription,
15 |   allPlanAgents,
16 |   agentId,
17 |   processId,
18 |   closeModal,
19 |   toggleModal,
20 |   id
21 | }) => {
22 |   return (
23 |   <Modal
24 |     isOpen={modalIsOpen}
25 |     toggleModal={toggleModal}
26 |     >
27 |    <CardModal
28 |       param={param}
29 |       actionPopup={actionPopup}
30 |       toggleActions={toggleActions}
31 |       id={id}
32 |       allPlanAgents={allPlanAgents}
33 |       units={units}
34 |       agentId={agentId}
35 |       processId={processId}
36 |       data={commitment}
37 |       close={toggleModal}
38 |       modalDescription={modalDescription}
39 |     />
40 |   </Modal>
41 | )};
42 | 
43 | export default CommitmentModal;
44 | 


--------------------------------------------------------------------------------
/src/mutations/updateEvent.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | export default gql`
 4 | mutation ($token: String!, $id: Int!, $start: String!, $requestDistribution: Boolean, $scopeId: Int!, $note: String, $affectedNumericValue: String!, $affectedUnitId: Int! ) {
 5 |   updateEconomicEvent(
 6 |     token: $token,
 7 |     id: $id,
 8 |     start: $start,
 9 |     scopeId: $scopeId, 
10 |     requestDistribution: $requestDistribution, 
11 |     note: $note,
12 |     affectedNumericValue: $affectedNumericValue,
13 |     affectedUnitId: $affectedUnitId,
14 |     ) {
15 |       economicEvent {
16 |         action
17 |         note
18 |         start
19 |         id
20 |         requestDistribution
21 |         scope {
22 |           id
23 |         }
24 |         provider {
25 |           name
26 |           id
27 |           image
28 |         }
29 |         affectedQuantity {
30 |           unit {
31 |             id
32 |             name
33 |           }
34 |           numericValue
35 |         }
36 |       }
37 |   }
38 | }`


--------------------------------------------------------------------------------
/src/mutations/createProcess.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const createProcess = gql`
 4 | mutation ($token: String!, $planId: Int! $name: String!, $planned: String!, $plannedFinish: String!, $scope: Int!, $note: String ) {
 5 |     createProcess(
 6 |         token: $token,
 7 |         name: $name,
 8 |         plannedStart: $planned,
 9 |         plannedFinish: $plannedFinish,
10 |         scopeId: $scope,
11 |         planId: $planId,
12 |         note: $note) {
13 |       process {
14 |         id
15 |         name
16 |         note
17 |         isDeletable
18 |         plannedStart
19 |         plannedFinish
20 |         isFinished
21 |         scope {
22 |           id
23 |           name
24 |         }
25 |         committedOutputs {
26 |           id
27 |         }
28 |         committedInputs {
29 |           id
30 |         }
31 |         inputs {
32 |           id
33 |         }
34 |         workingAgents {
35 |           id
36 |         }
37 |       }
38 |     }
39 |   }`
40 | 
41 | export default createProcess
42 | 


--------------------------------------------------------------------------------
/src/inventory/wrapper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { graphql } from 'react-apollo'
 3 | import Component from './index'
 4 | import InventoryQuery from '../queries/getInventory'
 5 | import {compose} from 'recompose'
 6 | 
 7 | class Inventory extends React.Component {
 8 |   render () {
 9 |     const {loading, error, data} = this.props
10 |     return (
11 |       loading ? <strong>Loading...</strong> : (
12 |         error ? <p style={{ color: '#F00' }}>API error</p> : (
13 |           <Component data={data} />
14 |       ))
15 |     )
16 |   }
17 | }
18 | 
19 | export default compose(
20 |   graphql(InventoryQuery, {
21 |     options: (props) => ({ variables: {
22 |       token: localStorage.getItem('oce_token')
23 |     }}),
24 |     props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
25 |       loading: loading,
26 |       error: error,
27 |       refetchAgent: refetch,  // :NOTE: call this in the component to force reload the data
28 |       data: viewer ? viewer.myAgent : null
29 |   })})
30 | )(Inventory)
31 | 


--------------------------------------------------------------------------------
/src/queries/getProcess.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | const getProcess = gql`
 4 |   query($token: String, $id: String) {
 5 |     viewer(token: $token) {
 6 |       process(id: $id) {
 7 |         id
 8 |         name
 9 |         scope {
10 |           name
11 |         }
12 |         processPlan {
13 |           name
14 |           due
15 |         }
16 |         plannedStart
17 |         plannedDuration
18 |         isFinished
19 |         note
20 |         userIsAuthorizedToUpdate
21 |         userIsAuthorizedToDelete
22 |         workingAgents {
23 |           id
24 |           name
25 |           image
26 |         }
27 |         committedInputs {
28 |           note
29 |           id
30 |           action
31 |           resourceClassifiedAs {
32 |             name
33 |           }
34 |           committedQuantity {
35 |             unit {
36 |               id
37 |               name
38 |             }
39 |             numericValue
40 |           }
41 |         }
42 |       }
43 |     }
44 |   }
45 | `;
46 | 
47 | export default getProcess;
48 | 


--------------------------------------------------------------------------------
/src/queries/getCommitment.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetCommitment = gql`
 4 | query ($token: String, $id: Int!) {
 5 |     viewer(token: $token) {
 6 |       commitment(id: $id) {
 7 |         action
 8 |         id
 9 |         note
10 |         scope {
11 |           id
12 |         }
13 |         
14 |         provider {
15 |           id
16 |           name
17 |           image
18 |         }
19 |         inputOf {
20 |           name
21 |           id
22 |         }
23 |         due
24 |         isFinished
25 |         involvedAgents {
26 |           image
27 |           id
28 |           name
29 |         }
30 |         committedQuantity {
31 |           unit {
32 |             name
33 |             id
34 |           }
35 |           numericValue
36 |         }
37 |         resourceClassifiedAs {
38 |           category
39 |           name
40 |         }
41 |       }
42 |     }
43 |     viewer(token: $token) {
44 |       allUnits {
45 |         id
46 |         name
47 |         symbol
48 |       }
49 |     }
50 |   }`
51 | 
52 | export default GetCommitment
53 | 


--------------------------------------------------------------------------------
/src/agentPlans/wrapper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { graphql } from 'react-apollo'
 3 | import Component from './index'
 4 | import plansQuery from '../queries/getPlans'
 5 | import {LoadingMini} from '../components/loading'
 6 | 
 7 | class AgentWrapper extends React.Component {
 8 |   render () {
 9 |     const {loading, error, data} = this.props
10 |     return (
11 |       loading ? <LoadingMini /> : (
12 |         error ? <p style={{ color: '#F00' }}>API error</p> : (
13 |           <Component data={data} {...this.props} />
14 |       ))
15 |     )
16 |   }
17 | }
18 | 
19 | export default graphql(plansQuery, {
20 |   options: (props) => ({ variables: {
21 |     token: localStorage.getItem('oce_token'),
22 |     id: props.agentProfile ? props.agentProfile : props.match.params.id
23 |   }}),
24 |   props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
25 |     loading: loading,
26 |     error: error,
27 |     refetchAgent: refetch,  // :NOTE: call this in the component to force reload the data
28 |     data: viewer ? viewer.agent : null
29 |   })
30 | })(AgentWrapper)
31 | 


--------------------------------------------------------------------------------
/src/components/cardModal/modalTitle/index.js:
--------------------------------------------------------------------------------
 1 | import { compose, withState, withHandlers } from 'recompose'
 2 | import {graphql} from 'react-apollo'
 3 | import UpdateCommitmentTitle from '../../../mutations/updateCommitmentTitle'
 4 | import ModalTitle from './modalTitle'
 5 | // import {connect} from 'react-redux'
 6 | 
 7 | // const mapStateToProps = state => ({
 8 | //   state
 9 | // })
10 | 
11 | export default compose(
12 |   graphql(UpdateCommitmentTitle, {
13 |     props: ({mutate, ownProps: {id, note}}) => ({
14 |       mutate: mutate,
15 |       id: id,
16 |       note: note
17 |     })
18 |   }),
19 |   withState('isVisible', 'toggleVis', false),
20 |   withHandlers({
21 |     toggleVisibility: ({ toggleVis, isVisible }) => (event) => toggleVis(!isVisible),
22 |     editTitle: ({mutate, id, note}) => (event) => mutate({
23 |       variables: {
24 |         token: localStorage.getItem('oce_token'),
25 |         id: id,
26 |         note: event.target.value
27 |       }
28 |     })
29 |     .then(data => console.log(data))
30 |     .catch(e => (console.log(e)))
31 |   })
32 | )(ModalTitle)
33 | 
34 | 


--------------------------------------------------------------------------------
/src/agent/wrapper.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { graphql } from "react-apollo";
 3 | import Component from "./index";
 4 | import agentQuery from "../queries/getAgent";
 5 | import { LoadingMini } from "../components/loading";
 6 | 
 7 | class AgentWrapper extends React.Component {
 8 |   render() {
 9 |     const { loading, error, data } = this.props;
10 |     return loading ? (
11 |       <LoadingMini />
12 |     ) : error ? (
13 |       <p style={{ color: "#F00" }}>API error</p>
14 |     ) : (
15 |       <Component data={data} />
16 |     );
17 |   }
18 | }
19 | 
20 | export default graphql(agentQuery, {
21 |   options: props => ({
22 |     variables: {
23 |       token: localStorage.getItem("oce_token"),
24 |       id: props.agentProfile ? props.agentProfile : props.match.params.id
25 |     }
26 |   }),
27 |   props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
28 |     loading: loading,
29 |     error: error,
30 |     refetchAgent: refetch, // :NOTE: call this in the component to force reload the data
31 |     data: viewer ? viewer.agent : null
32 |   })
33 | })(AgentWrapper);
34 | 


--------------------------------------------------------------------------------
/src/helpers/router.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Route, Redirect } from "react-router-dom";
 3 | 
 4 | export const renderMergedProps = (component, ...rest) => {
 5 |   const finalProps = Object.assign({}, ...rest);
 6 |   return React.createElement(component, finalProps);
 7 | };
 8 | 
 9 | export const PropsRoute = ({ component, ...rest }) => {
10 |   return (
11 |     <Route
12 |       {...rest}
13 |       render={routeProps => {
14 |         return renderMergedProps(component, routeProps, rest);
15 |       }}
16 |     />
17 |   );
18 | };
19 | 
20 | export const PrivateRoute = ({ component, redirectTo, ...rest }) => {
21 |   const isLoggedIn = localStorage.getItem('oce_token')
22 |   return (
23 |     <Route
24 |       {...rest}
25 |       render={routeProps => {
26 |         return isLoggedIn ? (
27 |           renderMergedProps(component, routeProps, rest)
28 |         ) : (
29 |           <Redirect
30 |             to={{
31 |               pathname: redirectTo,
32 |               state: { from: routeProps.location }
33 |             }}
34 |           />
35 |         );
36 |       }}
37 |     />
38 |   );
39 | };
40 | 


--------------------------------------------------------------------------------
/src/agentRelationships/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Icons, Panel, NavigationItem } from "oce-components/build";
 3 | import style from "./style.css";
 4 | import { NavLink } from "react-router-dom";
 5 | import {PropsRoute} from '../helpers/router'
 6 | import AgentPlans from '../agentPlans/wrapper'
 7 | 
 8 | const AgentRelationships = props => (
 9 |     <div className={style.container}>
10 |     <Panel icon={<Icons.Globe width="18" color="#f0f0f0" />} title="Network">
11 |       <div style={{padding: '10px'}}>
12 |         {props.relationships.map((item, i) => (
13 |           <div className={style.container_link} key={i}>
14 |             <NavLink
15 |               activeClassName={style.active}
16 |               to={`${props.match.path}/agent/` + item.object.id}
17 |             >
18 |               <NavigationItem img={item.object.image} title={item.object.name} />
19 |             </NavLink>
20 |           </div>
21 |         ))}
22 |       </div>
23 |     </Panel>
24 |     <PropsRoute path={`${props.match.path}/agent/:id`} component={AgentPlans} />
25 |     </div>
26 | );
27 | 
28 | export default AgentRelationships;
29 | 


--------------------------------------------------------------------------------
/src/variables.css:
--------------------------------------------------------------------------------
 1 | /* COLORS PALETTE */
 2 | 
 3 | $blue_500: #35558F;
 4 | $blue_600: #324D7D;
 5 | 
 6 | // NEUTRALS
 7 | $n0: #fff;
 8 | $n10: #FAFBFC;
 9 | $n20: #F4F5F7;
10 | $n30: #EBECF0;
11 | $n40: #DFE1E5;
12 | $n50: #C1C7D0;
13 | $n60: #B3BAC5;
14 | $n70: #A5ADBA;
15 | $n80: #97A0AF;
16 | $n90: #8993A4;
17 | $n100: #7A869A;
18 | $n200: #6C798F;
19 | $n300: #5E6C84;
20 | $n400: #505F79;
21 | $n500: #42526E;
22 | $n600: #344563;
23 | $n700: #253858;
24 | $n800: #172B4D;
25 | $n900: #091E42;
26 | 
27 | // BLUES
28 | $b50: #DEEBFF;
29 | $b75: #B2D4FF;
30 | $b100: #4C9AFF;
31 | $b200: #2684FF;
32 | $b300: #0065FF;
33 | $b400: #0052CC;
34 | $b500: #0747A6;
35 | 
36 | // GREENS
37 | $g50: #E3FCEF;
38 | $g75: #ABF5D1;
39 | $g100: #79F2C0;
40 | $g200: #57D9A3;
41 | $g300: #36B37E;
42 | $g400: #00875A;
43 | $g500: #006644;
44 | 
45 | // YELLOWS
46 | $y50: #FFFAE5;
47 | $y75: #FFF0B2;
48 | $y100: #FFE380;
49 | $y200: #FFC400;
50 | $y300: #FFAB00;
51 | $y400: #FF991F;
52 | $y500: #FF8B00;
53 | 
54 | // REDS
55 | $r50: #FFEBE5;
56 | $r75: #FFBDAD;
57 | $r100: #FF8F73;
58 | $r200: #FF7452;
59 | $r300: #FF5630;
60 | $r400: #DE350B;
61 | $r500: #BF2600;
62 | 
63 | 


--------------------------------------------------------------------------------
/src/components/button/index.css:
--------------------------------------------------------------------------------
 1 | /* button {
 2 |     background: -webkit-linear-gradient(top,#fff 0,#F8F9F9 100%);
 3 |     background: linear-gradient(to bottom,#fff 0,#F8F9F9 100%);
 4 |     -moz-box-sizing: border-box;
 5 |     box-sizing: border-box;
 6 |     border: 1px solid #E2E4E6;
 7 |     border-bottom-color: #CDD2D4;
 8 |     cursor: pointer;
 9 |     display: block;
10 |     font-weight: 700;
11 |     height: 34px;
12 |     margin-top: 6px;
13 |     max-width: 300px;
14 |     padding: 7px;
15 |     position: relative;
16 |     user-select: none;
17 |     white-space: nowrap;
18 |     border-radius: 3px;
19 |     text-decoration: none;
20 |     outline: 0;
21 |     width: 100%;
22 | } */
23 | 
24 | /* .good {
25 |   background: #5AAC44 !important;
26 |   border-color: 0 1px 0 #519839 !important;
27 |   color: #fff !important;
28 |   -webkit-transition: backgroun .3s ease !important;
29 |   transition: background .3s ease !important;
30 | }
31 | 
32 | .negate {
33 |   background: #EB5A46 !important;
34 |   border-color: #EB5A46 #EB5A46 #B04632 !important;
35 |   color: white !important;
36 | }
37 | 
38 | .inline {
39 |   display: inline-block;
40 | } */


--------------------------------------------------------------------------------
/src/mutations/createEvent.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag';
 2 | 
 3 | export default gql`
 4 | mutation ($token: String!, $providerId: Int, $receiverId: Int, $action: String!, $requestDistribution: Boolean, $start: String, $scopeId: Int!, $commitmentId: Int!, $note: String, $affectedNumericValue: String!, $affectedUnitId: Int!  ) {
 5 |   createEconomicEvent(
 6 |     token: $token,
 7 |     action: $action,
 8 |     start: $start,
 9 |     providerId: $providerId,
10 |     receiverId: $receiverId,
11 |     scopeId: $scopeId, 
12 |     requestDistribution: $requestDistribution, 
13 |     fulfillsCommitmentId: $commitmentId,
14 |     note: $note,
15 |     affectedNumericValue: $affectedNumericValue, 
16 |     affectedUnitId: $affectedUnitId, 
17 |     ) {
18 |     economicEvent {
19 |       action
20 |       requestDistribution
21 |       start
22 |       id
23 |       note
24 |       provider {
25 |         name
26 |         image
27 |         id
28 |       }
29 |       scope {
30 |         id
31 |       }
32 |       affectedQuantity {
33 |         numericValue
34 |         unit {
35 |           id
36 |           name
37 |         }
38 |       }
39 |     }
40 |   }
41 | }
42 | `


--------------------------------------------------------------------------------
/src/validate/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Icons, Panel, NavigationItem} from 'oce-components/build'
 3 | import style from './style.css'
 4 | import { BrowserRouter as Router, Route, NavLink } from "react-router-dom"
 5 | 
 6 | // ROUTES
 7 | import AgentPlans from '../agentValidationPlans/wrapper'
 8 | 
 9 | const Validate = (props) => {
10 |   return (
11 |     <Router>
12 |       <div className={style.container}>
13 |         <Panel icon={<Icons.Globe width='18' color='#f0f0f0' />} title='Network'>
14 |           <div>
15 |             {props.agentData.data.agentRelationships.map((item, i) => (
16 |               <div className={style.container_link} key={i}>
17 |                 <NavLink activeClassName={style.active} to={`${props.match.path}/agent/` + item.object.id}>
18 |                   <NavigationItem img={item.object.image} title={item.object.name} />
19 |                 </NavLink>
20 |               </div>
21 |             ))}
22 |           </div>
23 |         </Panel>
24 |         <Route path={`${props.match.path}/agent/:id`} component={AgentPlans} />
25 |       </div>
26 |     </Router>
27 |   )
28 | }
29 | 
30 | export default Validate
31 | 


--------------------------------------------------------------------------------
/src/work/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Icons, Panel, NavigationItem} from 'oce-components/build'
 3 | import style from './style.css'
 4 | import { BrowserRouter as Router, Route, NavLink } from "react-router-dom"
 5 | import Canvas from '../canvas/wrapper'
 6 | import AgentRelationships from '../agentRelationships'
 7 | import {PropsRoute} from '../helpers/router'
 8 | 
 9 | // ROUTES
10 | import AgentPlans from '../agentPlans/wrapper'
11 | 
12 | const Work = (props) => {
13 |   return (
14 |     <Router>
15 |       <div className={style.container}>
16 |         <PropsRoute path={`${props.match.path}/`} component={AgentRelationships} relationships={props.relationships} />
17 |         {/* <AgentRelationships relationships={props.relationships} match={props.match} /> */}
18 |         <PropsRoute path={`${props.match.path}/agent/:id`} component={AgentPlans} />
19 |         {/* <PropsRoute path={`${props.match.path}/plans/:id`} component={Canvas} relationships={props.relationships} /> */}
20 |         {/* <Route path={`${props.match.path}/:id`} component={<Canvas {...props} />} /> */}
21 |       </div>
22 |     </Router>
23 |   )
24 | }
25 | 
26 | export default Work
27 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import {ApolloClient} from 'apollo-client'
 2 | import {HttpLink} from 'apollo-link-http'
 3 | import {InMemoryCache, IntrospectionFragmentMatcher} from 'apollo-cache-inmemory'
 4 | import introspectionQueryResultData from '../fragmentTypes.json'
 5 | import { defaults, resolvers } from "./resolvers";
 6 | import {withClientState} from 'apollo-link-state'
 7 | import {ApolloLink} from 'apollo-link'
 8 | 
 9 | const fragmentMatcher = new IntrospectionFragmentMatcher({
10 |   introspectionQueryResultData
11 | })
12 | 
13 | const cache = new InMemoryCache({
14 |   dataIdFromObject: object => {
15 |     const dataId = object.id ? `${object.__typename}-${object.id}` : null
16 |     return dataId},
17 |   addTypename: true,
18 |   fragmentMatcher
19 | })
20 | 
21 | const stateLink = withClientState({
22 |   cache,
23 |   defaults: defaults,
24 |   resolvers: resolvers
25 | })
26 | 
27 | const link = ApolloLink.from([
28 |   stateLink,
29 |   new HttpLink({
30 |   // uri: 'https://ocp.freedomcoop.eu/api/graph'
31 |   uri: 'https://testocp.freedomcoop.eu/api/graph'
32 |   })
33 | ])
34 | 
35 | export const client = new ApolloClient({
36 |   link,
37 |   cache: cache.restore(window.__APOLLO_CLIENT__),
38 |   ssrMode: true,
39 |   ssrForceFetchDelay: 100,
40 |   connectToDevTools: true,
41 |   queryDeduplication: true
42 | })
43 | 
44 | 


--------------------------------------------------------------------------------
/src/store/resolvers.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag';
 2 | 
 3 | export const defaults = {
 4 |     notifications: [],
 5 |   };
 6 | 
 7 | 
 8 | let nextNotifId = 0;
 9 | 
10 | export const resolvers = {
11 |   Mutation: {
12 |     addNotification: (_, {message, type}, {cache}) => {
13 |       let newId = nextNotifId++
14 |       const query = gql`
15 |       query GetNotifications {
16 |         notifications @client {
17 |           __typename
18 |           id
19 |           message
20 |           type
21 |         }
22 |       }
23 |     `
24 |       const previousState = cache.readQuery({query})
25 |       const newNotif = {
26 |         id: newId,
27 |         message,
28 |         type,
29 |         __typename: 'Notification'
30 |       }
31 |       const data = {
32 |         notifications: previousState.notifications.concat([newNotif])
33 |       }
34 |       cache.writeQuery({query, data: data})
35 |       return newNotif
36 |     },
37 |     deleteNotification: (_, {id}, {cache}) => {
38 |       const query = gql`
39 |       query GetNotifications {
40 |         notifications @client {
41 |           __typename
42 |           id
43 |           message
44 |           type
45 |         }
46 |       }
47 |     `
48 |       const previousState = cache.readQuery({query})
49 |       const data = {
50 |         notifications: previousState.notifications.filter(item => item.id !== id)
51 |       }
52 |       cache.writeQuery({query, data})
53 |       return data
54 |     }
55 |   }
56 | }


--------------------------------------------------------------------------------
/src/components/cards/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import { Link } from 'react-router-dom'
 4 | import moment from 'moment'
 5 | import {withRouter} from 'react-router-dom'
 6 | const Cards = ({data, link, match, location}) => {
 7 |   let newData = data.map(x => ({...x, date: moment(x.plannedOn).unix()}))
 8 |   return (
 9 |     <div className={style.section_wrapper}>
10 |       {newData
11 |       .sort((a, b) => b.date - a.date)
12 |       .map((org, i) => (
13 |         <div key={i} className={style.lists_item}>
14 |           <Link key={'plan_' + i} to={link + '/' + org.id} className={style.link}>
15 |             <h4 className={style.item_title}>{org.name.length > 0 ? org.name : org.planProcesses[0].name}</h4>
16 |             <h5 className={style.plan_scope}>{org.note}</h5>
17 |             <div className={style.item_info}>
18 |               <span className={style.info_date}>Due {moment(org.due).format('DD MMM YYYY')}</span>
19 |               {/* <span className={org.planProcesses[0].isFinished ? style.info_status + ' ' + style.completed : org.planProcesses[0].isStarted ? style.info_status + ' ' + style.wip : style.info_status + ' ' + style.todo}>
20 |                 {org.planProcesses[0].isFinished ? 'Completed' : org.planProcesses[0].isStarted ? 'In Progress' : 'To do' }
21 |               </span> */}
22 |             </div>
23 |           </Link>
24 |       </div>
25 |       ))}
26 |     </div>
27 | )
28 | }
29 | 
30 | export default withRouter(Cards)
31 | 


--------------------------------------------------------------------------------
/src/mutations/updateCommitment.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | const updateCommitment = gql`
 4 |   mutation(
 5 |     $token: String!
 6 |     $id: Int!
 7 |     $note: String
 8 |     $due: String
 9 |     $committedResourceClassifiedAsId: Int
10 |     $committedUnitId: Int
11 |     $committedNumericValue: String
12 |     $action: String
13 |     $isFinished: Boolean
14 |   ) {
15 |     updateCommitment(
16 |       token: $token
17 |       note: $note
18 |       id: $id
19 |       due: $due
20 |       isFinished: $isFinished
21 |       action: $action
22 |       committedResourceClassifiedAsId: $committedResourceClassifiedAsId
23 |       committedUnitId: $committedUnitId
24 |       committedNumericValue: $committedNumericValue
25 |     ) {
26 |       commitment {
27 |         id
28 |         note
29 |         isFinished
30 |         due
31 |         committedQuantity {
32 |           unit {
33 |             name
34 |           }
35 |           numericValue
36 |         }
37 |         resourceClassifiedAs {
38 |           category
39 |           name
40 |         }
41 |         fulfilledBy {
42 |           fulfilledBy {
43 |             action
44 |             start
45 |             id
46 |             requestDistribution
47 |             note
48 |             provider {
49 |               id
50 |               name
51 |               image
52 |             }
53 |           }
54 |         }
55 |         inputOf {
56 |           id
57 |         }
58 |       }
59 |     }
60 |   }
61 | `;
62 | 
63 | export default updateCommitment;
64 | 


--------------------------------------------------------------------------------
/src/inventory/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .agent {
 3 |     padding: 20px;
 4 |     lost-utility: clearfix;
 5 |     /* margin-top: 40px; */
 6 | }
 7 | 
 8 | .agent_profile {
 9 |     lost-column: 6/12;
10 |     lost-offset: 3/12;
11 | }
12 | 
13 | .section_wrapper {
14 |     margin-top: 40px;
15 | }
16 | 
17 | .info_data {
18 |     float: left;
19 | }
20 | 
21 | 
22 | .info_note {
23 |     font-size: 14px;
24 |     margin:0;
25 |     line-height: 22px;
26 |     display: grid;
27 | }
28 | 
29 | .info_data {
30 |     float: left;
31 | }
32 | 
33 | 
34 | .info_title {
35 |     /* float: left; */
36 |     /* lost-column:1/1; */
37 |     /* display: table-cell; */
38 |     font-size: 26px;
39 |     font-weight: 500;
40 |     letter-spacing: .5px;
41 |     height: 40px;
42 |     line-height: 40px;
43 |     margin: 0;
44 |     color: #161515;
45 |     margin-bottom: 10px;
46 | }
47 | 
48 | .agent_menu {
49 |     margin-top: 40px;
50 |     lost-column: 8/10;
51 |     lost-offset: 1/10;
52 |     padding-bottom: 10px;
53 |     border-bottom: 1px solid #DEDEDE;
54 | }
55 | 
56 | 
57 | .agent_sidebar {
58 |     background: white;
59 |     box-shadow: 0 1px 2px rgba(0,0,0,.25);
60 |     border-radius: 2px;
61 |     padding: 10px;
62 | }
63 | 
64 | 
65 | .agent_sidebar_wrapper {
66 |     lost-column: 2/12;
67 |     lost-offset: 1/12;
68 | 
69 | }
70 | 
71 | .agent_info {
72 |     /* lost-column: 8/10;
73 |     lost-offset: 1/10; */
74 |     lost-utility:clearfix;
75 |     display: table;
76 | }
77 | 
78 | .item_member {
79 |     lost-column: 1/5;
80 |     margin-bottom: 20px;
81 | }
82 | 


--------------------------------------------------------------------------------
/src/network/wrapper.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { graphql } from 'react-apollo'
 3 | import Component from './index'
 4 | import agentQuery from '../queries/getRelationships'
 5 | import orgsQuery from '../queries/getOrganizations'
 6 | import {compose} from 'recompose'
 7 | 
 8 | class NetworkWrapper extends React.Component {
 9 |   render () {
10 |     const {loading, orgsloading, orgserror, error, data, orgs} = this.props
11 |     return (
12 |       loading || orgsloading ? <strong>Loading...</strong> : (
13 |         error || orgserror ? <p style={{ color: '#F00' }}>API error</p> : (
14 |           <Component orgs={orgs} data={data} />
15 |       ))
16 |     )
17 |   }
18 | }
19 | 
20 | export default compose(
21 |   graphql(orgsQuery, {
22 |     options: (props) => ({ variables: {
23 |       token: localStorage.getItem('oce_token')
24 |     }}),
25 |     props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
26 |       orgsloading: loading,
27 |       orgserror: error,
28 |       refetchAgent: refetch,  // :NOTE: call this in the component to force reload the data
29 |       orgs: viewer ? viewer.fcOrganizations : null
30 |   })}),
31 |   graphql(agentQuery, {
32 |     options: (props) => ({ variables: {
33 |       token: localStorage.getItem('oce_token')
34 |     }}),
35 |     props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
36 |       loading: loading,
37 |       error: error,
38 |       refetchAgent: refetch,  // :NOTE: call this in the component to force reload the data
39 |       data: viewer ? viewer.myAgent : null
40 |     })}
41 | ))(NetworkWrapper)
42 | 


--------------------------------------------------------------------------------
/src/canvas/style.css:
--------------------------------------------------------------------------------
 1 | .canvasWrapper {
 2 |   position: relative;
 3 |   min-height: 100vh;
 4 |   margin-bottom: 20px;
 5 | }
 6 | 
 7 | .wrapperContainer {
 8 |   user-select: text;
 9 |   white-space: nowrap;
10 |   overflow-x: auto;
11 |   overflow-y: hidden;
12 |   position: absolute;
13 |   top: 0;
14 |   right: 0;
15 |   bottom: 0;
16 |   left: 0;
17 | }
18 | 
19 | .right_button {
20 |   background: #1c1d1f;
21 |   border-radius: 4px;
22 |   padding: 0 15px;
23 |   height: 30px;
24 |   display: inline-block;
25 |   margin-top: 5px;
26 |   margin-right: 10px;
27 |   line-height: 30px;
28 |   color: #fafafa;
29 |   text-decoration: none;
30 |   font-size: 14px;
31 |   margin-left: 10px;
32 | }
33 | 
34 | .right_button span {
35 |   margin-right: 5px;
36 |   vertical-align: sub;
37 | }
38 | 
39 | .headerLink {
40 |   color: #f0f0f0;
41 | }
42 | 
43 | .buttonIcon {
44 |   line-height: 28px;
45 |   vertical-align: sub;
46 | }
47 | 
48 | 
49 | .errorEmoji {
50 |   text-align: center;
51 | }
52 | 
53 | .errorWrapper {
54 |   margin-top: 100px;
55 | }
56 | 
57 | .errorWrapperTitle {
58 |   text-align: center;
59 |   font-size: 28px;
60 |   color: #fafafa;
61 | }
62 | 
63 | .errorWrapperDesc {
64 |   text-align: center;
65 |     font-size: 18px;
66 |     color: #fafafacc;
67 |     font-weight: 400;
68 | }
69 | 
70 | .errorLink {
71 |   background: #2588d0;
72 |     padding: 0 10px;
73 |     height: 40px;
74 |     display: block;
75 |     width: 100px;
76 |     line-height: 40px;
77 |     text-align: center;
78 |     margin: 0 auto;
79 |     margin-top: 40px;
80 |     text-decoration: none;
81 |     border-radius: 4px;
82 |     color: white;
83 | }


--------------------------------------------------------------------------------
/src/queries/getEventClaim.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetEventClaim = gql`
 4 | query ($token: String, $id: Int!) {
 5 |     viewer(token: $token) {
 6 |       economicEvent(id: $id) {
 7 |         scope {
 8 |             id
 9 |             name
10 |             }
11 |           fulfills {
12 |             fulfills {
13 |               id
14 |               note
15 |               action
16 |               committedQuantity {
17 |                   numericValue
18 |                   unit {
19 |                       name
20 |                   }
21 |               }
22 |             }
23 |           }
24 |         inputOf {
25 |           name
26 |           id
27 |           processPlan {
28 |             id
29 |             name
30 |           }
31 |         }
32 |         id
33 |         action
34 |         validations {
35 |           id
36 |           validatedBy {
37 |             name
38 |             id
39 |           }
40 |         }
41 |             start
42 |             affectedQuantity {
43 |               numericValue
44 |               unit {
45 |                 name
46 |               }
47 |             }
48 |             affects {
49 |               resourceClassifiedAs {
50 |                 name
51 |                 category
52 |               }
53 |               trackingIdentifier
54 |             }
55 |             provider {
56 |               id
57 |               name
58 |               image
59 |             }
60 |             receiver {
61 |               id
62 |               name
63 |             }
64 |             note
65 |           }
66 |         
67 |     }
68 |   }`
69 | 
70 | export default GetEventClaim
71 | 


--------------------------------------------------------------------------------
/src/mutations/CreateCommitment.js:
--------------------------------------------------------------------------------
 1 | import gql from "graphql-tag";
 2 | 
 3 | const createCommitment = gql`
 4 |   mutation(
 5 |     $token: String!
 6 |     $inputOfId: Int
 7 |     $outputOfId: Int
 8 |     $committedUnitId: Int!
 9 |     $due: String!
10 |     $action: String!
11 |     $planId: Int
12 |     $note: String
13 |     $committedNumericValue: String!
14 |     $committedResourceClassifiedAsId: Int!
15 |     $providerId: Int
16 |     $scopeId: Int
17 |   ) {
18 |     createCommitment(
19 |       token: $token
20 |       inputOfId: $inputOfId
21 |       outputOfId: $outputOfId
22 |       committedUnitId: $committedUnitId
23 |       due: $due
24 |       action: $action
25 |       note: $note
26 |       committedResourceClassifiedAsId: $committedResourceClassifiedAsId
27 |       planId: $planId
28 |       scopeId: $scopeId
29 |       committedNumericValue: $committedNumericValue
30 |       providerId: $providerId
31 |     ) {
32 |       commitment {
33 |         action
34 |         id
35 |         note
36 |         fulfilledBy {
37 |           fulfilledQuantity {
38 |             numericValue
39 |           }
40 |         }
41 |         inputOf {
42 |           id
43 |           name
44 |         }
45 |         outputOf {
46 |           id
47 |           name
48 |         }
49 |         due
50 |         isFinished
51 |         involvedAgents {
52 |           image
53 |           id
54 |           name
55 |         }
56 |         committedQuantity {
57 |           unit {
58 |             id
59 |             name
60 |           }
61 |           numericValue
62 |         }
63 |         resourceClassifiedAs {
64 |           category
65 |           name
66 |         }
67 |       }
68 |     }
69 |   }
70 | `;
71 | 
72 | export default createCommitment;
73 | 


--------------------------------------------------------------------------------
/src/queries/getCommitmentClaim.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetCommitmentClaim = gql`
 4 | query ($token: String, $id: Int!) {
 5 |     viewer(token: $token) {
 6 |       commitment(id: $id) {
 7 |         inputOf {
 8 |           name
 9 |           id
10 |           processPlan {
11 |             id
12 |             name
13 |           }
14 |         }
15 |         note
16 |         id
17 |         scope {
18 |           id
19 |           name
20 |         }
21 |         action
22 |         resourceClassifiedAs{
23 |           name
24 |         }
25 |         committedQuantity {
26 |           unit {
27 |             name
28 |           }
29 |           numericValue
30 |         }
31 |         fulfilledBy(requestDistribution: true) {
32 |           fulfilledBy {
33 |             id
34 |             action
35 |             validations {
36 |               id
37 |               validatedBy {
38 |                 name
39 |                 id
40 |               }
41 |             }
42 |             start
43 |             inputOf {
44 |               name
45 |             }
46 |             affectedQuantity {
47 |               numericValue
48 |               unit {
49 |                 name
50 |               }
51 |             }
52 |             affects {
53 |               resourceClassifiedAs {
54 |                 name
55 |                 category
56 |               }
57 |               trackingIdentifier
58 |             }
59 |             provider {
60 |               id
61 |               name
62 |               image
63 |             }
64 |             receiver {
65 |               id
66 |               name
67 |             }
68 |             note
69 |           }
70 |         }
71 |       }
72 |     }
73 |   }`
74 | 
75 | export default GetCommitmentClaim
76 | 


--------------------------------------------------------------------------------
/src/queries/getAgent.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const agentQuery = gql`
 4 | query ($token: String, $id: Int) {
 5 |     viewer(token: $token) {
 6 |       agent(id: $id) {
 7 |         id
 8 |         name
 9 |         image
10 |         note
11 |         type
12 |         agentRelationships {
13 |           object {
14 |             id
15 |             name
16 |             image
17 |           }
18 |           subject {
19 |             name
20 |             image
21 |             id
22 |           }
23 |         }
24 |         ownedEconomicResources {
25 |           resourceClassifiedAs {
26 |             name
27 |             category
28 |           }
29 |           currentQuantity {
30 |             numericValue
31 |             unit {
32 |               name
33 |             }
34 |           }
35 |         }
36 |         agentEconomicEvents(latestNumberOfDays: 30) {
37 |           note
38 |           action
39 |           provider {
40 |             image
41 |             name
42 |           }
43 |           inputOf {
44 |             name
45 |           }
46 |           receiver {
47 |             name
48 |           }
49 |           start
50 |           requestDistribution
51 |           note
52 |           affectedQuantity {
53 |             numericValue
54 |             unit {
55 |               name
56 |             }
57 |           }
58 |         }
59 |         agentPlans (isFinished: false) {
60 |           name
61 |           id
62 |           note
63 |           due
64 |           plannedOn
65 |           planProcesses {
66 |             isStarted
67 |             isFinished
68 |             name
69 |             workingAgents {
70 |               id
71 |               name
72 |               image
73 |             }
74 |           }
75 |         }
76 |       }
77 |     }
78 |   }
79 | `
80 | 
81 | export default agentQuery
82 | 


--------------------------------------------------------------------------------
/src/components/planModal/style.css:
--------------------------------------------------------------------------------
 1 | .planModal {
 2 |     padding: 20px;
 3 |     padding-bottom: 0;
 4 | }
 5 | 
 6 | .form_input {
 7 |     margin-bottom: 10px;
 8 | }
 9 | 
10 | .form_note {
11 |     height: 150px;
12 |     margin-bottom: 10px;
13 | }
14 | 
15 | .archiveTitle {
16 |     font-size: 16px;
17 |     font-weight: 600;
18 |     margin-top: 0px;
19 | }
20 | 
21 | .archiveDesc {
22 |     font-size: 14px;
23 |     margin: 0;
24 |     margin-bottom: 10px;
25 | }
26 | 
27 | .formWrapper {
28 |   padding-bottom: 20px;
29 | }
30 | 
31 | .deletePlanWrapper {
32 |     background: gainsboro;
33 |     border-radius: 4px;
34 |     padding: 10px;
35 | }
36 | 
37 | .message {
38 |     font-size: 14px;    
39 |   }
40 |   
41 |   .message span {
42 |   margin-right: 10px;
43 |   vertical-align: sub;
44 |   }
45 | 
46 | 
47 | 
48 | .dates {
49 |     background: #ebebeb;
50 |     height: 50px;
51 |     border-bottom-left-radius: 3px;
52 |     border-bottom-right-radius: 3px;
53 | }
54 | 
55 | .dateWrapper {
56 |    margin-top: 6px;
57 |    margin-left: 5px;
58 |    display: inline-block;
59 |   }
60 |   
61 |   .dateName {
62 |     margin: 0;
63 |     /* float: left; */
64 |     margin-left: 5px;
65 |     padding-right: 0px;
66 |     /* border-right: 1px solid rgba(255, 255, 255, .32157); */
67 |     /* line-height: 40px; */
68 |     font-weight: 400;
69 |     color: #707b97;
70 |     letter-spacing: .5px;
71 |     font-size: 13px;
72 |   }
73 |   
74 |   .dateWrapper > div:first-of-type {
75 |     float: left;
76 |     border: none;
77 |   }
78 |   
79 |   .dateWrapper div input {
80 |     border: none;
81 |     background: none;
82 |     text-indent: 10px;
83 |     font-size: 13px;
84 |     color: #707b97;
85 |     font-weight: 600;
86 |     text-align: left;
87 |     width: 100px;
88 |     padding: 0;
89 |     margin: 0;
90 |     text-indent: 0;
91 |     margin-left: 5px;
92 |   }


--------------------------------------------------------------------------------
/src/queries/getClaim.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetClaim = gql`
 4 | query ($token: String, $id: Int) {
 5 |   viewer(token: $token) {
 6 |     plan(id: $id) {
 7 |       name
 8 |       id
 9 |       plannedOn
10 |       scope {
11 |         id
12 |         name
13 |       }
14 |       planProcesses {
15 |         name
16 |         id
17 |         committedInputs(action: WORK) {
18 |           note
19 |           id
20 |           action
21 |           resourceClassifiedAs{
22 |             name
23 |           }
24 |           committedQuantity {
25 |             unit {
26 |               name
27 |             }
28 |             numericValue
29 |           }
30 |           fulfilledBy(requestDistribution: true) {
31 |             fulfilledBy {
32 |               id
33 |               action
34 |               validations {
35 |                 id
36 |                 validatedBy {
37 |                   name
38 |                   id
39 |                 }
40 |               }
41 |               start
42 |               inputOf {
43 |                 id
44 |                 name
45 |               }
46 |               affectedQuantity {
47 |                 numericValue
48 |                 unit {
49 |                   name
50 |                 }
51 |               }
52 |               affects {
53 |                 resourceClassifiedAs {
54 |                   name
55 |                   category
56 |                 }
57 |                 trackingIdentifier
58 |               }
59 |               provider {
60 |                 id
61 |                 name
62 |                 image
63 |               }
64 |               receiver {
65 |                 id
66 |                 name
67 |               }
68 |               note
69 |             }
70 |           }
71 |         }
72 |       }
73 |     }
74 |   }
75 | }
76 | `
77 | 
78 | export default GetClaim
79 | 


--------------------------------------------------------------------------------
/src/queries/getProcessClaim.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetProcessClaim = gql`
 4 | query ($token: String, $id: Int) {
 5 |   viewer(token: $token) {
 6 |     process(id: $id) {
 7 |         name
 8 |         id
 9 |         processPlan {
10 |             id
11 |             name
12 |         }
13 |         scope {
14 |             id
15 |             name
16 |         }
17 |         committedInputs(action: WORK) {
18 |           note
19 |           id
20 |           action
21 |           resourceClassifiedAs{
22 |             name
23 |           }
24 |           committedQuantity {
25 |             unit {
26 |               name
27 |             }
28 |             numericValue
29 |           }
30 |           fulfilledBy(requestDistribution: true) {
31 |             fulfilledBy {
32 |               id
33 |               action
34 |               validations {
35 |                 id
36 |                 validatedBy {
37 |                   name
38 |                   id
39 |                 }
40 |               }
41 |               start
42 |               inputOf {
43 |                 name
44 |               }
45 |               affectedQuantity {
46 |                 numericValue
47 |                 unit {
48 |                   name
49 |                 }
50 |               }
51 |               affects {
52 |                 resourceClassifiedAs {
53 |                   name
54 |                   category
55 |                 }
56 |                 trackingIdentifier
57 |               }
58 |               provider {
59 |                 id
60 |                 name
61 |                 image
62 |               }
63 |               receiver {
64 |                 id
65 |                 name
66 |               }
67 |               note
68 |             }
69 |           }
70 |         }
71 |     }
72 |   }
73 | }
74 | `
75 | 
76 | export default GetProcessClaim
77 | 


--------------------------------------------------------------------------------
/src/planCanvas/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Panel, Icons} from 'oce-components/build'
 3 | import Bin from '../components/bin'
 4 | 
 5 | export default () => (
 6 |   <div style={{display: 'initial'}}>
 7 |     <Panel large icon={<Icons.Globe width='18' color='#f0f0f0' />} title='Processes flow'>
 8 |       <Bin
 9 |         name={'A new process title'}
10 |         note={'A new process note'}
11 |         plannedStart='2018-05-25'
12 |         id={938}
13 |         updateProcess={() => console.log('hello')}
14 |         actionPopup={() => console.log('hello')}
15 |         actionPopupId={() => console.log('hello')}
16 |         toggleActions={() => console.log('hello')}
17 |         cards={[]}
18 |         outputs={[]}
19 |         status={false}
20 |         openModal={() => console.log('hello')}
21 |       />
22 |       <Bin
23 |         name={'A new process title'}
24 |         note={'A new process note'}
25 |         plannedStart='2018-05-25'
26 |         id={938}
27 |         updateProcess={() => console.log('hello')}
28 |         actionPopup={() => console.log('hello')}
29 |         actionPopupId={() => console.log('hello')}
30 |         toggleActions={() => console.log('hello')}
31 |         cards={[]}
32 |         outputs={[]}
33 |         status={false}
34 |         openModal={() => console.log('hello')}
35 |       />
36 |       <Bin
37 |         name={'A new process title'}
38 |         note={'A new process note'}
39 |         plannedStart='2018-05-25'
40 |         id={938}
41 |         updateProcess={() => console.log('hello')}
42 |         actionPopup={() => console.log('hello')}
43 |         actionPopupId={() => console.log('hello')}
44 |         toggleActions={() => console.log('hello')}
45 |         cards={[]}
46 |         outputs={[]}
47 |         status={false}
48 |         openModal={() => console.log('hello')}
49 |       />
50 |     </Panel>
51 |   </div>
52 | )
53 | 


--------------------------------------------------------------------------------
/src/components/feed/feed.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import style from "./index.css";
 3 | import moment from "moment";
 4 | 
 5 | export default function({ feed }) {
 6 |   console.log(feed);
 7 |   return (
 8 |     <div className={style.activities_list}>
 9 |       {feed.map((item, i) => (
10 |         <div key={i} className={style.list_item}>
11 |           <div className={style.members}>
12 |             <span className={style.members_item}>
13 |               <span
14 |                 style={{
15 |                   backgroundImage: item.provider.image
16 |                     ? `url(${item.provider.image})`
17 |                     : ""
18 |                 }}
19 |               />
20 |             </span>
21 |           </div>
22 |           <div className={style.item_desc}>
23 |             <span>{item.provider.name}</span>{" "}
24 |             {item.action + " " + item.affectedQuantity.numericValue + " "} <i>of</i> {item
25 |               .affectedQuantity.unit
26 |               ? item.affectedQuantity.unit.name
27 |               : ""}
28 |             <div className={style.desc}>{item.note}</div>
29 |             <div className={style.item_meta}>
30 |               {moment(item.start).format("DD MMM")} -{" "}
31 |               {item.requestDistribution ? (
32 |                 <span className={style.desc_payment + " " + style.desc_payed}>
33 |                   Payed
34 |                 </span>
35 |               ) : (
36 |                 <span
37 |                   className={style.desc_payment + " " + style.desc_voluntary}
38 |                 >
39 |                   Voluntary
40 |                 </span>
41 |               )} -{" "}
42 |               {item.receiver ? 
43 |               <span className={style.receiver}>{item.receiver.name}</span>
44 |               : null}
45 |             </div>
46 |           </div>
47 |         </div>
48 |       ))}
49 |     </div>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,500,600" rel="stylesheet">
14 |     <!--
15 |       Notice the use of %PUBLIC_URL% in the tags above.
16 |       It will be replaced with the URL of the `public` folder during the build.
17 |       Only files inside the `public` folder can be referenced from the HTML.
18 | 
19 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
20 |       work correctly both with client-side routing and a non-root public URL.
21 |       Learn how to configure a non-root public URL by running `npm run build`.
22 |     -->
23 |     <title>🌎 | Economic Dashboard</title>
24 |   </head>
25 |   <body>
26 |     <noscript>
27 |       You need to enable JavaScript to run this app.
28 |     </noscript>
29 |     <div id="root"></div>
30 |     <div id="modal"></div>
31 |     <!--
32 |       This HTML file is a template.
33 |       If you open it directly in the browser, you will see an empty page.
34 | 
35 |       You can add webfonts, meta tags, or analytics to this file.
36 |       The build step will place the bundled scripts into the <body> tag.
37 | 
38 |       To begin the development, run `npm start` or `yarn start`.
39 |       To create a production bundle, use `npm run build` or `yarn build`.
40 |     -->
41 |   </body>
42 | </html>
43 | 


--------------------------------------------------------------------------------
/src/queries/getPlan.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const Plan = gql`
 4 | query ($token: String, $planId: Int) {
 5 |     viewer(token: $token) {
 6 |       plan(id: $planId) {
 7 |         id
 8 |         name
 9 |         note
10 |         due
11 |         plannedOn
12 |         isDeletable
13 |         scope {
14 |           id
15 |           name
16 |         }
17 |         planProcesses {
18 |           note
19 |           id
20 |           isFinished
21 |           name
22 |           isDeletable
23 |           plannedStart
24 |           plannedFinish
25 |           scope {
26 |             id
27 |             name
28 |           }
29 |           committedOutputs {
30 |             id
31 |             action
32 |             note
33 |             due
34 |             involvedAgents {
35 |               image
36 |               id
37 |               name
38 |             }
39 |             inputOf {
40 |               id
41 |               name
42 |             }
43 |             outputOf {
44 |               id
45 |               name
46 |             }
47 |             committedQuantity {
48 |               unit {
49 |                 name
50 |                 id
51 |               }
52 |               numericValue
53 |             }
54 |             resourceClassifiedAs {
55 |               name
56 |             }
57 |           }
58 |           committedInputs {
59 |             action
60 |             id
61 |             note
62 |             inputOf {
63 |               id
64 |               name
65 |             }
66 |             outputOf {
67 |               id
68 |               name
69 |             }
70 |             due
71 |             isFinished
72 |             involvedAgents {
73 |               image
74 |               id
75 |               name
76 |             }
77 |             committedQuantity {
78 |               unit {
79 |                 id
80 |                 name
81 |               }
82 |               numericValue
83 |             }
84 |             resourceClassifiedAs {
85 |               category
86 |               name
87 |             }
88 |           }
89 |         }
90 |       }
91 |     }
92 |   } 
93 | `
94 | export default Plan
95 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import Login from './login/'
 4 | import { Query, graphql } from 'react-apollo';
 5 | import registerServiceWorker from './registerServiceWorker'
 6 | import {BrowserRouter as Router,
 7 |   Route,
 8 |   Switch
 9 | } from 'react-router-dom'
10 | import { compose, withHandlers } from "recompose";
11 | import {ApolloProvider} from 'react-apollo'
12 | import {client} from './store'
13 | import AppTemplate from './templates/AppTemplate'
14 | import style from './base.css'
15 | import {PrivateRoute} from './helpers/router'
16 | import {Notifications} from 'oce-components/build'
17 | import getNotification from './queries/getNotifications';
18 | import updateNotification from "./mutations/updateNotification";
19 | import deleteNotification from "./mutations/deleteNotification";
20 | const NoMatch = ({ location }) => (
21 |   <div>
22 |     <h3>
23 |       No match for <code>{location.pathname}</code>
24 |     </h3>
25 |   </div>
26 | )
27 | 
28 | const NotificationsTemplate = (props) => {
29 |   return (
30 |   <div className={style.genericAlert}>
31 |     <Notifications 
32 |       notifications={props.notifications} 
33 |       dismiss={props.deleteNotification}
34 |     />
35 |     </div>
36 | )}
37 | 
38 | const EhnanchedNotifications = compose(
39 |   graphql(updateNotification, {name: 'updateNotification'}),
40 |   graphql(deleteNotification, {name: 'deleteNotification'}),
41 | )(NotificationsTemplate)
42 | 
43 | ReactDOM.render(
44 |   <ApolloProvider client={client}>
45 |       <Router>
46 |         <div>
47 |           <Query query={getNotification}>
48 |             {({ data: {notifications} }) => {
49 |               return (
50 |                 <EhnanchedNotifications notifications={notifications}/>
51 |             )}}
52 |           </Query>
53 |           <Switch>
54 |             <Route path='/login' component={Login} />
55 |             <PrivateRoute path='/' component={AppTemplate} redirectTo='/login' />
56 |             <Route component={NoMatch} />
57 |           </Switch>
58 |         </div>
59 |       </Router>
60 |   </ApolloProvider>,
61 | document.getElementById('root')
62 | )
63 | registerServiceWorker()
64 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebookincubator/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(path, needsSlash) {
15 |   const hasSlash = path.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return path.substr(path, path.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${path}/`;
20 |   } else {
21 |     return path;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | // config after eject: we're in ./config/
42 | module.exports = {
43 |   dotenv: resolveApp('.env'),
44 |   appBuild: resolveApp('build'),
45 |   appPublic: resolveApp('public'),
46 |   appHtml: resolveApp('public/index.html'),
47 |   appIndexJs: resolveApp('src/index.js'),
48 |   appPackageJson: resolveApp('package.json'),
49 |   appSrc: resolveApp('src'),
50 |   yarnLockFile: resolveApp('yarn.lock'),
51 |   testsSetup: resolveApp('src/setupTests.js'),
52 |   appNodeModules: resolveApp('node_modules'),
53 |   publicUrl: getPublicUrl(resolveApp('package.json')),
54 |   servedPath: getServedPath(resolveApp('package.json')),
55 | };
56 | 


--------------------------------------------------------------------------------
/src/templates/AppTemplate/style.css:
--------------------------------------------------------------------------------
 1 | @import "../../mixins.css";
 2 | 
 3 | .boards {
 4 |     -webkit-user-select: none;
 5 |     -moz-user-select: none;
 6 |     -ms-user-select: none;
 7 |     user-select: none;
 8 |     white-space: nowrap;
 9 |     overflow-x: auto;
10 |     overflow-y: hidden;
11 |     position: absolute;
12 |     top: 10px;
13 |     right: 10px;
14 |     bottom: 10px;
15 |     left: 10px;
16 | }
17 | 
18 | .content {
19 |     -webkit-box-flex: 1;
20 |     -ms-flex-positive: 1;
21 |     flex-grow: 1;
22 |     overflow-y: auto;
23 |     outline: none;
24 | }
25 | 
26 | .canvas {
27 |     -webkit-user-select: none;
28 |     -moz-user-select: none;
29 |     -ms-user-select: none;
30 |     user-select: none;
31 |     white-space: nowrap;
32 |     overflow-x: auto;
33 |     overflow-y: hidden;
34 |     position: absolute;
35 |     top: 0;
36 |     right: 0;
37 |     bottom: 0;
38 |     left: 0;
39 | }
40 | 
41 | .boards_canvas {
42 |     position: relative;
43 |     -webkit-box-flex: 1;
44 |     -ms-flex-positive: 1;
45 |     flex-grow: 1;
46 | }
47 | 
48 | .boards_main_content {
49 |     height: 100%;
50 |     display: -webkit-box;
51 |     display: -ms-flexbox;
52 |     display: flex;
53 |     -webkit-box-orient: vertical;
54 |     -webkit-box-direction: normal;
55 |     -ms-flex-direction: column;
56 |     flex-direction: column;
57 |     margin-right: 0;
58 |     -webkit-transition: margin .1s ease-in;
59 |     transition: margin .1s ease-in;
60 | }
61 | 
62 | .surface {
63 |     display: -webkit-box;
64 |     display: -ms-flexbox;
65 |     display: flex;
66 |     -webkit-box-orient: vertical;
67 |     -webkit-box-direction: normal;
68 |     -ms-flex-direction: column;
69 |     flex-direction: column;
70 |     height: 100%;
71 | }
72 | 
73 | .blank {
74 |     min-height: 100vh;
75 |     background: #70AAC3;
76 | }
77 | 
78 | .container {
79 |     margin-left: 0px;
80 |     display: inline-block;
81 |     margin-left: 0px;
82 |     /* display: inline-block; */
83 |     position: absolute;
84 |     position: absolute;
85 |     top: 0;
86 |     right: 0;
87 |     bottom: 0;
88 |     left: 45px;
89 |     @mixin for-phone-only {
90 |         margin-left: 0;
91 |     }
92 | }
93 | 
94 | .full {
95 |     left: 280px
96 | }
97 | 
98 | 


--------------------------------------------------------------------------------
/src/components/newBin/style.css:
--------------------------------------------------------------------------------
 1 | /* .dateWrapper {
 2 |     display: inline-block;
 3 |     width: 180px;
 4 |     height: 32px;
 5 |     border: none;
 6 |     margin-top: 5px;
 7 |     background: #6bccab;
 8 |     border-radius: 4px;
 9 |     color: white;
10 |     font-weight: 500;
11 |     line-height: 32px;
12 | }
13 | 
14 | .dateName {
15 |     margin: 0;
16 |     float: left;
17 |     margin-left: 10px;
18 |     padding-right: 10px;
19 |     border-right: 1px solid #ffffff52;
20 |     line-height: 32px;
21 |     font-weight: 500;
22 |     color: white;
23 |     letter-spacing: .5px;
24 | }
25 | 
26 | .dateWrapper > div:first-of-type {
27 |     float: left;
28 |     width: 125px;
29 |     border: none;
30 | }
31 | 
32 | .dateWrapper div input {
33 |     height: 29px;
34 |     border: none;
35 |     padding: 0;
36 |     background: none;
37 |     text-indent: 10px;
38 |     font-size: 14px;
39 |     color: white;
40 | }
41 |  */
42 | 
43 | .dates {
44 |     border-bottom-left-radius: 3px;
45 |     border-bottom-right-radius: 3px;
46 |     margin-top: 10px;
47 | }
48 | 
49 | .dateWrapper {
50 |    margin-top: 6px;
51 |    width: 50%;
52 |    border-radius: 3px;
53 |    /* margin-left: 5px; */
54 |    display: inline-block;
55 |    width: 135px;
56 |    border-radius: 4px;
57 |    background: #d0dced;
58 |   }
59 | 
60 |   .dateWrapper:first-of-type {
61 |       margin-right: 10px;
62 |   }
63 |   
64 |   .dateName {
65 |     margin: 0;
66 |     /* float: left; */
67 |     margin-left: 5px;
68 |     padding-right: 0px;
69 |     /* border-right: 1px solid rgba(255, 255, 255, .32157); */
70 |     /* line-height: 40px; */
71 |     font-weight: 400;
72 |     color: #707b97;
73 |     letter-spacing: .5px;
74 |     font-size: 13px;
75 |     margin-top: 5px;
76 |   }
77 |   
78 |   .dateWrapper > div:first-of-type {
79 |     float: left;
80 |     border: none;
81 |     margin-bottom: 2px;
82 |     margin-top: 0;
83 |   }
84 |   
85 |   .dateWrapper div input {
86 |     border: none;
87 |     background: none;
88 |     text-indent: 10px;
89 |     font-size: 13px;
90 |     color: #707b97;
91 |     font-weight: 600;
92 |     text-align: left;
93 |     width: 100px;
94 |     padding: 0;
95 |     margin: 0;
96 |     text-indent: 0;
97 |     margin-left: 5px;
98 |   }


--------------------------------------------------------------------------------
/src/queries/getClaims.js:
--------------------------------------------------------------------------------
 1 | import gql from 'graphql-tag'
 2 | 
 3 | const GetClaims = gql`
 4 | query ($token: String, $id: Int) {
 5 |     viewer(token: $token) {
 6 |       agent(id: $id) {
 7 |         name
 8 |         eventsCount(month:4, year:2018)
 9 |         eventHoursCount(month:4, year:2018)
10 |         eventPeopleCount(month:4, year:2018)
11 |         validatedEventsCount(month:4, year:2018)
12 |         agentPlans(month:4, year: 2018) {
13 |           name
14 |           id
15 |           plannedOn
16 |           planProcesses(month:4, year: 2018) {
17 |             name
18 |             id
19 |             committedInputs(action: WORK) {
20 |               note
21 |               action
22 |               resourceClassifiedAs{
23 |                 name
24 |               }
25 |               committedQuantity {
26 |                 unit {
27 |                   name
28 |                 }
29 |                 numericValue
30 |               }
31 |               fulfilledBy(requestDistribution: true) {
32 |                 fulfilledBy {
33 |                   id
34 |                   action
35 |                   validations {
36 |                     id
37 |                     validatedBy {
38 |                       name
39 |                       id
40 |                     }
41 |                   }
42 |                   start
43 |                   inputOf {
44 |                     name
45 |                   }
46 |                   affectedQuantity {
47 |                     numericValue
48 |                     unit {
49 |                       name
50 |                     }
51 |                   }
52 |                   affects {
53 |                     resourceClassifiedAs {
54 |                       name
55 |                       category
56 |                     }
57 |                     trackingIdentifier
58 |                   }
59 |                   provider {
60 |                     id
61 |                     name
62 |                     image
63 |                   }
64 |                   receiver {
65 |                     id
66 |                     name
67 |                   }
68 |                   note
69 |                 }
70 |               }
71 |             }
72 |           }
73 |         }
74 |       }
75 |     }
76 |   }
77 |   `
78 | 
79 | export default GetClaims
80 | 


--------------------------------------------------------------------------------
/src/components/cards/style.css:
--------------------------------------------------------------------------------
  1 | .section_wrapper {
  2 | }
  3 | 
  4 | .plan_scope {
  5 |   margin: 0;
  6 |   padding: 0;
  7 |   margin-left: 10px;
  8 |   margin-right: 10px;
  9 |   font-size: 14px;
 10 |   font-weight: 300;
 11 |   text-transform: lowercase;
 12 |   overflow: hidden;
 13 | }
 14 | 
 15 | .lists_item a {
 16 |     position: absolute;
 17 |     left: 0;
 18 |     top: 0;
 19 |     bottom: 0;
 20 |     right: 0;
 21 |     display: block;
 22 |     text-decoration: none;
 23 |   }
 24 | 
 25 | .lists_item {
 26 |     height: 100px;
 27 |     margin-bottom: 10px;
 28 |     position: relative;
 29 |     background: #fbfbfb;
 30 |     box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 31 |     border-radius: 3px;
 32 |   }
 33 | 
 34 | 
 35 | .item_title {
 36 |     font-weight: 700;
 37 |     margin: 10px;
 38 |     font-size: 14px;
 39 |     font-weight: 500;
 40 |     color: #100F2B;
 41 |     overflow: hidden;
 42 |   }
 43 |   
 44 |   .lists_item p {
 45 |     padding-top: 0;
 46 |     margin-top: 0;
 47 |     margin-bottom: 10px;
 48 |     font-weight: 500;
 49 |     font-size: 14px;
 50 |     font-weight: 300;
 51 |     color: #100F2B;
 52 |     margin-left: 10px;
 53 |     text-decoration: none !important;
 54 |   }
 55 | 
 56 | .lists_item .item_info {
 57 |   position: absolute;
 58 |   bottom: 0;
 59 |   left: 0;
 60 |   right: 0;
 61 |   height: 30px;
 62 |   padding: 0 10px;
 63 |   border-radius: 0 0 3px 3px;
 64 |   background: white;
 65 |   box-shadow: 0 -2px -2px rgba(0, 0, 0, .2)
 66 | }
 67 | 
 68 | .item_info .info_date {
 69 |   font-size: 13px;
 70 |   font-weight: 400;
 71 |   color: rgb(109, 109, 109);
 72 |   letter-spacing: 0px;
 73 |   line-height: 30px;
 74 | }
 75 | 
 76 | .item_info .info_status {
 77 |   height: 20px;
 78 |   margin-top: 5px;
 79 |   float: right;
 80 |   border-radius: 20px;
 81 |   padding: 0 5px;
 82 |   background: #D8D8D8;
 83 |   color: white;
 84 |   font-size: 13px;
 85 |   letter-spacing: 0px;
 86 |   line-height: 20px;
 87 | }
 88 | .completed {
 89 |   background-color: #18BB58 !important;
 90 | }
 91 | .wip {
 92 |   background-color: #FFC930 !important;
 93 | }
 94 | 
 95 | .todo {
 96 |   background-color: #EB4610 !important;
 97 | }
 98 | 
 99 |   @media screen and (max-width: 600px) {
100 |      .lists_item {
101 |          lost-column: 1/1;
102 |      }
103 |   }


--------------------------------------------------------------------------------
/src/components/newCommitmentModal/style.css:
--------------------------------------------------------------------------------
  1 | .cardModal {
  2 |     width: 600px;
  3 |     box-shadow: 0 2px 8px 3px rgba(0,0,0,.3);
  4 |     z-index : 9999999999;
  5 |     background-color: #EDEFF0;
  6 |     padding:  0;
  7 |     margin: 40px auto;
  8 |     position: relative;
  9 |     border-radius: 3px;
 10 |     padding-bottom: 20px;
 11 |     outline: none;
 12 |   }
 13 | 
 14 |   .dateComp {
 15 |     height: 30px;
 16 |     width: 110px;
 17 |     font-size: 14px;
 18 |     text-indent: 5px;
 19 |     border: none;
 20 |     background: #6accaa;
 21 |     margin: 0;
 22 |     padding: 0;
 23 |     color: #fafafa;
 24 |   }
 25 | 
 26 |   .dateWrapper {
 27 |     height: 36px;
 28 |     border: none;
 29 |     border-radius: 4px;
 30 |     color: #606884;
 31 |     font-weight: 500;
 32 |     line-height: 36px;
 33 |     float: left;
 34 | }
 35 | 
 36 | .commTitle {
 37 |     font-size: 18px;
 38 |     color: #525561;
 39 |     letter-spacing: .5px;
 40 |     margin-top: 10px;
 41 |     margin-bottom: 20px;
 42 | }
 43 | 
 44 | .dateName {
 45 |     margin: 0;
 46 |     float: left;
 47 |     margin-left: 10px;
 48 |     padding-right: 5px;
 49 |     line-height: 37px;
 50 |     font-weight: 400;
 51 |     font-size: 14px;
 52 |     color: #606884;
 53 |     letter-spacing: .5px;
 54 | }
 55 | 
 56 | .dateWrapper > div:first-of-type {
 57 |     float: left;
 58 |     width: 125px;
 59 |     border: none;
 60 | }
 61 | 
 62 | .dateWrapper div input {
 63 |     height: 29px;
 64 |     border: none;
 65 |     padding: 0;
 66 |     background: none;
 67 |     font-weight: 500;
 68 |     text-decoration: underline;
 69 |     font-size: 14px;
 70 |     color: #606884;
 71 | }
 72 | 
 73 | .textareaWrapper textarea {
 74 |   border-radius: 0 !important;
 75 | 
 76 | }
 77 | 
 78 | .commitmentWrapper {
 79 |     lost-utility: clearfix;
 80 |     margin-top: 10px;
 81 |     background: #fafafa;
 82 |     border-bottom: 1px solid rgba(54, 54, 54, .1);
 83 | }
 84 | 
 85 | .footer {
 86 |     background: #E5E5E5;
 87 |     lost-utility: clearfix;
 88 | }
 89 | 
 90 | 
 91 | .footer:hafter {
 92 |     content: "";
 93 |     display: table;
 94 |     clear: both;
 95 | }
 96 | 
 97 | .footer button {
 98 |     float: right;
 99 |     border-radius: 0;
100 | }
101 | 
102 | .commInput {
103 |     float: left;
104 |     margin-right: 1%;
105 |     width: 24%
106 | }
107 | 
108 | .qtyInput {
109 |     width: 50px;
110 | }


--------------------------------------------------------------------------------
/src/components/flag/style.css:
--------------------------------------------------------------------------------
 1 | .flag {
 2 |     position: absolute;
 3 |     z-index: 99999999;
 4 |     width: 300px;
 5 |     right: 20px;
 6 |     top: 20px;
 7 |     opacity: 0;
 8 |     right: 20px;
 9 |     display: none;
10 | }
11 | 
12 | .flag.active {
13 |     right: 20px;
14 |     opacity: 1;
15 |     display: block;
16 | }
17 | 
18 | .flag_internal {
19 |     background-color: #FFFFFF;
20 |     border-radius: 3px;
21 |     box-sizing: border-box;
22 |     -moz-box-sizing: border-box;
23 |     box-shadow: 0 0 1px rgba(9, 30, 66, 0.31), 0 20px 32px -8px rgba(9, 30, 66, 0.25);
24 |     color: #42526E;
25 |     display: -webkit-box;
26 |     display: -moz-box;
27 |     display: -ms-flexbox;
28 |     display: -webkit-flex;
29 |     display: flex;
30 |     padding: 16px;
31 |     transition: background-color 200ms;
32 |     -webkit-transition: background-color 200ms;
33 |     width: 100%;
34 |     z-index: 600;
35 | }
36 | .internal_close {
37 |     float: right;
38 | }
39 | 
40 | .internal_icon {
41 |     align-items: flex-start;
42 |     -webkit-box-align: start;
43 |     -ms-flex-align: start;
44 |     -webkit-align-items: flex-start;
45 |     display: -webkit-box;
46 |     display: -moz-box;
47 |     display: -ms-inline-flexbox;
48 |     display: -webkit-inline-flex;
49 |     display: inline-flex;
50 |     flex: 0 0 auto;
51 |     -ms-flex: 0 0 auto;
52 |     -webkit-flex: 0 0 auto;
53 |     flex-direction: column;
54 |     -webkit-box-direction: normal;
55 |     -webkit-box-orient: vertical;
56 |     -ms-flex-direction: column;
57 |     -webkit-flex-direction: column;
58 |     vertical-align: middle;
59 |     height: 18px;
60 |     margin-right: 5px;
61 | }
62 | 
63 | .internal_content {
64 |     display: -webkit-box;
65 |     display: -moz-box;
66 |     display: -ms-flexbox;
67 |     display: -webkit-flex;
68 |     display: flex;
69 |     flex: 1 1 100%;
70 |     -ms-flex: 1 1 100%;
71 |     -webkit-flex: 1 1 100%;
72 |     flex-direction: column;
73 |     -webkit-box-direction: normal;
74 |     -webkit-box-orient: vertical;
75 |     -ms-flex-direction: column;
76 |     -webkit-flex-direction: column;
77 |     justify-content: center;
78 |     -webkit-box-pack: center;
79 |     -ms-flex-pack: center;
80 |     -webkit-justify-content: center;
81 |     min-width: 0;
82 | }
83 | 
84 | .internal_content h1 {
85 |     font-size: 16px;
86 |     font-weight: 500;
87 |     margin: 0;
88 |     /* height: 10px; */
89 |     line-height: 22px;
90 | }
91 | 
92 | .internal_content h5 {
93 |     font-size: 14px;
94 |     font-weight: 300;
95 |     margin: 0;
96 |     /* height: 10px; */
97 |     line-height: 20px;
98 | }


--------------------------------------------------------------------------------
/src/network/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import {Link} from 'react-router-dom'
 4 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'
 5 | 
 6 | const Network = ({data, orgs}) => (
 7 |     <section className={style.agent}>
 8 |       <Tabs selectedTabClassName={style.list_active}>
 9 |       <div className={style.agent_sidebar_wrapper}>
10 |         <div className={style.agent_sidebar}>
11 |           <h1>sections</h1>
12 |           <ul className={style.sidebar_panel}>
13 |             <TabList className={style.scope_list}>
14 |               <Tab>Your network</Tab>
15 |               <Tab>Broader network</Tab>
16 |             </TabList>
17 |           </ul>
18 |         </div>
19 |       </div>
20 |       <div className={style.agent_profile}>
21 |         <div className={style.agent_info}>
22 |           <div className={style.info_data}>
23 |             <h1 className={style.info_title}>Network</h1>
24 |             <h5 className={style.info_note}>Internet Advertising Trends You Won T Be Disappointed Internet Advertising Trends You Won T Be Disappointed</h5>
25 |           </div>
26 |         </div>
27 |         <div className={style.section}>
28 |         <div className={style.section_wrapper}>
29 |         <TabPanel>
30 |             {data.agentRelationships.map((item, i) => (
31 |               <div key={i} className={style.item}>
32 |                 <Link to={'agent/' + item.object.id}>
33 |                     <div className={style.item_photo}>
34 |                         <img src={item.object.image} /> 
35 |                     </div>
36 |                     <div className={style.item_info}>
37 |                         <h3>{item.object.name}</h3>
38 |                         <h5>{item.object.note}</h5>
39 |                     </div>
40 |                 </Link>
41 |               </div>
42 |             ))}
43 |           </TabPanel>
44 |           <TabPanel>
45 |           {orgs.map((item, i) => (
46 |               <div key={i} className={style.item}>
47 |                 <Link to={'agent/' + item.id}>
48 |                     <div className={style.item_photo}>
49 |                         <img src={item.image} /> 
50 |                     </div>
51 |                     <div className={style.item_info}>
52 |                         <h3>{item.name}</h3>
53 |                         <h5>{item.note}</h5>
54 |                     </div>
55 |                 </Link>
56 |               </div>
57 |             ))}
58 |           </TabPanel>
59 |         </div>
60 |       </div>
61 |     </div>
62 |     </Tabs>
63 |   </section>
64 | )
65 | 
66 | export default Network
67 | 


--------------------------------------------------------------------------------
/src/plan/wrapper.js:
--------------------------------------------------------------------------------
 1 | import Component from "./index";
 2 | import { graphql , compose} from "react-apollo";
 3 | import moment from "moment";
 4 | import {withFormik} from 'formik'
 5 | import * as Yup from 'yup'
 6 | import createPlan from '../mutations/CreatePlan'
 7 | import updateNotification from "../mutations/updateNotification";
 8 | import deleteNotification from "../mutations/deleteNotification";
 9 | import {Icons} from 'oce-components/build'
10 | import React from 'react'
11 | 
12 | export default compose(
13 |   graphql(createPlan, { name: "createPlanMutation" }),
14 |   graphql(updateNotification, {name: 'updateNotification'}),
15 |   graphql(deleteNotification, {name: 'deleteNotification'}),
16 |   withFormik({
17 |     mapPropsToValues: (props) => ({ name: '', note: '', start: moment(), due: moment() }),
18 |     validationSchema: Yup.object().shape({
19 |        name: Yup.string().required(),
20 |        note: Yup.string(),
21 |        start: Yup.string().required(),
22 |        due: Yup.string().required()
23 |     }),
24 |     handleSubmit: (values, {props, resetForm, setErrors, setSubmitting}) => {
25 |       let date = moment(values.due).format("YYYY-MM-DD");
26 |       props
27 |         .createPlanMutation({
28 |           variables: {
29 |             token: localStorage.getItem("oce_token"),
30 |             name: values.name,
31 |             due: date,
32 |             note: values.note
33 |           }
34 |         })
35 |         .then(data => {
36 |           props.updateNotification({variables: {
37 |             message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Plan {data.data.createPlan.plan.name} created successfully!</div>,
38 |             type: 'success'
39 |           }})
40 |           .then(res => {
41 |             setTimeout(() => {
42 |              props.deleteNotification({variables: {id: res.data.addNotification.id}})
43 |            }, 1000);
44 |           })
45 |           return props.history.push(`canvas/${data.data.createPlan.plan.id}`);
46 |         }, (e) => {
47 |           const errors = e.graphQLErrors.map(error => error.message)
48 |           props.updateNotification({variables: {
49 |             message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
50 |             type: 'alert'
51 |           }})
52 |           .then(res => {
53 |             setTimeout(() => {
54 |              props.deleteNotification({variables: {id: res.data.addNotification.id}})
55 |            }, 1000);
56 |           })
57 |           props.setSubmitting(false)
58 |        })
59 |     }
60 |   })
61 | )(Component);
62 | 
63 | 


--------------------------------------------------------------------------------
/src/components/feed/index.css:
--------------------------------------------------------------------------------
  1 | 
  2 |   .activities_list  {
  3 |     margin-top: 20px;
  4 |     padding: 10px;
  5 |   }
  6 | 
  7 |   .activities_list .list_item {
  8 |     border-bottom: 1px solid #e2e4e61a;
  9 |     min-height: 30px;
 10 |     padding: 10px 0;
 11 |     position: relative;
 12 |     margin-bottom: 10px;
 13 |   }
 14 |   
 15 |   .list_item {
 16 |     /* display: inline; */
 17 |     margin: 0 6px 0 0;
 18 |     word-wrap: break-word;
 19 |     font-size: 14px;
 20 |     color: #f0f0f0;
 21 |     lost-utility: clearfix;
 22 |   }
 23 | 
 24 | 
 25 | .item_desc {
 26 |   margin-left: 10px;
 27 |   font-weight: 300;
 28 | }
 29 | 
 30 | .item_desc .desc {
 31 |   font-weight: 300;
 32 |   margin-top: 3px;
 33 | }
 34 | 
 35 | .receiver {
 36 |   width: 110px;
 37 |   white-space: nowrap;
 38 |   overflow: hidden;
 39 |   display: inline-block;
 40 |   vertical-align: bottom;
 41 |   text-overflow: ellipsis;
 42 | }
 43 | 
 44 | .desc_payment {
 45 |   padding: 2px 5px;
 46 |   letter-spacing: 0.5px;
 47 |   vertical-align: unset;
 48 |   border-radius: 2px;
 49 |   background: #99ADC6;
 50 |   color: #3C444F;
 51 |   font-weight: 500;
 52 |   text-transform: uppercase;
 53 |   font-size: 11px;
 54 |   text-decoration: none;
 55 | }
 56 | 
 57 | /* .desc_payed {
 58 |   background: #BBDBB4;
 59 | }
 60 | 
 61 | .desc_voluntary {
 62 |   background: #2E86AB;
 63 | } */
 64 | 
 65 |   .item_desc {
 66 |     margin-left: 40px;
 67 |     color: #f0f0f0;
 68 |   }
 69 | 
 70 |   .item_desc .desc {
 71 |     font-weight: 300;
 72 |     margin-top: 3px;
 73 |   }
 74 | 
 75 |   .members {
 76 |     float: left;
 77 |     vertical-align: sub;
 78 |   }
 79 | 
 80 |   .members .members_item {
 81 |     background-color: #D6DADC;
 82 |     border-radius: 3px;
 83 |     color: #4d4d4d;
 84 |     display: block;
 85 |     float: left;
 86 |     height: 30px;
 87 |     margin: 0 4px 4px 0;
 88 |     overflow: hidden;
 89 |     position: relative;
 90 |     width: 30px;
 91 |     -ms-user-select: none;
 92 |     user-select: none;
 93 |     z-index: 0;
 94 |   }
 95 | 
 96 |   .members_item span {
 97 |     width: 32px;
 98 |     height: 32px;
 99 |     display: block;
100 |     -webkit-appearance: none;
101 |     line-height: 32px;
102 |     text-indent: 4px;
103 |     font-size: 13px;
104 |     overflow: hidden;
105 |     max-width: 32px;
106 |     max-height: 32px;
107 |     text-overflow: ellipsis;
108 |     background-size: cover;
109 |   }
110 |   
111 | 
112 |   .list_item .members {
113 |     vertical-align: middle;
114 |   }
115 |   
116 |   .list_item span {
117 |     font-weight: 500;
118 |   }
119 |   
120 |   .list_item .item_meta {
121 |     color: #99ADC6;
122 |     font-size: 13px;
123 |     margin-top: 5px;
124 |     font-weight: 300;
125 |   }
126 | 
127 |   .item_meta span {
128 |     font-weight: 300;
129 |     text-decoration: underline;
130 |     cursor: pointer;
131 |   }


--------------------------------------------------------------------------------
/src/components/sidebar/index.js:
--------------------------------------------------------------------------------
 1 | import {compose, withHandlers} from 'recompose'
 2 | import Component from './sidebar'
 3 | import moment from "moment";
 4 | import {withFormik} from 'formik'
 5 | import * as Yup from 'yup'
 6 | import createPlan from '../../mutations/CreatePlan'
 7 | import updateNotification from "../../mutations/updateNotification";
 8 | import deleteNotification from "../../mutations/deleteNotification";
 9 | import {Icons} from 'oce-components/build'
10 | import { graphql } from "react-apollo";
11 | import React from 'react'
12 | 
13 | export default compose(
14 |   graphql(createPlan, { name: "createPlanMutation" }),
15 |   graphql(updateNotification, {name: 'updateNotification'}),
16 |   graphql(deleteNotification, {name: 'deleteNotification'}),
17 |   withFormik({
18 |     mapPropsToValues: (props) => ({ name: '', note: '', start: moment(), due: moment() }),
19 |     validationSchema: Yup.object().shape({
20 |        name: Yup.string().required(),
21 |        note: Yup.string(),
22 |        start: Yup.string().required(),
23 |        due: Yup.string().required()
24 |     }),
25 |     handleSubmit: (values, {props}) => {
26 |       let date = moment(values.due).format("YYYY-MM-DD");
27 |       props
28 |         .createPlanMutation({
29 |           variables: {
30 |             token: localStorage.getItem("oce_token"),
31 |             name: values.name,
32 |             due: date,
33 |             note: values.note
34 |           }
35 |         })
36 |         .then(data => {
37 |           props.updateNotification({variables: {
38 |             message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Plan {data.data.createPlan.plan.name} created successfully!</div>,
39 |             type: 'success'
40 |           }})
41 |           .then(res => {
42 |             setTimeout(() => {
43 |              props.deleteNotification({variables: {id: res.data.addNotification.id}})
44 |            }, 1000);
45 |           })
46 |            return props.history.push(`/canvas/${data.data.createPlan.plan.id}`);
47 |         }, (e) => {
48 |           const errors = e.graphQLErrors.map(error => error.message)
49 |           props.updateNotification({variables: {
50 |             message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
51 |             type: 'alert'
52 |           }})
53 |           .then(res => {
54 |             setTimeout(() => {
55 |              props.deleteNotification({variables: {id: res.data.addNotification.id}})
56 |            }, 1000);
57 |           })
58 |           props.setSubmitting(false)
59 |        })
60 |     }
61 |   }),
62 |   withHandlers({
63 |     logout: props => event => {
64 |       localStorage.removeItem('oce_token')
65 |       window.location.reload()
66 |     }
67 |   })
68 | )(Component)
69 | 


--------------------------------------------------------------------------------
/src/components/feed/index.js:
--------------------------------------------------------------------------------
  1 | import {compose, withHandlers} from 'recompose'
  2 | import Component from './modalActivities'
  3 | import {graphql} from 'react-apollo'
  4 | import gql from 'graphql-tag'
  5 | import {addFlagAction} from '../../../store/actions/flags'
  6 | import {connect} from 'react-redux'
  7 | 
  8 | 
  9 | const mapDispatchToProps = dispatch => ({
 10 |   addFlag: (data) => {
 11 |     dispatch(addFlagAction(data))
 12 |   }
 13 | })
 14 | 
 15 | 
 16 | const deleteEvent = gql`
 17 | mutation ($token: String!, $id: Int!) {
 18 |     deleteEconomicEvent(
 19 |       token: $token,
 20 |       id: $id
 21 |     ) {
 22 |       economicEvent {
 23 |         action
 24 |         start
 25 |       }
 26 |     }
 27 | }
 28 | `
 29 | 
 30 | export const queryEvents = gql`
 31 | query ($token: String!, $id: Int!) {
 32 |     viewer(token: $token) {
 33 |         commitment(id: $id) {
 34 |           id
 35 |           fulfilledBy {
 36 |             fulfilledBy {
 37 |               action
 38 |               start
 39 |               id
 40 |               note
 41 |               provider {
 42 |                 name
 43 |                 image
 44 |                 id
 45 |               }
 46 |             }
 47 |             fulfilledQuantity {
 48 |               numericValue
 49 |               unit {
 50 |                 name
 51 |               }
 52 |             }
 53 |           }
 54 |         }
 55 |     }
 56 | }
 57 | `
 58 | 
 59 | export default compose(
 60 |     graphql(deleteEvent, {
 61 |       options: (props) => ({
 62 |         refetchQueries: [
 63 |           {
 64 |             query: queryEvents,
 65 |             variables: {
 66 |               token: localStorage.getItem('oce_token'),
 67 |               id: props.id
 68 |             }
 69 |           }
 70 |         ]
 71 |       }),
 72 |       props: ({mutate, ownProps: {id}}) => ({
 73 |         id, mutate
 74 |       })
 75 |     }),
 76 |     graphql(queryEvents, {
 77 |       options: ({id}) => ({ variables: { token: localStorage.getItem('oce_token'), id: id}}),
 78 |       props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
 79 |         loading,
 80 |         error,
 81 |         refetchData: refetch,  // :NOTE: call this in the component to force reload the data
 82 |         activities: viewer ? viewer.commitment.fulfilledBy : null
 83 |       })
 84 |     }),
 85 |     connect(null, mapDispatchToProps),
 86 |     withHandlers({
 87 |       deleteEvent: ({mutate, addFlag}) => (id) => {
 88 |         return (
 89 |           mutate({
 90 |             variables: {
 91 |               token: localStorage.getItem('oce_token'),
 92 |               id: id
 93 |             }
 94 |           })
 95 |           .then((data) => console.log(data))
 96 |           .catch(e => addFlag({
 97 |             title: 'Not authorized',
 98 |             message: 'You do not have the permission to delete that event'
 99 |           }))
100 |         )
101 |       }
102 |     })
103 |   )(Component)
104 | 


--------------------------------------------------------------------------------
/src/agent/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import Cards from '../components/cards'
 4 | import Feed from '../components/feed/feed'
 5 | import { NavLink } from 'react-router-dom'
 6 | import Item from '../components/inventoryItem'
 7 | import {Icons, Panel, NavigationItem} from 'oce-components/build'
 8 | // import Panel from '../components/panel'
 9 | 
10 | const Agent = ({data, match}) => {
11 |   return (
12 |     <section className={style.agent}>
13 |       <Panel data-testid='diary' icon={<Icons.Diary width='18' color='#f0f0f0' />} title='Diary'>
14 |         <div className={style.agent_profile}>
15 |           <div className={style.agent_info}>
16 |             <div className={style.info_image}>
17 |               <span className={style.image_photo} style={{backgroundImage: data.image ? `url(${data.image})` : `url('./images/sample.png')`}} />
18 |             </div>
19 |             <h1 className={style.info_title}>{data.name}</h1>
20 |           </div>
21 |           {data.agentEconomicEvents.length > 0
22 |           ? <Feed feed={data.agentEconomicEvents} />
23 |           : <div className={style.emptyBox}>No item in this section :(</div>}
24 |         </div>
25 |       </Panel>
26 |       <Panel data-testid='network' icon={<Icons.Globe width='18' color='#f0f0f0' />} title={data.type === 'Person' ? 'Network' : 'Participants'}>
27 |         <div className={style.agent_list}>
28 |           {data.type === 'Person' 
29 |           ? data.agentRelationships.map((item, i) => (
30 |             <NavLink key={i} activeClassName={style.activeLink} to={'/agent/' + item.object.id}>
31 |               <NavigationItem img={item.object.image} title={item.object.name} />
32 |             </NavLink>
33 |           ))
34 |           : data.agentRelationships.map((item, i) => (
35 |             <NavLink key={i} activeClassName={style.activeLink} to={'/agent/' + item.subject.id}>
36 |               <NavigationItem img={item.subject.image} title={item.subject.name} />
37 |             </NavLink>
38 |           )) }
39 |           
40 |         </div>
41 |       </Panel>
42 |       <Panel data-testid='plans' icon={<Icons.Card width='18' color='#f0f0f0' />} title='Plans'>
43 |         {data.agentPlans.length > 0
44 |           ? <Cards
45 |             data={data.agentPlans}
46 |             link='/canvas'
47 |           />
48 |           : <div className={style.emptyBox}>No item in this section :(</div>
49 |         }
50 |       </Panel>
51 |       <Panel data-testid='inventory' icon={<Icons.Inventory width='18' color='#f0f0f0' />} title='Inventory'>
52 |         <div className={style.resources_list}>
53 |           {data.ownedEconomicResources.length > 0
54 |             ? data.ownedEconomicResources.map((item, i) => (
55 |               <Item item={item} key={i} />
56 |             ))
57 |           : <div className={style.emptyBox}>No item in this section :(</div>
58 |           }
59 |         </div>
60 |       </Panel>
61 |     </section>
62 |   )
63 | }
64 | 
65 | export default Agent
66 | 


--------------------------------------------------------------------------------
/src/settings/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import ToggleButton from 'react-toggle-button'
 4 | // import Panel from '../components/panel'
 5 | // import {User, Bell} from '../icons'
 6 | import {Icons, Panel} from 'oce-components/build'
 7 | 
 8 | const Settings = ({allNotification, toggleNotification, data, saveSettings, updateImage, updateBio, updateEmail, updateLocation, updateName}) => {
 9 |   const notifications = allNotification.map(notification => {
10 |     let value
11 |     let id
12 |     let updatedValue = data.agentNotificationSettings.filter(notif => notif.notificationType.id === notification.id)
13 |     if (updatedValue.length > 0) { 
14 |       value = updatedValue[0].send
15 |       id = updatedValue[0].id
16 |     }
17 |     return {
18 |       display: notification.display,
19 |       description: notification.description,
20 |       value: value,
21 |       id: id,
22 |       originalId: notification.id
23 |     }
24 |   })
25 |   return (
26 |     <div className={style.settings}>
27 |       <Panel icon={<Icons.User width='18' color='#f0f0f0' />} title='General'>
28 |         <div className={style.container_form}>
29 |           <div className={style.form_item}>
30 |             <h5>Name</h5>
31 |             <input onChange={updateName} placeholder={data.name} />
32 |           </div>
33 |           <div className={style.form_item}>
34 |             <h5>Email</h5>
35 |             <input onChange={updateEmail} placeholder={data.email} />
36 |           </div>
37 |           <div className={style.form_item}>
38 |             <h5>Photo</h5>
39 |             <input onChange={updateImage} placeholder={data.image} />
40 |             <div className={style.item_photo}>
41 |               <img alt='agent' src={data.image} />
42 |             </div>
43 |           </div>
44 |           <div className={style.form_item}>
45 |             <h5>Bio</h5>
46 |             <textarea onChange={updateBio} placeholder={data.note} />
47 |           </div>
48 |           <div className={style.form_actions}>
49 |             <button onClick={saveSettings} >Save</button>
50 |           </div>
51 |         </div>
52 |       </Panel>
53 |       <Panel icon={<Icons.Bell width='18' color='#f0f0f0' />} title='Notification'>
54 |         <div className={style.container_form}>
55 |           {notifications.map((notification, i) => (
56 |             <div key={i} className={style.form_item + ' ' + style.form_setting}>
57 |               <div className={style.item_info}>
58 |                 <h5>{notification.display}</h5>
59 |                 <p>{notification.description}</p>
60 |               </div>
61 |               <div className={style.item_status}>
62 |               <ToggleButton
63 |                 value={ notification.value || false }
64 |                 onToggle={(value) => toggleNotification(notification.id, value, notification.originalId)} />
65 |               </div>
66 |             </div>
67 |           ))}
68 |         </div>
69 |       </Panel>
70 |     </div>
71 |   )
72 | }
73 | 
74 | 
75 | export default Settings
76 | 


--------------------------------------------------------------------------------
/src/components/cardModal/CardModal.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './index.css'
 3 | import ModalTitle from './modalTitle'
 4 | import ModalMembers from './modalMembers/modalMembers'
 5 | import ModalActivities from './modalActivities'
 6 | import LogEvent from './logEvent'
 7 | import { compose, withState, withHandlers } from 'recompose'
 8 | import {graphql} from 'react-apollo'
 9 | import GetCommitment from '../../queries/getCommitment'
10 | import ModalDue from './modalDue'
11 | import ModalStatus from './modalStatus'
12 | import ModalNote from './modalNote'
13 | import Actions from './actions'
14 | import {LoadingMini} from '../loading'
15 | 
16 | const CardModal = ({param, processId, id, agentId, toggleActions, actionPopup, updateCommitment, allPlanAgents, units, loading, data, error, close, modalDescription}) => {
17 |   console.log(data)
18 |   return (
19 |     loading ? <LoadingMini /> : (
20 |     error ? <p style={{ color: '#ddd' }}>{error}</p> : (
21 |     <section className={style.modal_content}>
22 |       <ModalTitle action={data.action} amount={data.committedQuantity.numericValue} unit={data.committedQuantity.unit.name}  resource={data.resourceClassifiedAs.name} />
23 |       <div className={style.content_info}>
24 |         <div className={style.content_module}>
25 |           <div className={style.module_header}>
26 |             <div className={style.header_labels}>
27 |               <ModalMembers members={data.involvedAgents} />
28 |               <ModalDue due={data.due} />
29 |               <ModalStatus isFinished={data.isFinished} />
30 |             </div>
31 |           </div>
32 |           <ModalNote note={data.note} />
33 |         </div>
34 |         <h5 className={style.modalDescription_title}>Log your work</h5>
35 |         <LogEvent processId={processId} agentId={agentId} unit={data.committedQuantity.unit.name} action={data.action} param={param} id={id} units={units} scopeId={data.scope ? data.scope.id : ''} commitmentId={data.id} />
36 |         <h5 className={style.modalDescription_title}>Contributions</h5>
37 |         <ModalActivities param={param} units={units} scopeId={data.scope ? data.scope.id : ''} commitmentId={data.id} id={id} />
38 |       </div>
39 |       <Actions close={close} processId={data.inputOf ? data.inputOf.id : data.outputOf ? data.outputOf.id: null} scopeId={data.scope ? data.scope.id : ''} id={id} planId={param} data={data} />
40 |     </section>
41 |     ))
42 |   )
43 | }
44 | 
45 | export default compose(
46 |   graphql(GetCommitment, {
47 |     options: ({id}) => ({ variables: { token: localStorage.getItem('oce_token'), id: id}}),
48 |     props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
49 |       loading,
50 |       error,
51 |       refetchData: refetch,  // :NOTE: call this in the component to force reload the data
52 |       data: viewer ? viewer.commitment : null,
53 |       units: viewer ? viewer.allUnits : null
54 |     })
55 |   }),
56 |   withState('modalDescription', 'handleModalDescription', null),
57 |   withState('actionPopup', 'toggleActionPopup', false),
58 |   withHandlers({
59 |     toggleActions: (props) => (event) => {
60 |       props.toggleActionPopup(!props.actionPopup)
61 |     }
62 |   })
63 | )(CardModal)
64 | 


--------------------------------------------------------------------------------
/src/plan/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {Panel, Icons, Input, Textarea, Button} from 'oce-components/build'
 3 | import AgentRelationships from '../agentRelationships'
 4 | import style from './style.css'
 5 | import DatePicker from 'react-datepicker'
 6 | import {Form, Field} from 'formik'
 7 | import Alert from '../components/alert'
 8 | require("react-datepicker/dist/react-datepicker-cssmodules.css")
 9 | 
10 | // ROUTES
11 | const Plan = (props) => {
12 |   return (
13 |     <div className={style.container}>
14 |       <Panel icon={<Icons.Globe width='18' color='#f0f0f0' />} title='Create new plan'>
15 |         <div className={style.panel_container}>
16 |         <Form>
17 |           <span className={style.form_input}>
18 |             <Field name="name" render={({ field /* _form */ }) => (<Input dark {...field} placeholder='Type the plan name' />)} />
19 |             {props.errors.name && props.touched.name && <Alert>{props.errors.name}</Alert>}
20 |           </span>
21 |           <span className={style.form_note}>
22 |             <Field name="note" render={({ field /* _form */ }) => (<Textarea {...field} placeholder='What is the plan about' />)} />
23 |           </span>
24 |           <div className={style.dates}>
25 |             <div className={style.item_date}>
26 |               <h5>Start date</h5>
27 |               <StartDate
28 |                 value={props.values.start}
29 |                 onChange={props.setFieldValue}
30 |                 onBlur={props.setFieldTouched}
31 |                 error={props.errors.start}
32 |                 touched={props.touched.start}
33 |               />
34 |             </div>
35 |             <div className={style.item_date}>
36 |               <h5>Due date</h5>
37 |               <DueDate
38 |                 value={props.values.due}
39 |                 onChange={props.setFieldValue}
40 |                 onBlur={props.setFieldTouched}
41 |                 error={props.errors.due}
42 |                 touched={props.touched.due}
43 |               />
44 |             </div>
45 |           </div>
46 |           <div className={style.form_button}>
47 |             <Button>Create</Button>
48 |           </div>
49 |           </Form>
50 |         </div>
51 |       </Panel>
52 |       <AgentRelationships match={props.match} relationships={props.relationships} />
53 |     </div>
54 |   )
55 | }
56 | 
57 | 
58 | const StartDate = (props) => {
59 |   const handleChange = value => {
60 |     props.onChange('start', value);
61 |   };
62 |   return (
63 |     <div>
64 |       <DatePicker
65 |       selected={props.value}
66 |       onChange={handleChange}
67 |       dateFormat={'DD MMM YYYY'}
68 |       withPortal
69 |     />
70 |     {props.error && props.touched && <Alert>{props.error}</Alert>}
71 |     </div>
72 |   )
73 | }
74 | 
75 | const DueDate = (props) => {
76 |   const handleChange = value => {
77 |     props.onChange('due', value);
78 |   };
79 |   return (
80 |     <div>
81 |     <DatePicker
82 |       selected={props.value}
83 |       onChange={handleChange}
84 |       dateFormat={'DD MMM YYYY'}
85 |       withPortal
86 |     />
87 |     {props.error && props.touched && <Alert>{props.error}</Alert>}
88 |     </div>
89 |   )
90 | }
91 | 
92 | export default Plan
93 | 
94 | 


--------------------------------------------------------------------------------
/app.test.js:
--------------------------------------------------------------------------------
 1 | import puppeteer from 'puppeteer'
 2 | // const faker = require('faker')
 3 | // const pti = require('puppeteer-to-istanbul')
 4 | 
 5 | 
 6 | const user = {
 7 |   username: 'ivan',
 8 |   password: 'Gaeta2018',
 9 | }
10 | 
11 | const isDebugging = () => {
12 |   const debuggingMode = {
13 |     headless: false,
14 |     slowMo: 50,
15 |   }
16 |   return process.env.NODE_ENV === 'development' ? debuggingMode : {}
17 | }
18 | 
19 | let browser
20 | let page
21 | 
22 | 
23 | describe('NAVIGATION & AUTH E2E TESTS', () => {
24 |   beforeAll( async () => {
25 |     browser = await puppeteer.launch(isDebugging())
26 |     page = await browser.newPage()
27 |     page.setViewport({width: 1200, height: 2400})
28 |     // await Promise.all([
29 |     //   page.coverage.startJSCoverage(),
30 |     // ]);
31 |   })
32 |   
33 |   afterAll(() => {
34 |     if (isDebugging()) {
35 |       // const jsCoverage = await Promise.all([
36 |       //   page.coverage.stopJSCoverage(),
37 |       // ]);
38 |       pti.write(jsCoverage)
39 |       browser.close()
40 |     }
41 |   })
42 | 
43 |   beforeEach(() => page.goto('http://localhost:3000'))
44 | 
45 |   it('redirects to /login', async () => {
46 |     const html = await page.$eval('[data-testid="desc"]', e => e.innerHTML)
47 |     expect(html).toBe('Your events - networked')
48 |   })
49 |   it('If not logged and try to access a priv route, redirects to /login', async () => {
50 |     await page.goto('http://localhost:3000/canvas/409')
51 |     const html = await page.$eval('[data-testid="desc"]', e => e.innerHTML)
52 |     expect(html).toBe('Your events - networked')
53 |   })
54 |   it('attempts to login with wrong credential', async () => {
55 |     await page.click('[name="username"]')
56 |     await page.type('[name="username"]', user.username)
57 |     
58 |     await page.click('[name="password"]')
59 |     await page.type('[name="password"]', '1234')
60 | 
61 |     await page.click('[data-testid="login"]')
62 | 
63 |     await page.waitForSelector('[data-testid="error"]')
64 |   }, 16000)
65 |   it('attempts to login with correct credential', async () => {
66 |     await page.click('[name="username"]')
67 |     await page.type('[name="username"]', user.username)
68 |     
69 |     await page.click('[name="password"]')
70 |     await page.type('[name="password"]', user.password)
71 | 
72 |     await page.click('[data-testid="login"]')
73 | 
74 |     await page.waitForSelector('[data-testid="success"]')
75 |   }, 16000)
76 |   it('gets redirected to dashboard page after successfully login', async () => {
77 |     await page.waitForSelector('[data-testid="agent-name"]')
78 |   }, 16000)
79 |   
80 |   // it('lands to plan page clicking on the first plan on the dashboard page ', async () => {
81 |   //   // await page.waitForSelector('[data-testid="plan_0"]')
82 |   //   await page.goto('http://localhost:3000/canvas/409')
83 |   //   await page.waitFor(20000)
84 |   //   await page.waitForSelector('[data-testid="edit-plan"]')
85 |   // }, 16000)
86 |   
87 |   it('logs out and automatically is redirected to /login', async () => {
88 |     await page.waitFor(2000)
89 |     await page.click('[data-testid="log-out"]')
90 |     await page.waitForSelector('[data-testid="desc"]')
91 |   }, 16000)
92 | })
93 | 


--------------------------------------------------------------------------------
/src/canvas/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Bin from "../components/bin";
 3 | import style from "./style.css";
 4 | import NewBin from "../components/newBin";
 5 | 
 6 | const Canvas = ({
 7 |   data,
 8 |   relationships,
 9 |   param,
10 |   openModal,
11 |   toggleNewCommitmentModal
12 | }) => {
13 |   return (
14 |   <section className={style.canvasWrapper}>
15 |     <div className={style.wrapperContainer}>
16 |       {data.planProcesses.map((list, i) => (
17 |         <Bin
18 |           cards={list.committedInputs
19 |             // .filter(comm => comm.action === "work")
20 |             .map((task, j) => ({
21 |               action: task.action,
22 |               id: Number(task.id),
23 |               title:
24 |                 task.action +
25 |                 " " +
26 |                 task.committedQuantity.numericValue +
27 |                 " " +
28 |                 task.committedQuantity.unit.name +
29 |                 " of " +
30 |                 task.resourceClassifiedAs.name,
31 |               members: task.involvedAgents,
32 |               key: j,
33 |               process: task.inputOf ? task.inputOf.name : task.outputOf.name,
34 |               due: task.due,
35 |               note: task.note,
36 |               isFinished: task.isFinished,
37 |             }))}
38 |           outputs={list.committedOutputs.map((task, j) => ({
39 |             action: task.action,
40 |             id: Number(task.id),
41 |             title:
42 |               task.action +
43 |               " " +
44 |               task.committedQuantity.numericValue +
45 |               " " +
46 |               task.committedQuantity.unit.name +
47 |               " of " +
48 |               task.resourceClassifiedAs.name,
49 |             key: j,
50 |             process: task.inputOf ? task.inputOf.name : task.outputOf.name,
51 |             due: task.due,
52 |             note: task.note,
53 |             isFinished: task.isFinished,
54 |             members: task.involvedAgents,
55 |           }))}
56 |           id={list.id}
57 |           status={list.isFinished}
58 |           key={i}
59 |           note={list.note}
60 |           plannedStart={list.plannedStart}
61 |           plannedFinish={list.plannedFinish}
62 |           agents={list.workingAgents}
63 |           name={list.name}
64 |           planId={param}
65 |           isDeletable={list.isDeletable}
66 |           openModal={openModal}
67 |           openCardController={() => toggleNewCommitmentModal(list.id, list.scope.id)}
68 |           scope={list.scope.name}
69 |           scopeId={list.scope.id}
70 |           planStartDate={data.plannedOn}
71 |           planDueDate={data.due}
72 |           relationships={relationships.map((rel, i) => (
73 |             <option key={i} value={rel.object.id}>
74 |               {rel.object.name}
75 |             </option>
76 |           ))}
77 |         />
78 |       ))}
79 |       <NewBin
80 |         relationships={relationships.map((rel, i) => (
81 |           <option key={i} value={rel.object.id}>
82 |             {rel.object.name}
83 |           </option>
84 |         ))}
85 |         param={param}
86 |         startDate={data.plannedOn}
87 |         due={data.due}
88 |       />
89 |     </div>
90 |   </section>
91 | )};
92 | 
93 | export default Canvas;
94 | 


--------------------------------------------------------------------------------
/src/components/cardModal/logEvent/logEvent.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import style from "../index.css";
  3 | import { Button, Input, Textarea } from "oce-components/build";
  4 | import DatePicker from "react-datepicker";
  5 | import ToggleButton from "react-toggle-button";
  6 | import { Form, Field } from "formik";
  7 | import Alert from "../../alert";
  8 | require("react-datepicker/dist/react-datepicker-cssmodules.css");
  9 | 
 10 | const StartDate = props => {
 11 |   const handleChange = value => {
 12 |     props.onChange("date", value);
 13 |   };
 14 |   return (
 15 |     <div className={style.item_date}>
 16 |       <DatePicker
 17 |         selected={props.value}
 18 |         onChange={handleChange}
 19 |         dateFormat={"DD MMM"}
 20 |       />
 21 |       {props.error && props.touched && <Alert>{props.error}</Alert>}
 22 |     </div>
 23 |   );
 24 | };
 25 | 
 26 | export default function LogEvent({
 27 |   action,
 28 |   values,
 29 |   setFieldValue,
 30 |   errors,
 31 |   touched,
 32 |   setFieldTouched,
 33 |   unit,
 34 |   units,
 35 | }) {
 36 |   return (
 37 |     <Form>
 38 |       <div className={style.content_module}>
 39 |         <div className={style.content_log}>
 40 |           <div className={style.log_item}>
 41 |             <div className={style.item_sencence}>
 42 |               <h5 className={style.sentence_action}>{action}</h5>
 43 |               <Field
 44 |                 name="numericValue"
 45 |                 render={({ field /* _form */ }) => (
 46 |                   <Input
 47 |                     value={field.value}
 48 |                     name={field.name}
 49 |                     onChange={field.onChange}
 50 |                     className={style.action_input_amount}
 51 |                     type="number"
 52 |                     min="00.00"
 53 |                     max="100.00"
 54 |                     step="0.1"
 55 |                     placeholder="00.00"
 56 |                   />
 57 |                 )}
 58 |               />
 59 |               {errors.numericValue && touched.numericValue && <Alert>{errors.numericValue}</Alert>}
 60 |               <h5 className={style.sentence_action}>{unit}</h5>
 61 |               <StartDate
 62 |                 value={values.date}
 63 |                 onChange={setFieldValue}
 64 |                 onBlur={setFieldTouched}
 65 |                 error={errors.start}
 66 |                 touched={touched.start}
 67 |               />
 68 |             </div>
 69 |             <Field
 70 |               name="note"
 71 |               render={({ field /* _form */ }) => (
 72 |                 <Textarea
 73 |                   value={field.value}
 74 |                   name={field.name}
 75 |                   onChange={field.onChange}
 76 |                   placeholder={"Add a more detailed description..."}
 77 |                 />
 78 |               )}
 79 |             />
 80 |             <div className={style.item_publishActions}>
 81 |               <Button>Publish</Button>
 82 |               <div className={style.item_distribution}>
 83 |                 <Field
 84 |                   name="requestPayment"
 85 |                   render={({ field /* _form */ }) => (
 86 |                     <ToggleButton
 87 |                       name={field.name}
 88 |                       value={field.value}
 89 |                       onToggle={(value) => setFieldValue('requestPayment', !value)}
 90 |                     />
 91 |                   )}
 92 |                 />
 93 |                 <label>Request payment</label>
 94 |               </div>
 95 |             </div>
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 |     </Form>
100 |   );
101 | }
102 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | var dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.
31 | // https://github.com/motdotla/dotenv
32 | dotenvFiles.forEach(dotenvFile => {
33 |   if (fs.existsSync(dotenvFile)) {
34 |     require('dotenv').config({
35 |       path: dotenvFile,
36 |     });
37 |   }
38 | });
39 | 
40 | // We support resolving modules according to `NODE_PATH`.
41 | // This lets you use absolute paths in imports inside large monorepos:
42 | // https://github.com/facebookincubator/create-react-app/issues/253.
43 | // It works similar to `NODE_PATH` in Node itself:
44 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
45 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
46 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
47 | // https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
48 | // We also resolve them to make sure all tools using them work consistently.
49 | const appDirectory = fs.realpathSync(process.cwd());
50 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
51 |   .split(path.delimiter)
52 |   .filter(folder => folder && !path.isAbsolute(folder))
53 |   .map(folder => path.resolve(appDirectory, folder))
54 |   .join(path.delimiter);
55 | 
56 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
57 | // injected into the application via DefinePlugin in Webpack configuration.
58 | const REACT_APP = /^REACT_APP_/i;
59 | 
60 | function getClientEnvironment(publicUrl) {
61 |   const raw = Object.keys(process.env)
62 |     .filter(key => REACT_APP.test(key))
63 |     .reduce(
64 |       (env, key) => {
65 |         env[key] = process.env[key];
66 |         return env;
67 |       },
68 |       {
69 |         // Useful for determining whether we’re running in production mode.
70 |         // Most importantly, it switches React into the correct mode.
71 |         NODE_ENV: process.env.NODE_ENV || 'development',
72 |         // Useful for resolving the correct path to static assets in `public`.
73 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
74 |         // This should only be used as an escape hatch. Normally you would put
75 |         // images into the `src` and `import` them in code to get their paths.
76 |         PUBLIC_URL: publicUrl,
77 |       }
78 |     );
79 |   // Stringify all values so we can feed into Webpack DefinePlugin
80 |   const stringified = {
81 |     'process.env': Object.keys(raw).reduce((env, key) => {
82 |       env[key] = JSON.stringify(raw[key]);
83 |       return env;
84 |     }, {}),
85 |   };
86 | 
87 |   return { raw, stringified };
88 | }
89 | 
90 | module.exports = getClientEnvironment;
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Agent
 2 | [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 3 | 
 4 | Collaborate together in a value network.
 5 | 
 6 | ## Getting Started
 7 | 
 8 | These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
 9 | 
10 | nd. Agent consumes data from 2 possible endpoints, both used in the faircoop ecosystem. If you want to install Agent locally and you're not part of faircoop, [you need to install also the backend locally](https://github.com/FreedomCoop/valuenetwork/blob/master/docs/install.txt)
11 | 
12 | ### Prerequisites
13 | 
14 | You need `nodejs` and `npm` installed on your machine.
15 | The app heavily uses the [OCE KIT](https://github.com/opencooperativeecosystem/component-library) as design system and component library, the kit is not published as npm module yet (need some refinements and an acceptable testing coverage).
16 | If you want to have a local version of Agent app on your machine, you need to clone the kit repository, build it and `npm link` it on agent folder.
17 | 
18 | ```
19 | git clone git@github.com:opencooperativeecosystem/kit.git
20 | cd kit
21 | npm run build
22 | npm link
23 | ```
24 | 
25 | ### Run Agent on your machine locally
26 | 
27 | Agent is an ejected version of CRA - Create react app - project.
28 | In order to have a local version of Agent running on your machine you will need to follow these steps:
29 | 
30 | ```
31 | git clone git@github.com:opencooperativeecosystem/agent.git
32 | cd agent
33 | npm install
34 | npm link kit
35 | npm start
36 | ```
37 | 
38 | ## Running the tests
39 | 
40 | The test suite is made with [Puppeeter](https://github.com/GoogleChrome/puppeteer) and [Jest](https://github.com/facebook/jest). Currently the app is covered only with End to End tests. We will cover the app also with unit tests.
41 | 
42 | To run the tests:
43 | 
44 | ```
45 | npm run debug
46 | ```
47 | 
48 | ## Deployment
49 | 
50 | Agent is a static app, therefore deployment is quite straightforward. You mainly need to build your app.
51 | 
52 | ```
53 | npm run build
54 | ```
55 | The resultant artifact contains the static files that will interact with the graphQl layer, you can deploy the folder with github-pages, zeit or any (serverless, or classic) hosting service.
56 | 
57 | The fair.coop Agent version is deployed with [Zeit](zeti.co) <3
58 | 
59 | 
60 | ## Built With
61 | 
62 | * [React](https://github.com/facebook/react) - The web framework used
63 | * [Apollo](https://github.com/apollographql) - Both to manage graphql on the server and as local state management
64 | * [post-css](https://github.com/postcss/postcss) - Transforming styles with JS plugins // planned to move to styled-components
65 | * [webpack](https://github.com/webpack/webpack) - Javascript bundler
66 | 
67 | ## Contributing
68 | [TODO]
69 | 
70 | ## Versioning
71 | 
72 | We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/opencooperativeecosystem/agent/tags). 
73 | 
74 | ## Docs
75 | You can read more about Agent and OCE on our [website](https://opencoopecosystem.net) and [docs](https://docs.opencoopecosystem.net)
76 | 
77 | ## Authors
78 | 
79 | * **Ivan Minutillo** - [github](https://github.com/ivanminutillo) - [website](https://ivanminutillo.com)
80 | 
81 | See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
82 | 
83 | ## License
84 | 
85 | This project is licensed under the [AGPL 3.0](https://www.gnu.org/licenses/agpl-3.0.html) License
86 | 
87 | ## Acknowledgments
88 | 
89 | * [Mikorizal](http://mikorizal.org/) (Lynn Foster and Bob Haugen) - to have built the NRP software and keep working hard to foster the transition to the next economy, and for being a costant source of inspiration.
90 | * [FairCoop](https://fair.coop) - to experiment with practice together
91 | 


--------------------------------------------------------------------------------
/src/components/bin/editNote.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import {Textarea, Icons, Button} from 'oce-components/build'
 4 | import {Form, Field, withFormik } from 'formik'
 5 | import * as Yup from 'yup'
 6 | import Alert from '../alert'
 7 | import Plan from "../../queries/getPlan";
 8 | import UpdateProcess from "../../mutations/updateProcess";
 9 | import { graphql, compose } from "react-apollo";
10 | import updateNotification from "../../mutations/updateNotification";
11 | import deleteNotification from "../../mutations/deleteNotification";
12 | 
13 | const EditNote = (props) => (
14 |   <Form>
15 |     <span className={style.form_note}>
16 |       <Field name="note" render={({ field /* _form */ }) => (<Textarea {...field} placeholder='Type the process note...' />)} />
17 |       {props.errors.note && props.touched.note && <Alert>{props.errors.note}</Alert>}
18 |     </span>
19 |     <Button>Update note</Button>
20 |   </Form>
21 | )
22 | 
23 | export default compose(
24 |     graphql(UpdateProcess, { name: "updateProcessMutation" }),
25 |     graphql(updateNotification, {name: 'updateNotification'}),
26 |     graphql(deleteNotification, {name: 'deleteNotification'}),
27 |     withFormik({
28 |       mapPropsToValues: (props) => ({ note: props.note || '' }),
29 |       validationSchema: Yup.object().shape({
30 |          note: Yup.string().required()
31 |       }),
32 |       handleSubmit: (values, { props, resetForm, setErrors, setSubmitting }) => {
33 |         props
34 |           .updateProcessMutation({
35 |             variables: {
36 |               token: localStorage.getItem("oce_token"),
37 |               id: props.id,
38 |               note: values.note
39 |             },
40 |             update: (store, { data }) => {
41 |               let planProcessesCache = store.readQuery({
42 |                 query: Plan,
43 |                 variables: {
44 |                   token: localStorage.getItem("oce_token"),
45 |                   planId: Number(props.planId)
46 |                 }
47 |               });
48 |     
49 |               const processToUpdateIndex = planProcessesCache.viewer.plan.planProcesses.findIndex(
50 |                 proc => proc.id === data.updateProcess.process.id
51 |               );
52 |               planProcessesCache.viewer.plan.planProcesses[
53 |                 processToUpdateIndex
54 |               ].note =
55 |                 data.updateProcess.process.note;
56 |               store.writeQuery({
57 |                 query: Plan,
58 |                 variables: {
59 |                   token: localStorage.getItem("oce_token"),
60 |                   planId: Number(props.planId)
61 |                 },
62 |                 data: planProcessesCache
63 |               });
64 |             }
65 |           })
66 |           .then(
67 |             data => {
68 |               props.updateNotification({variables: {
69 |                 message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Note updated successfully!</div>,
70 |                 type: 'success'
71 |               }})
72 |               .then(res => {
73 |                 setTimeout(() => {
74 |                  props.deleteNotification({variables: {id: res.data.addNotification.id}})
75 |                }, 1000);
76 |               })
77 |             },
78 |             e => {
79 |               const errors = e.graphQLErrors.map(error => error.message);
80 |               props.updateNotification({variables: {
81 |                 message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
82 |                 type: 'alert'
83 |               }})
84 |               .then(res => {
85 |                 setTimeout(() => {
86 |                 props.deleteNotification({variables: {id: res.data.addNotification.id}})
87 |               }, 1000);
88 |               })
89 |             }
90 |           );
91 |       }
92 |     })
93 | ) 
94 | (EditNote);
95 | 


--------------------------------------------------------------------------------
/src/components/cardModal/modalActivities/editWrapper.js:
--------------------------------------------------------------------------------
  1 | import { withFormik } from "formik";
  2 | import * as Yup from "yup";
  3 | import updateNotification from "../../../mutations/updateNotification";
  4 | import { Icons } from "oce-components/build";
  5 | import React from "react";
  6 | import deleteNotification from "../../../mutations/deleteNotification";
  7 | import moment from "moment";
  8 | import updateEvent from "../../../mutations/updateEvent";
  9 | import Component from "../logEvent/logEvent";
 10 | import { compose } from "recompose";
 11 | import { graphql } from "react-apollo";
 12 | 
 13 | export default compose(
 14 |   graphql(updateEvent, { name: "updateEventMutation" }),
 15 |   graphql(deleteNotification, { name: "deleteNotification" }),
 16 |   graphql(updateNotification, { name: "updateNotification" }),
 17 |   withFormik({
 18 |     mapPropsToValues: props => ({
 19 |       action: props.action,
 20 |       note: props.note,
 21 |       numericValue: props.unitValue,
 22 |       unit: props.unit,
 23 |       requestPayment: props.requestPayment,
 24 |       date: moment(props.date)
 25 |     }),
 26 |     validationSchema: Yup.object().shape({
 27 |       note: Yup.string(),
 28 |       numericValue: Yup.string(),
 29 |       requestPayment: Yup.boolean(),
 30 |       date: Yup.string()
 31 |     }),
 32 |     handleSubmit: (values, { props }) => {
 33 |       let date = moment(values.date).format("YYYY-MM-DD");
 34 |       return props
 35 |         .updateEventMutation({
 36 |           variables: {
 37 |             token: localStorage.getItem("oce_token"),
 38 |             id: props.idEventToEdit,
 39 |             action: values.action,
 40 |             scopeId: props.scopeId,
 41 |             requestDistribution: values.requestPayment,
 42 |             commitmentId: props.commitmentId,
 43 |             note: values.note,
 44 |             affectedNumericValue: values.numericValue,
 45 |             affectedUnitId: props.unitId,
 46 |             start: date
 47 |           },
 48 |         })
 49 |         .then(data =>{
 50 |             props.toggleEditEvent(props.editEventModal, props.idEventToEdit)
 51 |             props
 52 |               .updateNotification({
 53 |                 variables: {
 54 |                   message: (
 55 |                     <div style={{ fontSize: "14px" }}>
 56 |                       <span style={{ marginRight: "10px", verticalAlign: "sub" }}>
 57 |                         <Icons.Bell width="18" height="18" color="white" />
 58 |                       </span>Event logged successfully!
 59 |                     </div>
 60 |                   ),
 61 |                   type: "success"
 62 |                 }
 63 |               })
 64 |               .then(res => {
 65 |                 setTimeout(() => {
 66 |                   props.deleteNotification({
 67 |                     variables: { id: res.data.addNotification.id }
 68 |                   });
 69 |                 }, 1000);
 70 |               })
 71 |           })
 72 |           .catch(e => {
 73 |             props.toggleEditEvent(props.editEventModal, props.idEventToEdit)
 74 |             const errors = e.graphQLErrors.map(error => error.message);
 75 |             props
 76 |               .updateNotification({
 77 |                 variables: {
 78 |                   message: (
 79 |                     <div style={{ fontSize: "14px" }}>
 80 |                       <span style={{ marginRight: "10px", verticalAlign: "sub" }}>
 81 |                         <Icons.Cross width="18" height="18" color="white" />
 82 |                       </span>
 83 |                       {errors}
 84 |                     </div>
 85 |                   ),
 86 |                   type: "alert"
 87 |                 }
 88 |               })
 89 |               .then(res => {
 90 |                 setTimeout(() => {
 91 |                   props.deleteNotification({
 92 |                     variables: { id: res.data.addNotification.id }
 93 |                   });
 94 |                 }, 1000);
 95 |               });
 96 |           });
 97 |     }
 98 |   })
 99 | )(Component);
100 | 


--------------------------------------------------------------------------------
/src/components/bin/editTitle.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import style from "./style.css";
  3 | import { Input, Button, Icons } from "oce-components/build";
  4 | import UpdateProcess from "../../mutations/updateProcess";
  5 | import { Form, Field, withFormik } from "formik";
  6 | import { graphql, compose } from "react-apollo";
  7 | import * as Yup from "yup";
  8 | import Alert from "../alert";
  9 | import Plan from "../../queries/getPlan";
 10 | import updateNotification from "../../mutations/updateNotification";
 11 | import deleteNotification from "../../mutations/deleteNotification";
 12 | 
 13 | const EditTitle = props => (
 14 |   <Form>
 15 |     <span className={style.form_input}>
 16 |       <Field
 17 |         name="title"
 18 |         render={({ field /* _form */ }) => (
 19 |           <Input {...field} placeholder="Type the process title..." />
 20 |         )}
 21 |       />
 22 |       {props.errors.title &&
 23 |         props.touched.title && <Alert>{props.errors.title}</Alert>}
 24 |     </span>
 25 |     <Button>Update Title</Button>
 26 |   </Form>
 27 | );
 28 | 
 29 | export default compose(
 30 |   graphql(UpdateProcess, { name: "updateProcessMutation" }),
 31 |   graphql(updateNotification, {name: 'updateNotification'}),
 32 |   graphql(deleteNotification, {name: 'deleteNotification'}),
 33 |   withFormik({
 34 |     mapPropsToValues: props => ({ title: props.title || "" }),
 35 |     validationSchema: Yup.object().shape({
 36 |       title: Yup.string().required()
 37 |     }),
 38 |     handleSubmit: (values, { props }) => {
 39 |       props
 40 |         .updateProcessMutation({
 41 |           variables: {
 42 |             token: localStorage.getItem("oce_token"),
 43 |             id: props.id,
 44 |             name: values.title
 45 |           },
 46 |           update: (store, { data }) => {
 47 |             let planProcessesCache = store.readQuery({
 48 |               query: Plan,
 49 |               variables: {
 50 |                 token: localStorage.getItem("oce_token"),
 51 |                 planId: Number(props.planId)
 52 |               }
 53 |             });
 54 | 
 55 |             const processToUpdateIndex = planProcessesCache.viewer.plan.planProcesses.findIndex(
 56 |               proc => proc.id === data.updateProcess.process.id
 57 |             );
 58 |             planProcessesCache.viewer.plan.planProcesses[
 59 |               processToUpdateIndex
 60 |             ].name =
 61 |               data.updateProcess.process.name;
 62 |             store.writeQuery({
 63 |               query: Plan,
 64 |               variables: {
 65 |                 token: localStorage.getItem("oce_token"),
 66 |                 planId: Number(props.planId)
 67 |               },
 68 |               data: planProcessesCache
 69 |             });
 70 |           }
 71 |         })
 72 |         .then(
 73 |           data => {
 74 |             props.updateNotification({variables: {
 75 |               message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Title updated successfully!</div>,
 76 |               type: 'success'
 77 |             }})
 78 |             .then(res => {
 79 |               setTimeout(() => {
 80 |                props.deleteNotification({variables: {id: res.data.addNotification.id}})
 81 |              }, 1000);
 82 |             })
 83 |           },
 84 |           e => {
 85 |             const errors = e.graphQLErrors.map(error => error.message);
 86 |             props.updateNotification({variables: {
 87 |               message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
 88 |               type: 'alert'
 89 |             }})
 90 |             .then(res => {
 91 |               setTimeout(() => {
 92 |                props.deleteNotification({variables: {id: res.data.addNotification.id}})
 93 |              }, 1000);
 94 |             })
 95 |           }
 96 |         );
 97 |     }
 98 |   })
 99 | )(EditTitle);
100 | 


--------------------------------------------------------------------------------
/src/components/bin/archive.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import style from './style.css'
 3 | import { Icons, Button } from 'oce-components/build'
 4 | import Plan from "../../queries/getPlan";
 5 | import deleteProcess from "../../mutations/deleteProcess";
 6 | import { graphql, compose } from "react-apollo";
 7 | import { withHandlers } from 'recompose';
 8 | import updateNotification from "../../mutations/updateNotification";
 9 | import deleteNotification from "../../mutations/deleteNotification";
10 | 
11 | 
12 | const ArchiveProcess = (props) => (
13 |     <div>
14 |         {props.isDeletable
15 |         ? <div> <h5 className={style.h5}>Are you sure to delete the process?</h5>
16 |         <Button primary onClick={props.deleteProcess}>Delete</Button></div>
17 |         : <h5 className={style.h5}>The process is not deletable since events are already logged on.</h5>
18 |         }
19 |         
20 |     </div>
21 | )
22 | 
23 | export default compose(
24 |     graphql(deleteProcess, { name: "deleteProcessMutation" }),
25 |     graphql(updateNotification, {name: 'updateNotification'}),
26 |     graphql(deleteNotification, {name: 'deleteNotification'}),
27 | 
28 |     withHandlers({
29 |         deleteProcess: props => event => {
30 |             event.preventDefault()
31 |             props.deleteProcessMutation({
32 |                 variables: {
33 |                     token: localStorage.getItem("oce_token"),
34 |                     id: props.id
35 |                 },
36 |                 update: (store, { data }) => {
37 |                     let planProcessesCache = store.readQuery({
38 |                         query: Plan,
39 |                         variables: {
40 |                             token: localStorage.getItem("oce_token"),
41 |                             planId: Number(props.planId)
42 |                         }
43 |                     });
44 | 
45 |                     const processToDeleteIndex = planProcessesCache.viewer.plan.planProcesses.findIndex(
46 |                         proc => proc.id === props.id
47 |                     );
48 |                     planProcessesCache.viewer.plan.planProcesses.splice(processToDeleteIndex, 1)
49 |                     store.writeQuery({
50 |                         query: Plan,
51 |                         variables: {
52 |                             token: localStorage.getItem("oce_token"),
53 |                             planId: Number(props.planId)
54 |                         },
55 |                         data: planProcessesCache
56 |                     });
57 |                 }
58 |             })
59 |                 .then(
60 |                     data => {
61 |                         props.updateNotification({variables: {
62 |                         message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Process archived successfully!</div>,
63 |                         type: 'success'
64 |                         }})
65 |                         .then(res => {
66 |                         setTimeout(() => {
67 |                             props.deleteNotification({variables: {id: res.data.addNotification.id}})
68 |                         }, 1000);
69 |                         })
70 |                     },
71 |                     e => {
72 |                         const errors = e.graphQLErrors.map(error => error.message);
73 |                         props.updateNotification({variables: {
74 |                         message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
75 |                         type: 'alert'
76 |                         }})
77 |                         .then(res => {
78 |                             setTimeout(() => {
79 |                              props.deleteNotification({variables: {id: res.data.addNotification.id}})
80 |                            }, 1000);
81 |                           })
82 |                     }
83 |                 );
84 |         }
85 |     })
86 | )
87 | (ArchiveProcess);
88 | 


--------------------------------------------------------------------------------
/src/login/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { graphql, compose } from 'react-apollo'
 3 | import style from '../base.css'
 4 | import {Icons, Panel} from 'oce-components/build'
 5 | import { withFormik, Form, Field } from 'formik'
 6 | import * as Yup from 'yup'
 7 | import Alert from '../components/alert'
 8 | import LoginMutation from '../mutations/login'
 9 | import updateNotification from "../mutations/updateNotification";
10 | import deleteNotification from "../mutations/deleteNotification";
11 | 
12 | const Login = ({values, handleSubmit, touched, errors}) => {
13 |       return (
14 |           <div className={style.login_wrapper}>
15 |             <div className={style.wrapper_title}>
16 |               <h3><span aria-label='emoji' role='img'>🧙</span> agent.</h3>
17 |               <h4 data-testid='desc'>Your events - networked</h4>
18 |             </div>
19 |             <div className={style.login_container}>
20 |             <Panel title='login' icon={<Icons.Power width='18' height='18' color='#f0f0f0' />}>
21 |               <Form>
22 |                   <div>
23 |                       <Field placeholder='Insert your username' name='username' />
24 |                       { touched.username && errors.username && <Alert>{errors.username}</Alert> }
25 |                   </div>
26 |                    <div>
27 |                       <Field placeholder='Insert your password' name='password' type='password' />
28 |                       { touched.password && errors.password && <Alert>{errors.password}</Alert> }
29 |                   </div>
30 |               <button data-testid='login'>login</button>
31 |               </Form>
32 |               <a href='https://ocp.freedomcoop.eu/account/password/reset/' target='blank' className={style.wrapper_lost}>Password lost?</a>
33 |               <h5>Useful links</h5>
34 |               <ul>
35 |                   <li><a href='https://www.opencoopecosystem.net' target='blank'>Documentation</a></li>
36 |                   <li><a href='https://t.me/ocewelcome' target='blank'>Telegram</a></li>
37 |                   <li><a href='https://github.com/opencooperativeecosystem' target='blank'>Github</a></li>
38 |               </ul>
39 |             </Panel>
40 |           </div>
41 |         </div>
42 |     )
43 |   }
44 | 
45 | export default compose(
46 |     graphql(LoginMutation),
47 |     graphql(updateNotification, {name: 'updateNotification'}),
48 |     graphql(deleteNotification, {name: 'deleteNotification'}),
49 |     withFormik({
50 |         mapPropsToValues: () => ({ username: '', password: '' }),
51 |         validationSchema: Yup.object().shape({
52 |            username: Yup.string().required(),
53 |            password: Yup.string().min(4).required()
54 |         }),
55 |         handleSubmit: (values, {props, resetForm, setErrors, setSubmitting}) => {
56 |             props.mutate({variables: {username: values.username, password: values.password}})
57 |             .then ((data) => {
58 |               props.updateNotification({variables: {
59 |                   message: <div data-testid='success' className={style.message}><span><Icons.Bell width='18' height='18' color='white' /></span>Welcome :)</div>,
60 |                   type: 'success'
61 |               }
62 |               })
63 |               .then(res => {
64 |                 setTimeout(() => {
65 |                  props.deleteNotification({variables: {id: res.data.addNotification.id}})
66 |                }, 1000);
67 |               })
68 |               localStorage.setItem('oce_token', data.data.createToken.token)
69 |               localStorage.setItem('agent_id', data.data.createToken.id)
70 |               props.history.replace('/')
71 |             }, 
72 |             (e) => {
73 |                 const errors = e.graphQLErrors.map(error => error.message)
74 |                 props.updateNotification({variables: {
75 |                     message: <div data-testid='error' className={style.message}><span><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
76 |                     type: 'alert'
77 |                 }
78 |                 })
79 |                 .then(res => {
80 |                     setTimeout(() => {
81 |                      props.deleteNotification({variables: {id: res.data.addNotification.id}})
82 |                    }, 1000);
83 |                   })
84 |                 setSubmitting(false)
85 |              }
86 |           )
87 |         }
88 |     })
89 | )(Login)
90 | 
91 | 


--------------------------------------------------------------------------------
/src/templates/AppTemplate/index.js:
--------------------------------------------------------------------------------
  1 | import * as React from "react";
  2 | import { graphql } from "react-apollo";
  3 | import gql from "graphql-tag";
  4 | import style from "./style.css";
  5 | import { Route, withRouter } from "react-router-dom";
  6 | import Sidebar from "../../components/sidebar";
  7 | import { compose, withHandlers, withState } from "recompose";
  8 | import Canvas from "../../canvas/wrapper";
  9 | import Settings from "../../settings/wrapper";
 10 | import Agent from "../../agent/wrapper";
 11 | import Overview from "../../overview/wrapper";
 12 | import { PropsRoute } from "../../helpers/router";
 13 | import Validate from '../../validation_plan/wrapper'
 14 | import updateNotification from "../../mutations/updateNotification";
 15 | import deleteNotification from "../../mutations/deleteNotification";
 16 | import {LoadingMini} from '../../components/loading'
 17 | 
 18 | const AppTemplate = props => {
 19 |   return props.loading ? (
 20 |     <LoadingMini />
 21 |   ) : props.error ? (
 22 |     <p style={{ color: "#F00" }}>API error</p>
 23 |   ) : (
 24 |     <div className={style.surface}>
 25 |       <div className={style.content}>
 26 |         <div className={style.boards}>
 27 |           <div className={style.boards_main_content}>
 28 |             <div className={style.boards_canvas}>
 29 |               <div className={style.canvas}>
 30 |                 <Sidebar
 31 |                   handleTogglePanel={props.handleTogglePanel}
 32 |                   panel={props.panel}
 33 |                   data={props.data}
 34 |                   agents={props.data.agentRelationships}
 35 |                   history={props.history}
 36 |                 />
 37 |                 <div
 38 |                   className={
 39 |                     props.panel
 40 |                       ? style.container + " " + style.full
 41 |                       : style.container
 42 |                   }
 43 |                 >
 44 |                   <PropsRoute
 45 |                     exact
 46 |                     path={props.match.path}
 47 |                     component={Overview}
 48 |                     id={props.data.id}
 49 |                   />
 50 |                   <PropsRoute
 51 |                     path="/agent/:id"
 52 |                     component={Agent}
 53 |                     data={props}
 54 |                   />
 55 |                   <PropsRoute
 56 |                     exact
 57 |                     path="/canvas/:id"
 58 |                     component={Canvas}
 59 |                     relationships={props.data.agentRelationships}
 60 |                     agentId={props.data.id}
 61 |                   />
 62 |                   <PropsRoute
 63 |                     path="/canvas/:id/validate"
 64 |                     component={Validate}
 65 |                     relationships={props.data.agentRelationships}
 66 |                   />
 67 |                   <Route path="/settings" component={Settings} />
 68 |                 </div>
 69 |               </div>
 70 |             </div>
 71 |           </div>
 72 |         </div>
 73 |       </div>
 74 |     </div>
 75 |   );
 76 | };
 77 | 
 78 | const agentPlans = gql`
 79 |   query($token: String) {
 80 |     viewer(token: $token) {
 81 |       myAgent {
 82 |         id
 83 |         name
 84 |         image
 85 |         agentPlans {
 86 |           id
 87 |         }
 88 |         agentRelationships {
 89 |           relationship {
 90 |             label
 91 |             category
 92 |           }
 93 |           object {
 94 |             id
 95 |             name
 96 |             note
 97 |             image
 98 |           }
 99 |         }
100 |       }
101 |     }
102 |   }
103 | `;
104 | const App = withRouter(AppTemplate);
105 | 
106 | export default compose(
107 |   graphql(updateNotification, {name: 'updateNotification'}),
108 |   graphql(deleteNotification, {name: 'deleteNotification'}),
109 |   graphql(agentPlans, {
110 |     options: props => ({
111 |       variables: {
112 |         token: localStorage.getItem("oce_token")
113 |       }
114 |     }),
115 |     props: ({ ownProps, data: { viewer, loading, error, refetch } }) => ({
116 |       loading,
117 |       error,
118 |       refetch,
119 |       data: viewer ? viewer.myAgent : null
120 |     })
121 |   }),
122 |   withState("panel", "togglePanel", true),
123 |   withHandlers({
124 |     handleTogglePanel: props => event => {
125 |       props.togglePanel(!props.panel);
126 |     }
127 |   })
128 | )(App);
129 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "oce-dashboard",
  3 |   "version": "0.0.1",
  4 |   "private": true,
  5 |   "dependencies": {
  6 |     "apollo-boost": "0.1.1",
  7 |     "apollo-client": "2.2.8",
  8 |     "babel-core": "6.25.0",
  9 |     "babel-eslint": "7.2.3",
 10 |     "babel-jest": "20.0.3",
 11 |     "babel-loader": "7.1.1",
 12 |     "babel-preset-react-app": "^3.0.2",
 13 |     "babel-runtime": "6.26.0",
 14 |     "case-sensitive-paths-webpack-plugin": "2.1.1",
 15 |     "chalk": "1.1.3",
 16 |     "css-loader": "0.28.4",
 17 |     "dotenv": "4.0.0",
 18 |     "enzyme": "3.3.0",
 19 |     "enzyme-adapter-react-16": "1.1.1",
 20 |     "eslint": "4.4.1",
 21 |     "eslint-config-react-app": "^2.0.0",
 22 |     "eslint-loader": "1.9.0",
 23 |     "eslint-plugin-flowtype": "2.35.0",
 24 |     "eslint-plugin-import": "2.7.0",
 25 |     "eslint-plugin-jsx-a11y": "5.1.1",
 26 |     "eslint-plugin-react": "7.1.0",
 27 |     "extract-text-webpack-plugin": "3.0.0",
 28 |     "file-loader": "0.11.2",
 29 |     "formik": "0.11.11",
 30 |     "fs-extra": "3.0.1",
 31 |     "graphql": "0.13.1",
 32 |     "html-webpack-plugin": "2.29.0",
 33 |     "jest": "20.0.4",
 34 |     "lodash": "^4.17.4",
 35 |     "lost": "^8.2.0",
 36 |     "moment": "2.22.2",
 37 |     "object-assign": "4.1.1",
 38 |     "oce-components": "file:../oce-components",
 39 |     "polished": "1.9.2",
 40 |     "postcss-flexbugs-fixes": "3.2.0",
 41 |     "promise": "8.0.1",
 42 |     "prop-types": "15.5.10",
 43 |     "ramda": "^0.24.1",
 44 |     "react": "16.3.1",
 45 |     "react-accessible-accordion": "2.4.2",
 46 |     "react-addons-shallow-compare": "15.6.0",
 47 |     "react-apollo": "2.1.3",
 48 |     "react-datepicker": "1.5.0",
 49 |     "react-dev-utils": "^4.0.0",
 50 |     "react-dom": "16.3.1",
 51 |     "react-redux": "^5.0.6",
 52 |     "react-router-dom": "^4.2.2",
 53 |     "react-toastify": "4.0.2",
 54 |     "react-toggle-button": "2.2.0",
 55 |     "recompose": "^0.25.1",
 56 |     "redux": "^3.7.2",
 57 |     "redux-notifications": "4.0.1",
 58 |     "style-loader": "0.18.2",
 59 |     "styled-components": "3.2.6",
 60 |     "sw-precache-webpack-plugin": "0.11.4",
 61 |     "url-loader": "0.5.9",
 62 |     "webpack": "3.5.1",
 63 |     "webpack-dev-server": "2.7.1",
 64 |     "webpack-manifest-plugin": "1.2.1",
 65 |     "whatwg-fetch": "2.0.3",
 66 |     "yup": "0.25.1"
 67 |   },
 68 |   "devDependencies": {
 69 |     "autoprefixer": "^7.1.4",
 70 |     "enzyme-to-json": "3.3.4",
 71 |     "postcss": "^6.0.11",
 72 |     "postcss-cssnext": "^3.0.2",
 73 |     "postcss-font-magician": "^2.0.0",
 74 |     "postcss-import": "^10.0.0",
 75 |     "postcss-loader": "^2.0.6",
 76 |     "postcss-mixins": "^6.1.0",
 77 |     "postcss-nested": "^2.1.2",
 78 |     "postcss-simple-vars": "^4.1.0",
 79 |     "postcss-utilities": "^0.7.0",
 80 |     "style-loader": "0.18.2",
 81 |     "faker": "4.1.0",
 82 |     "puppeteer": "1.5.0"
 83 |   },
 84 |   "scripts": {
 85 |     "start": "node scripts/start.js",
 86 |     "build": "node scripts/build.js",
 87 |     "test": "jest",
 88 |     "debug": "NODE_ENV=development npm test",
 89 |     "deploy": "npm run build&&gh-pages -d build"
 90 |   },
 91 |   "jest": {
 92 |     "verbose": true,
 93 |     "collectCoverageFrom": [
 94 |       "src/**/*.{js,jsx}"
 95 |     ],
 96 |     "setupFiles": [
 97 |       "<rootDir>/config/polyfills.js"
 98 |     ],
 99 |     "testMatch": [
100 |       "<rootDir>/src/**/__tests__/**/*.js?(x)",
101 |       "<rootDir>/src/**/?(*.)(spec|test).js?(x)",
102 |       "<rootDir>/?(*.)(spec|test).js?(x)"
103 |     ],
104 |     "testEnvironment": "node",
105 |     "testURL": "http://localhost",
106 |     "transform": {
107 |       "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
108 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
109 |       "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
110 |     },
111 |     "transformIgnorePatterns": [
112 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
113 |     ],
114 |     "moduleNameMapper": {
115 |       "^react-native$": "react-native-web"
116 |     },
117 |     "moduleFileExtensions": [
118 |       "web.js",
119 |       "js",
120 |       "json",
121 |       "web.jsx",
122 |       "jsx",
123 |       "node"
124 |     ]
125 |   },
126 |   "babel": {
127 |     "presets": [
128 |       "react-app"
129 |     ],
130 |     "plugins": [
131 |       "transform-es2015-modules-commonjs"
132 |     ]
133 |   },
134 |   "eslintConfig": {
135 |     "extends": "react-app"
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (!isLocalhost) {
 36 |         // Is not local host. Just register service worker
 37 |         registerValidSW(swUrl);
 38 |       } else {
 39 |         // This is running on localhost. Lets check if a service worker still exists or not.
 40 |         checkValidServiceWorker(swUrl);
 41 |       }
 42 |     });
 43 |   }
 44 | }
 45 | 
 46 | function registerValidSW(swUrl) {
 47 |   navigator.serviceWorker
 48 |     .register(swUrl)
 49 |     .then(registration => {
 50 |       registration.onupdatefound = () => {
 51 |         const installingWorker = registration.installing;
 52 |         installingWorker.onstatechange = () => {
 53 |           if (installingWorker.state === 'installed') {
 54 |             if (navigator.serviceWorker.controller) {
 55 |               // At this point, the old content will have been purged and
 56 |               // the fresh content will have been added to the cache.
 57 |               // It's the perfect time to display a "New content is
 58 |               // available; please refresh." message in your web app.
 59 |               console.log('New content is available; please refresh.');
 60 |             } else {
 61 |               // At this point, everything has been precached.
 62 |               // It's the perfect time to display a
 63 |               // "Content is cached for offline use." message.
 64 |               console.log('Content is cached for offline use.');
 65 |             }
 66 |           }
 67 |         };
 68 |       };
 69 |     })
 70 |     .catch(error => {
 71 |       console.error('Error during service worker registration:', error);
 72 |     });
 73 | }
 74 | 
 75 | function checkValidServiceWorker(swUrl) {
 76 |   // Check if the service worker can be found. If it can't reload the page.
 77 |   fetch(swUrl)
 78 |     .then(response => {
 79 |       // Ensure service worker exists, and that we really are getting a JS file.
 80 |       if (
 81 |         response.status === 404 ||
 82 |         response.headers.get('content-type').indexOf('javascript') === -1
 83 |       ) {
 84 |         // No service worker found. Probably a different app. Reload the page.
 85 |         navigator.serviceWorker.ready.then(registration => {
 86 |           registration.unregister().then(() => {
 87 |             window.location.reload();
 88 |           });
 89 |         });
 90 |       } else {
 91 |         // Service worker found. Proceed as normal.
 92 |         registerValidSW(swUrl);
 93 |       }
 94 |     })
 95 |     .catch(() => {
 96 |       console.log(
 97 |         'No internet connection found. App is running in offline mode.'
 98 |       );
 99 |     });
100 | }
101 | 
102 | export function unregister() {
103 |   if ('serviceWorker' in navigator) {
104 |     navigator.serviceWorker.ready.then(registration => {
105 |       registration.unregister();
106 |     });
107 |   }
108 | }
109 | 


--------------------------------------------------------------------------------
/src/agent/style.css:
--------------------------------------------------------------------------------
  1 | .agent {
  2 |     lost-utility: clearfix;
  3 |     -webkit-user-select: none;
  4 |     -moz-user-select: none;
  5 |     -ms-user-select: none;
  6 |     user-select: none;
  7 |     white-space: nowrap;
  8 |     overflow-x: auto;
  9 |     overflow-y: hidden;
 10 |     position: absolute;
 11 |     top: 0;
 12 |     right: 0;
 13 |     bottom: 0;
 14 |     left: 0;
 15 | }
 16 | 
 17 | .agent_profile {
 18 |     @media screen and (max-width: 800px) {
 19 |         lost-column: 12/12;
 20 |         padding: 10px;
 21 |     }
 22 | }
 23 | 
 24 | .agent_info {
 25 |     lost-utility:clearfix;
 26 | }
 27 | 
 28 | .info_image {
 29 |     width: 80px;
 30 |     height: 80px;
 31 |     border-radius: 100%;
 32 |     margin: 0 auto;
 33 |     margin-top: 20px;
 34 |     background: #606060;
 35 | }
 36 | 
 37 | .info_title {
 38 |     text-align: center;
 39 |     font-size: 20px;
 40 |     font-weight: 500;
 41 |     letter-spacing: .5px;
 42 |     margin: 0;
 43 |     color: #F0F0F0;
 44 |     margin-top: 10px;
 45 |     
 46 | }
 47 | 
 48 | .plan_scope {
 49 |     margin: 0;
 50 |     padding: 0;
 51 |     margin-left: 10px;
 52 |     font-size: 13px;
 53 |     font-weight: 300;
 54 |     text-transform: lowercase;
 55 |     color: #fff;
 56 |   }
 57 |   
 58 | 
 59 |   .scope_list {
 60 |     list-style: none;
 61 |     padding: 0;
 62 |     margin: 0;
 63 |     /* border-bottom:1px solid #dadada; */
 64 |     lost-utility: clearfix;
 65 |     /* padding-bottom: 10px; */
 66 |   }
 67 |   
 68 | 
 69 |   .section {
 70 |     margin-top: 40px;
 71 |     lost-utility: clearfix;
 72 |     padding-bottom: 100px;
 73 |     lost-column: 1/1;
 74 |   }
 75 | 
 76 | 
 77 |   .scope_list li {
 78 |     color: #161515;
 79 |     font-weight: 400;
 80 |     letter-spacing: .5px;
 81 |     margin-right: 50px;
 82 |     cursor: pointer;
 83 |   }
 84 |   
 85 |   .scope_list li.list_active {
 86 |     color: #419BF9;
 87 |     font-weight: 500;
 88 |     position: relative;
 89 |     
 90 |   }
 91 |   .scope_list li.list_active:before {
 92 |     position: absolute;
 93 |     content: "";
 94 |     left: -10px;
 95 |     top: 0;
 96 |     bottom: 0px;
 97 |     width: 2px;
 98 |     font-weight: 500px;
 99 |     background: #419BF9;
100 |     display: block; 
101 |   }
102 |   
103 | 
104 | .sidebar_panel {
105 |     list-style: none;
106 |     padding: 0;
107 |     margin: 0;
108 |     margin-top: 20px;
109 | }
110 | 
111 | .sidebar_panel li {
112 |     margin-bottom: 25px;
113 |     font-size: 14px;
114 |     letter-spacing: .5px;
115 |     padding-left: 10px;
116 | }
117 | 
118 | .image_photo {
119 |     width: 80px;
120 |     height: 80px;
121 |     border-radius: 2px;
122 |     display: block;
123 |     background-size: cover;
124 | }
125 | 
126 | .info_note {
127 |     font-size: 14px;
128 |     margin:0;
129 |     line-height: 22px;
130 |     display: grid;
131 | }
132 | 
133 | 
134 | 
135 | 
136 | .agent_menu {
137 |     margin-top: 40px;
138 |     lost-column: 8/10;
139 |     lost-offset: 1/10;
140 |     padding-bottom: 10px;
141 |     border-bottom: 1px solid #DEDEDE;
142 | }
143 | 
144 | .menu_item {
145 |     display: inline-block;
146 |     margin: 0;
147 |     margin-right: 70px;
148 |     font-weight: 400;
149 |     color: #161515;
150 |     font-size: 14px
151 | }
152 | 
153 | .item_active {
154 |     position: relative;
155 |     font-weight: 500;
156 | } 
157 | 
158 | .item_active:after {
159 |     position: absolute;
160 |     content: "";
161 |     left: 0;
162 |     width: 100%;
163 |     height: 1px;
164 |     background: #161515;
165 |     display: block;
166 |     bottom: -11px;
167 | }
168 | 
169 | .agent_section {
170 |     lost-column: 8/10;
171 |     lost-offset: 1/10;
172 | }
173 | 
174 | .emptyBox {
175 |     font-size: 18px;
176 |     letter-spacing: .5px;
177 |     padding: 10px;
178 |     margin-top: 10px;
179 |     background: rgba(65, 155, 249, .2);
180 |     border: 1px solid rgba(65, 155, 249, .6);
181 | }
182 | 
183 | .agent_list {
184 |     
185 | }
186 | 
187 | .list_item {
188 |     background: #393F4F;
189 |     border-radius: 3px;
190 |     height: 60px;
191 |     margin-bottom: 10px;
192 |     lost-utility: clearfix;
193 |     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2)
194 | }
195 | 
196 | .list_item h5 {
197 |     float: left;
198 |     color: #F0F0F0;
199 |     font-size: 14px;
200 |     line-height: 40px;
201 |     font-weight: 500;
202 |     margin-top: 12px;
203 | }
204 | 
205 | .item_photo {
206 |     width: 40px;
207 |     height: 40px;
208 |     border-radius: 3px;
209 |     background: #292D37;
210 |     margin: 10px;
211 |     float: left;
212 | }
213 | 
214 | .item_photo img {
215 |     width: 40px;
216 |     height: 40px;
217 |     border-radius: 3px;
218 | 
219 | }
220 | 
221 | .resources_list {
222 | }


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | const fs = require('fs');
 18 | const fetch = require('node-fetch')
 19 | const chalk = require('chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const config = require('../config/webpack.config.dev');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | // We attempt to use the default port but if it is busy, we offer the user to
 48 | // run on a different port. `detect()` Promise resolves to the next free port.
 49 | choosePort(HOST, DEFAULT_PORT)
 50 |   .then(port => {
 51 |     if (port == null) {
 52 |       // We have not found a port.
 53 |       return;
 54 |     }
 55 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 56 |     const appName = require(paths.appPackageJson).name;
 57 |     const urls = prepareUrls(protocol, HOST, port);
 58 |     // Create a webpack compiler that is configured with custom messages.
 59 |     const compiler = createCompiler(webpack, config, appName, urls, useYarn);
 60 |     // Load proxy config
 61 |     const proxySetting = require(paths.appPackageJson).proxy;
 62 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
 63 |     // Serve webpack assets generated by the compiler over a web sever.
 64 |     const serverConfig = createDevServerConfig(
 65 |       proxyConfig,
 66 |       urls.lanUrlForConfig
 67 |     );
 68 |     const devServer = new WebpackDevServer(compiler, serverConfig);
 69 |     // Launch WebpackDevServer.
 70 |     devServer.listen(port, HOST, err => {
 71 |       if (err) {
 72 |         return console.log(err);
 73 |       }
 74 |       if (isInteractive) {
 75 |         clearConsole();
 76 |       }
 77 |       console.log(chalk.cyan('Starting the development server...\n'));
 78 |       openBrowser(urls.localUrlForBrowser);
 79 |     });
 80 | 
 81 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
 82 |       process.on(sig, function() {
 83 |         devServer.close();
 84 |         process.exit();
 85 |       });
 86 |     });
 87 |   })
 88 |   .catch(err => {
 89 |     if (err && err.message) {
 90 |       console.log(err.message);
 91 |     }
 92 |     process.exit(1);
 93 |   });
 94 | 
 95 | var uri = 'https://ocp.freedomcoop.eu/api/graph'
 96 | // var uri = 'https://testocp.freedomcoop.eu/api/graph'
 97 | 
 98 | fetch(uri, {
 99 |   method: 'POST',
100 |   headers: { 'Content-Type': 'application/json' },
101 |   body: JSON.stringify({
102 |     query: `
103 |       {
104 |         __schema {
105 |           types {
106 |             kind
107 |             name
108 |             possibleTypes {
109 |               name
110 |             }
111 |           }
112 |         }
113 |       }
114 |     `,
115 |   }),
116 | })
117 |   .then(result => result.json())
118 |   .then(result => {
119 |     // here we're filtering out any type information unrelated to unions or interfaces
120 |     const filteredData = result.data.__schema.types.filter(
121 |       type => type.possibleTypes !== null
122 |     )
123 |     result.data.__schema.types = filteredData
124 |     fs.writeFile('./src/fragmentTypes.json', JSON.stringify(result.data), err => {
125 |       if (err) console.error('Error writing fragmentTypes file', err);
126 |       console.log('Fragment types successfully extracted!');
127 |     })
128 |   })
129 | 


--------------------------------------------------------------------------------
/src/components/bin/editStart.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import style from './style.css'
  3 | import {Icons, Button} from 'oce-components/build'
  4 | import {Form, withFormik } from 'formik'
  5 | import * as Yup from 'yup'
  6 | import Alert from '../alert'
  7 | import updateNotification from "../../mutations/updateNotification";
  8 | import deleteNotification from "../../mutations/deleteNotification";
  9 | import Plan from "../../queries/getPlan";
 10 | import UpdateProcess from "../../mutations/updateProcess";
 11 | import { graphql, compose } from "react-apollo";
 12 | import DatePicker from "react-datepicker";
 13 | import moment from 'moment'
 14 | require("react-datepicker/dist/react-datepicker-cssmodules.css");
 15 | 
 16 | const EditStart = (props) => (
 17 |   <Form>
 18 |     <StartDate 
 19 |         value={props.values.start}
 20 |         onChange={props.setFieldValue}
 21 |         onBlur={props.setFieldTouched}
 22 |         error={props.errors.start}
 23 |         touched={props.touched.start}
 24 |         start={props.start}
 25 |         planStart={props.planStart}
 26 |         planDue={props.planDue}
 27 |     />
 28 |     <Button>Update Start</Button>
 29 |   </Form>
 30 | )
 31 | 
 32 | 
 33 | const StartDate = (props) => {
 34 |     const handleChange = value => {
 35 |       props.onChange('start', value);
 36 |     };
 37 |     return (
 38 |       <div className={style.dateWrapper}>
 39 |         <DatePicker
 40 |             selected={props.value}
 41 |             onChange={handleChange}
 42 |             dateFormat={'DD MMM YYYY'}
 43 |             minDate={moment(props.planStart, moment.ISO_8601)}
 44 |             maxDate={moment(props.planDue, moment.ISO_8601)}
 45 |         />
 46 |       {props.error && props.touched && <Alert>{props.error}</Alert>}
 47 |       </div>
 48 |     )
 49 |   }
 50 |   
 51 | 
 52 | export default compose(
 53 |     graphql(UpdateProcess, { name: "updateProcessMutation" }),
 54 |     graphql(updateNotification, {name: 'updateNotification'}),
 55 |     graphql(deleteNotification, {name: 'deleteNotification'}),
 56 |     withFormik({
 57 |       mapPropsToValues: (props) => ({ start: moment(props.start) }),
 58 |       validationSchema: Yup.object().shape({
 59 |          start: Yup.string().required()
 60 |       }),
 61 |       handleSubmit: (values, { props }) => {
 62 |         props
 63 |           .updateProcessMutation({
 64 |             variables: {
 65 |               token: localStorage.getItem("oce_token"),
 66 |               id: props.id,
 67 |               start: moment(values.start).format("YYYY-MM-DD"),
 68 |             },
 69 |             update: (store, { data }) => {
 70 |               let planProcessesCache = store.readQuery({
 71 |                 query: Plan,
 72 |                 variables: {
 73 |                   token: localStorage.getItem("oce_token"),
 74 |                   planId: Number(props.planId)
 75 |                 }
 76 |               });
 77 |     
 78 |               const processToUpdateIndex = planProcessesCache.viewer.plan.planProcesses.findIndex(
 79 |                 proc => proc.id === data.updateProcess.process.id
 80 |               );
 81 |               planProcessesCache.viewer.plan.planProcesses[
 82 |                 processToUpdateIndex
 83 |               ].plannedStart =
 84 |                 data.updateProcess.process.plannedStart;
 85 |               store.writeQuery({
 86 |                 query: Plan,
 87 |                 variables: {
 88 |                   token: localStorage.getItem("oce_token"),
 89 |                   planId: Number(props.planId)
 90 |                 },
 91 |                 data: planProcessesCache
 92 |               });
 93 |             }
 94 |           })
 95 |           .then(
 96 |             data => {
 97 |               props.updateNotification({variables: {
 98 |                 message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Bell width='18' height='18' color='white' /></span>Date updated successfully!</div>,
 99 |                 type: 'success'
100 |               }})
101 |               .then(res => {
102 |                 setTimeout(() => {
103 |                  props.deleteNotification({variables: {id: res.data.addNotification.id}})
104 |                }, 1000);
105 |               })
106 |             },
107 |             e => {
108 |               const errors = e.graphQLErrors.map(error => error.message);
109 |               props.updateNotification({variables: {
110 |                 message: <div style={{fontSize:'14px'}}><span style={{marginRight: '10px', verticalAlign: 'sub'}}><Icons.Cross width='18' height='18' color='white' /></span>{errors}</div>,
111 |                 type: 'alert'
112 |               }})
113 |               .then(res => {
114 |                 setTimeout(() => {
115 |                  props.deleteNotification({variables: {id: res.data.addNotification.id}})
116 |                }, 1000);
117 |               })
118 |             }
119 |           );
120 |       }
121 |     })
122 | ) 
123 | (EditStart);


--------------------------------------------------------------------------------
/src/components/sidebar/style.css:
--------------------------------------------------------------------------------
  1 | .sidebar {
  2 |     left: -270px;
  3 |     top: 0px;
  4 |     bottom: 0px;
  5 |     width: 280px;
  6 |     overflow: auto;
  7 |     z-index: 99999;
  8 |     margin: 0 5px;
  9 |     margin-left: 5px;
 10 |     height: 100%;
 11 |     -webkit-box-sizing: border-box;
 12 |     box-sizing: border-box;
 13 |     display: inline-block;
 14 |     vertical-align: top;
 15 |     white-space: nowrap;
 16 |     position: relative;
 17 | }
 18 | 
 19 | .sidebar_menu_collapsed {
 20 |     width: 40px;
 21 | }
 22 | 
 23 | .sidebar_menu_collapsed .menu_icon {
 24 |     width: 40px !important;
 25 | }
 26 | 
 27 | .visible {
 28 |     left: -10px;
 29 | }
 30 | 
 31 | .sidebar_menu {
 32 |     background: #393F4F;
 33 |     border-radius: 3px;
 34 |     height: 40px;
 35 |     padding: 0;
 36 |     lost-utility: clearfix;
 37 | }
 38 | 
 39 | .sidebar_menu .menu_icon {
 40 |     lost-column: 1/4;
 41 |     vertical-align: middle;
 42 |     text-align: center;
 43 |     height: 100%;
 44 |     line-height: 52px;
 45 |     cursor: pointer;
 46 | }
 47 | 
 48 | .menu_icon:hover {
 49 |     background: #292D37
 50 | }
 51 | 
 52 | .icon_active {
 53 |     background: #292D37
 54 | }
 55 | 
 56 | .sidebar_header {
 57 |   background: #393F4F;
 58 |   margin-top: 10px;
 59 |   border-radius: 3px;
 60 |   padding: 15px;
 61 |   position: absolute;
 62 |   top: 40px;
 63 |   left: 0;
 64 |   right: 0;
 65 |   bottom: 0;
 66 | }
 67 | 
 68 | .sidebar_header .header_profile {
 69 |     lost-utility: clearfix;
 70 |     margin-top: 0px;
 71 |     height: 30px;
 72 |     line-height: 30px;
 73 | }
 74 | 
 75 | .sidebar_header .header_profile h3 {
 76 |     font-size: 16px;
 77 |     letter-spacing: 1px;
 78 |     float: left;
 79 |     font-weight: 500;
 80 |     line-height: 30px;
 81 |     margin: 0;
 82 |     margin-left: 10px;
 83 |     color: #F0F0F0
 84 | }
 85 | 
 86 | .sidebar_header .header_profile .data_image {
 87 |     height: 30px;
 88 |     width: 30px;
 89 |     border-radius: 2px;
 90 |     float: left;
 91 | }
 92 | 
 93 | .sidebar_header .header_profile .data_image img {
 94 |     height: 30px;
 95 |     width: 30px;
 96 |     border-radius: 2px;
 97 | }
 98 | 
 99 | .sidebar_section {
100 |     /* padding: 20px; */
101 | }
102 | 
103 | .sidebar_section .section_list {
104 |     padding: 0;
105 |     list-style: none;
106 |     margin: 0;
107 |     margin-top: 10px;
108 | }
109 | 
110 | .section_list {
111 |     margin: 0;
112 |     padding: 0;
113 |     margin-top: 20px;
114 | }
115 | 
116 | .section_list li {
117 |     padding: 0;
118 |     margin: 0;
119 |     display: block;
120 | }
121 | 
122 | .section_list li a {
123 |     font-size: 13px;
124 |     font-weight: 400;
125 |     letter-spacing: 1px;
126 |     text-decoration: none;
127 |     height: 40px;
128 |     line-height:40px;
129 |     color: #F0F0F0;
130 |     text-transform: uppercase;
131 |     position: relative;
132 | }
133 | 
134 | .section_list li a.active {
135 |   color: #419BF9;
136 | }
137 | .section_list li a.active:before {
138 |     position: absolute;
139 |     content: "";
140 |     width: 2px;
141 |     height: 100%;
142 |     display: block;
143 |     background: #419BF9;
144 |     left: -15px;
145 |     top: 0;
146 | }
147 | 
148 | .section_planCreation {
149 |     margin-top: 16px;
150 | }
151 | 
152 | 
153 | .planCreation_title {
154 |     color: #d9e1e8;
155 |     margin: 0;
156 |     margin-bottom: 8px;
157 |     margin-top: 24px;
158 |     font-size: 14px;
159 |     font-weight: 400;
160 |     letter-spacing: .5px;
161 | }
162 | 
163 | 
164 | .form_button {
165 |     float: right;
166 | }
167 | 
168 | .form_button button {
169 |     border-radius: 0;
170 |     border-bottom-right-radius: 3px;
171 | }
172 | 
173 | .form_input{
174 |     /* margin-bottom: 8px; */
175 |     border-bottom: 1px solid rgba(54,54,54, .1)
176 | }
177 | .form_input::placeholder {
178 |     font-size: 13px;
179 |     color: #606884;
180 | }
181 | 
182 | .form_note {
183 |     height: 150px;
184 | }
185 | 
186 | .formPlanWrapper {
187 |     height: 186px;
188 |     background: white;
189 |     border-radius: 3px;
190 | }
191 | 
192 | .planCreation_wrapper {
193 |     background: #f0f0f0;
194 |     border-radius: 3px;
195 | }
196 | 
197 | 
198 | .dates {
199 |     background: #ebebeb;
200 |     height: 36px;
201 |     border-bottom-left-radius: 3px;
202 |     border-bottom-right-radius: 3px;
203 | }
204 | 
205 | .dateWrapper {
206 |    margin-top: 6px;
207 |    margin-left: 5px;
208 |    display: inline-block;
209 |   }
210 |   
211 |   .dateName {
212 |     margin: 0;
213 |     float: left;
214 |     margin-left: 5px;
215 |     padding-right: 0px;
216 |     font-weight: 400;
217 |     color: #707b97;
218 |     letter-spacing: .5px;
219 |     font-size: 14px;
220 |     line-height: 21px;
221 |     font-weight: 500;
222 |   }
223 |   
224 |   .dateWrapper > div:first-of-type {
225 |     float: left;
226 |     border: none;
227 |   }
228 |   
229 |   .dateWrapper div input {
230 |     border: none;
231 |     background: none;
232 |     text-indent: 10px;
233 |     font-size: 13px;
234 |     color: #707b97;
235 |     font-weight: 500;
236 |     text-align: left;
237 |     width: 100px;
238 |     padding: 0;
239 |     margin: 0;
240 |     text-indent: 0;
241 |     margin-left: 5px;
242 |     text-decoration: underline;
243 |   }


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 4 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 5 | const config = require('./webpack.config.dev');
 6 | const paths = require('./paths');
 7 | 
 8 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 9 | const host = process.env.HOST || '0.0.0.0';
10 | 
11 | module.exports = function(proxy, allowedHost) {
12 |   return {
13 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
14 |     // websites from potentially accessing local content through DNS rebinding:
15 |     // https://github.com/webpack/webpack-dev-server/issues/887
16 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
17 |     // However, it made several existing use cases such as development in cloud
18 |     // environment or subdomains in development significantly more complicated:
19 |     // https://github.com/facebookincubator/create-react-app/issues/2271
20 |     // https://github.com/facebookincubator/create-react-app/issues/2233
21 |     // While we're investigating better solutions, for now we will take a
22 |     // compromise. Since our WDS configuration only serves files in the `public`
23 |     // folder we won't consider accessing them a vulnerability. However, if you
24 |     // use the `proxy` feature, it gets more dangerous because it can expose
25 |     // remote code execution vulnerabilities in backends like Django and Rails.
26 |     // So we will disable the host check normally, but enable it if you have
27 |     // specified the `proxy` setting. Finally, we let you override it if you
28 |     // really know what you're doing with a special environment variable.
29 |     disableHostCheck:
30 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
31 |     // Enable gzip compression of generated files.
32 |     compress: true,
33 |     // Silence WebpackDevServer's own logs since they're generally not useful.
34 |     // It will still show compile warnings and errors with this setting.
35 |     clientLogLevel: 'none',
36 |     // By default WebpackDevServer serves physical files from current directory
37 |     // in addition to all the virtual build products that it serves from memory.
38 |     // This is confusing because those files won’t automatically be available in
39 |     // production build folder unless we copy them. However, copying the whole
40 |     // project directory is dangerous because we may expose sensitive files.
41 |     // Instead, we establish a convention that only files in `public` directory
42 |     // get served. Our build script will copy `public` into the `build` folder.
43 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
44 |     // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
45 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
46 |     // Note that we only recommend to use `public` folder as an escape hatch
47 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
48 |     // for some reason broken when imported through Webpack. If you just want to
49 |     // use an image, put it in `src` and `import` it from JavaScript instead.
50 |     contentBase: paths.appPublic,
51 |     // By default files from `contentBase` will not trigger a page reload.
52 |     watchContentBase: true,
53 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
54 |     // for the WebpackDevServer client so it can learn when the files were
55 |     // updated. The WebpackDevServer client is included as an entry point
56 |     // in the Webpack development configuration. Note that only changes
57 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
58 |     hot: true,
59 |     // It is important to tell WebpackDevServer to use the same "root" path
60 |     // as we specified in the config. In development, we always serve from /.
61 |     publicPath: config.output.publicPath,
62 |     // WebpackDevServer is noisy by default so we emit custom message instead
63 |     // by listening to the compiler events with `compiler.plugin` calls above.
64 |     quiet: true,
65 |     // Reportedly, this avoids CPU overload on some systems.
66 |     // https://github.com/facebookincubator/create-react-app/issues/293
67 |     watchOptions: {
68 |       ignored: /node_modules/,
69 |     },
70 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
71 |     https: protocol === 'https',
72 |     host: host,
73 |     overlay: false,
74 |     historyApiFallback: {
75 |       // Paths with dots should still use the history fallback.
76 |       // See https://github.com/facebookincubator/create-react-app/issues/387.
77 |       disableDotRule: true,
78 |     },
79 |     public: allowedHost,
80 |     proxy,
81 |     setup(app) {
82 |       // This lets us open files from the runtime error overlay.
83 |       app.use(errorOverlayMiddleware());
84 |       // This service worker file is effectively a 'no-op' that will reset any
85 |       // previous service worker registered for the same host:port combination.
86 |       // We do this in development to avoid hitting the production cache if
87 |       // it used the same host and port.
88 |       // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
89 |       app.use(noopServiceWorkerMiddleware());
90 |     },
91 |   };
92 | };
93 | 


--------------------------------------------------------------------------------
/src/components/bin/editScope.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import style from "./style.css";
  3 | import { Select, Icons, Button } from "oce-components/build";
  4 | import { Form, Field, withFormik } from "formik";
  5 | import * as Yup from "yup";
  6 | import Alert from "../alert";
  7 | import Plan from "../../queries/getPlan";
  8 | import UpdateProcess from "../../mutations/updateProcess";
  9 | import { graphql, compose } from "react-apollo";
 10 | import updateNotification from "../../mutations/updateNotification";
 11 | import deleteNotification from "../../mutations/deleteNotification";
 12 | 
 13 | const EditScope = props => {
 14 | console.log(props.relationships)
 15 | //   console.log(props.scope)
 16 | //   let updateRelationships = props.relationships.map((rel, i) => {
 17 | //       let select
 18 | //     if (Number(rel.object.id) !== Number(props.scope)) {
 19 | //         select = <option key={i} value={rel.object.id}>
 20 | //           {rel.object.name}
 21 | //         </option>
 22 | //     } else {
 23 | //         select = <option selected='selected' key={i} value={rel.object.id}>
 24 | //           {rel.object.name}
 25 | //         </option>
 26 | //     }
 27 | //     return select
 28 | //   })
 29 | //   console.log(updateRelationships)
 30 |   return (
 31 |   <Form>
 32 |     <span className={style.form_scope}>
 33 |       <Field
 34 |         name="scope"
 35 |         render={({ field /* _form */ }) => (
 36 |           <Select defaultValue={props.scope} name={field.name} onChange={field.onChange}>
 37 |             {props.relationships.map(opt => opt)}
 38 |           </Select>
 39 |         )}
 40 |       />
 41 |       {props.errors.scope && props.touched.scope && <Alert>{props.errors.scope}</Alert>}
 42 |     </span>
 43 |     <Button>Update scope</Button>
 44 |   </Form>
 45 | )};
 46 | 
 47 | export default compose(
 48 |   graphql(UpdateProcess, { name: "updateProcessMutation" }),
 49 |   graphql(updateNotification, { name: "updateNotification" }),
 50 |   graphql(deleteNotification, { name: "deleteNotification" }),
 51 |   withFormik({
 52 |     mapPropsToValues: props => ({ scope: props.scope || "" }),
 53 |     validationSchema: Yup.object().shape({
 54 |       scope: Yup.string().required()
 55 |     }),
 56 |     handleSubmit: (values, { props, resetForm, setErrors, setSubmitting }) => {
 57 |       props
 58 |         .updateProcessMutation({
 59 |           variables: {
 60 |             token: localStorage.getItem("oce_token"),
 61 |             id: props.id,
 62 |             scopeId: values.scope
 63 |           },
 64 |           update: (store, { data }) => {
 65 |             let planProcessesCache = store.readQuery({
 66 |               query: Plan,
 67 |               variables: {
 68 |                 token: localStorage.getItem("oce_token"),
 69 |                 planId: Number(props.planId)
 70 |               }
 71 |             });
 72 | 
 73 |             const processToUpdateIndex = planProcessesCache.viewer.plan.planProcesses.findIndex(
 74 |               proc => proc.id === data.updateProcess.process.id
 75 |             );
 76 |             planProcessesCache.viewer.plan.planProcesses[
 77 |               processToUpdateIndex
 78 |             ].scope =
 79 |               data.updateProcess.process.scope;
 80 |             store.writeQuery({
 81 |               query: Plan,
 82 |               variables: {
 83 |                 token: localStorage.getItem("oce_token"),
 84 |                 planId: Number(props.planId)
 85 |               },
 86 |               data: planProcessesCache
 87 |             });
 88 |           }
 89 |         })
 90 |         .then(
 91 |           data => {
 92 |             props
 93 |               .updateNotification({
 94 |                 variables: {
 95 |                   message: (
 96 |                     <div style={{ fontSize: "14px" }}>
 97 |                       <span
 98 |                         style={{ marginRight: "10px", verticalAlign: "sub" }}
 99 |                       >
100 |                         <Icons.Bell width="18" height="18" color="white" />
101 |                       </span>Scope updated successfully!
102 |                     </div>
103 |                   ),
104 |                   type: "success"
105 |                 }
106 |               })
107 |               .then(res => {
108 |                 setTimeout(() => {
109 |                   props.deleteNotification({
110 |                     variables: { id: res.data.addNotification.id }
111 |                   });
112 |                 }, 1000);
113 |               });
114 |           },
115 |           e => {
116 |             const errors = e.graphQLErrors.map(error => error.message);
117 |             props
118 |               .updateNotification({
119 |                 variables: {
120 |                   message: (
121 |                     <div style={{ fontSize: "14px" }}>
122 |                       <span
123 |                         style={{ marginRight: "10px", verticalAlign: "sub" }}
124 |                       >
125 |                         <Icons.Cross width="18" height="18" color="white" />
126 |                       </span>
127 |                       {errors}
128 |                     </div>
129 |                   ),
130 |                   type: "alert"
131 |                 }
132 |               })
133 |               .then(res => {
134 |                 setTimeout(() => {
135 |                   props.deleteNotification({
136 |                     variables: { id: res.data.addNotification.id }
137 |                   });
138 |                 }, 1000);
139 |               });
140 |           }
141 |         );
142 |     }
143 |   })
144 | )(EditScope);
145 | 


--------------------------------------------------------------------------------