349 lines
11 KiB
JavaScript
349 lines
11 KiB
JavaScript
|
require('./dtsel')
|
||
|
|
const FileUpload = require('../widgets/fileupload')
|
||
|
|
const Page = require('../api/page')
|
||
|
|
const Fileinfo = require('../widgets/fileinfo')
|
||
|
|
const common = require('../api/common')
|
||
|
|
const Editor = require('./editor')
|
||
|
|
|
||
|
|
const EditArticle = {
|
||
|
|
|
||
|
|
oninit: function(vnode) {
|
||
|
|
this.loading = false
|
||
|
|
this.showLoading = null
|
||
|
|
this.data = {
|
||
|
|
article: null,
|
||
|
|
files: [],
|
||
|
|
staff: [],
|
||
|
|
}
|
||
|
|
this.pages = [{id: null, name: 'Frontpage'}]
|
||
|
|
this.pages = this.pages.concat(Page.getFlatTree())
|
||
|
|
this.newBanner = null
|
||
|
|
this.newMedia = null
|
||
|
|
this.dateInstance = null
|
||
|
|
this.editor = null
|
||
|
|
|
||
|
|
this.fetchArticle(vnode)
|
||
|
|
},
|
||
|
|
|
||
|
|
onbeforeupdate: function(vnode) {
|
||
|
|
if (this.lastid !== m.route.param('id')) {
|
||
|
|
this.fetchArticle(vnode)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
fetchArticle: function(vnode) {
|
||
|
|
this.lastid = m.route.param('id')
|
||
|
|
|
||
|
|
return this.requestArticle(
|
||
|
|
common.sendRequest({
|
||
|
|
method: 'GET',
|
||
|
|
url: '/api/auth/articles/' + (this.lastid === 'add' ? '0' : this.lastid),
|
||
|
|
}))
|
||
|
|
},
|
||
|
|
|
||
|
|
requestArticle: function(data) {
|
||
|
|
this.error = ''
|
||
|
|
|
||
|
|
if (this.showLoading) {
|
||
|
|
clearTimeout(this.showLoading)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.data.article) {
|
||
|
|
this.showLoading = setTimeout(() => {
|
||
|
|
this.showLoading = null
|
||
|
|
this.loading = true
|
||
|
|
m.redraw()
|
||
|
|
}, 150)
|
||
|
|
} else {
|
||
|
|
this.loading = true
|
||
|
|
}
|
||
|
|
|
||
|
|
data
|
||
|
|
.then((result) => {
|
||
|
|
this.data = result
|
||
|
|
this.data.article.publish_at = new Date(this.data.article.publish_at)
|
||
|
|
|
||
|
|
if (this.data.article.id) {
|
||
|
|
document.title = 'Editing: ' + this.data.article.name + ' - Admin NFP Moe'
|
||
|
|
this.editedPath = true
|
||
|
|
} else {
|
||
|
|
document.title = 'Create Article - Admin NFP Moe'
|
||
|
|
}
|
||
|
|
}, (err) => {
|
||
|
|
this.error = err.message
|
||
|
|
})
|
||
|
|
.then(() => {
|
||
|
|
clearTimeout(this.showLoading)
|
||
|
|
this.showLoading = null
|
||
|
|
this.loading = false
|
||
|
|
m.redraw()
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
updateValue: function(name, e) {
|
||
|
|
if (name === 'is_featured') {
|
||
|
|
this.data.article[name] = e.currentTarget.checked
|
||
|
|
} else {
|
||
|
|
this.data.article[name] = e.currentTarget.value
|
||
|
|
}
|
||
|
|
if (name === 'path') {
|
||
|
|
this.editedPath = true
|
||
|
|
} else if (name === 'name' && !this.editedPath) {
|
||
|
|
this.data.article.path = this.data.article.name.toLowerCase().replace(/ /g, '-')
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
updateParent: function(e) {
|
||
|
|
this.data.article.page_id = Number(e.currentTarget.value) || null
|
||
|
|
},
|
||
|
|
|
||
|
|
updateStaffer: function(e) {
|
||
|
|
this.data.article.admin_id = Number(e.currentTarget.value)
|
||
|
|
},
|
||
|
|
|
||
|
|
mediaUploaded: function(type, file) {
|
||
|
|
if (type === 'banner') {
|
||
|
|
this.newBanner = file
|
||
|
|
} else {
|
||
|
|
this.newMedia = file
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
mediaRemoved: function(type) {
|
||
|
|
this.data.article['remove_' + type] = true
|
||
|
|
this.data.article[type + '_prefix'] = null
|
||
|
|
},
|
||
|
|
|
||
|
|
save: function(vnode, e) {
|
||
|
|
e.preventDefault()
|
||
|
|
if (!this.data.article.name) {
|
||
|
|
this.error = 'Name is missing'
|
||
|
|
} else if (!this.data.article.path) {
|
||
|
|
this.error = 'Path is missing'
|
||
|
|
} else {
|
||
|
|
this.error = ''
|
||
|
|
}
|
||
|
|
if (this.error) return
|
||
|
|
|
||
|
|
let formData = new FormData()
|
||
|
|
if (this.newBanner) {
|
||
|
|
formData.append('banner', this.newBanner.file)
|
||
|
|
}
|
||
|
|
if (this.newMedia) {
|
||
|
|
formData.append('media', this.newMedia.file)
|
||
|
|
}
|
||
|
|
if (this.data.article.id) {
|
||
|
|
formData.append('id', this.data.article.id)
|
||
|
|
}
|
||
|
|
|
||
|
|
formData.append('admin_id', this.data.article.admin_id || this.data.staff[0].id)
|
||
|
|
formData.append('name', this.data.article.name)
|
||
|
|
formData.append('is_featured', this.data.article.is_featured || false)
|
||
|
|
formData.append('path', this.data.article.path)
|
||
|
|
formData.append('page_id', this.data.article.page_id || null)
|
||
|
|
formData.append('publish_at', this.dateInstance.inputElem.value.replace(', ', 'T') + 'Z')
|
||
|
|
formData.append('remove_banner', this.data.article.remove_banner ? true : false)
|
||
|
|
formData.append('remove_media', this.data.article.remove_media ? true : false)
|
||
|
|
|
||
|
|
this.loading = true
|
||
|
|
|
||
|
|
this.requestArticle(
|
||
|
|
this.editor.save()
|
||
|
|
.then(body => {
|
||
|
|
formData.append('content', JSON.stringify(body))
|
||
|
|
|
||
|
|
return common.sendRequest({
|
||
|
|
method: 'PUT',
|
||
|
|
url: '/api/auth/articles/' + (this.lastid === 'add' ? '0' : this.lastid),
|
||
|
|
body: formData,
|
||
|
|
})
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
if (!data.article.id) {
|
||
|
|
throw new Error('Something went wrong with saving, try again later')
|
||
|
|
} else if (this.lastid === 'add') {
|
||
|
|
this.lastid = data.article.id.toString()
|
||
|
|
m.route.set('/admin/articles/' + data.article.id)
|
||
|
|
}
|
||
|
|
return data
|
||
|
|
})
|
||
|
|
)
|
||
|
|
},
|
||
|
|
|
||
|
|
uploadFile: function(vnode, e) {
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
view: function(vnode) {
|
||
|
|
const showPublish = this.data.article
|
||
|
|
? this.data.article.publish_at > new Date()
|
||
|
|
: false
|
||
|
|
const bannerImage = this.data.article && this.data.article.banner_prefix
|
||
|
|
? this.data.article.banner_prefix + '_large.avif'
|
||
|
|
: null
|
||
|
|
const mediaImage = this.data.article && this.data.article.media_prefix
|
||
|
|
? this.data.article.media_prefix + '_large.avif'
|
||
|
|
: null
|
||
|
|
|
||
|
|
return [
|
||
|
|
this.loading && !this.data.article
|
||
|
|
? m('div.admin-spinner.loading-spinner')
|
||
|
|
: null,
|
||
|
|
this.data.article
|
||
|
|
? m('div.admin-wrapper', [
|
||
|
|
this.loading
|
||
|
|
? m('div.loading-spinner')
|
||
|
|
: null,
|
||
|
|
m('div.admin-actions', this.data.article.id
|
||
|
|
? [
|
||
|
|
m('span', 'Actions:'),
|
||
|
|
m(m.route.Link, { href: '/article/' + this.data.article.path }, 'View article'),
|
||
|
|
]
|
||
|
|
: null),
|
||
|
|
m('article.editarticle', [
|
||
|
|
m('header', m('h1',
|
||
|
|
(this.data.article.id ? 'Edit ' : 'Create Article ') + (this.data.article.name || '(untitled)')
|
||
|
|
)
|
||
|
|
),
|
||
|
|
m('header', m('h1', this.creating ? 'Create Article' : 'Edit ' + (this.data.article.name || '(untitled)'))),
|
||
|
|
m('div.error', {
|
||
|
|
hidden: !this.error,
|
||
|
|
onclick: () => { vnode.state.error = '' },
|
||
|
|
}, this.error),
|
||
|
|
m(FileUpload, {
|
||
|
|
height: 300,
|
||
|
|
onfile: this.mediaUploaded.bind(this, 'banner'),
|
||
|
|
ondelete: this.mediaRemoved.bind(this, 'banner'),
|
||
|
|
media: bannerImage,
|
||
|
|
}),
|
||
|
|
m(FileUpload, {
|
||
|
|
class: 'cover',
|
||
|
|
useimg: true,
|
||
|
|
onfile: this.mediaUploaded.bind(this, 'media'),
|
||
|
|
ondelete: this.mediaRemoved.bind(this, 'media'),
|
||
|
|
media: mediaImage,
|
||
|
|
}),
|
||
|
|
m('form.editarticle.content', {
|
||
|
|
onsubmit: this.save.bind(this, vnode),
|
||
|
|
}, [
|
||
|
|
m('label', 'Parent'),
|
||
|
|
m('select', {
|
||
|
|
onchange: this.updateParent.bind(this),
|
||
|
|
}, this.pages.map((item) => {
|
||
|
|
return m('option', {
|
||
|
|
value: item.id || 0,
|
||
|
|
selected: item.id === this.data.article.page_id
|
||
|
|
}, item.name)
|
||
|
|
})),
|
||
|
|
m('div.input-row', [
|
||
|
|
m('div.input-group', [
|
||
|
|
m('label', 'Name'),
|
||
|
|
m('input', {
|
||
|
|
type: 'text',
|
||
|
|
value: this.data.article.name,
|
||
|
|
oninput: this.updateValue.bind(this, 'name'),
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
m('div.input-group', [
|
||
|
|
m('label', 'Path'),
|
||
|
|
m('input', {
|
||
|
|
type: 'text',
|
||
|
|
value: this.data.article.path,
|
||
|
|
oninput: this.updateValue.bind(this, 'path'),
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
m('label', 'Description'),
|
||
|
|
m(Editor, {
|
||
|
|
oncreate: (subnode) => {
|
||
|
|
this.editor = subnode.state.editor
|
||
|
|
},
|
||
|
|
contentdata: this.data.article.content,
|
||
|
|
}),
|
||
|
|
m('div.input-row', [
|
||
|
|
m('div.input-group', [
|
||
|
|
m('label', 'Published at'),
|
||
|
|
m('input', {
|
||
|
|
type: 'text',
|
||
|
|
oncreate: (div) => {
|
||
|
|
if (!this.dateInstance) {
|
||
|
|
this.dateInstance = new dtsel.DTS(div.dom, {
|
||
|
|
dateFormat: 'yyyy-mm-dd',
|
||
|
|
timeFormat: 'HH:MM:SS',
|
||
|
|
showTime: true,
|
||
|
|
})
|
||
|
|
window.temp = this.dateInstance
|
||
|
|
}
|
||
|
|
},
|
||
|
|
value: this.data.article.publish_at.toISOString().replace('T', ', ').split('.')[0],
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
m('div.input-group', [
|
||
|
|
m('label', 'Published by'),
|
||
|
|
m('select', {
|
||
|
|
onchange: this.updateStaffer.bind(this),
|
||
|
|
},
|
||
|
|
this.data.staff.map((item) => {
|
||
|
|
return m('option', {
|
||
|
|
value: item.id,
|
||
|
|
selected: item.id === this.data.article.admin_id
|
||
|
|
}, item.name)
|
||
|
|
})
|
||
|
|
),
|
||
|
|
]),
|
||
|
|
m('div.input-group.small', [
|
||
|
|
m('label', 'Make featured'),
|
||
|
|
m('input', {
|
||
|
|
type: 'checkbox',
|
||
|
|
checked: this.data.article.is_featured,
|
||
|
|
oninput: this.updateValue.bind(this, 'is_featured'),
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
m('div', {
|
||
|
|
hidden: !this.data.article.name || !this.data.article.path
|
||
|
|
}, [
|
||
|
|
m('input', {
|
||
|
|
type: 'submit',
|
||
|
|
value: 'Save',
|
||
|
|
}),
|
||
|
|
showPublish
|
||
|
|
? m('button.submit', {
|
||
|
|
onclick: () => {
|
||
|
|
this.data.article.publish_at = new Date().toISOString()
|
||
|
|
}
|
||
|
|
}, 'Publish')
|
||
|
|
: null,
|
||
|
|
]),
|
||
|
|
]),
|
||
|
|
this.data.files.length
|
||
|
|
? m('files', [
|
||
|
|
m('h4', 'Files'),
|
||
|
|
this.data.files.map((file) => {
|
||
|
|
return m(Fileinfo, { file: file })
|
||
|
|
}),
|
||
|
|
])
|
||
|
|
: null,
|
||
|
|
this.data.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,
|
||
|
|
]),
|
||
|
|
])
|
||
|
|
: m('div.error', {
|
||
|
|
hidden: !this.error,
|
||
|
|
onclick: () => { this.fetchArticle(vnode) },
|
||
|
|
}, this.error),,
|
||
|
|
]
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = EditArticle
|