Merge pull request #719 from mercycorps/2820-editable-program-admin-l…

…ight Added a function to alpa sort the selected options for country, outco…
mercycorps · Oct 21, 2022 · 53259a1 · 53259a1
2 parents 316c64f + c16b25a
commit 53259a1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/js/pages/tola_management_pages/program/components/edit_program_profile.js b/js/pages/tola_management_pages/program/components/edit_program_profile.js
@@ -35,8 +35,8 @@ export default class EditProgramProfile extends React.Component {
     }
 
     componentDidMount() {
-        // Set the form to editable for demo, dev, dev2, and localhost servers
-        let editableEnv = ["demo", "dev", "local"].reduce((editable, env) => {
+        // Set the form to editable for demo, dev2, dev, and localhost servers
+        let editableEnv = ["demo", "dev2", "dev", "local"].reduce((editable, env) => {
             if (!editable) editable = window.location.href.includes(env);
             return editable;
         }, false)
@@ -184,6 +184,19 @@ export default class EditProgramProfile extends React.Component {
         return listArray;
     }
 
+    // Function to create a alphabetically (by index order from backend) sorted selected list to display data from thier options
+    handleSelected = (selected, options) => {
+        let resultsObj = {};
+        selected.map((id) => {
+            let index;
+            let foundOption = options.find((option, idx) => {
+                index = idx;
+                return option.value == id;
+            });
+            resultsObj[index] = foundOption;
+        })
+        return Object.values(resultsObj);
+    }
 
 
     // ***** Validations *****
@@ -309,9 +322,9 @@ export default class EditProgramProfile extends React.Component {
     // ***** Render Componenent *****
     render() {
         const formdata = this.state.managed_data;
-        const selectedCountries = formdata.country.map(x=>this.props.countryOptions.find(y=>y.value==x));
-        const selectedIDAASectors = formdata.idaa_sector.map(x=>this.props.idaaSectorOptions.find(y=>y.value==x));
-        const selectedOutcomeThemes = formdata.idaa_outcome_theme.map(x=>this.props.idaaOutcomeThemesOptions.find(y=>y.value==x));
+        const selectedCountries = this.handleSelected(formdata.country, this.props.countryOptions);
+        const selectedIDAASectors = this.handleSelected(formdata.idaa_sector, this.props.idaaSectorOptions);
+        const selectedOutcomeThemes = this.handleSelected(formdata.idaa_outcome_theme, this.props.idaaOutcomeThemesOptions);
 
         return (
             <div className="tab-pane--react">

diff --git a/js/pages/tola_management_pages/program/views.js b/js/pages/tola_management_pages/program/views.js
@@ -209,7 +209,10 @@ export const IndexView = observer(
                 </header>
                 <div className="admin-list__controls">
                     <BulkActions primaryOptions={bulk_actions.primary_options} secondaryOptions={bulk_actions.secondary_options}/>
-                    {["demo", "dev", "local"].reduce((editable, env) => { if(!editable) return editable = window.location.href.includes(env) }, false) &&
+                    {["demo", "dev2", "dev", "local"].reduce((editable, env) => { 
+                        if(!editable) editable = window.location.href.includes(env)
+                        return editable;
+                    }, false) &&
                         <div className="controls__buttons">
                             <a href="#" className="btn btn-link btn-add" tabIndex="0" onClick={() => store.createProgram()}>
                                 <i className="fas fa-plus-circle"/>{gettext("Add Program")}