gCubeSystem
/
geoportal-data-entry-app
14
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

#21990 Integrated with JSONEditor, Improved general CSS

This commit is contained in:
Francesco Mangiacrapa 2021-09-20 18:08:43 +02:00
parent a551e572c5
commit 48d19b6f10
11 changed files with 258 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/GeoPortalDataEntryApp.java
View File

@ -25,6 +25,7 @@ import org.gcube.portlets.user.geoportaldataentry.client.events.SaveGeonaDataFor
import org.gcube.portlets.user.geoportaldataentry.client.ui.GeonaMainTabPanel;
import org.gcube.portlets.user.geoportaldataentry.client.ui.GeonaRecordsPaginatedView;
import org.gcube.portlets.user.geoportaldataentry.client.ui.card.GeoNaFormCardModel;
import org.gcube.portlets.user.geoportaldataentry.client.ui.edit.EditModeRecord;
import org.gcube.portlets.user.geoportaldataentry.client.ui.form.GeonaDataEntryMainForm;
import org.gcube.portlets.user.geoportaldataentry.client.ui.report.BuildValidationReport;
import org.gcube.portlets.user.geoportaldataentry.client.ui.report.ReportTemplateToHTML;
@ -43,7 +44,6 @@ import org.gcube.portlets.widgets.mpformbuilder.client.form.generic.CreateMetada
import org.gcube.portlets.widgets.mpformbuilder.shared.metadata.MetaDataProfileBean;
import com.github.gwtbootstrap.client.ui.Alert;
import com.github.gwtbootstrap.client.ui.Heading;
import com.github.gwtbootstrap.client.ui.Modal;
import com.github.gwtbootstrap.client.ui.constants.AlertType;
import com.google.gwt.core.client.EntryPoint;
@ -74,10 +74,7 @@ public class GeoPortalDataEntryApp implements EntryPoint {
private static final String DIV_PORTLET_ID = "geoportal-data-entry";
/**
* Create a remote service proxy to talk to the server-side Greeting service.
*/
public static final GeoportalDataEntryServiceAsync greetingService = GWT.create(GeoportalDataEntryService.class);
public static final GeoportalDataEntryServiceAsync geoportalDataEntryService = GWT.create(GeoportalDataEntryService.class);
private final HandlerManager appManagerBus = new HandlerManager(null);
@ -153,6 +150,7 @@ public class GeoPortalDataEntryApp implements EntryPoint {
int topBorder = workspace.getAbsoluteTop();
int footer = 85; // footer is bottombar + sponsor
int headerSize = 90;
//int headerSize = 30;
int rootHeight = Window.getClientHeight() - topBorder - headerSize - footer;// - ((footer ==
// null)?0:(footer.getOffsetHeight()-15));
@ -523,11 +521,12 @@ public class GeoPortalDataEntryApp implements EntryPoint {
case EDIT_RECORD:
final Modal modal3 = new Modal(true, true);
modal3.setTitle("Edit <div style='color:#555; font-size:22px;'>"+concessione.getNome()+"</div>");
modal3.setWidth(800);
modal3.setWidth(950);
modal3.setHeight("700px");
modal3.setCloseVisible(true);
modal3.add(new Heading(1, "Under construction..."));
EditModeRecord emr = new EditModeRecord(concessione,RECORD_TYPE.CONCESSIONE);
modal3.add(emr);
modal3.show();
break;
case DELETE_RECORD:

12
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/GeonaMainTabPanel.ui.xml
View File

@ -35,16 +35,20 @@
.max-height-300 {
max-height: auto;
}
.margin-botttom-5 {
margin-bottom: 5px !important;
}
</ui:style>
<g:HTMLPanel>
<b:PageHeader subtext="data entry facility"
styleName="{style.custom-page-header}">GeoNa</b:PageHeader>
<b:TabPanel tabPosition="top" ui:field="tabPanel">
<b:TabPanel tabPosition="above" ui:field="tabPanel">
<b:Tab icon="FILE_TEXT" heading="New Project" active="true"
ui:field="tabNewProject">
<g:ScrollPanel>
<g:HTMLPanel ui:field="contTabNewProject">
<b:Navbar>
<g:HTMLPanel ui:field="contTabNewProject">
<b:Navbar addStyleNames="{style.margin-botttom-5}">
<b:Brand addStyleNames="{style.margin-top-5}">New Project</b:Brand>
<b:Nav>
<b:NavLink ui:field="buttCreateNewProject"
@ -68,7 +72,7 @@
ui:field="tabGetListOfProjects">
<g:ScrollPanel>
<g:HTMLPanel ui:field="contTabGetListOfProjects">
<b:Navbar>
<b:Navbar addStyleNames="{style.margin-botttom-5}">
<b:Brand addStyleNames="{style.margin-top-5}">List of Projects</b:Brand>
<b:Nav>
<b:Dropdown text="Sort by" ui:field="dropdownSortBy">

2
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/GeonaRecordsPaginatedView.java
View File

@ -203,7 +203,7 @@ public class GeonaRecordsPaginatedView {
GWT.log("calling loadItemsForStatus with parameters [startIndex: " + newStartIndex + ", limit: " + limit
+ ", serverIndex:" + serverIndex + ", sortFilter: " + sortFilter + "]");
GeoPortalDataEntryApp.greetingService.getListConcessioni(newStartIndex, limit, sortFilter, invalidCache,
GeoPortalDataEntryApp.geoportalDataEntryService.getListConcessioni(newStartIndex, limit, sortFilter, invalidCache,
new AsyncCallback<ResultSetPaginatedData>() {
@Override

111
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/edit/EditModeRecord.java Normal file
View File

@ -0,0 +1,111 @@
package org.gcube.portlets.user.geoportaldataentry.client.ui.edit;
import org.gcube.application.geoportalcommon.shared.products.BaseConcessioneDV;
import org.gcube.portlets.user.geoportaldataentry.client.ConstantsGeoPortalDataEntryApp.RECORD_TYPE;
import org.gcube.portlets.user.geoportaldataentry.client.GeoPortalDataEntryApp;
import org.gcube.portlets.user.geoportaldataentry.client.ui.edit.jseditor.MyJSONEditor;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Widget;
/**
* The Class EditModeRecord.
*
* @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
*
* Sep 17, 2021
*/
public class EditModeRecord extends Composite {
private static EditModeRecordUiBinder uiBinder = GWT.create(EditModeRecordUiBinder.class);
@UiField
FlowPanel rawUpdatePanel;
@UiField
FlowPanel filesUpdatePanel;
private BaseConcessioneDV selectedConcessione;
/**
* The Interface EditModeRecordUiBinder.
*
* @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
*
* Sep 17, 2021
*/
interface EditModeRecordUiBinder extends UiBinder<Widget, EditModeRecord> {
}
/**
* Instantiates a new edits the mode record.
*
* @param selectedConcessione the selected concessione
* @param type the type
*/
public EditModeRecord(BaseConcessioneDV selectedConcessione, RECORD_TYPE type) {
initWidget(uiBinder.createAndBindUi(this));
this.selectedConcessione = selectedConcessione;
final FlowPanel fp = new FlowPanel();
fp.getElement().setId("jsoneditor"+Random.nextInt());
fp.setHeight("400px");
rawUpdatePanel.add(fp);
GeoPortalDataEntryApp.geoportalDataEntryService.getJSONRecord(selectedConcessione.getItemId(), type, new AsyncCallback<String>() {
@Override
public void onSuccess(String jsonData) {
GWT.log("Instance JSON Editor with: "+jsonData);
//jsonEditor = ExternalLib.instanceJSONEditor(fp.getElement().getId(), jsonData);
//String updated = ExternalLib.getUpdatedJSON(jsonEditor);
//JSONEditor constuctor = new JSONEditor(fp.getElement(),"{}");
final MyJSONEditor jsEditor = MyJSONEditor.init(fp.getElement().getId());
jsEditor.setName(selectedConcessione.getNome());
// JSONValue jsValue = JSONParser.parse(jsonData);
// JSONObject extraJSONObject = jsValue.isObject();
jsEditor.set(jsonData);
new Timer() {
@Override
public void run() {
jsEditor.setMode("tree");
}
}.schedule(200);
//GWT.log("Updated: "+updated.toString());
//org.gcube.portlets.user.geoportaldataentry.client.ui.utils.JSONEditor editor = JE.jsoneditor(fp.getElement(), jsonData);
//rawUpdatePanel.add(new Widget(editor));
}
@Override
public void onFailure(Throwable caught) {
// TODO Auto-generated method stub
}
});
bindEvents();
}
/**
* Bind events.
*/
private void bindEvents() {
// TODO Auto-generated method stub
}
}

31
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/edit/EditModeRecord.ui.xml Normal file
View File

@ -0,0 +1,31 @@
<!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">
<ui:style>
.important {
font-weight: bold;
}
</ui:style>
<g:HTMLPanel>
<b:TabPanel tabPosition="left" ui:field="tabPanel">
<b:Tab icon="PENCIL" active="true" heading="Edit the code"
ui:field="tabRawUpdate">
<b:Heading size="3">Raw Project Editor</b:Heading>
<g:FlowPanel ui:field="rawUpdatePanel">
</g:FlowPanel>
</b:Tab>
<b:Tab icon="UPLOAD_ALT" heading="Update File/s"
ui:field="tabUploadFiles">
<b:Heading size="3">Update the file/s</b:Heading>
<b:Label>By choosing a section (e.g. "RELAZIONE di
SCAVO") and
uploading new file/s the old one/s will be replaced</b:Label>
<g:FlowPanel ui:field="filesUpdatePanel">
</g:FlowPanel>
</b:Tab>
</b:TabPanel>
</g:HTMLPanel>
</ui:UiBinder>

48
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/edit/jseditor/MyJSONEditor.java Normal file
View File

@ -0,0 +1,48 @@
package org.gcube.portlets.user.geoportaldataentry.client.ui.edit.jseditor;
import com.google.gwt.core.client.JavaScriptObject;
public class MyJSONEditor extends JavaScriptObject {
// 6131f0d902ad3d2580412d14
protected MyJSONEditor() {
}
public static native MyJSONEditor init(String divID) /*-{
var container = $doc.getElementById(divID);
var options = {
modes : ['code','tree'],
search: true,
onError : function(error) {
console.log("MyJSONEditor error: " + error)
}
};
console.log("container is: " + container);
return new $wnd.JSONEditor(container, options);
}-*/;
public final native void set(String json) /*-{
var toJSONObject = JSON.parse(json);
// set json
console.log("displayng JSON: " + toJSONObject);
this.set(toJSONObject);
this.refresh();
}-*/;
public final native void get() /*-{
this.get();
}-*/;
public final native void onError() /*-{
this.onError(error);
}-*/;
public final native void setMode(String mode) /*-{
this.setMode(mode);
}-*/;
public final native void setName(String rootName) /*-{
this.setName(rootName);
}-*/;
}

10
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/report/ReportTemplateToHTML.java
View File

@ -1,5 +1,7 @@
package org.gcube.portlets.user.geoportaldataentry.client.ui.report;
import org.gcube.portlets.user.geoportaldataentry.client.ui.utils.ExternalLib;
import com.github.gwtbootstrap.client.ui.Paragraph;
import com.google.gwt.core.client.GWT;
import com.google.gwt.json.client.JSONArray;
@ -80,16 +82,10 @@ public class ReportTemplateToHTML extends Composite {
e.printStackTrace();
GWT.log("error: " + e.getMessage());
}
reportJSON.add(new HTML("<pre>" + toPrettyPrintJSON(reportAsJSON) + "</pre>"));
reportJSON.add(new HTML("<pre>" + ExternalLib.toPrettyPrintJSON(reportAsJSON) + "</pre>"));
}
}
public static native String toPrettyPrintJSON(String jsonData)/*-{
console.log(jsonData);
var objJSON = JSON.parse(jsonData);
return $wnd.prettyPrintJson.toHtml(objJSON);
}-*/;
/**
* Json to HTML.
*

23
src/main/java/org/gcube/portlets/user/geoportaldataentry/client/ui/utils/ExternalLib.java Normal file
View File

@ -0,0 +1,23 @@
package org.gcube.portlets.user.geoportaldataentry.client.ui.utils;
/**
* The Class ExternalLib.
*
* @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
*
* Sep 17, 2021
*/
public class ExternalLib {
/**
* To pretty print JSON. calls the externa js lib 'pretty-print-json'
*
* @param jsonData the json data
* @return the string
*/
public static native String toPrettyPrintJSON(String jsonData)/*-{
//console.log(jsonData);
var objJSON = JSON.parse(jsonData);
return $wnd.prettyPrintJson.toHtml(objJSON);
}-*/;
}

7
src/main/java/org/gcube/portlets/user/geoportaldataentry/server/MongoServiceUtil.java
View File

@ -5,7 +5,6 @@ import static org.gcube.application.geoportal.client.GeoportalAbstractPlugin.mon
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.InputStream;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Comparator;
import java.util.List;
@ -98,10 +97,10 @@ public class MongoServiceUtil {
LOG.debug("toJSON called");
try {
if (theObj instanceof Serializable) {
// if (theObj instanceof Serializable) {
return org.gcube.application.geoportal.client.utils.Serialization.write(theObj);
}
throw new Exception("The input object is not serializable");
// }
// throw new Exception("The input object is not serializable");
} catch (Exception e) {
LOG.warn("Error on deserializing: ", e);

9
src/main/webapp/GeoPortalDataEntryApp.html
View File

@ -22,6 +22,15 @@
src="//cdn.jsdelivr.net/npm/pretty-print-json@1.1/dist/pretty-print-json.min.js"
type="text/javascript"></script>
<link
href="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.5/jsoneditor.min.css"
rel="stylesheet" type="text/css">
<script
src="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.5/jsoneditor.min.js"
type="text/javascript"></script>
<!-- -->
<!-- Any title is fine -->

19
src/main/webapp/WEB-INF/jsp/GeoPortalDataEntryAppPortlet_view.jsp
View File

@ -13,10 +13,6 @@
<script
src='<%=request.getContextPath()%>/GeoPortalDataEntryApp/js/bootstrap.min.js'></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/GeoPortalDataEntryApp.css"
type="text/css">
<link
href="//cdn.jsdelivr.net/npm/pretty-print-json@1.1/dist/pretty-print-json.css"
rel="stylesheet" type="text/css">
@ -24,15 +20,28 @@
src="//cdn.jsdelivr.net/npm/pretty-print-json@1.1/dist/pretty-print-json.min.js"
type="text/javascript"></script>
<link
href="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.5/jsoneditor.min.css"
rel="stylesheet" type="text/css">
<script
src="//cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.5.5/jsoneditor.min.js"
type="text/javascript"></script>
<link type="text/css" rel="stylesheet"
href="<%=request.getContextPath()%>/GeoPortalDataEntryApp/css/ol.css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/GeoPortalDataEntryApp/js/ol.js"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/GeoPortalDataEntryApp.css"
type="text/css">
<script type="text/javascript"
src="<%=request.getContextPath()%>/GeoPortalDataEntryApp/GeoPortalDataEntryApp.nocache.js"></script>
<!-- <script type="text/javascript"
src='<%=request.getContextPath()%>/js/jquery.autosize.js'></script> -->