From a9ded55e2635fff20c5f8e4e2f0c09d853a2aa85 Mon Sep 17 00:00:00 2001 From: Yuri Kuznetsov Date: Fri, 12 Aug 2022 14:57:32 +0300 Subject: [PATCH] ref --- .../src/views/fields/attachment-multiple.js | 187 ++++++++++-------- client/src/views/fields/file.js | 124 ++++++------ 2 files changed, 172 insertions(+), 139 deletions(-) diff --git a/client/src/views/fields/attachment-multiple.js b/client/src/views/fields/attachment-multiple.js index 3fab48011d..152722bb30 100644 --- a/client/src/views/fields/attachment-multiple.js +++ b/client/src/views/fields/attachment-multiple.js @@ -283,9 +283,7 @@ function (Dep, FileUpload) { }, getDownloadUrl: function (id) { - id = Handlebars.Utils.escapeExpression(id); - - var url = this.getBasePath() + '?entryPoint=download&id=' + id; + let url = this.getBasePath() + '?entryPoint=download&id=' + id; if (this.getUser().get('portalId')) { url += '&portalId=' + this.getUser().get('portalId'); @@ -297,20 +295,24 @@ function (Dep, FileUpload) { removeId: function (id) { var arr = _.clone(this.model.get(this.idsName) || []); var i = arr.indexOf(id); + arr.splice(i, 1); + this.model.set(this.idsName, arr); var nameHash = _.clone(this.model.get(this.nameHashName) || {}); delete nameHash[id]; + this.model.set(this.nameHashName, nameHash); var typeHash = _.clone(this.model.get(this.typeHashName) || {}); delete typeHash[id]; + this.model.set(this.typeHashName, typeHash); }, clearIds: function (silent) { - var silent = silent || false; + silent = silent || false; this.model.set(this.idsName, [], {silent: silent}); this.model.set(this.nameHashName, {}, {silent: silent}); @@ -338,14 +340,11 @@ function (Dep, FileUpload) { }, getEditPreview: function (name, type, id) { - name = Handlebars.Utils.escapeExpression(name); - id = Handlebars.Utils.escapeExpression(id); - if (!~this.previewTypeList.indexOf(type)) { return name; } - let html = $('') + return $('') .attr('src', this.getImageUrl(id, 'small')) .attr('title', name) .attr('draggable', false) @@ -355,43 +354,54 @@ function (Dep, FileUpload) { }) .get(0) .outerHTML; - - return html; }, getBoxPreviewHtml: function (name, type, id) { - let preview = name; + let $text = $('').text(name); - if (this.showPreviews && id) { - preview = this.getEditPreview(name, type, id); - } else { - preview = Handlebars.Utils.escapeExpression(preview); + if (!id) { + return $text.get(0).outerHTML; } - if (preview === name && id) { - preview = '' + - name + ''; + if (this.showPreviews) { + let html = this.getEditPreview(name, type, id); + + if (!html) { + return $text.get(0).outerHTML; + } + + return html; } - return preview; + let url = this.getBasePath() + '?entryPoint=download&id=' + id; + + return $('') + .attr('href', url) + .attr('target', '_BLANK') + .text(name) + .get(0).outerHTML; }, addAttachmentBox: function (name, type, id) { - id = Handlebars.Utils.escapeExpression(id); - let $attachments = this.$attachments; - let removeLink = ''+ - ''; + let $remove = $('') + .attr('role', 'button') + .attr('tabindex', '0') + .addClass('remove-attachment pull-right') + .append( + $('').addClass('fas fa-times') + ); let previewHtml = this.getBoxPreviewHtml(name, type, id); let $att = $('
') .addClass('gray-box') - .append(removeLink) + .append($remove) .append( - $('' + previewHtml + '') + $('') + .addClass('preview') + .append(previewHtml) ); let $container = $('
').append($att); @@ -404,8 +414,9 @@ function (Dep, FileUpload) { return $att; } - let $loading = $('' + - this.translate('Uploading...') + ''); + let $loading = $('') + .addClass('small uploading-message') + .text(this.translate('Uploading...')); $container.append($loading); @@ -656,15 +667,18 @@ function (Dep, FileUpload) { return false; }, + /** + * @return {string} + */ getDetailPreview: function (name, type, id) { - name = Handlebars.Utils.escapeExpression(name); - id = Handlebars.Utils.escapeExpression(id); - if (!this.isTypeIsImage(type)) { - return name; + return $('') + .text(name) + .get(0) + .outerHTML; } - let html = $('') + return $('') .attr('data-action', 'showImagePreview') .attr('data-id', id) .attr('title', name) @@ -680,64 +694,75 @@ function (Dep, FileUpload) { ) .get(0) .outerHTML; - - return html; }, getValueForDisplay: function () { - if (this.mode === 'detail' || this.isListMode()) { - var nameHash = this.nameHash; + if (this.isDetailMode() || this.isListMode()) { + let nameHash = this.nameHash; + let typeHash = this.model.get(this.typeHashName) || {}; - var typeHash = this.model.get(this.typeHashName) || {}; + let previews = []; + let names = []; - var previews = []; - var names = []; - - for (var id in nameHash) { - var type = typeHash[id] || false; - var name = nameHash[id]; + for (let id in nameHash) { + let type = typeHash[id] || false; + let name = nameHash[id]; if ( - this.showPreviews - && - ~this.previewTypeList.indexOf(type) - && - (this.mode === 'detail' || this.mode === 'list' && this.showPreviewsInListMode) + this.showPreviews && + ~this.previewTypeList.indexOf(type) && + ( + this.isDetailMode() || + this.isListMode() && this.showPreviewsInListMode + ) ) { previews.push( - '
' + - this.getDetailPreview(name, type, id) + '
' + $('
') + .addClass('attachment-preview') + .append(this.getDetailPreview(name, type, id)) ); continue; } - var line = '
' + - ' ' + - '' + - Handlebars.Utils.escapeExpression(name) + '
'; - - names.push(line); + names.push( + $('
') + .addClass('attachment-block') + .append( + $('').addClass('fas fa-paperclip text-soft small'), + ' ', + $('') + .attr('href', this.getDownloadUrl(id)) + .attr('target', '_BLANK') + .text(name) + ) + ); } - let containerClassName = 'attachment-block-container'; + let containerClassName = null; if (this.previewSize === 'large') { - containerClassName += ' attachment-block-container-large'; + containerClassName = 'attachment-block-container-large'; } if (this.previewSize === 'small') { - containerClassName += ' attachment-block-container-small'; + containerClassName = 'attachment-block-container-small'; } if (names.length === 0 && previews.length === 0) { return ''; } - var string = '
' + previews.join('') + '
' + - names.join(''); + let $container = $('
') + .append( + $('
') + .addClass('attachment-block-container') + .addClass(containerClassName) + .append(previews) + ) + .append(names); - return string; + return $container.get(0).innerHTML; } }, @@ -771,17 +796,16 @@ function (Dep, FileUpload) { } } } - var boolFilterList = this.getMetadata().get( - ['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList'] - ); + + var boolFilterList = this.getMetadata() + .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'boolFilterList']); if (('getSelectBoolFilterList' + source) in this) { boolFilterList = this['getSelectBoolFilterList' + source](); } - var primaryFilterName = this.getMetadata().get( - ['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter'] - ); + var primaryFilterName = this.getMetadata() + .get(['clientDefs', 'Attachment', 'sourceDefs', source, 'primaryFilter']); if (('getSelectPrimaryFilterName' + source) in this) { primaryFilterName = this['getSelectPrimaryFilterName' + source](); @@ -804,17 +828,15 @@ function (Dep, FileUpload) { modelList = [modelList]; } - modelList.forEach((model) => { + modelList.forEach(model => { if (model.name === 'Attachment') { this.pushAttachment(model); return; } - this - .ajaxPostRequest(source + '/action/getAttachmentList', { - id: model.id, - }) + Espo.Ajax + .postRequest(source + '/action/getAttachmentList', {id: model.id}) .then(attachmentList => { attachmentList.forEach(item => { this.getModelFactory().create('Attachment', attachment => { @@ -827,8 +849,6 @@ function (Dep, FileUpload) { }); }); }); - - return; } }, @@ -869,28 +889,27 @@ function (Dep, FileUpload) { }, fetchSearch: function () { - var type = this.$el.find('select.search-type').val(); + let type = this.$el.find('select.search-type').val(); if (type === 'isEmpty') { - var data = { + return { type: 'isNotLinked', data: { type: type, }, }; - - return data; } - else if (type === 'isNotEmpty') { - var data = { + + if (type === 'isNotEmpty') { + return { type: 'isLinked', data: { type: type, }, }; - - return data; } + + return null; }, }); }); diff --git a/client/src/views/fields/file.js b/client/src/views/fields/file.js index f7460bb221..352b341adf 100644 --- a/client/src/views/fields/file.js +++ b/client/src/views/fields/file.js @@ -313,9 +313,10 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi this.$el.find('img.image-preview').css('maxWidth', width + 'px'); }, + /** + * @return {string} + */ getDetailPreview: function (name, type, id) { - name = Handlebars.Utils.escapeExpression(name); - if (!~this.previewTypeList.indexOf(type)) { return name; } @@ -330,8 +331,6 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi } } - id = Handlebars.Utils.escapeExpression(id); - let src = this.getBasePath() + '?entryPoint=image&size=' + previewSize + '&id=' + id; let maxHeight = (this.imageSizes[this.previewSize] || {})[1]; @@ -351,16 +350,14 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi if (this.mode === 'listLink') { let link = '#' + this.model.entityType + '/view/' + this.model.id; - let html = $('') + return $('') .attr('href', link) .append($img) .get(0) .outerHTML; - - return html; } - let html = $('') + return $('') .attr('data-action', 'showImagePreview') .attr('data-id', id) .attr('title', name) @@ -368,19 +365,14 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi .append($img) .get(0) .outerHTML; - - return html; }, getEditPreview: function (name, type, id) { - name = Handlebars.Utils.escapeExpression(name); - id = Handlebars.Utils.escapeExpression(id); - if (!~this.previewTypeList.indexOf(type)) { return null; } - let html = $('') + return $('') .attr('src', this.getImageUrl(id, 'small')) .attr('title', name) .attr('draggable', false) @@ -390,8 +382,6 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi }) .get(0) .outerHTML; - - return html; }, getValueForDisplay: function () { @@ -408,15 +398,18 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi } if (this.showPreview && ~this.previewTypeList.indexOf(type)) { - var classNamePart = ''; + let className = ''; if (this.isListMode() && this.params.listPreviewSize) { - classNamePart += ' no-shrink'; + className += 'no-shrink'; } - let item = '
' + - this.getDetailPreview(name, type, id) + - '
'; + let $item = $('
') + .addClass('attachment-preview') + .addClass(className) + .append( + this.getDetailPreview(name, type, id) + ); let containerClassName = 'attachment-block-container'; @@ -428,23 +421,30 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi containerClassName += ' attachment-block-container-small'; } - return '
' + - '
' + - item + - '
' + - '
'; + return $('
') + .addClass(containerClassName) + .append( + $('
') + .addClass('attachment-block') + .append($item) + ) + .get(0).outerHTML; } - return ' ' + - '' + - Handlebars.Utils.escapeExpression(name) + - ''; + return $('') + .append( + $('').addClass('fas fa-paperclip text-soft small'), + ' ', + $('') + .attr('href', this.getDownloadUrl(id)) + .attr('target', '_BLANK') + .text(name) + ) + .get(0).innerHTML; }, getImageUrl: function (id, size) { - id = Handlebars.Utils.escapeExpression(id); - - var url = this.getBasePath() + '?entryPoint=image&id=' + id; + let url = this.getBasePath() + '?entryPoint=image&id=' + id; if (size) { url += '&size=' + size; @@ -615,36 +615,50 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi }, getBoxPreviewHtml: function (name, type, id) { - let preview = name; + let $text = $('').text(name); - if (this.showPreview && id) { - preview = this.getEditPreview(name, type, id); - } else { - preview = Handlebars.Utils.escapeExpression(preview); + if (!id) { + return $text.get(0).outerHTML; } - if (preview === name && id) { - preview = '' + - name + ''; + if (this.showPreview) { + let html = this.getEditPreview(name, type, id); + + if (!html) { + return $text.get(0).outerHTML; + } + + return html; } - return preview; + let url = this.getBasePath() + '?entryPoint=download&id=' + id; + + return $('') + .attr('href', url) + .attr('target', '_BLANK') + .text(name) + .get(0).outerHTML; }, addAttachmentBox: function (name, type, id) { this.$attachment.empty(); - let removeLink = '' + - ''; + let $remove = $('') + .attr('role', 'button') + .attr('tabindex', '0') + .addClass('remove-attachment pull-right') + .append( + $('').addClass('fas fa-times') + ); let previewHtml = this.getBoxPreviewHtml(name, type, id); let $att = $('
') - .append(removeLink) + .append($remove) .append( - $('' + previewHtml + '') - .addClass('gray-box') + $('') + .addClass('preview gray-box') + .append(previewHtml) ); let $container = $('
').append($att); @@ -655,8 +669,9 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi return $att; } - let $loading = $('' + - this.translate('Uploading...') + ''); + let $loading = $('') + .addClass('small uploading-message') + .text(this.translate('Uploading...')); $container.append($loading); @@ -749,11 +764,10 @@ define('views/fields/file', ['views/fields/link', 'helpers/file-upload'], functi return; } - this.ajaxPostRequest(source + '/action/getAttachmentList', { - id: model.id, - }) - .then((attachmentList) => { - attachmentList.forEach((item) => { + Espo.Ajax + .postRequest(source + '/action/getAttachmentList', {id: model.id}) + .then(attachmentList => { + attachmentList.forEach(item => { this.getModelFactory().create('Attachment', (attachment) => { attachment.set(item);