More consistent use of getters in UserInputPage

md-parser/package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-markdown": "^2.2.4",
+    "vue-material": "^1.0.0-beta-15",
     "vue-resource": "^1.5.1",
     "vue-router": "^3.3.4",
     "vuex": "^3.5.1"

md-parser/src/App.vue

@@ -15,10 +15,13 @@
       <router-view id='sub-content'></router-view>
     </transition>
   </div>
-</template>s
+</template>
 
 <script>
 
+import 'vue-material/dist/vue-material.min.css'
+import 'vue-material/dist/theme/default.css'
+
 export default {
   name: 'App',
   components: {
@@ -61,15 +64,30 @@ export default {
 
 #top-band {
   width:100%;
-  height:40px;
+  height:10px;
-  background : linear-gradient(#e6e6ff, #ffffff);
+  background-color: yellow;
 }
 
 .fade-enter-active, .fade-leave-active {
   transition: opacity .5s;
 }
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+{
   opacity: 0;
 }
 
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-link {
+  display: inline-block;
+  width: 30em;
+  vertical-align: top;
+  max-width: 300px;
+  text-align: center;
+}
+
 </style>

md-parser/src/components/ArticleForm.vue

@@ -7,16 +7,16 @@
       <div class='form-group'>
         <label for='date-published'>Publication date</label>
         <input v-model='date_created' type='date' name='date-published' id='date-published' class='form-control form-control-sm'>
-        <input type='button' class='btn btn-default today-button' @click.prevent="setToday(1)" value='today'><br>
+        <input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-published')" value='today'><br>
       </div>
 
       <div class='form-group'>
         <label for='date-modified'>Modification date</label>
         <input v-model='date_modified' type='date' name='date-modified' id='date-modified' class='form-control form-control-sm'>
-        <input type='button' class='btn btn-default today-button' @click.prevent="setToday(2)" value='today'><br>
+        <input type='button' class='btn btn-default today-button' @click.prevent="setToday('date-modified')" value='today'><br>
       </div>
       <div class='form-group'>
-        <label for='meta-title'>meta title</label>
+        <label for='meta-title'>Title</label>
         <input v-model='title' type='text' name='meta-title' id='meta-title' placeholder="What's up ?" class='form-control form-control-lg'>
       </div>
     </form>
@@ -47,6 +47,14 @@ export default {
         "date_modified": this.date_modified,
         "title": this.title
       }
+    },
+    // Input-ready current day.
+    // Based on https://gomakethings.com/setting-a-date-input-to-todays-date-with-vanilla-js/.
+    today (){
+      let obj = new Date()
+      return obj.getFullYear().toString() + "-"
+        + (obj.getMonth() +1).toString().padStart(2,0) + "-"
+        + obj.getDate().toString().padStart(2,0)
     }
   },
   watch: {
@@ -64,14 +72,11 @@ export default {
     },
   },
   methods : {
-    // WIP : sets meta date to today.
-    // params: date= 1 => set date_created
-    //         date = 2 => set date_modified
-    setToday : function(date) {
-      this.$store.commit('today', date)
-    },
     sendMeta: function(){
       this.$store.commit('updateMeta', this.meta)
+    },
+    setToday(id){
+      document.getElementById(id).value = this.today
     }
   }
 

md-parser/src/components/UserInput.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <textarea v-model='userInput' placeholder="edit me" id='textbox'></textarea>
+        <textarea v-model="userInput" placeholder="edit me" id='textbox' value='this.articleText'></textarea>
     </div>
 </template>
 
@@ -11,19 +11,26 @@ export default {
   },
   data: function(){
     return {
-      userInput: this.articleText
+      userInput: ""
-    }
-  },
-  computed :{
-    articleText () {
-      return this.$store.state.article.content
     }
   },
+  // computed :{
+  //   articleText () {
+  //     let var_content = this.$store.getters.getContent
+  //     console.log('getting article text in user input' + var_content)
+  //     return this.$store.getters.getContent()
+  //   }
+  // },
   watch: {
     // commits a mutation to the store at each change of the text to update global state
-    userInput: function(){
+    userInput : function(){
-        this.$store.commit('updateText', this.userInput)
+      this.$emit('articleUpdate')
+      this.$store.commit('updateText', this.userInput)
     }
+  },
+  mounted: function(){
+    this.userInput = this.$store.getters.getContent
+    console.log("Mounted ! " + this.$store.getters.getContent)
   }
 }
 </script>

md-parser/src/components/UserInputPage.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <article-form></article-form>
-        <UserInput class="input-area column"></UserInput>
+        <UserInput class="input-area column" @articleUpdate="articleUpate"></UserInput>
-        <vue-markdown :source='articleText' class="column" id='render-area'></vue-markdown>
+        <vue-markdown :source='userText' class="column" id='render-area'></vue-markdown>
         <publish-button @update='articleUpate'></publish-button>
     </div>
 </template>
@@ -25,19 +25,21 @@ export default {
   },
   data: function() {
     return{
-      usertext: '',
+      userText: '',
-    }
-  },
-  computed: {
-    articleText() {
-      return this.$store.state.article.content
     }
   },
   methods: {
     // saves article content
     articleUpate : function() {
-      this.$router.push('/published')
+      console.log('updating in UserInputPage')
+      this.userText = this.$store.getters.getContent
     },
+    articlePublish: function(){
+      this.$router.push('/published')
+    }
+  },
+  mounted: function(){
+    this.userText = this.$store.getters.getContent
   }
 }
 </script>

md-parser/src/main.js

@@ -10,12 +10,15 @@ import VueResource from 'vue-resource'
 import { store } from './store/store'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
+import VueMaterial from 'vue-material'
 
 Vue.use(VueRouter)
 Vue.use(BootstrapVue)
 Vue.use(VueResource)
 Vue.use(Vuex)
 
+Vue.use(VueMaterial)
+
 Vue.config.productionTip = false
 
 const routes = [

md-parser/src/store/store.js

@@ -16,7 +16,7 @@ export const store = new Vuex.Store({
     }
   },
   getters: {
-    getContent (state) {
+    getContent(state) {
       return state.article.content
     }
   },