in progress on revisiting "Manage Resources"

CHANGELOG.md

@@ -13,6 +13,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 [#20680] Ported to SHUB
 [#19568] Unify and extend the tags allowed values 
 [#20828] Revisited title size and format
+[#20868] Redesigned the "Manage Resources" user experience
 
 
 ## [v1.6.2] - 2021-02-08

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/utils/InfoIconsLabels.java

@@ -70,8 +70,8 @@ public class InfoIconsLabels {
 	// RESOURCES
 	public static final String RESOURCES_INFO_ID_POPUP = "resouces-popup-panel-info";
 	public static final String RESOURCES_INFO_CAPTION = "Manage resource items";
-	public static final String RESOURCES_INFO_TEXT = "Select the files you want to attach to the publishing item. Click on 'Trash' to remote it. Click on 'Edit' for changing resource's name or description."
-			+ " You can add others files by using the 'Add files from...' facility. To navigate a folder perform a 'double click' on it. Please consider that any complex hierarchy structure you may have will be flatten.";
+	public static final String RESOURCES_INFO_TEXT = "Select the files you want to attach to the publishing item. Click on 'Pencil' for changing resource's name or description. Click on 'Trash' to remove the resource."
+			+ " You can add others files by using the 'Add files from...' facility: (i) to navigate a folder perform a 'double click' on it; (ii) to choose a file select it and press 'Select'. Please consider that any complex hierarchy structure you may have will be flatten.";
 
 	// CUSTOM FIELDS
 	public static final String CUSTOM_FIELDS_INFO_ID_POPUP = "custom-fields-popup-panel-info";

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/ResourceInfoForm.java

@@ -75,6 +75,7 @@ public class ResourceInfoForm extends Composite{
 				if(newName == null || newName.isEmpty()){
 					showError(controlName);
 				}else{
+					resourceBean.setName(newName);
 					resourceBean.setEditableName(newName);
 					clearPanel();
 				}

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/ResourceInfoForm.ui.xml

@@ -16,7 +16,6 @@
 		border-radius: 5px;
 		height: 320px;
 		width: 700px;
-		margin-left: 70px;
 		margin-bottom: 20px;
 	}
 	
@@ -32,9 +31,13 @@
 		margin-bottom: 0px !important;
 	}
 	
-	.custom-input input, textarea {
+	.custom-input input {
 		width: 350px;
 	}
+	
+	.custom-input textarea {
+		width: 355px;
+	}
 	</ui:style>
 	<g:HTMLPanel addStyleNames="{style.panel-style}">
 		<b:Form type="HORIZONTAL" width="100%">
@@ -71,7 +74,7 @@
 						<b>Description:</b>
 					</b:ControlLabel>
 					<b:Controls>
-						<b:TextArea placeholder="Resource description"
+						<b:TextArea placeholder="Type here the resource description"
 							b:id="description"
 							title="The description the resource will have on the catalogue"
 							ui:field="resourceDescription"></b:TextArea>

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/SelectResourceByWEMainPanel.java

@@ -1,6 +1,8 @@
 package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.workspace;
 
+import java.util.ArrayList;
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
 import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.ResourceElementBean;
@@ -22,8 +24,8 @@ import com.google.gwt.event.shared.HandlerManager;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.Timer;
-import com.google.gwt.user.client.Window;
 import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.HTMLPanel;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
@@ -41,12 +43,14 @@ public class SelectResourceByWEMainPanel extends Composite {
 	private static SelectResourceByWEMainPanelUiBinder uiBinder = GWT.create(SelectResourceByWEMainPanelUiBinder.class);
 
 	private static boolean frozen = false;
+	
 	private final ResourceElementBean initialBean;
 
 	@UiField
 	VerticalPanel wsContainer;
+	
 	@UiField
-	VerticalPanel selectResourcesContainer;
+	FlowPanel selectResourcesContainer;
 	
 	@UiField
 	Alert showAlert;
@@ -63,14 +67,11 @@ public class SelectResourceByWEMainPanel extends Composite {
 	@UiField
 	Label labelNothing;
 	
-	@UiField
-	HTMLPanel editPanel;
-	
 	private Item selectedWEItem;
 	
 	public final static HandlerManager eventBus = new HandlerManager(null);
 	
-	Map<String, SelectedResourceWidget> mapSelectedResources = new HashMap<String, SelectedResourceWidget>();
+	private Map<String, SelectedResourceWidget> mapSelectedResources = new HashMap<String, SelectedResourceWidget>();
 
 	/**
 	 * The Interface SelectResourceByWEMainPanelUiBinder.
@@ -147,9 +148,9 @@ public class SelectResourceByWEMainPanel extends Composite {
 				containerPickResources.setVisible(false);
 			}
 			
-			if(rootName!=null) {
-				buttPickResources.setHeading("Add files from "+rootName);
-			}
+//			if(rootName!=null) {
+//				buttPickResources.setHeading("Add files from "+rootName);
+//			}
 				
 
 		} catch (Exception e) {
@@ -157,7 +158,7 @@ public class SelectResourceByWEMainPanel extends Composite {
 		}
 		
 		if(!initialBean.isFolder()) {
-			addSelectResource(initialBean.getOriginalIdInWorkspace(), initialBean.getName(),initialBean.getFullPath());
+			addSelectResource(initialBean.getOriginalIdInWorkspace(), initialBean.getName(),initialBean.getFullPath(), initialBean.isFolder());
 		}
 
 		addHandlers();
@@ -171,7 +172,7 @@ public class SelectResourceByWEMainPanel extends Composite {
 			@Override
 			public void onClick(ClickEvent event) {
 				if(selectedWEItem!=null && !selectedWEItem.isFolder()) {
-					addSelectResource(selectedWEItem.getId(), selectedWEItem.getName(), selectedWEItem.getPath());
+					addSelectResource(selectedWEItem.getId(), selectedWEItem.getName(), selectedWEItem.getPath(), selectedWEItem.isFolder());
 				}
 				
 			}
@@ -203,7 +204,7 @@ public class SelectResourceByWEMainPanel extends Composite {
 		showNothingResourceSelected();
 	}
 
-	public void addSelectResource(String wsItemId, String name, String path) {
+	public void addSelectResource(String wsItemId, String name, String path, boolean isFolder) {
 
 		SelectedResourceWidget selWidg = mapSelectedResources.get(wsItemId);
 		if (selWidg != null) {
@@ -216,6 +217,7 @@ public class SelectResourceByWEMainPanel extends Composite {
 		rb.setName(name);
 		rb.setFullPath(path);
 		rb.setEditableName(name);
+		rb.setFolder(isFolder);
 		selWidg = new SelectedResourceWidget(rb);
 		
 		mapSelectedResources.put(wsItemId, selWidg);
@@ -251,32 +253,49 @@ public class SelectResourceByWEMainPanel extends Composite {
 		}
 	}
 
-	public ResourceElementBean getResourcesToPublish() {
-		// TODO Auto-generated method stub
-		Window.alert("getResourcesToPublish() must be implemented");
+
+
+	public void freeze() {
 		
-		/*List<ResourceElementBean> current = dataProviderRight.getList();
+		GWT.log("called freeze into selected resources");
+		frozen = true;
+		selectResourcesContainer.getElement().setAttribute("disabled", "disabled");
+		containerPickResources.getElement().setAttribute("disabled", "disabled");
+		//buttPickResources.getElement().getStyle().setProperty("pointer-events","none");
+		buttSelectResource.setEnabled(false);
+
+	}
+	
+
+	/**
+	 * Returns the root parent with the children as files to save
+	 * @return the resources to save
+	 */
+	public ResourceElementBean getResourcesToPublish(){
 
 		ResourceElementBean toReturn = new ResourceElementBean();
 		List<ResourceElementBean> children = new ArrayList<ResourceElementBean>();
-
-		for (ResourceElementBean resource : current) {
-			if(resource.isToBeAdded() && !resource.isFolder()){ // be sure ...
-				ResourceElementBean beanWithoutChildren = new ResourceElementBean(resource);
-				beanWithoutChildren.setName(resource.getEditableName());
-				children.add(beanWithoutChildren);
+		
+		for (String wsItemId : mapSelectedResources.keySet()) {
+			SelectedResourceWidget selecWC = mapSelectedResources.get(wsItemId);
+			ResourceElementBean theResource = selecWC.getResourceBean();
+			
+			if(!theResource.isFolder()){ // be sure ...
+				children.add(theResource);
 			}
+			
 		}
-
-		toReturn.setToPublish(children);
-		return toReturn;*/
-		return null;
-
+		return toReturn;
 	}
 
-	public void freeze() {
-		// TODO Auto-generated method stub
-		Window.alert("freeze() must be implemented");
+
+	/**
+	 * @return the freezed
+	 */
+	public static boolean isFroozen() {
+
+		return frozen;
 	}
 
+
 }

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/SelectResourceByWEMainPanel.ui.xml

@@ -20,10 +20,6 @@
 		overflow-y: auto;
 	}
 	
-	.no-border {
-		border: 0px !important;
-	}
-	
 	.margin-top-10 {
 		margin-top: 10px;
 	}
@@ -37,18 +33,17 @@
 		<g:HTMLPanel>
 			<b:PageHeader addStyleNames="{style.custom-header}">Publishing Resources</b:PageHeader>
 			<b:Alert ui:field="showAlert" visible="false"></b:Alert>
-			<g:VerticalPanel ui:field="selectResourcesContainer" width="100%">
+			<g:FlowPanel ui:field="selectResourcesContainer"
+				width="100%">
 				<b:Label ui:field="labelNothing">Nothing</b:Label>
-			</g:VerticalPanel>
-			<g:HTMLPanel ui:field="editPanel">
-			</g:HTMLPanel>
+			</g:FlowPanel>
 		</g:HTMLPanel>
 
 		<g:HTMLPanel ui:field="containerPickResources"
 			addStyleNames="{style.margin-top-20}">
 			<b:AccordionGroup ui:field="buttPickResources"
 				heading="Add files from..." defaultOpen="false"
-				addStyleNames="{style.no-border}">
+				addStyleNames="accordion-no-border-inner">
 				<b:FluidRow addStyleNames="{style.max-height-250}">
 					<g:VerticalPanel ui:field="wsContainer">
 					</g:VerticalPanel>

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/SelectedResourceWidget.java

@@ -53,7 +53,10 @@ public class SelectedResourceWidget extends Composite {
 
 	/** The field name. */
 	@UiField
-	Label fieldName;
+	com.github.gwtbootstrap.client.ui.Label fieldName;
+	
+	@UiField
+	Label fieldDescription;
 	
 	/** The edit panel. */
 	@UiField
@@ -69,19 +72,24 @@ public class SelectedResourceWidget extends Composite {
 	 */
 	public SelectedResourceWidget(ResourceElementBean rb) {
 		initWidget(uiBinder.createAndBindUi(this));
-
-		this.resourceBean = rb;
-
-		this.fieldName.setText(rb.getEditableName());
-
 		buttonEdit.setType(ButtonType.LINK);
-
 		buttonDelete.setType(ButtonType.LINK);
-		
+		this.resourceBean = rb;
+		updateFields();
 		addHandlers();
 
 	}
 	
+	private void updateFields() {
+		this.fieldName.setText(resourceBean.getEditableName());
+		
+		if(resourceBean.getDescription()!=null && !resourceBean.getDescription().isEmpty()) {
+			this.fieldDescription.setVisible(true);
+			this.fieldDescription.setText(resourceBean.getDescription());
+		}else
+			this.fieldDescription.setVisible(false);
+	}
+	
 	/**
 	 * Adds the handlers.
 	 */
@@ -91,9 +99,15 @@ public class SelectedResourceWidget extends Composite {
 			
 			@Override
 			public void onClick(ClickEvent event) {
+				editPanel.clear();
+				ResourceInfoForm resourceInformationInfo = new ResourceInfoForm(resourceBean) {
+					protected void onUnload() {
+						super.onUnload();
+						updateFields();
+					};
+				};
+				editPanel.add(resourceInformationInfo);
 				
-				ResourceInfoForm rif = new ResourceInfoForm(resourceBean);
-				editPanel.add(rif);
 			}
 		});
 		

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/workspace/SelectedResourceWidget.ui.xml

@@ -14,14 +14,34 @@
 	.selected-resources td {
 		vertical-align: middle !important;
 	}
+	
+	.margin-bottom-8 {
+		margin-bottom: 8px;
+	}
+	
+	.descr-text {
+		font-style: italic;
+		padding-left: 105px;
+		font-size: 12px;
+	}
+	
+	.icon-my-style {
+		font-size: 1.2em;
+		margin-right: 10px;
+		margin-left: 10px;
+		vertical-align: middle;
+	}
 	</ui:style>
-	<g:HTMLPanel>
+	<g:HTMLPanel addStyleNames="{style.margin-bottom-8}">
 		<g:FlowPanel addStyleNames="{style.selected-resources}">
+			<b:Icon type="PUSHPIN" addStyleNames="{style.icon-my-style}"></b:Icon>
+			<b:Button ui:field="buttonEdit" icon="PENCIL"
+				title="Edit the resource information" />
 			<b:Button ui:field="buttonDelete" icon="TRASH"
 				title="Remove this resource" />
-			<b:Button ui:field="buttonEdit" icon="PENCIL"
-				title="Edit the resource title" />
 			<b:Label ui:field="fieldName"></b:Label>
+			<g:Label ui:field="fieldDescription" visible="false"
+				addStyleNames="{style.descr-text}"></g:Label>
 		</g:FlowPanel>
 		<g:HTMLPanel ui:field="editPanel"></g:HTMLPanel>
 	</g:HTMLPanel>

src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/public/CKanMetadataPublisher.css

@@ -49,4 +49,8 @@
 
 .GeoJson-DialogBox{
 	width: 100% !important;
+}
+
+.accordion-no-border-inner .accordion-inner {
+	border: 0px;
 }