From e70f88e188f34d867a9818f50089c9fd216bf3a0 Mon Sep 17 00:00:00 2001
From: "Daniel J. Summers" <daniel.summers.2415@gmail.com>
Date: Tue, 20 Aug 2019 16:59:30 -0500
Subject: [PATCH] A little more progress with Vue Material

---
 src/app/package.json                          |  2 +-
 src/app/src/App.vue                           |  2 ++
 src/app/src/components/Journal.vue            |  2 +-
 .../components/common/MaterialDesignIcon.vue  | 15 --------
 src/app/src/components/common/Navigation.vue  |  2 +-
 .../src/components/request/EditRequest.vue    |  4 +--
 src/app/src/components/request/NotesEdit.vue  |  6 ++--
 .../src/components/request/RequestCard.vue    |  8 ++---
 .../components/request/RequestListItem.vue    |  8 ++---
 .../src/components/request/SnoozeRequest.vue  |  4 +--
 src/app/src/main.js                           | 35 ++++++++-----------
 11 files changed, 34 insertions(+), 54 deletions(-)
 delete mode 100644 src/app/src/components/common/MaterialDesignIcon.vue

diff --git a/src/app/package.json b/src/app/package.json
index 5e5210f..cbb914b 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -5,7 +5,7 @@
   "author": "Daniel J. Summers <daniel@bitbadger.solutions>",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --port 8081",
     "build": "vue-cli-service build --modern",
     "lint": "vue-cli-service lint",
     "apistart": "cd ../MyPrayerJournal.Api && dotnet run",
diff --git a/src/app/src/App.vue b/src/app/src/App.vue
index 256030c..ea2dfac 100644
--- a/src/app/src/App.vue
+++ b/src/app/src/App.vue
@@ -3,6 +3,8 @@ md-app(md-waterfall md-mode='fixed-last' role='application')
   p navigation here
   navigation
   p navigation there
+  md-app-drawer(:md-active.sync='menuVisible')
+    | test
   md-app-content
     router-view
     vue-progress-bar
diff --git a/src/app/src/components/Journal.vue b/src/app/src/components/Journal.vue
index f891dac..5156b63 100644
--- a/src/app/src/components/Journal.vue
+++ b/src/app/src/components/Journal.vue
@@ -6,7 +6,7 @@ article.mpj-main-content-wide(role='main')
     .mpj-text-center
       router-link(:to="{ name: 'EditRequest', params: { id: 'new' } }"
                   role='button').
-        #[md-icon(icon='add_box')] Add a New Request
+        #[md-icon add_box] Add a New Request
     br
     .mpj-journal(v-if='journal.length > 0')
       request-card(v-for='request in journal'
diff --git a/src/app/src/components/common/MaterialDesignIcon.vue b/src/app/src/components/common/MaterialDesignIcon.vue
deleted file mode 100644
index e4ebce0..0000000
--- a/src/app/src/components/common/MaterialDesignIcon.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template lang="pug">
-i.material-icons(v-html='icon')
-</template>
-
-<script>
-export default {
-  name: 'md-icon',
-  props: {
-    icon: {
-      type: String,
-      required: true
-    }
-  }
-}
-</script>
diff --git a/src/app/src/components/common/Navigation.vue b/src/app/src/components/common/Navigation.vue
index 5e4afbe..7c98818 100644
--- a/src/app/src/components/common/Navigation.vue
+++ b/src/app/src/components/common/Navigation.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-md-app-toolbar.md-large.md-dense.md-primary
+md-toolbar.md-large.md-dense.md-primary
   .md-toolbar-row
     .md-toolbar-section-start
       | howdy
diff --git a/src/app/src/components/request/EditRequest.vue b/src/app/src/components/request/EditRequest.vue
index 4f31cbe..74266d3 100644
--- a/src/app/src/components/request/EditRequest.vue
+++ b/src/app/src/components/request/EditRequest.vue
@@ -62,10 +62,10 @@ article.mpj-main-content(role='main')
     .mpj-text-right
       button(:disabled='!isValidRecurrence'
              @click.stop='saveRequest()').primary.
-        #[md-icon(icon='save')] Save
+        #[md-icon save] Save
       | &nbsp; &nbsp;
       button(@click.stop='goBack()').
-        #[md-icon(icon='arrow_back')] Cancel
+        #[md-icon arrow_back] Cancel
 </template>
 
 <script>
diff --git a/src/app/src/components/request/NotesEdit.vue b/src/app/src/components/request/NotesEdit.vue
index 85c28e1..13dd147 100644
--- a/src/app/src/components/request/NotesEdit.vue
+++ b/src/app/src/components/request/NotesEdit.vue
@@ -11,10 +11,10 @@
                @blur='trimText()').mpj-full-width
     .mpj-text-right
       button(@click='saveNotes()').primary.
-        #[md-icon(icon='save')] Save
+        #[md-icon save] Save
       | &nbsp; &nbsp;
       button(@click='closeDialog()').
-        #[md-icon(icon='undo')] Cancel
+        #[md-icon undo] Cancel
     hr
     div(v-if='hasPriorNotes')
       p.mpj-text-center: strong Prior Notes for This Request
@@ -27,7 +27,7 @@
     div(v-else-if='noPriorNotes').mpj-text-center.mpj-muted-text There are no prior notes for this request
     div(v-else).mpj-text-center
       button(@click='loadNotes()').
-        #[md-icon(icon='cloud_download')] Load Prior Notes
+        #[md-icon cloud_download] Load Prior Notes
 </template>
 
 <script>
diff --git a/src/app/src/components/request/RequestCard.vue b/src/app/src/components/request/RequestCard.vue
index e287784..e9927de 100644
--- a/src/app/src/components/request/RequestCard.vue
+++ b/src/app/src/components/request/RequestCard.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
 .mpj-request-card(v-if='shouldDisplay')
   header.mpj-card-header(role='toolbar').
-    #[button(@click='markPrayed()' title='Pray').primary: md-icon(icon='done')]
-    #[button(@click.stop='showEdit()' title='Edit'): md-icon(icon='edit')]
-    #[button(@click.stop='showNotes()' title='Add Notes'): md-icon(icon='comment')]
-    #[button(@click.stop='snooze()' title='Snooze Request'): md-icon(icon='schedule')]
+    #[button(@click='markPrayed()' title='Pray').primary: md-icon done]
+    #[button(@click.stop='showEdit()' title='Edit'): md-icon edit]
+    #[button(@click.stop='showNotes()' title='Add Notes'): md-icon comment]
+    #[button(@click.stop='snooze()' title='Snooze Request'): md-icon schedule]
   div
     p.card-text.mpj-request-text
       | {{ request.text }}
diff --git a/src/app/src/components/request/RequestListItem.vue b/src/app/src/components/request/RequestListItem.vue
index b855ebe..8e7b36d 100644
--- a/src/app/src/components/request/RequestListItem.vue
+++ b/src/app/src/components/request/RequestListItem.vue
@@ -5,20 +5,20 @@ p.mpj-request-text
   br
   button(@click='viewFull'
          title='View Full Request').
-    #[md-icon(icon='description')] View Full Request
+    #[md-icon description] View Full Request
   | &nbsp; &nbsp;
   template(v-if='!isAnswered')
     button(@click='editRequest'
            title='Edit Request').
-      #[md-icon(icon='edit')] Edit Request
+      #[md-icon edit] Edit Request
     | &nbsp; &nbsp;
   template(v-if='isSnoozed')
     button(@click='cancelSnooze()').
-      #[md-icon(icon='restore')] Cancel Snooze
+      #[md-icon restore] Cancel Snooze
     | &nbsp; &nbsp;
   template(v-if='isPending')
     button(@click='showNow()').
-      #[md-icon(icon='restore')] Show Now
+      #[md-icon restore] Show Now
   br(v-if='isSnoozed || isPending || isAnswered')
   small(v-if='isSnoozed').mpj-muted-text: em.
     &nbsp; Snooze expires #[date-from-now(:value='request.snoozedUntil')]
diff --git a/src/app/src/components/request/SnoozeRequest.vue b/src/app/src/components/request/SnoozeRequest.vue
index 0fb1cb1..e6e3d93 100644
--- a/src/app/src/components/request/SnoozeRequest.vue
+++ b/src/app/src/components/request/SnoozeRequest.vue
@@ -13,10 +13,10 @@
     .mpj-text-right
       button.primary(:disabled='!isValid'
                      @click='snoozeRequest()').
-        #[md-icon(icon='snooze')] Snooze
+        #[md-icon snooze] Snooze
       | &nbsp; &nbsp;
       button(@click='closeDialog()').
-        #[md-icon(icon='undo')] Cancel
+        #[md-icon undo] Cancel
 </template>
 
 <script>
diff --git a/src/app/src/main.js b/src/app/src/main.js
index eedc64b..a2eace8 100644
--- a/src/app/src/main.js
+++ b/src/app/src/main.js
@@ -1,21 +1,21 @@
-import Vue from 'vue'
-// eslint-disable-next-line
-// import { MdApp, MdContent, MdProgress, MdSnackbar, MdTabs, MdToolbar } from 'vue-material/dist/components'
-import { VueMaterial } from 'vue-material/dist/components'
+// Vue packages and components
+import Vue            from 'vue'
+import VueMaterial    from 'vue-material'
 import VueProgressBar from 'vue-progressbar'
-import VueToast from 'vue-toast'
+import VueToast       from 'vue-toast'
 
+// myPrayerJournal components
+import App         from './App'
+import router      from './router'
+import store       from './store'
+import DateFromNow from './components/common/DateFromNow'
+import PageTitle   from './components/common/PageTitle'
+
+// Styles
 import 'vue-material/dist/vue-material.min.css'
 import 'vue-material/dist/theme/default.css'
 import 'vue-toast/dist/vue-toast.min.css'
 
-import App from './App'
-import router from './router'
-import store from './store'
-import DateFromNow from './components/common/DateFromNow'
-import MaterialDesignIcon from './components/common/MaterialDesignIcon'
-import PageTitle from './components/common/PageTitle'
-
 Vue.config.productionTip = false
 
 Vue.use(VueProgressBar, {
@@ -29,17 +29,10 @@ Vue.use(VueProgressBar, {
   }
 })
 
-// Vue.use(MdApp)
-// Vue.use(MdContent)
-// Vue.use(MdProgress)
-// Vue.use(MdSnackbar)
-// Vue.use(MdTabs)
-// Vue.use(MdToolbar)
 Vue.use(VueMaterial)
 Vue.component('date-from-now', DateFromNow)
-Vue.component('md-icon', MaterialDesignIcon)
-Vue.component('page-title', PageTitle)
-Vue.component('toast', VueToast)
+Vue.component('page-title',    PageTitle)
+Vue.component('toast',         VueToast)
 
 new Vue({
   router,