Rename Project to Activity in the 3W country view

IFRCGo · Apr 29, 2020 · 08b831b · 08b831b
1 parent 4358c42
commit 08b831b
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 35 deletions.
diff --git a/app/assets/scripts/views/ThreeW/export-headers.js b/app/assets/scripts/views/ThreeW/export-headers.js
@@ -28,12 +28,12 @@ const exportHeaders = [
     modifier: r => operationTypes[r.operation_type],
   },
   {
-    title: 'Programme Type',
+    title: 'Programme type',
     key: 'programme_type',
     modifier: r => programmeTypes[r.programme_type],
   },
   {
-    title: 'Project Name',
+    title: 'Activity name',
     key: 'name',
   },
   {

diff --git a/app/assets/scripts/views/ThreeW/project-details.js b/app/assets/scripts/views/ThreeW/project-details.js
@@ -93,7 +93,7 @@ class ProjectDetails extends React.PureComponent {
             <div className='tc-section'>
               <TextOutput
                 className='tc-project-name'
-                label='Project name'
+                label='Activity name'
                 value={name}
               />
             </div>
@@ -109,7 +109,7 @@ class ProjectDetails extends React.PureComponent {
             </div>
             <div className='tc-section'>
               <TextOutput
-                label='Project district'
+                label='Activity district'
                 value={project_district ? project_district_detail.name : 'Countrywide' }
               />
             </div>

diff --git a/app/assets/scripts/views/ThreeW/project-form.js b/app/assets/scripts/views/ThreeW/project-form.js
@@ -16,6 +16,7 @@ import TextInput from '../../components/form-elements/text-input';
 import NumberInput from '../../components/form-elements/number-input';
 import DateInput from '../../components/form-elements/date-input';
 import Checkbox from '../../components/form-elements/faram-checkbox';
+import TextOutput from '../../components/text-output';
 
 import {
   getCountries,
@@ -29,16 +30,13 @@ import {
 } from '../../utils/field-report-constants';
 
 import {
-  statusList,
+  // statusList,
   statuses,
   sectorList,
   secondarySectorInputValues,
   secondarySectorList,
-  sectorInputValues,
   programmeTypeList,
-  programmeTypes,
   operationTypeList,
-  operationTypes,
   projectVisibilityList,
 } from '../../utils/constants';
 
@@ -52,10 +50,12 @@ const positiveIntegerCondition = (value) => {
 
 const compareString = (a, b) => a.label.localeCompare(b.label);
 
+/*
 const statusOptions = statusList.map(p => ({
   value: p.key,
   label: p.title,
 })).sort(compareString);
+*/
 
 const sectorOptions = sectorList.map(p => ({
   value: p.inputValue,
@@ -170,9 +170,9 @@ class ProjectForm extends React.PureComponent {
         dtype: projectData.dtype,
         project_district: projectData.project_district ? projectData.project_district : 'all',
         name: projectData.name,
-        operation_type: operationTypes[projectData.operation_type],
-        primary_sector: sectorInputValues[projectData.primary_sector],
-        programme_type: programmeTypes[projectData.programme_type],
+        operation_type: projectData.operation_type,
+        primary_sector: projectData.primary_sector,
+        programme_type: projectData.programme_type,
         end_date: projectData.end_date,
         start_date: projectData.start_date,
         reached_other: projectData.reached_other || undefined,
@@ -182,7 +182,7 @@ class ProjectForm extends React.PureComponent {
         reporting_ns: projectData.reporting_ns,
         secondary_sectors: projectData.secondary_sectors ? projectData.secondary_sectors.map(d => secondarySectorInputValues[d]) : [],
         is_project_completed: projectData.status === 2,
-        status: statuses[projectData.status],
+        status: projectData.status,
         target_other: projectData.target_other || undefined,
         target_female: projectData.target_female || undefined,
         target_male: projectData.target_male || undefined,
@@ -601,7 +601,7 @@ class ProjectForm extends React.PureComponent {
         )}
 
         <InputSection
-          title='Project name*'
+          title='Activity name*'
         >
           <TextInput
             faramElementName='name'
@@ -644,24 +644,21 @@ class ProjectForm extends React.PureComponent {
         <InputSection
           className='multi-input-section'
           title='Budget and status*'
-          helpText='"Project status" is automatically calculated based on the values from "Start and end dates" above and can be marked as complete from the "Completed" checkbox.'
+          helpText='"Activity status" is automatically calculated based on the values from "Start and end dates" above and can be marked as complete from the "Completed" checkbox.'
         >
           <NumberInput
-            label='Project budget (CHF)'
+            label='Activity budget (CHF)'
             faramElementName='budget_amount'
           />
           <div>
-            <SelectInput
-              disabled
-              faramElementName='status'
-              className='project-form-select'
-              label='Project status'
-              options={statusOptions}
-            />
             <Checkbox
               label="Completed"
               faramElementName="is_project_completed"
             />
+            <TextOutput
+              label='Activity status'
+              value={statuses[faramValues.status]}
+            />
           </div>
         </InputSection>
 
@@ -713,7 +710,7 @@ class ProjectForm extends React.PureComponent {
           />
         </InputSection>
         <InputSection
-          title='Project visibility*'
+          title='Activity visibility*'
         >
           <SelectInput
             faramElementName='visibility'

diff --git a/app/assets/scripts/views/ThreeW/stats/region-overview.js b/app/assets/scripts/views/ThreeW/stats/region-overview.js
@@ -5,10 +5,11 @@ import {
   listToGroupList,
 } from '@togglecorp/fujs';
 
-const ProgressBar = ({
-  value,
-  max,
-}) => {
+const ProgressBar = (p) => {
+  const {
+    value,
+    max,
+  } = p;
   const width = 100 * value / max;
 
   return (
@@ -21,9 +22,15 @@ const ProgressBar = ({
   );
 };
 
-const Scale = ({ max }) => {
+const MAX_SCALE_STOPS = 5;
+
+function Scale (p) {
+  const { max } = p;
   const numbers = [];
-  for (let i = 0; i <= max; i++) {
+
+  const diff = max / MAX_SCALE_STOPS;
+
+  for (let i = 0; i <= max; i += diff) {
     numbers.push(i);
   }
 
@@ -32,7 +39,7 @@ const Scale = ({ max }) => {
       { numbers.map(n => <div key={n}>{n}</div>) }
     </div>
   );
-};
+}
 
 export default class RegionOverview extends React.PureComponent {
   render () {
@@ -49,14 +56,16 @@ export default class RegionOverview extends React.PureComponent {
 
     const projectDistrictList = Object.keys(groupedProjectList);
     const maxProjects = Math.max(...projectDistrictList.map(d => groupedProjectList[d].length));
+    const numBuckets = Math.ceil(maxProjects / MAX_SCALE_STOPS);
+    const max = numBuckets * MAX_SCALE_STOPS;
 
     return (
       <div className={_cs(className, 'three-w-stats-region-overview')}>
         <h4>
           Regions
         </h4>
         <Scale
-          max={maxProjects}
+          max={max}
         />
         <div>
           { projectDistrictList.map(d => {
@@ -69,11 +78,11 @@ export default class RegionOverview extends React.PureComponent {
                 className='three-w-region-district'
               >
                 <div>
-                  {regionName} ({p.length} projects)
+                  {regionName} ({p.length} activities)
                 </div>
                 <ProgressBar
                   value={p.length}
-                  max={maxProjects}
+                  max={max}
                 />
               </div>
             );

diff --git a/app/assets/scripts/views/ThreeW/table.js b/app/assets/scripts/views/ThreeW/table.js
@@ -42,7 +42,7 @@ export default class ProjectListTable extends React.PureComponent {
       },
       {
         key: 'name',
-        label: 'Project name',
+        label: 'Activity name',
       },
       {
         key: 'reporting_ns',

diff --git a/app/assets/styles/components/_common.scss b/app/assets/styles/components/_common.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  overflow: auto;
 
   .tc-header {
     display: flex;
@@ -50,7 +51,8 @@
 
     .tc-select-label {
       padding: 0;
-      font-size: 0.8rem;
+      font-size: $font-size-sm;
+      text-transform: uppercase;
     }
 
     .tc-select-input {
@@ -59,6 +61,20 @@
     }
   }
 
+  .tc-raw-input-label {
+    padding: 0;
+    font-size: $font-size-sm;
+    text-transform: uppercase;
+  }
+
+  .tc-faram-checkbox {
+    margin-top: 12px;
+  }
+
+  .tc-text-output {
+    padding: 3px;
+  }
+
   .budget-input-container {
     display: flex;
   }