nfp_sites/app/admin/editarticle.js

375 lines
12 KiB
JavaScript
Raw Normal View History

2019-09-13 13:33:10 +00:00
const Authentication = require('../authentication')
const FileUpload = require('../widgets/fileupload')
2019-10-02 18:47:20 +00:00
const Staff = require('../api/staff')
2019-09-13 13:33:10 +00:00
const Froala = require('./froala')
2019-10-01 11:35:00 +00:00
const Page = require('../api/page')
const File = require('../api/file')
2019-09-14 19:03:38 +00:00
const Fileinfo = require('../widgets/fileinfo')
2019-10-01 11:35:00 +00:00
const Article = require('../api/article')
2019-09-13 13:33:10 +00:00
const EditArticle = {
getFroalaOptions: function() {
return {
theme: 'gray',
heightMin: 150,
videoUpload: false,
imageUploadURL: '/api/media',
imageManagerLoadURL: '/api/media',
imageManagerDeleteMethod: 'DELETE',
imageManagerDeleteURL: '/api/media',
events: {
'imageManager.beforeDeleteImage': function(img) {
this.opts.imageManagerDeleteURL = '/api/media/' + img.data('id')
},
},
requestHeaders: {
'Authorization': 'Bearer ' + Authentication.getToken(),
},
}
},
oninit: function(vnode) {
2019-09-14 19:03:38 +00:00
this.froala = null
this.loadedFroala = Froala.loadedFroala
2019-10-02 18:47:20 +00:00
this.staffers = []
Staff.getAllStaff()
.then(function(result) {
vnode.state.staffers = result
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
m.redraw()
})
2019-09-14 19:03:38 +00:00
if (!this.loadedFroala) {
Froala.createFroalaScript()
.then(function() {
vnode.state.loadedFroala = true
m.redraw()
})
}
this.fetchArticle(vnode)
},
onupdate: function(vnode) {
if (this.lastid !== m.route.param('id')) {
this.fetchArticle(vnode)
if (this.lastid === 'add') {
m.redraw()
}
2019-09-14 19:03:38 +00:00
}
},
fetchArticle: function(vnode) {
this.lastid = m.route.param('id')
this.loading = this.lastid !== 'add'
this.creating = this.lastid === 'add'
2019-09-13 13:33:10 +00:00
this.loadingFile = false
this.error = ''
this.article = {
name: '',
path: '',
description: '',
media: null,
banner: null,
2019-09-14 19:03:38 +00:00
files: [],
2019-10-02 00:16:11 +00:00
is_featured: false,
published_at: new Date(new Date().setFullYear(3000)).toISOString(),
2019-09-13 13:33:10 +00:00
}
this.editedPath = false
this.loadedFroala = Froala.loadedFroala
2019-09-14 19:03:38 +00:00
if (this.lastid !== 'add') {
2019-10-01 11:35:00 +00:00
Article.getArticle(this.lastid)
2019-09-13 13:33:10 +00:00
.then(function(result) {
vnode.state.editedPath = true
vnode.state.article = result
2019-10-02 00:16:11 +00:00
EditArticle.parsePublishedAt(vnode, null)
document.title = 'Editing: ' + result.name + ' - Admin NFP Moe'
2019-09-13 13:33:10 +00:00
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
vnode.state.loading = false
if (vnode.state.froala) {
vnode.state.froala.html.set(vnode.state.article.description)
}
2019-09-13 13:33:10 +00:00
m.redraw()
})
} else {
EditArticle.parsePublishedAt(vnode, null)
document.title = 'Create Article - Admin NFP Moe'
if (vnode.state.froala) {
vnode.state.froala.html.set(this.article.description)
}
2019-09-13 13:33:10 +00:00
}
},
2019-10-02 00:16:11 +00:00
parsePublishedAt: function(vnode, date) {
vnode.state.article.published_at = ((date && date.toISOString() || vnode.state.article.published_at).split('.')[0]).substr(0, 16)
},
2019-09-13 13:33:10 +00:00
updateValue: function(name, e) {
2019-10-02 00:16:11 +00:00
if (name === 'is_featured') {
this.article[name] = e.currentTarget.checked
} else {
this.article[name] = e.currentTarget.value
}
2019-09-13 13:33:10 +00:00
if (name === 'path') {
this.editedPath = true
} else if (name === 'name' && !this.editedPath) {
this.article.path = this.article.name.toLowerCase().replace(/ /g, '-')
}
},
updateParent: function(e) {
this.article.parent_id = Number(e.currentTarget.value)
if (this.article.parent_id === -1) {
this.article.parent_id = null
}
},
2019-10-02 18:47:20 +00:00
updateStaffer: function(e) {
this.article.staff_id = Number(e.currentTarget.value)
},
2019-09-14 19:03:38 +00:00
mediaUploaded: function(type, media) {
2019-09-13 13:33:10 +00:00
this.article[type] = media
},
2019-09-14 19:03:38 +00:00
mediaRemoved: function(type) {
this.article[type] = null
},
2019-09-13 13:33:10 +00:00
save: function(vnode, e) {
e.preventDefault()
if (!this.article.name) {
this.error = 'Name is missing'
} else if (!this.article.path) {
this.error = 'Path is missing'
2019-09-14 19:03:38 +00:00
} else {
this.error = ''
2019-09-13 13:33:10 +00:00
}
if (this.error) return
this.article.description = vnode.state.froala && vnode.state.froala.html.get() || this.article.description
2019-10-01 03:45:44 +00:00
if (this.article.description) {
this.article.description = this.article.description.replace(/<p[^>]+data-f-id="pbf"[^>]+>[^>]+>[^>]+>[^>]+>/, '')
}
2019-09-13 13:33:10 +00:00
this.loading = true
let promise
if (this.article.id) {
2019-10-01 11:35:00 +00:00
promise = Article.updateArticle(this.article.id, {
2019-09-13 13:33:10 +00:00
name: this.article.name,
path: this.article.path,
parent_id: this.article.parent_id,
description: this.article.description,
banner_id: this.article.banner && this.article.banner.id,
media_id: this.article.media && this.article.media.id,
2019-10-02 00:16:11 +00:00
published_at: new Date(this.article.published_at),
is_featured: this.article.is_featured,
2019-10-02 18:47:20 +00:00
staff_id: this.article.staff_id,
2019-09-13 13:33:10 +00:00
})
} else {
2019-10-01 11:35:00 +00:00
promise = Article.createArticle({
2019-09-13 13:33:10 +00:00
name: this.article.name,
path: this.article.path,
parent_id: this.article.parent_id,
description: this.article.description,
banner_id: this.article.banner && this.article.banner.id,
media_id: this.article.media && this.article.media.id,
2019-10-02 00:16:11 +00:00
published_at: new Date(this.article.published_at),
is_featured: this.article.is_featured,
2019-10-02 18:47:20 +00:00
staff_id: this.article.staff_id,
2019-09-13 13:33:10 +00:00
})
}
promise.then(function(res) {
if (vnode.state.article.id) {
res.media = vnode.state.article.media
res.banner = vnode.state.article.banner
2019-09-14 19:03:38 +00:00
res.files = vnode.state.article.files
2019-09-13 13:33:10 +00:00
vnode.state.article = res
2019-10-02 00:16:11 +00:00
EditArticle.parsePublishedAt(vnode, null)
2019-09-13 13:33:10 +00:00
} else {
m.route.set('/admin/articles/' + res.id)
}
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
vnode.state.loading = false
m.redraw()
})
},
2019-10-01 11:35:00 +00:00
uploadFile: function(vnode, event) {
2019-09-13 13:33:10 +00:00
if (!event.target.files[0]) return
vnode.state.error = ''
vnode.state.loadingFile = true
2019-09-14 19:03:38 +00:00
2019-10-01 11:35:00 +00:00
File.uploadFile(this.article.id, event.target.files[0])
2019-09-14 19:03:38 +00:00
.then(function(res) {
vnode.state.article.files.push(res)
})
.catch(function(err) {
vnode.state.error = err.message
})
.then(function() {
event.target.value = null
vnode.state.loadingFile = false
m.redraw()
})
2019-09-13 13:33:10 +00:00
},
getFlatTree: function() {
let out = [{id: null, name: '-- Frontpage --'}]
2019-10-01 11:35:00 +00:00
Page.Tree.forEach(function(page) {
2019-09-13 13:33:10 +00:00
out.push({ id: page.id, name: page.name })
if (page.children.length) {
page.children.forEach(function(sub) {
out.push({ id: sub.id, name: page.name + ' -> ' + sub.name })
})
}
})
return out
},
2019-10-02 18:47:20 +00:00
getStaffers: function() {
if (!this.article.staff_id) {
this.article.staff_id = 1
}
let out = []
this.staffers.forEach(function(item) {
out.push({ id: item.id, name: item.fullname })
})
return out
},
2019-09-13 13:33:10 +00:00
view: function(vnode) {
const showPublish = new Date(this.article.published_at) > new Date()
2019-09-13 13:33:10 +00:00
const parents = this.getFlatTree()
2019-10-02 18:47:20 +00:00
const staffers = this.getStaffers()
2019-09-13 13:33:10 +00:00
return (
this.loading ?
m('div.loading-spinner')
: m('div.admin-wrapper', [
m('div.admin-actions', this.article.id
? [
m('span', 'Actions:'),
m(m.route.Link, { href: '/article/' + this.article.path }, 'View article'),
]
: null),
m('article.editarticle', [
m('header', m('h1', this.creating ? 'Create Article' : 'Edit ' + (this.article.name || '(untitled)'))),
m('div.error', {
hidden: !this.error,
2019-09-14 19:03:38 +00:00
onclick: function() { vnode.state.error = '' },
2019-09-13 13:33:10 +00:00
}, this.error),
m(FileUpload, {
height: 300,
2019-09-14 19:03:38 +00:00
onupload: this.mediaUploaded.bind(this, 'banner'),
2019-09-13 13:33:10 +00:00
onerror: function(e) { vnode.state.error = e },
2019-09-14 19:03:38 +00:00
ondelete: this.mediaRemoved.bind(this, 'banner'),
2019-09-13 13:33:10 +00:00
media: this.article && this.article.banner,
}),
m(FileUpload, {
class: 'cover',
useimg: true,
2019-09-14 19:03:38 +00:00
onupload: this.mediaUploaded.bind(this, 'media'),
ondelete: this.mediaRemoved.bind(this, 'media'),
2019-09-13 13:33:10 +00:00
onerror: function(e) { vnode.state.error = e },
media: this.article && this.article.media,
}),
m('form.editarticle.content', {
onsubmit: this.save.bind(this, vnode),
}, [
m('label', 'Parent'),
m('select', {
onchange: this.updateParent.bind(this),
}, parents.map(function(item) { return m('option', { value: item.id || -1, selected: item.id === vnode.state.article.parent_id }, item.name) })),
m('label', 'Name'),
m('input', {
type: 'text',
value: this.article.name,
oninput: this.updateValue.bind(this, 'name'),
}),
2019-10-02 18:47:20 +00:00
m('label.slim', 'Path'),
m('input.slim', {
type: 'text',
value: this.article.path,
oninput: this.updateValue.bind(this, 'path'),
}),
2019-09-13 13:33:10 +00:00
m('label', 'Description'),
(
this.loadedFroala ?
m('div', {
oncreate: function(div) {
vnode.state.froala = new FroalaEditor(div.dom, EditArticle.getFroalaOptions(), function() {
vnode.state.froala.html.set(vnode.state.article.description)
})
},
})
: null
),
2019-10-02 18:47:20 +00:00
m('label', 'Published at'),
2019-09-13 13:33:10 +00:00
m('input', {
2019-10-02 00:16:11 +00:00
type: 'datetime-local',
value: this.article.published_at,
oninput: this.updateValue.bind(this, 'published_at'),
}),
2019-10-02 18:47:20 +00:00
m('label', 'Published by'),
m('select', {
onchange: this.updateStaffer.bind(this),
}, staffers.map(function(item) { return m('option', { value: item.id, selected: item.id === vnode.state.article.staff_id }, item.name) })),
2019-10-02 00:16:11 +00:00
m('label', 'Make featured'),
m('input', {
type: 'checkbox',
checked: this.article.is_featured,
oninput: this.updateValue.bind(this, 'is_featured'),
2019-09-13 13:33:10 +00:00
}),
m('div.loading-spinner', { hidden: this.loadedFroala }),
m('div', [
m('input', {
type: 'submit',
value: 'Save',
}),
showPublish
? m('button.submit', { onclick: function() { vnode.state.article.published_at = new Date().toISOString() }}, 'Publish')
: null,
]),
2019-09-13 13:33:10 +00:00
]),
2019-09-14 19:03:38 +00:00
this.article.files.length
? m('files', [
m('h4', 'Files'),
this.article.files.map(function(item) { return m(Fileinfo, { file: item }) }),
])
: null,
this.article.id
? m('div.fileupload', [
'Add file',
m('input', {
accept: '*',
type: 'file',
onchange: this.uploadFile.bind(this, vnode),
}),
(vnode.state.loadingFile ? m('div.loading-spinner') : null),
])
: null,
2019-09-13 13:33:10 +00:00
]),
])
)
},
}
module.exports = EditArticle