Add dialogue when removing file. Fix some slight css issues

nfp_moe/api/article_routes.mjs

@@ -10,6 +10,9 @@ export default class ArticleRoutes extends Parent {
       server.authenticate(),
       server.formidable({ maxFileSize: 100 * 1024 * 1024, }),
     ], this.auth_addFileToArticle.bind(this))
+    server.flaska.delete('/api/auth/articles/:id/files/:fileId', [
+      server.authenticate(),
+    ], this.auth_removeFile.bind(this))
   }
 
   getArticle_resOutput(res) {
@@ -48,6 +51,7 @@ export default class ArticleRoutes extends Parent {
       }
     }
     let file = await this.uploadFile(ctx.req.files.file)
+    console.log(file)
 
     let params = [
       ctx.state.auth_token,
@@ -65,7 +69,7 @@ export default class ArticleRoutes extends Parent {
   }
 
   /** DELETE: /api/auth/articles/:id/files/:fileId */
-  async auth_addFileToArticle(ctx) {
+  async auth_removeFile(ctx) {
     let params = [
       ctx.state.auth_token,
       ctx.params.id,

nfp_moe/app/admin/site_editarticle.js

@@ -4,6 +4,7 @@ const PageTree = require('../page_tree')
 const Fileinfo = require('../fileinfo')
 const api = require('../api')
 const Editor = require('./editor')
+const Dialogue = require('./dialogue')
 
 const EditArticle = {
 
@@ -183,7 +184,7 @@ const EditArticle = {
     let formData = new FormData()
     formData.append('file', file)
 
-    return this.refreshFiles(api.sendRequest({
+    return this.refreshFiles(vnode, api.sendRequest({
       method: 'POST',
       url: '/api/auth/articles/' + this.lastid + '/files',
       body: formData,
@@ -207,25 +208,36 @@ const EditArticle = {
     })
   },
 
-  askConfirmRemoveFile: function(vnode, file) {
+  confirmRemoveFile: function(vnode, file) {
     console.log(file)
     /*Dialogue.showDialogue(
-      'Delete ' + page.name,
-      'Are you sure you want to remove "' + page.name + '" (' + page.path + ')',
-      'Remove',
+      'Delete file',
+      'Are you sure you want to remove "' + file.filename + '"',
+      'Delete',
       'alert',
-      'Don\'t remove',
+      'Don\'t delete',
       '',
       page,
       this.confirmRemovePage.bind(this, vnode))*/
   },
 
+  askConfirmRemoveFile: function(vnode, file) {
+    Dialogue.showDialogue(
+      'Delete file',
+      'Are you sure you want to remove "' + file.filename + '"',
+      'Delete',
+      'alert',
+      'Don\'t delete',
+      '',
+      file,
+      this.confirmRemoveFile.bind(this, vnode))
+  },
+
   view: function(vnode) {
     let article = this.data.article
     const showPublish = article
       ? article.publish_at > new Date()
       : false
-    console.log(!!article, article && article.publish_at > new Date(),'=', showPublish)
     const bannerImage = article && article.banner_alt_prefix
       ? article.banner_alt_prefix + '_large.avif'
       : null
@@ -396,162 +408,6 @@ const EditArticle = {
           ]),
         ]),
       ]),
-      /*
-      this.loading && !article
-        ? m('div.admin-spinner.loading-spinner')
-        : null,
-      article
-        ? m('div.admin-wrapper', [
-          this.loading
-            ? m('div.loading-spinner')
-            : null,
-          m('div.admin-actions', article.id
-            ? [
-              m('span', 'Actions:'),
-              m(m.route.Link, { href: '/article/' + article.path }, 'View article'),
-            ]
-            : null),
-          m('article.editarticle', [
-            m('header', m('h1',
-                (article.id ? 'Edit ' : 'Create Article ') + (article.name || '(untitled)')
-              )
-            ),
-            m('header', m('h1', this.creating ? 'Create Article' : 'Edit ' + (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 === article.page_id
-                  }, item.name)
-                })),
-              m('div.input-row', [
-                m('div.input-group', [
-                  m('label', 'Name'),
-                  m('input', {
-                    type: 'text',
-                    value: article.name,
-                    oninput: this.updateValue.bind(this, 'name'),
-                  }),
-                ]),
-                m('div.input-group', [
-                  m('label', 'Path'),
-                  m('input', {
-                    type: 'text',
-                    value: article.path,
-                    oninput: this.updateValue.bind(this, 'path'),
-                  }),
-                ]),
-              ]),
-              m('label', 'Description'),
-              m(Editor, {
-                oncreate: (subnode) => {
-                  this.editor = subnode.state.editor
-                },
-                contentdata: 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: 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 === article.admin_id
-                      }, item.name)
-                    })
-                  ),
-                ]),
-                m('div.input-group.small', [
-                  m('label', 'Make featured'),
-                  m('input', {
-                    type: 'checkbox',
-                    checked: article.is_featured,
-                    oninput: this.updateValue.bind(this, 'is_featured'),
-                  }),
-                ]),
-              ]),
-              m('div', {
-                hidden: !article.name || !article.path
-              }, [
-                m('input', {
-                  type: 'submit',
-                  value: 'Save',
-                }),
-                showPublish
-                  ? m('button.submit', {
-                      onclick: () => {
-                        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,
-            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),,*/
     ]
   },
 }

nfp_moe/package.json

@@ -50,20 +50,16 @@
   },
   "homepage": "https://github.com/nfp-projects/nfp_moe",
   "dependencies": {
-    "@editorjs/quote": "^2.4.0",
     "bencode": "^2.0.3",
     "dot": "^2.0.0-beta.1",
     "flaska": "^1.3.0",
-    "format-link-header": "^2.1.0",
     "formidable": "^1.2.6",
     "msnodesqlv8": "^2.4.7",
-    "nconf-lite": "^1.0.1",
-    "striptags": "^3.1.1"
+    "nconf-lite": "^1.0.1"
   },
   "devDependencies": {
     "asbundle": "^2.6.1",
     "mithril": "^2.2.2",
-    "sass": "^1.52.3",
     "service-core": "^3.0.0-beta.17"
   }
 }

nfp_moe/public/assets/admin.css

@@ -23,12 +23,13 @@
 }
 
 .admin .loading-spinner {
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background: #0002
+  background: #0002;
+  z-index: 4;
 }
 
 .admin .container .actions {