From 6c8cd51bdbef6d24dbeab00b0a0240d58d70fce7 Mon Sep 17 00:00:00 2001 From: Jason Snelders Date: Sat, 16 Nov 2019 18:39:20 +1100 Subject: [PATCH] List item sorting and deleting. --- app/app.js | 89 ++++ ...t_registration.js => page_registration.js} | 0 components/card_header.js | 63 +++ components/section_awards.js | 23 + components/section_education.js | 23 + components/section_interests.js | 23 + components/section_languages.js | 23 + components/section_publications.js | 23 + components/section_references.js | 23 + components/section_skills.js | 23 + components/section_volunteer.js | 23 + components/section_work.js | 23 + index.html | 484 ++++++++++-------- 13 files changed, 638 insertions(+), 205 deletions(-) rename app/{component_registration.js => page_registration.js} (100%) create mode 100644 components/card_header.js diff --git a/app/app.js b/app/app.js index 3d8ebe2..26c9324 100644 --- a/app/app.js +++ b/app/app.js @@ -239,6 +239,32 @@ var app = new Vue({ }, + dateMonthYear: function(dateString) + { + var dt = new Date(dateString); + + return dt.getFullYear() + ", " + this.getMonthName(dt.getMonth() + 1); + }, + + + getMonthName: function(monthNumber) + { + if (monthNumber == 1) return "January"; + if (monthNumber == 2) return "February"; + if (monthNumber == 3) return "March"; + if (monthNumber == 4) return "April"; + if (monthNumber == 5) return "May"; + if (monthNumber == 6) return "June"; + if (monthNumber == 7) return "July"; + if (monthNumber == 8) return "August"; + if (monthNumber == 9) return "September"; + if (monthNumber == 10) return "October"; + if (monthNumber == 11) return "November"; + if (monthNumber == 12) return "December"; + + return ""; + }, + /** * Clear save data and reset the sections structure. @@ -376,6 +402,69 @@ var app = new Vue({ element.classList.add("w3-blue"); } } + }, + + + /** + * Collapse or un-collapse a content element by setting its collapse state to opposite of current state. + * @param {string} id ID of the content element to collapse/un-collapse. + */ + invertCollapse: function(id) + { + var x = document.getElementById(id); + if (x.className.indexOf("w3-show") == -1) + { + x.className += " w3-show"; + } + else + { + x.className = x.className.replace(" w3-show", ""); + } + }, + + + + /** + * Move the position of an element in an array. + * + * @param array arr The array to move an element in. + * @param int old_index Current position of the element. + * @param int new_index New position of the element. + * + * @return array Updated array. + */ + moveArrayPosition: function(arr, old_index, new_index) + { + if (new_index == old_index) + { + // No change + return ; + } + + if (new_index > old_index) + { + // Moving forward in array + if (old_index == this.$root.sections.work.length - 1) return; // Cannot move beyond the end of the array + } + if (new_index < old_index) + { + // Moving back in array + if (old_index == 0) return; // Cannot move beyond the start of the array + } + + + if (new_index >= arr.length) + { + var k = new_index - arr.length + 1; + while (k--) + { + arr.push(undefined); + } + } + + arr.splice(new_index, 0, arr.splice(old_index, 1)[0]); + + return arr; // for testing } }, diff --git a/app/component_registration.js b/app/page_registration.js similarity index 100% rename from app/component_registration.js rename to app/page_registration.js diff --git a/components/card_header.js b/components/card_header.js new file mode 100644 index 0000000..7be4d5a --- /dev/null +++ b/components/card_header.js @@ -0,0 +1,63 @@ +Vue.component("card-header", { + template: '#card-header-template', + + + props: [ + 'label', + 'id' + ], + + + + + mounted: function() + { + this.displayFormat = (this.format ? this.format : ""); + }, + + + + destroyed: function() + { + + }, + + + + data: function() + { + return { + + }; + }, + + + + methods: { + getLabel: function() + { + return (this.label ? this.label : "(Untitled)"); + }, + + + deleteClick: function() + { + //alert("deleteClick"); + this.$emit('delete-clicked', this.id); + }, + + + moveUpClick: function() + { + //alert("moveUpClick"); + this.$emit('move-up-clicked', this.id); + }, + + + moveDownClick: function() + { + //alert("moveDownClick"); + this.$emit('move-down-clicked', this.id); + }, + } +}); \ No newline at end of file diff --git a/components/section_awards.js b/components/section_awards.js index 68e1835..d2de6fa 100644 --- a/components/section_awards.js +++ b/components/section_awards.js @@ -31,6 +31,29 @@ var sectionAwardsComponent = { { var item = this.$root.getDefaultAward(); this.$root.sections.awards.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this award?"); + + if (response == true) + { + this.$root.sections.awards.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.awards, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.awards, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_education.js b/components/section_education.js index 23db539..4280c0f 100644 --- a/components/section_education.js +++ b/components/section_education.js @@ -37,6 +37,29 @@ var sectionEducationComponent = { { var item = sections.getDefaultEducationCourse(); this.$root.sections.education[index].courses.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this position?"); + + if (response == true) + { + this.$root.sections.education.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.education, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.education, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_interests.js b/components/section_interests.js index c65bfb9..4b75e2d 100644 --- a/components/section_interests.js +++ b/components/section_interests.js @@ -38,6 +38,29 @@ var sectionInterestsComponent = { var item = sections.getDefaultInterestKeywoard(); //console.log("addHighlight(" + index + ")", this.$root.sections.interests[index]); this.$root.sections.interests[index].keywords.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this interest?"); + + if (response == true) + { + this.$root.sections.interests.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.interests, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.interests, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_languages.js b/components/section_languages.js index 12a7c2a..34c19c4 100644 --- a/components/section_languages.js +++ b/components/section_languages.js @@ -31,6 +31,29 @@ var sectionLanguagesComponent = { { var item = sections.getDefaultInterest(); this.$root.sections.languages.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this language?"); + + if (response == true) + { + this.$root.sections.languages.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.languages, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.languages, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_publications.js b/components/section_publications.js index 91298ad..c383971 100644 --- a/components/section_publications.js +++ b/components/section_publications.js @@ -31,6 +31,29 @@ var sectionPublicationsComponent = { { var item = sections.getDefaultWork(); this.$root.sections.publications.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this publication?"); + + if (response == true) + { + this.$root.sections.publications.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.publications, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.publications, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_references.js b/components/section_references.js index 7c55e8e..bcd3a10 100644 --- a/components/section_references.js +++ b/components/section_references.js @@ -31,6 +31,29 @@ var sectionReferencesComponent = { { var item = sections.getDefaultReference(); this.$root.sections.references.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this reference?"); + + if (response == true) + { + this.$root.sections.references.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.references, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.references, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_skills.js b/components/section_skills.js index cd4f6af..fb482ad 100644 --- a/components/section_skills.js +++ b/components/section_skills.js @@ -38,6 +38,29 @@ var sectionSkillsComponent = { var item = sections.getDefaultSkillKeywoard(); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); this.$root.sections.skills[index].keywords.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this skill?"); + + if (response == true) + { + this.$root.sections.skills.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.skills, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.skills, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_volunteer.js b/components/section_volunteer.js index 75c35d1..dc0f384 100644 --- a/components/section_volunteer.js +++ b/components/section_volunteer.js @@ -38,6 +38,29 @@ var sectionVolunteerComponent = { var item = sections.getDefaulVolunteerHighlight(); //console.log("addHighlight(" + index + ")", this.$root.sections.volunteer[index]); this.$root.sections.volunteer[index].highlights.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this position?"); + + if (response == true) + { + this.$root.sections.volunteer.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.volunteer, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.volunteer, index, index + 1); } } }; \ No newline at end of file diff --git a/components/section_work.js b/components/section_work.js index fa5f0c4..bd95af5 100644 --- a/components/section_work.js +++ b/components/section_work.js @@ -37,6 +37,29 @@ var sectionWorkComponent = { { var item = sections.getDefaultWorkHighlight(); this.$root.sections.work[index].highlights.push(item); + }, + + + deleteClicked: function(index) + { + var response = confirm("Are you sure you want to delete this position?"); + + if (response == true) + { + this.$root.sections.work.splice(index, 1); + } + }, + + + moveUpClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.work, index, index - 1); + }, + + + moveDownClicked: function(index) + { + this.$root.moveArrayPosition(this.$root.sections.work, index, index + 1); } } }; \ No newline at end of file diff --git a/index.html b/index.html index 804933d..6f39def 100644 --- a/index.html +++ b/index.html @@ -280,50 +280,54 @@
-
+
-
-

- - - Name of the company or organisation where you worked. -

-

- - - Your role or position title. -

-

- - - Company website. -

-

- - - Date you started in the position. -

-

- - - Date you finished in the position (leave blank if you are still currently in it). -

-

- - - Details of your work, responsibilities and achievements. And a little about the company. -

+ + - -
Highlights
- Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising). - - -
    -
  1. - -
    2. -
+
+

+ + + Name of the company or organisation where you worked. +

+

+ + + Your role or position title. +

+

+ + + Company website. +

+

+ + + Date you started in the position. +

+

+ + + Date you finished in the position (leave blank if you are still currently in it). +

+

+ + + Details of your work, responsibilities and achievements. And a little about the company. +

+ + +
Highlights
+ Briefly describe successes and outcomes (e.g. Increased profits by 20% from 2011-2012 through viral advertising). + + +
    +
  1. + +
    2. +
+
@@ -354,9 +358,11 @@
-
-
-
+
+ + + +

@@ -430,47 +436,51 @@

- -

- - - Name of the institution (e.g. Massachusetts Institute of Technology). -

-

- - - Discipline or area of interest (e.g. Arts). -

-

- - - Type of study (e.g. Bachelor, Masters, PhD). -

-

- - - Date you started -

-

- - - Date completed study. -

-

- - - Grade Point Average (e.g. 3.67/4.0). -

+ + -
Courses
- List notable courses/subjects (e.g. H1302 - Introduction to American history). - - -
    -
  1. - -
    2. -
+
+

+ + + Name of the institution (e.g. Massachusetts Institute of Technology). +

+

+ + + Discipline or area of interest (e.g. Arts). +

+

+ + + Type of study (e.g. Bachelor, Masters, PhD). +

+

+ + + Date you started +

+

+ + + Date completed study. +

+

+ + + Grade Point Average (e.g. 3.67/4.0). +

+ +
Courses
+ List notable courses/subjects (e.g. H1302 - Introduction to American history). + + +
    +
  1. + +
    2. +
+
@@ -499,33 +509,37 @@