feat: delete page

client/components/admin.vue

@@ -203,7 +203,7 @@ export default {
 <style lang='scss'>
 
 .admin {
-  &.theme--light {
+  &.theme--light .application--wrap {
     background-color: lighten(mc('grey', '200'), 2%);
   }
 }

client/components/admin/admin-groups-edit-permissions.vue

@@ -79,6 +79,20 @@ export default {
               restrictedForSystem: false,
               disabled: false
             },
+            {
+              permission: 'read:source',
+              hint: 'Can view pages source, as specified in the Page Rules',
+              warning: false,
+              restrictedForSystem: false,
+              disabled: false
+            },
+            {
+              permission: 'read:history',
+              hint: 'Can view pages history, as specified in the Page Rules',
+              warning: false,
+              restrictedForSystem: false,
+              disabled: false
+            },
             {
               permission: 'read:assets',
               hint: 'Can view / use assets (such as images and files), as specified in the Page Rules',

client/components/admin/admin-groups-edit-rules.vue

@@ -206,6 +206,8 @@ export default {
         { text: 'Create Pages', value: 'write:pages', icon: 'insert_drive_file' },
         { text: 'Edit + Move Pages', value: 'manage:pages', icon: 'insert_drive_file' },
         { text: 'Delete Pages', value: 'delete:pages', icon: 'insert_drive_file' },
+        { text: 'View Pages Source', value: 'read:source', icon: 'code' },
+        { text: 'View Pages History', value: 'read:history', icon: 'restore' },
         { text: 'Read / Use Assets', value: 'read:assets', icon: 'camera' },
         { text: 'Upload Assets', value: 'write:assets', icon: 'camera' },
         { text: 'Edit + Delete Assets', value: 'manage:assets', icon: 'camera' },

client/components/common/nav-header.vue

@@ -131,6 +131,7 @@
             span Login
 
     page-selector(mode='create', v-model='newPageModal', :open-handler='pageNewCreate')
+    page-delete(v-model='deletePageModal', v-if='path && path.length')
 </template>
 
 <script>
@@ -139,6 +140,9 @@ import _ from 'lodash'
 import Cookies from 'js-cookie'
 
 export default {
+  components: {
+    PageDelete: () => import('./page-delete.vue')
+  },
   props: {
     dense: {
       type: Boolean,
@@ -155,7 +159,8 @@ export default {
       searchIsLoading: false,
       searchIsShown: true,
       search: '',
-      newPageModal: false
+      newPageModal: false,
+      deletePageModal: false
     }
   },
   computed: {
@@ -233,11 +238,7 @@ export default {
       })
     },
     pageDelete () {
-      this.$store.commit('showNotification', {
-        style: 'indigo',
-        message: `Coming soon...`,
-        icon: 'directions_boat'
-      })
+      this.deletePageModal = true
     },
     assets () {
       this.$store.commit('showNotification', {

client/components/common/page-delete.vue

@@ -0,0 +1,110 @@
+<template lang='pug'>
+  v-dialog(v-model='isShown', max-width='550', persistent)
+    v-card.wiki-form
+      .dialog-header.is-short.is-red
+        v-icon.mr-2(color='white') highlight_off
+        span Delete Page
+      v-card-text
+        .body-2 Are you sure you want to delete page #[span.red--text.text--darken-2 {{pageTitle}}]?
+        .caption The page can be restored from the administration area.
+        v-chip.mt-3.ml-0.mr-1(label, color='red lighten-4', disabled, small)
+          .caption.red--text.text--darken-2 {{pageLocale.toUpperCase()}}
+        v-chip.mt-3.mx-0(label, color='red lighten-5', disabled, small)
+          span.red--text.text--darken-2 /{{pagePath}}
+      v-card-chin
+        v-spacer
+        v-btn(flat, @click='discard', :disabled='loading') Cancel
+        v-btn(color='red darken-2', @click='deletePage', :loading='loading').white--text Delete
+</template>
+
+<script>
+import _ from 'lodash'
+import { get } from 'vuex-pathify'
+
+import deletePageMutation from 'gql/common/common-pages-mutation-delete.gql'
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  computed: {
+    isShown: {
+      get() { return this.value },
+      set(val) { this.$emit('input', val) }
+    },
+    pageTitle: get('page/title'),
+    pagePath: get('page/path'),
+    pageLocale: get('page/locale'),
+    pageId: get('page/id')
+  },
+  watch: {
+    isShown(newValue, oldValue) {
+      if (newValue) {
+        document.body.classList.add('page-deleted-pending')
+      }
+    }
+  },
+  methods: {
+    discard() {
+      document.body.classList.remove('page-deleted-pending')
+      this.isShown = false
+    },
+    async deletePage() {
+      this.loading = true
+      this.$store.commit(`loadingStart`, 'page-delete')
+      this.$nextTick(async () => {
+        try {
+          const resp = await this.$apollo.mutate({
+            mutation: deletePageMutation,
+            variables: {
+              id: this.pageId
+            }
+          })
+          if (_.get(resp, 'data.pages.delete.responseResult.succeeded', false)) {
+            this.isShown = false
+            _.delay(() => {
+              document.body.classList.add('page-deleted')
+              _.delay(() => {
+                window.location.assign('/')
+              }, 1200)
+            }, 400)
+          } else {
+            throw new Error(_.get(resp, 'data.pages.delete.responseResult.message', 'An unexpected error occured.'))
+          }
+        } catch (err) {
+          this.$store.commit('pushGraphError', err)
+        }
+        this.$store.commit(`loadingStop`, 'page-delete')
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+  body.page-deleted-pending {
+    .application {
+      background-color: mc('grey', '900');
+    }
+    .application--wrap {
+      transform: translateZ(-5vw) rotateX(2deg);
+      border-radius: 7px;
+      overflow: hidden;
+    }
+  }
+  body.page-deleted {
+    .application--wrap {
+      transform: translateZ(-1000vw) rotateX(60deg);
+      opacity: 0;
+    }
+  }
+</style>

client/components/editor.vue

@@ -14,7 +14,7 @@
           outline
           color='blue'
           @click.native.stop='openPropsModal'
-          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": !welcomeMode, "ml-0": !welcomeMode }'
+          :class='{ "is-icon": $vuetify.breakpoint.mdAndDown, "mx-0": !welcomeMode, "ml-0": welcomeMode }'
           )
           v-icon(color='blue', :left='$vuetify.breakpoint.lgAndUp') sort_by_alpha
           span.white--text(v-if='$vuetify.breakpoint.lgAndUp') {{ $t('editor:page') }}
@@ -282,6 +282,10 @@ export default {
   .editor {
     background-color: mc('grey', '900') !important;
     min-height: 100vh;
+
+    .application--wrap {
+      background-color: mc('grey', '900');
+    }
   }
 
   .atom-spinner.is-inline {