From d8d08ea326341241757526ab58447c465177e5c1 Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Thu, 7 Nov 2024 12:58:38 +0200
Subject: [PATCH 1/7] GDB-10692 - change toggle behaviour of import checkbox.
 Edit styles to make the checkbox look like the dropdown button.

---
 src/css/import-resource-tree.css              |  6 ++-
 .../import-resource-tree.directive.js         | 37 +++++++++++++++++++
 .../templates/import-resource-tree.html       | 11 +++---
 3 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/src/css/import-resource-tree.css b/src/css/import-resource-tree.css
index 020e39a79..b4c5ebd36 100644
--- a/src/css/import-resource-tree.css
+++ b/src/css/import-resource-tree.css
@@ -97,12 +97,14 @@
     margin-right: .5rem;
 }
 
-.import-resource-tree .import-resources-actions .import-resource-status-dropdown .import-resource-status-checkbox {
-    pointer-events: none;
+.import-resource-tree .import-resources-actions .import-resource-status-dropdown {
+    padding-left: 5px;
+    gap: 5px;
 }
 
 .import-resource-tree .import-resources-actions .import-resource-status-dropdown .dropdown-toggle {
     padding-left: 0.5rem;
+    margin-right: 0;
 }
 
 .import-resource-tree .import-resources-actions .import-resource-status-dropdown .dropdown-toggle:not(.selected) {
diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index f93196c3c..50672dd92 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -180,6 +180,24 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 $scope.onEditResource({resource});
             };
 
+            $scope.toggleSelectAll = () => {
+                const allSelected = $scope.displayResources.every((resource) => resource.selected);
+                const noneSelected = $scope.displayResources.every((resource) => !resource.selected);
+                const checkboxElement = document.getElementById('checkboxInput');
+
+                if (allSelected) {
+                    toggleCheckboxes(checkboxElement, false);
+                } else if (noneSelected) {
+                    toggleCheckboxes(checkboxElement, true);
+                } else {
+                    toggleCheckboxes(checkboxElement, false);
+                }
+
+                updateSelectByStateDropdownModel();
+                updateHasSelection();
+            };
+
+
             // =========================
             // Private functions
             // =========================
@@ -214,6 +232,25 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 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;
+
+                $timeout(() => {
+                    if (checkboxElement) {
+                        checkboxElement.checked = shouldSelect;
+                    }
+                });
             };
 
             const sortResources = () => {
diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
index 305c09faa..2a900528e 100644
--- a/src/js/angular/import/templates/import-resource-tree.html
+++ b/src/js/angular/import/templates/import-resource-tree.html
@@ -2,13 +2,14 @@
 <div class="import-resource-tree mt-2" ng-if="!showLoader && resources && !resources.isEmpty()">
     <div class="import-resource-tree-header">
         <div class="import-resources-actions">
-            <div class="import-resource-status-dropdown btn-group" uib-dropdown>
+            <div class="import-resource-status-dropdown btn-group btn-secondary" uib-dropdown>
+                <input type="checkbox" id="checkboxInput" 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"
                         ng-class="{'selected': selectedByStatus}">
-                    <input type="checkbox" prop-indeterminate="areAllDisplayedImportResourcesPartialSelected"
-                           ng-model="areAllDisplayedImportResourcesSelected">
-                    {{selectedByStatus ? (('import.import_resource_tree.status.' + selectedByStatus) | translate) : '
-                    '}}
                 </button>
                 <ul class="dropdown-menu" role="menu">
                     <li>

From 07599389289a28cf42241abee0c40ba8a08f5620 Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Thu, 7 Nov 2024 16:27:54 +0200
Subject: [PATCH 2/7] GDB-10692 - remove timeout

---
 .../import/directives/import-resource-tree.directive.js   | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index 50672dd92..061ac5c32 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -246,11 +246,9 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 $scope.areAllDisplayedImportResourcesSelected = shouldSelect;
                 $scope.areAllDisplayedImportResourcesPartialSelected = false;
 
-                $timeout(() => {
-                    if (checkboxElement) {
-                        checkboxElement.checked = shouldSelect;
-                    }
-                });
+                if (checkboxElement) {
+                    checkboxElement.checked = shouldSelect;
+                }
             };
 
             const sortResources = () => {

From 4e354946b4876caf1eac015ba1a6896eb0383f81 Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Tue, 12 Nov 2024 11:19:55 +0200
Subject: [PATCH 3/7] GDB-10692 - edit styling and logic to reflect review
 notes. Known issue: main checkbox goes out of sync with list after
 indeterminate click

---
 src/css/import-resource-tree.css              |  6 +-
 .../import-resource-tree.directive.js         | 61 ++++++++-----------
 .../templates/import-resource-tree.html       |  3 +-
 .../checkbox-control-resource-wrapper.js      | 21 +++++++
 4 files changed, 53 insertions(+), 38 deletions(-)
 create mode 100644 src/js/angular/models/import/checkbox-control-resource-wrapper.js

diff --git a/src/css/import-resource-tree.css b/src/css/import-resource-tree.css
index b4c5ebd36..715be3139 100644
--- 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
index 061ac5c32..becf0c9dd 100644
--- 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
index 2a900528e..b496ca025 100644
--- 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
new file mode 100644
index 000000000..78e187a7a
--- /dev/null
+++ 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;
+    }
+}

From 0033d8d7dc9b64eeb7fd5747e0f90e06e6594b48 Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Thu, 14 Nov 2024 10:33:52 +0200
Subject: [PATCH 4/7] GDB-10692 - remove ng-model and toggle checkbox state
 directly. Refactor wrapper class. Introduce test

---
 .../import-resource-tree.directive.js         | 105 ++-------------
 .../templates/import-resource-tree.html       |   3 +-
 .../checkbox-control-resource-wrapper.js      | 121 ++++++++++++++++--
 .../import-user-data-file-upload.spec.js      |  40 ++++++
 test-cypress/steps/import/import-steps.js     |   8 ++
 5 files changed, 169 insertions(+), 108 deletions(-)

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index becf0c9dd..0c6f37b52 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -5,7 +5,6 @@ import {SortingType} from "../../models/import/sorting-type";
 import {ImportResourceTreeElement} from "../../models/import/import-resource-tree-element";
 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 = {
@@ -71,8 +70,6 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             $scope.filterByFileName = '';
             $scope.STATUS_OPTIONS = STATUS_OPTIONS;
             $scope.selectedByStatus = STATUS_OPTIONS.NONE;
-            $scope.areAllDisplayedImportResourcesSelected = false;
-            $scope.areAllDisplayedImportResourcesPartialSelected = false;
             $scope.ImportResourceStatus = ImportResourceStatus;
             $scope.canRemoveResource = angular.isDefined(attrs.onRemove);
             $scope.canResetSelectedResources = false;
@@ -189,22 +186,11 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             $scope.toggleSelectAll = () => {
-                const allSelected = $scope.checkboxControlModel.areAllSelected();
-                const noneSelected = $scope.checkboxControlModel.areNoneSelected();
-                const someSelected = $scope.checkboxControlModel.areMixedSelections();
-
-                if (someSelected || allSelected) {
-                    $scope.resources.setSelection(false);
-                    $scope.selectedByStatus = STATUS_OPTIONS.NONE;
-                    $scope.areAllDisplayedImportResourcesSelected = false;
-                } else if (noneSelected) {
-                    $scope.resources.setSelection(true);
-                    $scope.selectedByStatus = STATUS_OPTIONS.ALL;
-                    $scope.areAllDisplayedImportResourcesSelected = true;
-                }
-                $scope.areAllDisplayedImportResourcesPartialSelected = false;
+                $scope.resources.setSelection(!($scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected ||
+                    $scope.checkboxControlModel.areAllDisplayedImportResourcesSelected));
 
                 updateListedImportResources();
+                setCanResetResourcesFlag();
             };
 
             // =========================
@@ -221,12 +207,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
 
             const updateListedImportResources = () => {
                 $scope.resources.getRoot().updateSelectionState();
-                sortResources();
-                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources.toList());
-                $scope.displayResources = $scope.checkboxControlModel.getResourcesList()
-                    .filter(filterByType)
-                    .filter(filterByName);
-
+                $scope.checkboxControlModel.sortResources($scope.sortedBy, $scope.sortAsc);
+                $scope.displayResources = $scope.checkboxControlModel.getFilteredResources();
                 updateHasSelection();
                 updateSelectByStateDropdownModel();
             };
@@ -238,81 +220,11 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             const updateSelectByStateDropdownModel = () => {
-                $scope.areAllDisplayedImportResourcesSelected = $scope.checkboxControlModel.areAllSelected();
-                $scope.areAllDisplayedImportResourcesPartialSelected = $scope.checkboxControlModel.areMixedSelections();
-            };
-
-            const sortResources = () => {
-                if (SortingType.NAME === $scope.sortedBy) {
-                    $scope.resources.sort(compareByName($scope.sortAsc));
-                } else if (SortingType.SIZE === $scope.sortedBy) {
-                    $scope.resources.sort(compareBySize($scope.sortAsc));
-                } else if (SortingType.MODIFIED === $scope.sortedBy) {
-                    $scope.resources.sort(compareByModified($scope.sortAsc));
-                } else if (SortingType.IMPORTED === $scope.sortedBy) {
-                    $scope.resources.sort(compareByImportedOn($scope.sortAsc));
-                } else if (SortingType.CONTEXT === $scope.sortedBy) {
-                    $scope.resources.sort(compareByContext($scope.sortAsc));
-                }
-            };
-
-            const compareByName = (acs) => (r1, r2) => {
-                return acs ? r1.importResource.name.localeCompare(r2.importResource.name) : r2.importResource.name.localeCompare(r1.importResource.name);
-            };
-
-            const compareBySize = (acs) => (r1, r2) => {
-                // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
-                // Therefore, we convert the size to always be in bytes.
-                const r1Size = convertToBytes(r1.importResource.size);
-                const r2Size = convertToBytes(r2.importResource.size);
-                return acs ? r1Size - r2Size : r2Size - r1Size;
-            };
-
-            const compareByModified = (acs) => (r1, r2) => {
-                const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
-                const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
-                return acs ? r1ModifiedOn - r2ModifiedOn : r2ModifiedOn - r1ModifiedOn;
-            };
-
-            const compareByImportedOn = (acs) => (r1, r2) => {
-                const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
-                const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
-                return acs ? r1ImportedOn - r2ImportedOn : r2ImportedOn - r1ImportedOn;
-            };
-
-            const compareByContext = (acs) => (r1, r2) => {
-                return acs ? r1.importResource.context.localeCompare(r2.importResource.context) : r2.importResource.context.localeCompare(r1.importResource.context);
-            };
-
-            const filterByType = (resource) => {
-                if (TYPE_FILTER_OPTIONS.ALL === $scope.filterByType) {
-                    return true;
-                }
-
-                if ($scope.filterByType === TYPE_FILTER_OPTIONS.FILE) {
-                    return resource.isFile();
-                }
-
-                if ($scope.filterByType === TYPE_FILTER_OPTIONS.DIRECTORY) {
-                    return resource.isDirectory();
-                }
-
-                return false;
-            };
-
-            const filterByName = (resource) => {
-                if (!$scope.filterByFileName) {
-                    return true;
-                }
-
-                if ($scope.filterByType === TYPE_FILTER_OPTIONS.DIRECTORY) {
-                    return resource.hasTextInDirectoriesName($scope.filterByFileName);
-                }
+                const mainCheckbox = element[0].querySelector('#importSelectCheckboxInput');
 
-                if ($scope.filterByType === TYPE_FILTER_OPTIONS.FILE) {
-                    return resource.hasTextInFilesName($scope.filterByFileName);
+                if (mainCheckbox) {
+                    mainCheckbox.checked = !!($scope.checkboxControlModel.areAllDisplayedImportResourcesSelected || $scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected);
                 }
-                return resource.hasTextInResourcesName($scope.filterByFileName);
             };
 
             let debounceTimeout;
@@ -340,6 +252,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 } else {
                     ImportResourceTreeService.mergeResourceTree($scope.resources, newResources, isUserImport);
                 }
+                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources, $scope.filterByType, $scope.filterByFileName);
                 ImportResourceTreeService.calculateElementIndent($scope.resources);
                 ImportResourceTreeService.setupAfterTreeInitProperties($scope.resources);
                 updateListedImportResources();
diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
index b496ca025..b81e9c584 100644
--- a/src/js/angular/import/templates/import-resource-tree.html
+++ b/src/js/angular/import/templates/import-resource-tree.html
@@ -4,8 +4,7 @@
         <div class="import-resources-actions">
             <div class="import-resource-status-dropdown btn-group btn-secondary" uib-dropdown>
                 <input type="checkbox" id="importSelectCheckboxInput" ng-class="{'selected': selectedByStatus}"
-                       prop-indeterminate="areAllDisplayedImportResourcesPartialSelected"
-                       ng-model="areAllDisplayedImportResourcesSelected"
+                       prop-indeterminate="checkboxControlModel.areAllDisplayedImportResourcesPartialSelected"
                        ng-click="toggleSelectAll()">
                 <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle"
                         ng-class="{'selected': selectedByStatus}">
diff --git a/src/js/angular/models/import/checkbox-control-resource-wrapper.js b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
index 78e187a7a..6a3760fd0 100644
--- a/src/js/angular/models/import/checkbox-control-resource-wrapper.js
+++ b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
@@ -1,21 +1,122 @@
+import {SortingType} from "./sorting-type";
+import {convertToBytes} from "../../utils/size-util";
+
 export class CheckboxControlModel {
-    constructor(resourceList) {
-        this.resources = resourceList;
+    constructor(resourceList, filterByTypeOption, filterByFileName) {
+        this.resources = resourceList.toList() || [];
+        this.filterByTypeOption = filterByTypeOption;
+        this.filterByFileName = filterByFileName;
+    }
+
+    get areAllDisplayedImportResourcesSelected() {
+        const filteredResources = this.getFilteredResources();
+        return filteredResources.every((resource) => resource.selected);
+    }
+
+    get areAllDisplayedImportResourcesPartialSelected() {
+        const filteredResources = this.getFilteredResources();
+        const hasUnselected = filteredResources.some((resource) => !resource.selected);
+        const hasSelected = filteredResources.some((resource) => resource.selected);
+        return hasSelected && hasUnselected;
     }
 
-    areMixedSelections() {
-        return this.resources.some((resource) => resource.selected) && this.resources.some((resource) => !resource.selected);
+    filterByType(resource) {
+        switch (this.filterByTypeOption) {
+            case TYPE_FILTER_OPTIONS.ALL:
+                return true;
+            case TYPE_FILTER_OPTIONS.FILE:
+                return resource.isFile();
+            case TYPE_FILTER_OPTIONS.DIRECTORY:
+                return resource.isDirectory();
+            default:
+                return false;
+        }
+    }
+
+    filterByName(resource) {
+        if (!this.filterByFileName) {
+            return true;
+        }
+
+        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.DIRECTORY) {
+            return resource.hasTextInDirectoriesName(this.filterByFileName);
+        }
+
+        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.FILE) {
+            return resource.hasTextInFilesName(this.filterByFileName);
+        }
+
+        return resource.hasTextInResourcesName(this.filterByFileName);
     }
 
-    areNoneSelected() {
-        return this.resources.every((resource) => !resource.selected);
+    getFilteredResources() {
+        return this.resources.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
     }
 
-    areAllSelected() {
-        return this.resources.every((resource) => resource.selected);
+    /**
+     * Sorts the resources based on the specified sorting type and order.
+     * @param {string} sortedBy - The sorting type (e.g., NAME, SIZE, MODIFIED).
+     * @param {boolean} sortAsc - Determines whether to sort in ascending order.
+     */
+    sortResources(sortedBy, sortAsc) {
+        if (SortingType.NAME === sortedBy) {
+            this.resources.sort(this.compareByName(sortAsc));
+        } else if (SortingType.SIZE === sortedBy) {
+            this.resources.sort(this.compareBySize(sortAsc));
+        } else if (SortingType.MODIFIED === sortedBy) {
+            this.resources.sort(this.compareByModified(sortAsc));
+        } else if (SortingType.IMPORTED === sortedBy) {
+            this.resources.sort(this.compareByImportedOn(sortAsc));
+        } else if (SortingType.CONTEXT === sortedBy) {
+            this.resources.sort(this.compareByContext(sortAsc));
+        }
     }
 
-    getResourcesList() {
-        return this.resources;
+    compareByName(asc) {
+        return (r1, r2) => {
+            return asc
+                ? r1.importResource.name.localeCompare(r2.importResource.name)
+                : r2.importResource.name.localeCompare(r1.importResource.name);
+        };
     }
+
+    compareBySize(asc) {
+        return (r1, r2) => {
+            // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
+            // Therefore, we convert the size to always be in bytes.
+            const r1Size = convertToBytes(r1.importResource.size);
+            const r2Size = convertToBytes(r2.importResource.size);
+            return asc ? r1Size - r2Size : r2Size - r1Size;
+        };
+    }
+
+    compareByModified(asc) {
+        return (r1, r2) => {
+            const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
+            const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
+            return asc ? r1ModifiedOn - r2ModifiedOn : r2ModifiedOn - r1ModifiedOn;
+        };
+    }
+
+    compareByImportedOn(asc) {
+        return (r1, r2) => {
+            const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
+            const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
+            return asc ? r1ImportedOn - r2ImportedOn : r2ImportedOn - r1ImportedOn;
+        };
+    }
+
+    compareByContext(asc) {
+        return (r1, r2) => {
+            return asc
+                ? r1.importResource.context.localeCompare(r2.importResource.context)
+                : r2.importResource.context.localeCompare(r1.importResource.context);
+        };
+    }
+
 }
+const TYPE_FILTER_OPTIONS = {
+    'FILE': 'FILE',
+    'DIRECTORY': 'DIRECTORY',
+    'ALL': 'ALL'
+};
diff --git a/test-cypress/integration/import/import-user-data-file-upload.spec.js b/test-cypress/integration/import/import-user-data-file-upload.spec.js
index d1f027d4c..fde674a56 100644
--- a/test-cypress/integration/import/import-user-data-file-upload.spec.js
+++ b/test-cypress/integration/import/import-user-data-file-upload.spec.js
@@ -238,4 +238,44 @@ describe('Import user data: File upload', () => {
         ImportUserDataSteps.getResources().should('have.length', 1);
         ImportUserDataSteps.checkImportedResource(0, 'invalid-format.json', 'RDF Parse Error: Invalid file format');
     });
+
+    it('should be able to select files via individual and main checkboxes', () => {
+        // Given I upload a file
+        ImportUserDataSteps.selectFile(ImportUserDataSteps.createFile(testFiles[0], bnodes));
+        ImportSettingsDialogSteps.import();
+        ImportUserDataSteps.selectFile(ImportUserDataSteps.createFile(testFiles[1], jsonld));
+        ImportSettingsDialogSteps.import();
+        ImportUserDataSteps.getResources().should('have.length', 2);
+        // When I check the main checkbox
+        ImportUserDataSteps.checkMainCheckbox();
+        // Then I expect all the list items to be selected
+        ImportUserDataSteps.getSelectedResources().should('have.length', 2);
+        // When I uncheck the main checkbox
+        ImportUserDataSteps.checkMainCheckbox();
+        // Then I expect all the list items to be unchecked
+        ImportUserDataSteps.getSelectedResources().should('have.length', 0);
+        ImportUserDataSteps.getMainCheckbox().should('not.be.checked');
+        // When I check one item from the list
+        ImportUserDataSteps.selectFileByIndex(0);
+        // Then I expect the main checkbox to be indeterminate
+        ImportUserDataSteps.getMainCheckbox().should('have.prop', 'indeterminate', true);
+        // When I check the indeterminate checkbox
+        ImportUserDataSteps.checkMainCheckbox();
+        // Then I expect all checkboxes to be unchecked
+        ImportUserDataSteps.getMainCheckbox().should('not.be.checked');
+        ImportUserDataSteps.getResource(0).find('.select-checkbox').should('not.be.checked');
+        ImportUserDataSteps.getResource(1).find('.select-checkbox').should('not.be.checked');
+        // When I reset a file's status
+        ImportUserDataSteps.resetFileStatus(1);
+        // Then I select only imported files from the dropdown
+        ImportUserDataSteps.selectImportedResources();
+        // And I expect an indeterminate main checkbox
+        ImportUserDataSteps.getMainCheckbox().should('have.prop', 'indeterminate', true);
+        // When I check the indeterminate checkbox
+        ImportUserDataSteps.checkMainCheckbox();
+        // Then I expect all checkboxes to be unchecked
+        ImportUserDataSteps.getMainCheckbox().should('not.be.checked');
+        ImportUserDataSteps.getResource(0).find('.select-checkbox').should('not.be.checked');
+        ImportUserDataSteps.getResource(1).find('.select-checkbox').should('not.be.checked');
+    });
 });
diff --git a/test-cypress/steps/import/import-steps.js b/test-cypress/steps/import/import-steps.js
index 3dd568c07..56c766f82 100644
--- a/test-cypress/steps/import/import-steps.js
+++ b/test-cypress/steps/import/import-steps.js
@@ -156,6 +156,14 @@ class ImportSteps {
         return this.getResourcesTable().find('.row.title-row');
     }
 
+    static checkMainCheckbox() {
+        this.getMainCheckbox().click();
+    }
+
+    static getMainCheckbox() {
+        return this.getResourcesTable().find('#importSelectCheckboxInput');
+    }
+
     static getSelectedResources() {
         return this.getResources().find('.select-checkbox:checked');
     }

From 03426f70685c619d5606ed1497ebb2553b6f920e Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Thu, 14 Nov 2024 18:39:32 +0200
Subject: [PATCH 5/7] GDB-10692 - refactor wrapper and move its instantiation
 to ImportResourceTreeElement class

---
 .../import-resource-tree.directive.js         | 15 ++++---
 .../services/import-resource-tree.service.js  |  2 +-
 .../templates/import-resource-tree.html       |  4 +-
 .../import/import-resource-tree-element.js    | 13 +++---
 ...ource-wrapper.js => resource-list-util.js} | 43 +++++++++++--------
 5 files changed, 44 insertions(+), 33 deletions(-)
 rename src/js/angular/models/import/{checkbox-control-resource-wrapper.js => resource-list-util.js} (79%)

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index 0c6f37b52..094772ce5 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -5,7 +5,6 @@ import {SortingType} from "../../models/import/sorting-type";
 import {ImportResourceTreeElement} from "../../models/import/import-resource-tree-element";
 import {TABS} from "../services/import-context.service";
 import {ImportResourceTreeService} from "../services/import-resource-tree.service";
-import {CheckboxControlModel} from "../../models/import/checkbox-control-resource-wrapper";
 
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',
@@ -186,8 +185,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             $scope.toggleSelectAll = () => {
-                $scope.resources.setSelection(!($scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected ||
-                    $scope.checkboxControlModel.areAllDisplayedImportResourcesSelected));
+                $scope.resources.setSelection(!($scope.resourceListUtil.areAllDisplayedImportResourcesPartialSelected ||
+                    $scope.resourceListUtil.areAllDisplayedImportResourcesSelected));
 
                 updateListedImportResources();
                 setCanResetResourcesFlag();
@@ -207,8 +206,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
 
             const updateListedImportResources = () => {
                 $scope.resources.getRoot().updateSelectionState();
-                $scope.checkboxControlModel.sortResources($scope.sortedBy, $scope.sortAsc);
-                $scope.displayResources = $scope.checkboxControlModel.getFilteredResources();
+                $scope.resourceListUtil.sortResources($scope.sortedBy, $scope.sortAsc);
+                $scope.displayResources = $scope.resourceListUtil.getFilteredResources();
                 updateHasSelection();
                 updateSelectByStateDropdownModel();
             };
@@ -223,7 +222,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 const mainCheckbox = element[0].querySelector('#importSelectCheckboxInput');
 
                 if (mainCheckbox) {
-                    mainCheckbox.checked = !!($scope.checkboxControlModel.areAllDisplayedImportResourcesSelected || $scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected);
+                    mainCheckbox.checked = !!($scope.resourceListUtil.areAllDisplayedImportResourcesSelected || $scope.resourceListUtil.areAllDisplayedImportResourcesPartialSelected);
                 }
             };
 
@@ -252,7 +251,9 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 } else {
                     ImportResourceTreeService.mergeResourceTree($scope.resources, newResources, isUserImport);
                 }
-                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources, $scope.filterByType, $scope.filterByFileName);
+                $scope.resourceListUtil = $scope.resources.getResourceListUtil();
+                $scope.resourceListUtil.setNameFilter($scope.filterByFileName);
+                $scope.resourceListUtil.setTypeFilter($scope.filterByType);
                 ImportResourceTreeService.calculateElementIndent($scope.resources);
                 ImportResourceTreeService.setupAfterTreeInitProperties($scope.resources);
                 updateListedImportResources();
diff --git a/src/js/angular/import/services/import-resource-tree.service.js b/src/js/angular/import/services/import-resource-tree.service.js
index 080ee2233..0519843e0 100644
--- a/src/js/angular/import/services/import-resource-tree.service.js
+++ b/src/js/angular/import/services/import-resource-tree.service.js
@@ -44,7 +44,7 @@ export class ImportResourceTreeService {
      */
     static mergeResourceTree(importResourceElement, newResources, isUserImport) {
         // Removes missing files.
-        importResourceElement.getRoot().toList().forEach((resource) => {
+        importResourceElement.getRoot().getResourceListUtil().getResourceList.forEach((resource) => {
             const newResource = newResources.find((newResource) => {
                 return newResource.name === resource.importResource.name
             });
diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
index b81e9c584..9a6a46c86 100644
--- a/src/js/angular/import/templates/import-resource-tree.html
+++ b/src/js/angular/import/templates/import-resource-tree.html
@@ -3,8 +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="importSelectCheckboxInput" ng-class="{'selected': selectedByStatus}"
-                       prop-indeterminate="checkboxControlModel.areAllDisplayedImportResourcesPartialSelected"
+                <input type="checkbox" id="importSelectCheckboxInput"
+                       prop-indeterminate="resourceListUtil.areAllDisplayedImportResourcesPartialSelected"
                        ng-click="toggleSelectAll()">
                 <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle"
                         ng-class="{'selected': selectedByStatus}">
diff --git a/src/js/angular/models/import/import-resource-tree-element.js b/src/js/angular/models/import/import-resource-tree-element.js
index 0a5f968e2..076f0cac2 100644
--- a/src/js/angular/models/import/import-resource-tree-element.js
+++ b/src/js/angular/models/import/import-resource-tree-element.js
@@ -1,5 +1,6 @@
 import {ImportResourceStatus} from "./import-resource-status";
 import {cloneDeep} from 'lodash';
+import {ResourceListUtil} from "./resource-list-util";
 
 /**
  * Resources have parent-child relations. This class represents one resource element from the parent-child relation tree.
@@ -178,21 +179,21 @@ export class ImportResourceTreeElement {
     }
 
     /**
-     * Returns flattening view of resources parent-child relation tree.
+     * Returns a utility wrapper of the flattening view of resources parent-child relation tree.
      *
-     * @return {ImportResourceTreeElement[]} flattening view of resources.
+     * @return {ResourceListUtil} a utility wrapper of the flattening view of resources.
      */
-    toList() {
+    getResourceListUtil() {
         const result = [];
         if (this.parent) {
             // skip the root element.
             result.push(this);
         }
         this.directories.forEach((directory) => {
-            result.push(...directory.toList());
+            result.push(...directory.getResourceListUtil().getResourceList);
         });
         result.push(...this.files);
-        return result;
+        return new ResourceListUtil(result);
     }
 
     /**
@@ -381,6 +382,6 @@ export class ImportResourceTreeElement {
     }
 
     getSize() {
-        return this.toList().length;
+        return this.getResourceListUtil().getResourceList.length;
     }
 }
diff --git a/src/js/angular/models/import/checkbox-control-resource-wrapper.js b/src/js/angular/models/import/resource-list-util.js
similarity index 79%
rename from src/js/angular/models/import/checkbox-control-resource-wrapper.js
rename to src/js/angular/models/import/resource-list-util.js
index 6a3760fd0..688ee902e 100644
--- a/src/js/angular/models/import/checkbox-control-resource-wrapper.js
+++ b/src/js/angular/models/import/resource-list-util.js
@@ -1,11 +1,9 @@
 import {SortingType} from "./sorting-type";
 import {convertToBytes} from "../../utils/size-util";
 
-export class CheckboxControlModel {
-    constructor(resourceList, filterByTypeOption, filterByFileName) {
-        this.resources = resourceList.toList() || [];
-        this.filterByTypeOption = filterByTypeOption;
-        this.filterByFileName = filterByFileName;
+export class ResourceListUtil {
+    constructor(resourceList) {
+        this.resourceList = resourceList || [];
     }
 
     get areAllDisplayedImportResourcesSelected() {
@@ -20,6 +18,18 @@ export class CheckboxControlModel {
         return hasSelected && hasUnselected;
     }
 
+    get getResourceList() {
+        return this.resourceList;
+    }
+
+    setTypeFilter(filterByType) {
+        this.filterByTypeOption = filterByType;
+    }
+
+    setNameFilter(filterByName) {
+        this.filterByFileName = filterByName;
+    }
+
     filterByType(resource) {
         switch (this.filterByTypeOption) {
             case TYPE_FILTER_OPTIONS.ALL:
@@ -50,7 +60,7 @@ export class CheckboxControlModel {
     }
 
     getFilteredResources() {
-        return this.resources.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
+        return this.resourceList.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
     }
 
     /**
@@ -60,19 +70,19 @@ export class CheckboxControlModel {
      */
     sortResources(sortedBy, sortAsc) {
         if (SortingType.NAME === sortedBy) {
-            this.resources.sort(this.compareByName(sortAsc));
+            this.resourceList.sort(this.nameComparator(sortAsc));
         } else if (SortingType.SIZE === sortedBy) {
-            this.resources.sort(this.compareBySize(sortAsc));
+            this.resourceList.sort(this.sizeComparator(sortAsc));
         } else if (SortingType.MODIFIED === sortedBy) {
-            this.resources.sort(this.compareByModified(sortAsc));
+            this.resourceList.sort(this.modifiedOnComparator(sortAsc));
         } else if (SortingType.IMPORTED === sortedBy) {
-            this.resources.sort(this.compareByImportedOn(sortAsc));
+            this.resourceList.sort(this.importedOnComparator(sortAsc));
         } else if (SortingType.CONTEXT === sortedBy) {
-            this.resources.sort(this.compareByContext(sortAsc));
+            this.resourceList.sort(this.contextComparator(sortAsc));
         }
     }
 
-    compareByName(asc) {
+    nameComparator(asc) {
         return (r1, r2) => {
             return asc
                 ? r1.importResource.name.localeCompare(r2.importResource.name)
@@ -80,7 +90,7 @@ export class CheckboxControlModel {
         };
     }
 
-    compareBySize(asc) {
+    sizeComparator(asc) {
         return (r1, r2) => {
             // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
             // Therefore, we convert the size to always be in bytes.
@@ -90,7 +100,7 @@ export class CheckboxControlModel {
         };
     }
 
-    compareByModified(asc) {
+    modifiedOnComparator(asc) {
         return (r1, r2) => {
             const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
             const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
@@ -98,7 +108,7 @@ export class CheckboxControlModel {
         };
     }
 
-    compareByImportedOn(asc) {
+    importedOnComparator(asc) {
         return (r1, r2) => {
             const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
             const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
@@ -106,14 +116,13 @@ export class CheckboxControlModel {
         };
     }
 
-    compareByContext(asc) {
+    contextComparator(asc) {
         return (r1, r2) => {
             return asc
                 ? r1.importResource.context.localeCompare(r2.importResource.context)
                 : r2.importResource.context.localeCompare(r1.importResource.context);
         };
     }
-
 }
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',

From 91fa52089cc03a2c749db40fbded5c72d0c2524d Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Fri, 15 Nov 2024 10:14:17 +0200
Subject: [PATCH 6/7] Revert "GDB-10692 - refactor wrapper and move its
 instantiation to ImportResourceTreeElement class"

This reverts commit 03426f70685c619d5606ed1497ebb2553b6f920e.
---
 .../import-resource-tree.directive.js         | 15 +++----
 .../services/import-resource-tree.service.js  |  2 +-
 .../templates/import-resource-tree.html       |  4 +-
 ...s => checkbox-control-resource-wrapper.js} | 43 ++++++++-----------
 .../import/import-resource-tree-element.js    | 13 +++---
 5 files changed, 33 insertions(+), 44 deletions(-)
 rename src/js/angular/models/import/{resource-list-util.js => checkbox-control-resource-wrapper.js} (79%)

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index 094772ce5..0c6f37b52 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -5,6 +5,7 @@ import {SortingType} from "../../models/import/sorting-type";
 import {ImportResourceTreeElement} from "../../models/import/import-resource-tree-element";
 import {TABS} from "../services/import-context.service";
 import {ImportResourceTreeService} from "../services/import-resource-tree.service";
+import {CheckboxControlModel} from "../../models/import/checkbox-control-resource-wrapper";
 
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',
@@ -185,8 +186,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             $scope.toggleSelectAll = () => {
-                $scope.resources.setSelection(!($scope.resourceListUtil.areAllDisplayedImportResourcesPartialSelected ||
-                    $scope.resourceListUtil.areAllDisplayedImportResourcesSelected));
+                $scope.resources.setSelection(!($scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected ||
+                    $scope.checkboxControlModel.areAllDisplayedImportResourcesSelected));
 
                 updateListedImportResources();
                 setCanResetResourcesFlag();
@@ -206,8 +207,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
 
             const updateListedImportResources = () => {
                 $scope.resources.getRoot().updateSelectionState();
-                $scope.resourceListUtil.sortResources($scope.sortedBy, $scope.sortAsc);
-                $scope.displayResources = $scope.resourceListUtil.getFilteredResources();
+                $scope.checkboxControlModel.sortResources($scope.sortedBy, $scope.sortAsc);
+                $scope.displayResources = $scope.checkboxControlModel.getFilteredResources();
                 updateHasSelection();
                 updateSelectByStateDropdownModel();
             };
@@ -222,7 +223,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 const mainCheckbox = element[0].querySelector('#importSelectCheckboxInput');
 
                 if (mainCheckbox) {
-                    mainCheckbox.checked = !!($scope.resourceListUtil.areAllDisplayedImportResourcesSelected || $scope.resourceListUtil.areAllDisplayedImportResourcesPartialSelected);
+                    mainCheckbox.checked = !!($scope.checkboxControlModel.areAllDisplayedImportResourcesSelected || $scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected);
                 }
             };
 
@@ -251,9 +252,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 } else {
                     ImportResourceTreeService.mergeResourceTree($scope.resources, newResources, isUserImport);
                 }
-                $scope.resourceListUtil = $scope.resources.getResourceListUtil();
-                $scope.resourceListUtil.setNameFilter($scope.filterByFileName);
-                $scope.resourceListUtil.setTypeFilter($scope.filterByType);
+                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources, $scope.filterByType, $scope.filterByFileName);
                 ImportResourceTreeService.calculateElementIndent($scope.resources);
                 ImportResourceTreeService.setupAfterTreeInitProperties($scope.resources);
                 updateListedImportResources();
diff --git a/src/js/angular/import/services/import-resource-tree.service.js b/src/js/angular/import/services/import-resource-tree.service.js
index 0519843e0..080ee2233 100644
--- a/src/js/angular/import/services/import-resource-tree.service.js
+++ b/src/js/angular/import/services/import-resource-tree.service.js
@@ -44,7 +44,7 @@ export class ImportResourceTreeService {
      */
     static mergeResourceTree(importResourceElement, newResources, isUserImport) {
         // Removes missing files.
-        importResourceElement.getRoot().getResourceListUtil().getResourceList.forEach((resource) => {
+        importResourceElement.getRoot().toList().forEach((resource) => {
             const newResource = newResources.find((newResource) => {
                 return newResource.name === resource.importResource.name
             });
diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
index 9a6a46c86..b81e9c584 100644
--- a/src/js/angular/import/templates/import-resource-tree.html
+++ b/src/js/angular/import/templates/import-resource-tree.html
@@ -3,8 +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="importSelectCheckboxInput"
-                       prop-indeterminate="resourceListUtil.areAllDisplayedImportResourcesPartialSelected"
+                <input type="checkbox" id="importSelectCheckboxInput" ng-class="{'selected': selectedByStatus}"
+                       prop-indeterminate="checkboxControlModel.areAllDisplayedImportResourcesPartialSelected"
                        ng-click="toggleSelectAll()">
                 <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle"
                         ng-class="{'selected': selectedByStatus}">
diff --git a/src/js/angular/models/import/resource-list-util.js b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
similarity index 79%
rename from src/js/angular/models/import/resource-list-util.js
rename to src/js/angular/models/import/checkbox-control-resource-wrapper.js
index 688ee902e..6a3760fd0 100644
--- a/src/js/angular/models/import/resource-list-util.js
+++ b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
@@ -1,9 +1,11 @@
 import {SortingType} from "./sorting-type";
 import {convertToBytes} from "../../utils/size-util";
 
-export class ResourceListUtil {
-    constructor(resourceList) {
-        this.resourceList = resourceList || [];
+export class CheckboxControlModel {
+    constructor(resourceList, filterByTypeOption, filterByFileName) {
+        this.resources = resourceList.toList() || [];
+        this.filterByTypeOption = filterByTypeOption;
+        this.filterByFileName = filterByFileName;
     }
 
     get areAllDisplayedImportResourcesSelected() {
@@ -18,18 +20,6 @@ export class ResourceListUtil {
         return hasSelected && hasUnselected;
     }
 
-    get getResourceList() {
-        return this.resourceList;
-    }
-
-    setTypeFilter(filterByType) {
-        this.filterByTypeOption = filterByType;
-    }
-
-    setNameFilter(filterByName) {
-        this.filterByFileName = filterByName;
-    }
-
     filterByType(resource) {
         switch (this.filterByTypeOption) {
             case TYPE_FILTER_OPTIONS.ALL:
@@ -60,7 +50,7 @@ export class ResourceListUtil {
     }
 
     getFilteredResources() {
-        return this.resourceList.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
+        return this.resources.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
     }
 
     /**
@@ -70,19 +60,19 @@ export class ResourceListUtil {
      */
     sortResources(sortedBy, sortAsc) {
         if (SortingType.NAME === sortedBy) {
-            this.resourceList.sort(this.nameComparator(sortAsc));
+            this.resources.sort(this.compareByName(sortAsc));
         } else if (SortingType.SIZE === sortedBy) {
-            this.resourceList.sort(this.sizeComparator(sortAsc));
+            this.resources.sort(this.compareBySize(sortAsc));
         } else if (SortingType.MODIFIED === sortedBy) {
-            this.resourceList.sort(this.modifiedOnComparator(sortAsc));
+            this.resources.sort(this.compareByModified(sortAsc));
         } else if (SortingType.IMPORTED === sortedBy) {
-            this.resourceList.sort(this.importedOnComparator(sortAsc));
+            this.resources.sort(this.compareByImportedOn(sortAsc));
         } else if (SortingType.CONTEXT === sortedBy) {
-            this.resourceList.sort(this.contextComparator(sortAsc));
+            this.resources.sort(this.compareByContext(sortAsc));
         }
     }
 
-    nameComparator(asc) {
+    compareByName(asc) {
         return (r1, r2) => {
             return asc
                 ? r1.importResource.name.localeCompare(r2.importResource.name)
@@ -90,7 +80,7 @@ export class ResourceListUtil {
         };
     }
 
-    sizeComparator(asc) {
+    compareBySize(asc) {
         return (r1, r2) => {
             // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
             // Therefore, we convert the size to always be in bytes.
@@ -100,7 +90,7 @@ export class ResourceListUtil {
         };
     }
 
-    modifiedOnComparator(asc) {
+    compareByModified(asc) {
         return (r1, r2) => {
             const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
             const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
@@ -108,7 +98,7 @@ export class ResourceListUtil {
         };
     }
 
-    importedOnComparator(asc) {
+    compareByImportedOn(asc) {
         return (r1, r2) => {
             const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
             const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
@@ -116,13 +106,14 @@ export class ResourceListUtil {
         };
     }
 
-    contextComparator(asc) {
+    compareByContext(asc) {
         return (r1, r2) => {
             return asc
                 ? r1.importResource.context.localeCompare(r2.importResource.context)
                 : r2.importResource.context.localeCompare(r1.importResource.context);
         };
     }
+
 }
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',
diff --git a/src/js/angular/models/import/import-resource-tree-element.js b/src/js/angular/models/import/import-resource-tree-element.js
index 076f0cac2..0a5f968e2 100644
--- a/src/js/angular/models/import/import-resource-tree-element.js
+++ b/src/js/angular/models/import/import-resource-tree-element.js
@@ -1,6 +1,5 @@
 import {ImportResourceStatus} from "./import-resource-status";
 import {cloneDeep} from 'lodash';
-import {ResourceListUtil} from "./resource-list-util";
 
 /**
  * Resources have parent-child relations. This class represents one resource element from the parent-child relation tree.
@@ -179,21 +178,21 @@ export class ImportResourceTreeElement {
     }
 
     /**
-     * Returns a utility wrapper of the flattening view of resources parent-child relation tree.
+     * Returns flattening view of resources parent-child relation tree.
      *
-     * @return {ResourceListUtil} a utility wrapper of the flattening view of resources.
+     * @return {ImportResourceTreeElement[]} flattening view of resources.
      */
-    getResourceListUtil() {
+    toList() {
         const result = [];
         if (this.parent) {
             // skip the root element.
             result.push(this);
         }
         this.directories.forEach((directory) => {
-            result.push(...directory.getResourceListUtil().getResourceList);
+            result.push(...directory.toList());
         });
         result.push(...this.files);
-        return new ResourceListUtil(result);
+        return result;
     }
 
     /**
@@ -382,6 +381,6 @@ export class ImportResourceTreeElement {
     }
 
     getSize() {
-        return this.getResourceListUtil().getResourceList.length;
+        return this.toList().length;
     }
 }

From 3e064094bfd1800fb8ff2298ee20000266e6d11b Mon Sep 17 00:00:00 2001
From: "desislava.borisova" <desislava.borisova@ontotext.com>
Date: Fri, 15 Nov 2024 13:44:12 +0200
Subject: [PATCH 7/7] GDB-10692 - refactor wrapper, return sorting to directive

---
 .../import-resource-tree.directive.js         |  63 +++++++--
 .../templates/import-resource-tree.html       |   2 +-
 .../checkbox-control-resource-wrapper.js      | 122 ------------------
 .../models/import/resource-list-wrapper.js    |  73 +++++++++++
 4 files changed, 129 insertions(+), 131 deletions(-)
 delete mode 100644 src/js/angular/models/import/checkbox-control-resource-wrapper.js
 create mode 100644 src/js/angular/models/import/resource-list-wrapper.js

diff --git a/src/js/angular/import/directives/import-resource-tree.directive.js b/src/js/angular/import/directives/import-resource-tree.directive.js
index 0c6f37b52..331c9f7f0 100644
--- a/src/js/angular/import/directives/import-resource-tree.directive.js
+++ b/src/js/angular/import/directives/import-resource-tree.directive.js
@@ -5,7 +5,8 @@ import {SortingType} from "../../models/import/sorting-type";
 import {ImportResourceTreeElement} from "../../models/import/import-resource-tree-element";
 import {TABS} from "../services/import-context.service";
 import {ImportResourceTreeService} from "../services/import-resource-tree.service";
-import {CheckboxControlModel} from "../../models/import/checkbox-control-resource-wrapper";
+import {ResourceListUtil} from "../../models/import/resource-list-wrapper";
+import {convertToBytes} from "../../utils/size-util";
 
 const TYPE_FILTER_OPTIONS = {
     'FILE': 'FILE',
@@ -64,7 +65,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             // =========================
             $scope.resources = new ImportResourceTreeElement();
             $scope.displayResources = [];
-            $scope.checkboxControlModel = undefined;
+            $scope.resourceListUtil = undefined;
             $scope.TYPE_FILTER_OPTIONS = TYPE_FILTER_OPTIONS;
             $scope.filterByType = TYPE_FILTER_OPTIONS.ALL;
             $scope.filterByFileName = '';
@@ -118,11 +119,13 @@ function importResourceTreeDirective($timeout, ImportContextService) {
 
             $scope.filterByTypeChanged = (newType) => {
                 $scope.filterByType = newType;
+                $scope.resourceListUtil.setFilterByType(newType);
                 updateListedImportResources();
             };
 
             $scope.filterByFileNameChanged = (filterByFileName) => {
                 $scope.filterByFileName = filterByFileName;
+                $scope.resourceListUtil.setFilterByName(filterByFileName);
                 debounce(updateListedImportResources, 100);
             };
 
@@ -186,8 +189,8 @@ function importResourceTreeDirective($timeout, ImportContextService) {
             };
 
             $scope.toggleSelectAll = () => {
-                $scope.resources.setSelection(!($scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected ||
-                    $scope.checkboxControlModel.areAllDisplayedImportResourcesSelected));
+                $scope.resources.setSelection(!($scope.resourceListUtil.areAllDisplayedImportResourcesPartialSelected ||
+                    $scope.resourceListUtil.areAllDisplayedImportResourcesSelected));
 
                 updateListedImportResources();
                 setCanResetResourcesFlag();
@@ -207,8 +210,10 @@ function importResourceTreeDirective($timeout, ImportContextService) {
 
             const updateListedImportResources = () => {
                 $scope.resources.getRoot().updateSelectionState();
-                $scope.checkboxControlModel.sortResources($scope.sortedBy, $scope.sortAsc);
-                $scope.displayResources = $scope.checkboxControlModel.getFilteredResources();
+                sortResources();
+                // Update utility class with sorted resources
+                $scope.resourceListUtil.setResourceList($scope.resources);
+                $scope.displayResources = $scope.resourceListUtil.getFilteredResources();
                 updateHasSelection();
                 updateSelectByStateDropdownModel();
             };
@@ -223,10 +228,52 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 const mainCheckbox = element[0].querySelector('#importSelectCheckboxInput');
 
                 if (mainCheckbox) {
-                    mainCheckbox.checked = !!($scope.checkboxControlModel.areAllDisplayedImportResourcesSelected || $scope.checkboxControlModel.areAllDisplayedImportResourcesPartialSelected);
+                    mainCheckbox.checked = $scope.resourceListUtil.areAllDisplayedResourcesSelectedOrPartial();
                 }
             };
 
+            const sortResources = () => {
+                if (SortingType.NAME === $scope.sortedBy) {
+                    $scope.resources.sort(nameComparator($scope.sortAsc));
+                } else if (SortingType.SIZE === $scope.sortedBy) {
+                    $scope.resources.sort(sizeComparator($scope.sortAsc));
+                } else if (SortingType.MODIFIED === $scope.sortedBy) {
+                    $scope.resources.sort(modifiedByComparator($scope.sortAsc));
+                } else if (SortingType.IMPORTED === $scope.sortedBy) {
+                    $scope.resources.sort(importedOnComparator($scope.sortAsc));
+                } else if (SortingType.CONTEXT === $scope.sortedBy) {
+                    $scope.resources.sort(contextComparator($scope.sortAsc));
+                }
+            };
+
+            const nameComparator = (acs) => (r1, r2) => {
+                return acs ? r1.importResource.name.localeCompare(r2.importResource.name) : r2.importResource.name.localeCompare(r1.importResource.name);
+            };
+
+            const sizeComparator = (acs) => (r1, r2) => {
+                // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
+                // Therefore, we convert the size to always be in bytes.
+                const r1Size = convertToBytes(r1.importResource.size);
+                const r2Size = convertToBytes(r2.importResource.size);
+                return acs ? r1Size - r2Size : r2Size - r1Size;
+            };
+
+            const modifiedByComparator = (acs) => (r1, r2) => {
+                const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
+                const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
+                return acs ? r1ModifiedOn - r2ModifiedOn : r2ModifiedOn - r1ModifiedOn;
+            };
+
+            const importedOnComparator = (acs) => (r1, r2) => {
+                const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
+                const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
+                return acs ? r1ImportedOn - r2ImportedOn : r2ImportedOn - r1ImportedOn;
+            };
+
+            const contextComparator = (acs) => (r1, r2) => {
+                return acs ? r1.importResource.context.localeCompare(r2.importResource.context) : r2.importResource.context.localeCompare(r1.importResource.context);
+            };
+
             let debounceTimeout;
             const debounce = (func, delay) => {
                 // Clear previous timeout
@@ -252,7 +299,7 @@ function importResourceTreeDirective($timeout, ImportContextService) {
                 } else {
                     ImportResourceTreeService.mergeResourceTree($scope.resources, newResources, isUserImport);
                 }
-                $scope.checkboxControlModel = new CheckboxControlModel($scope.resources, $scope.filterByType, $scope.filterByFileName);
+                $scope.resourceListUtil = new ResourceListUtil($scope.resources, $scope.filterByType, $scope.filterByFileName);
                 ImportResourceTreeService.calculateElementIndent($scope.resources);
                 ImportResourceTreeService.setupAfterTreeInitProperties($scope.resources);
                 updateListedImportResources();
diff --git a/src/js/angular/import/templates/import-resource-tree.html b/src/js/angular/import/templates/import-resource-tree.html
index b81e9c584..0fc3ff93d 100644
--- a/src/js/angular/import/templates/import-resource-tree.html
+++ b/src/js/angular/import/templates/import-resource-tree.html
@@ -4,7 +4,7 @@
         <div class="import-resources-actions">
             <div class="import-resource-status-dropdown btn-group btn-secondary" uib-dropdown>
                 <input type="checkbox" id="importSelectCheckboxInput" ng-class="{'selected': selectedByStatus}"
-                       prop-indeterminate="checkboxControlModel.areAllDisplayedImportResourcesPartialSelected"
+                       prop-indeterminate="resourceListUtil.areAllDisplayedImportResourcesPartialSelected"
                        ng-click="toggleSelectAll()">
                 <button type="button" uib-dropdown-toggle class="btn btn-secondary dropdown-toggle"
                         ng-class="{'selected': selectedByStatus}">
diff --git a/src/js/angular/models/import/checkbox-control-resource-wrapper.js b/src/js/angular/models/import/checkbox-control-resource-wrapper.js
deleted file mode 100644
index 6a3760fd0..000000000
--- a/src/js/angular/models/import/checkbox-control-resource-wrapper.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import {SortingType} from "./sorting-type";
-import {convertToBytes} from "../../utils/size-util";
-
-export class CheckboxControlModel {
-    constructor(resourceList, filterByTypeOption, filterByFileName) {
-        this.resources = resourceList.toList() || [];
-        this.filterByTypeOption = filterByTypeOption;
-        this.filterByFileName = filterByFileName;
-    }
-
-    get areAllDisplayedImportResourcesSelected() {
-        const filteredResources = this.getFilteredResources();
-        return filteredResources.every((resource) => resource.selected);
-    }
-
-    get areAllDisplayedImportResourcesPartialSelected() {
-        const filteredResources = this.getFilteredResources();
-        const hasUnselected = filteredResources.some((resource) => !resource.selected);
-        const hasSelected = filteredResources.some((resource) => resource.selected);
-        return hasSelected && hasUnselected;
-    }
-
-    filterByType(resource) {
-        switch (this.filterByTypeOption) {
-            case TYPE_FILTER_OPTIONS.ALL:
-                return true;
-            case TYPE_FILTER_OPTIONS.FILE:
-                return resource.isFile();
-            case TYPE_FILTER_OPTIONS.DIRECTORY:
-                return resource.isDirectory();
-            default:
-                return false;
-        }
-    }
-
-    filterByName(resource) {
-        if (!this.filterByFileName) {
-            return true;
-        }
-
-        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.DIRECTORY) {
-            return resource.hasTextInDirectoriesName(this.filterByFileName);
-        }
-
-        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.FILE) {
-            return resource.hasTextInFilesName(this.filterByFileName);
-        }
-
-        return resource.hasTextInResourcesName(this.filterByFileName);
-    }
-
-    getFilteredResources() {
-        return this.resources.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
-    }
-
-    /**
-     * Sorts the resources based on the specified sorting type and order.
-     * @param {string} sortedBy - The sorting type (e.g., NAME, SIZE, MODIFIED).
-     * @param {boolean} sortAsc - Determines whether to sort in ascending order.
-     */
-    sortResources(sortedBy, sortAsc) {
-        if (SortingType.NAME === sortedBy) {
-            this.resources.sort(this.compareByName(sortAsc));
-        } else if (SortingType.SIZE === sortedBy) {
-            this.resources.sort(this.compareBySize(sortAsc));
-        } else if (SortingType.MODIFIED === sortedBy) {
-            this.resources.sort(this.compareByModified(sortAsc));
-        } else if (SortingType.IMPORTED === sortedBy) {
-            this.resources.sort(this.compareByImportedOn(sortAsc));
-        } else if (SortingType.CONTEXT === sortedBy) {
-            this.resources.sort(this.compareByContext(sortAsc));
-        }
-    }
-
-    compareByName(asc) {
-        return (r1, r2) => {
-            return asc
-                ? r1.importResource.name.localeCompare(r2.importResource.name)
-                : r2.importResource.name.localeCompare(r1.importResource.name);
-        };
-    }
-
-    compareBySize(asc) {
-        return (r1, r2) => {
-            // The format of size returned by the backend has changed, but we need to keep the old format for backward compatibility.
-            // Therefore, we convert the size to always be in bytes.
-            const r1Size = convertToBytes(r1.importResource.size);
-            const r2Size = convertToBytes(r2.importResource.size);
-            return asc ? r1Size - r2Size : r2Size - r1Size;
-        };
-    }
-
-    compareByModified(asc) {
-        return (r1, r2) => {
-            const r1ModifiedOn = r1.importResource.modifiedOn || Number.MAX_VALUE;
-            const r2ModifiedOn = r2.importResource.modifiedOn || Number.MAX_VALUE;
-            return asc ? r1ModifiedOn - r2ModifiedOn : r2ModifiedOn - r1ModifiedOn;
-        };
-    }
-
-    compareByImportedOn(asc) {
-        return (r1, r2) => {
-            const r1ImportedOn = r1.importResource.importedOn || Number.MAX_VALUE;
-            const r2ImportedOn = r2.importResource.importedOn || Number.MAX_VALUE;
-            return asc ? r1ImportedOn - r2ImportedOn : r2ImportedOn - r1ImportedOn;
-        };
-    }
-
-    compareByContext(asc) {
-        return (r1, r2) => {
-            return asc
-                ? r1.importResource.context.localeCompare(r2.importResource.context)
-                : r2.importResource.context.localeCompare(r1.importResource.context);
-        };
-    }
-
-}
-const TYPE_FILTER_OPTIONS = {
-    'FILE': 'FILE',
-    'DIRECTORY': 'DIRECTORY',
-    'ALL': 'ALL'
-};
diff --git a/src/js/angular/models/import/resource-list-wrapper.js b/src/js/angular/models/import/resource-list-wrapper.js
new file mode 100644
index 000000000..0802e3f3a
--- /dev/null
+++ b/src/js/angular/models/import/resource-list-wrapper.js
@@ -0,0 +1,73 @@
+export class ResourceListUtil {
+    constructor(resources, filterByTypeOption, filterByFileName) {
+        this.resourceList = resources.toList() || [];
+        this.filterByTypeOption = filterByTypeOption;
+        this.filterByFileName = filterByFileName;
+    }
+
+    get areAllDisplayedImportResourcesSelected() {
+        const filteredResources = this.getFilteredResources();
+        return filteredResources.every((resource) => resource.selected);
+    }
+
+    get areAllDisplayedImportResourcesPartialSelected() {
+        const filteredResources = this.getFilteredResources();
+        const hasUnselected = filteredResources.some((resource) => !resource.selected);
+        const hasSelected = filteredResources.some((resource) => resource.selected);
+        return hasSelected && hasUnselected;
+    }
+
+    areAllDisplayedResourcesSelectedOrPartial() {
+        return !!(this.areAllDisplayedImportResourcesSelected || this.areAllDisplayedImportResourcesPartialSelected);
+    }
+
+    setFilterByType(filterByType) {
+        this.filterByTypeOption = filterByType;
+    }
+
+    setFilterByName(filterByFileName) {
+        this.filterByFileName = filterByFileName;
+    }
+
+    setResourceList(resources) {
+        this.resourceList = resources.toList() || [];
+    }
+
+    filterByType(resource) {
+        switch (this.filterByTypeOption) {
+            case TYPE_FILTER_OPTIONS.ALL:
+                return true;
+            case TYPE_FILTER_OPTIONS.FILE:
+                return resource.isFile();
+            case TYPE_FILTER_OPTIONS.DIRECTORY:
+                return resource.isDirectory();
+            default:
+                return false;
+        }
+    }
+
+    filterByName(resource) {
+        if (!this.filterByFileName) {
+            return true;
+        }
+
+        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.DIRECTORY) {
+            return resource.hasTextInDirectoriesName(this.filterByFileName);
+        }
+
+        if (this.filterByTypeOption === TYPE_FILTER_OPTIONS.FILE) {
+            return resource.hasTextInFilesName(this.filterByFileName);
+        }
+
+        return resource.hasTextInResourcesName(this.filterByFileName);
+    }
+
+    getFilteredResources() {
+        return this.resourceList.filter((resource) => this.filterByType(resource) && this.filterByName(resource));
+    }
+}
+const TYPE_FILTER_OPTIONS = {
+    'FILE': 'FILE',
+    'DIRECTORY': 'DIRECTORY',
+    'ALL': 'ALL'
+};