From 177056f222d69c37679f0ffe47b81a14b9311478 Mon Sep 17 00:00:00 2001
From: chris2fr <chris@mann.fr>
Date: Mon, 26 Oct 2020 10:51:41 +0100
Subject: [PATCH] Better managerment of skills with generic sub-item controller

---
 components/section_projects.js | 21 ++++++++++++++++++++
 index.html                     | 36 ++++++++++++++++------------------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/components/section_projects.js b/components/section_projects.js
index 59e0ebf..9c85424 100644
--- a/components/section_projects.js
+++ b/components/section_projects.js
@@ -92,6 +92,27 @@ var sectionProjectsComponent = {
 		moveDownClicked: function(index)
 		{
 			this.$root.moveArrayPosition(this.$root.sections.work, index, index + 1);
+		},
+
+		deleteClickedSubitem: function(mainitem, index)
+		{
+			var response = confirm("Are you sure you want to delete this keyword?");
+	
+			if (response == true)
+			{
+				mainitem.splice(index, 1);
+			}
+		},
+	
+		moveUpClickedSubitem: function(mainitem,index)
+		{
+				this.$root.moveArrayPosition(mainitem, index, index - 1);
+		},
+	
+	
+		moveDownClickedSubitem: function(mainitem,index)
+		{
+				this.$root.moveArrayPosition(mainitem, index, index + 1);
 		}
 	}
 };
\ No newline at end of file
diff --git a/index.html b/index.html
index 55a71c0..e657feb 100644
--- a/index.html
+++ b/index.html
@@ -376,7 +376,7 @@
 
                                 
 
-                                <form class="margin-top-32" v-for="(highlight, h_index) in work.highlights">
+                                <form class="" v-for="(highlight, h_index) in work.highlights">
                                 <simple-list-item v-bind:modelitem="$root.sections.work[w_index].highlights" v-bind:id="h_index" v-on:delete-clicked="deleteClickedHighlight(w_index,h_index)" v-on:move-up-clicked="moveUpClickedHighlight(w_index,h_index)" v-on:move-down-clicked="moveDownClickedHighlight(w_index,h_index)"></simple-list-item>
                                 </form>
 <!--
@@ -537,7 +537,7 @@
     
                                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addCourse(e_index)">+ Add Course</button>
 
-                                <form class="margin-top-32" v-for="(course, c_index) in edu.courses">
+                                <form class="" v-for="(course, c_index) in edu.courses">
                                     <simple-list-item v-bind:modelitem="$root.sections.education[e_index].courses" v-bind:id="c_index" v-on:delete-clicked="deleteClickedCourse(e_index,c_index)" v-on:move-up-clicked="moveUpClickedCourse(e_index,c_index)" v-on:move-down-clicked="moveDownClickedCourse(e_index,c_index)"></simple-list-item>
                                 </form>
                             </div>
@@ -694,7 +694,7 @@
                                 <small id="keywordsHelp" class="form-help text-muted">Keywords (e.g. HTML, CSS, JavaScript).</small>
     
                                 <button type="button" class="w3-btn w3-white w3-border w3-border-blue w3-round w3-padding-small" v-on:click="addKeyword(s_index)">+ Add Keyword</button>
-                                <form class="margin-top-32" v-for="(keyword, k_index) in skill.keywords">
+                                <form class="" v-for="(keyword, k_index) in skill.keywords">
                                     <simple-list-item v-bind:modelitem="$root.sections.skills[s_index].keywords" v-bind:id="k_index" v-on:delete-clicked="deleteClickedKeyword(s_index,k_index)" v-on:move-up-clicked="moveUpClickedKeyword(s_index,k_index)" v-on:move-down-clicked="moveDownClickedKeyword(s_index,k_index)"></simple-list-item>
                                 </form>
                             </div>
@@ -875,33 +875,31 @@
                                 <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>
-                                <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]">
-                                    </li>
-                                </ol>
+
+                                <form class="" v-for="(subitem, si_index) in project.highlights">
+                                    <simple-list-item v-bind:modelitem="project.highlights" v-bind:id="si_index" v-on:delete-clicked="deleteClickedSubitem(project.highlights,si_index)" v-on:move-up-clicked="moveUpClickedSubitem(project.highlights,si_index)" v-on:move-down-clicked="moveDownClickedSubitem(project.highlights,si_index)"></simple-list-item>
+                                </form>
 
 
                                 <h5 class="margin-top-32">Keywords</h5>
                                 <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="addKeyword(p_index)">+ Add Keyword</button>
-                                <ol>
-                                    <li v-for="(keyword, k_index) in project.keywords">
-                                        <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].keywords[k_index]">
-                                    </li>
-                                </ol>
+
+                                
+                                <form class="" v-for="(subitem, si_index) in project.keywords">
+                                    <simple-list-item v-bind:modelitem="project.keywords" v-bind:id="si_index" v-on:delete-clicked="deleteClickedSubitem(project.keywords,si_index)" v-on:move-up-clicked="moveUpClickedSubitem(project.keywords,si_index)" v-on:move-down-clicked="moveDownClickedSubitem(project.keywords,si_index)"></simple-list-item>
+                                </form>
 
 
-                                <h5 class="margin-top-32">Roles</h5>
+                                <h5 class="">Roles</h5>
                                 <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="addRole(p_index)">+ Add Role</button>
-                                <ol>
-                                    <li v-for="(role, r_index) in project.roles">
-                                        <input class="w3-input w3-border" type="text" v-model="$root.sections.projects[p_index].roles[r_index]">
-                                    </li>
-                                </ol>
+
+                                <form class="margin-top-32" v-for="(subitem, si_index) in project.roles">
+                                    <simple-list-item v-bind:modelitem="project.roles" v-bind:id="si_index" v-on:delete-clicked="deleteClickedSubitem(project.roles,si_index)" v-on:move-up-clicked="moveUpClickedSubitem(project.roles,si_index)" v-on:move-down-clicked="moveDownClickedSubitem(project.roles,si_index)"></simple-list-item>
+                                </form>
                             </div>
                         </form>
                     </div>