nfp_sites/app/admin/editarticle.js

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