feat: refactored anchor, added selected pid counter

Signed-off-by: SimoneFiorani <[email protected]>
eclipse-kura · Dec 23, 2024 · d026a81 · d026a81
1 parent c4c77fe
commit d026a81
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 27 deletions.
diff --git a/.../src/main/java/org/eclipse/kura/web/client/ui/settings/PartialSnapshotCheckboxStatus.java b/.../src/main/java/org/eclipse/kura/web/client/ui/settings/PartialSnapshotCheckboxStatus.java
@@ -0,0 +1,26 @@
+package org.eclipse.kura.web.client.ui.settings;
+
+public enum PartialSnapshotCheckboxStatus {
+
+    ALL_VISIBLE_ALL_SELECTED,
+    ALL_VISIBLE_PARTIAL_SELECTED,
+    PARTIAL_VISIBLE_ALL_SELECTED,
+    PARTIAL_VISIBLE_PARTIAL_SELECTED;
+
+    public static PartialSnapshotCheckboxStatus fromVisibleAndSelectedStatus(boolean allVisible, boolean allSelected) {
+        if (allVisible) {
+            if (allSelected) {
+                return PartialSnapshotCheckboxStatus.ALL_VISIBLE_ALL_SELECTED;
+            } else {
+                return PartialSnapshotCheckboxStatus.ALL_VISIBLE_PARTIAL_SELECTED;
+            }
+        } else {
+            if (allSelected) {
+                return PartialSnapshotCheckboxStatus.PARTIAL_VISIBLE_ALL_SELECTED;
+            } else {
+                return PartialSnapshotCheckboxStatus.PARTIAL_VISIBLE_PARTIAL_SELECTED;
+            }
+        }
+    }
+
+}
diff --git a/...ura.web2/src/main/java/org/eclipse/kura/web/client/ui/settings/SnapshotDownloadModal.java b/...ura.web2/src/main/java/org/eclipse/kura/web/client/ui/settings/SnapshotDownloadModal.java
@@ -36,6 +36,7 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.ScrollPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -53,8 +54,12 @@ interface SnapshotDownloadModalUiBinder extends UiBinder<Widget, SnapshotDownloa
     @UiField
     Paragraph formatModalHint;
     @UiField
+    Label searchBoxSeparatorSmall;
+    @UiField
     TextBox pidSearch;
     @UiField
+    Label searchBoxSeparatorBig;
+    @UiField
     ScrollPanel pidSelectionScrollPanel;
     @UiField
     Anchor selectOrRemoveAllAnchor;
@@ -68,8 +73,9 @@ interface SnapshotDownloadModalUiBinder extends UiBinder<Widget, SnapshotDownloa
     Button cancelButton;
     @UiField
     FormLabel noPidSelectedError;
+    @UiField
+    Label selectedPidCounter;
 
-    boolean areAllPidsSelected = true;
     VerticalPanel pidPanel = new VerticalPanel();
 
     HandlerRegistration anchorClickHandler;
@@ -84,6 +90,9 @@ public SnapshotDownloadModal() {
         this.pidSelectionScrollPanel.setVisible(false);
         this.selectOrRemoveAllAnchor.setVisible(false);
         this.noPidSelectedError.setVisible(false);
+        this.selectedPidCounter.setVisible(false);
+        this.searchBoxSeparatorSmall.setVisible(false);
+        this.searchBoxSeparatorBig.setVisible(false);
 
         this.cancelButton.addClickHandler(this::onCancelClick);
 
@@ -100,13 +109,16 @@ public void show(Consumer<SnapshotDownloadOptions> consumer) {
     public void show(Consumer<SnapshotDownloadOptions> consumer, List<String> availablePids) {
         this.snapshotDownloadConsumer = consumer;
         this.noPidSelectedError.setVisible(false);
+        this.searchBoxSeparatorSmall.setVisible(true);
+        this.searchBoxSeparatorBig.setVisible(true);
         this.modal.setTitle(MSGS.deviceSnapshotDownloadModalTitle());
         this.downloadModalDescription.setText(MSGS.deviceSnapshotDownloadModalHint());
         initPidSearch();
         initSnapshotPidList(availablePids);
         initSnapshotSelectAllAnchor();
         initSnapshotScrollPanel();
         initSnapshotDownloadButtons();
+        initSelectedPidCounter();
         this.modal.show();
     }
 
@@ -137,9 +149,8 @@ private void initSnapshotSelectAllAnchor() {
         if (this.anchorClickHandler != null) {
             this.anchorClickHandler.removeHandler();
         }
-        this.areAllPidsSelected = true;
         this.selectOrRemoveAllAnchor.setText(MSGS.removeAllAnchorText());
-        this.anchorClickHandler = this.selectOrRemoveAllAnchor.addClickHandler(this::selectOrRemoveAllSelection);
+        this.anchorClickHandler = this.selectOrRemoveAllAnchor.addClickHandler(this::onSelectOrRemoveAllSelection);
         this.selectOrRemoveAllAnchor.setVisible(true);
     }
 
@@ -174,6 +185,11 @@ private void initSnapshotDownloadButtons() {
         });
     }
 
+    private void initSelectedPidCounter() {
+        updateSelectedPidsCounter();
+        this.selectedPidCounter.setVisible(true);
+    }
+
     /*
      * Wiregraph Snapshot Download Inits
      */
@@ -192,7 +208,7 @@ private void initWiregraphDownloadButtons() {
     }
 
     /*
-     * Utils
+     * OnEvents Methods
      */
 
     private void onSearchBoxEvent(KeyUpEvent event) {
@@ -207,15 +223,21 @@ private void onSearchBoxEvent(KeyUpEvent event) {
                 box.setVisible(box.getText().toLowerCase().contains(searchedPid.toLowerCase()));
             });
         }
+
+        if (this.noPidSelectedError.isVisible()) {
+            this.noPidSelectedError.setVisible(false);
+        }
+
+        updateSelectOrRemoveAllText(checkPidsCheckboxStates());
     }
 
     private void onCheckboxClick(ClickEvent handler) {
         if (noPidSelectedError.isVisible()) {
             noPidSelectedError.setVisible(false);
         }
 
-        checkAllPidsSelected();
-        updateSelectOrRemoveAllText();
+        updateSelectOrRemoveAllText(checkPidsCheckboxStates());
+        updateSelectedPidsCounter();
 
     }
 
@@ -225,6 +247,41 @@ private void onCancelClick(ClickEvent handler) {
         this.noPidSelectedError.setVisible(false);
     }
 
+    private void onSelectOrRemoveAllSelection(ClickEvent handler) {
+        PartialSnapshotCheckboxStatus state = checkPidsCheckboxStates();
+        switch (state) {
+        case ALL_VISIBLE_ALL_SELECTED:
+        case PARTIAL_VISIBLE_ALL_SELECTED: {
+            pidPanel.iterator().forEachRemaining(widget -> {
+                if (widget.isVisible()) {
+                    ((CheckBox) widget).setValue(false);
+                }
+            });
+            break;
+        }
+
+        case ALL_VISIBLE_PARTIAL_SELECTED:
+        case PARTIAL_VISIBLE_PARTIAL_SELECTED:
+            pidPanel.iterator().forEachRemaining(widget -> {
+                if (widget.isVisible()) {
+                    ((CheckBox) widget).setValue(true);
+                }
+            });
+            break;
+        }
+
+        updateSelectOrRemoveAllText(checkPidsCheckboxStates());
+        updateSelectedPidsCounter();
+
+        if (this.noPidSelectedError.isVisible()) {
+            this.noPidSelectedError.setVisible(false);
+        }
+    }
+
+    /*
+     * Utils
+     */
+
     private Optional<List<String>> getSelectedPids() {
         List<String> selectedPids = new ArrayList<>();
         this.pidPanel.iterator().forEachRemaining(pid -> {
@@ -238,12 +295,6 @@ private Optional<List<String>> getSelectedPids() {
         return selectedPids.isEmpty() ? Optional.empty() : Optional.of(selectedPids);
     }
 
-    private void selectOrRemoveAllSelection(ClickEvent handler) {
-        pidPanel.iterator().forEachRemaining(widget -> ((CheckBox) widget).setValue(!this.areAllPidsSelected));
-        this.areAllPidsSelected = !this.areAllPidsSelected;
-        updateSelectOrRemoveAllText();
-    }
-
     private boolean isOnePidSelected() {
         boolean result = false;
         Iterator<Widget> pidPanelIterator = this.pidPanel.iterator();
@@ -258,23 +309,43 @@ private boolean isOnePidSelected() {
         return result;
     }
 
-    private void checkAllPidsSelected() {
+    private PartialSnapshotCheckboxStatus checkPidsCheckboxStates() {
+        boolean areAllVisible = true;
         boolean areAllSelected = true;
+
         Iterator<Widget> pidPanelIterator = this.pidPanel.iterator();
         while (pidPanelIterator.hasNext()) {
-            if (!((CheckBox) pidPanelIterator.next()).getValue().booleanValue()) {
+            Widget widget = pidPanelIterator.next();
+            if (!widget.isVisible()) {
+                areAllVisible = false;
+            }
+
+            if (widget.isVisible() && !((CheckBox) widget).getValue().booleanValue()) {
                 areAllSelected = false;
-                break;
             }
         }
-        this.areAllPidsSelected = areAllSelected;
+
+        return PartialSnapshotCheckboxStatus.fromVisibleAndSelectedStatus(areAllVisible, areAllSelected);
     }
 
-    private void updateSelectOrRemoveAllText() {
-        if (this.areAllPidsSelected) {
+    private void updateSelectOrRemoveAllText(PartialSnapshotCheckboxStatus state) {
+
+        switch (state) {
+        case ALL_VISIBLE_ALL_SELECTED:
             this.selectOrRemoveAllAnchor.setText(MSGS.removeAllAnchorText());
-        } else {
+            break;
+
+        case ALL_VISIBLE_PARTIAL_SELECTED:
             this.selectOrRemoveAllAnchor.setText(MSGS.selectAllAnchorText());
+            break;
+
+        case PARTIAL_VISIBLE_ALL_SELECTED:
+            this.selectOrRemoveAllAnchor.setText(MSGS.removeAllVisibleAnchorText());
+            break;
+
+        case PARTIAL_VISIBLE_PARTIAL_SELECTED:
+            this.selectOrRemoveAllAnchor.setText(MSGS.selectAllVisibleAnchorText());
+            break;
         }
     }
 
@@ -284,4 +355,20 @@ private void resetScrollPanel() {
         this.noPidSelectedError.setVisible(false);
     }
 
+    private void updateSelectedPidsCounter() {
+
+        int selectedPids = 0;
+
+        Iterator<Widget> pidPanelIterator = this.pidPanel.iterator();
+        while (pidPanelIterator.hasNext()) {
+            if (((CheckBox) pidPanelIterator.next()).getValue().booleanValue()) {
+                selectedPids++;
+            }
+        }
+
+        StringBuilder counterTextBuilder = new StringBuilder("Pids Selected ").append(selectedPids).append("/")
+                .append(this.pidPanel.getWidgetCount());
+
+        this.selectedPidCounter.setText(counterTextBuilder.toString());
+    }
 }
diff --git a/...a.web2/src/main/java/org/eclipse/kura/web/client/ui/settings/SnapshotDownloadModal.ui.xml b/...a.web2/src/main/java/org/eclipse/kura/web/client/ui/settings/SnapshotDownloadModal.ui.xml
@@ -28,13 +28,31 @@
 	            color: red;
 	            font-size: 0.35cm;
 	            font-weight: normal;
-	    	}
-	    	.small-spacing {
+	    }
+	    .small-spacing {
 	  	    padding-bottom: 10px;
 		}
-	    	.big-spacing {
+	    .big-spacing {
 		    padding-bottom: 20px;
-	    	}
+	    }
+
+	    .text-button {
+		    background: none;
+		    border: none;
+		    color: blue;
+		    text-decoration: underline;
+		    cursor: pointer;
+		    float: left;
+		}
+
+		.right-label {
+		    margin-left: auto;
+		    float: right;
+		    font-weight: bold;
+		}
+		.horizontal-panel {
+	    	width: 100%;
+	    }
 	</ui:style>
 
     <b:Modal closable="false" fade="true" dataBackdrop="STATIC" ui:field="modal">
@@ -44,16 +62,19 @@
                         <b:FormGroup>
                             <b.html:Paragraph ui:field="downloadModalDescription" />
                             <b.html:Paragraph ui:field="formatModalHint" text="{msgs.formatDownloadHint}" />
-                            <g:Label addStyleNames="{style.small-spacing}"/>
+                            <g:Label ui:field="searchBoxSeparatorSmall" addStyleNames="{style.small-spacing}"/>
                             <b:TextBox placeholder="{msgs.snapshotDownloadSearchBoxPlaceholder}"
-				ui:field="pidSearch" addStyleNames="services-search" />
-			    <g:Label addStyleNames="{style.big-spacing}"/>
+								ui:field="pidSearch" addStyleNames="services-search" />
+						    <g:Label ui:field="searchBoxSeparatorBig" addStyleNames="{style.big-spacing}"/>
                             <g:ScrollPanel ui:field="pidSelectionScrollPanel"></g:ScrollPanel>
                             <b:FormLabel addStyleNames="{style.channel-name-validation-label}" ui:field="noPidSelectedError" text="{msgs.downloadSnapshotError}" />
                         </b:FormGroup>
                     </b:FieldSet>
                 </g:FormPanel>
-                <b:Anchor ui:field="selectOrRemoveAllAnchor" />
+                 <g:HorizontalPanel addStyleNames="{style.horizontal-panel}" >
+			        <b:Anchor ui:field="selectOrRemoveAllAnchor" />
+			        <g:Label ui:field="selectedPidCounter" addStyleNames="{style.right-label}" />
+			    </g:HorizontalPanel>
             </b:ModalBody>
             <b:ModalFooter>
                 <b:Button addStyleNames="fa" type="PRIMARY" ui:field= "cancelButton" text="{msgs.cancelButton}" />

diff --git a/...pse.kura.web2/src/main/resources/org/eclipse/kura/web/client/messages/Messages.properties b/...pse.kura.web2/src/main/resources/org/eclipse/kura/web/client/messages/Messages.properties
@@ -316,7 +316,9 @@ downloadSnapshotXmlButton=Download as XML
 downloadSnapshotJsonButton=Download as JSON
 downloadSnapshotError=Please select at least one pid from the list
 selectAllAnchorText=Select All Pids
+selectAllVisibleAnchorText=Select All Visible Pids
 removeAllAnchorText=Remove All Pids
+removeAllVisibleAnchorText=Remove All Visible Pids
 snapshotDownloadSearchBoxPlaceholder=Filter pids by name...
 
 netIntro=Select a Network Interface and configure it. DHCP Server and NAT can be configured only for interfaces enabled for LAN usage. When applying your changes, your connection to the gateway may be lost depending on your network configuration changes.  

diff --git a/....kura.web2/src/main/resources/org/eclipse/kura/web/client/messages/Messages_ja.properties b/....kura.web2/src/main/resources/org/eclipse/kura/web/client/messages/Messages_ja.properties
@@ -305,7 +305,10 @@ downloadSnapshotXmlButton=XML としてダウンロード
 downloadSnapshotJsonButton=JSON としてダウンロード
 downloadSnapshotError=リストから少なくとも一つの PID を選択してください
 selectAllAnchorText=すべての Pid を選択します
+selectAllVisibleAnchorText=すべての可視 PID を選択
 removeAllAnchorText=すべての PID を削除する
+removeAllVisibleAnchorText=すべての目に見える PID を取除いて下さい
+snapshotDownloadSearchBoxPlaceholder=名前でピドをフィルター...
 
 netIntro=ネットワークインターフェースを選択して設定を変更します。DHCPサーバーとNATはLANの使用が可能なインターフェースに対してのみ設定変更が可能です。変更を適用した際、新しいネットワーク環境設定の内容によっては、ゲートウェイへの接続が遮断される場合があります。
 netInterfaceName=インターフェースの名称