Fix program setup's new program button action

seed/static/seed/js/controllers/program_setup_controller.js

@@ -78,9 +78,9 @@ angular.module('BE.seed.controller.program_setup', []).controller('program_setup
       }
       if (id != null) {
         $scope.selected_compliance_metric = $scope.compliance_metrics.find((item) => item.id === id);
-        $scope.available_x_axis_columns = () => $scope.x_axis_columns.filter(({ id }) => !$scope.selected_compliance_metric?.x_axis_columns.includes(id));
-        $scope.available_cycles = () => $scope.cycles.filter(({ id }) => !$scope.selected_compliance_metric?.cycles.includes(id));
       }
+      $scope.available_x_axis_columns = () => $scope.x_axis_columns.filter(({ id }) => !$scope.selected_compliance_metric?.x_axis_columns.includes(id));
+      $scope.available_cycles = () => $scope.cycles.filter(({ id }) => !$scope.selected_compliance_metric?.cycles.includes(id));
     };
 
     $scope.init_selected_metric($scope.id);
@@ -212,27 +212,35 @@ angular.module('BE.seed.controller.program_setup', []).controller('program_setup
         return;
       }
 
-      // update the compliance metric
-      compliance_metric_service.update_compliance_metric($scope.selected_compliance_metric.id, $scope.selected_compliance_metric, $scope.org.id).then((data) => {
-        if ('status' in data && data.status === 'error') {
-          for (const [key, error] of Object.entries(data.compliance_metrics_error)) {
-            $scope.compliance_metrics_error.push(`${key}: ${error}`);
-          }
-        } else {
-          // success. the ID would already be saved so this block seems unnecesary
-          if (!$scope.selected_compliance_metric.id) {
-            $scope.selected_compliance_metric.id = data.id;
-          }
-          // replace data into compliance metric
-          const index = _.findIndex($scope.compliance_metrics, ['id', data.id]);
-          if (index >= 0) {
-            $scope.compliance_metrics[index] = data;
+      if ($scope.selected_compliance_metric.id) {
+        // update the compliance metric
+        compliance_metric_service.update_compliance_metric($scope.selected_compliance_metric.id, $scope.selected_compliance_metric, $scope.org.id).then((data) => {
+          if ('status' in data && data.status === 'error') {
+            for (const [key, error] of Object.entries(data.compliance_metrics_error)) {
+              $scope.compliance_metrics_error.push(`${key}: ${error}`);
+            }
           } else {
-            $scope.compliance_metrics.push(data);
+            // success. the ID would already be saved so this block seems unnecesary
+            if (!$scope.selected_compliance_metric.id) {
+              $scope.selected_compliance_metric.id = data.id;
+            }
+            // replace data into compliance metric
+            const index = _.findIndex($scope.compliance_metrics, ['id', data.id]);
+            if (index >= 0) {
+              $scope.compliance_metrics[index] = data;
+            } else {
+              $scope.compliance_metrics.push(data);
+            }
+            $scope.selected_compliance_metric = data;
           }
-          $scope.selected_compliance_metric = data;
-        }
-      });
+        });
+      } else {
+        // create the compliance metric
+        compliance_metric_service.new_compliance_metric($scope.selected_compliance_metric, $scope.org.id).then((data) => {
+          $scope.compliance_metrics.push(data);
+          $scope.init_selected_metric(data.id);
+        });
+      }
 
       // display messages
       // Notification.primary({ message: '<a href="#/insights" style="color: #337ab7;">Click here to view your Program Overview</a>', delay: 5000 });
@@ -247,7 +255,7 @@ angular.module('BE.seed.controller.program_setup', []).controller('program_setup
 
       // create a new metric using api and then assign it to selected_compliance_metric that
       // way it will have an id
-      const template_compliance_metric = {
+      $scope.selected_compliance_metric = {
         name: 'New Program',
         cycles: [],
         actual_energy_column: null,
@@ -259,10 +267,6 @@ angular.module('BE.seed.controller.program_setup', []).controller('program_setup
         filter_group: null,
         x_axis_columns: []
       };
-      compliance_metric_service.new_compliance_metric(template_compliance_metric, $scope.org.id).then((data) => {
-        $scope.compliance_metrics.push(data);
-        $scope.init_selected_metric(data.id);
-      });
       //spinner_utility.hide();
     }
 

seed/static/seed/partials/program_setup.html

@@ -6,7 +6,7 @@
           <h2><i class="fa-solid fa-gauge-high"></i> {$:: 'Program Setup' | translate $}</h2>
         </div>
         <div ng-show="selected_compliance_metric" class="section_action_container right_40 section_action_btn pull-right">
-          <button class="btn btn-info r-margin-right-5" ng-click="click_delete()" translate>Delete</button>
+          <button class="btn btn-info r-margin-right-5" ng-disabled="!selected_compliance_metric.id" ng-click="click_delete()" translate>Delete</button>
           <button class="btn btn-primary" ng-disabled="program_settings_not_changed" ng-click="save_settings()">
             {$:: 'Save Changes' | translate $} <i class="fa-solid fa-check" ng-show="settings_updated"></i>
           </button>
@@ -22,7 +22,7 @@ <h2><i class="fa-solid fa-gauge-high"></i> {$:: 'Program Setup' | translate $}</
           <li class="r-list-header" translate>Program</li>
           <li ng-show="selected_compliance_metric" class="r-selected r-row r-row-centered">
             <span class="r-grow">{$ selected_compliance_metric.name $}</span>
-            <i class="fa-solid fa-xmark r-margin-left-5" ng-click="click_delete(compliance_metric)"></i>
+            <i class="fa-solid fa-xmark r-margin-left-5" ng-if="selected_compliance_metric.id" ng-click="click_delete(compliance_metric)"></i>
           </li>
         </ul>
         <ul class="r-list r-scrollable">
@@ -38,7 +38,7 @@ <h2><i class="fa-solid fa-gauge-high"></i> {$:: 'Program Setup' | translate $}</
         </ul>
         <ul class="r-list">
           <li>
-            <button class="btn btn-success r-grow" ng-click="click_new_compliance_metric()" ng-disabled="!program_settings_not_changed">
+            <button class="btn btn-success r-grow" ng-click="click_new_compliance_metric()">
               <i class="fa-solid fa-circle-plus r-pad-right-5"></i>New Program
             </button>
           </li>