Skip to content

Commit

Permalink
Add front end design changes based on json changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@SinthujanSintha
SinthujanSintha committed Jan 28, 2020
1 parent 9191de8 commit 88cbc98
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 128 deletions.
1 change: 1 addition & 0 deletions ...s/org.wso2.carbon.siddhi.editor.core/src/main/resources/web/editor/commons/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1844,6 +1844,7 @@ div.consoleIcon {
font-weight: bold;
}

.partial-extension-install-btn,
.extension-install-btn {
color: whitesmoke;
}
138 changes: 82 additions & 56 deletions ...i.editor.core/src/main/resources/web/editor/commons/js/dialog/extension-install-dialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
* Copyright (c) 2020, WSO2 Inc. (http://www.wso2.org) Apache License, Version 2.0
* http://www.apache.org/licenses/LICENSE-2.0
*/
define(['require', 'lodash', 'jquery','constants'],
function (require, _, $,Constants) {
define(['require', 'lodash', 'jquery', 'constants'],
function (require, _, $, Constants) {
return function (app) {

/**
* initialize function for ExtensionInstallDialog.
*/
this.initialize = function (options) {
this.dialog_containers = $(_.get(options.config.dialog, 'container'));
this.extensionList = app.utils.getExtensionDetails();
this.extensionList = app.utils.getExtensionDetailsMap();
},
/**
* show function for display the ExtensionInstallDialog.
Expand Down Expand Up @@ -82,75 +82,49 @@ define(['require', 'lodash', 'jquery','constants'],
});
var extensionContainer = extensionModelOpen.find("div").filter("#extensionTableId");


//extension array from backend which has details about extensions.
var extensionLists = app.utils.getExtensionDetails();
//extension objects from backend which has details about extensions.
var extensionLists = app.utils.getExtensionDetailsMap();
var extensionTable = $('<table class="table table-hover data-table"' +
' id="extensionTableId"><tbody></tbody></table>');
//define the map to store Partially extension modal based on key
var partialExtensionDetailModal = new Map();
extensionLists.forEach(function (extension) {
extensionLists.forEach(function (extension, key) {
var extensionTableBodyData;
if (extension.status.trim().toLowerCase() === Constants.EXTENSION_INSTALLED) {
extensionTableBodyData = $('<tr><td>' + extension.name + '</td><td>Installed</td><td><button' +

if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_INSTALLED) {
extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Installed</td><td><button' +
' class="btn btn-block btn' +
' btn-primary">UnInstall</button></td></tr>');
' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
extensionTableBodyData.find("button").click(function () {
app.utils.extensionUpdate(extension);
});
} else if (extension.status.trim().toLowerCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
var partialExtensionIndex = extensionLists.indexOf(extension);
extensionTableBodyData = $('<tr><td>' + extension.name + '</td><td>Partially-Installed' +
} else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_PARTIALLY_INSTALLED) {
extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Partially-Installed' +
'&nbsp; &nbsp;<a data-toggle="modal"' +
' id="' + partialExtensionIndex + '"><i class="fw' +
' id="' + key + '"><i class="fw' +
' fw-info"></i></a></td><td><button' +
' class="btn btn-block btn' +
' btn-primary">UnInstall</button></td></tr>');

var partialModel = $(
'<div class="modal fade" id="' + partialExtensionIndex + '">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
"<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
"<i class=\"fw fw-cancel about-dialog-close\"></i>" +
"</button>" +
'<h3 class="modal-title file-dialog-title" id="partialExtenName">'
+ extension.name +
'</h3>' +
'<hr class="style1">' +
'</div>' +
'<div class="modal-body">' +
'<h3>Description</h3>' +
'<div id="partialExtenDescription" style = "text-align:justify">'
+ extension.info.description +
'</div>' +
'<h3>Install</h3>' +
'<div id="partialExtenInstall" style = "text-align:justify" >'
+ extension.info.install +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');

partialExtensionDetailModal.set(partialExtensionIndex, partialModel);

extensionTableBodyData.find("a").filter("#" + partialExtensionIndex).click(function () {
extensionPartialModelDisplay(partialExtensionDetailModal.get(partialExtensionIndex));
});

' btn-primary">' + Constants.UNINSTALL + '</button></td></tr>');
createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
extensionTableBodyData.find("button").click(function () {
app.utils.extensionUpdate(extension);
});

} else if (extension.status.trim().toLowerCase() === Constants.EXTENSION_NOT_INSTALLED) {
extensionTableBodyData = $('<tr><td>' + extension.name + '</td><td>Not-Installed</td><td><button' +
' class="btn btn-block btn' +
' btn-primary">Install</button></td></tr>');
} else if (extension.extensionStatus.trim().toUpperCase() === Constants.EXTENSION_NOT_INSTALLED) {
if (extension.manuallyInstall) {
extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed' +
'&nbsp; &nbsp;<a data-toggle="modal"' +
' id="' + key + '"><i class="fw' +
' fw-info"></i></a></td><td><button' +
' class="btn btn-block btn' +
' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData);
} else {
extensionTableBodyData = $('<tr><td>' + extension.extensionInfo.name + '</td><td>Not-Installed</td><td><button' +
' class="btn btn-block btn' +
' btn-primary">' + Constants.INSTALL + '</button></td></tr>');
}

extensionTableBodyData.find("button").click(function () {
app.utils.extensionUpdate(extension);
});
Expand All @@ -167,6 +141,58 @@ define(['require', 'lodash', 'jquery','constants'],
extensionInstallError.hide();
this._extensionListModal = extensionModelOpen;

/**
* create a alert details model box for extension dependency.
* @param extension object
* @param key map key for object
* @param extensionTableBodyData is modal body
*/
function createAlertModalBoxForNotAndPartialExtension(extension, key, extensionTableBodyData) {
var partialModel = $(
'<div class="modal fade" id="' + key + '">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
"<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
"<i class=\"fw fw-cancel about-dialog-close\"></i>" +
"</button>" +
'<h2 class="modal-title file-dialog-title" id="partialExtenName">'
+ extension.extensionInfo.name +
'</h2>' +
'<hr class="style1">' +
'</div>' +
'<div id="modalBodyId" class="modal-body">' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>');

var modalBody = partialModel.find("div").filter("#modalBodyId");

if (extension.manuallyInstall) {
extension.manuallyInstall.forEach(function (dependency) {
modalBody.append($('<h3>' + dependency.name + ' </h3>' +
'<h4>Description</h4>' +
'<div id="partialExtenDescription" style = "text-align:justify">'
+ dependency.download.info.description +
'</div>' +
'<h4>Install</h4>' +
'<div id="partialExtenInstall" style = "text-align:justify" >'
+ dependency.download.info.install +
'</div>'));
});
}

partialExtensionDetailModal.set(key, partialModel);

extensionTableBodyData.find("a").filter("#" + key).click(function () {
extensionPartialModelDisplay(partialExtensionDetailModal.get(key));
});
};

/**
* search function for seek the extensions.
* @param extensionTable
Expand Down
Loading

0 comments on commit 88cbc98

Please sign in to comment.