WIP - import/export, and changing data model location.
This commit is contained in:
Jason Snelders
parent
924980e752
commit
5a0269e50e
214
app/app.js
214
app/app.js
|
|
@ -41,30 +41,6 @@ var app = new Vue({
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
/**
|
|
||||||
* Detect when a route changes.
|
|
||||||
*
|
|
||||||
* @param object to Details of the previous route (navigating away from).
|
|
||||||
* @param object from Details of the new active route (navigating to).
|
|
||||||
*/
|
|
||||||
$route: function (to, from)
|
|
||||||
{
|
|
||||||
//console.log("Route change: ", from, " --> ", to);
|
|
||||||
|
|
||||||
// Set the "current" main navigation item based on the current route.
|
|
||||||
helpers.selectMenuItemForCurrentUrl();
|
|
||||||
|
|
||||||
// Set the current page details based on the component mapped to the active route.
|
|
||||||
var component = components.getComponentByPath(to.fullPath);
|
|
||||||
this.setActivePageByComponent(component);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
components:
|
components:
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
@ -76,20 +52,90 @@ var app = new Vue({
|
||||||
|
|
||||||
data:
|
data:
|
||||||
{
|
{
|
||||||
// componentId: "",
|
sections: {
|
||||||
// pageTitle: "",
|
basics: {
|
||||||
// fontAwesomeIcon: "",
|
name: "",
|
||||||
|
label: "",
|
||||||
|
picture: "",
|
||||||
|
email: "",
|
||||||
|
phone: "",
|
||||||
|
website: "",
|
||||||
|
summary: "",
|
||||||
|
location: {
|
||||||
|
address: "",
|
||||||
|
postalCode: "",
|
||||||
|
city: "",
|
||||||
|
countryCode: "",
|
||||||
|
region: "",
|
||||||
|
},
|
||||||
|
profiles: [
|
||||||
|
{
|
||||||
|
network: "",
|
||||||
|
username: "",
|
||||||
|
url: "",
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
work: {
|
||||||
|
company: "",
|
||||||
|
position: "",
|
||||||
|
website: "",
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
summary: "",
|
||||||
|
highlights: []
|
||||||
|
},
|
||||||
|
volunteer: {
|
||||||
|
organization: "",
|
||||||
|
position: "",
|
||||||
|
website: "",
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
summary: "",
|
||||||
|
highlights: []
|
||||||
|
},
|
||||||
|
education: {
|
||||||
|
institution: "",
|
||||||
|
area: "",
|
||||||
|
studyType: "",
|
||||||
|
startDate: "",
|
||||||
|
endDate: "",
|
||||||
|
gpa: "",
|
||||||
|
courses: []
|
||||||
|
},
|
||||||
|
awards: [{
|
||||||
|
title: "",
|
||||||
|
date: "",
|
||||||
|
awarder: "",
|
||||||
|
summary: ""
|
||||||
|
}],
|
||||||
|
publications: [{
|
||||||
|
name: "",
|
||||||
|
publisher: "",
|
||||||
|
releaseDate: "",
|
||||||
|
website: "",
|
||||||
|
summary: ""
|
||||||
|
}],
|
||||||
|
skills: [{
|
||||||
|
name: "",
|
||||||
|
level: "",
|
||||||
|
keywords: []
|
||||||
|
}],
|
||||||
|
languages: [{
|
||||||
|
language: "",
|
||||||
|
fluency: ""
|
||||||
|
}],
|
||||||
|
interests: [{
|
||||||
|
name: "",
|
||||||
|
keywords: [
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
references: [{
|
||||||
|
name: "",
|
||||||
|
reference: ""
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
|
||||||
// display: "",
|
|
||||||
// sidebarHeight: "",
|
|
||||||
// username: "",
|
|
||||||
// searchString: "",
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* The complete JSON document
|
|
||||||
*/
|
|
||||||
jsonDocument: "",
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Details of the current page/route.
|
* Details of the current page/route.
|
||||||
|
|
@ -130,6 +176,47 @@ var app = new Vue({
|
||||||
|
|
||||||
mounted()
|
mounted()
|
||||||
{
|
{
|
||||||
|
// var savedData = helpers.getLocalStorage("sections.basics");
|
||||||
|
|
||||||
|
// console.log("savedData=", savedData);
|
||||||
|
|
||||||
|
// if (savedData)
|
||||||
|
// {
|
||||||
|
// // Data previously saved.
|
||||||
|
// //this.sections = savedData;
|
||||||
|
|
||||||
|
// for (var key in savedData)
|
||||||
|
// {
|
||||||
|
// if (savedData.hasOwnProperty(key))
|
||||||
|
// {
|
||||||
|
// console.log(key + " > " + savedData[key]);
|
||||||
|
// this.sections.basics[key] = savedData[key];
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
//var savedData = helpers.getLocalStorage("sections").sections;
|
||||||
|
var savedData = helpers.getLocalStorage("sections");
|
||||||
|
|
||||||
|
console.log("get saved data[sections]=", savedData);
|
||||||
|
|
||||||
|
if (savedData)
|
||||||
|
{
|
||||||
|
// Data previously saved.
|
||||||
|
//this.sections = savedData;
|
||||||
|
|
||||||
|
for (var key in savedData)
|
||||||
|
{
|
||||||
|
if (savedData.hasOwnProperty(key))
|
||||||
|
{
|
||||||
|
console.log(key + " > ", savedData[key]);
|
||||||
|
this.sections[key] = savedData[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// Set the "current" main navigation item based on the current route.
|
// Set the "current" main navigation item based on the current route.
|
||||||
helpers.selectMenuItemForCurrentUrl();
|
helpers.selectMenuItemForCurrentUrl();
|
||||||
|
|
||||||
|
|
@ -178,5 +265,58 @@ var app = new Vue({
|
||||||
// //alert("Hello was clicked" + "\n" + "Who=" + eventValue.whoWasIt + "\n" + "What=" + eventValue.whatWasIt);
|
// //alert("Hello was clicked" + "\n" + "Who=" + eventValue.whoWasIt + "\n" + "What=" + eventValue.whatWasIt);
|
||||||
// console.log("componentActivated(): eventValue.component=", eventValue.component);
|
// console.log("componentActivated(): eventValue.component=", eventValue.component);
|
||||||
// }
|
// }
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// watch: {
|
||||||
|
// /**
|
||||||
|
// * Watch all data for changes
|
||||||
|
// */
|
||||||
|
// 'sections.basics': function(val)
|
||||||
|
// {
|
||||||
|
// // Save the data to localStorage
|
||||||
|
// //NOTE: I'm initially not concerned about performance here/
|
||||||
|
// console.log("watch section", val);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
/**
|
||||||
|
* Detect when a route changes.
|
||||||
|
*
|
||||||
|
* @param object to Details of the previous route (navigating away from).
|
||||||
|
* @param object from Details of the new active route (navigating to).
|
||||||
|
*/
|
||||||
|
$route: function (to, from)
|
||||||
|
{
|
||||||
|
//console.log("Route change: ", from, " --> ", to);
|
||||||
|
|
||||||
|
// Set the "current" main navigation item based on the current route.
|
||||||
|
helpers.selectMenuItemForCurrentUrl();
|
||||||
|
|
||||||
|
// Set the current page details based on the component mapped to the active route.
|
||||||
|
var component = components.getComponentByPath(to.fullPath);
|
||||||
|
this.setActivePageByComponent(component);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
$data: {
|
||||||
|
handler: function(val, oldVal)
|
||||||
|
{
|
||||||
|
console.log("val=", val.sections);
|
||||||
|
// Save the data to localStorage
|
||||||
|
//NOTE: I'm initially not concerned about performance here.
|
||||||
|
helpers.setLocalStorage("sections", val.sections);
|
||||||
|
},
|
||||||
|
deep: true
|
||||||
}
|
}
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
@ -5,7 +5,7 @@ var exportComponent = {
|
||||||
|
|
||||||
mounted: function()
|
mounted: function()
|
||||||
{
|
{
|
||||||
|
this.json = JSON.stringify(this.$root.sections, null, 4);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -20,7 +20,7 @@ var exportComponent = {
|
||||||
data: function()
|
data: function()
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
item: {}
|
json: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ var importComponent = {
|
||||||
data: function()
|
data: function()
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
item: {}
|
json: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,14 +3,14 @@ var sectionBasicsComponent = {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
mounted: function()
|
mounted: function()
|
||||||
{
|
{
|
||||||
var savedData = helpers.getLocalStorage("section.basics");
|
var savedData = helpers.getLocalStorage("section.basics");
|
||||||
|
|
||||||
console.log("basics: mounted", savedData);
|
|
||||||
if (savedData)
|
if (savedData)
|
||||||
{
|
{
|
||||||
console.log("set data");
|
|
||||||
// Data previously saved.
|
// Data previously saved.
|
||||||
this.data = savedData;
|
this.data = savedData;
|
||||||
|
|
||||||
|
|
@ -23,14 +23,12 @@ var sectionBasicsComponent = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//this["name"] = "Doug";
|
|
||||||
|
|
||||||
console.log("this.data=", this);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
destroyed: function()
|
destroyed: function()
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
@ -38,35 +36,39 @@ var sectionBasicsComponent = {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
data: function()
|
data: function()
|
||||||
{
|
{
|
||||||
return {
|
return {
|
||||||
name: "",
|
// name: "",
|
||||||
label: "",
|
// label: "",
|
||||||
picture: "",
|
// picture: "",
|
||||||
email: "",
|
// email: "",
|
||||||
phone: "",
|
// phone: "",
|
||||||
website: "",
|
// website: "",
|
||||||
summary: "",
|
// summary: "",
|
||||||
location: {
|
// location: {
|
||||||
address: "",
|
// address: "",
|
||||||
postalCode: "",
|
// postalCode: "",
|
||||||
city: "",
|
// city: "",
|
||||||
countryCode: "",
|
// countryCode: "",
|
||||||
region: "",
|
// region: "",
|
||||||
},
|
// },
|
||||||
profiles: [
|
// profiles: [
|
||||||
{
|
// {
|
||||||
network: "",
|
// network: "",
|
||||||
username: "",
|
// username: "",
|
||||||
url: "",
|
// url: "",
|
||||||
}
|
// }
|
||||||
]
|
// ]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
/**
|
/**
|
||||||
* Watch all data for changes
|
* Watch all data for changes
|
||||||
|
|
@ -76,14 +78,18 @@ var sectionBasicsComponent = {
|
||||||
{
|
{
|
||||||
// Save the data to localStorage
|
// Save the data to localStorage
|
||||||
//NOTE: I'm initially not concerned about performance here/
|
//NOTE: I'm initially not concerned about performance here/
|
||||||
helpers.setLocalStorage("section.basics", val);
|
//helpers.setLocalStorage("section.basics", val);
|
||||||
|
|
||||||
|
//this.$root.sections.basics = val;
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
methods: {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
70
index.html
70
index.html
|
|
@ -142,37 +142,37 @@
|
||||||
<form class="w3-container w3-card-4">
|
<form class="w3-container w3-card-4">
|
||||||
<p>
|
<p>
|
||||||
<label for="name" class="w3-text-blue required-field"><b>Full Name</b></label>
|
<label for="name" class="w3-text-blue required-field"><b>Full Name</b></label>
|
||||||
<input id="name" class="w3-input w3-border" type="text" v-model="name" required>
|
<input id="name" class="w3-input w3-border" type="text" v-model="$root.sections.basics.name" required>
|
||||||
<small id="nameHelp" class="form-help text-muted">Your full name.</small>
|
<small id="nameHelp" class="form-help text-muted">Your full name.</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="label" class="w3-text-blue required-field"><b>Label</b></label>
|
<label for="label" class="w3-text-blue required-field"><b>Label</b></label>
|
||||||
<input id="label" class="w3-input w3-border" type="text" v-model="label" required>
|
<input id="label" class="w3-input w3-border" type="text" v-model="$root.sections.basics.label" required>
|
||||||
<small id="labelHelp" class="form-help text-muted">Your job or professional title (e.g. software developer, IT manager, graphic designer).</small>
|
<small id="labelHelp" class="form-help text-muted">Your job or professional title (e.g. software developer, IT manager, graphic designer).</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="picture" class="w3-text-blue"><b>Picture</b></label>
|
<label for="picture" class="w3-text-blue"><b>Picture</b></label>
|
||||||
<input id="picture" class="w3-input w3-border" type="text" v-model="picture">
|
<input id="picture" class="w3-input w3-border" type="text" v-model="$root.sections.basics.picture">
|
||||||
<small id="pictureHelp" class="form-help text-muted">URL to your profile photo or avatar.</small>
|
<small id="pictureHelp" class="form-help text-muted">URL to your profile photo or avatar.</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="email" class="w3-text-blue"><b>Email</b></label>
|
<label for="email" class="w3-text-blue"><b>Email</b></label>
|
||||||
<input id="email" class="w3-input w3-border" type="text" v-model="email" required>
|
<input id="email" class="w3-input w3-border" type="text" v-model="$root.sections.basics.email" required>
|
||||||
<small id="emailHelp" class="form-help text-muted">Your contact email address</small>
|
<small id="emailHelp" class="form-help text-muted">Your contact email address</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="phone" class="w3-text-blue"><b>Phone</b></label>
|
<label for="phone" class="w3-text-blue"><b>Phone</b></label>
|
||||||
<input id="phone" class="w3-input w3-border" type="text" v-model="phone">
|
<input id="phone" class="w3-input w3-border" type="text" v-model="$root.sections.basics.phone">
|
||||||
<small id="phoneHelp" class="form-help text-muted">Your contact phone number.</small>
|
<small id="phoneHelp" class="form-help text-muted">Your contact phone number.</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
<label for="website" class="w3-text-blue"><b>Website</b></label>
|
||||||
<input id="website" class="w3-input w3-border" type="text" v-model="website">
|
<input id="website" class="w3-input w3-border" type="text" v-model="$root.sections.basics.website">
|
||||||
<small id="websiteHelp" class="form-help text-muted">Your website.</small>
|
<small id="websiteHelp" class="form-help text-muted">Your website.</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
<label for="summary" class="w3-text-blue"><b>Summary</b></label>
|
||||||
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="summary"></textarea>
|
<textarea id="summary" rows="8" class="w3-input w3-border" type="text" v-model="$root.sections.basics.summary"></textarea>
|
||||||
<small id="summaryHelp" class="form-help text-muted">About you, what your do, who you are, what you are looking for in your career.</small>
|
<small id="summaryHelp" class="form-help text-muted">About you, what your do, who you are, what you are looking for in your career.</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
@ -181,27 +181,27 @@
|
||||||
<small id="locationHelp" class="form-help text-muted">Where are you located?</small>
|
<small id="locationHelp" class="form-help text-muted">Where are you located?</small>
|
||||||
<p>
|
<p>
|
||||||
<label for="location.address" class="w3-text-blue"><b>Address</b></label>
|
<label for="location.address" class="w3-text-blue"><b>Address</b></label>
|
||||||
<input id="location.address" class="w3-input w3-border" type="text" v-model="location.address">
|
<input id="location.address" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.address">
|
||||||
<small id="addressHelp" class="form-help text-muted">(Not recommended) Your street address</small>
|
<small id="addressHelp" class="form-help text-muted">(Not recommended) Your street address</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="location.postalCode" class="w3-text-blue"><b>Postal Code</b></label>
|
<label for="location.postalCode" class="w3-text-blue"><b>Postal Code</b></label>
|
||||||
<input id="location.postalCode" class="w3-input w3-border" type="text" v-model="location.postalCode">
|
<input id="location.postalCode" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.postalCode">
|
||||||
<small id="postalCodeHelp" class="form-help text-muted">Post or Zip cod</small>
|
<small id="postalCodeHelp" class="form-help text-muted">Post or Zip cod</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="location.city" class="w3-text-blue"><b>City</b></label>
|
<label for="location.city" class="w3-text-blue"><b>City</b></label>
|
||||||
<input id="location.city" class="w3-input w3-border" type="text" v-model="location.city">
|
<input id="location.city" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.city">
|
||||||
<small id="cityHelp" class="form-help text-muted">City or town</small>
|
<small id="cityHelp" class="form-help text-muted">City or town</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="location.countryCode" class="w3-text-blue"><b>Country Code</b></label>
|
<label for="location.countryCode" class="w3-text-blue"><b>Country Code</b></label>
|
||||||
<input id="location.countryCode" class="w3-input w3-border" type="text" v-model="location.countryCode">
|
<input id="location.countryCode" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.countryCode">
|
||||||
<small id="countryCodeHelp" class="form-help text-muted">The 2-character country code (https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)</small>
|
<small id="countryCodeHelp" class="form-help text-muted">The 2-character country code (https://en.wikipedia.org/wiki/List_of_ISO_3166_country_codes)</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="location.region" class="w3-text-blue"><b>Region</b></label>
|
<label for="location.region" class="w3-text-blue"><b>Region</b></label>
|
||||||
<input id="location.region" class="w3-input w3-border" type="text" v-model="location.region">
|
<input id="location.region" class="w3-input w3-border" type="text" v-model="$root.sections.basics.location.region">
|
||||||
<small id="regionHelp" class="form-help text-muted">State or region</small>
|
<small id="regionHelp" class="form-help text-muted">State or region</small>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
@ -209,17 +209,17 @@
|
||||||
<h5 class="margin-top-32">Social Network Profiles</h5>
|
<h5 class="margin-top-32">Social Network Profiles</h5>
|
||||||
<p>
|
<p>
|
||||||
<label for="profiles[0].network" class="w3-text-blue"><b>Network</b></label>
|
<label for="profiles[0].network" class="w3-text-blue"><b>Network</b></label>
|
||||||
<input id="profiles[0].network" class="w3-input w3-border" type="text" v-model="profiles[0].network">
|
<input id="profiles[0].network" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].network">
|
||||||
<small id="networkHelp" class="form-help text-muted">Name of the network</small>
|
<small id="networkHelp" class="form-help text-muted">Name of the network</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="profiles[0].username" class="w3-text-blue"><b>Username</b></label>
|
<label for="profiles[0].username" class="w3-text-blue"><b>Username</b></label>
|
||||||
<input id="profiles[0].username" class="w3-input w3-border" type="text" v-model="profiles[0].username">
|
<input id="profiles[0].username" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].username">
|
||||||
<small id="usernameHelp" class="form-help text-muted">Your username in the network</small>
|
<small id="usernameHelp" class="form-help text-muted">Your username in the network</small>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<label for="profiles[0].url" class="w3-text-blue"><b>URL</b></label>
|
<label for="profiles[0].url" class="w3-text-blue"><b>URL</b></label>
|
||||||
<input id="profiles[0].url" class="w3-input w3-border" type="text" v-model="profiles[0].url">
|
<input id="profiles[0].url" class="w3-input w3-border" type="text" v-model="$root.sections.basics.profiles[0].url">
|
||||||
<small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small>
|
<small id="urlHelp" class="form-help text-muted">URL to your profile in the network</small>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
|
|
@ -228,27 +228,27 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="w3-col m5">
|
<div class="w3-col m5">
|
||||||
<preview-field label="Full Name" v-bind:value="name"></preview-field>
|
<preview-field label="Full Name" v-bind:value="$root.sections.basics.name"></preview-field>
|
||||||
<preview-field label="Label" v-bind:value="label"></preview-field>
|
<preview-field label="Label" v-bind:value="$root.sections.basics.label"></preview-field>
|
||||||
<preview-field label="Picture" v-bind:value="picture" format="url"></preview-field>
|
<preview-field label="Picture" v-bind:value="$root.sections.basics.picture" format="url"></preview-field>
|
||||||
|
|
||||||
<preview-field label="Email" v-bind:value="email"></preview-field>
|
<preview-field label="Email" v-bind:value="$root.sections.basics.email"></preview-field>
|
||||||
<preview-field label="Phone" v-bind:value="phone"></preview-field>
|
<preview-field label="Phone" v-bind:value="$root.sections.basics.phone"></preview-field>
|
||||||
<preview-field label="Website" v-bind:value="website"></preview-field>
|
<preview-field label="Website" v-bind:value="$root.sections.basics.website"></preview-field>
|
||||||
|
|
||||||
<preview-field label="Summary" v-bind:value="summary" format="multi-line"></preview-field>
|
<preview-field label="Summary" v-bind:value="$root.sections.basics.summary" format="multi-line"></preview-field>
|
||||||
|
|
||||||
<h5 class="margin-top-32">Location</h5>
|
<h5 class="margin-top-32">Location</h5>
|
||||||
<preview-field label="Address" v-bind:value="location.address"></preview-field>
|
<preview-field label="Address" v-bind:value="$root.sections.basics.location.address"></preview-field>
|
||||||
<preview-field label="Postal/Zip Code" v-bind:value="location.postalCode"></preview-field>
|
<preview-field label="Postal/Zip Code" v-bind:value="$root.sections.basics.location.postalCode"></preview-field>
|
||||||
<preview-field label="City" v-bind:value="location.city"></preview-field>
|
<preview-field label="City" v-bind:value="$root.sections.basics.location.city"></preview-field>
|
||||||
<preview-field label="Country Code" v-bind:value="location.countryCode"></preview-field>
|
<preview-field label="Country Code" v-bind:value="$root.sections.basics.location.countryCode"></preview-field>
|
||||||
<preview-field label="Region" v-bind:value="location.region"></preview-field>
|
<preview-field label="Region" v-bind:value="$root.sections.basics.location.region"></preview-field>
|
||||||
|
|
||||||
<h5 class="margin-top-32">Social Network Profiles</h5>
|
<h5 class="margin-top-32">Social Network Profiles</h5>
|
||||||
<preview-field label="Network" v-bind:value="profiles[0].network"></preview-field>
|
<preview-field label="Network" v-bind:value="$root.sections.basics.profiles[0].network"></preview-field>
|
||||||
<preview-field label="Username" v-bind:value="profiles[0].username"></preview-field>
|
<preview-field label="Username" v-bind:value="$root.sections.basics.profiles[0].username"></preview-field>
|
||||||
<preview-field label="URL" v-bind:value="profiles[0].url"></preview-field>
|
<preview-field label="URL" v-bind:value="$root.sections.basics.profiles[0].url"></preview-field>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -479,7 +479,10 @@
|
||||||
|
|
||||||
<template type="text/x-template" id="import-template" lang="html">
|
<template type="text/x-template" id="import-template" lang="html">
|
||||||
<div id="import-root">
|
<div id="import-root">
|
||||||
Import
|
<p>
|
||||||
|
Past existing resume JSON to continue editing.
|
||||||
|
</p>
|
||||||
|
<textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -490,10 +493,7 @@
|
||||||
<p>
|
<p>
|
||||||
Copy the following text in a text file and save it with the exctension ".json" (.e.g resume.json).
|
Copy the following text in a text file and save it with the exctension ".json" (.e.g resume.json).
|
||||||
</p>
|
</p>
|
||||||
<div>
|
<textarea rows="20" class="w3-input w3-border" type="text" v-model="json"></textarea>
|
||||||
{{$parent.jsonDocument}}
|
|
||||||
</div>
|
|
||||||
<textarea rows="20" class="w3-input w3-border" type="text"></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue