= ({
17 | label,
18 | onClick,
19 | type = ButtonTypes.BUTTON,
20 | children,
21 | }) => {
22 | return (
23 |
26 | );
27 | };
28 |
29 | export default Button;
30 |
--------------------------------------------------------------------------------
/app/angular/components/conversionAttributeModal.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./conversionAttributeModal.html";
3 |
4 | const app = angular.module("app.createModelModal", []);
5 |
6 | const Controller = function () {
7 | const $ctrl = this;
8 | $ctrl.selectedValue = "new_column"
9 |
10 | $ctrl.forward = (selectedOption) => {
11 | $ctrl.submitted = true;
12 | $ctrl.close({ result: {"value": selectedOption, "quantity": $ctrl.qt}});
13 | };
14 | };
15 |
16 | export default app.component("conversionAttributeModal", {
17 | template: template,
18 | bindings: {
19 | options: "<",
20 | summary: "<",
21 | title: "<",
22 | close: "&",
23 | },
24 | controller: Controller,
25 | }).name;
26 |
--------------------------------------------------------------------------------
/app/angular/service/queryExpressionService.js:
--------------------------------------------------------------------------------
1 | export const comparasionOperators = {
2 | EQUAL_TO: (value) => `= ${value}`,
3 | NOT_EQUAL_TO: (value) => `<> ${value}`,
4 | GREATER_THAN: (value) => `> ${value}`,
5 | LESS_THAN: (value) => `< ${value}`,
6 | BETWEEN: (value, otherValue) => `BETWEEN ${value} AND ${otherValue}`,
7 | GREATER_THAN_OR_EQUAL_TO: (value) => `>= ${value}`,
8 | LESS_THAN_OR_EQUAL_TO: (value) => `<= ${value}`,
9 | IS: (value) => `= '${value}'`,
10 | IS_NOT: (value) => `<> '${value}'`,
11 | CONTAINS: (value) => `LIKE '%${value}%'`,
12 | DOES_NOT_CONTAIN: (value) => `NOT LIKE '%${value}%'`,
13 | STARTS_WITH: (value) => `LIKE '${value}%'`,
14 | ENDS_WITH: (value) => `LIKE '%${value}'`,
15 | }
--------------------------------------------------------------------------------
/app/angular/components/icons/logic/index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: "3"
2 | services:
3 | mongo:
4 | container_name: mongo
5 | image: mongo
6 | volumes:
7 | - ./data:/data/db
8 | ports:
9 | - "27017:27017"
10 | app_server:
11 | container_name: app_server
12 | build: .
13 | command: yarn start:dev
14 | volumes:
15 | - .:/usr/src/app
16 | - /usr/src/app/node_modules
17 | ports:
18 | - "3000:3000"
19 | depends_on:
20 | - mongo
21 | app_frontend:
22 | container_name: app_frontend
23 | build: .
24 | command: yarn start:frontend
25 | volumes:
26 | - .:/usr/src/app
27 | - /usr/src/app/node_modules
28 | ports:
29 | - "9000:9000"
30 | depends_on:
31 | - app_server
32 |
--------------------------------------------------------------------------------
/app/sass/modelsList.scss:
--------------------------------------------------------------------------------
1 | ///////////////////////////////////////////////////////////////////////////////
2 | // .modelsList header.container
3 | // Adjustments on Boostrap to accommodate .feedback block
4 | ///////////////////////////////////////////////////////////////////////////////
5 | .modelsList header.container {
6 | position: relative;
7 | }
8 |
9 | .modelsList header.container .page-header {
10 | margin-top: 60px
11 | }
12 |
13 | ///////////////////////////////////////////////////////////////////////////////
14 | // .modelsList .feedback
15 | ///////////////////////////////////////////////////////////////////////////////
16 | .modelsList .feedback {
17 | position: absolute;
18 | top: 15px;
19 | right: 15px;
20 | left: 15px;
21 |
22 | }
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | //"@babel/env",
4 | "@babel/react",
5 | [
6 | "@babel/preset-env",
7 | {
8 | "modules": false
9 | },
10 | "jest"
11 | ]
12 | ],
13 | "plugins": [
14 | "@babel/plugin-proposal-class-properties",
15 | "@babel/plugin-syntax-dynamic-import",
16 | "angularjs-annotate",
17 | ["@babel/plugin-transform-runtime",
18 | {
19 | "regenerator": true
20 | }
21 | ]
22 | ],
23 | "env": {
24 | "test": {
25 | "presets": [
26 | [
27 | "@babel/preset-env",
28 | {
29 | "modules": "auto"
30 | },
31 | "jest"
32 | ]
33 | ],
34 | "plugins": ["@babel/plugin-transform-runtime"]
35 | }
36 | }
37 | }
--------------------------------------------------------------------------------
/app/angular/components/conversionOptionModal.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
{{$ctrl.summary}}
7 |
16 |
6 |
{{$ctrl.summary}}
7 |
8 |
23 |
2 |
5 |
41 |
--------------------------------------------------------------------------------
/app/sass/sql.scss:
--------------------------------------------------------------------------------
1 | // body {
2 | // background: rgb(204,204,204);
3 | // }
4 | page {
5 | background: white;
6 | display: block;
7 | margin: 0 auto;
8 | margin-bottom: 0.5cm;
9 | box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
10 | }
11 | page[size="A4"] {
12 | width: 21cm;
13 | height: 29.7cm;
14 | }
15 | page[size="A4"][layout="portrait"] {
16 | width: 29.7cm;
17 | height: 21cm;
18 | }
19 | page[size="A3"] {
20 | width: 29.7cm;
21 | height: 42cm;
22 | }
23 | page[size="A3"][layout="portrait"] {
24 | width: 42cm;
25 | height: 29.7cm;
26 | }
27 | page[size="A5"] {
28 | width: 14.8cm;
29 | height: 21cm;
30 | }
31 | page[size="A5"][layout="portrait"] {
32 | width: 21cm;
33 | height: 14.8cm;
34 | }
35 | @media print {
36 | body, page {
37 | margin: 0;
38 | box-shadow: 0;
39 | }
40 | }
41 |
42 | .sqlpage {
43 | margin-top: 75px;
44 | }
45 |
46 | .sqlTitle {
47 | font-size: 24px;
48 | color: var(--brand-default);
49 | display: block;
50 | margin: 0 auto;
51 | text-align: center;
52 | margin: 20px;
53 | }
54 |
55 | .ta-editor {
56 | min-height: 300px;
57 | height: auto;
58 | overflow: auto;
59 | font-family: inherit;
60 | font-size: 100%;
61 | margin:20px 0;
62 | }
63 |
64 | .pageContent {
65 | font-size: 16px;
66 | padding: 35px;
67 | }
68 |
--------------------------------------------------------------------------------
/server_app/user/validator.js:
--------------------------------------------------------------------------------
1 | const MESSAGES = {
2 | MISSING_USERNAME: "Missig username param",
3 | MISSING_PASSWORD: "Missig password param",
4 | MISSING_MAIL: "Missig mail param",
5 | VALID_PARAM: "Everything ok with your params",
6 | };
7 |
8 | class ValidationResponse {
9 | constructor(isValid, message) {
10 | this.valid = isValid;
11 | this.message = message;
12 | }
13 | }
14 |
15 | const validateLoginParams = ({ username, password }) => {
16 | if (username == "") {
17 | return new ValidationResponse(false, MESSAGES.MISSING_USERNAME);
18 | }
19 |
20 | if (password == "") {
21 | return new ValidationResponse(false, MESSAGES.MISSING_PASSWORD);
22 | }
23 |
24 | return new ValidationResponse(true, MESSAGES.VALID_PARAM);
25 | };
26 |
27 | const validateSignUpParams = ({ username, mail, password }) => {
28 | if (username == "") {
29 | return new ValidationResponse(false, MESSAGES.MISSING_USERNAME);
30 | }
31 |
32 | if (mail == "") {
33 | return new ValidationResponse(false, MESSAGES.MISSING_MAIL);
34 | }
35 |
36 | if (password == "") {
37 | return new ValidationResponse(false, MESSAGES.MISSING_PASSWORD);
38 | }
39 |
40 | return new ValidationResponse(true, MESSAGES.VALID_PARAM);
41 | };
42 |
43 | module.exports = {
44 | validateLoginParams,
45 | validateSignUpParams,
46 | };
47 |
--------------------------------------------------------------------------------
/app/react/theme/index.ts:
--------------------------------------------------------------------------------
1 | const theme = {
2 | colors: {
3 | primary: {
4 | 500: "hsl(170, 100%, 30%)",
5 | },
6 | secondary: {
7 | 500: "hsl(170, 100%, 40%)",
8 | },
9 | gray: {
10 | 100: "hsl(0, 0%, 10%",
11 | },
12 | white: "hsl(0, 0%, 100%)",
13 | black: "hsl(0, 0, 0)",
14 | },
15 | shadows: {
16 | default: "0 0 20px rgb(0, 0, 0, 0.1)",
17 | },
18 | radii: {
19 | none: "0",
20 | sm: "0.125rem",
21 | default: "0.25rem",
22 | md: "0.375rem",
23 | lg: "0.5rem",
24 | xl: "0.75rem",
25 | "2xl": "1rem",
26 | "3xl": "1.5rem",
27 | full: "9999px",
28 | },
29 | spacings: {
30 | 0.5: "0.125rem",
31 | 1: "0.25rem",
32 | 1.5: "0.375rem",
33 | 2: "0.5rem",
34 | 2.5: "0.625rem",
35 | 3: "0.75rem",
36 | 3.5: "0.875rem",
37 | 4: "1rem",
38 | 5: "1.25rem",
39 | 6: "1.5rem",
40 | 7: "1.75rem",
41 | 8: "2rem",
42 | 9: "2.25rem",
43 | 10: "2.5rem",
44 | 11: "2.75rem",
45 | 12: "3rem",
46 | 14: "3.5rem",
47 | 16: "4rem",
48 | 20: "5rem",
49 | 24: "6rem",
50 | 28: "7rem",
51 | 32: "8rem",
52 | 36: "9rem",
53 | 40: "10rem",
54 | 44: "11rem",
55 | 48: "12rem",
56 | 52: "13rem",
57 | 56: "14rem",
58 | 60: "15rem",
59 | 64: "16rem",
60 | 72: "18rem",
61 | 80: "20rem",
62 | 96: "24rem",
63 | },
64 | };
65 |
66 | export default theme;
67 |
--------------------------------------------------------------------------------
/app/angular/components/createModelModal.html:
--------------------------------------------------------------------------------
1 |
4 |
5 |
32 |
33 |
--------------------------------------------------------------------------------
/app/angular/components/sqlComparasionDropdown/index.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./template.html";
3 |
4 | const Controller = function () {
5 | const $ctrl = this;
6 |
7 | $ctrl.select = selected => {
8 | $ctrl.selected = selected;
9 | $ctrl.onSelect({ selected });
10 | }
11 |
12 | $ctrl.checkConstraintOptions = {
13 | NUMBER: [
14 | { name: 'Equal to', type: 'EQUAL_TO' },
15 | { name: 'Not equal to', type: 'NOT_EQUAL_TO' },
16 | { name: 'Greater than', type: 'GREATER_THAN' },
17 | { name: 'Less than', type: 'LESS_THAN' },
18 | { name: 'Between', type: 'BETWEEN' },
19 | { name: 'Greater than or equal to', type: 'GREATER_THAN_OR_EQUAL_TO' },
20 | { name: 'Less than or equal to', type: 'LESS_THAN_OR_EQUAL_TO' },
21 | ],
22 | STRING: [
23 | { name: 'Is', type: 'IS' },
24 | { name: 'Is not', type: 'IS_NOT' },
25 | { name: 'Contains', type: 'CONTAINS' },
26 | { name: 'Does not contain', type: 'DOES_NOT_CONTAIN' },
27 | { name: 'Starts with', type: 'STARTS_WITH' },
28 | { name: 'Ends with', type: 'ENDS_WITH' },
29 | ]
30 | };
31 | };
32 |
33 | export default angular.module("app.sqlComparasionDropdown", []).component("sqlComparasionDropdown", {
34 | template,
35 | controller: Controller,
36 | bindings: {
37 | type: "<",
38 | selected: "<",
39 | onSelect: "&"
40 | },
41 | }).name;
42 |
--------------------------------------------------------------------------------
/app/sass/tables.scss:
--------------------------------------------------------------------------------
1 | ///////////////////////////////////////////////////////////////////////////////
2 | // , | adjustments
3 | ///////////////////////////////////////////////////////////////////////////////
4 | .table > thead > tr > th,
5 | .table > tbody > tr > td {
6 | vertical-align: middle;
7 | border-color: var(--border-default);
8 | }
9 |
10 | .table thead th strong {
11 | font-weight: 600;
12 | }
13 |
14 | ///////////////////////////////////////////////////////////////////////////////
15 | // .table-hover
16 | ///////////////////////////////////////////////////////////////////////////////
17 | .table-hover tbody tr {
18 | cursor: pointer;
19 | }
20 |
21 | ///////////////////////////////////////////////////////////////////////////////
22 | // .action-cell
23 | ///////////////////////////////////////////////////////////////////////////////
24 | .actions-cell {
25 | text-align: right;
26 | }
27 |
28 | .actions-cell .fa {
29 | pointer-events: none;
30 | opacity: 0;
31 | font-size: 1.3em;
32 | padding: 4px 6px;
33 | border: 1px solid transparent;
34 | border-radius: 2px;
35 | margin-left: 3px;
36 | }
37 |
38 | tr:hover .actions-cell .fa {
39 | pointer-events: all;
40 | opacity: 1;
41 | border-radius: 4px;
42 | }
43 |
44 | .actions-cell .fa:hover {
45 | border-color: var(--border-default);
46 | background-color: var(--gray-90);
47 | }
48 |
49 |
--------------------------------------------------------------------------------
/app/angular/logic/columnForm.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./columnForm.html";
3 |
4 | const app = angular.module("app.columnForm", []);
5 |
6 | const Controller = function () {
7 | const $ctrl = this;
8 |
9 | $ctrl.columnTypes = [
10 | { name: 'DATE', type: 'DATE' },
11 | { name: 'DATETIME', type: 'DATETIME' },
12 | { name: 'TIME', type: 'TIME' },
13 | { name: 'INT', type: 'INT' },
14 | { name: 'BOOLEAN', type: 'BOOLEAN' },
15 | { name: 'FLOAT', type: 'FLOAT' },
16 | { name: 'VARCHAR', type: 'VARCHAR' },
17 | { name: 'CHAR', type: 'CHAR' },
18 | { name: 'JSON', type: 'JSON' },
19 | { name: 'ENUM', type: 'ENUM' },
20 | { name: 'SET', type: 'SET'}
21 | ];
22 |
23 | $ctrl.cancel = () => {
24 | $ctrl.dismiss();
25 | };
26 |
27 | $ctrl.selectType = function (selected) {
28 | if (!$ctrl.column.PK && !$ctrl.column.FK) {
29 | $ctrl.column.type = selected.type;
30 | } else {
31 | $ctrl.column.type = "INT";
32 | }
33 | }
34 |
35 | $ctrl.selectTableOrigin = function (selected) {
36 | $ctrl.column.tableOrigin.idName = selected.name;
37 | }
38 | };
39 |
40 | export default app.component("columnForm", {
41 | template: template,
42 | bindings: {
43 | save: "<",
44 | dismiss: "&",
45 | column: "<",
46 | index: "<",
47 | tableNames: "<",
48 | delete: "<"
49 | },
50 | controller: Controller,
51 | }).name;
52 |
--------------------------------------------------------------------------------
/app/angular/components/createModelModal.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./createModelModal.html";
3 |
4 | const app = angular.module("app.createModelModal", []);
5 |
6 | const Controller = function ($rootScope, $filter) {
7 | const $ctrl = this;
8 | $ctrl.typeSelected = {};
9 | $ctrl.submitted = false;
10 |
11 | $ctrl.options = [
12 | { name: $filter('translate')('Conceptual'), type: 'conceptual'},
13 | { name: $filter('translate')('Logical'), type: 'logic' }
14 | ];
15 |
16 | $ctrl.$onInit = () => {
17 | $ctrl.typeSelected = { name: $filter('translate')("Conceptual"), type: "conceptual" };
18 | };
19 |
20 | $ctrl.doSelectType = function (newSelectedType) {
21 | $ctrl.typeSelected = newSelectedType;
22 | };
23 |
24 | $ctrl.save = function (modelname) {
25 | $ctrl.submitted = true;
26 | if (modelname != null && modelname != "") {
27 | const newmodel = {
28 | name: modelname,
29 | user: $rootScope.loggeduser,
30 | type: $ctrl.typeSelected.type,
31 | model: '{"cells":[]}',
32 | };
33 | $ctrl.close({ result: newmodel });
34 | }
35 | };
36 |
37 | $ctrl.cancel = function () {
38 | $ctrl.dismiss({
39 | reason: "cancel",
40 | });
41 | };
42 | };
43 | export default app.component("createModelModal", {
44 | template: template,
45 | bindings: {
46 | close: "&",
47 | dismiss: "&",
48 | },
49 | controller: Controller,
50 | }).name;
51 |
--------------------------------------------------------------------------------
/app/react/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "extends": [
4 | "airbnb-base",
5 | "eslint:recommended",
6 | "plugin:prettier/recommended",
7 | "plugin:react/recommended",
8 | "plugin:@typescript-eslint/eslint-recommended",
9 | "plugin:@typescript-eslint/recommended",
10 | "prettier/@typescript-eslint"
11 | ],
12 | "parser": "@typescript-eslint/parser",
13 | "env": {
14 | "browser": true,
15 | "es6": true,
16 | "jest": true
17 | },
18 | "parserOptions": {
19 | "ecmaVersion": 2020,
20 | "sourceType": "module",
21 | "ecmaFeatures": {
22 | "jsx": true,
23 | "arrowFunctions": true
24 | }
25 | },
26 | "plugins": ["react", "@typescript-eslint", "prettier"],
27 | "settings": {
28 | "react": {
29 | "version": "detect"
30 | },
31 | "import/resolver": {
32 | "typescript": {
33 | "alwaysTryTypes": true,
34 | "project": "app/react/tsconfig.json"
35 | }
36 | }
37 | },
38 | "rules": {
39 | "no-shadow": "off",
40 | "react/jsx-uses-react": "off",
41 | "react/react-in-jsx-scope": "off",
42 | "@typescript-eslint/no-shadow": ["error"],
43 | "react/jsx-filename-extension": [
44 | 1,
45 | {
46 | "extensions": [".js", ".jsx", ".ts", ".tsx"]
47 | }
48 | ],
49 | "import/extensions": [
50 | "error",
51 | "ignorePackages",
52 | {
53 | "js": "never",
54 | "jsx": "never",
55 | "ts": "never",
56 | "tsx": "never"
57 | }
58 | ]
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/server_app/app.js:
--------------------------------------------------------------------------------
1 | const express = require("express");
2 | const errorhandler = require("errorhandler");
3 | const session = require("express-session");
4 | const bodyParser = require("body-parser");
5 | const path = require("path");
6 | const cors = require("cors");
7 | const enforce = require('express-sslify');
8 |
9 | require("dotenv").config();
10 |
11 | let app = express();
12 | app.use(cors());
13 |
14 | if (app.get("env") === "production") {
15 | app.use(enforce.HTTPS({ trustProtoHeader: true }));
16 | }
17 |
18 | // Where to find the view files
19 | const viewsPath = path.join(__dirname, "../views");
20 | app.set("views", viewsPath);
21 |
22 | app.use(bodyParser.json({limit: '50mb'})); // support json encoded bodies
23 | app.use(bodyParser.urlencoded({ extended: true, limit: '50mb'})); // support encoded bodies
24 |
25 | const appPath = path.join(__dirname, "../app");
26 | app.use(express.static(`${appPath}/dist`));
27 |
28 | app.use(
29 | session({
30 | resave: true,
31 | saveUninitialized: true,
32 | secret: "SOMERANDOMSECRETHERE",
33 | cookie: { maxAge: 60000 },
34 | })
35 | );
36 | app.use(errorhandler());
37 |
38 | const userHandler = require("./user/handler");
39 | const modelHandler = require("./model/handler");
40 |
41 |
42 | app.use("/users", userHandler);
43 | app.use("/models", modelHandler);
44 |
45 | app.get("/", (_, res) => {
46 | res.render("index.html");
47 | });
48 |
49 | module.exports = app;
--------------------------------------------------------------------------------
/app/angular/logic/checkConstraint.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/angular/conceptual/validator.test.js:
--------------------------------------------------------------------------------
1 | import Validator from "./validator";
2 | import Factory from "./factory";
3 |
4 | import * as joint from "jointjs";
5 |
6 | import shapes from "../../joint/shapes";
7 | joint.shapes.erd = shapes;
8 |
9 | describe("Test shape erd validator", () => {
10 |
11 | const validator = new Validator();
12 | const factory = new Factory(joint.shapes);
13 |
14 | test("It should validate an Entity", async () => {
15 | const entity = factory.createEntity();
16 | expect(validator.isEntity(entity)).toBeTruthy()
17 | });
18 |
19 | test("It should validate a Relationship", async () => {
20 | const entity = factory.createRelationship();
21 | expect(validator.isRelationship(entity)).toBeTruthy()
22 | });
23 |
24 | test("It should validate an Attribute", async () => {
25 | const entity = factory.createAttribute();
26 | expect(validator.isAttribute(entity)).toBeTruthy()
27 | });
28 |
29 | test("It should validate a Extension", async () => {
30 | const entity = factory.createIsa();
31 | expect(validator.isExtension(entity)).toBeTruthy()
32 | });
33 |
34 | test("It should validate a Associative Entity", async () => {
35 | const entity = factory.createAssociative();
36 | expect(validator.isAssociative(entity)).toBeTruthy()
37 | });
38 |
39 | test("It should validate a Link", async () => {
40 | const entity = factory.createLink();
41 | expect(validator.isLink(entity)).toBeTruthy()
42 | });
43 |
44 | });
--------------------------------------------------------------------------------
/cypress/e2e/model.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | describe("Model", () => {
4 | beforeEach(() => {
5 | cy.intercept("GET", "/models?userId=*").as("getUserModels");
6 | cy.loginViaGui();
7 | cy.wait("@getUserModels").then((userModels) => {
8 | cy.cleanUpUserModels(userModels);
9 | cy.reload();
10 | cy.contains("a", "New model").click();
11 | cy.get("create-model-modal").should("be.visible");
12 | });
13 | });
14 |
15 | it('closes the "New Model" modal', () => {
16 | cy.contains("button", "Cancel").click();
17 | cy.get("create-model-modal").should("not.exist");
18 | });
19 |
20 | it("alerts when clicking SAVE without filling the title", () => {
21 | cy.contains("button", "Save").click();
22 | cy.get("#name").should("have.class", "error");
23 | });
24 |
25 | context("Model creation", () => {
26 | const modelTitle = "User";
27 |
28 | beforeEach(() => cy.get("#name").type(modelTitle));
29 |
30 | it("creates a conceptual model", () => {
31 | cy.contains("button", "Save").click();
32 |
33 | cy.contains("h2", `Conceptual model of: ${modelTitle}`).should(
34 | "be.visible"
35 | );
36 | });
37 |
38 | it("creates a logical model", () => {
39 | // Selects the logical model and save
40 | cy.get(".modelselect").click();
41 | cy.contains("li span", "Logical").click();
42 | cy.contains("button", "Save").click();
43 | // Asserts the model was created
44 | cy.contains("h2", `Logical model of: ${modelTitle}`).should("be.visible");
45 | });
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/app/angular/recovery/recovery.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
9 |
10 |
11 | {{ 'Recovery password' | translate }}
12 |
13 |
14 | {{ $ctrl.feedback.message }}
15 |
39 |
40 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
26 | 
32 |
33 |
34 | {{ $ctrl.feedback.message }}
35 |
36 |
37 |
38 |
49 |
2 |
3 |
9 |
10 |
11 | {{ 'Redefine password' | translate }}
12 |
13 |
14 | {{ $ctrl.feedback.message }}
15 |
55 |
56 |
3 |
4 |
6 |
7 |
--------------------------------------------------------------------------------
/app/angular/components/keyboardController.js:
--------------------------------------------------------------------------------
1 | import hotkeys from 'hotkeys-js';
2 |
3 | export const types = {
4 | SAVE: 'save',
5 | UNDO: 'undo',
6 | REDO: 'redo',
7 | ZOOM_IN: 'zoomIn',
8 | ZOOM_OUT: 'zoomOut',
9 | ZOOM_NONE: 'zoomNone',
10 | ESC: 'esc',
11 | DELETE: 'delete',
12 | COPY: 'copy',
13 | PASTE: 'paste',
14 | }
15 |
16 | export default class KeyboardController {
17 | constructor(document) {
18 | this.document = document;
19 | this.spacePressed = false;
20 | this.shortcutHandlers = new Map();
21 | this.#registerSpaceEvents();
22 | this.#registerShortcutEvents();
23 | }
24 |
25 | #registerSpaceEvents() {
26 | this.document.on('keydown', (keyboardEvent) => {
27 | if (keyboardEvent.code === "Space" && keyboardEvent.originalEvent.target == document.body) {
28 | this.spacePressed = true;
29 | keyboardEvent.preventDefault();
30 | }
31 | });
32 |
33 | this.document.on('keyup', (keyboardEvent) => {
34 | if (keyboardEvent.code === "Space") {
35 | this.spacePressed = false;
36 | }
37 | });
38 | }
39 |
40 | #registerShortcutEvents() {
41 | hotkeys.unbind();
42 |
43 | this.hotkeyConfigs.forEach(({ key, eventName }) => {
44 | hotkeys(key, () => {
45 | this.shortcutHandlers.get(eventName).forEach(action => action());
46 | return false;
47 | });
48 | })
49 | }
50 |
51 | get isSpacePressed() {
52 | return this.spacePressed;
53 | }
54 |
55 | get hotkeyConfigs() {
56 | return [
57 | { key: 'command+s, ctrl+s', eventName: types.SAVE },
58 | { key: 'command+z, ctrl+z', eventName: types.UNDO },
59 | { key: 'command+shift+z, ctrl+shift+z', eventName: types.REDO },
60 | { key: 'backspace', eventName: types.DELETE },
61 | { key: 'command+c, ctrl+c', eventName: types.COPY },
62 | { key: 'command+v, ctrl+v', eventName: types.PASTE },
63 | { key: 'z+=', eventName: types.ZOOM_IN },
64 | { key: 'z+-', eventName: types.ZOOM_OUT },
65 | { key: 'z+0', eventName: types.ZOOM_NONE },
66 | { key: 'esc', eventName: types.ESC },
67 | ];
68 | }
69 |
70 | registerHandler(eventName, action) {
71 | const currentActions = this.shortcutHandlers.has(eventName) ? this.shortcutHandlers.get(eventName) : [];
72 | this.shortcutHandlers.set(eventName, [action, ...currentActions])
73 | }
74 |
75 | unbindAll() {
76 | this.document.off("keydown");
77 | this.document.off("keyup");
78 | hotkeys.unbind();
79 | }
80 | };
--------------------------------------------------------------------------------
/app/angular/publicview/publicview.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
13 |
14 |
15 |
16 |
17 |
42 |
43 |
--------------------------------------------------------------------------------
/app/angular/preferences/preferences.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./preferences.html";
3 | import confirmationModal from "../components/confirmationModal";
4 |
5 | const preferencesController = function(AuthService, $state, $filter, $uibModal, $timeout){
6 | const ctrl = this;
7 | ctrl.loading = false;
8 | ctrl.feedback = {
9 | message: "",
10 | showing: false
11 | }
12 |
13 | ctrl.showFeedback = (show, newMessage) => {
14 | $timeout(() => {
15 | ctrl.feedback.showing = show;
16 | ctrl.feedback.message = $filter('translate')(newMessage);
17 | });
18 | }
19 |
20 | const showLoading = (loading) => {
21 | ctrl.loading = loading;
22 | };
23 |
24 | const handleDeleteAccountError = (error) => {
25 | if(error.status == 400) {
26 | const errorMessage = $filter('translate')("Delete account model error");
27 | ctrl.showFeedback(true, errorMessage);
28 | } else {
29 | const errorMessage = $filter('translate')("Delete account default error");
30 | ctrl.showFeedback(true, errorMessage);
31 | }
32 | }
33 |
34 | ctrl.dropdownOptions = [
35 | { name: $filter('translate')("Preferences"), type: 'preferences' },
36 | { name: $filter('translate')("Logout"), type: 'logout' }
37 | ];
38 |
39 | ctrl.deleteAccount = () => {
40 | const modalInstance = $uibModal.open({
41 | animation: true,
42 | component: "confirmationModal",
43 | resolve: {
44 | modalData: () => ({
45 | title: $filter('translate')("Delete account"),
46 | content: $filter('translate')("Are you sure you want to delete your account?"),
47 | cancelLabel: $filter('translate')("Cancel"),
48 | confirmLabel: $filter('translate')("Delete"),
49 | }),
50 | },
51 | });
52 |
53 | modalInstance.result.then(() => {
54 | showLoading(true);
55 | AuthService.deleteAccount().then(() => {
56 | AuthService.logout();
57 | $state.go("login");
58 | }).catch(handleDeleteAccountError)
59 | .finally(() => {
60 | showLoading(false);
61 | });
62 | });
63 | }
64 |
65 | ctrl.menuOptionSelected = (option) => {
66 | switch(option.type) {
67 | case "logout": ctrl.doLogout()
68 | break;
69 | case "preferences": $state.go("preferences");
70 | break;
71 | }
72 | }
73 |
74 | ctrl.doLogout = () => {
75 | AuthService.logout();
76 | $state.go("login");
77 | }
78 | }
79 |
80 | export default angular
81 | .module("app.preferences", [confirmationModal])
82 | .component("preferences", {
83 | template,
84 | controller: preferencesController,
85 | }).name;
--------------------------------------------------------------------------------
/cypress/e2e/login.cy.js:
--------------------------------------------------------------------------------
1 | ///
2 |
3 | describe("Login", () => {
4 | const user = Cypress.env("user");
5 | const password = Cypress.env("password");
6 |
7 | it("logs in and out successfully", () => {
8 | cy.intercept("GET", "/models?userId=*").as("getUserModels");
9 |
10 | cy.loginViaGui(user, password);
11 |
12 | cy.wait("@getUserModels");
13 | cy.url().should("be.equal", `${Cypress.config("baseUrl")}/#!/main`);
14 | cy.contains("h2", "Models").should("be.visible");
15 |
16 | cy.get("[data-cy='gear-button']").click();
17 | cy.contains(".dropdown-menu li", "Logout").click();
18 |
19 | cy.url().should("be.equal", `${Cypress.config("baseUrl")}/#!/`);
20 | cy.get(".login-form").should("be.visible");
21 | });
22 |
23 | it("switches languages", () => {
24 | cy.visit("/");
25 |
26 | cy.get('button[type="submit"]')
27 | .as("submitButton")
28 | .should("contain", "Login")
29 | .and("be.visible");
30 |
31 | cy.get("[data-cy='lang-pt-br']").click();
32 |
33 | cy.get("@submitButton").should("contain", "Entrar").and("be.visible");
34 |
35 | cy.get("[data-cy='lang-en-us']").click();
36 |
37 | cy.get("@submitButton").should("contain", "Login").and("be.visible");
38 | });
39 |
40 | context("Form validations", () => {
41 | it("alerts on invalid user email", () => {
42 | cy.loginViaGui("invalid#user.com", password);
43 |
44 | cy.contains(".alert-danger", "Fill the fields in red").should(
45 | "be.visible"
46 | );
47 | cy.get("#userEmail").should("have.class", "error");
48 | cy.get(".error").should("have.length", 1).and("be.visible");
49 | });
50 |
51 | it("alerts when clicking ENTER without filling the form", () => {
52 | cy.visit("/");
53 | cy.contains("button", "Login").click();
54 |
55 | cy.contains(".alert-danger", "Fill the fields in red").should(
56 | "be.visible"
57 | );
58 | cy.get("#userEmail").should("have.class", "error");
59 | cy.get("#userPassword").should("have.class", "error");
60 | cy.get(".error").should("have.length", 2).and("be.visible");
61 | });
62 |
63 | it("alerts on invalid user", () => {
64 | cy.loginViaGui("invalid@user.com", password);
65 |
66 | cy.contains(".alert-danger", "Incorrect login or password").should(
67 | "be.visible"
68 | );
69 | });
70 |
71 | it("alerts on invalid password", () => {
72 | cy.loginViaGui(user, "invalid-pwd");
73 |
74 | cy.contains(".alert-danger", "Incorrect login or password").should(
75 | "be.visible"
76 | );
77 | });
78 | });
79 | });
80 |
--------------------------------------------------------------------------------
/app/angular/signup/signup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 | {{ 'Create account' | translate }}
12 |
13 |
14 | {{ $ctrl.feedback.message }}
15 |
67 |
68 |
2 |
3 |
9 |
10 |
13 |
14 | {{ $ctrl.feedback.message }}
15 |
55 |
56 |
65 |
66 |
2 |
10 |
11 |
85 |
26 |
30 |
31 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/app/angular/logic/logic.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
14 |
20 |
21 |
22 |
69 |
--------------------------------------------------------------------------------
/server_app/user/service.test.js:
--------------------------------------------------------------------------------
1 | const userService = require("./service");
2 |
3 | jest.mock("./model");
4 | jest.mock("../model/service");
5 | const UserRepositoryMock = require("./model");
6 | const ModelServiceMock = require("../model/service");
7 |
8 | afterEach(() => {
9 | jest.restoreAllMocks();
10 | });
11 |
12 | describe("login", () => {
13 |
14 | test('should return user when login params match', async () => {
15 | const userParam = {username: 'user@mail.com', password: "123456"};
16 |
17 | const docResponse = {
18 | "id": "507f191e810c19729de860ea",
19 | "name": "name"
20 | };
21 |
22 | UserRepositoryMock.findOne.mockResolvedValue(docResponse);
23 |
24 | const userSession = await userService.login(userParam);
25 |
26 | const expectedResponse = {
27 | "userId": "507f191e810c19729de860ea",
28 | "userName": "name"
29 | }
30 |
31 | expect(userSession).toMatchObject(expectedResponse);
32 | });
33 |
34 | test('should return null when login not found', async () => {
35 | const userParam = {username: 'user@mail.com', password: "123456", sessionId:"123456"};
36 |
37 | UserRepositoryMock.findOne.mockResolvedValue(null);
38 |
39 | const userSession = await userService.login(userParam);
40 |
41 | expect(userSession).toBeNull();
42 | });
43 |
44 | test('should catch error when service fires it', async () => {
45 | const userParam = {username: 'user@mail.com', password: "123456", sessionId:"123456"};
46 |
47 | UserRepositoryMock.findOne.mockResolvedValue(new Error("find error"));
48 |
49 | expect(() => {
50 | userService.login(userParam).toThrow();
51 | });
52 | });
53 |
54 | });
55 |
56 | describe("create", () => {
57 |
58 | test('should toThrow error when user already exists', async () => {
59 | const userParam = {username: 'user@mail.com', password: "123456", sessionId:"123456"};
60 |
61 | const docResponse = {
62 | _id: '507f191e810c19729de860ea',
63 | name: 'name',
64 | login: 'user@mail.com',
65 | password: '123456'
66 | };
67 |
68 | UserRepositoryMock.findOne.mockResolvedValue(docResponse);
69 |
70 | expect(() => {
71 | userService.create(userParam).toThrow();
72 | });
73 |
74 | });
75 |
76 |
77 | test('should create user when it does not exists yet', async () => {
78 | const userParam = {username: 'name', password: "123456", mail:"user@mail.com"};
79 |
80 | const docResponse = {
81 | _id: '507f191e810c19729de860ea',
82 | name: 'name',
83 | login: 'user@mail.com',
84 | password: '123456'
85 | };
86 |
87 | UserRepositoryMock.findOne.mockResolvedValue(null);
88 |
89 | UserRepositoryMock.create.mockResolvedValue(docResponse);
90 |
91 | const createResponse = await userService.create(userParam);
92 |
93 | expect(createResponse.login).toBe(docResponse.login);
94 | });
95 |
96 | });
97 |
98 | describe("remove", () => {
99 |
100 | test('should toThrow error when user has models', async () => {
101 |
102 | ModelServiceMock.countAll.mockResolvedValue(1);
103 |
104 | expect(() => {
105 | userService.deleteAccount("123456").toThrow();
106 | });
107 |
108 | });
109 |
110 |
111 | test('should delete account', async () => {
112 | ModelServiceMock.countAll.mockResolvedValue(0);
113 |
114 | UserRepositoryMock.deleteOne.mockResolvedValue({"deletedCount": 1});
115 |
116 | const deleteResponse = await userService.deleteAccount("507f191e810c19729de860ea");
117 |
118 | expect(deleteResponse).toBe(true);
119 | });
120 |
121 | });
122 |
123 |
--------------------------------------------------------------------------------
/app/angular/workspace/workspace.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
15 |
16 |
17 |
42 |
43 |
44 |
50 |
51 |
52 |
53 |
54 | | {{ 'Type' | translate }} |
55 | {{ 'Name' | translate }} |
56 | {{ 'Author' | translate }} |
57 | {{ 'Created' | translate }} |
58 | {{ 'Actions' | translate }} |
59 |
60 |
61 |
62 |
63 | |
64 |
65 |
66 | {{model.typeName}}
67 | |
68 |
69 |
70 | {{model.name}}
71 | |
72 | {{model.authorName}} |
73 | {{model.created | date:'dd/MM/yyyy'}} |
74 |
75 |
76 |
77 |
78 |
79 | |
80 |
81 |
82 |
83 |
84 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/app/angular/publicview/publicview.js:
--------------------------------------------------------------------------------
1 | import "backbone";
2 | import $ from "jquery";
3 | import "./publicView.scss"
4 |
5 | import * as joint from "jointjs/dist/joint";
6 | import erd from "../../joint/shapes";
7 | import uml from "../../joint/table";
8 | joint.shapes.erd = erd;
9 | joint.shapes.uml = uml;
10 |
11 | import angular from "angular";
12 | import template from "./publicview.html";
13 |
14 | import "../editor/editorScroller";
15 |
16 | import statusBar from "../components/statusBar";
17 | import KeyboardController, { types } from "../components/keyboardController";
18 | import iconModelConceptual from "../components/icons/conceptual"
19 | import iconModelLogic from "../components/icons/logic"
20 |
21 | const controller = function (ModelAPI, $stateParams, $timeout, $state) {
22 | const ctrl = this;
23 | ctrl.loading = false;
24 | ctrl.model = {
25 | name: ""
26 | }
27 | const configs = {
28 | graph: {},
29 | paper: {}
30 | };
31 |
32 | ctrl.setLoading = (show) => {
33 | $timeout(() => {
34 | ctrl.loading = show;
35 | });
36 | }
37 |
38 | ctrl.print = () => {
39 | window.print();
40 | }
41 |
42 | ctrl.zoomIn = () => {
43 | configs.editorScroller.zoom(0.1, { max: 2 });
44 | }
45 |
46 | ctrl.zoomOut = () => {
47 | configs.editorScroller.zoom(-0.1, { min: 0.2 });
48 | }
49 |
50 | ctrl.zoomNone = () => {
51 | configs.editorScroller.zoom();
52 | }
53 |
54 | const registerShortcuts = () => {
55 | configs.keyboardController.registerHandler(types.ZOOM_IN, () => ctrl.zoomIn());
56 | configs.keyboardController.registerHandler(types.ZOOM_OUT, () => ctrl.zoomOut());
57 | configs.keyboardController.registerHandler(types.ZOOM_NONE, () => ctrl.zoomNone());
58 | }
59 |
60 | const buildWorkspace = () => {
61 | configs.graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
62 |
63 | const content = $("#content");
64 |
65 | configs.paper = new joint.dia.Paper({
66 | width: content.width(),
67 | height: content.height(),
68 | gridSize: 10,
69 | drawGrid: true,
70 | model: configs.graph,
71 | linkPinning: false,
72 | cellViewNamespace: joint.shapes
73 | });
74 |
75 | configs.keyboardController = new KeyboardController(configs.paper.$document);
76 |
77 | configs.editorScroller = new joint.ui.EditorScroller({
78 | paper: configs.paper,
79 | cursor: "grabbing",
80 | autoResizePaper: true,
81 | });
82 | content.append(configs.editorScroller.render().el);
83 |
84 | registerShortcuts();
85 | registerPaperEvents(configs.paper);
86 | };
87 |
88 | const registerPaperEvents = (paper) => {
89 | paper.on('blank:pointerdown', (evt) => {
90 | if(configs.keyboardController.spacePressed){
91 | configs.editorScroller.startPanning(evt);
92 | }
93 | });
94 | }
95 |
96 | ctrl.$postLink = () => {
97 | buildWorkspace();
98 | };
99 |
100 | ctrl.$onInit = () => {
101 | ctrl.setLoading(true);
102 |
103 | ModelAPI.getSharedModel($stateParams.modelshareid).then((resp) => {
104 | const jsonModel = (typeof resp.data.model == "string") ? JSON.parse(resp.data.model) : resp.data.model;
105 | if(resp.data.type === 'conceptual') {
106 | configs.paper.options.linkConnectionPoint = joint.util.shapePerimeterConnectionPoint;
107 | }
108 | configs.graph.fromJSON(jsonModel);
109 | ctrl.model.name = resp.data.name;
110 | ctrl.model.type = resp.data.type;
111 | ctrl.setLoading(false);
112 | configs.paper.freeze();
113 | }).catch((error) => {
114 | ctrl.setLoading(false);
115 | if(error.status == 404 || error.status == 401) {
116 | $state.go("noaccess");
117 | }
118 | });
119 | }
120 |
121 | ctrl.$onDestroy = () => {
122 | configs.graph = null;
123 | configs.paper = null;
124 | configs.keyboardController.unbindAll();
125 | configs.keyboardController = null;
126 | }
127 | };
128 |
129 | export default angular
130 | .module("app.publicview", [statusBar, iconModelConceptual, iconModelLogic])
131 | .component("publicview", {
132 | template,
133 | controller,
134 | }).name;
--------------------------------------------------------------------------------
/app/angular/components/queryExpressionModal/index.js:
--------------------------------------------------------------------------------
1 | import angular from "angular";
2 | import template from "./template.html";
3 | import "./styles.scss";
4 |
5 | const app = angular.module("app.queryExpressionModalController", []);
6 |
7 | const AND_OPERATOR = 'AND';
8 | const OR_OPERATOR = 'OR';
9 |
10 | const Controller = function ($filter) {
11 | const $ctrl = this;
12 | $ctrl.submitted = false;
13 | $ctrl.conditions = [];
14 | $ctrl.joins = [];
15 | $ctrl.tableColumns = [];
16 |
17 | const defaultJoin = {
18 | columnNameOrigin: null,
19 | columnNameTarget: null,
20 | }
21 |
22 | const defaultCondition = {
23 | columnName: null,
24 | columnType: null,
25 | type: null,
26 | comparativeValue: null,
27 | submitted: false,
28 | logicalOperator: AND_OPERATOR,
29 | };
30 |
31 | $ctrl.selectColumnJoin = (selected, attribute, index) => {
32 | const selectedJoin = $ctrl.joins[index];
33 | $ctrl.joins[index] = {
34 | ...selectedJoin,
35 | [attribute]: selected.name,
36 | };
37 | }
38 |
39 | $ctrl.saveJoin = (index) => {
40 | const selectedJoin = $ctrl.joins[index];
41 | $ctrl.joins[index] = {
42 | ...selectedJoin,
43 | submitted: true,
44 | };
45 | }
46 |
47 | $ctrl.removeJoin = (index) => {
48 | $ctrl.joins.splice(index, 1);
49 | }
50 |
51 | $ctrl.createLabel = condition => {
52 | return `${condition.columnName} ${$filter('translate')(condition.name).toLowerCase()} ${condition.comparativeValue} ${condition.comparativeValue2 ? `${$filter('translate')('and')} ${condition.comparativeValue2}` : '' }`;
53 | }
54 |
55 | $ctrl.changeOperator = (index) => {
56 | const selectedCondition = $ctrl.conditions[index];
57 | $ctrl.conditions[index] = {
58 | ...selectedCondition,
59 | logicalOperator: selectedCondition.logicalOperator === AND_OPERATOR ? OR_OPERATOR : AND_OPERATOR,
60 | };
61 | }
62 |
63 | $ctrl.selectComparasion = (selected, index) => {
64 | const selectedCondition = $ctrl.conditions[index];
65 | $ctrl.conditions[index] = {
66 | ...selectedCondition,
67 | name: selected.name,
68 | type: selected.type,
69 | };
70 | };
71 |
72 | $ctrl.removeCondition = (index) => {
73 | $ctrl.conditions.splice(index, 1);
74 | }
75 |
76 | $ctrl.saveCondition = (index) => {
77 | const selectedCondition = $ctrl.conditions[index];
78 | $ctrl.conditions[index] = {
79 | ...selectedCondition,
80 | submitted: true,
81 | };
82 | }
83 |
84 | $ctrl.selectColumn = (selected, index) => {
85 | const selectedCondition = $ctrl.conditions[index];
86 | $ctrl.conditions[index] = {
87 | ...selectedCondition,
88 | columnName: selected.name,
89 | columnType: selected.type
90 | };
91 | }
92 |
93 | $ctrl.addCondition = () => {
94 | $ctrl.conditions.push(defaultCondition);
95 | };
96 |
97 | $ctrl.addJoin = () => {
98 | $ctrl.joins.push(defaultJoin);
99 | }
100 |
101 | $ctrl.$onInit = () => {
102 | $ctrl.showJoins = $ctrl.tables.length > 1;
103 | $ctrl.tables.forEach(table => {
104 | table.columns.forEach(column => {
105 | $ctrl.tableColumns.push({
106 | name: `${table.name}.${column.name}`,
107 | type: column.type,
108 | });
109 | });
110 | });
111 | };
112 |
113 | $ctrl.$onChanges = (changes) => {
114 | if (changes.queryConditions != null && changes.queryConditions.currentValue != null) {
115 | $ctrl.conditions = changes.queryConditions.currentValue.values || [];
116 | $ctrl.joins = changes.queryConditions.currentValue.joins || [];
117 | }
118 | }
119 |
120 | $ctrl.save = function () {
121 | $ctrl.close({
122 | result: {
123 | conditions: $ctrl.conditions.filter(condition => condition.submitted),
124 | joins: $ctrl.joins.filter(join => join.submitted),
125 | }
126 | });
127 | };
128 |
129 | $ctrl.cancel = function () {
130 | $ctrl.dismiss({
131 | reason: "cancel",
132 | });
133 | };
134 | };
135 |
136 | export default app.component("queryExpressionModal", {
137 | template,
138 | bindings: {
139 | close: "&",
140 | dismiss: "&",
141 | tables: "<",
142 | queryConditions: '<'
143 | },
144 | controller: Controller,
145 | }).name;
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "brmodeloweb",
3 | "version": "0.0.1",
4 | "private": true,
5 | "scripts": {
6 | "start": "node server.js",
7 | "start:dev": "export NODE_ENV=development && nodemon server.js",
8 | "start:frontend": "export NODE_ENV=development && webpack-dev-server --hot --progress --color",
9 | "build": "export NODE_ENV=production && rimraf ./app/dist && webpack --progress --color",
10 | "test": "jest --coverage",
11 | "test:cy": "yarn cypress run",
12 | "test:watch": "jest --watch",
13 | "cy:open": "yarn cypress open"
14 | },
15 | "engines": {
16 | "node": "20.x",
17 | "yarn": "1.x"
18 | },
19 | "dependencies": {
20 | "@babel/runtime": "^7.26.10",
21 | "@uirouter/angularjs": "^1.1.0",
22 | "angular": "^1.8.3",
23 | "angular-cookies": "^1.8.3",
24 | "angular-translate": "^2.18.3",
25 | "angular-ui-bootstrap": "^2.5.6",
26 | "angular-ui-router": "^1.0.30",
27 | "body-parser": "^1.20.2",
28 | "bootstrap": "^3.4.1",
29 | "cors": "^2.8.5",
30 | "dotenv": "^16.3.1",
31 | "errorhandler": "^1.5.1",
32 | "express": "^4.20.0",
33 | "express-session": "^1.17.3",
34 | "express-sslify": "^1.2.0",
35 | "font-awesome": "^4.7.0",
36 | "form-data": "^4.0.4",
37 | "hotkeys-js": "^3.12.0",
38 | "i18next": "^23.5.1",
39 | "i18next-browser-languagedetector": "^7.1.0",
40 | "jointjs": "3.7.5",
41 | "jsonwebtoken": "^9.0.2",
42 | "mailgun.js": "^12.0.1",
43 | "mongodb": "~4.17.0",
44 | "mongoose": "^6.13.6",
45 | "morgan": "^1.10.0",
46 | "oclazyload": "^1.1.0",
47 | "prop-types": "^15.8.1",
48 | "raw-body": "^2.5.2",
49 | "react": "^18.2.0",
50 | "react-dom": "^18.2.0",
51 | "react-i18next": "^13.2.2",
52 | "react2angular": "^4.0.6",
53 | "styled-components": "^6.0.8",
54 | "textangular": "^1.5.16",
55 | "typescript": "^5.2.2"
56 | },
57 | "devDependencies": {
58 | "@4tw/cypress-drag-drop": "^2.2.5",
59 | "@babel/core": "^7.23.0",
60 | "@babel/node": "^7.22.19",
61 | "@babel/plugin-proposal-class-properties": "^7.18.6",
62 | "@babel/plugin-syntax-dynamic-import": "^7.0.0",
63 | "@babel/plugin-transform-async-to-generator": "^7.22.5",
64 | "@babel/plugin-transform-runtime": "^7.22.15",
65 | "@babel/preset-env": "^7.22.20",
66 | "@babel/preset-react": "^7.22.15",
67 | "@faker-js/faker": "^8.2.0",
68 | "@types/react": "^18.2.24",
69 | "@types/styled-components": "^5.1.28",
70 | "@typescript-eslint/eslint-plugin": "^6.7.3",
71 | "@typescript-eslint/parser": "^6.7.3",
72 | "@webpack-cli/serve": "^2.0.5",
73 | "autoprefixer": "10.4.16",
74 | "babel-loader": "^9.1.3",
75 | "babel-plugin-angularjs-annotate": "^0.10.0",
76 | "css-loader": "^6.8.1",
77 | "cssnano": "6.0.1",
78 | "cypress": "^13.3.0",
79 | "dotenv-webpack": "^8.0.1",
80 | "eslint": "^8.50.0",
81 | "eslint-config-airbnb": "^19.0.4",
82 | "eslint-config-airbnb-base": "^15.0.0",
83 | "eslint-config-prettier": "^9.0.0",
84 | "eslint-import-resolver-typescript": "^3.6.1",
85 | "eslint-plugin-cypress": "^2.15.1",
86 | "eslint-plugin-import": "^2.28.1",
87 | "eslint-plugin-prettier": "^5.0.0",
88 | "eslint-plugin-react": "^7.33.2",
89 | "file-loader": "^6.2.0",
90 | "html-loader": "^4.2.0",
91 | "html-webpack-plugin": "5.5.3",
92 | "jest": "^29.7.0",
93 | "mini-css-extract-plugin": "^2.7.6",
94 | "nodemon": "^3.0.1",
95 | "postcss-loader": "^7.3.3",
96 | "prettier": "^3.0.3",
97 | "raw-loader": "^4.0.2",
98 | "rimraf": "^5.0.5",
99 | "sass": "^1.68.0",
100 | "sass-loader": "^13.3.2",
101 | "style-loader": "^3.3.3",
102 | "supertest": "^6.3.3",
103 | "terser-webpack-plugin": "^5.3.9",
104 | "ts-loader": "^9.4.4",
105 | "tsconfig-paths-webpack-plugin": "^4.1.0",
106 | "url-loader": "^4.1.1",
107 | "webpack": "5.94.0",
108 | "webpack-cli": "^5.1.4",
109 | "webpack-dev-server": "^5.2.1"
110 | },
111 | "resolutions": {
112 | "styled-components": "^5"
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/app/sass/mainHeader.scss:
--------------------------------------------------------------------------------
1 | ///////////////////////////////////////////////////////////////////////////////
2 | // .navbar-brand
3 | ///////////////////////////////////////////////////////////////////////////////
4 | .navbar-default .navbar-brand,
5 | .navbar-default .navbar-brand:hover {
6 | color: var(--brand-default);
7 | cursor: default;
8 | padding-right: 0;
9 | }
10 |
11 | ///////////////////////////////////////////////////////////////////////////////
12 | // .nav-bar .back-button
13 | ///////////////////////////////////////////////////////////////////////////////
14 | .navbar-default .back-button {
15 | display: block;
16 | float: left;
17 | color: var(--brand-default);
18 | font-size: 1.2em;
19 | padding: 13px 16px;
20 | }
21 |
22 | .navbar-default .back-button:hover {
23 | color: var(--brand-default);
24 | background-color: #e1e1e1;
25 | }
26 |
27 | ///////////////////////////////////////////////////////////////////////////////
28 | // purelly icon nav
29 | ///////////////////////////////////////////////////////////////////////////////
30 | .nav-icons .fa {
31 | font-size: 1.5em;
32 | }
33 |
34 | ///////////////////////////////////////////////////////////////////////////////
35 | // toolbar with icons
36 | ///////////////////////////////////////////////////////////////////////////////
37 | .tool-icons {
38 | float: none;
39 | width: 100%;
40 | border-bottom: 1px solid var(--border-default);
41 | }
42 |
43 | .tool-icons .fa {
44 | font-size: 1.2em;
45 | }
46 |
47 | .navbar-nav.tool-icons > li > a {
48 | padding: 8px 12px;
49 | }
50 |
51 | .tool-icons .divider {
52 | border-right: 1px solid var(--border-default);
53 | }
54 |
55 | ////////////////////////////////////////////////////////////////////////////////
56 | // .modelOptions
57 | ////////////////////////////////////////////////////////////////////////////////
58 | .modelOptions {float: left;}
59 |
60 | .modelName,
61 | .modelViewiewOptions {
62 | float: left;
63 | padding: 8px 0;
64 | margin: 0 10px;
65 | }
66 |
67 | .modelName input {
68 | min-width: 250px;
69 | padding: 3px 25px 3px 5px;
70 | border-color: 1px solid var(--border-default);
71 | background-color: rgba(255, 255, 255, 0.1);
72 | color: grey;
73 | }
74 |
75 | .inputPencil {
76 | float: right;
77 | margin-right: 6px;
78 | margin-top: -20px;
79 | position: relative;
80 | z-index: 2;
81 | color: grey;
82 | }
83 |
84 | ////////////////////////////////////////////////////////////////////////////////
85 | // .modelViewiewOptions
86 | ////////////////////////////////////////////////////////////////////////////////
87 | .modelViewiewOptions {
88 | position: relative;
89 | top: 8px;
90 | }
91 |
92 | .modelViewiewOptions a {
93 | padding: 5px 10px 5px 10px;
94 | color: black;
95 | position: relative;
96 | }
97 |
98 | .modelViewiewOptions a:hover {opacity: 0.6;}
99 | .modelViewiewOptions a:active {opacity: 0.2;}
100 |
101 | ////////////////////////////////////////////////////////////////////////////////
102 | // Loading
103 | ////////////////////////////////////////////////////////////////////////////////
104 | .br-loader {
105 | display: none;
106 | position: fixed;
107 | top: 70px;
108 | left: 50%;
109 | margin-left: -20px;
110 | padding: 3px;;
111 | border: 1px solid var(--border-light);
112 | border-radius: 4px;
113 | background-color: var(--white);
114 | }
115 |
116 | .br-loader.loading {display: block;}
117 |
118 | ///////////////////////////////////////////////////////////////////////////////
119 | // .nav-icons dropdown-icon
120 | ///////////////////////////////////////////////////////////////////////////////
121 | .nav-icons > dropdown-icon > .dropdown > .dropdown-menu {
122 | margin-top: 0;
123 | border-top-left-radius: 0;
124 | border-top-right-radius: 0;
125 | }
126 |
127 | .nav-icons > dropdown-icon > .dropdown > button {
128 | border: 0;
129 | padding: 15px;
130 | color: var(--gray-20);
131 | background-color: transparent;
132 | }
133 |
134 | .nav-icons > dropdown-icon > .dropdown > button:focus {
135 | text-decoration: none;
136 | box-shadow: none;
137 | background-color: var(--gray-90);
138 | }
139 |
140 | .nav-icons .dropdown-menu > li > a {
141 | color: var(--gray-20);
142 | }
--------------------------------------------------------------------------------
|