nfp_sites/app/admin/editarticle.js

const m = require('mithril')

const Authentication = require('../authentication')
const FileUpload = require('../widgets/fileupload')
const Froala = require('./froala')
const { Tree } = require('../api/page')
const { uploadFile } = require('../api/file')
const Fileinfo = require('../widgets/fileinfo')
const { createArticle, updateArticle, getArticle } = require('../api/article')

const EditArticle = {
  getFroalaOptions: function() {
    return {
      theme: 'gray',
      heightMin: 150,
      videoUpload: false,
      imageUploadURL: '/api/media',
      imageManagerLoadURL: '/api/media',
      imageManagerDeleteMethod: 'DELETE',
      imageManagerDeleteURL: '/api/media',
      events: {
        'imageManager.beforeDeleteImage': function(img) {
          this.opts.imageManagerDeleteURL = '/api/media/' + img.data('id')
        },
      },
      requestHeaders: {
        'Authorization': 'Bearer ' + Authentication.getToken(),
      },
    }
  },

  oninit: function(vnode) {
    this.froala = null
    this.loadedFroala = Froala.loadedFroala

    if (!this.loadedFroala) {
      Froala.createFroalaScript()
      .then(function() {
        vnode.state.loadedFroala = true
        m.redraw()
      })
    }

    this.fetchArticle(vnode)
  },

  onupdate: function(vnode) {
    if (this.lastid !== m.route.param('id')) {
      this.fetchArticle(vnode)
    }
  },

  fetchArticle: function(vnode) {
    this.lastid = m.route.param('id')
    this.loading = this.lastid !== 'add'
    this.creating = this.lastid === 'add'
    this.loadingFile = false
    this.error = ''
    this.article = {
      name: '',
      path: '',
      description: '',
      media: null,
      banner: null,
      files: [],
    }
    this.editedPath = false
    this.froala = null
    this.loadedFroala = Froala.loadedFroala

    if (this.lastid !== 'add') {
      getArticle(this.lastid)
      .then(function(result) {
        vnode.state.editedPath = true
        vnode.state.article = result
      })
      .catch(function(err) {
        vnode.state.error = err.message
      })
      .then(function() {
        vnode.state.loading = false
        m.redraw()
      })
    }
  },

  updateValue: function(name, e) {
    this.article[name] = e.currentTarget.value
    if (name === 'path') {
      this.editedPath = true
    } else if (name === 'name' && !this.editedPath) {
      this.article.path = this.article.name.toLowerCase().replace(/ /g, '-')
    }
  },

  updateParent: function(e) {
    this.article.parent_id = Number(e.currentTarget.value)
    if (this.article.parent_id === -1) {
      this.article.parent_id = null
    }
  },

  mediaUploaded: function(type, media) {
    this.article[type] = media
  },

  mediaRemoved: function(type) {
    this.article[type] = null
  },

  save: function(vnode, e) {
    e.preventDefault()
    if (!this.article.name) {
      this.error = 'Name is missing'
    } else if (!this.article.path) {
      this.error = 'Path is missing'
    } else {
      this.error = ''
    }
    if (this.error) return

    this.article.description = vnode.state.froala && vnode.state.froala.html.get() || this.article.description

    this.loading = true

    let promise

    if (this.article.id) {
      promise = updateArticle(this.article.id, {
        name: this.article.name,
        path: this.article.path,
        parent_id: this.article.parent_id,
        description: this.article.description,
        banner_id: this.article.banner && this.article.banner.id,
        media_id: this.article.media && this.article.media.id,
      })
    } else {
      promise = createArticle({
        name: this.article.name,
        path: this.article.path,
        parent_id: this.article.parent_id,
        description: this.article.description,
        banner_id: this.article.banner && this.article.banner.id,
        media_id: this.article.media && this.article.media.id,
      })
    }

    promise.then(function(res) {
      if (vnode.state.article.id) {
        res.media = vnode.state.article.media
        res.banner = vnode.state.article.banner
        res.files = vnode.state.article.files
        vnode.state.article = res
      } else {
        m.route.set('/admin/articles/' + res.id)
      }
    })
    .catch(function(err) {
      vnode.state.error = err.message
    })
    .then(function() {
      vnode.state.loading = false
      m.redraw()
    })
  },

  uploadFile(vnode, event) {
    if (!event.target.files[0]) return
    vnode.state.error = ''
    vnode.state.loadingFile = true

    uploadFile(this.article.id, event.target.files[0])
    .then(function(res) {
      vnode.state.article.files.push(res)
    })
    .catch(function(err) {
      vnode.state.error = err.message
    })
    .then(function() {
      event.target.value = null
      vnode.state.loadingFile = false
      m.redraw()
    })
  },

  getFlatTree: function() {
    let out = [{id: null, name: '-- Frontpage --'}]
    Tree.forEach(function(page) {
      out.push({ id: page.id, name: page.name })
      if (page.children.length) {
        page.children.forEach(function(sub) {
          out.push({ id: sub.id, name: page.name + ' -> ' + sub.name })
        })
      }
    })
    return out
  },

  view: function(vnode) {
    const parents = this.getFlatTree()
    return (
      this.loading ?
        m('div.loading-spinner')
      : m('div.admin-wrapper', [
          m('div.admin-actions', this.article.id
            ? [
              m('span', 'Actions:'),
              m(m.route.Link, { href: '/article/' + this.article.path }, 'View article'),
            ]
            : null),
          m('article.editarticle', [
            m('header', m('h1', this.creating ? 'Create Article' : 'Edit ' + (this.article.name || '(untitled)'))),
            m('div.error', {
              hidden: !this.error,
              onclick: function() { vnode.state.error = '' },
            }, this.error),
            m(FileUpload, {
              onupload: this.mediaUploaded.bind(this, 'banner'),
              onerror: function(e) { vnode.state.error = e },
              ondelete: this.mediaRemoved.bind(this, 'banner'),
              media: this.article && this.article.banner,
            }),
            m(FileUpload, {
              class: 'cover',
              useimg: true,
              onupload: this.mediaUploaded.bind(this, 'media'),
              ondelete: this.mediaRemoved.bind(this, 'media'),
              onerror: function(e) { vnode.state.error = e },
              media: this.article && this.article.media,
            }),
            m('form.editarticle.content', {
              onsubmit: this.save.bind(this, vnode),
            }, [
              m('label', 'Parent'),
              m('select', {
                onchange: this.updateParent.bind(this),
              }, parents.map(function(item) { return m('option', { value: item.id || -1, selected: item.id === vnode.state.article.parent_id }, item.name) })),
              m('label', 'Name'),
              m('input', {
                type: 'text',
                value: this.article.name,
                oninput: this.updateValue.bind(this, 'name'),
              }),
              m('label', 'Description'),
              (
                this.loadedFroala ?
                  m('div', {
                    oncreate: function(div) {
                      vnode.state.froala = new FroalaEditor(div.dom, EditArticle.getFroalaOptions(), function() {
                        vnode.state.froala.html.set(vnode.state.article.description)
                      })
                    },
                  })
                  : null
              ),
              m('label', 'Path'),
              m('input', {
                type: 'text',
                value: this.article.path,
                oninput: this.updateValue.bind(this, 'path'),
              }),
              m('div.loading-spinner', { hidden: this.loadedFroala }),
              m('input', {
                type: 'submit',
                value: 'Save',
              }),
            ]),
            this.article.files.length
              ? m('files', [
                  m('h4', 'Files'),
                  this.article.files.map(function(item) { return m(Fileinfo, { file: item }) }),
                ])
              : null,
            this.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,
          ]),
        ])
    )
  },
}

module.exports = EditArticle