diff --git a/README.md b/README.md index 52685995..7cc7317f 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ MaterialsMine App ## :high_brightness: Installation -Make sure to install [docker](https://docs.docker.com/get-docker/) on your machine first, then `git clone` the repo and run `cmd` below to instantiate or terminate the application. +Make sure to install [docker](https://docs.docker.com/get-docker/) on your machine first, then `git clone` the repo and run commands below to instantiate or terminate the application. Windows OS: - Be sure to run the Docker installer as an administrator @@ -15,32 +15,51 @@ Windows OS: # :warning: ADVISORY :warning: > Before running the steps below, follow the steps [here](https://github.com/Duke-MatSci/materialsmine/blob/develop/resfulservice/misc/README.md) to retrieve and deploy required environment variables +> *IMPORTANT NOTICE:* Install nvm. For windows PC click [windows](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/nodejs-on-windows#install-nvm-windows-nodejs-and-npm), for Mac `brew install nvm` +## :high_brightness: Testing +To avoid testing failure, install nvm & copy the command below and run in the project root directory. + +```bash +npm i && cd app && npm i && cd ../resfulservice && npm i && cd .. +``` + +## :high_brightness: Starting All Application Services Options 1 +Make sure nvm is installed with node >= v16.20.0 or run the command below to install the right node version: +```bash + nvm install 16 +``` +Run the following command from the root directory: +```bash + npm run dev:install +``` +Run the following command to start the applications: ```bash -# Run the following command from the root directory: -# 1. Install npm @ root directory: -npm install + npm run dev:start +``` + +## :high_brightness: Starting All Application Services Options 2 +Run the following command from the root directory: -# 2. Build all services +```bash docker-compose build +``` +Note: The build might stall at first try. If this occurs, repeat the previous step. -# Note: -# The build might stall at first try. If this occurs, repeat the previous step. -# To start all services after the first or initial build +To start all services after the first or initial build +```bash docker-compose up +``` -# To start all services after the first or initial build in detachable mode +If you prefer to start all services after the first or initial build in detachable mode +```bash docker-compose up -d - -# To shutdown/terminate all services -docker-compose down ``` -## :high_brightness: Testing -To avoid testing failure, copy the command below and run in the project root directory +To shutdown/terminate all services & unmount volumes ```bash -npm i && cd app && npm i && cd ../resfulservice && npm i && cd .. +docker-compose down -v ``` ## :high_brightness: Folder Structure diff --git a/app/.nvmrc b/app/.nvmrc new file mode 100644 index 00000000..3b3a53bf --- /dev/null +++ b/app/.nvmrc @@ -0,0 +1 @@ +16.20.0 \ No newline at end of file diff --git a/app/jest.config.js b/app/jest.config.js index 27d47d3f..2c3b7794 100644 --- a/app/jest.config.js +++ b/app/jest.config.js @@ -3,14 +3,25 @@ module.exports = { transform: { '^.+\\.vue$': 'vue-jest', '\\.(gif)$': '/tests/jest/__mocks__/fileMock.js', - '\\.(ttl|rq)': 'jest-raw-loader' + '\\.(ttl|rq)': 'jest-raw-loader', + '^.+\\.js$': 'babel-jest', + '.*\\.(vue)$': 'vue-jest' }, snapshotSerializers: [ '/node_modules/jest-serializer-vue' ], moduleNameMapper: { d3: '/node_modules/d3/dist/d3.min.js', + prismjs: '/node_modules/prismjs/prism.js', 'style-loader!(.*)': '/node_modules/style-loader' }, - setupFilesAfterEnv: ['/tests/jest/script/test-setup.js'] + setupFilesAfterEnv: ['/tests/jest/script/test-setup.js'], + moduleFileExtensions: ['js', 'vue', 'json'], + globals: { + 'vue-jest': { + templateCompiler: { + compiler: require('vue-template-babel-compiler') + } + } + } } diff --git a/app/package-lock.json b/app/package-lock.json index 5a5be071..91df0703 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -19,6 +19,7 @@ "jsonschema": "^1.4.0", "jszip": "^3.7.1", "n3": "^1.15.0", + "prismjs": "^1.29.0", "rdf-literal": "^1.1.0", "register-service-worker": "^1.7.1", "smiles-drawer": "^1.2.0", @@ -65,6 +66,7 @@ "sass-loader": "^8.0.2", "sinon": "^12.0.1", "style-loader": "^2.0.0", + "vue-template-babel-compiler": "^2.0.0", "vue-template-compiler": "^2.7.14" } }, @@ -19382,6 +19384,14 @@ "node": ">=0.10.0" } }, + "node_modules/prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==", + "engines": { + "node": ">=6" + } + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -27347,6 +27357,32 @@ "node": ">=4.0.0" } }, + "node_modules/vue-template-babel-compiler": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vue-template-babel-compiler/-/vue-template-babel-compiler-2.0.0.tgz", + "integrity": "sha512-O0GOktQ5TZCZ5sWVl8CbyLBFriwwai7xDBtpdUI1xZSbbVVNf5Um/mDHYJXaHX6vfhmeAuohggXxIi0RPgXZ4g==", + "dev": true, + "dependencies": { + "@babel/core": "^7.14.3", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-object-rest-spread": "^7.15.6", + "@babel/plugin-proposal-optional-chaining": "^7.14.2", + "@babel/plugin-transform-arrow-functions": "^7.14.5", + "@babel/plugin-transform-block-scoping": "^7.14.5", + "@babel/plugin-transform-computed-properties": "^7.14.5", + "@babel/plugin-transform-destructuring": "^7.14.5", + "@babel/plugin-transform-parameters": "^7.14.5", + "@babel/plugin-transform-spread": "^7.14.5", + "@babel/types": "^7.14.5", + "deepmerge": "^4.2.2" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "vue-template-compiler": "^2.6.0" + } + }, "node_modules/vue-template-compiler": { "version": "2.7.14", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", @@ -44479,6 +44515,11 @@ "react-is": "^16.8.4" } }, + "prismjs": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz", + "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==" + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -51174,6 +51215,26 @@ } } }, + "vue-template-babel-compiler": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vue-template-babel-compiler/-/vue-template-babel-compiler-2.0.0.tgz", + "integrity": "sha512-O0GOktQ5TZCZ5sWVl8CbyLBFriwwai7xDBtpdUI1xZSbbVVNf5Um/mDHYJXaHX6vfhmeAuohggXxIi0RPgXZ4g==", + "dev": true, + "requires": { + "@babel/core": "^7.14.3", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5", + "@babel/plugin-proposal-object-rest-spread": "^7.15.6", + "@babel/plugin-proposal-optional-chaining": "^7.14.2", + "@babel/plugin-transform-arrow-functions": "^7.14.5", + "@babel/plugin-transform-block-scoping": "^7.14.5", + "@babel/plugin-transform-computed-properties": "^7.14.5", + "@babel/plugin-transform-destructuring": "^7.14.5", + "@babel/plugin-transform-parameters": "^7.14.5", + "@babel/plugin-transform-spread": "^7.14.5", + "@babel/types": "^7.14.5", + "deepmerge": "^4.2.2" + } + }, "vue-template-compiler": { "version": "2.7.14", "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz", diff --git a/app/package.json b/app/package.json index 7fafdf67..c226da16 100644 --- a/app/package.json +++ b/app/package.json @@ -32,6 +32,7 @@ "jsonschema": "^1.4.0", "jszip": "^3.7.1", "n3": "^1.15.0", + "prismjs": "^1.29.0", "rdf-literal": "^1.1.0", "register-service-worker": "^1.7.1", "smiles-drawer": "^1.2.0", @@ -78,6 +79,7 @@ "sass-loader": "^8.0.2", "sinon": "^12.0.1", "style-loader": "^2.0.0", + "vue-template-babel-compiler": "^2.0.0", "vue-template-compiler": "^2.7.14" }, "gitHooks": { diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss index 7bc80802..2973e500 100644 --- a/app/src/assets/css/modules/_pages.scss +++ b/app/src/assets/css/modules/_pages.scss @@ -165,7 +165,6 @@ position: relative !important; &-title { color: $secondary !important; - font-weight: 900; :hover { color:$primary !important; } @@ -651,4 +650,27 @@ .md-chip.md-theme-default .md-icon.md-icon-image svg{ fill: $primary; } +} + +.xmlLoader { + .md-app-side-drawer.md-app-container { + height: calc(100vh - 149px) !important; + + @include respond(tab-port) { + height: calc(100vh - 139px) !important; + } + @include respond(phone) { + height: calc(100vh - 107px) !important; + } + } + .md-right { + z-index: 25; + } + .md-drawer { + width: 414px; + @include respond(phone) { + width: 100%; + max-width: 100%; + } + } } \ No newline at end of file diff --git a/app/src/assets/css/modules/_resetvuematerial.scss b/app/src/assets/css/modules/_resetvuematerial.scss index 73c16a85..7e8bcd81 100644 --- a/app/src/assets/css/modules/_resetvuematerial.scss +++ b/app/src/assets/css/modules/_resetvuematerial.scss @@ -208,3 +208,21 @@ } } +.md-card-media.md-ratio-4-3 i{ + position: absolute; + top: 50%; + right: 0; + left: 0; + transform: translateY(-5rem); +} + +.md-snackbar { + &.md-position-left{ + &.md-snackbar-adjust{ + min-width: auto; + left: 50%; + transform: translateX(-50%); + } + } + +} \ No newline at end of file diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss index 63b37b0d..7128ae5f 100644 --- a/app/src/assets/css/modules/_utility.scss +++ b/app/src/assets/css/modules/_utility.scss @@ -14,6 +14,10 @@ max-width: 80%; } + .md-layout-item{ + height: fit-content; + } + .wrapper { padding-left: 0; padding-right: 0; @@ -136,6 +140,9 @@ margin-left: 1.2rem !important; } } + &-auto { + margin-left: auto !important; + } } &-header { margin: 2rem 0 !important; @@ -231,6 +238,9 @@ } } &--font-emph { + &-900{ + font-weight: 900; + } &-xl { font-size: $x-large-size; font-weight: 700; diff --git a/app/src/components/Drawer.vue b/app/src/components/Drawer.vue index e30cd04f..a45153a2 100644 --- a/app/src/components/Drawer.vue +++ b/app/src/components/Drawer.vue @@ -54,6 +54,9 @@ Image Gallery + + View Xmls + @@ -84,9 +87,6 @@ upload Curate - Upload a Spreadsheet diff --git a/app/src/components/Snackbar.vue b/app/src/components/Snackbar.vue index 09bd3fa9..dc66d4af 100644 --- a/app/src/components/Snackbar.vue +++ b/app/src/components/Snackbar.vue @@ -1,6 +1,6 @@