nfp_sites/nfp_moe/app/admin/site_editarticle.js

428 lines
13 KiB
JavaScript
Raw Normal View History

2022-07-21 07:06:16 +00:00
require('./dtsel')
const FileUpload = require('./fileupload')
const PageTree = require('../page_tree')
const Fileinfo = require('../fileinfo')
const api = require('../api')
2022-07-21 07:06:16 +00:00
const Editor = require('./editor')
const Dialogue = require('./dialogue')
2019-09-13 13:33:10 +00:00
const EditArticle = {
oninit: function(vnode) {
2022-07-20 00:33:06 +00:00
this.loading = false
this.showLoading = null
this.data = {
article: null,
files: [],
staff: [],
2019-09-14 19:03:38 +00:00
}
2022-07-20 00:33:06 +00:00
this.pages = [{id: null, name: 'Frontpage'}]
this.pages = this.pages.concat(PageTree.getFlatTree())
2022-08-12 23:33:50 +00:00
this.removeBanner = false
this.removeMedia = false
2022-07-20 00:33:06 +00:00
this.newBanner = null
this.newMedia = null
2022-07-21 07:06:16 +00:00
this.dateInstance = null
this.editor = null
2019-09-14 19:03:38 +00:00
this.fetchArticle(vnode)
},
2022-07-20 00:33:06 +00:00
onbeforeupdate: function(vnode) {
2019-09-14 19:03:38 +00:00
if (this.lastid !== m.route.param('id')) {
this.fetchArticle(vnode)
}
},
fetchArticle: function(vnode) {
this.lastid = m.route.param('id')
2022-07-22 11:18:33 +00:00
return this.requestArticle(
api.sendRequest({
method: 'GET',
url: '/api/auth/articles/' + (this.lastid === 'add' ? '0' : this.lastid),
})
)
2022-07-22 11:18:33 +00:00
},
requestArticle: function(data) {
2019-09-13 13:33:10 +00:00
this.error = ''
2022-07-20 00:33:06 +00:00
if (this.showLoading) {
clearTimeout(this.showLoading)
2019-09-13 13:33:10 +00:00
}
2022-07-20 00:33:06 +00:00
if (this.data.article) {
this.showLoading = setTimeout(() => {
this.showLoading = null
this.loading = true
2019-09-13 13:33:10 +00:00
m.redraw()
2022-07-20 00:33:06 +00:00
}, 150)
} else {
2022-07-20 00:33:06 +00:00
this.loading = true
2019-09-13 13:33:10 +00:00
}
2022-07-22 11:18:33 +00:00
data
2022-07-20 00:33:06 +00:00
.then((result) => {
this.data = result
2022-07-27 08:41:18 +00:00
if (this.data.article.id) {
2022-08-12 23:33:50 +00:00
this.data.article.publish_at = new Date(this.data.article.publish_at)
2022-07-20 00:33:06 +00:00
document.title = 'Editing: ' + this.data.article.name + ' - Admin NFP Moe'
2022-07-27 08:41:18 +00:00
this.editedPath = true
2022-07-20 00:33:06 +00:00
} else {
2022-08-12 23:33:50 +00:00
this.data.article.publish_at = new Date('3000-01-01')
2022-07-20 00:33:06 +00:00
document.title = 'Create Article - Admin NFP Moe'
}
}, (err) => {
this.error = err.message
})
.then(() => {
clearTimeout(this.showLoading)
this.showLoading = null
this.loading = false
m.redraw()
})
2019-10-02 00:16:11 +00:00
},
2019-09-13 13:33:10 +00:00
updateValue: function(name, e) {
2019-10-02 00:16:11 +00:00
if (name === 'is_featured') {
2022-07-20 00:33:06 +00:00
this.data.article[name] = e.currentTarget.checked
2019-10-02 00:16:11 +00:00
} else {
2022-07-20 00:33:06 +00:00
this.data.article[name] = e.currentTarget.value
2019-10-02 00:16:11 +00:00
}
2019-09-13 13:33:10 +00:00
if (name === 'path') {
this.editedPath = true
} else if (name === 'name' && !this.editedPath) {
this.data.article.path = this.data.article.name
.normalize("NFD").replace(/[\u0300-\u036f]/g, '')
.toLocaleLowerCase()
.replace(/[^a-z0-9]/g, '-')
.replace(/\-{2,}/g, '-')
.replace(/^-+/, '')
.replace(/-+$/, '')
2019-09-13 13:33:10 +00:00
}
},
updateParent: function(e) {
2022-07-20 00:33:06 +00:00
this.data.article.page_id = Number(e.currentTarget.value) || null
2019-09-13 13:33:10 +00:00
},
2019-10-02 18:47:20 +00:00
updateStaffer: function(e) {
2022-07-20 00:33:06 +00:00
this.data.article.admin_id = Number(e.currentTarget.value)
2019-10-02 18:47:20 +00:00
},
2022-07-20 00:33:06 +00:00
mediaUploaded: function(type, file) {
if (type === 'banner') {
this.newBanner = file
this.removeBanner = false
2022-07-20 00:33:06 +00:00
} else {
this.newMedia = file
this.removeMedia = false
2022-07-20 00:33:06 +00:00
}
2019-09-13 13:33:10 +00:00
},
2019-09-14 19:03:38 +00:00
mediaRemoved: function(type) {
this.data.article[type + '_alt_prefix'] = null
if (type === 'banner') {
this.removeBanner = true
} else {
this.removeMedia = true
}
2019-09-14 19:03:38 +00:00
},
2019-09-13 13:33:10 +00:00
save: function(vnode, e) {
e.preventDefault()
2022-07-27 08:41:18 +00:00
if (!this.data.article.name) {
this.error = 'Name is missing'
} else if (!this.data.article.path) {
this.error = 'Path is missing'
} else {
this.error = ''
2022-07-22 11:18:33 +00:00
}
2022-07-27 08:41:18 +00:00
if (this.error) return
2022-07-20 00:33:06 +00:00
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)
}
2022-07-22 11:18:33 +00:00
formData.append('admin_id', this.data.article.admin_id || this.data.staff[0].id)
2022-07-20 00:33:06 +00:00
formData.append('name', this.data.article.name)
2022-07-22 11:18:33 +00:00
formData.append('is_featured', this.data.article.is_featured || false)
2022-07-20 00:33:06 +00:00
formData.append('path', this.data.article.path)
2022-07-22 11:18:33 +00:00
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.removeBanner ? true : false)
formData.append('remove_media', this.removeMedia ? true : false)
2019-09-13 13:33:10 +00:00
this.loading = true
2022-07-22 11:18:33 +00:00
this.requestArticle(
this.editor.save()
.then(body => {
formData.append('content', JSON.stringify(body))
2019-09-13 13:33:10 +00:00
return api.sendRequest({
2022-07-22 11:18:33 +00:00
method: 'PUT',
2022-07-27 08:41:18 +00:00
url: '/api/auth/articles/' + (this.lastid === 'add' ? '0' : this.lastid),
2022-07-22 11:18:33 +00:00
body: formData,
})
2019-09-13 13:33:10 +00:00
})
2022-07-27 08:41:18 +00:00
.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
})
2022-07-22 11:18:33 +00:00
)
2019-09-13 13:33:10 +00:00
},
2022-07-20 00:33:06 +00:00
uploadFile: function(vnode, e) {
2022-08-12 23:33:50 +00:00
if (!e.target.files[0]) return
if (this.lastid === 'add') return
let file = e.target.files[0]
e.target.value = null
let formData = new FormData()
formData.append('file', file)
2019-09-14 19:03:38 +00:00
return this.refreshFiles(vnode, api.sendRequest({
2022-08-12 23:33:50 +00:00
method: 'POST',
url: '/api/auth/articles/' + this.lastid + '/files',
body: formData,
}))
},
refreshFiles: function(vnode, prom) {
this.loading = true
m.redraw()
2022-08-12 23:33:50 +00:00
prom.then(() => {
return api.sendRequest({
method: 'GET',
url: '/api/auth/articles/' + this.lastid,
})
})
.then((result) => {
this.data.files = result.files
}, (err) => {
this.error = err.message
})
.then(() => {
this.loading = false
2022-08-12 23:33:50 +00:00
m.redraw()
})
},
confirmRemoveFile: function(vnode, file) {
return this.refreshFiles(vnode, api.sendRequest({
method: 'DELETE',
url: '/api/auth/articles/' + this.lastid + '/files/' + file.id,
}))
2019-10-02 18:47:20 +00:00
},
askConfirmRemoveFile: function(vnode, file) {
Dialogue.showDialogue(
'Delete file',
'Are you sure you want to remove "' + file.filename + '"',
'Delete',
'alert',
'Don\'t delete',
'',
file,
this.confirmRemoveFile.bind(this, vnode))
},
2019-09-13 13:33:10 +00:00
view: function(vnode) {
2022-08-12 23:33:50 +00:00
let article = this.data.article
const showPublish = article
? article.publish_at > new Date()
2022-07-20 00:33:06 +00:00
: false
2022-08-12 23:33:50 +00:00
const bannerImage = article && article.banner_alt_prefix
? article.banner_alt_prefix + '_large.avif'
2022-07-22 11:18:33 +00:00
: null
2022-08-12 23:33:50 +00:00
const mediaImage = article && article.media_alt_prefix
? article.media_alt_prefix + '_large.avif'
2022-07-22 11:18:33 +00:00
: null
2022-07-20 00:33:06 +00:00
return [
2022-08-12 23:33:50 +00:00
m('div.admin', [
!this.loading
? m(FileUpload, {
class: 'banner',
height: 150,
onfile: this.mediaUploaded.bind(this, 'banner'),
ondelete: this.mediaRemoved.bind(this, 'banner'),
media: bannerImage,
}, 'Click to upload banner image (only visible when featured)')
: null,
m('div.inside.vertical', [
m('div.actions', [
'« ',
m(m.route.Link, { href: '/admin/articles' }, 'Articles'),
article && article.id
? [
m('div.filler'),
m('span', 'Actions:'),
m(m.route.Link, { href: '/article/' + article.path }, 'View article'),
]
: null,
]),
m('h2.title', this.lastid === 'add' ? 'Create article' : 'Edit ' + (article && article.name || '(untitled)')),
m('div.container', [
m('div.error', {
hidden: !this.error,
onclick: function() { vnode.state.error = '' },
}, this.error),
this.loading
? m('div.loading-spinner')
: null,
article
? [
m(FileUpload, {
class: 'cover',
useimg: true,
onfile: this.mediaUploaded.bind(this, 'media'),
ondelete: this.mediaRemoved.bind(this, 'media'),
media: mediaImage,
}, 'Click to upload article image'),
m('form', {
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 === article.page_id
}, item.name)
})),
m('div.input-row', [
m('div.input-group', [
m('label', 'Name'),
m('input', {
type: 'text',
value: article.name,
oninput: this.updateValue.bind(this, 'name'),
}),
]),
m('div.input-group', [
m('label', 'Path'),
m('input', {
type: 'text',
value: article.path,
oninput: this.updateValue.bind(this, 'path'),
}),
]),
]),
m('label', 'Description'),
m(Editor, {
oncreate: (subnode) => {
this.editor = subnode.state.editor
},
contentdata: article.content,
}),
m('div.input-row', [
m('div', [
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: article.publish_at.toISOString().replace('T', ', ').split('.')[0],
}),
]),
m('div', [
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 === article.admin_id
}, item.name)
})
),
]),
m('div.slim', [
m('label', 'Make featured'),
m('input', {
type: 'checkbox',
checked: article.is_featured,
oninput: this.updateValue.bind(this, 'is_featured'),
}),
]),
]),
m('div.actions', {
hidden: !article.name || !article.path
}, [
m('input', {
type: 'submit',
value: article.id ? 'Save' : 'Create',
}),
showPublish
? m('button', {
onclick: () => {
this.dateInstance.inputElem.value = (new Date().toISOString()).replace('T', ', ').split('.')[0]
}
}, 'Publish now')
: null,
]),
]),
m('files', [
m('h5', 'Files'),
this.data.files.map((file) => {
return m(
Fileinfo,
{ file: file },
m('div.remove',
m('button', { onclick: () => this.askConfirmRemoveFile(vnode, file) }, 'remove')
)
)
}),
]),
article.id
? m('div.actions', [
m('button.fileupload', [
'Add file',
m('input', {
accept: '*',
type: 'file',
onchange: this.uploadFile.bind(this, vnode),
}),
])
])
: null,
]
: null,
]),
]),
]),
2022-07-20 00:33:06 +00:00
]
2019-09-13 13:33:10 +00:00
},
}
module.exports = EditArticle