@reldens/cms 0.58.0 → 0.59.0

package/admin/reldens-admin-client.css

@@ -832,6 +832,8 @@
     .extra-content-container, .default-room-container {
         display: flex;
         flex-direction: column;
+        width: 100%;
+        box-sizing: border-box;
         padding: 1rem 0;
         margin-top: 1rem;
         text-align: left;

package/admin/reldens-admin-client.js

@@ -212,7 +212,7 @@ window.addEventListener('DOMContentLoaded', () => {
                 }
                 let allFilters = document.querySelectorAll('.filters-toggle-content .filter input');
                 for(let filterInput of allFilters){
-                    let filterName = filterInput.name.replace('filters[', '').replace(']', '');
+                    let filterName = filterInput.name.replace(/^filters\[/, '').replace(/\]$/, '');
                     let sortFormFilterInput = sortForm.querySelector('input[data-filter-key="'+filterName+'"]');
                     if(sortFormFilterInput){
                         sortFormFilterInput.value = filterInput.value;
@@ -339,26 +339,60 @@ window.addEventListener('DOMContentLoaded', () => {
             button.addEventListener('click', (event) => {
                 event.preventDefault();
                 let fieldName = button.getAttribute('data-field');
+                let fileName = button.getAttribute('data-filename');
                 let fileInput = document.getElementById(fieldName);
-                let currentFileDisplay = document.querySelector('.upload-current-file[data-field="'+fieldName+'"]');
+                let form = fileInput?.closest('form');
+                if(!fileInput){
+                    return;
+                }
+                if(!form){
+                    return;
+                }
+                let currentFileDisplay = button.closest('.upload-current-file');
+                let container = button.closest('.upload-files-container');
+                let isRequired = container && 'true' === container.dataset.required;
+                if(isRequired){
+                    let remainingFiles = container.querySelectorAll('.upload-current-file');
+                    if(2 === remainingFiles.length){
+                        let allRemoveButtons = container.querySelectorAll('.remove-upload-btn');
+                        for(let removeBtn of allRemoveButtons){
+                            removeBtn.remove();
+                        }
+                    }
+                }
                 if(currentFileDisplay){
-                    currentFileDisplay.style.display = 'none';
+                    currentFileDisplay.remove();
                 }
-                if(fileInput){
-                    fileInput.value = '';
-                    let form = fileInput.closest('form');
-                    if(form){
-                        let clearFieldName = 'clear_'+fieldName;
-                        let existingClearInput = form.querySelector('input[name="'+clearFieldName+'"]');
-                        if(!existingClearInput){
-                            let clearInput = document.createElement('input');
-                            clearInput.type = 'hidden';
-                            clearInput.name = clearFieldName;
-                            clearInput.value = '1';
-                            form.appendChild(clearInput);
+                if(fileName){
+                    let hiddenFieldName = 'removed_'+fieldName;
+                    let existingHiddenInput = form.querySelector('input[name="'+hiddenFieldName+'"]');
+                    if(existingHiddenInput){
+                        let currentValue = existingHiddenInput.value;
+                        let filesArray = currentValue ? currentValue.split(',') : [];
+                        if(-1 === filesArray.indexOf(fileName)){
+                            filesArray.push(fileName);
                         }
+                        existingHiddenInput.value = filesArray.join(',');
+                        return;
                     }
+                    let hiddenInput = document.createElement('input');
+                    hiddenInput.type = 'hidden';
+                    hiddenInput.name = hiddenFieldName;
+                    hiddenInput.value = fileName;
+                    form.appendChild(hiddenInput);
+                    return;
+                }
+                fileInput.value = '';
+                let clearFieldName = 'clear_'+fieldName;
+                let existingClearInput = form.querySelector('input[name="'+clearFieldName+'"]');
+                if(existingClearInput){
+                    return;
                 }
+                let clearInput = document.createElement('input');
+                clearInput.type = 'hidden';
+                clearInput.name = clearFieldName;
+                clearInput.value = '1';
+                form.appendChild(clearInput);
             });
         }
     }

package/admin/templates/fields/edit/file.html

@@ -1,2 +1,17 @@
-{{#fieldValue}}<p class="upload-current-file" data-field="{{&fieldName}}"><button type="button" class="remove-upload-btn" data-field="{{&fieldName}}" title="REMOVE">X</button> - {{&fieldValue}}</p>{{/fieldValue}}
+{{{renderedAlert}}}
+{{{renderedFiles}}}
+{{#fieldValue}}
+    {{^renderedFiles}}
+        <div class="upload-files-container" data-field="{{&fieldName}}" data-required="{{isRequired}}">
+            {{#filesArray}}
+                <p class="upload-current-file" data-field="{{&fieldName}}" data-filename="{{&filename}}">
+                    {{#isRemovable}}
+                        <button type="button" class="remove-upload-btn" data-field="{{&fieldName}}" data-filename="{{&filename}}" title="REMOVE">X</button> -
+                    {{/isRemovable}}
+                    {{&filename}}
+                </p>
+            {{/filesArray}}
+        </div>
+    {{/renderedFiles}}
+{{/fieldValue}}
 <input type="file" name="{{&fieldName}}" id="{{&fieldName}}"{{&required}}{{&fieldDisabled}}{{&multiple}}/>

package/admin/templates/view.html

@@ -12,7 +12,7 @@
         </form>
     </div>
     <div class="extra-actions">
-        {{&extraContent}}
+        {{&extraContentTop}}
     </div>
     {{#fields}}
     <div class="view-field">
@@ -32,7 +32,7 @@
             </span>
         </form>
         <div class="extra-actions">
-            {{&extraContent}}
+            {{&extraContentBottom}}
         </div>
     </div>
 </div>

package/lib/admin-manager/contents-builder.js

@@ -185,7 +185,8 @@ class ContentsBuilder
                         id: '{{&id}}',
                         entityEditRoute: '{{&entityEditRoute}}',
                         entityNewRoute: '{{&entityNewRoute}}',
-                        extraContent: '{{&extraContentForView}}'+extraContentForView,
+                        extraContentTop: '{{&extraContentForViewTop}}',
+                        extraContentBottom: '{{&extraContentForViewBottom}}'+extraContentForView,
                         extraFormContent: '{{&extraFormContentForView}}'+extraFormContentForView
                     }
                 ),

package/lib/admin-manager/router-contents.js

@@ -197,6 +197,8 @@ class RouterContents
         await this.emitEvent('adminEntityExtraData', extraDataEvent);
         renderedViewProperties.entitySerializedData = JSON.stringify(extraDataEvent.entitySerializedData)
             .replace(/"/g, '"');
+        renderedViewProperties.extraContentForViewTop = '';
+        renderedViewProperties.extraContentForViewBottom = '';
         await this.emitEvent('reldens.adminViewPropertiesPopulation', {
             idProperty,
             req,
@@ -228,26 +230,53 @@ class RouterContents
             req,
             driverResource,
             renderedEditProperties,
-            loadedEntity
+            loadedEntity,
+            entityId: driverResource.id(),
+            entityData: loadedEntity
         });
         for(let propertyKey of Object.keys(driverResource.options.properties)){
             let property = driverResource.options.properties[propertyKey];
             let fieldDisabled = -1 === driverResource.options.editProperties.indexOf(propertyKey);
+            let fieldValue = await this.generatePropertyEditRenderedValue(
+                loadedEntity,
+                propertyKey,
+                property,
+                fieldDisabled
+            );
+            let templateData = {
+                fieldName: propertyKey,
+                fieldValue,
+                fieldDisabled: fieldDisabled ? ' disabled="disabled"' : '',
+                required: (!property.isUpload || !loadedEntity) && property.isRequired ? ' required="required"' : '',
+                multiple: property.isArray ? ' multiple="multiple"' : '',
+                inputType: this.getInputType(property, propertyKey, fieldDisabled),
+                isArray: property.isArray || '',
+                arraySeparator: property.isArray || '',
+                isRequired: property.isRequired || false
+            };
+            if(property.isUpload && fieldValue && '' !== fieldValue){
+                let filesArray = property.isArray ? fieldValue.split(property.isArray) : [fieldValue];
+                templateData.filesArray = filesArray.map((filename) => {
+                    return {
+                        filename,
+                        isRemovable: !property.isRequired || filesArray.length > 1
+                    };
+                });
+            }
+            await this.emitEvent('reldens.adminBeforeFieldRender', {
+                req,
+                driverResource,
+                propertyKey,
+                property,
+                templateData,
+                loadedEntity,
+                renderedEditProperties,
+                adminContentsRender: this.adminContentsRender.bind(this),
+                adminFilesContents: this.adminFilesContents
+            });
             renderedEditProperties[propertyKey] = await this.adminContentsRender(
                 this.adminFilesContents.fields.edit[this.propertyType(property, 'edit')],
-                {
-                    fieldName: propertyKey,
-                    fieldValue: await this.generatePropertyEditRenderedValue(
-                        loadedEntity,
-                        propertyKey,
-                        property,
-                        fieldDisabled
-                    ),
-                    fieldDisabled: fieldDisabled ? ' disabled="disabled"' : '',
-                    required: (!property.isUpload || !loadedEntity) && property.isRequired ? ' required="required"' : '',
-                    multiple: property.isArray ? ' multiple="multiple"' : '',
-                    inputType: this.getInputType(property, propertyKey, fieldDisabled)
-                }
+                templateData
             );
         }
         return await this.adminContentsRenderRoute(
@@ -282,6 +311,10 @@ class RouterContents
 
     async processSaveEntity(req, res, driverResource, entityPath)
     {
+        let idProperty = this.fetchEntityIdPropertyKey(driverResource);
+        let id = (req?.body[idProperty] || '');
+        let entityRepository = this.dataServer.getEntity(driverResource.entityKey);
+        let loadedEntity = id ? await this.loadEntityById(driverResource, id) : null;
         let uploadProperties = this.fetchUploadProperties(driverResource);
         if(0 < Object.keys(uploadProperties).length){
             if(this.uploaderFactory?.error?.message){
@@ -289,22 +322,20 @@ class RouterContents
                 return this.rootPath+'/'+entityPath+'?result=uploadError&error='
                     +encodeURIComponent(this.uploaderFactory.error.message);
             }
-            let uploadValidationResult = this.validateUploadedFiles(req, uploadProperties);
+            let uploadValidationResult = this.validateUploadedFiles(req, uploadProperties, loadedEntity);
             if(!uploadValidationResult.success){
                 Logger.error('Upload validation failed', uploadValidationResult.error);
                 return this.rootPath+'/'+entityPath+'?result=uploadValidationError&error='
                     +encodeURIComponent(uploadValidationResult.error.message);
             }
         }
-        let idProperty = this.fetchEntityIdPropertyKey(driverResource);
-        let id = (req?.body[idProperty] || '');
-        let entityRepository = this.dataServer.getEntity(driverResource.entityKey);
         let entityDataPatch = this.preparePatchData(
             driverResource,
             idProperty,
             req,
             driverResource.options.properties,
-            id
+            id,
+            loadedEntity
         );
         if(!entityDataPatch){
             Logger.error('Bad patch data.', entityDataPatch);
@@ -351,14 +382,21 @@ class RouterContents
         }
     }
 
-    validateUploadedFiles(req, uploadProperties)
+    validateUploadedFiles(req, uploadProperties, loadedEntity)
     {
         for(let uploadPropertyKey of Object.keys(uploadProperties)){
             let property = uploadProperties[uploadPropertyKey];
             let uploadedFiles = req.files?.[uploadPropertyKey];
             if(!uploadedFiles || 0 === uploadedFiles.length){
                 if(property.isRequired){
-                    return {success: false, error: {message: 'Required file upload missing: '+uploadPropertyKey}};
+                    let isExplicitClear = '1' === sc.get(req.body, 'clear_'+uploadPropertyKey, false);
+                    if(isExplicitClear){
+                        return {success: false, error: {message: 'Required file upload missing: '+uploadPropertyKey}};
+                    }
+                    let existingValue = loadedEntity ? sc.get(loadedEntity, uploadPropertyKey, '') : '';
+                    if(!existingValue || '' === existingValue){
+                        return {success: false, error: {message: 'Required file upload missing: '+uploadPropertyKey}};
+                    }
                 }
                 continue;
             }
@@ -484,7 +522,7 @@ class RouterContents
         }
     }
 
-    preparePatchData(driverResource, idProperty, req, resourceProperties, id)
+    preparePatchData(driverResource, idProperty, req, resourceProperties, id, loadedEntity)
     {
         let entityDataPatch = {};
         for(let i of Object.keys(resourceProperties)){
@@ -512,7 +550,8 @@ class RouterContents
                     propertyUpdateValue = null;
                 }
                 if(!isExplicitClear){
-                    propertyUpdateValue = this.prepareUploadPatchData(req, i, propertyUpdateValue, property);
+                    let currentValue = loadedEntity ? sc.get(loadedEntity, i, '') : '';
+                    propertyUpdateValue = this.prepareUploadPatchData(req, i, currentValue, property);
                 }
             }
             if('boolean' === propertyType){
@@ -539,7 +578,6 @@ class RouterContents
             }
             let isUploadCreate = property.isUpload && !id;
             if(property.isRequired && (isNull || isEmpty) && (!property.isUpload || isUploadCreate)){
-                // missing required fields would break the update:
                 Logger.critical(
                     'Missing property on prepare patch data.',
                     {propertyKey: i, config: property, propertyUpdateValue, entity: driverResource.entityKey}
@@ -562,14 +600,32 @@ class RouterContents
     prepareUploadPatchData(req, i, propertyUpdateValue, property)
     {
         let filesData = sc.get(req.files, i, null);
-        if(null === filesData){
+        let removedFiles = sc.get(req.body, 'removed_'+i, '');
+        let existingFiles = propertyUpdateValue || '';
+        if(property.isArray && removedFiles && '' !== removedFiles){
+            let removedFilesArray = removedFiles.split(',');
+            let existingFilesArray = existingFiles ? existingFiles.split(property.isArray) : [];
+            existingFilesArray = existingFilesArray.filter(file => {
+                return -1 === removedFilesArray.indexOf(file);
+            });
+            existingFiles = existingFilesArray.join(property.isArray);
+        }
+        if(!filesData || 0 === filesData.length){
+            if(removedFiles && '' !== removedFiles){
+                return existingFiles;
+            }
             return null;
         }
-        let fileNames = [];
+        let newFileNames = [];
         for(let file of filesData){
-            fileNames.push(file.filename);
+            newFileNames.push(file.filename);
+        }
+        if(property.isArray && existingFiles && '' !== existingFiles){
+            let existingFilesArray = existingFiles.split(property.isArray);
+            let allFiles = existingFilesArray.concat(newFileNames);
+            return allFiles.join(property.isArray);
         }
-        return fileNames.join(property.isArray);
+        return newFileNames.join(property.isArray);
     }
 
     async generatePropertyRenderedValue(fieldValue, fieldName, resourceProperty, templateType)

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@reldens/cms",
     "scope": "@reldens",
-    "version": "0.58.0",
+    "version": "0.59.0",
     "description": "Reldens - CMS",
     "author": "Damian A. Pastorini",
     "license": "MIT",
@@ -37,7 +37,7 @@
         "@reldens/server-utils": "^0.46.0",
         "@reldens/storage": "^0.91.0",
         "@reldens/utils": "^0.54.0",
-        "dotenv": "17.2.4",
+        "dotenv": "17.3.1",
         "mustache": "4.2.0"
     }
 }