feat: profile - pages

client/components/profile/pages.vue

@@ -1,5 +1,5 @@
 <template lang='pug'>
-  v-container(fluid, fill-height, grid-list-lg)
+  v-container(fluid, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
         .profile-header
@@ -7,13 +7,111 @@
           .profile-header-title
             .headline.primary--text.animated.fadeInLeft {{$t('profile:pages.title')}}
             .subheading.grey--text.animated.fadeInLeft {{$t('profile:pages.subtitle')}}
+          v-spacer
+          v-btn.animated.fadeInDown.wait-p1s(color='grey', outlined, @click='refresh', large)
+            v-icon.grey--text mdi-refresh
+      v-flex(xs12)
+        v-card.animated.fadeInUp
+          v-data-table(
+            :items='pages'
+            :headers='headers'
+            :page.sync='pagination'
+            :items-per-page='15'
+            :loading='loading'
+            must-sort,
+            sort-by='updatedAt',
+            sort-desc,
+            hide-default-footer
+          )
+            template(slot='item', slot-scope='props')
+              tr.is-clickable(:active='props.selected', @click='goToPage(props.item.id)')
+                td
+                  .body-2: strong {{ props.item.title }}
+                  .caption {{ props.item.description }}
+                td.admin-pages-path
+                  v-chip(label, small, :color='$vuetify.theme.dark ? `grey darken-4` : `grey lighten-4`') {{ props.item.locale }}
+                  span.ml-2.grey--text(:class='$vuetify.theme.dark ? `text--lighten-1` : `text--darken-2`') / {{ props.item.path }}
+                td {{ props.item.createdAt | moment('calendar') }}
+                td {{ props.item.updatedAt | moment('calendar') }}
+            template(slot='no-data')
+              v-alert.ma-3(icon='mdi-alert', :value='true', outlined, color='grey')
+                em.caption {{$t('profile:pages.emptyList')}}
+          .text-center.py-2.animated.fadeInDown(v-if='this.pageTotal > 1')
+            v-pagination(v-model='pagination', :length='pageTotal')
 </template>
 
 <script>
+import gql from 'graphql-tag'
 
 export default {
   data() {
-    return { }
+    return {
+      selectedPage: {},
+      pagination: 1,
+      pages: [],
+      loading: false
+    }
+  },
+  computed: {
+    headers () {
+      return [
+        { text: this.$t('profile:pages.headerTitle'), value: 'title' },
+        { text: this.$t('profile:pages.headerPath'), value: 'path' },
+        { text: this.$t('profile:pages.headerCreatedAt'), value: 'createdAt', width: 250 },
+        { text: this.$t('profile:pages.headerUpdatedAt'), value: 'updatedAt', width: 250 }
+      ]
+    },
+    pageTotal () {
+      return Math.ceil(this.pages.length / 15)
+    }
+  },
+  methods: {
+    async refresh() {
+      await this.$apollo.queries.pages.refetch()
+      this.$store.commit('showNotification', {
+        message: this.$t('profile:pages.refreshSuccess'),
+        style: 'success',
+        icon: 'cached'
+      })
+    },
+    goToPage(id) {
+      window.location.assign(`/i/` + id)
+    }
+  },
+  apollo: {
+    pages: {
+      query: gql`
+        query($creatorId: Int, $authorId: Int) {
+          pages {
+            list(creatorId: $creatorId, authorId: $authorId) {
+              id
+              locale
+              path
+              title
+              description
+              contentType
+              isPublished
+              isPrivate
+              privateNS
+              createdAt
+              updatedAt
+            }
+          }
+        }
+      `,
+      variables () {
+        return {
+          creatorId: this.$store.get('user/id'),
+          authorId: this.$store.get('user/id')
+        }
+      },
+      fetchPolicy: 'network-only',
+      update: (data) => data.pages.list,
+      watchLoading (isLoading) {
+        this.loading = isLoading
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'profile-pages-refresh')
+      }
+    }
   }
 }
 </script>