GDB-10692 - edit styling and logic to reflect review notes. Known iss…

…ue: main checkbox goes out of sync with list after indeterminate click
Ontotext-AD · Nov 12, 2024 · 4e35494 · 4e35494
1 parent 0759938
commit 4e35494
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 38 deletions.
diff --git a/src/css/import-resource-tree.css b/src/css/import-resource-tree.css
@@ -100,10 +100,14 @@
 .import-resource-tree .import-resources-actions .import-resource-status-dropdown {
     padding-left: 5px;
     gap: 5px;
+    margin-right: 10px;
+}
+
+.import-resource-tree .import-resources-actions .import-resource-status-dropdown #importSelectCheckboxInput {
+   cursor: pointer;
 }
 
 .import-resource-tree .import-resources-actions .import-resource-status-dropdown .dropdown-toggle {
-    padding-left: 0.5rem;
     margin-right: 0;
 }
 

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -6,6 +6,7 @@ import {ImportResourceTreeElement} from "../../models/import/import-resource-tre
 import {TABS} from "../services/import-context.service";
 import {ImportResourceTreeService} from "../services/import-resource-tree.service";
 import {convertToBytes} from "../../utils/size-util";
+import {CheckboxControlModel} from "../../models/import/checkbox-control-resource-wrapper";
 
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',
@@ -64,11 +65,12 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             // =========================
             $scope.resources = new ImportResourceTreeElement();
             $scope.displayResources = [];
+            $scope.checkboxControlModel = undefined;
             $scope.TYPE_FILTER_OPTIONS = TYPE_FILTER_OPTIONS;
             $scope.filterByType = TYPE_FILTER_OPTIONS.ALL;
             $scope.filterByFileName = '';
             $scope.STATUS_OPTIONS = STATUS_OPTIONS;
-            $scope.selectedByStatus = undefined;
+            $scope.selectedByStatus = STATUS_OPTIONS.NONE;
             $scope.areAllDisplayedImportResourcesSelected = false;
             $scope.areAllDisplayedImportResourcesPartialSelected = false;
             $scope.ImportResourceStatus = ImportResourceStatus;
@@ -104,7 +106,13 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 } else if (STATUS_OPTIONS.IMPORTED === $scope.selectedByStatus) {
                     $scope.resources.selectAllWithStatus([ImportResourceStatus.DONE]);
                 } else if (STATUS_OPTIONS.NOT_IMPORTED === $scope.selectedByStatus) {
-                    $scope.resources.selectAllWithStatus([ImportResourceStatus.IMPORTING, ImportResourceStatus.NONE, ImportResourceStatus.ERROR, ImportResourceStatus.PENDING, ImportResourceStatus.INTERRUPTING]);
+                    $scope.resources.selectAllWithStatus([
+                        ImportResourceStatus.IMPORTING,
+                        ImportResourceStatus.NONE,
+                        ImportResourceStatus.ERROR,
+                        ImportResourceStatus.PENDING,
+                        ImportResourceStatus.INTERRUPTING
+                    ]);
                 }
 
                 updateListedImportResources();
@@ -181,23 +189,24 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             $scope.toggleSelectAll = () => {
-                const allSelected = $scope.displayResources.every((resource) => resource.selected);
-                const noneSelected = $scope.displayResources.every((resource) => !resource.selected);
-                const checkboxElement = document.getElementById('checkboxInput');
+                const allSelected = $scope.checkboxControlModel.areAllSelected();
+                const noneSelected = $scope.checkboxControlModel.areNoneSelected();
+                const someSelected = $scope.checkboxControlModel.areMixedSelections();
 
-                if (allSelected) {
-                    toggleCheckboxes(checkboxElement, false);
+                if (someSelected || allSelected) {
+                    $scope.resources.setSelection(false);
+                    $scope.selectedByStatus = STATUS_OPTIONS.NONE;
+                    $scope.areAllDisplayedImportResourcesSelected = false;
                 } else if (noneSelected) {
-                    toggleCheckboxes(checkboxElement, true);
-                } else {
-                    toggleCheckboxes(checkboxElement, false);
+                    $scope.resources.setSelection(true);
+                    $scope.selectedByStatus = STATUS_OPTIONS.ALL;
+                    $scope.areAllDisplayedImportResourcesSelected = true;
                 }
+                $scope.areAllDisplayedImportResourcesPartialSelected = false;
 
-                updateSelectByStateDropdownModel();
-                updateHasSelection();
+                updateListedImportResources();
             };
 
-
             // =========================
             // Private functions
             // =========================
@@ -213,7 +222,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             const updateListedImportResources = () => {
                 $scope.resources.getRoot().updateSelectionState();
                 sortResources();
-                $scope.displayResources = $scope.resources.toList()
+                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources.toList());
+                $scope.displayResources = $scope.checkboxControlModel.getResourcesList()
                     .filter(filterByType)
                     .filter(filterByName);
 
@@ -228,27 +238,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             const updateSelectByStateDropdownModel = () => {
-                const hasUnselectedDisplayedImportResource = $scope.displayResources.some((resource) => !resource.selected);
-                const hasSelectedDisplayedImportResource = $scope.displayResources.some((resource) => resource.selected);
-                $scope.areAllDisplayedImportResourcesSelected = hasSelectedDisplayedImportResource && !hasUnselectedDisplayedImportResource;
-                $scope.areAllDisplayedImportResourcesPartialSelected = hasSelectedDisplayedImportResource && hasUnselectedDisplayedImportResource;
-
-                if ($scope.areAllDisplayedImportResourcesSelected) {
-                    $scope.selectedByStatus = STATUS_OPTIONS.ALL;
-                } else if (!$scope.areAllDisplayedImportResourcesSelected && !$scope.areAllDisplayedImportResourcesPartialSelected) {
-                    $scope.selectedByStatus = STATUS_OPTIONS.NONE;
-                }
-            };
-
-            const toggleCheckboxes = (checkboxElement, shouldSelect) => {
-                $scope.displayResources.forEach((resource) => resource.selected = shouldSelect);
-                $scope.selectedByStatus = shouldSelect ? STATUS_OPTIONS.ALL : STATUS_OPTIONS.NONE;
-                $scope.areAllDisplayedImportResourcesSelected = shouldSelect;
-                $scope.areAllDisplayedImportResourcesPartialSelected = false;
-
-                if (checkboxElement) {
-                    checkboxElement.checked = shouldSelect;
-                }
+                $scope.areAllDisplayedImportResourcesSelected = $scope.checkboxControlModel.areAllSelected();
+                $scope.areAllDisplayedImportResourcesPartialSelected = $scope.checkboxControlModel.areMixedSelections();
             };
 
             const sortResources = () => {

diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
@@ -3,9 +3,8 @@
     <div class="import-resource-tree-header">
         <div class="import-resources-actions">
             <div class="import-resource-status-dropdown btn-group btn-secondary" uib-dropdown>
-                <input type="checkbox" id="checkboxInput" ng-class="{'selected': selectedByStatus}"
+                <input type="checkbox" id="importSelectCheckboxInput" ng-class="{'selected': selectedByStatus}"
                        prop-indeterminate="areAllDisplayedImportResourcesPartialSelected"
-                       ng-checked="selectedByStatus === STATUS_OPTIONS.ALL"
                        ng-model="areAllDisplayedImportResourcesSelected"
                        ng-click="toggleSelectAll()">
                 <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle"

diff --git a/src/js/angular/models/import/checkbox-control-resource-wrapper.js b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
@@ -0,0 +1,21 @@
+export class CheckboxControlModel {
+    constructor(resourceList) {
+        this.resources = resourceList;
+    }
+
+    areMixedSelections() {
+        return this.resources.some((resource) => resource.selected) && this.resources.some((resource) => !resource.selected);
+    }
+
+    areNoneSelected() {
+        return this.resources.every((resource) => !resource.selected);
+    }
+
+    areAllSelected() {
+        return this.resources.every((resource) => resource.selected);
+    }
+
+    getResourcesList() {
+        return this.resources;
+    }
+}