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.addPageTree('', Page.Tree) this.newBanner = null this.newMedia = null this.dateInstance = null this.editor = null this.fetchArticle(vnode) }, addPageTree: function(prefix, branches) { branches.forEach((page) => { this.pages.push({ id: page.id, name: prefix + page.name }) if (page.children && page.children.length) { this.addPageTree(page.name + ' -> ', page.children) } }) }, onbeforeupdate: function(vnode) { if (this.lastid !== m.route.param('id')) { this.fetchArticle(vnode) } }, fetchArticle: function(vnode) { this.lastid = m.route.param('id') let id = this.lastid if (id === 'add') { id = '0' } this.error = '' return this.requestArticle( common.sendRequest({ method: 'GET', url: '/api/auth/articles/' + id, })) }, 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 if (this.data.article) { this.data.article.publish_at = new Date(this.data.article.publish_at) document.title = 'Editing: ' + this.data.article.name + ' - Admin NFP Moe' } 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[type] = null }, save: function(vnode, e) { e.preventDefault() let id = this.lastid if (id === 'add') { id = '0' } 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') 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/' + id, body: formData, }) }) ) }, 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.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.staff_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', [ 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