Portfolio Summary Updates (#4909)

* pin cols * default hide ali * note * dropdown search * styles conditional display --------- Co-authored-by: Ross Perry <[email protected]> Co-authored-by: Katherine Fleming <[email protected]>
SEED-platform · Jan 23, 2025 · 8f00b5f · 8f00b5f
1 parent 31e8e03
commit 8f00b5f
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 13 deletions.
diff --git a/seed/static/seed/js/controllers/portfolio_summary_controller.js b/seed/static/seed/js/controllers/portfolio_summary_controller.js
@@ -65,16 +65,22 @@ angular.module('SEED.controller.portfolio_summary', [])
       const table_column_ids = [];
       $scope.selected_count = 0;
       $scope.selected_option = 'none';
+      $scope.search_query = '';
+
+      $scope.search_for_goals = (query) => {
+        const pattern = query.split('').join('.*');
+        const regex = new RegExp(pattern, 'i');
+        $scope.goal_options = $scope.goals.filter((goal) => regex.test(goal.name));
+      };
 
       const initialize_columns = () => {
         $scope.columns.forEach((col) => {
-          const default_display = col.column_name === $scope.organization.property_display_field;
-          const matching = col.is_matching_criteria;
+          const matching = ['pm_property_id', 'property_name'].includes(col.column_name);
           const area = col.data_type === 'area';
           const eui = col.data_type === 'eui';
           const other = ['property_name', 'property_type', 'year_built'].includes(col.column_name);
 
-          if (default_display || matching || eui || area || other) table_column_ids.push(col.id);
+          if (matching || eui || area || other) table_column_ids.push(col.id);
           if (eui) $scope.eui_columns.push(col);
           if (area) $scope.area_columns.push(col);
           if (matching) matching_column_names.push(col.column_name);
@@ -114,6 +120,7 @@ angular.module('SEED.controller.portfolio_summary', [])
       const get_goals = (goal_name = false) => {
         goal_service.get_goals().then((result) => {
           $scope.goals = result.goals;
+          $scope.goal_options = result.goals;
           $scope.goal = goal_name ?
             $scope.goals.find((goal) => goal.name === goal_name) :
             $scope.goals[0];
@@ -129,6 +136,10 @@ angular.module('SEED.controller.portfolio_summary', [])
         refresh_data();
       };
 
+      $scope.select_goal = (selected_goal) => {
+        $scope.goal = selected_goal;
+      };
+
       // If goal changes, reset grid filters and repopulate ui-grids
       $scope.$watch('goal', (cur, old) => {
         if ($scope.gridApi) $scope.reset_sorts_filters();
@@ -245,7 +256,7 @@ angular.module('SEED.controller.portfolio_summary', [])
 
       const load_summary = () => {
         $scope.summary_loading = true;
-        $scope.show_access_level_instances = true;
+        $scope.show_access_level_instances = false;
         $scope.summary_valid = false;
 
         goal_service.get_portfolio_summary($scope.goal.id).then((result) => {
@@ -380,8 +391,7 @@ angular.module('SEED.controller.portfolio_summary', [])
 
       const property_column_names = [...new Set(
         [
-          $scope.organization.property_display_field,
-          ...matching_column_names,
+          'pm_property_id',
           'property_name',
           'property_type',
           'year_built'
@@ -399,6 +409,9 @@ angular.module('SEED.controller.portfolio_summary', [])
       // handle cycle specific columns
       const selected_columns = () => {
         let cols = property_column_names.map((name) => $scope.columns.find((col) => col.column_name === name));
+        // pin pm_property id and property name
+        cols[0].pinnedLeft = true;
+        cols[1].pinnedLeft = true;
         const default_baseline = { headerCellClass: 'portfolio-summary-baseline-header', cellClass: 'portfolio-summary-baseline-cell' };
         const default_current = { headerCellClass: 'portfolio-summary-current-header', cellClass: 'portfolio-summary-current-cell' };
         const default_styles = { headerCellFilter: 'translate', minWidth: 75, width: 150 };
@@ -499,9 +512,6 @@ angular.module('SEED.controller.portfolio_summary', [])
         // from inventory_list_controller
         _.map(cols, (col) => {
           const options = {};
-          if (col.pinnedLeft) {
-            col.pinnedLeft = false;
-          }
           // not an ideal solution. How is this done on the inventory list
           if (col.column_name === 'pm_property_id') {
             col.type = 'number';
@@ -672,7 +682,7 @@ angular.module('SEED.controller.portfolio_summary', [])
             enablePinning: false,
             exporterSuppressExport: true,
             pinnedLeft: true,
-            visible: true,
+            visible: false,
             width: 100,
             cellClass: 'ali-cell',
             headerCellClass: 'ali-header'

diff --git a/seed/static/seed/partials/portfolio_summary.html b/seed/static/seed/partials/portfolio_summary.html
@@ -18,10 +18,30 @@ <h1 translate>Portfolio Summary</h1>
   </div>
   <div class="goal-header-wrapper">
     <div class="goal-header-column">
+      <!-- GOAL SELECT -->
       <div class="goal-select-wrapper">
         <label class="goal-select-label" for="goal-select" ng-show="goal" translate>GOAL</label>
-        <div class="goal-selection" ng-show="goal">
-          <select name="goal-select" id="goal-select" ng-options="goal as goal.name for goal in goals" ng-model="goal"></select>
+        <div uib-dropdown class="dropdown-search" ng-if="goal">
+          <button id="" type="button" class="btn dropdown-search-toggle" uib-dropdown-toggle>
+            <span>{$ goal.name $}</span>
+            <i class="fa-solid fa-chevron-down"></i>
+          </button>
+          <ul uib-dropdown-menu class="dropdown-menu" role="menu">
+            <li>
+              <input
+                class="form-control dropdown-search-input"
+                type="text"
+                placeholder="Search Goals..."
+                ng-model="search_query"
+                ng-click="$event.stopPropagation()"
+                ng-change="search_for_goals(search_query)"
+                aria-label="Search options"
+              />
+            </li>
+            <li class="drowndown-option" ng-repeat="goal in goal_options">
+              <a class="option-name" ng-click="select_goal(goal)">{$ goal.name $}</a>
+            </li>
+          </ul>
         </div>
         <button class="btn btn-primary portfolio-summary-btn" type="submit" ng-click="open_goal_editor_modal()" ng-if="write_permission">{$:: 'Configure Goals' | translate $}</button>
       </div>
@@ -144,7 +164,7 @@ <h4 translate>Loading Summary Data...</h4>
   <!-- Data Table -->
   <div id="portfolio-summary-grid" ng-if="data_valid">
     <div id="portfolioSummary-gridOptions-wrapper" class="wide-900">
-      <div ui-grid="gridOptions" ui-grid-save-state ui-grid-resize-columns ui-grid-exporter ui-grid-edit ui-grid-selection style="display: flex; width: 100%"></div>
+      <div ui-grid="gridOptions" ui-grid-save-state ui-grid-pinning ui-grid-resize-columns ui-grid-exporter ui-grid-edit ui-grid-selection style="display: flex; width: 100%; overflow: auto"></div>
     </div>
   </div>
   <div class="portfolio-summary-loading" ng-if="data_loading && !data_valid" style="margin: 100px 20px">

diff --git a/seed/static/seed/scss/style.scss b/seed/static/seed/scss/style.scss
@@ -5843,6 +5843,49 @@ tags-input .tags .tag-item {
   padding-top: 0 !important;
 }
 
+.dropdown-search {
+  background: #f5f5f5;
+  border-radius: 5px;
+  padding: 1px;
+
+  .dropdown-search-input {
+    width: 98%;
+    margin: 0 1%;
+  }
+
+  .dropdown-search-toggle {
+    display: flex;
+    justify-content: space-between;
+    width: 30vw;
+    max-width: 512px;
+    background: none;
+
+    span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  .dropdown-menu {
+    background: $gray;
+    max-height: 600px;
+    overflow-y: auto;
+    min-width: 400px;
+    max-width: 750px;
+
+    .option-name {
+      color: #fff;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    .option-name:hover {
+      background: $darkBlue;
+      color: #fff;
+    }
+  }
+}
+
 .description-section {
   display: flex;
   justify-content: center;