const FileUpload = require('./fileupload') const PageTree = require('../page_tree') const api = require('../api') const Editor = require('./editor') const AdminEditPage = { oninit: function(vnode) { this.loading = false this.showLoading = null this.data = { page: null, } this.pages = [{id: null, name: 'Frontpage'}] this.pages = this.pages.concat(PageTree.getFlatTree()) this.newBanner = null this.newMedia = null this.editor = null this.fetchPage(vnode) }, onbeforeupdate: function(vnode) { if (this.lastid !== m.route.param('id')) { this.fetchPage(vnode) } }, fetchPage: function(vnode) { this.lastid = m.route.param('id') return this.requestPage( api.sendRequest({ method: 'GET', url: '/api/auth/pages/' + (this.lastid === 'add' ? '0' : this.lastid), }) ) }, requestPage: function(data) { this.error = '' if (this.showLoading) { clearTimeout(this.showLoading) } if (this.data.page) { 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.page.id) { document.title = 'Editing: ' + this.data.page.name + ' - Admin NFP Moe' this.editedPath = true } else { document.title = 'Create Page - Admin NFP Moe' } }, (err) => { this.error = err.message }) .then(() => { if (!this.data.page) { this.data.page = {} } clearTimeout(this.showLoading) this.showLoading = null this.loading = false m.redraw() }) }, updateValue: function(name, e) { this.data.page[name] = e.currentTarget.value if (name === 'path') { this.editedPath = true } else if (name === 'name' && !this.editedPath) { this.data.page.path = this.data.page.name.toLowerCase().replace(/ /g, '-') } }, updateParent: function(e) { this.data.page.parent_id = Number(e.currentTarget.value) || null }, mediaUploaded: function(type, file) { if (type === 'banner') { this.newBanner = file } else { this.newMedia = file } }, mediaRemoved: function(type) { this.data.page['remove_' + type] = true this.data.page[type + '_prefix'] = null }, save: function(vnode, e) { e.preventDefault() if (!this.data.page.name) { this.error = 'Name is missing' } else if (!this.data.page.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.page.id) { formData.append('id', this.data.page.id) } formData.append('name', this.data.page.name) formData.append('parent_id', this.data.page.parent_id || null) formData.append('path', this.data.page.path) formData.append('remove_banner', this.data.page.remove_banner ? true : false) formData.append('remove_media', this.data.page.remove_media ? true : false) this.loading = true this.requestPage( this.editor.save() .then(body => { formData.append('content', JSON.stringify(body)) return api.sendRequest({ method: 'PUT', url: '/api/auth/pages/' + (this.lastid === 'add' ? '0' : this.lastid), body: formData, }) }) .then(data => { if (!data.page.id) { throw new Error('Something went wrong with saving, try again later') } else if (this.lastid === 'add') { this.lastid = data.page.id.toString() m.route.set('/admin/pages/' + data.page.id) } return PageTree.refreshTree().then(() => { this.pages = [{id: null, name: 'Frontpage'}] this.pages = this.pages.concat(PageTree.getFlatTree()) return data }) }) ) }, view: function(vnode) { let page = this.data.page let bannerImage = page && page.banner_alt_prefix ? page.banner_alt_prefix + '_large.avif' : null let mediaImage = page && page.media_alt_prefix ? page.media_alt_prefix + '_large.avif' : null return [ 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') : null, m('div.inside.vertical', [ m('div.actions', [ '« ', m(m.route.Link, { href: '/admin/pages' }, 'Pages'), page ? [ m('div.filler'), 'Actions:', m(m.route.Link, { href: '/page/' + page.path }, 'View page'), ] : null, ]), m('h2.title', this.lastid === 'add' ? 'Create page' : 'Edit ' + (page && page.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, page ? [ m(FileUpload, { class: 'cover', useimg: true, onfile: this.mediaUploaded.bind(this, 'media'), ondelete: this.mediaRemoved.bind(this, 'media'), media: mediaImage, }, 'Click to upload page image'), m('form', { onsubmit: this.save.bind(this, vnode), }, [ m('label', 'Parent'), m('select', { onchange: this.updateParent.bind(this), }, this.pages.filter(item => !page || item.id !== page.id).map((item) => { return m('option', { value: item.id || 0, selected: item.id === page.parent_id }, item.name) })), m('div.input-row', [ m('div', [ m('label', 'Name'), m('input', { type: 'text', value: page.name, oninput: this.updateValue.bind(this, 'name'), }), ]), m('div', [ m('label', 'Path'), m('input', { type: 'text', value: page.path, oninput: this.updateValue.bind(this, 'path'), }), ]), ]), m('label', 'Description'), m('div.content', m(Editor, { oncreate: (subnode) => { this.editor = subnode.state.editor }, contentdata: page.content, }) ), m('input', { hidden: !page.name || !page.path, type: 'submit', value: 'Save', }), ]) ] : null, ]), ]), ]), /* this.loading && !this.data.page ? m('div.admin-spinner.loading-spinner') : null, this.data.page ? m('div.admin-wrapper', [ this.loading ? m('div.loading-spinner') : null, m('div.admin-actions', this.data.page.id ? [ m('span', 'Actions:'), m(m.route.Link, { href: '/page/' + this.data.page.path }, 'View page'), ] : null), m('article.editarticle', [ m('header', m('h1', (this.data.page.id ? 'Edit ' : 'Create Page ') + (this.data.page.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.filter(item => !this.data.page || item.id !== this.data.page.id).map((item) => { return m('option', { value: item.id || 0, selected: item.id === this.data.page.parent_id }, item.name) })), m('div.input-row', [ m('div.input-group', [ m('label', 'Name'), m('input', { type: 'text', value: this.data.page.name, oninput: this.updateValue.bind(this, 'name'), }), ]), m('div.input-group', [ m('label', 'Path'), m('input', { type: 'text', value: this.data.page.path, oninput: this.updateValue.bind(this, 'path'), }), ]), ]), m('label', 'Description'), m(Editor, { oncreate: (subnode) => { this.editor = subnode.state.editor }, contentdata: this.data.page.content, }), m('div', { hidden: !this.data.page.name || !this.data.page.path }, [ m('input', { type: 'submit', value: 'Save', }), ]), ]), ]), ]) : m('div.error', { hidden: !this.error, onclick: () => { this.fetchPage(vnode) }, }, this.error),,*/ ] }, } module.exports = AdminEditPage