@concretecms/bedrock 1.1.5 → 1.1.7

package/assets/cms/components/file-manager/Chooser/ExternalFileProvider.vue

@@ -31,6 +31,7 @@
     </div>
     <div>
       <files v-if="keywords"
+             :key-prefix="'external-file-provider' + id"
              :selectedFiles.sync="selectedFiles"
              :resultsFormFactor="formFactor"
              :routePath="routePath + id + '/search/' + keywords"

package/assets/cms/components/file-manager/Chooser/FileManager.vue

@@ -1,11 +1,14 @@
 <template>
     <div>
         <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
                         :breadcrumb-items="breadcrumbItems"
+                        :enable-search="searchChooserIsEnabled"
                         @breadcrumbItemClick="activeFolder = $event.folderId"
                         :title="title"/>
 
         <files :selectedFiles.sync="selectedFiles"
+               key-prefix="file-manager"
                :resultsFormFactor="formFactor"
                :routePath="routePath + activeFolder"
                :enable-pagination="true"
@@ -32,9 +35,15 @@ export default {
         selectedFiles: [],
         breadcrumbItems: [],
         routePath: '/ccm/system/file/chooser/get_folder_files/',
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
+        searchChooserIsEnabled: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
         resultsFormFactor: {
             type: String,
             required: false,
@@ -59,7 +68,7 @@ export default {
     },
     created() {
         this.activeFolder = this.$props.startFolder
-        this.fetchBreadcrumb(this.activeFolder)
+        // this.fetchBreadcrumb(this.activeFolder) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
     },
     methods: {
         fetchBreadcrumb(folderId = '') {
@@ -81,15 +90,19 @@ export default {
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
         },
+        searchQuery(value) {
+            this.$emit('update:resultsSearchQuery', value)
+        },
         startFolder(value) {
             this.activeFolder = value
-            this.fetchBreadcrumb(value)
+            // this.fetchBreadcrumb(value) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
         }
     },
     mounted() {
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
         this.activeFolder = this.$props.startFolder
-        this.fetchBreadcrumb(this.activeFolder)
+        // this.fetchBreadcrumb(this.activeFolder) // Not sure why this is here, it leads to duplicate requests and I don't think it needs to be
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/FileSets.vue

@@ -17,6 +17,7 @@
         </div>
         <div class="mt-3" v-show="activeSet">
             <files v-if="activeSet"
+                   key-prefix="file-sets"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :routePath="routePath + activeSet"

package/assets/cms/components/file-manager/Chooser/Files.vue

@@ -3,10 +3,10 @@
         <svg v-if="isLoading" class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg>
         <div v-if="!isLoading">
             <div class="ccm-image-cell-grid container-fluid ps-0" v-if="resultsFormFactor === 'grid'">
-                <div v-for="row in rows" class="row text-center" :key="row.index">
-                    <div class="col-md-3" v-for="file in row" :key="(file.fID || file.treeNodeID) + 'grid'">
+                <div v-for="(row, index) in rows" class="row text-center" :key="keyPrefix + '-' + index">
+                    <div class="col-md-3" v-for="file in row" :key="keyPrefix + '-' + (file.fID || file.treeNodeID) + '-grid'">
                         <div class="ccm-image-cell" @click="onItemClick(file)">
-                            <label class="form-label" :for="'file-' + (file.fID || file.treeNodeID)"><span v-html="file.resultsThumbnailImg"></span></label>
+                            <label class="form-label" :data-bs-content="getGridHoverContent(file)" :for="'file-' + (file.fID || file.treeNodeID)"><span v-html="file.resultsThumbnailImg"></span></label>
                             <div class="ccm-image-cell-title pt-1">
                                 <div class="form-check form-check-inline">
                                     <input :disabled="!canChooseFile(file)" class="form-check-input" type="checkbox" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
@@ -19,7 +19,7 @@
                 </div>
             </div>
             <div v-if="resultsFormFactor === 'list'">
-                <table class="table ccm-image-chooser-list-view ccm-search-results-table">
+                <table class="table align-middle ccm-image-chooser-list-view ccm-search-results-table">
                     <thead>
                     <tr>
                         <th></th>
@@ -33,18 +33,24 @@
                             <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">{{ i18n.uploaded }}</a>
                             <span v-else>{{ i18n.uploaded }}</span>
                         </th>
+                        <th>{{ i18n.size }}</th>
+                        <th>{{ i18n.width }}</th>
+                        <th>{{ i18n.height }}</th>
                     </tr>
                     </thead>
                     <tbody>
-                        <tr v-for="file in fileList" :key="(file.fID || file.treeNodeID) + 'list'" @click="onItemClick(file)">
+                        <tr v-for="file in fileList" :key="keyPrefix + '-' + (file.fID || file.treeNodeID) + '-list'" @click="onItemClick(file)">
                             <td>
                                 <input type="checkbox" :disabled="!canChooseFile(file)" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
                                 <input type="radio" :disabled="!canChooseFile(file)" v-if="!multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
                             </td>
-                            <td class="ccm-image-chooser-icon"><span v-html="file.resultsThumbnailImg" width="32" height="32"></span></td>
+                            <td class="ccm-image-chooser-icon"><div :data-bs-content="getListHoverContent(file)"><span v-html="file.resultsThumbnailImg" width="32" height="32"></span></div></td>
                             <td>{{file.fID}}</td>
                             <td>{{file.title}}</td>
                             <td>{{file.fvDateAdded}}</td>
+                            <td>{{file.size}}</td>
+                            <td>{{file.attributes ? file.attributes.width : ''}}</td>
+                            <td>{{file.attributes ? file.attributes.height : ''}}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -71,7 +77,7 @@
 }
 </style>
 <script>
-/* global CCM_DISPATCHER_FILENAME, ConcreteAjaxRequest */
+/* global CCM_DISPATCHER_FILENAME, bootstrap, ConcreteAjaxRequest */
 /* eslint-disable no-new */
 import Pagination from '../../Pagination'
 
@@ -83,7 +89,10 @@ export default {
         i18n: {
             id: 'ID',
             name: 'Name',
-            uploaded: 'Uploaded'
+            uploaded: 'Uploaded',
+            size: 'Size',
+            width: 'Width',
+            height: 'Height'
         },
         currentPage: 1,
         rows: false,
@@ -103,6 +112,11 @@ export default {
         filters: {
             type: Array
         },
+        keyPrefix: {
+            type: String,
+            required: false,
+            default: ''
+        },
         enableSort: {
             type: Boolean,
             required: false,
@@ -174,6 +188,40 @@ export default {
         }
     },
     methods: {
+        getGridHoverContent(file) {
+            if (!file.isFolder) {
+                var title = ''
+                if (file.resultsThumbnailDetailImg) {
+                    title += '<div>' + file.resultsThumbnailDetailImg + '</div>'
+                }
+                title += '<div class="text-center"><b>' + file.size + '</b></div>'
+                if (file.attributes && file.attributes.width && file.attributes.height) {
+                    title += '<div class="text-center text-muted"><small>' + file.attributes.width + 'x' + file.attributes.height + '</small></div>'
+                }
+                return title
+            }
+        },
+        getListHoverContent(file) {
+            if (!file.isFolder) {
+                if (file.resultsThumbnailDetailImg) {
+                    return '<div>' + file.resultsThumbnailDetailImg + '</div>'
+                }
+            }
+        },
+        setupHoverPreview() {
+            var $cells = $(this.$el).find('[data-bs-content]')
+            $cells.each(function(i) {
+                return new bootstrap.Popover($cells.get(i), {
+                    container: '#ccm-tooltip-holder',
+                    customClass: 'ccm-image-chooser-popover',
+                    placement: 'bottom',
+                    delay: 500,
+                    trigger: 'hover',
+                    fallbackPlacements: ['top'],
+                    html: true
+                })
+            })
+        },
         canChooseFile(file) {
             var canChooseFile = -1
             if (this.filters) {
@@ -284,6 +332,17 @@ export default {
         }
     },
     watch: {
+        resultsFormFactor(value) {
+            var my = this
+            setTimeout(function() {
+                my.setupHoverPreview()
+            }, 5)
+        },
+        viewIsLoading(value) {
+            if (!value) {
+                this.setupHoverPreview()
+            }
+        },
         selectedFiles(value) {
             this.$emit('update:selectedFiles', Array.isArray(value) ? value : [value])
         },

package/assets/cms/components/file-manager/Chooser/FolderBookmark.vue

@@ -5,7 +5,8 @@
                         @breadcrumbItemClick="activeFolder = $event.folderId"
                         :title="title"/>
 
-        <files :selectedFiles.sync="selectedFiles"
+        <files :key-prefix="'folder-bookmark' + activeFolder"
+               :selectedFiles.sync="selectedFiles"
                :resultsFormFactor="formFactor"
                :routePath="routePath + activeFolder"
                :enable-pagination="true"

package/assets/cms/components/file-manager/Chooser/Header.vue

@@ -1,14 +1,27 @@
 <template>
     <div class="row">
-        <div class="mb-3 col-sm-12">
-            <header>
+        <div class="mb-3">
+            <header class="hstack align-items-start gap-3">
+                <div class="me-auto">
+                    <h5>{{title}}</h5>
+                    <breadcrumb v-if="breadcrumbItems" :breadcrumb-items="breadcrumbItems" @itemClick="onBreadcrumbItemClick" />
+                </div>
+                <form @submit.prevent="search" v-if="enableSearch">
+                    <div class="ccm-header-search-form-input input-group input-group-sm">
+                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search"
+                               autocomplete="false" v-model="searchText">
+                        <button type="submit" class="input-group-icon">
+                            <svg width="16" height="16">
+                                <use xlink:href="#icon-search"/>
+                            </svg>
+                        </button>
+                    </div>
+                </form>
                 <button type="button" @click="toggleFormFactor" v-if="showFormFactorSelector"
-                        class="btn btn-sm float-end btn-secondary">
+                        class="btn btn-sm btn-secondary">
                     <i v-if="resultsFormFactor === 'grid'" class="fas fa-th"></i>
                     <i v-if="resultsFormFactor === 'list'" class="fas fa-list"></i>
                 </button>
-                <h5>{{title}}</h5>
-                <breadcrumb v-if="breadcrumbItems" :breadcrumb-items="breadcrumbItems" @itemClick="onBreadcrumbItemClick" />
             </header>
         </div>
     </div>
@@ -31,6 +44,14 @@ export default {
             required: false,
             default: true
         },
+        enableSearch: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        resultsSearchQuery: {
+            type: String
+        },
         resultsFormFactor: {
             type: String,
             required: false,
@@ -42,7 +63,24 @@ export default {
             required: false
         }
     },
+    data() {
+        return {
+            i18n: {
+                search: 'Search'
+            },
+            searchText: ''
+        }
+    },
+    watch: {
+        resultsSearchQuery(value) {
+            this.searchText = value
+        }
+    },
     methods: {
+        search() {
+            const my = this
+            my.$emit('update:resultsSearchQuery', my.searchText)
+        },
         toggleFormFactor() {
             const my = this
             if (this.resultsFormFactor === 'grid') {
@@ -54,6 +92,15 @@ export default {
         onBreadcrumbItemClick(item) {
             this.$emit('breadcrumbItemClick', item)
         }
+    },
+    mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/RecentUploads.vue

@@ -1,8 +1,11 @@
 <template>
     <div>
-        <chooser-header :resultsFormFactor.sync="formFactor" :title="title"/>
+        <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
+                        :title="title"/>
 
         <files :selectedFiles.sync="selectedFiles"
+               key-prefix="recent-uploads"
                :resultsFormFactor="formFactor"
                :filters="filters"
                routePath="/ccm/system/file/chooser/recent"
@@ -22,7 +25,8 @@ export default {
     },
     data: () => ({
         selectedFiles: [],
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
         resultsFormFactor: {
@@ -49,10 +53,14 @@ export default {
         },
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
+        },
+        searchQuery(value) {
+            this.$emit('update:resultsSearchQuery', value)
         }
     },
     mounted() {
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser/SavedSearch.vue

@@ -20,6 +20,7 @@
         </div>
         <div class="mt-3" v-show="activeSearchPreset">
             <files v-if="activeSearchPreset"
+                   key-prefix="saved-search"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :filters="filters"

package/assets/cms/components/file-manager/Chooser/Search.vue

@@ -1,22 +1,10 @@
 <template>
     <div>
-        <chooser-header :resultsFormFactor.sync="formFactor" :title="title"/>
+        <chooser-header :resultsFormFactor.sync="formFactor"
+                        :resultsSearchQuery.sync="searchQuery"
+                        :enable-search="true"
+                        :title="title"/>
 
-        <div class="row mb-3">
-            <div class="col-md-4 ms-auto">
-                <form @submit.prevent="search">
-                    <div class="ccm-header-search-form-input input-group">
-                        <input type="text" class="form-control border-end-0" :placeholder="i18n.search"
-                               autocomplete="false" v-model="searchText">
-                        <button type="submit" class="input-group-icon">
-                            <svg width="16" height="16">
-                                <use xlink:href="#icon-search"/>
-                            </svg>
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
         <div v-show="!keywords" class="text-center mt-5">
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
@@ -25,6 +13,7 @@
         </div>
         <div>
             <files v-if="keywords"
+                   key-prefix="search"
                    :selectedFiles.sync="selectedFiles"
                    :resultsFormFactor="formFactor"
                    :routePath="routePath + keywords"
@@ -50,14 +39,13 @@ export default {
     },
     data: () => ({
         i18n: {
-            search: 'Search',
             initialSearchChooserTip: "Let's get some info on what you're looking for."
         },
-        searchText: '',
         keywords: '',
         selectedFiles: [],
         routePath: '/ccm/system/file/chooser/search/',
-        formFactor: 'grid'
+        formFactor: 'grid',
+        searchQuery: ''
     }),
     props: {
         resultsFormFactor: {
@@ -66,6 +54,9 @@ export default {
             default: 'grid', // grid | list
             validator: value => ['grid', 'list'].indexOf(value) !== -1
         },
+        resultsSearchQuery: {
+            type: String
+        },
         title: {
             type: String,
             required: true
@@ -89,6 +80,9 @@ export default {
         },
         formFactor(value) {
             this.$emit('update:resultsFormFactor', value)
+        },
+        searchQuery(value) {
+            this.keywords = value
         }
     },
     mounted() {
@@ -100,6 +94,7 @@ export default {
             }
         }
         this.formFactor = this.resultsFormFactor
+        this.searchQuery = this.resultsSearchQuery
     }
 }
 </script>

package/assets/cms/components/file-manager/Chooser.vue

@@ -4,8 +4,8 @@
             <div class="row h-100">
                 <div class="col-4 border-end p-3">
                     <ul class="nav flex-column">
-                        <li class="nav-item" v-for="item in choosers" :key="item.id">
-                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id}"
+                        <li class="nav-item" v-for="item in choosers" :key="item.componentKey + '-' + item.id">
+                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id && activeNavItem.componentKey === item.componentKey}"
                                @click.prevent="activateTab(item)"
                                href="javascript:void(0)">
                                 {{item.title}}
@@ -14,8 +14,8 @@
                     </ul>
                     <hr>
                     <ul class="nav flex-column">
-                        <li class="nav-item" v-for="item in uploaders" :key="item.id">
-                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id}"
+                        <li class="nav-item" v-for="item in uploaders" :key="item.componentKey + '-' + item.id">
+                            <a :class="{'nav-link': true, 'active': activeNavItem.id === item.id && activeNavItem.componentKey === item.componentKey}"
                                @click.prevent="activateTab(item)"
                                href="javascript:void(0)">
                                 {{item.title}}
@@ -32,6 +32,8 @@
                                    :extraData="activeNavItem.data || {}"
                                    :multipleSelection="multipleSelection"
                                    :selectedFiles.sync="selectedFiles"
+                                   :searchChooserIsEnabled="searchChooserIsEnabled()"
+                                   :resultsSearchQuery.sync="resultsSearchQuery"
                                    :resultsFormFactor.sync="resultsFormFactor"
                                    :filesReadyToUpload.sync="filesReadyToUpload"
                                    :filters="filters"
@@ -86,6 +88,7 @@ export default {
                 search: 'Search',
                 uploadFiles: 'Upload Files'
             },
+            resultsSearchQuery: '',
             filesReadyToUpload: 0,
             activeNavItem: null,
             resultsFormFactor: 'grid',
@@ -155,9 +158,23 @@ export default {
         },
         uploaders() {
             this.applyLocalization()
+        },
+        resultsSearchQuery(value) {
+            if (value) {
+                this.activateTabByKey('search')
+            }
         }
     },
     methods: {
+        searchChooserIsEnabled() {
+            var enabled = false
+            this.choosers.forEach(function(chooser) {
+                if (chooser.id === 'search') {
+                    enabled = true
+                }
+            })
+            return enabled
+        },
         applyLocalization() {
             if (this.choosers) {
                 for (const chooser of this.choosers) {

package/assets/cms/components/form/ConcreteFileInput.vue

@@ -72,6 +72,12 @@ export default {
                         this.$emit('change', null)
                     }
                 }
+                if (!this.isFirstRun) {
+                    // Fire the jQuery change event.
+                    // @deprecated - do not use this unless you have to. Use this component directly instead and listen
+                    // to its change event. This will be removed when the jQuery dependency is removed.
+                    $('input[name=' + this.inputName + ']').trigger('change')
+                }
                 this.isFirstRun = false
             }
         }

package/assets/cms/scss/file-manager/_file-chooser.scss

@@ -1,9 +1,18 @@
 .ccm-ui {
+  .ccm-image-chooser-popover {
+    max-width: 400px;
+
+    img {
+      height: auto;
+      margin-bottom: 1rem;
+      max-width: 100%;
+    }
+  }
+
   table.ccm-image-chooser-list-view {
     img {
       height: 32px;
       width: 32px;
     }
-
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@concretecms/bedrock",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "description": "The asset framework and dependencies for Concrete CMS.",
   "scripts": {
     "lint": "standardx \"**/*.{js,vue}\" && stylelint assets/**/*.{scss,vue}",