Skip to content
This repository has been archived by the owner on Jan 29, 2024. It is now read-only.

Commit

Permalink
reinstate loader screen
Browse files Browse the repository at this point in the history 
Fixes #48
Fixes #51
  • Loading branch information
@hughrun
hughrun committed Mar 13, 2020
1 parent ca92d55 commit 739cbf1
Show file tree
Hide file tree
Showing 10 changed files with 222 additions and 72 deletions.
125 changes: 99 additions & 26 deletions public/scripts/admin-vue.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
Vue.component('loader-screen', {
props: ['processing'],
template: `
<div v-if="processing" id="loader">
<div class="loader-container">
<div class="loader-text">
<p>Processing request...</p>
</div>
</div>
</div>
`
})

Vue.component('message-list', {
props: ['messages'],
template: `
Expand Down Expand Up @@ -41,26 +54,32 @@ Vue.component('reject-reason', {
</div>
`,
methods: {
loading(bool) {
this.$emit('loading', bool)
},
confirmRejection() {
if (this.reason) {
axios
.post('/api/v1/update/admin/reject-blog', {
user: this.email,
url: this.blog.url,
blog: this.blog.idString,
reason: this.reason
})
.then( () => {
this.$emit('reject-blog', this.blog)
})
.catch( err => {
console.log(err)
msg = {
class: 'flash-error',
text: 'Something went wrong rejecting that blog.'
}
this.$emit('add-message', msg)
})
this.loading(true)
axios
.post('/api/v1/update/admin/reject-blog', {
user: this.email,
url: this.blog.url,
blog: this.blog.idString,
reason: this.reason
})
.then( () => {
this.$emit('reject-blog', this.blog)
this.loading(false)
})
.catch( err => {
console.log(err)
msg = {
class: 'flash-error',
text: 'Something went wrong rejecting that blog.'
}
this.$emit('add-message', msg)
this.loading(false)
})
} else {
msg = {
class: 'flash-error',
Expand Down Expand Up @@ -104,11 +123,15 @@ Vue.component('blogs-for-approval', {
addMessage(msg) {
this.$emit('add-message', msg)
},
loading(bool) {
this.$emit('loading', bool)
},
approve(blog) {
blog.approving = true
Vue.set(this.blogs, this.blogs.indexOf(blog), blog)
},
confirmApproval(blog) {
this.loading(true)
axios
.post('/api/v1/update/admin/approve-blog', {
user: this.email,
Expand All @@ -120,13 +143,15 @@ Vue.component('blogs-for-approval', {
if (res.data.class === "flash-success") {
Vue.delete(this.blogs, this.blogs.indexOf(blog))
}
this.loading(false)
})
.catch( err => {
msg = {
class: 'flash-error',
text: 'Something went wrong approving that blog.'
}
this.addMessage(msg)
this.loading(false)
})
},
reject(blog) {
Expand Down Expand Up @@ -177,7 +202,8 @@ Vue.component('users-with-approvals', {
<blogs-for-approval
v-bind:blogs="user.claims"
v-bind:email="user.email"
@add-message="addMessage"
@add-message="addMessage"
@loading="loading"
></blogs-for-approval>
</div>
</div>
Expand All @@ -187,7 +213,10 @@ Vue.component('users-with-approvals', {
methods: {
addMessage(msg) {
this.$emit('add-message', msg)
}
},
loading(bool) {
this.$emit('loading', bool)
},
}
})

Expand All @@ -203,6 +232,9 @@ Vue.component('failing-blog', {
addMessage(msg) {
this.$emit('add-message', msg)
},
loading(bool) {
this.$emit('loading', bool)
},
editBlog() {
this.editing = true
},
Expand Down Expand Up @@ -272,8 +304,11 @@ Vue.component('failing-blogs-list', {
addMessage(msg) {
this.$emit('add-message', msg)
},
loading(bool) {
this.$emit('loading', bool)
},
deleteBlog(blog, reason) {
// delete blog from server
this.loading(true)
axios
.post('/api/v1/update/admin/delete-blog', {
blog: blog.idString,
Expand All @@ -285,22 +320,26 @@ Vue.component('failing-blogs-list', {
if (res.data.class === 'flash-success') {
Vue.delete(this.failing, this.failing.indexOf(blog)) // then remove from blogs list
}
this.loading(false)
})
.catch(err => {
this.addMessage({class: 'flash-error', text: err.message})
this.loading(false)
})
},
suspendBlog(blog, reason) {
// suspend blog on server
let data = blog
data.reason = reason
this.loading(true)
axios
.post('/api/v1/update/admin/suspend-blog', data)
.then( res => {
this.addMessage(res.data) // then add message
if (res.data.class === 'flash-success') {
Vue.set(this.suspended, this.suspended.length, blog) // then add to the suspended list
}
this.loading(false)
})
}
},
Expand All @@ -325,7 +364,7 @@ Vue.component('failing-blogs-list', {
</form>
</section>
<div v-else>You have no failing feeds to attend to.</div>
<suspended-blogs @add-message="addMessage" v-bind:suspended="suspended"></suspended-blogs>
<suspended-blogs @add-message="addMessage" @loading="loading" v-bind:suspended="suspended"></suspended-blogs>
<suspend-blog @add-message="addMessage" @suspend-blog="suspendBlog"></suspend-blog>
</section>
`
Expand All @@ -340,6 +379,9 @@ Vue.component('suspended-blog', {
}
},
methods: {
loading(bool) {
this.$emit('loading', bool)
},
editBlog() {
this.editing = true
},
Expand Down Expand Up @@ -379,46 +421,58 @@ Vue.component('suspended-blog', {
Vue.component('suspended-blogs', {
props: ['suspended'],
data () {
return {}
return {
suspendedBlogs: this.suspended.length
}
},
methods: {
addMessage(msg) {
this.$emit('add-message', msg)
},
loading(bool) {
this.$emit('loading', bool)
},
deleteBlog(blog,reason) {
this.loading(true)
axios
.post('/api/v1/update/admin/delete-blog', {url: blog.url}) // delete blog
.then( res => {
this.addMessage(res.data) // then add message
if (res.data.class === 'flash-success') {
Vue.delete(this.suspended, this.suspended.indexOf(blog)) // then remove from blogs list
}
this.loading(false)
})
.catch(err => {
this.addMessage({class: 'flash-error', text: err.message})
this.loading(false)
})
},
unsuspendBlog(blog) {
this.loading(true)
axios
.post('/api/v1/update/admin/unsuspend-blog', {url: blog.url}) // suspend blog
.then( res => {
this.addMessage(res.data) // then add message
if (res.data.class === 'flash-success') {
Vue.delete(this.suspended, this.suspended.indexOf(blog)) // then remove from blogs list
}
this.loading(false)
})
.catch(err => {
this.addMessage({class: 'flash-error', text: err.message})
this.loading(false)
})
}
},
template: `
<div>
<h3>Suspended Blogs</h3>
<h3 v-if="suspendedBlogs">Suspended Blogs</h3>
<form v-for="blog in suspended" class="claimed-blogs">
<suspended-blog
v-bind:blog="blog"
@add-message="addMessage"
@loading="loading"
@delete-blog="deleteBlog"
@unsuspend-blog="unsuspendBlog"></suspended-blog>
</form>
Expand Down Expand Up @@ -510,24 +564,39 @@ Vue.component('admins-list', {
addMessage(msg) {
this.$emit('add-message', msg)
},
loading(bool) {
this.$emit('loading', bool)
},
removeAdmin(admin) {
this.loading(true)
axios
.post('/api/v1/update/admin/remove-admin', {user: admin.email})
.then( res => {
this.addMessage(res.data)
if (res.data.class === 'flash-success') {
Vue.delete(this.admins, this.admins.indexOf(admin))
}
this.loading(false)
})
.catch(err => {
this.addMessage({class: 'flash-error', text: err.message})
this.loading(false)
})
},
addAdmin(admin) {
this.loading(true)
axios
.post('/api/v1/update/admin/make-admin', {user: admin.email})
.then( res => {
this.addMessage(res.data)
if (res.data.class === 'flash-success') {
Vue.set(this.admins, this.admins.length, admin)
}
this.loading(false)
})
.catch(err => {
this.addMessage({class: 'flash-error', text: err.message})
this.loading(false)
})
}
},
Expand All @@ -546,7 +615,7 @@ Vue.component('admins-list', {
<p><strong>You are currently the only administrator.</strong></p>
<p>You should add someone else in case you get hit by a bus.</p>
</div>
<make-admin @add-admin="addAdmin"></make-admin>
<make-admin @add-admin="addAdmin" @loading="loading"></make-admin>
</section>
`
})
Expand Down Expand Up @@ -580,7 +649,8 @@ new Vue({
el: '#main',
data () {
return {
messages: []
messages: [],
processing: false
}
},
methods: {
Expand All @@ -590,6 +660,9 @@ new Vue({
removeMessage(msg) {
// fired when click on X to get rid of it
Vue.delete(this.messages, this.messages.indexOf(msg))
},
loading(bool) {
this.processing = bool
}
}
})
Loading

0 comments on commit 739cbf1

Please sign in to comment.