Update project configuration (#39)

* Updated project structure

* Updated folder name

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*.{js,vue}]
 indent_style = tab
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true

.eslintrc.js

@@ -7,9 +7,7 @@ module.exports = {
 		'array-bracket-spacing': 'off',
 		'array-callback-return': 'off',
 		'arrow-parens': ['error', 'as-needed'],
-		'brace-style': ['error', 'stroustrup'],
 		'class-methods-use-this': 'off',
-		'comma-dangle': ['error', 'never'],
 		'consistent-return': 'off',
 		'func-names': ['error', 'as-needed'],
 		'function-paren-newline': 'off',
@@ -19,7 +17,6 @@ module.exports = {
 		'import/prefer-default-export': 'off',
 		'import/no-cycle': 'off',
 		'indent': 'off',
-		'key-spacing': ['error', { 'align': { 'on': 'colon', 'beforeColon': true, 'afterColon': true } }],
 		'linebreak-style': 'off',
 		'no-console': process.env.NODE_ENV === 'production' ? ['error', { allow: ['error'] }] : 'off',
 		'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',

.github/workflows/editorconfig.yml

@@ -1,23 +1,24 @@
-name: EditorConfig
+name: EditorConfig check
 
-on:
-  push:
-    branches:
-      - master
+on: ['push']
 
 jobs:
-  lint:
+  editorconfig-check:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [12.x]
     steps:
-      - uses: actions/checkout@v2
-      - uses: borales/[email protected]
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Run install
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: install
-      - uses: borales/[email protected]
+
+      - name: Run unit tests
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: editorconfig:check

.github/workflows/lint.yml

@@ -1,23 +1,24 @@
 name: Linting
 
-on:
-  push:
-    branches:
-      - master
+on: ['push']
 
 jobs:
   lint:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [12.x]
     steps:
-      - uses: actions/checkout@v2
-      - uses: borales/[email protected]
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Run install
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: install
-      - uses: borales/[email protected]
+
+      - name: Run Lint
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: lint

.github/workflows/unit_tests.yml

@@ -1,23 +1,24 @@
 name: Unit tests
 
-on:
-  push:
-    branches:
-      - master
+on: ['push']
 
 jobs:
-  lint:
+  unit-tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [12.x]
     steps:
-      - uses: actions/checkout@v2
-      - uses: borales/[email protected]
+      - uses: actions/checkout@v3
+
+      - name: Set Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+
+      - name: Run install
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: install
-      - uses: borales/[email protected]
+
+      - name: Run unit tests
+        uses: borales/actions-yarn@v4
         with:
-          node-version: ${{ matrix.node-version }}
           cmd: test:unit

README.md

@@ -4,9 +4,19 @@
 [![](https://github.com/alexmozheyko/truck-configurator/workflows/Linting/badge.svg)](https://github.com/alexmozheyko/truck-configurator/actions?query=workflow%3ALinting)
 [![](https://github.com/alexmozheyko/truck-configurator/workflows/EditorConfig/badge.svg)](https://github.com/alexmozheyko/truck-configurator/actions?query=workflow%3AEditorConfig)
 
-### A prototype of solution that helps the engineers to visualize which components can be combined in accordance with sales department.
 
-#### For solution explanations please visit [Solution explanation file](./solution-explanation.md)
+## Description
+To search for the necessary truck elements (external or internal), type a keyword in the search bar at the top of the screen.
+When user selects at least one of the results presented in the table, the `Your selection` section appears at the bottom of the page. It is possible to delete any of the selected elements or all at once (note, that the `Your selection` section is hidden if there are no selected elements).
+
+The `View combinations` button enabled only if at least one internal and external element are selected (i.e. combinations can be made). When user clicks on `View combinations` button, a confirmation modal appears in accordance with the task. 
+
+After clicking on `View combinations` button, user redirects to a page with possible combinations, which are shown in a table.
+If combinations between the selected elements are not possible, the notification `No combinations found` appears. The search field on this page is blocked because search can only be done on the `Landing page`.
+
+On this page, user can also delete one or more selected items. After each deletion, possible combinations are updated to show relevant data. If user deletes the last selected item, he returns to the `Landing page`. He can also get back to the `Landing page` by clicking on the `Back` button.
+
+> The application is build using Vue.js (Vuex) and Bootstrap. It is fully mobile responsive and covered by unit tests.
 
 ## Build / run guide:
 

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
 	presets: [
-		'@vue/cli-plugin-babel/preset'
-	]
+		'@vue/cli-plugin-babel/preset',
+	],
 };

jest.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-	preset: '@vue/cli-plugin-unit-jest'
+	preset: '@vue/cli-plugin-unit-jest',
 };

package.json

@@ -1,7 +1,8 @@
 {
 	"name": "truck-configurator",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"private": true,
+	"author": "Aliaksei Mazheika",
 	"scripts": {
 		"serve": "vue-cli-service serve",
 		"build": "vue-cli-service build",

src/App.vue

@@ -12,40 +12,38 @@
 </template>
 
 <script>
-	import { mapState } from 'vuex';
-
-	import BottomBar         from './components/bottom-bar/BottomBar.vue';
-	import CombinationsTable from './components/truck-elems/CombinationsTable.vue';
-	import SearchResults     from './components/truck-elems/FoundedTruckElems.vue';
-	import TopBar            from './components/top-bar/TopBar.vue';
-
-	export default {
-		name       : 'app',
-		components : {
-			BottomBar,
-			CombinationsTable,
-			SearchResults,
-			TopBar
-		},
-		computed: {
-			...mapState([ 'isCombinationsPage' ])
-		}
-	};
+import { mapState } from 'vuex';
+
+import BottomBar from '@/components/bottom-bar/BottomBar.vue';
+import CombinationsTable from '@/components/truck-elements/CombinationsTable.vue';
+import SearchResults from '@/components/truck-elements/FoundedTruckElements.vue';
+import TopBar from '@/components/top-bar/TopBar.vue';
+
+export default {
+	name: 'app',
+	components: {
+		BottomBar,
+		CombinationsTable,
+		SearchResults,
+		TopBar,
+	},
+	computed: {
+		...mapState(['isCombinationsPage']),
+	},
+};
 </script>
 
 <style lang="scss">
-
-	#app {
-		width                   : 100%;
-		height                  : 100%;
-		-webkit-font-smoothing  : antialiased;
-		-moz-osx-font-smoothing : grayscale;
-	}
-
-	.main {
-		height     : calc(100% - var(--topbar-height));
-		margin     : var(--topbar-height) 0 0;
-		overflow-y : auto;
-	}
-
+#app {
+	width: 100%;
+	height: 100%;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.main {
+	height: calc(100% - var(--topbar-height));
+	margin: var(--topbar-height) 0 0;
+	overflow-y: auto;
+}
 </style>

src/assets/styles/global.scss

@@ -1,25 +1,26 @@
 // Color variables
-$primary   : #4b95d2;
-$secondary : #dbdcdf;
-$danger    : #e84950;
-$dark      : #303c49;
+$primary: #4b95d2;
+$secondary: #dbdcdf;
+$danger: #e84950;
+$dark: #303c49;
 
-@import 'node_modules/bootstrap/scss/bootstrap';
-@import 'node_modules/bootstrap-vue/src/index.scss';
+@import "node_modules/bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap-vue/src/index.scss";
 
 // Global variables
 :root {
-	--topbar-height: 8rem;
+  --topbar-height: 8rem;
 
-	@media (max-width: 576px) {
-		--topbar-height: 6rem;
-	}
+  @media (max-width: 576px) {
+    --topbar-height: 6rem;
+  }
 }
 
-html, body {
-	height      : 100%;
-	width       : 100%;
-	font-family : 'Open Sans', sans-serif;
-	font-size   : 16px;
-	overflow    : hidden;
+html,
+body {
+  height: 100%;
+  width: 100%;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  overflow: hidden;
 }