gCubeSystem
/
ckan-metadata-publisher-widget
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added Wizard with list of Steps

This commit is contained in:
Francesco Mangiacrapa 2021-03-15 15:45:09 +01:00
parent 5656ab218b
commit e4b8d6c276
7 changed files with 289 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/form/CreateDatasetForm.java
View File

@ -1,6 +1,7 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.form;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.HashSet;
import java.util.Iterator;
@ -23,6 +24,7 @@ import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.resources.Ad
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.resources.AddedResourcesSummary;
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.tags.TagsPanel;
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.utils.InfoIconsLabels;
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.utils.WizardCreator;
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.workspace.SelectResourceByWEMainPanel;
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.DatasetBean;
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.OrganizationBean;
@ -163,6 +165,8 @@ public class CreateDatasetForm extends Composite{
@UiField ControlGroup versionControlGroup;
@UiField ControlGroup organizationsGroup;
@UiField ControlGroup groupsControlGroup;
@UiField HTMLPanel wizardCreatorPanel;
// Create a remote service proxy to talk to the server-side ckan service.
private final CKanPublisherServiceAsync ckanServices = GWT.create(CKanPublisherService.class);
@ -215,6 +219,7 @@ public class CreateDatasetForm extends Composite{
// map of organization name title
private Map<String, String> nameTitleOrganizationMap = new HashMap<String, String>();
private WizardCreator wizCreator;
/**
* Invoked in the most general case
@ -268,6 +273,18 @@ public class CreateDatasetForm extends Composite{
initWidget(uiBinder.createAndBindUi(this));
this.eventBus = eventBus;
this.isWorkspaceRequest = isWorkspaceRequest;
List<String> listOfSteps = null;
if(isWorkspaceRequest) {
listOfSteps = Arrays.asList("Insert Base Information","Select Item Resources", "Insert Profile Information and Publish");
}else {
listOfSteps = Arrays.asList("Insert Base Information", "Insert Profile Information and Publish");
}
this.wizCreator = new WizardCreator(listOfSteps);
wizardCreatorPanel.add(wizCreator);
bind();
prepareInfoIcons();
@ -854,8 +871,17 @@ public class CreateDatasetForm extends Composite{
// we need to show the page to handle resources one by one from the workspace
formFirstStep.setVisible(false);
formSecondStep.setVisible(!hideManageResources());
formThirdStep.setVisible(hideManageResources());
boolean hideManageRes = hideManageResources();
int stepActive = -1;
if(hideManageRes) {
stepActive = 3;
}else {
stepActive = 2;
}
formSecondStep.setVisible(!hideManageRes);
formThirdStep.setVisible(hideManageRes);
wizCreator.activeStep(stepActive);
// add the resources to the container panel
if(workspaceResourcesContainer.getWidget() == null){
@ -868,6 +894,7 @@ public class CreateDatasetForm extends Composite{
// this is not a workspace request
formFirstStep.setVisible(false);
formThirdStep.setVisible(true);
wizCreator.activeStep(3);
}
@ -884,6 +911,7 @@ public class CreateDatasetForm extends Composite{
// swap forms
formFirstStep.setVisible(true);
wizCreator.activeStep(1);
formSecondStep.setVisible(false);
formThirdStep.setVisible(false);
@ -895,9 +923,18 @@ public class CreateDatasetForm extends Composite{
// swap forms
if(isWorkspaceRequest){
formFirstStep.setVisible(hideManageResources());
formSecondStep.setVisible(!hideManageResources());
boolean hideManageRes = hideManageResources();
int stepActive = -1;
if(hideManageRes) {
stepActive = 1;
}else {
stepActive = 2;
}
formFirstStep.setVisible(hideManageRes);
formSecondStep.setVisible(!hideManageRes);
wizCreator.activeStep(stepActive);
}else{
wizCreator.activeStep(1);
formFirstStep.setVisible(true);
formSecondStep.setVisible(false);
}
@ -911,6 +948,7 @@ public class CreateDatasetForm extends Composite{
// swap forms
formSecondStep.setVisible(false);
formThirdStep.setVisible(true);
wizCreator.activeStep(3);
}

1
src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/form/CreateDatasetForm.ui.xml
View File

@ -50,6 +50,7 @@
}
</ui:style>
<g:HTMLPanel ui:field="createDatasetMainPanel">
<g:HTMLPanel ui:field="wizardCreatorPanel"></g:HTMLPanel>
<b:Form type="HORIZONTAL" styleName="{style.form-main-style}"
ui:field="formFirstStep" visible="true">
<b:Fieldset styleName="{style.fieldset-border-style}">

159
src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/utils/WizardCreator.java Normal file
View File

@ -0,0 +1,159 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.utils;
import java.util.ArrayList;
import java.util.List;
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.openlayerwidget.GeoJsonAreaSelectionDialog;
import org.gcube.portlets.widgets.openlayerbasicwidgets.client.widgets.GeometryType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NodeList;
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.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Widget;
/**
* The Class WizardCreator.
*
* @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
*
* Mar 15, 2021
*/
public class WizardCreator extends Composite {
/** The ui binder. */
private static WizardCreatorUiBinder uiBinder = GWT.create(WizardCreatorUiBinder.class);
/**
* The Interface WizardCreatorUiBinder.
*
* @author Francesco Mangiacrapa at ISTI-CNR (francesco.mangiacrapa@isti.cnr.it)
*
* Mar 15, 2021
*/
interface WizardCreatorUiBinder extends UiBinder<Widget, WizardCreator> {
}
/** The title of steps. */
private List<String> titleOfSteps;
/** The html steps. */
private List<HTML> htmlSteps;
/** The wizard container. */
@UiField
HTMLPanel theWizardContainer;
/**
* Instantiates a new wizard creator.
*
* @param titleOfSteps the title of steps
*/
public WizardCreator(List<String> titleOfSteps) {
initWidget(uiBinder.createAndBindUi(this));
this.titleOfSteps = titleOfSteps;
createSteps();
}
/**
* Creates the steps.
*/
private void createSteps() {
if(titleOfSteps==null)
return;
int i = 1;
htmlSteps = new ArrayList<>(titleOfSteps.size());
for (String step : titleOfSteps) {
HTML toHML = createStep(i, step);
htmlSteps.add(toHML);
theWizardContainer.add(toHML);
i++;
}
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
activeStep(1);
}
});
}
/**
* Active step.
*
* @param stepNumber the step number
*/
public void activeStep(int stepNumber) {
disableAllBadge();
int index = stepNumber-1;
if(index>=0) {
HTML html = htmlSteps.get(index);
html.getElement().addClassName("current");
// NodeList<Element> spans = html.getElement().getElementsByTagName("span");
// if(spans!=null && spans.getLength()>0) {
// Element el = spans.getItem(0);
// el.addClassName("badge-inverse");
// }
}
}
private void disableAllBadge() {
for (HTML html : htmlSteps) {
html.getElement().removeClassName("current");
// NodeList<Element> spans = html.getElement().getElementsByTagName("span");
// if(spans!=null && spans.getLength()>0) {
// Element el = spans.getItem(0);
// el.removeClassName("badge-inverse");
// }
}
}
/**
* Creates the step.
*
* @param stepNumber the step number
* @param stepTitle the step title
* @return the string
*/
private HTML createStep(int stepNumber, String stepTitle) {
StringBuilder builder = new StringBuilder();
builder.append("<span class=\"badge-wiz\">");
builder.append(stepNumber+".");
builder.append("</span>");
builder.append(" "+stepTitle);
return new HTML(builder.toString());
}
public static class HTMLNoDiv extends HTML{
public static HTML noDiv(String theHtml) {
HTML html = new HTML() {
};
html.setHTML(theHtml);
return html;
}
}
}

10
src/main/java/org/gcube/portlets/widgets/ckandatapublisherwidget/client/ui/utils/WizardCreator.ui.xml Normal file
View File

@ -0,0 +1,10 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
<g:HTMLPanel addStyleNames="wizard"
ui:field="theWizardContainer">
</g:HTMLPanel>
</ui:UiBinder>

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

@ -31,7 +31,7 @@
<g:HTMLPanel width="96%">
<g:HTMLPanel>
<b:PageHeader addStyleNames="{style.custom-header}">Publishing Resources</b:PageHeader>
<b:PageHeader addStyleNames="{style.custom-header}">Select Item Resources</b:PageHeader>
<b:Alert ui:field="showAlert" visible="false"></b:Alert>
<g:FlowPanel ui:field="selectResourcesContainer"
width="100%">

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

@ -34,7 +34,7 @@
</ui:style>
<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: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"

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

@ -53,4 +53,78 @@
.accordion-no-border-inner .accordion-inner {
border: 0px;
}
}
/* WIZARD CLASSES */
.wizard {
width: 100%;
border-spacing: 6px;
border-collapse: separate;
display: table;
}
.wizard div {
padding: 10px 12px 10px;
background: #efefef;
position: relative;
/*display: inline-block;*/
display: table-cell;
}
.wizard div:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard div:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard div:first-child:before,
.wizard div:last-child:after {
border: none;
}
.wizard div:first-child {
border-radius: 4px 0 0 4px;
}
.wizard div:last-child {
border-radius: 0 4px 4px 0;
}
.wizard .badge-wiz {
margin: 0 5px 0 18px;
}
.wizard div:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}