From 1181082354af0b9f618417d79cfd920ee7c8a2be Mon Sep 17 00:00:00 2001
From: Andre Thomas <anthomas@mercycorps.org>
Date: Fri, 21 Oct 2022 15:36:35 -0400
Subject: [PATCH 1/3] Added a function to alpa sort the selected options for
 country, outcome themes, and sectors.

---
 .../components/edit_program_profile.js        | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 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
index 5f2ae12eb..edc696d6e 100644
--- a/js/pages/tola_management_pages/program/components/edit_program_profile.js
+++ b/js/pages/tola_management_pages/program/components/edit_program_profile.js
@@ -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">

From 70fbad85c128137e96762cdce084af7f1474ba4b Mon Sep 17 00:00:00 2001
From: Andre Thomas <anthomas@mercycorps.org>
Date: Fri, 21 Oct 2022 16:00:32 -0400
Subject: [PATCH 2/3] Added dev2 to editable list.

---
 .../program/components/edit_program_profile.js                  | 2 +-
 js/pages/tola_management_pages/program/views.js                 | 2 +-
 2 files changed, 2 insertions(+), 2 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
index edc696d6e..a70dcb6cc 100644
--- a/js/pages/tola_management_pages/program/components/edit_program_profile.js
+++ b/js/pages/tola_management_pages/program/components/edit_program_profile.js
@@ -36,7 +36,7 @@ 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) => {
+        let editableEnv = ["demo", "dev2", "dev", "local"].reduce((editable, env) => {
             if (!editable) editable = window.location.href.includes(env);
             return editable;
         }, false)
diff --git a/js/pages/tola_management_pages/program/views.js b/js/pages/tola_management_pages/program/views.js
index 79fb0ea52..210e9f337 100644
--- a/js/pages/tola_management_pages/program/views.js
+++ b/js/pages/tola_management_pages/program/views.js
@@ -209,7 +209,7 @@ 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) return editable = window.location.href.includes(env) }, 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")}

From c16b25a4e1dc03289e254bb6021fdc8c5c89ad21 Mon Sep 17 00:00:00 2001
From: Andre Thomas <anthomas@mercycorps.org>
Date: Fri, 21 Oct 2022 16:07:51 -0400
Subject: [PATCH 3/3] Update editable logic

---
 .../program/components/edit_program_profile.js               | 2 +-
 js/pages/tola_management_pages/program/views.js              | 5 ++++-
 2 files changed, 5 insertions(+), 2 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
index a70dcb6cc..f0d758dd0 100644
--- 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,7 +35,7 @@ export default class EditProgramProfile extends React.Component {
     }
 
     componentDidMount() {
-        // Set the form to editable for demo, dev, dev2, and localhost servers
+        // 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;
diff --git a/js/pages/tola_management_pages/program/views.js b/js/pages/tola_management_pages/program/views.js
index 210e9f337..877826bed 100644
--- 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", "dev2", "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")}