Use computed property to define display name and to handle resolution status

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "fuzz-roadmap",
-	"version": "1.2.3",
+	"version": "1.2.4",
 	"description": "A roadmapping tool that lets you forget about time estimate and focus on what matters",
 	"author": "Adrien D. Ahlqvist",
 	"bugs": "https://github.com/Armitage35/fuzzy-roadmap/issues",

src/App.vue

@@ -167,9 +167,6 @@
 				});
 			},
 			updateEpic(event) {
-				// @TODO: display name shoud not be a string but a computed property
-				// @TODO: the whole resolution system should also be a computed property
-				event.epicName.displayName = event.epicName.fullName;
 				event.updated = new Date();
 				this.userEpics.splice(event.id, 1, event);
 
@@ -200,10 +197,7 @@
 			},
 			createEpic(epicData) {
 				let newEpic = {
-					epicName: {
-						displayName: epicData[0],
-						fullName: epicData[0],
-					},
+					epicName: epicData[0],
 					status: epicData[1],
 					creationDate: new Date(),
 					order: 1,
@@ -222,7 +216,7 @@
 				iziToast.success({
 					title: 'Epic created',
 					message: 'You are getting the hang of this',
-					position: "topRight"
+					position: 'topRight'
 				});
 			},
 			batchAddEpics (batch) {

src/components/Epic/Epic.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="epic" @click="$emit('epicSelectd', id)">
 		<div class="epicStatusMarker" :class="classNameCalculation()"></div>
-		<div class="epicTitle">{{this.epicTitle}}</div>
+		<div class="epicTitle">{{this.EpicName}}</div>
 	</div>
 </template>
 
 <script>
 export default {
-	props: ['epicTitle', 'epicStatus', 'id'],
+	props: ['EpicName', 'epicStatus', 'id'],
 	methods: {
 			classNameCalculation(){
 				return "epic" + this.epicStatus.charAt(0).toUpperCase() + this.epicStatus.slice(1)

src/components/Lane/Lane.vue

@@ -6,7 +6,7 @@
 		<div class="laneContent">
 			<Epic
 				v-for="epic in epics"
-				:epicTitle="epic.epicName.displayName"
+				:EpicName="epic.epicName"
 				:epicStatus="epic.status"
 				:key="epic.id"
 				:id="epic.id"
@@ -24,12 +24,6 @@
 			Epic
 		},
 		props: ['laneStatus', 'laneTitle', 'epics'],
-		data: function(){
-			return {
-				epicTitle: "Cameras in Jogogo",
-				epicStatus: "epicInProgress"
-			}
-		},
 		methods: {
 			classNameCalculation(){
 				return "lane" + this.laneStatus.charAt(0).toUpperCase() + this.laneStatus.slice(1)

src/components/Modal/EpicDetailsModal/EpicDetailsModal.vue

@@ -34,11 +34,11 @@
 						<br />
 						<input
 							type="text"
-							name="userName"
+							name="epicName"
 							spellcheck="true"
 							class="modal-form-title"
 							autocomplete="off"
-							v-model="selectedEpic.epicName.fullName">
+							v-model="selectedEpic.epicName">
 					</div>
 					<div class="modal-form">
 						<label for="epicStatus">Epic status</label>

src/components/Modal/EpicModal/EpicModal.vue

@@ -39,21 +39,18 @@
 		props: ['epics'],
 		data: function() {
 			return {
-				epicName: "",
-				epicStatus: "inProgress"
+				epicName: '',
+				epicStatus: 'inProgress'
 			}
 		},
 		methods: {
 			// @TODO: this should be in an event bus to share it directly to the App component
 			closeModal() {
-				this.$emit('toggleModal', "");
+				this.$emit('toggleModal', '');
 			},
 			saveEpic() {
 				let newEpic = {
-					name: {
-						displayName: this.epicName,
-						fullName: this.epicName,
-					},
+					epicName: this.epicName,
 					status: this.epicStatus,
 					creationDate: new Date(),
 					order: 1,
@@ -68,7 +65,7 @@
 				iziToast.success({
 					title: 'Epic created',
 					message: 'You are getting the hang of this',
-					position: "topRight"
+					position: 'topRight'
 				});
 			}
 		}

src/utilities/demoRoadmap.js

@@ -1,10 +1,7 @@
 module.exports = {
 	demoEpics: [
 		{
-			epicName: {
-				displayName: 'Camera data',
-				fullName: 'Camera data',
-			},
+			epicName: 'Camera data',
 			status: 'inProgress',
 			creationDate: new Date(),
 			order: 1,
@@ -15,10 +12,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'App rewrite',
-				fullName: 'App rewrite',
-			},
+			epicName: 'App rewrite',
 			status: 'inProgress',
 			creationDate: new Date(),
 			order: 2,
@@ -29,10 +23,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Brand specific instance',
-				fullName: 'Brand specific instance',
-			},
+			epicName: 'Brand specific instance',
 			status: 'inProgress',
 			creationDate: new Date(),
 			order: 2,
@@ -43,10 +34,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'LOCATION SPECIFIC CHECK-IN PORTAL',
-				fullName: 'LOCATION SPECIFIC CHECK-IN PORTAL',
-			},
+			epicName: 'LOCATION SPECIFIC CHECK-IN PORTAL',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -57,10 +45,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'ACTIVATION DASHBOARD AND REPORTING',
-				fullName: 'ACTIVATION DASHBOARD AND REPORTING',
-			},
+			epicName: 'ACTIVATION DASHBOARD AND REPORTING',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -71,10 +56,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Trends analytics',
-				fullName: 'Trends analytics',
-			},
+			epicName: 'Trends analytics',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -85,10 +67,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Brand-wide dashboard',
-				fullName: 'Brand-wide dashboard',
-			},
+			epicName: 'Brand-wide dashboard',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -99,10 +78,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Visitor segment',
-				fullName: 'Visitor segment',
-			},
+			epicName: 'Visitor segment',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -113,10 +89,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Brand-wide POI',
-				fullName: 'Brand-wide POI',
-			},
+			epicName: 'Brand-wide POI',
 			status: 'soon',
 			creationDate: new Date(),
 			order: 1,
@@ -127,10 +100,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'INTEGRATIONS',
-				fullName: 'INTEGRATIONS',
-			},
+			epicName: 'INTEGRATIONS',
 			status: 'later',
 			creationDate: new Date(),
 			order: 1,
@@ -141,10 +111,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'BEHAVIOR FLOW FOR POI',
-				fullName: 'BEHAVIOR FLOW FOR POI',
-			},
+			epicName: 'BEHAVIOR FLOW FOR POI',
 			status: 'later',
 			creationDate: new Date(),
 			order: 1,
@@ -155,10 +122,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'Notifications',
-				fullName: 'Notifications',
-			},
+			epicName: 'Notifications',
 			status: 'later',
 			creationDate: new Date(),
 			order: 1,
@@ -169,10 +133,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'SEGMENT TRACKING IN APP',
-				fullName: 'SEGMENT TRACKING IN APP',
-			},
+			epicName: 'SEGMENT TRACKING IN APP',
 			status: 'later',
 			creationDate: new Date(),
 			order: 1,
@@ -183,10 +144,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'API DOCUMENTATION',
-				fullName: 'API DOCUMENTATION',
-			},
+			epicName: 'API DOCUMENTATION',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -197,10 +155,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'READ-ONLY MANAGERS',
-				fullName: 'READ-ONLY MANAGERS',
-			},
+			epicName: 'READ-ONLY MANAGERS',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -211,10 +166,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'ZONE DETAILS IN POI',
-				fullName: 'ZONE DETAILS IN POI',
-			},
+			epicName: 'ZONE DETAILS IN POI',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -225,10 +177,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'API PULL STATS',
-				fullName: 'API PULL STATS',
-			},
+			epicName: 'API PULL STATS',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -239,10 +188,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'FLOOR PLAN',
-				fullName: 'FLOOR PLAN',
-			},
+			epicName: 'FLOOR PLAN',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -253,10 +199,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'POE UPDATE',
-				fullName: 'POE UPDATE',
-			},
+			epicName: 'POE UPDATE',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -267,10 +210,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'BRAND-WIDE MESSAGES',
-				fullName: 'BRAND-WIDE MESSAGES',
-			},
+			epicName: 'BRAND-WIDE MESSAGES',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,
@@ -281,10 +221,7 @@ module.exports = {
 			author: 'Adrien D. Ahlqvist',
 		},
 		{
-			epicName: {
-				displayName: 'SMS CHECK-IN',
-				fullName: 'SMS CHECK-IN',
-			},
+			epicName: 'SMS CHECK-IN',
 			status: 'done',
 			creationDate: new Date(),
 			order: 1,