Added Wizard with list of Steps
This commit is contained in:
parent
5656ab218b
commit
e4b8d6c276
|
@ -1,6 +1,7 @@
|
||||||
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.form;
|
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.form;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
|
import java.util.Arrays;
|
||||||
import java.util.HashMap;
|
import java.util.HashMap;
|
||||||
import java.util.HashSet;
|
import java.util.HashSet;
|
||||||
import java.util.Iterator;
|
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.resources.AddedResourcesSummary;
|
||||||
import org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.tags.TagsPanel;
|
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.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.client.ui.workspace.SelectResourceByWEMainPanel;
|
||||||
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.DatasetBean;
|
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.DatasetBean;
|
||||||
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.OrganizationBean;
|
import org.gcube.portlets.widgets.ckandatapublisherwidget.shared.OrganizationBean;
|
||||||
|
@ -163,6 +165,8 @@ public class CreateDatasetForm extends Composite{
|
||||||
@UiField ControlGroup versionControlGroup;
|
@UiField ControlGroup versionControlGroup;
|
||||||
@UiField ControlGroup organizationsGroup;
|
@UiField ControlGroup organizationsGroup;
|
||||||
@UiField ControlGroup groupsControlGroup;
|
@UiField ControlGroup groupsControlGroup;
|
||||||
|
|
||||||
|
@UiField HTMLPanel wizardCreatorPanel;
|
||||||
|
|
||||||
// Create a remote service proxy to talk to the server-side ckan service.
|
// Create a remote service proxy to talk to the server-side ckan service.
|
||||||
private final CKanPublisherServiceAsync ckanServices = GWT.create(CKanPublisherService.class);
|
private final CKanPublisherServiceAsync ckanServices = GWT.create(CKanPublisherService.class);
|
||||||
|
@ -215,6 +219,7 @@ public class CreateDatasetForm extends Composite{
|
||||||
|
|
||||||
// map of organization name title
|
// map of organization name title
|
||||||
private Map<String, String> nameTitleOrganizationMap = new HashMap<String, String>();
|
private Map<String, String> nameTitleOrganizationMap = new HashMap<String, String>();
|
||||||
|
private WizardCreator wizCreator;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Invoked in the most general case
|
* Invoked in the most general case
|
||||||
|
@ -268,6 +273,18 @@ public class CreateDatasetForm extends Composite{
|
||||||
initWidget(uiBinder.createAndBindUi(this));
|
initWidget(uiBinder.createAndBindUi(this));
|
||||||
this.eventBus = eventBus;
|
this.eventBus = eventBus;
|
||||||
this.isWorkspaceRequest = isWorkspaceRequest;
|
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();
|
bind();
|
||||||
prepareInfoIcons();
|
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
|
// we need to show the page to handle resources one by one from the workspace
|
||||||
formFirstStep.setVisible(false);
|
formFirstStep.setVisible(false);
|
||||||
formSecondStep.setVisible(!hideManageResources());
|
boolean hideManageRes = hideManageResources();
|
||||||
formThirdStep.setVisible(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
|
// add the resources to the container panel
|
||||||
if(workspaceResourcesContainer.getWidget() == null){
|
if(workspaceResourcesContainer.getWidget() == null){
|
||||||
|
@ -868,6 +894,7 @@ public class CreateDatasetForm extends Composite{
|
||||||
// this is not a workspace request
|
// this is not a workspace request
|
||||||
formFirstStep.setVisible(false);
|
formFirstStep.setVisible(false);
|
||||||
formThirdStep.setVisible(true);
|
formThirdStep.setVisible(true);
|
||||||
|
wizCreator.activeStep(3);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -884,6 +911,7 @@ public class CreateDatasetForm extends Composite{
|
||||||
|
|
||||||
// swap forms
|
// swap forms
|
||||||
formFirstStep.setVisible(true);
|
formFirstStep.setVisible(true);
|
||||||
|
wizCreator.activeStep(1);
|
||||||
formSecondStep.setVisible(false);
|
formSecondStep.setVisible(false);
|
||||||
formThirdStep.setVisible(false);
|
formThirdStep.setVisible(false);
|
||||||
|
|
||||||
|
@ -895,9 +923,18 @@ public class CreateDatasetForm extends Composite{
|
||||||
|
|
||||||
// swap forms
|
// swap forms
|
||||||
if(isWorkspaceRequest){
|
if(isWorkspaceRequest){
|
||||||
formFirstStep.setVisible(hideManageResources());
|
boolean hideManageRes = hideManageResources();
|
||||||
formSecondStep.setVisible(!hideManageResources());
|
int stepActive = -1;
|
||||||
|
if(hideManageRes) {
|
||||||
|
stepActive = 1;
|
||||||
|
}else {
|
||||||
|
stepActive = 2;
|
||||||
|
}
|
||||||
|
formFirstStep.setVisible(hideManageRes);
|
||||||
|
formSecondStep.setVisible(!hideManageRes);
|
||||||
|
wizCreator.activeStep(stepActive);
|
||||||
}else{
|
}else{
|
||||||
|
wizCreator.activeStep(1);
|
||||||
formFirstStep.setVisible(true);
|
formFirstStep.setVisible(true);
|
||||||
formSecondStep.setVisible(false);
|
formSecondStep.setVisible(false);
|
||||||
}
|
}
|
||||||
|
@ -911,6 +948,7 @@ public class CreateDatasetForm extends Composite{
|
||||||
// swap forms
|
// swap forms
|
||||||
formSecondStep.setVisible(false);
|
formSecondStep.setVisible(false);
|
||||||
formThirdStep.setVisible(true);
|
formThirdStep.setVisible(true);
|
||||||
|
wizCreator.activeStep(3);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -50,6 +50,7 @@
|
||||||
}
|
}
|
||||||
</ui:style>
|
</ui:style>
|
||||||
<g:HTMLPanel ui:field="createDatasetMainPanel">
|
<g:HTMLPanel ui:field="createDatasetMainPanel">
|
||||||
|
<g:HTMLPanel ui:field="wizardCreatorPanel"></g:HTMLPanel>
|
||||||
<b:Form type="HORIZONTAL" styleName="{style.form-main-style}"
|
<b:Form type="HORIZONTAL" styleName="{style.form-main-style}"
|
||||||
ui:field="formFirstStep" visible="true">
|
ui:field="formFirstStep" visible="true">
|
||||||
<b:Fieldset styleName="{style.fieldset-border-style}">
|
<b:Fieldset styleName="{style.fieldset-border-style}">
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
|
@ -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>
|
|
@ -31,7 +31,7 @@
|
||||||
<g:HTMLPanel width="96%">
|
<g:HTMLPanel width="96%">
|
||||||
|
|
||||||
<g:HTMLPanel>
|
<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>
|
<b:Alert ui:field="showAlert" visible="false"></b:Alert>
|
||||||
<g:FlowPanel ui:field="selectResourcesContainer"
|
<g:FlowPanel ui:field="selectResourcesContainer"
|
||||||
width="100%">
|
width="100%">
|
||||||
|
|
|
@ -34,7 +34,7 @@
|
||||||
</ui:style>
|
</ui:style>
|
||||||
<g:HTMLPanel addStyleNames="{style.margin-bottom-8}">
|
<g:HTMLPanel addStyleNames="{style.margin-bottom-8}">
|
||||||
<g:FlowPanel addStyleNames="{style.selected-resources}">
|
<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"
|
<b:Button ui:field="buttonEdit" icon="PENCIL"
|
||||||
title="Edit the resource information" />
|
title="Edit the resource information" />
|
||||||
<b:Button ui:field="buttonDelete" icon="TRASH"
|
<b:Button ui:field="buttonDelete" icon="TRASH"
|
||||||
|
|
|
@ -53,4 +53,78 @@
|
||||||
|
|
||||||
.accordion-no-border-inner .accordion-inner {
|
.accordion-no-border-inner .accordion-inner {
|
||||||
border: 0px;
|
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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue