Handle settings (#40)

* Fix missclick

* boilerplate for settings

* Simplify working with .yml files

* Handle escape key on modal to close

* Boilerplate setting form

* Add a second column to display a profile picture

* Create user object

* Pass user preferences to pref pane

* Please linter gods (who are always right)

* Add final details before handling changes

* enable closing settings modal and styling change

* emit settings object on save

* Save user settings

* Removing useless style files

* Add early version disclaimer

* Bump package version

* Make label clickable

* Actually use the user's picture to display it

* Use username to create epic

* Updates based on PR comments

* Update package.json

* Update src/App.vue

.editorconfig

@@ -10,3 +10,7 @@ insert_final_newline = true
 
 [*.md]
 trim_trailing_whitespace = false
+
+[*.yml]
+indent_style = spaces
+indent_size = 2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuzz-roadmap",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A roadmapping tool that lets you forget about timelines",
   "author": "Adrien D. Ahlqvist",
   "bugs": "https://github.com/Armitage35/fuzzy-roadmap/issues",

public/index.html

@@ -14,6 +14,7 @@
       <strong>We're sorry but Fuzz Roadmap doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+		<!-- built files will be auto injected -->
+		<!-- @TODO: add a manifest -->
   </body>
 </html>

src/App.scss

@@ -1,5 +1,6 @@
 body {
-    font-family: $mainFonts;
+	font-family: $mainFonts;
+	text-transform: uppercase;
 }
 
 h2 {
@@ -21,7 +22,7 @@ select {
 	width: 240px;
 	font-size: 24px;
 	box-shadow: 1px 1px #888888;
-	color: $lightGrey;
+	color: black;
 	outline: none
 }
 
@@ -39,12 +40,12 @@ button {
 }
 
 .app {
-    display: flex;
+	display: flex;
 }
 
 .roadmap {
-    display: flex;
-    margin: 30px;
+	display: flex;
+	margin: 30px;
 }
 
 .bttn-secondary {
@@ -65,3 +66,7 @@ button {
 .bttn-primary:hover {
 	background-color: $primaryBlue;
 }
+
+.iziToast-body {
+	text-transform: none;
+}

src/App.vue

@@ -4,7 +4,9 @@
 			v-if="appState.modal.showModal"
 			:modalType="appState.modal.modalType"
 			:epics="this.demoEpics"
+			:userSettings="this.userDetails"
 			@toggleModal="toggleModal($event)"
+			@updateSettings="updateSettings($event)"
 		></Modal>
 		<div class="roadmap">
 			<Lane
@@ -24,6 +26,10 @@
 	import './master.scss';
 	const demoEpics = require( './utilities/demo.js');
 
+	// Importing external modules
+	import iziToast from 'izitoast';
+	import 'izitoast/dist/css/iziToast.min.css';
+
 	// Components
 	import Lane from './components/Lane/Lane.vue';
 	import Toolbar from './components/Toolbar/Toolbar.vue';
@@ -33,7 +39,7 @@
 		components: {
 			Lane, Toolbar, Modal
 		},
-		data: function() {
+		data: function () {
 			return {
 				lanes: [
 					{title: 'in progress', type: "inProgress"},
@@ -42,13 +48,26 @@
 					{title: 'done', type: "done"}
 					],
 				demoEpics: demoEpics.demoEpics,
+				userDetails: {
+					id: Math.floor(Math.random() * 200),
+					email: 'ron@hogwarts.com',
+					profilePicture: 'https://fr.gravatar.com/userimage/26960800/576f0907a4ed387626f1c211c4b11942.png',
+					userName: 'New User',
+					createdOn: new Date(),
+					lastLoginDate: new Date(),
+					preferences: {
+						theme: 'light',
+						language: 'en',
+						tracking: true
+					}
+				},
 				appState: {
 					modal:{
 						showModal: false,
 						modalType: ""
 					},
 					activeView: "roadmap"
-				},
+				}
 			}
 		},
 		methods: {
@@ -78,6 +97,20 @@
 						default:
 							null;
 				}
+			},
+			updateSettings(event) {
+				this.userDetails.userName = event.userName;
+				this.userDetails.email = event.email;
+				this.userDetails.profilePicture = event.pictureUrl;
+				this.userDetails.preferences.language = event.language;
+				this.userDetails.preferences.theme = event.theme;
+				this.userDetails.preferences.tracking = event.tracking;
+
+				iziToast.success({
+					title: 'Settings updated',
+					message: 'Your profile has a newfound gleam',
+					position: "topRight"
+				});
 			}
 		},
 		computed: {

src/components/Epic/Epic.scss

@@ -1,37 +1,37 @@
 .epic {
-    border: $defaultBorder;
-    height: 70px;
-    width: 18vw;
-    display: flex;
-    margin: auto;
+	border: $defaultBorder;
+	height: 70px;
+	width: 18vw;
+	display: flex;
+	margin: auto;
 	margin-bottom: 20px;
 	text-transform: uppercase;
 }
 
 .epicStatusMarker {
-    border-right: $defaultBorder;
-    background-color: $epicYellow;
-    height: 100%;
-    min-width: 10px;
+	border-right: $defaultBorder;
+	background-color: $epicYellow;
+	height: 100%;
+	min-width: 10px;
 }
 
 .epicTitle {
-    text-align: center;
-    margin: auto
+	text-align: center;
+	margin: auto
 }
 
 .epicInProgress {
-    background-color: $epicYellow;
+	background-color: $epicYellow;
 }
 
 .epicSoon {
-    background-color: $epicBlue;
+	background-color: $epicBlue;
 }
 
 .epicLater {
-    background-color: $epicRed;
+	background-color: $epicRed;
 }
 
-.epicDone{
-    background-color: $epicGreen;
+.epicDone {
+	background-color: $epicGreen;
 }

src/components/Lane/Lane.scss

@@ -1,49 +1,55 @@
 // @TODO: use flexbox properly rather than hacking your way in
 .lane {
-    width: 22vw;
-    height: 80vh;
-    display: inline-block;
+	width: 22vw;
+	height: 80vh;
+	display: inline-block;
 }
 
 .laneHeader {
-    width: 20vw;
-    height: 80px;
-    text-align: center;
-    margin: auto;
-    font-size: 18px;
-    font-weight: bold;
-    display: inline-flex;
+	width: 20vw;
+	height: 80px;
+	text-align: center;
+	margin: auto;
+	font-size: 18px;
+	font-weight: bold;
+	display: inline-flex;
 	margin-left: 1vw;
 	text-transform: uppercase;
 }
 
 .laneTitle {
-    text-align: center;
-    margin: auto;
+	text-align: center;
+	margin: auto;
 }
 
 .laneContent {
-    height: 100%;
-    border-right: $defaultBorder;
-    margin-top: 20px
+	height: 100%;
+	border-right: $defaultBorder;
+	margin-top: 20px
+}
+
+.lane:last-of-type {
+	.laneContent {
+		border-right: none
+	}
 }
 
 .laneInProgress {
-    border: 1px solid $epicDarkYellow;
-    background-color: $epicYellow;
+	border: 1px solid $epicDarkYellow;
+	background-color: $epicYellow;
 }
 
 .laneSoon {
-    border: 1px solid $epiDcarkBlue;
-    background-color: $epicBlue;
+	border: 1px solid $epiDcarkBlue;
+	background-color: $epicBlue;
 }
 
 .laneLater {
-    border: 1px solid $epicDarkRed;
-    background-color: $epicRed;
+	border: 1px solid $epicDarkRed;
+	background-color: $epicRed;
 }
 
 .laneDone {
-    border: 1px solid $epicDarkGreen;
-    background-color: $epicGreen;
+	border: 1px solid $epicDarkGreen;
+	background-color: $epicGreen;
 }

src/components/Modal/EpicModal/EpicModal.vue

@@ -36,7 +36,7 @@
 	import 'izitoast/dist/css/iziToast.min.css';
 
 	export default {
-		props: ['epics'],
+		props: ['epics', 'author'],
 		data: function() {
 			return {
 				epicName: "",
@@ -61,7 +61,7 @@
 						resolved: false,
 						resolutionDate: null
 					},
-					author: 'Adrien D. Ahlqvist'
+					author: this.author
 				}
 				this.epics.push(newEpic);
 				this.closeModal();

src/components/Modal/Modal.scss

@@ -14,6 +14,8 @@
 
 .modal-container {
 	width: 800px;
+	max-height: 80vh;
+	overflow: auto;
 	margin: 0 auto;
 	background-color: #fff;
 	box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
@@ -23,7 +25,8 @@
 
 .modal-header {
 	display: flex;
-	margin: 32px
+	margin: 32px;
+	margin-bottom: 0;
 }
 
 .modal-close {

src/components/Modal/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="modal-mask">
+	<div class="modal-mask" tabindex="0" @keydown.esc="closeModal">
 		<div class="modal-container">
 			<div class="modal-header">
 				<h2 class="modal-title">{{modalTitle}}</h2>
@@ -11,31 +11,45 @@
 				v-if="modalType === 'epic'"
 				@toggleModal="closeModal"
 				:epics="this.epics"
+				:author="userSettings.userName"
 			></EpicModal>
+			<SettingsModal
+				v-if="modalType === 'settings'"
+				:userSettings="this.userSettings"
+				@toggleModal="closeModal"
+				@updateSettings="updateSettings($event)"
+				></SettingsModal>
 		</div>
 	</div>
 </template>
 
 <script>
-	import EpicModal from './EpicModal/EpicModal';
+	import EpicModal from './EpicModal/EpicModal.vue';
+	import SettingsModal from './SettingsModal/SettingsModal.vue';
 
 	export default {
-		props: ['modalType', 'epics'],
+		props: ['modalType', 'epics', 'userSettings'],
 		components: {
-			EpicModal
+			EpicModal,
+			SettingsModal
 		},
 		computed: {
-			modalTitle: function(){
+			modalTitle (){
 				if (this.modalType === "epic"){
-					return "Create your epic"
+					return "Create your epic";
+				} else if (this.modalType === "settings"){
+					return "Set your preferences";
 				} else {
-					return "Edit your epic"
+					return "Edit epic";
 				}
 			}
 		},
 		methods: {
-			closeModal() {
+			closeModal () {
 				this.$emit('toggleModal', "");
+			},
+			updateSettings (event) {
+				this.$emit('updateSettings', event);
 			}
 		}
 	}