Skip to content

Instantly share code, notes, and snippets.

@joemsak

joemsak/1-main.js

Created Jan 14, 2018
Embed
What would you like to do?
import Vue from 'vue'
import App from './App.vue'
import Storage from './utils/Storage';
import moment from 'moment';
var halfDay = moment().date(15),
lastDay = moment().endOf("month"),
payDayStoragePrefix = moment().get('year') + "." +
moment().format("MM");
while (halfDay.day() > 5) {
halfDay.subtract(1, "days");
}
while (lastDay.day() > 5) {
lastDay.subtract(1, "days");
}
export const Settings = new Vue({
data: {
payDay1: Storage.get(
payDayStoragePrefix + ".payDay1",
{
parser: "DATE",
default: halfDay,
}
),
payDay2: Storage.get(
payDayStoragePrefix + ".payDay2",
{
parser: "DATE",
default: lastDay,
}
),
income: Storage.get("income", { parser: "FLOAT", default: 0 }),
},
watch: {
payDay1 (v) {
Storage.set(payDayStoragePrefix + ".payDay1", v);
},
payDay2 (v) {
Storage.set(payDayStoragePrefix + ".payDay2", v);
},
income (v) {
Storage.set("income", v);
},
},
methods: {
isValid () {
return this.payDay1 != undefined &&
this.payDay2 != undefined &&
![undefined, 0, null, "0.00", NaN]
.includes(this.income);
},
},
});
new Vue({
el: '#app',
render: h => h(App)
})
<template>
<db-settings-form
v-if="welcomeStep == 'incomeSettings'"
/>
<db-bill-entry
v-else-if="welcomeStep == 'billEntry1'"
title="Bills during 1st pay period"
pay-period="1"
prev-section="Income settings"
next-section="Bills during 2nd pay period"
:sub-title="billEntry1SubTitle"
:initialBills="payDayBills"
@stepBack="welcomeStep = 'incomeSettings'"
@stepFwd="welcomeStep = 'billEntry2'"
/>
<db-bill-entry
v-else-if="welcomeStep == 'billEntry2'"
title="Bills during 2nd pay period"
pay-period="2"
prev-section="Bills during 1st pay period"
next-section="My dashboard"
:sub-title="billEntry2SubTitle"
:initialBills="payDayBills"
@stepBack="welcomeStep = 'billEntry1'"
@stepFwd="welcomeStep = 'done'"
/>
<div v-else>
Dashboard...
</div>
</template>
<script>
import { Settings } from './main';
import Storage from './utils/Storage';
import dbSettingsForm from './SettingsForm';
import dbBillEntry from './BillEntry';
export default {
data() {
return {
welcomeStep: Storage.get(
"welcomeStep",
{ default: "incomeSettings" }
),
payDayBills: Storage.get(
"payDayBills",
{
parser: "JSON",
default: [],
}
),
};
},
components: {
dbSettingsForm,
dbBillEntry,
},
computed: {
billEntry1SubTitle () {
debugger; // Here is where it says Settings is not defined
var start = Settings.payDay1.format("dddd, MMM Do"),
ending = Settings.payDay2.subtract(1, "days")
.format("dddd, MMM Do");
return start + "" + ending;
},
billEntry2SubTitle () {
var start = Settings.payDay2.format("dddd, MMM Do"),
ending = Settings.payDay2.endOf("month")
.subtract(1, "days")
.format("dddd, MMM Do");
return start + "" + ending;
},
},
watch: {
welcomeStep (v) {
console.log("Welcome step", v);
Storage.set("welcomeStep", v);
},
payDayBills: {
deep: true,
handler (current) {
Storage.set("payDayBills", current, { formatter: "JSON" });
},
},
},
};
</script>
<style lang="scss" scoped>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment