Corrections to highlights and keywords

components/section_skills.js

@@ -37,6 +37,9 @@ var sectionSkillsComponent = {
 		{
 			var item = models.newDefaultSkillKeyword();
 			//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
+			if (!this.$root.sections.skills[index].keywords) {
+				this.$set(this.$root.sections.skills[index], "keywords", []);
+			}
 			this.$root.sections.skills[index].keywords.push(item);
 		},
 		

components/section_volunteer.js

@@ -36,7 +36,10 @@ var sectionVolunteerComponent = {
 		addHighlight: function(index)
 		{
 			var item = models.newDefaultVolunteerHighlight();
-			//console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
+			console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]);
+			if (!this.$root.sections.volunteer[index].highlights) {
+				this.$set(this.$root.sections.volunteer[index], "highlights", []);
+			}
 			this.$root.sections.volunteer[index].highlights.push(item);
 		},
 		

components/section_work.js

@@ -35,10 +35,22 @@ var sectionWorkComponent = {
 
 		addHighlight: function(index)
 		{
+			if (!this.$root.sections.work[index].highlights) {
+				this.$set(this.$root.sections.work[index], "highlights", []);
+			}
 			var item = models.newDefaultWorkHighlight();
 			this.$root.sections.work[index].highlights.push(item);
 		},
 
+		deleteClickedHighlight: function(wIndex, index)
+		{
+			var response = confirm("Are you sure you want to delete this highlight?");
+
+			if (response == true)
+			{
+				this.$root.sections.work[wIndex].highlights.splice(index, 1);
+			}
+		},
 
 		deleteClicked: function(index)
 		{
@@ -60,6 +72,19 @@ var sectionWorkComponent = {
 		moveDownClicked: function(index)
 		{
 			this.$root.moveArrayPosition(this.$root.sections.work, index, index + 1);
+		},
+
+		moveUpClickedHighlight: function(wIndex,index)
+		{
+			if (index > 0)
+				this.$root.moveArrayPosition(this.$root.sections.work[wIndex].highlights, index, index - 1);
+		},
+
+
+		moveDownClickedHighlight: function(wIndex,index)
+		{
+			if (index < this.$root.sections.work[wIndex].highlights.length)
+				this.$root.moveArrayPosition(this.$root.sections.work[wIndex].highlights, index, index + 1);
 		}
 	}
 };

index.html

@@ -366,6 +366,9 @@
                                 <ol>
                                     <li v-for="(highlight, h_index) in work.highlights">
                                         <input class="w3-input w3-border" type="text" v-model="$root.sections.work[w_index].highlights[h_index]">
+                                        <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="moveUpClickedHighlight(w_index,h_index)">^ Highlight</button>
+                                        <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="moveDownClickedHighlight(w_index,h_index)">v Highlight</button>
+                                        <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="deleteClickedHighlight(w_index,h_index)">X Highlight</button>
                                     </li>
                                 </ol>
                             </div>
@@ -872,7 +875,6 @@
                                 <small id="highlightsHelp" class="form-help text-muted">Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising).</small>
     
                                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addHighlight(p_index)">+ Add Highlight</button>
-                                <span v-if="project.highlights">X: {{project.highlights.length}}</span>
                                 <ol>
                                     <li v-for="(highlight, h_index) in project.highlights">
                                         <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].highlights[h_index]">
@@ -999,7 +1001,7 @@
                             <div class="w3-container w3-card w3-white w3-margin-bottom w3-padding-32" v-if="$root.sections.work.length > 0">
                                 <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work</h2>
 
-                                <div class="w3-container" v-for="(work, w_index) in $root.sections.work">
+                                <div class="w3-container" v-for="(work, w_index) in $root.sections.work" v-bind:id="'content' + w_index">
                                     <h5 class="w3-opacity"><b>{{work.position}}</b></h5>
                                     <b>{{work.company}}</b>
                                     <a v-if="work.website" v-bind:href="work.website" target="_blank" class="w3-margin-left"><i class="fas fa-globe"></i></a>