Skip to content

Commit

Permalink
Move program setup to modal on insights pages (#4468)
Browse files Browse the repository at this point in the history 
* program setup modal

* simplified logic to load last view program in setup modal
  • Loading branch information
@kflemin
kflemin authored Jan 12, 2024
1 parent 3e1cb89 commit f485356
Show file tree
Hide file tree
Showing 10 changed files with 343 additions and 258 deletions.
74 changes: 72 additions & 2 deletions seed/static/seed/js/controllers/insights_program_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,36 @@ angular.module('BE.seed.controller.insights_program', []).controller('insights_p
'compliance_metric_service',
'spinner_utility',
'organization_payload',
'filter_groups',
'cycles',
'property_columns',
'auth_payload',
// eslint-disable-next-line func-names
function ($scope, $stateParams, $state, $uibModal, urls, compliance_metrics, compliance_metric_service, spinner_utility, organization_payload, cycles, auth_payload) {
function (
$scope,
$stateParams,
$state,
$uibModal,
urls,
compliance_metrics,
compliance_metric_service,
spinner_utility,
organization_payload,
filter_groups,
cycles,
property_columns,
auth_payload
) {
$scope.id = $stateParams.id;
$scope.cycles = cycles.cycles;
$scope.organization = organization_payload.organization;
$scope.initialize_chart = true;
$scope.auth = auth_payload.auth;

// used by modal
$scope.filter_groups = filter_groups;
$scope.property_columns = property_columns;

// compliance metric
$scope.compliance_metric = {};
$scope.compliance_metrics = compliance_metrics;
Expand All @@ -44,6 +64,53 @@ angular.module('BE.seed.controller.insights_program', []).controller('insights_p
// CHARTS
const colors = { compliant: '#77CCCB', 'non-compliant': '#A94455', unknown: '#DDDDDD' };

// Program Setup Modal
$scope.open_program_setup_modal = () => {
const modalInstance = $uibModal.open({
templateUrl: `${urls.static_url}seed/partials/program_setup.html`,
controller: 'program_setup_controller',
size: 'lg',
backdrop: 'static',
resolve: {
cycles: () => $scope.cycles,
compliance_metrics: () => $scope.compliance_metrics,
organization_payload: () => $scope.organization,
filter_groups: () => $scope.filter_groups,
property_columns: () => $scope.property_columns,
id: () => $scope.selected_metric
}
});
// on modal close
modalInstance.result.then((program) => {
// re-fetch compliance metrics
compliance_metric_service.get_compliance_metrics($scope.organization.id).then((data) => {
$scope.compliance_metrics = data;
// change selection to last selected in modal and reload
if ($scope.compliance_metrics.length > 0) {
if (program != null) {
$scope.compliance_metric = $scope.compliance_metrics.find((cm) => cm.id === program.id);
$scope.selected_metric = program.id;
} else {
// attempt to keep the selected metric
$scope.compliance_metric = $scope.compliance_metrics.find((cm) => cm.id === $scope.selected_metric);
if ($scope.compliance_metric == null) {
// load first metric b/c selected metric no longer exists
$scope.compliance_metric = $scope.compliance_metrics[0];
$scope.selected_metric = $scope.compliance_metric.id;
}
}
} else {
// load nothing
$scope.compliance_metric = {};
$scope.selected_metric = null;
$scope.data = null;
}

$scope.updateSelectedMetric();
});
});
};

const _load_datasets = () => {
// load data

Expand Down Expand Up @@ -173,7 +240,10 @@ angular.module('BE.seed.controller.insights_program', []).controller('insights_p
};

$scope.updateSelectedMetric = () => {
$scope.compliance_metric = _.find($scope.compliance_metrics, (o) => o.id === $scope.selected_metric);
$scope.compliance_metric = {};
if ($scope.selected_metric != null) {
$scope.compliance_metric = _.find($scope.compliance_metrics, (o) => o.id === $scope.selected_metric);
}

// reload data for selected metric
_load_data();
Expand Down
79 changes: 76 additions & 3 deletions seed/static/seed/js/controllers/insights_property_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,20 +11,42 @@ angular.module('BE.seed.controller.insights_property', []).controller('insights_
'compliance_metrics',
'compliance_metric_service',
'organization_payload',
'filter_groups',
'property_columns',
'cycles',
'spinner_utility',
'auth_payload',
// eslint-disable-next-line func-names
function ($scope, $state, $stateParams, $uibModal, urls, compliance_metrics, compliance_metric_service, organization_payload, spinner_utility, auth_payload) {
function (
$scope,
$state,
$stateParams,
$uibModal,
urls,
compliance_metrics,
compliance_metric_service,
organization_payload,
filter_groups,
property_columns,
cycles,
spinner_utility,
auth_payload
) {
$scope.id = $stateParams.id;
$scope.static_url = urls.static_url;
$scope.organization = organization_payload.organization;
$scope.auth = auth_payload.auth;

// used by modal
$scope.filter_groups = filter_groups;
$scope.property_columns = property_columns;
$scope.all_cycles = cycles.cycles;

// toggle help
$scope.show_help = false;
$scope.toggle_help = () => {
$scope.show_help = !$scope.show_help;
}
};

// configs ($scope.configs set to saved_configs where still applies.
// for example, if saved_configs.compliance_metric is 1, but 1 has been deleted, it does apply.)
Expand Down Expand Up @@ -73,6 +95,53 @@ angular.module('BE.seed.controller.insights_property', []).controller('insights_
$scope.y_axis_options = [];
$scope.x_categorical = false;

// Program Setup Modal
$scope.open_program_setup_modal = () => {
const modalInstance = $uibModal.open({
templateUrl: `${urls.static_url}seed/partials/program_setup.html`,
controller: 'program_setup_controller',
size: 'lg',
backdrop: 'static',
resolve: {
cycles: () => $scope.all_cycles,
compliance_metrics: () => $scope.compliance_metrics,
organization_payload: () => $scope.organization,
filter_groups: () => $scope.filter_groups,
property_columns: () => $scope.property_columns,
id: () => $scope.selected_metric
}
});
// on modal close
modalInstance.result.then((program) => {
// re-fetch compliance metrics
compliance_metric_service.get_compliance_metrics($scope.organization.id).then((data) => {
$scope.compliance_metrics = data;
// change selection to last selected in modal and reload
if ($scope.compliance_metrics.length > 0) {
if (program != null) {
$scope.configs.compliance_metric = $scope.compliance_metrics.find((cm) => cm.id === program.id);
$scope.selected_metric = program.id;
} else {
// attempt to keep the selected metric
$scope.configs.compliance_metric = $scope.compliance_metrics.find((cm) => cm.id === $scope.selected_metric);
if ($scope.configs.compliance_metric == null) {
// load first metric b/c selected metric no longer exists
$scope.configs.compliance_metric = $scope.compliance_metrics[0];
$scope.selected_metric = $scope.configs.compliance_metric.id;
}
}
} else {
// load nothing
$scope.configs.compliance_metric = {};
$scope.selected_metric = null;
$scope.data = null;
}

$scope.update_metric();
});
});
};

$scope.$watch(
'configs',
(new_configs) => {
Expand All @@ -89,6 +158,7 @@ angular.module('BE.seed.controller.insights_property', []).controller('insights_
const _load_data = () => {
if (_.isEmpty($scope.configs.compliance_metric)) {
spinner_utility.hide();
$scope.data = null;
return;
}
spinner_utility.show();
Expand Down Expand Up @@ -189,7 +259,10 @@ angular.module('BE.seed.controller.insights_property', []).controller('insights_
spinner_utility.show();

// compliance metric
$scope.configs.compliance_metric = _.find($scope.compliance_metrics, (o) => o.id === $scope.selected_metric);
$scope.configs.compliance_metric = {};
if ($scope.selected_metric != null) {
$scope.configs.compliance_metric = _.find($scope.compliance_metrics, (o) => o.id === $scope.selected_metric);
}

// reload data for selected metric
_load_data();
Expand Down
Loading

0 comments on commit f485356

Please sign in to comment.