feat: unsaved changes prompt + beta preparations UI

client/components/editor/editor-modal-editorselect.vue

@@ -0,0 +1,103 @@
+<template lang='pug'>
+  v-dialog(v-model='isShown', persistent, max-width='700')
+    v-card.radius-7(color='blue darken-3', dark)
+      v-card-text.text-xs-center.py-4
+        .subheading Which editor do you want to use for this page?
+        v-container(grid-list-lg, fluid)
+          v-layout(row, wrap, justify-center)
+            v-flex(xs4)
+              v-card.radius-7.grey(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("api")')
+                  img(src='/svg/icon-rest-api.svg', alt='API', style='width: 36px;')
+                  .body-2.mt-2.grey--text.text--darken-2 API Docs
+                  .caption.grey--text.text--darken-1 REST / GraphQL
+            v-flex(xs4)
+              v-card.radius-7(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("code")')
+                  img(src='/svg/icon-source-code.svg', alt='Code', style='width: 36px;')
+                  .body-2.mt-2 Code
+                  .caption.grey--text Raw HTML
+            v-flex(xs4)
+              v-card.radius-7(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("markdown")')
+                  img(src='/svg/icon-markdown.svg', alt='Markdown', style='width: 36px;')
+                  .body-2.mt-2 Markdown
+                  .caption.grey--text Default
+            v-flex(xs4)
+              v-card.radius-7.grey(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("tabular")')
+                  img(src='/svg/icon-table.svg', alt='Tabular', style='width: 36px;')
+                  .body-2.grey--text.mt-2.text--darken-2 Tabular
+                  .caption.grey--text.text--darken-1 Excel-like
+            v-flex(xs4)
+              v-card.radius-7.grey(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("wysiwyg")')
+                  img(src='/svg/icon-open-in-browser.svg', alt='Visual Builder', style='width: 36px;')
+                  .body-2.mt-2.grey--text.text--darken-2 Visual Builder
+                  .caption.grey--text.text--darken-1 Drag-n-drop
+            v-flex(xs4)
+              v-card.radius-7.grey(
+                hover
+                light
+                ripple
+                )
+                v-card-text.text-xs-center(@click='selectEditor("wikitext")')
+                  img(src='/svg/icon-news.svg', alt='WikiText', style='width: 36px;')
+                  .body-2.grey--text.mt-2.text--darken-2 WikiText
+                  .caption.grey--text.text--darken-1 MediaWiki Format
+        .caption.blue--text.text--lighten-2 This cannot be changed once the page is created.
+</template>
+
+<script>
+import _ from 'lodash'
+import { sync } from 'vuex-pathify'
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return { }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    currentEditor: sync('editor/editor'),
+  },
+  methods: {
+    selectEditor(name) {
+      this.currentEditor = `editor${_.startCase(name)}`
+      this.isShown = false
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+
+</style>

client/components/editor/editor-modal-unsaved.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  v-dialog(v-model='isShown', max-width='550')
+    v-card.wiki-form
+      .dialog-header.is-short.is-red
+        v-icon.mr-2(color='white') warning
+        span Discard Unsaved Changes?
+      v-card-text
+        .body-2 You have unsaved changes. Are you sure you want to leave the editor and discard any modifications you made since the last save?
+      v-card-chin
+        v-spacer
+        v-btn(flat, @click='isShown = false') Cancel
+        v-btn(color='red', @click='discard', dark) Discard Changes
+</template>
+
+<script>
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return { }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    }
+  },
+  methods: {
+    async discard() {
+      this.isShown = false
+      this.$emit('discard', true)
+    }
+  }
+}
+</script>