Added basic attachment editing functionality

resources/assets/js/controllers.js

@@ -536,6 +536,14 @@ module.exports = function (ngApp, events) {
             const pageId = $scope.uploadedTo = $attrs.pageId;
             let currentOrder = '';
             $scope.files = [];
+            $scope.editFile = false;
+            $scope.file = getCleanFile();
+
+            function getCleanFile() {
+                return {
+                    page_id: pageId
+                };
+            }
 
             // Angular-UI-Sort options
             $scope.sortOptions = {
@@ -559,15 +567,16 @@ module.exports = function (ngApp, events) {
                 currentOrder = newOrder;
                 $http.put(`/files/sort/page/${pageId}`, {files: $scope.files}).then(resp => {
                     events.emit('success', resp.data.message);
-                });
+                }, checkError);
             }
 
             /**
              * Used by dropzone to get the endpoint to upload to.
              * @returns {string}
              */
-            $scope.getUploadUrl = function () {
-                return window.baseUrl('/files/upload');
+            $scope.getUploadUrl = function (file) {
+                let suffix = (typeof file !== 'undefined') ? `/${file.id}` : '';
+                return window.baseUrl(`/files/upload${suffix}`);
             };
 
             /**
@@ -578,7 +587,7 @@ module.exports = function (ngApp, events) {
                 $http.get(url).then(resp => {
                     $scope.files = resp.data;
                     currentOrder = resp.data.map(file => {return file.id}).join(':');
-                });
+                }, checkError);
             }
             getFiles();
 
@@ -595,6 +604,24 @@ module.exports = function (ngApp, events) {
                 events.emit('success', 'File uploaded');
             };
 
+            /**
+             * Upload and overwrite an existing file.
+             * @param file
+             * @param data
+             */
+            $scope.uploadSuccessUpdate = function (file, data) {
+                $scope.$apply(() => {
+                    let search = filesIndexOf(data);
+                    if (search !== -1) $scope.files[search] = file;
+
+                    if ($scope.editFile) {
+                        $scope.editFile = data;
+                        data.link = '';
+                    }
+                });
+                events.emit('success', 'File updated');
+            };
+
             /**
              * Delete a file from the server and, on success, the local listing.
              * @param file
@@ -603,21 +630,77 @@ module.exports = function (ngApp, events) {
                   $http.delete(`/files/${file.id}`).then(resp => {
                       events.emit('success', resp.data.message);
                       $scope.files.splice($scope.files.indexOf(file), 1);
-                  });
+                  }, checkError);
             };
 
-            $scope.attachLinkSubmit = function(fileName, fileLink) {
-                $http.post('/files/link', {
-                    uploaded_to: pageId,
-                    name: fileName,
-                    link: fileLink
-                }).then(resp => {
+            /**
+             * Attach a link to a page.
+             * @param fileName
+             * @param fileLink
+             */
+            $scope.attachLinkSubmit = function(file) {
+                $http.post('/files/link', file).then(resp => {
                     $scope.files.unshift(resp.data);
                     events.emit('success', 'Link attached');
-                });
-                $scope.fileName = $scope.fileLink = '';
+                    $scope.file = getCleanFile();
+                }, checkError);
             };
 
+            /**
+             * Start the edit mode for a file.
+             * @param fileId
+             */
+            $scope.startEdit = function(file) {
+                $scope.editFile = angular.copy(file);
+                if (!file.external) $scope.editFile.link = '';
+            };
+
+            /**
+             * Cancel edit mode
+             */
+            $scope.cancelEdit = function() {
+                $scope.editFile = false;
+            };
+
+            /**
+             * Update the name and link of a file.
+             * @param file
+             */
+            $scope.updateFile = function(file) {
+                $http.put(`/files/${file.id}`, file).then(resp => {
+                    let search = filesIndexOf(resp.data);
+                    if (search !== -1) $scope.files[search] = file;
+
+                    if ($scope.editFile && !file.external) {
+                        $scope.editFile.link = '';
+                    }
+                    events.emit('success', 'Attachment details updated');
+                });
+            };
+
+            /**
+             * Search the local files via another file object.
+             * Used to search via object copies.
+             * @param file
+             * @returns int
+             */
+            function filesIndexOf(file) {
+                for (let i = 0; i < $scope.files.length; i++) {
+                    if ($scope.files[i].id == file.id) return file.id;
+                }
+                return -1;
+            }
+
+            /**
+             * Check for an error response in a ajax request.
+             * @param response
+             */
+            function checkError(response) {
+                if (typeof response.data !== 'undefined' && typeof response.data.error !== 'undefined') {
+                    events.emit('error', response.data.error);
+                }
+            }
+
         }]);
 
 };

resources/assets/js/directives.js

@@ -116,6 +116,7 @@ module.exports = function (ngApp, events) {
                 uploadedTo: '@'
             },
             link: function (scope, element, attrs) {
+                if (attrs.placeholder) element[0].querySelector('.dz-message').textContent = attrs.placeholder;
                 var dropZone = new DropZone(element[0].querySelector('.dropzone-container'), {
                     url: scope.uploadUrl,
                     init: function () {

resources/assets/sass/_pages.scss

@@ -228,21 +228,6 @@
     padding-top: $-s;
     position: relative;
   }
-  button.pos {
-    position: absolute;
-    bottom: 0;
-    display: block;
-    width: 100%;
-    padding: $-s;
-    height: 45px;
-    border: 0;
-    margin: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &:hover{
-      box-shadow: none;
-    }
-  }
   .handle {
     user-select: none;
     cursor: move;

resources/views/pages/form-toolbox.blade.php

@@ -4,7 +4,9 @@
     <div class="tabs primary-background-light">
         <span toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>
         <span tab-button="tags" title="Page Tags" class="active"><i class="zmdi zmdi-tag"></i></span>
-        <span tab-button="files" title="Attachments"><i class="zmdi zmdi-attachment"></i></span>
+        @if(userCan('file-create-all'))
+            <span tab-button="files" title="Attachments"><i class="zmdi zmdi-attachment"></i></span>
+        @endif
     </div>
 
     <div tab-content="tags" ng-controller="PageTagController" page-id="{{ $page->id or 0 }}">
@@ -35,35 +37,60 @@
         </div>
     </div>
 
-    <div tab-content="files" ng-controller="PageAttachmentController" page-id="{{ $page->id or 0 }}">
-        <h4>Attached Files</h4>
-        <div class="padded files">
-            <p class="muted small">Upload some files to display on your page. This are visible in the page sidebar.</p>
-            <drop-zone upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
+    @if(userCan('file-create-all'))
+        <div tab-content="files" ng-controller="PageAttachmentController" page-id="{{ $page->id or 0 }}">
+            <h4>Attached Files</h4>
+            <div class="padded files">
 
-            <hr class="even">
+                <div id="file-list" ng-show="!editFile">
+                    <p class="muted small">Upload some files to display on your page. This are visible in the page sidebar.</p>
+                    <drop-zone upload-url="@{{getUploadUrl()}}" uploaded-to="@{{uploadedTo}}" event-success="uploadSuccess"></drop-zone>
+
+                    <hr class="even">
+
+                    <div class="form-group">
+                        <label for="attachment-via-link">File Name</label>
+                        <input type="text" placeholder="File name" ng-model="file.name">
+                    </div>
+                    <div class="form-group">
+                        <label for="attachment-via-link">Link to file</label>
+                        <input type="text" placeholder="File url" ng-model="file.link">
+                    </div>
+                    <button type="button" ng-click="attachLinkSubmit(file)" class="button pos">Attach</button>
+
+
+                    <table class="no-style" tag-autosuggestions style="width: 100%;">
+                        <tbody ui-sortable="sortOptions" ng-model="files" >
+                        <tr ng-repeat="file in files track by $index">
+                            <td width="20" ><i class="handle zmdi zmdi-menu"></i></td>
+                            <td ng-bind="file.name"></td>
+                            <td width="10" ng-click="deleteFile(file)" class="text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></i></td>
+                            <td width="10" ng-click="startEdit(file)" class="text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-edit"></i></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div id="file-edit" ng-if="editFile">
+                    <h5>Edit File</h5>
+                    <div class="form-group">
+                        <label for="attachment-name-edit">File Name</label>
+                        <input type="text" id="attachment-name-edit" placeholder="File name" ng-model="editFile.name">
+                    </div>
+                    <hr class="even">
+                    <drop-zone upload-url="@{{getUploadUrl(editFile)}}" uploaded-to="@{{uploadedTo}}" placeholder="Drop files or click here to upload and overwrite" event-success="uploadSuccessUpdate"></drop-zone>
+                    <hr class="even">
+                    <div class="form-group">
+                        <label for="attachment-link-edit">Link to file</label>
+                        <input type="text" id="attachment-link-edit" placeholder="File url" ng-model="editFile.link">
+                    </div>
+
+                    <button type="button" class="button" ng-click="cancelEdit()">Back</button>
+                    <button type="button" class="button pos" ng-click="updateFile(editFile)">Save</button>
+                </div>
 
-            <div class="form-group">
-                <label for="attachment-via-link">File Name</label>
-                <input type="text" placeholder="File name" ng-model="fileName">
             </div>
-            <div class="form-group">
-                <label for="attachment-via-link">Link to file</label>
-                <input type="text" placeholder="File url" ng-model="fileLink">
-            </div>
-            <button type="button" ng-click="attachLinkSubmit(fileName, fileLink)" class="button pos">Attach</button>
-
-
-            <table class="no-style" tag-autosuggestions style="width: 100%;">
-                <tbody ui-sortable="sortOptions" ng-model="files" >
-                <tr ng-repeat="file in files track by $index">
-                    <td width="20" ><i class="handle zmdi zmdi-menu"></i></td>
-                    <td ng-bind="file.name"></td>
-                    <td width="10" ng-click="deleteFile(file)" class="text-center text-neg" style="padding: 0;"><i class="zmdi zmdi-close"></i></td>
-                </tr>
-                </tbody>
-            </table>
         </div>
-    </div>
+    @endif
 
 </div>