Feature: Share model publicly

app/angular/components/shareModelModal.html

@@ -0,0 +1,46 @@
+<div class="modal-header">
+	<h3 class="modal-title">{{ 'Share model' | translate }}</h3>
+</div>
+
+<div class="modal-body">
+	<form class="form-horizontal" role="form" name="modelForm">
+		<div class="form-group">
+			<div class="col-sm-offset-3 col-sm-7">
+				<div class="checkbox">
+					<label for="share-model">
+						<input id="share-model" type="checkbox" ng-model="$ctrl.shared" ng-click="$ctrl.toggleShare(!$ctrl.shared)"/>
+						<span>{{ 'Create public link' | translate }}</span>
+					</label>
+				</div>
+			</div>
+		</div>
+		<div class="form-group">
+			<label for="import-model" class="col-sm-3 control-label">{{ 'URL' | translate }}</label>
+			<div class="col-sm-6">
+				<input
+					class="form-control"
+					ng-class=""
+					type="url"
+					pattern="https://.*"
+					id="import-model"
+					autocomplete="off"
+					readonly
+					data-ng-model="$ctrl.url"
+				/>
+			</div>
+			<div class="col-sm-3">
+				<button type="submit" class="btn btn-default" style="margin-left: -24px;" ng-click="$ctrl.copy()" ng-disabled="!$ctrl.url">{{ 'Copy' | translate }}</button>
+			</div>
+		</div>
+		<div class="form-group">
+			<div class="col-sm-offset-3 col-sm-7">
+				<p class="note">{{ 'With this link, people will be able to see but not modify this model' | translate }}</p>
+			</div>
+		</div>
+	</form>
+</div>
+
+<div class="modal-footer">
+	<button class="br-button warning" type="button" ng-click="$ctrl.cancel()">{{ 'Cancel' | translate }}</button>
+	<button class="br-button" type="button" ng-click="$ctrl.save()">{{ 'Salvar' | translate }}</button>
+</div>

app/angular/components/shareModelModal.js

@@ -0,0 +1,54 @@
+import angular from "angular";
+import template from "./shareModelModal.html";
+
+const app = angular.module("app.shareModelModal", []);
+
+const Controller = function (ModelAPI) {
+	const $ctrl = this;
+	$ctrl.submitted = false;
+
+	$ctrl.$onInit = () => {
+		ModelAPI.loadShareOptions($ctrl.modelId).then(response => {
+			const shareConfig = response.data;
+			$ctrl.url = shareConfig.active ? shareConfig.url : "";
+			$ctrl.shared = shareConfig.active;
+			$ctrl.backupUrl = shareConfig.url;
+			$ctrl.backupShared = shareConfig.active;
+		});
+	};
+
+	$ctrl.toggleShare = (shared) => {
+		$ctrl.url = shared? $ctrl.backupUrl : "";
+	}
+
+	$ctrl.cancel = () => {
+		$ctrl.dismiss({reason: "cancel"});
+	};
+
+	$ctrl.save = () => {
+		if($ctrl.shared != $ctrl.backupShared) {
+			ModelAPI.toggleShare($ctrl.modelId, $ctrl.shared).then(() => {
+				$ctrl.close({reason: "model shared"});
+			}).catch(error => {
+				console.log(error);
+				$ctrl.dismiss({reason: "model share error"});
+			});
+		} else {
+			$ctrl.close({reason: "model shared"});
+		}
+	};
+
+	$ctrl.copy = () => {
+		navigator.clipboard.writeText($ctrl.url);
+	};
+};
+
+export default app.component("shareModelModal", {
+	template: template,
+	bindings: {
+		close: "&",
+		dismiss: "&",
+		modelId: "<",
+	},
+	controller: Controller,
+}).name;

app/angular/conceptual/conceptual.html

@@ -46,7 +46,8 @@ <h2 class="h4"><icon-conceptual title="{{'Conceptual model' | translate}}"></ico
 					<li><a data-ng-click="$ctrl.zoomNone()" title="{{ 'Zoom 100% (Z 0)' | translate }}"><i class="fa fa-search"></i></a></li>
 					<li class="divider"><a data-ng-click="$ctrl.zoomOut()" title="{{ 'Zoom out (Z -)' | translate }}"><i class="fa fa-search-minus"></i></a></li>
 					<li><a data-ng-click="$ctrl.duplicateModel($ctrl.model)" title="{{ 'Duplicate model' | translate }}"><i class="fa fa-files-o"></i></a></li>
-					<li class="divider"><a data-ng-click="$ctrl.convertModel($ctrl.model)" title="{{ 'Generate logical model' | translate }}"><i class="fa fa-table"></i></a></li>
+					<li><a data-ng-click="$ctrl.convertModel($ctrl.model)" title="{{ 'Generate logical model' | translate }}"><i class="fa fa-table"></i></a></li>
+					<li class="divider"><a data-ng-click="$ctrl.shareModel($ctrl.model)" title="{{ 'Share' | translate }}"><i class="fa fa-share-alt"></i></a></li>
 					<li class="divider"><a data-ng-click="$ctrl.print()" title="{{ 'Print (CTRL P)' | translate }}"><i class="fa fa-print"></i></a></li>
 				</ul>
 				<aside class="feedback">

app/angular/conceptual/conceptual.js

@@ -16,6 +16,7 @@ import angular from "angular";
 import template from "./conceptual.html";
 
 import modelDuplicatorComponent from "../components/duplicateModelModal";
+import shareModelModal from "../components/shareModelModal";
 import statusBar from "../components/statusBar";
 import bugReportButton from "../components/bugReportButton";
 
@@ -26,6 +27,7 @@ import EntityExtensor from "./entityExtensor";
 import KeyboardController, { types } from "../components/keyboardController";
 import ToolsViewService from "../service/toolsViewService";
 import preventExitServiceModule from "../service/preventExitService";
+import iconConceptual from  "../components/icons/conceptual";
 
 const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibModal, $state, $transitions, preventExitService, $filter) {
 	const ctrl = this;
@@ -146,6 +148,25 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 			});
 	}
 
+	ctrl.shareModel = (model) => {
+		const modalInstance = $uibModal.open({
+			animation: true,
+			backdrop: 'static',
+			keyboard: false,
+			template: '<share-model-modal close="$close(result)" dismiss="$dismiss()" model-id="$ctrl.modelId"></share-model-modal>',
+			controller: function() {
+				const $ctrl = this;
+				$ctrl.modelId = model._id;
+			},
+			controllerAs: '$ctrl',
+		}).result;
+		modalInstance.then(() => {
+			ctrl.showFeedback(true, $filter('translate')("Sharing configuration has been updated successfully!"));
+		}).catch((reason) => {
+			console.log("Modal dismissed with reason", reason);
+		});
+	};
+
 	ctrl.unselectAll = () => {
 		ctrl.showFeedback(false, "");
 		ctrl.onSelectElement(null);
@@ -546,7 +567,7 @@ const controller = function (ModelAPI, $stateParams, $rootScope, $timeout, $uibM
 };
 
 export default angular
-	.module("app.workspace.conceptual", [modelDuplicatorComponent, preventExitServiceModule, bugReportButton, statusBar])
+	.module("app.workspace.conceptual", [modelDuplicatorComponent, preventExitServiceModule, bugReportButton, statusBar, shareModelModal, iconConceptual])
 	.component("editorConceptual", {
 		template,
 		controller,

app/angular/index.js

@@ -98,6 +98,22 @@ app.config([
 			},
 		});
 
+		$stateProvider.state("publicview", {
+			title: "PublicView - BRMW",
+			url: "/publicview/{modelshareid}",
+			component: "publicview",
+			data: {
+				requireLogin: false,
+			},
+			lazyLoad($transition$) {
+				const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
+				return import("./publicview/publicview.js").then((mod) =>
+					$ocLazyLoad.inject(mod.default)
+				);
+			},
+		});
+
+
 		$stateProvider.state("register", {
 			title: "Register - BRMW",
 			url: "/register",

app/angular/logic/logic.html

@@ -43,7 +43,8 @@ <h2 class="h4"><icon-logic title="{{'Logic model' | translate}}"></icon-logic> {
 					<li><a data-ng-click="$ctrl.zoomNone()" title="{{ 'Zoom 100% (Z 0)' | translate }}"><i class="fa fa-search"></i></a></li>
 					<li class="divider"><a data-ng-click="$ctrl.zoomOut()" title="{{ 'Zoom out (Z -)' | translate }}"><i class="fa fa-search-minus"></i></a></li>
 					<li><a data-ng-click="$ctrl.duplicateModel()" title="{{ 'Duplicate model' | translate }}"><i class="fa fa-files-o"></i></a></li>
-					<li class="divider"><a data-ng-click="$ctrl.generateSQL()" title="{{ 'Generate SQL' | translate }}"><i class="fa fa-database"></i></a></li>
+					<li><a data-ng-click="$ctrl.generateSQL()" title="{{ 'Generate SQL' | translate }}"><i class="fa fa-database"></i></a></li>
+					<li class="divider"><a data-ng-click="$ctrl.shareModel($ctrl.model)" title="{{ 'Share' | translate }}"><i class="fa fa-share-alt"></i></a></li>
 					<li class="divider"><a data-ng-click="$ctrl.print()" title="{{ 'Print (CTRL P)' | translate }}"><i class="fa fa-print"></i></a></li>
 				</ul>
 				<aside class="feedback">

app/angular/logic/logic.js

@@ -3,6 +3,7 @@ import template from "./logic.html";
 import sqlGeneratorService from "../service/sqlGeneratorService";
 import sqlGeneratorModal from "../components/sqlGeneratorModal";
 import duplicateModelModal from "../components/duplicateModelModal";
+import shareModelModal from "../components/shareModelModal";
 import queryExpressionModal from "../components/queryExpressionModal";
 import sqlComparasionDropdown from "../components/sqlComparasionDropdown";
 import bugReportButton from "../components/bugReportButton";
@@ -12,6 +13,7 @@ import view from "../view/view";
 import columnForm from "./columnForm";
 import checkConstraint from "./checkConstraint";
 import sidebarControlLogical from "./sidebarControl";
+import iconLogic from  "../components/icons/logic";
 
 const controller = function (
 	$rootScope,
@@ -223,12 +225,31 @@ const controller = function (
 			};
 			ModelAPI.saveModel(duplicatedModel).then((newModel) => {
 				window.open($state.href('logic', { references: { 'modelid': newModel._id } }));
-				ctrl.showFeedback("Successfully duplicated!", true);
+				ctrl.showFeedback("Successfully duplicated!", true, 'success');
 				ctrl.setLoading(false);
 			});
 		});
 	};
 
+	ctrl.shareModel = (model) => {
+		const modalInstance = $uibModal.open({
+			animation: true,
+			backdrop: 'static',
+			keyboard: false,
+			template: '<share-model-modal close="$close(result)" dismiss="$dismiss()" model-id="$ctrl.modelId"></share-model-modal>',
+			controller: function() {
+				const $ctrl = this;
+				$ctrl.modelId = model.id;
+			},
+			controllerAs: '$ctrl',
+		}).result;
+		modalInstance.then(() => {
+			ctrl.showFeedback($filter('translate')("Sharing configuration has been updated successfully!"), true, "success");
+		}).catch((reason) => {
+			console.log("Modal dismissed with reason", reason);
+		});
+	};
+
 	window.onbeforeunload = preventExitService.handleBeforeUnload(ctrl);
 
 	const onBeforeDeregister = $transitions.onBefore({},
@@ -246,7 +267,7 @@ const controller = function (
 };
 
 export default angular
-	.module("app.workspace.logic", [sqlGeneratorService, sqlGeneratorModal, duplicateModelModal, preventExitServiceModule, bugReportButton, statusBar, view, columnForm, sidebarControlLogical, checkConstraint, queryExpressionModal, sqlComparasionDropdown])
+	.module("app.workspace.logic", [sqlGeneratorService, sqlGeneratorModal, duplicateModelModal, preventExitServiceModule, bugReportButton, statusBar, view, columnForm, sidebarControlLogical, checkConstraint, queryExpressionModal, sqlComparasionDropdown, shareModelModal, iconLogic])
 	.component("editorLogic", {
 		template,
 		controller,

app/angular/publicview/publicView.scss

@@ -0,0 +1,34 @@
+////////////////////////////////////////////////////////////////////////////////
+// .publicView
+////////////////////////////////////////////////////////////////////////////////
+.publicView > .navbar {
+	height: 54px;
+	background-color: #fff;
+}
+
+.publicView .navbar .br-loader {
+	top: 63px;
+}
+
+.publicView .document-info {
+	margin-left: 150px;
+}
+
+.publicView .document-info h2 {
+	margin-top: 5px;
+	margin-bottom: 15px;
+}
+
+.publicView .model-area {
+	left: 0;
+}
+
+.publicView .workspace-header .nav li:first-child {
+	margin-left: 149px;
+	border-left: 1px solid var(--border-default);
+}
+
+.publicView .workspace-header .header-actions {
+	position: relative;
+	top: -3px;
+}

app/angular/publicview/publicview.html

@@ -0,0 +1,44 @@
+<section class="view modelWorkspace publicView">
+	<header class="navbar navbar-default navbar-fixed-top">
+		<div class="navbar-header">
+			<strong class="navbar-brand">{{ 'BRMW' | translate }}</strong>
+		</div>
+
+		<img
+			src="../../img/loading-dots.gif"
+			alt="Loading"
+			class="br-loader"
+			ng-class="{'loading': $ctrl.loading}"
+		/>
+	</header>
+
+	<div class="mainContent">
+
+		<section id="content" class="model-area">
+			<header class="workspace-header">
+				<div class="page-header clearfix">
+					<div class="document-info pull-left">
+						<h2 class="h4" ng-if="$ctrl.model.type === 'conceptual'"><icon-conceptual title="{{'Conceptual model' | translate}}" aria-hidden="true"></icon-conceptual> {{$ctrl.model.name}}</h2>
+						<h2 class="h4" ng-if="$ctrl.model.type === 'logic'"><icon-logic title="{{'Logic model' | translate}}" aria-hidden="true"></icon-logic> {{$ctrl.model.name}}</h2>
+					</div>
+					<aside class="header-actions pull-right">
+						<a class="docs-icon" href="https://docs.brmodeloweb.com" target="_blank" rel="noopener noreferrer" title="{{ 'Documentation' | translate }}"><i class="fa fa-book"></i></a>
+						<a class="br-button" href="https://app.brmodeloweb.com/#!/register" target="_blank" rel="noopener noreferrer">{{'Create account' | translate}}</a>
+					</aside>
+				</div>
+				<ul class="nav navbar-nav tool-icons">
+					<li><a data-ng-click="$ctrl.zoomIn()" title="{{ 'Zoom in (Z +)' | translate }}"><i class="fa fa-search-plus"></i></a></li>
+					<li><a data-ng-click="$ctrl.zoomNone()" title="{{ 'Zoom 100% (Z 0)' | translate }}"><i class="fa fa-search"></i></a></li>
+					<li><a data-ng-click="$ctrl.zoomOut()" title="{{ 'Zoom out (Z -)' | translate }}"><i class="fa fa-search-minus"></i></a></li>
+					<li class="divider"><a data-ng-click="$ctrl.print()" title="{{ 'Print (CTRL P)' | translate }}"><i class="fa fa-print"></i></a></li>
+				</ul>
+				<aside class="feedback">
+					<div class="alert alert-success" role="alert" data-ng-class="{'hide': !$ctrl.feedback.showing}">
+						<p>{{ $ctrl.feedback.message }}</p>
+					</div>
+				</aside>
+			</header><!-- End .workspace-header -->
+		</section><!-- End .model-area -->
+		<bug-report-button></bug-report-button>
+	</div><!-- End .mainContent -->
+</section><!-- End .view -->