feat: list sponsors + contributors on contribute admin page

client/components/admin/admin-contribute.vue

@@ -19,7 +19,7 @@
           span {{ $t('admin:contribute.makeADonation') }}
       .body-1.mt-3.pl-3 {{ $t('admin:contribute.tshirts') }}
       v-card-actions.ml-2
-        v-btn(depressed, color='primary', href='https://wikijs.threadless.com')
+        v-btn(outline, color='primary', href='https://wikijs.threadless.com')
           v-icon(left) shopping_cart
           span {{ $t('admin:contribute.shop') }}
       v-divider.mt-3
@@ -39,11 +39,83 @@
           li {{ $t('admin:contribute.talkToFriends') }}
           i18next(path='admin:contribute.followUsOnTwitter', tag='li')
             a(href='https://twitter.com/requarks', target='_blank') Twitter
+    v-card
+      v-toolbar(color='teal', dense, dark)
+        .subheading Sponsors
+      v-list(two-line, dense)
+        template(v-for='(sponsor, idx) in sponsors')
+          v-list-tile(:key='sponsor.id')
+            v-list-tile-avatar
+              img(v-if='sponsor.image', :src='sponsor.image')
+              v-avatar(v-else, color='teal', size='40')
+                span.white--text.subheading {{sponsor.name[0].toUpperCase()}}
+            v-list-tile-content
+              v-list-tile-title {{sponsor.name}}
+              v-list-tile-sub-title {{sponsor.description}}
+            v-list-tile-action(v-if='sponsor.twitter')
+              v-btn(icon, :href='sponsor.twitter', target='_blank')
+                icon-twitter(fillColor='#9e9e9e')
+            v-list-tile-action(v-if='sponsor.website')
+              v-btn(icon, :href='sponsor.website', target='_blank')
+                v-icon(color='grey') public
+          v-divider(v-if='idx < sponsors.length - 1')
+    v-card
+      v-toolbar(color='blue-grey', dense, dark)
+        .subheading Backers
+      v-list(two-line, dense)
+        template(v-for='(backer, idx) in backers')
+          v-list-tile(:key='backer.id')
+            v-list-tile-avatar
+              img(v-if='backer.image', :src='backer.image')
+              v-avatar(v-else, color='blue-grey', size='40')
+                span.white--text.subheading {{backer.name[0].toUpperCase()}}
+            v-list-tile-content
+              v-list-tile-title {{backer.name}}
+              v-list-tile-sub-title {{backer.description}}
+            v-list-tile-action(v-if='backer.twitter')
+              v-btn(icon, :href='backer.twitter', target='_blank')
+                icon-twitter(fillColor='#9e9e9e')
+            v-list-tile-action(v-if='backer.website')
+              v-btn(icon, :href='backer.website', target='_blank')
+                v-icon(color='grey') public
+          v-divider(v-if='idx < backers.length - 1')
 
 </template>
 
 <script>
+import _ from 'lodash'
+
+import groupsQuery from 'gql/admin/contribute/contribute-query-contributors.gql'
+
+import IconTwitter from 'mdi/Twitter'
+
 export default {
+  components: {
+    IconTwitter
+  },
+  data() {
+    return {
+      contributors: []
+    }
+  },
+  computed: {
+    sponsors() {
+      return _.filter(this.contributors, ['tier', 'sponsors'])
+    },
+    backers() {
+      return _.reject(this.contributors, ['tier', 'sponsors'])
+    }
+  },
+  apollo: {
+    contributors: {
+      query: groupsQuery,
+      fetchPolicy: 'network-only',
+      update: (data) => data.contribute.contributors,
+      watchLoading (isLoading) {
+        this.$store.commit(`loading${isLoading ? 'Start' : 'Stop'}`, 'admin-contribute-refresh')
+      }
+    }
+  }
 }
 </script>
 

client/graph/admin/contribute/contribute-query-contributors.gql

+query {
+  contribute {
+    contributors {
+      company
+      currency
+      description
+      id
+      image
+      name
+      profile
+      tier
+      totalDonated
+      twitter
+      website
+    }
+  }
+}

server/graph/resolvers/contribute.js

+const request = require('request-promise')
+const _ = require('lodash')
+
+module.exports = {
+  Query: {
+    async contribute() { return {} }
+  },
+  ContributeQuery: {
+    async contributors(obj, args, context, info) {
+      const resp = await request({
+        uri: 'https://opencollective.com/wikijs/members/all.json',
+        json: true
+      })
+      const dude = _.filter(resp, c => {
+        return c.role === 'BACKER' && c.totalAmountDonated > 0
+      }).map(c => ({
+        company: _.get(c, 'company', '') || '',
+        currency: _.get(c, 'currency', 'USD') || 'USD',
+        description: _.get(c, 'description', '') || '',
+        id: _.get(c, 'MemberId', 0),
+        image: _.get(c, 'image', '') || '',
+        name: _.get(c, 'name', 'Anonymous') || '',
+        profile: _.get(c, 'profile', ''),
+        tier: _.toLower(_.get(c, 'tier', 'backers')),
+        totalDonated: _.get(c, 'totalAmountDonated', 0),
+        twitter: _.get(c, 'twitter', '') || '',
+        website: _.get(c, 'website', '') || ''
+      }))
+      console.info(dude)
+      return dude
+    }
+  }
+}

server/graph/schemas/contribute.graphql

+# ===============================================
+# CONTRIBUTE
+# ===============================================
+
+extend type Query {
+  contribute: ContributeQuery
+}
+
+# -----------------------------------------------
+# QUERIES
+# -----------------------------------------------
+
+type ContributeQuery {
+  contributors: [ContributeContributor]
+}
+
+# -----------------------------------------------
+# TYPES
+# -----------------------------------------------
+
+type ContributeContributor {
+  company: String!
+  currency: String!
+  description: String!
+  id: Int!
+  image: String!
+  name: String!
+  profile: String!
+  tier: String!
+  totalDonated: Int!
+  twitter: String!
+  website: String!
+}