Merge remote-tracking branch 'remotes/origin/atl-9-tools'

OHDSI · Aug 29, 2024 · ae3ad9e · ae3ad9e
2 parents b92ddbb + cef5a30
commit ae3ad9e
Show file tree

Hide file tree

Showing 12 changed files with 530 additions and 1 deletion.
diff --git a/js/pages/main.js b/js/pages/main.js
@@ -16,6 +16,7 @@ define(
 		const jobs = require('./jobs/index');
 		const configuration = require('./configuration/index');
 		const feedback = require('./feedback/index');
+		const tools = require('./tools/index');
 
 		// order of nav items in left-nav will appear in the following order:
 		return {
@@ -35,6 +36,7 @@ define(
 			jobs,
 			configuration,
 			feedback,
+			tools
 		};
 	}
 );
diff --git a/js/pages/tools/PermissionService.js b/js/pages/tools/PermissionService.js
@@ -0,0 +1,24 @@
+define([
+	'services/AuthAPI',
+], function (
+	AuthAPI,
+) {
+	return class PermissionService {
+
+		static isPermittedReadTools() {
+			return AuthAPI.isPermitted('tool:get');
+		}
+
+		static isPermittedCreateTool() {
+			return AuthAPI.isPermitted('tool:post');
+		}
+
+		static isPermittedUpdateTool() {
+			return AuthAPI.isPermitted('tool:put');
+		}
+
+		static isPermittedDeleteTool() {
+			return AuthAPI.isPermitted('tool:*:delete');
+		}
+	}
+});
diff --git a/js/pages/tools/const.js b/js/pages/tools/const.js
@@ -0,0 +1,9 @@
+define(
+  (require, exports) => {
+    const pageTitle = 'Tools';
+
+    return {
+      pageTitle,
+    };
+  }
+);
diff --git a/js/pages/tools/index.js b/js/pages/tools/index.js
@@ -0,0 +1,14 @@
+define(
+  (require, exports) => {
+    const ko = require('knockout');
+    const buildRoutes = require('./routes');
+
+    return {
+      title: ko.i18n('navigation.tools', 'Tools'),
+      buildRoutes,
+      navUrl: () => '#/tools',
+      icon: 'toolbox',
+			statusCss: () => ""
+    };
+  }
+);
diff --git a/js/pages/tools/routes.js b/js/pages/tools/routes.js
@@ -0,0 +1,16 @@
+define(
+	(require, factory) => {
+    const { AuthorizedRoute } = require('pages/Route');
+    function routes(router) {
+      return {
+        '/tools': new AuthorizedRoute(() => {
+          require(['pages/tools/tool-manager'], function () {
+            router.setCurrentView('tool-manager');
+          });
+        }),
+      };
+    }
+
+    return routes;
+  }
+);
diff --git a/js/pages/tools/tool-management.less b/js/pages/tools/tool-management.less
@@ -0,0 +1,16 @@
+.modal-footer {
+  display: table;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  margin-top: 18px;
+
+  .modal-buttons {
+    display: table-cell;
+    text-align: right;
+
+    button + button {
+      margin-left: 10px !important;
+    }
+  }
+}
diff --git a/js/pages/tools/tool-manager.html b/js/pages/tools/tool-manager.html
@@ -0,0 +1,103 @@
+<heading-title params="name: ko.i18n('common.tools'), icon: 'toolbox', theme: 'dark'"></heading-title>
+<div class="paddedWrapper">
+	<div class="card-tools">
+		<button type="button" class="btn btn-primary add-btn"
+		data-bind="click: () => { showModalAddTool(true) },
+					css: classes({
+						element: 'create-button',
+						extra: `${canCreateTool() ? '' : 'disabled'}`,
+					}),
+					text: ko.i18n('common.addTools', 'Add Tool')"></button>
+		<div class="card-tool-container" data-bind="hidden: loading, foreach: data_tools">
+				<div class="card-tool flexed" data-bind="visible: $component.canReadTools() || enabled, click: $component.handleOpenLink, style:{ 'z-index': 0 }">
+					<label for="toolName" data-bind="visible: isEditing, text: ko.i18n('columns.name', 'Name')"></label>
+					<div class="flex-between">
+						<h3 data-bind="hidden: isEditing, text: name, click: () => window.open(url, '_blank')"></h3>
+						<input type="text" data-bind="visible: isEditing, textInput: name, keyupBubble: false" id="toolName"/>
+						<div style="width: 15% !important; align-items: center; display: flex; justify-content: flex-end;">
+							<i class="fas fa-edit" id="editIcon" style="font-size: 24px; color: #2271A5; cursor: pointer;" data-bind="hidden: (isEditing || !$component.canUpdateTool()), click:() => $component.handleIsEditing(id), style:{ 'z-index': 9 }"></i>
+							<i class="far fa-trash-alt" id="deleteIcon" style="font-size: 24px; color: #F44; cursor: pointer; margin-left: 10px;" data-bind="hidden: (isEditing || !$component.canDeleteTool()), click:() => $component.handleDelete(id), style:{ 'z-index': 9 }"></i>
+							<i class="fas fa-check-square" id="completeIcon" style="font-size: 24px; color: #2271A5; cursor: pointer;" data-bind="visible: isEditing, click:() => $component.handleIsEdited(id), style:{ 'z-index': 9 }"></i>
+						</div>
+					</div>
+					<label for="toolUrl" data-bind="visible: isEditing, text: ko.i18n('common.url', 'URL')" style="margin-top: 19px"></label>
+					<input type="text" data-bind="visible: isEditing, textInput: url, keyupBubble: false" style="margin-top: 2px" id="toolUrl"/>
+					<p data-bind="hidden: isEditing, text: description" style="margin-top: 24px; font-weight: 500; font-size: 13px;"></p>
+					<label for="toolDescription" data-bind="visible: isEditing, text: ko.i18n('columns.description', 'Description')" style="margin-top: 19px;"></label>
+					<textarea rows="5" data-bind="visible: isEditing, value: description, keyupBubble: false" style="margin-top: 2px; max-width: 100%;" id="toolDescription"></textarea>			
+					<div class="flex-between" style="margin-top: 18px; align-items: flex-start; justify-content: flex-start;" data-bind="visible: isEditing">
+						<label for="toolAddDescription" data-bind="text: ko.i18n('columns.enabled', 'Enabled')" style="width: 10%;"></label>
+						<div class="material-switch pull-right" style=" margin-left: 8px;" data-bind="visible: isEditing">							
+							<input id="switchBtnTool" name="switchBtnTool" data-bind="checked: enabled" style="display: none;"/>
+							<label for="switchBtnTool" class="label-success" data-bind="css: enabled ? 'label-switch-enable' : '', click:() => $component.handleCheckVisible(id)"></label>
+						</div>
+					</div>
+					<div class="flex-between" style="margin-top: 10px; justify-content: flex-start; flex-wrap: wrap; row-gap: 10px">
+						<div class="flexed" style="width: 50%" data-bind="visible: !isEditing">
+							<p data-bind="text: ko.i18n('columns.created', 'Created')" style="font-size: 12.5px; margin-bottom: 5px;"></p>
+							<span data-bind="text: createdDate" style="font-weight: 500; font-size: 13px;"></span>
+						</div>
+						<div class="flexed" style="width: 50%" data-bind="visible: !isEditing && updatedDate">
+							<p data-bind="text: ko.i18n('columns.updated', 'Updated')" style="font-size: 12.5px; margin-bottom: 5px;"></p>
+							<span data-bind="text: updatedDate" style="font-weight: 500; font-size: 13px;"></span>
+						</div>
+						<div class="flexed" style="width: 50%" data-bind="visible: !isEditing">
+							<p data-bind="text: ko.i18n('columns.author', 'Author')" style="font-size: 12.5px; margin-bottom: 5px;"></p>
+							<span data-bind="visible: createdBy , text: createdBy" style="font-weight: 500; font-size: 13px;"></span>
+							<span data-bind="visible: !createdBy , text: 'anonymous'" style="font-weight: 500; font-size: 13px;"></span>
+						</div>
+						<div class="flexed material-switch" style="width: 50%" data-bind="visible: ($component.canUpdateTool() || $component.canDeleteTool()) && !isEditing">							
+							<p data-bind="text: ko.i18n('columns.enabled', 'Enabled')" style="font-size: 12.5px; padding-bottom:8px;"></p>
+							<label for="switchBtnTool" class="label-success" style="pointer-events: none;" data-bind="css: enabled ? 'label-switch-enable' : ''"></label>
+						</div>
+					</div>
+				</div>
+			</div>
+	</div>
+	<loading data-bind="visible: loading" params="status: ko.i18n('tool.loading', 'Loading tools')"></loading>
+
+	<atlas-modal params="
+		showModal: showModalAddTool,
+		modifiers: ['sm'],
+		title: ko.i18n('common.addTools', 'Add Tool'),
+		data: {
+			handleDataAddTool: $component.handleDataAddTool,
+			handleCancelTool: $component.handleCancelTool,
+			newName: $component.newName,
+			newUrl: $component.newUrl,
+			newDescription: $component.newDescription,
+			toolIsVisible: $component.toolIsVisible,
+			toggleVisiableTool: $component.toggleVisiableTool,
+		}">
+		<div class="flexed" style="padding: 8px 20px;">
+			<div class="form-group" data-bind="css: {'has-error': (newName()?.trim() === '' || !newName()), 'has-success': newName()?.trim()}">
+				<label for="toolAddName" class="control-label" data-bind="text: ko.i18n('tool.name', '* Name')"></label>
+				<input required type="text" id="toolAddName" data-bind="textInput: newName" type="text" class="form-control"/>
+				<span class="help-block" data-bind="visible: (newName()?.trim() === '' || !newName()), text: ko.i18n('tool.nameValidMess', 'Tool name cannot be empty')"></span>
+			</div>
+			<div class="form-group" data-bind="css: {'has-error': (newUrl()?.trim() === '' || !newUrl()), 'has-success': newUrl()?.trim()}">
+				<label for="toolAddURL" class="control-label" data-bind="text: ko.i18n('tool.url', '* URL')"></label>
+				<input required type="text" id="toolAddURL" data-bind="textInput: newUrl" type="text" class="form-control"/>
+				<span class="help-block" data-bind="visible: (newUrl()?.trim() === '' || !newUrl()), text: ko.i18n('tool.urlValidMess', 'Tool url cannot be empty')"></span>
+			</div>
+			<div class="form-group" style="margin-top: 10px; align-items: flex-start; justify-content: flex-start;">
+				<label for="toolAddDescription" data-bind="text: ko.i18n('columns.description', 'Description')" style="width: 30%;"></label>
+				<textarea rows="6" id="toolAddDescription" data-bind=" value: newDescription, keyupBubble: false" class="form-control" style="max-width: 100%;"></textarea>
+			</div>
+			<div class="flex-between" style="margin-top: 18px; align-items: flex-start; justify-content: flex-start;">
+				<label for="toolAddDescription" data-bind="text: ko.i18n('columns.enabled', 'Enabled')" style="width: 10%;"></label>
+				<div class="material-switch pull-right" style="margin-left: 8px; width: 70%;">
+					<input id="switchBtnTool" name="switchBtnTool" data-bind="checked: toolIsVisible()" style="display: none;"/>
+					<label for="switchBtnTool" class="label-success" data-bind="css: toolIsVisible() ? 'label-switch-enable' : '', click: toggleVisiableTool"></label>
+				</div>
+			</div>
+			<div class="modal-footer with-padding">
+				<div class="modal-buttons">
+					<button type="button" class="btn btn-primary" data-bind="text: ko.i18n('common.apply', 'Apply'), click: handleDataAddTool"></button>
+					<button type="button" class="btn btn-danger" data-bind="click: handleCancelTool, text: ko.i18n('common.cancel', 'Cancel')"></button>
+				</div>
+			</div>
+		</div>
+	</atlas-modal>
+</div>
+<access-denied params="isAuthenticated: isAuthenticated, isPermitted: canReadTools"></access-denied>