nfp_sites/app/admin/editarticle.js

const Authentication = require('../authentication')
const FileUpload = require('../widgets/fileupload')
const Staff = require('../api/staff')
const Froala = require('./froala')
const Page = require('../api/page')
const File = require('../api/file')
const Fileinfo = require('../widgets/fileinfo')
const Article = require('../api/article')
const common = require('../api/common')

const EditArticle = {

  oninit: function(vnode) {
    this.editor = null
    
    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.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')
    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
    }

    return common.sendRequest({
      method: 'GET',
      url: '/api/auth/articles/' + this.lastid,
    })
    .then((result) => {
      console.log('result', 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()
    console.log(this.data)

    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)
    formData.append('name', this.data.article.name)
    formData.append('content', this.data.article.content)
    formData.append('is_featured', this.data.article.is_featured)
    formData.append('path', this.data.article.path)
    formData.append('page_id', this.data.article.page_id)
    formData.append('publish_at', this.data.article.publish_at)

    this.loading = true

    common.sendRequest({
      method: 'PUT',
      url: '/api/auth/articles/' + this.lastid,
      body: formData,
    })
    .then((result) => {
      console.log('result', result)
    }, (err) => {
      this.error = err.message
    })
    .then(() => {
      this.loading = false
      m.redraw()
    })
    /*e.preventDefault()
    if (!this.data.article.name) {
      this.error = 'Name is missing'
    } else if (!this.data.article.path) {
      this.error = 'Path is missing'
    } else {
      this.error = ''
    }
    if (this.error) return

    this.data.article.description = vnode.state.froala && vnode.state.froala.html.get() || this.data.article.description
    if (this.data.article.description) {
      this.data.article.description = this.data.article.description.replace(/<p[^>]+data-f-id="pbf"[^>]+>[^>]+>[^>]+>[^>]+>/, '')
    }

    this.loading = true

    let promise

    if (this.data.article.id) {
      promise = Article.updateArticle(this.data.article.id, {
        name: this.data.article.name,
        path: this.data.article.path,
        page_id: this.data.article.page_id,
        description: this.data.article.description,
        banner_id: this.data.article.banner && this.data.article.banner.id,
        media_id: this.data.article.media && this.data.article.media.id,
        publish_at: new Date(this.data.article.publish_at),
        is_featured: this.data.article.is_featured,
        staff_id: this.data.article.staff_id,
      })
    } else {
      promise = Article.createArticle({
        name: this.data.article.name,
        path: this.data.article.path,
        page_id: this.data.article.page_id,
        description: this.data.article.description,
        banner_id: this.data.article.banner && this.data.article.banner.id,
        media_id: this.data.article.media && this.data.article.media.id,
        publish_at: new Date(this.data.article.publish_at),
        is_featured: this.data.article.is_featured,
        staff_id: this.data.article.staff_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
        EditArticle.parsePublishedAt(vnode, null)
      } 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: function(vnode, e) {

  },

  view: function(vnode) {
    const showPublish = this.data.article
      ? this.data.article.publish_at > new Date()
      : false

    return [
      this.loading ?
        m('div.loading-spinner')
      : null,
      this.data.article
        ? m('div.admin-wrapper', [
          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: this.data.article && this.data.article.banner,
            }),
            m(FileUpload, {
              class: 'cover',
              useimg: true,
              onfile: this.mediaUploaded.bind(this, 'media'),
              ondelete: this.mediaRemoved.bind(this, 'media'),
              media: this.data.article && this.data.article.media,
            }),
            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('label', 'Name'),
              m('input', {
                type: 'text',
                value: this.data.article.name,
                oninput: this.updateValue.bind(this, 'name'),
              }),
              m('label.slim', 'Path'),
              m('input.slim', {
                type: 'text',
                value: this.data.article.path,
                oninput: this.updateValue.bind(this, 'path'),
              }),
              m('label', 'Description'),
              (
                this.loadedFroala ?
                  m('div', {
                    oncreate: (div) => {
                      console.log(div.dom)
                    },
                  })
                  : null
              ),
              m('label', 'Published at'),
              m('input', {
                type: 'datetime-local',
                value: this.data.article.publish_at,
                oninput: this.updateValue.bind(this, 'publish_at'),
              }),
              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('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,
          ]),
        ])
      : null,
    ]
  },
}

module.exports = EditArticle