@concretecms/bedrock 1.0.2 → 1.1.2

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

@@ -9,8 +9,8 @@
                             <label class="form-label" :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 class="form-check-input" type="checkbox" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
-                                    <input class="form-check-input" type="radio" v-if="!multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
+                                    <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">
+                                    <input :disabled="!canChooseFile(file)" class="form-check-input" type="radio" v-if="!multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
                                     <label class="form-check-label" :for="'file-' + (file.fID || file.treeNodeID)">{{file.title}}</label>
                                 </div>
                             </div>
@@ -24,22 +24,22 @@
                     <tr>
                         <th></th>
                         <th></th>
-                        <th>ID</th>
+                        <th>{{ i18n.id }}</th>
                         <th :class="getSortColumnClassName('fv.fvTitle')">
-                            <a v-if="enableSort" href="#" @click.prevent="sortBy('fv.fvTitle')">Name</a>
-                            <span v-else>Name</span>
+                            <a v-if="enableSort" href="#" @click.prevent="sortBy('fv.fvTitle')">{{ i18n.name }}</a>
+                            <span v-else>{{ i18n.name }}</span>
                         </th>
                         <th :class="getSortColumnClassName(dateSortColumn)">
-                            <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">Uploaded</a>
-                            <span v-else>Uploaded</span>
+                            <a v-if="enableSort" href="#" @click.prevent="sortBy(dateSortColumn)">{{ i18n.uploaded }}</a>
+                            <span v-else>{{ i18n.uploaded }}</span>
                         </th>
                     </tr>
                     </thead>
                     <tbody>
                         <tr v-for="file in fileList" :key="(file.fID || file.treeNodeID) + 'list'" @click="onItemClick(file)">
                             <td>
-                                <input type="checkbox" v-if="multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
-                                <input type="radio" v-if="!multipleSelection && !file.isFolder" v-model="selectedFiles" :id="'file-' + file.fID" :value="file.fID">
+                                <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>{{file.fID}}</td>
@@ -80,6 +80,11 @@ export default {
         Pagination
     },
     data: () => ({
+        i18n: {
+            id: 'ID',
+            name: 'Name',
+            uploaded: 'Uploaded'
+        },
         currentPage: 1,
         rows: false,
         fileList: [],
@@ -95,6 +100,9 @@ export default {
         viewIsLoading: false
     }),
     props: {
+        filters: {
+            type: Array
+        },
         enableSort: {
             type: Boolean,
             required: false,
@@ -166,6 +174,37 @@ export default {
         }
     },
     methods: {
+        canChooseFile(file) {
+            var canChooseFile = -1
+            if (this.filters) {
+                var fileExtension = file.extension
+                var fileType = file.genericType
+                this.filters.forEach(function(filter) {
+                    if (filter.filter === 'extension') {
+                        if (filter.extensions.includes(fileExtension)) {
+                            canChooseFile = true
+                        } else {
+                            canChooseFile = false
+                        }
+                    }
+                    if (canChooseFile !== false) {
+                        if (filter.filter === 'type') {
+                            if (filter.type === fileType) {
+                                canChooseFile = true
+                            } else {
+                                canChooseFile = false
+                            }
+                        }
+                    }
+                })
+            }
+
+            if (canChooseFile === -1) {
+                return true
+            } else {
+                return canChooseFile
+            }
+        },
         getFiles() {
             const my = this
             my.rows = false
@@ -235,6 +274,15 @@ export default {
             }
         }
     },
+    mounted: function() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
+    },
     watch: {
         selectedFiles(value) {
             this.$emit('update:selectedFiles', Array.isArray(value) ? value : [value])

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

@@ -10,6 +10,7 @@
                :routePath="routePath + activeFolder"
                :enable-pagination="true"
                :enable-sort="true"
+               :filters="filters"
                :multipleSelection="multipleSelection"
                @folderClick="activeFolder = $event"/>
     </div>
@@ -51,6 +52,9 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     created() {

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

@@ -4,6 +4,7 @@
 
         <files :selectedFiles.sync="selectedFiles"
                :resultsFormFactor="formFactor"
+               :filters="filters"
                routePath="/ccm/system/file/chooser/recent"
                :multipleSelection="multipleSelection"/>
     </div>
@@ -37,6 +38,9 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     watch: {

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

@@ -7,25 +7,26 @@
 
         <div class="form-group row row-cols-auto g-0 align-items-center justify-content-end">
             <div class="col-auto">
-                <label for="searchPresets" class="me-2">Search Presets</label>
+                <label for="searchPresets" class="me-2">{{ i18n.searchPresets }}</label>
             </div>
             <div class="col-auto">
                 <select id="searchPresets" class="form-select search-presets-menu" v-model="activeSearchPreset">
-                    <option value="" selected>Select a Preset</option>
+                    <option value="" selected>{{ i18n.selectPreset }}</option>
                     <option v-for="searchPreset in searchPresets" :key="searchPreset.id" :value="searchPreset.id">
-                        {{searchPreset.presetName}}
+                        {{ searchPreset.presetName }}
                     </option>
                 </select>
             </div>
         </div>
         <div class="mt-3" v-show="activeSearchPreset">
             <files v-if="activeSearchPreset"
-                :selectedFiles.sync="selectedFiles"
-                :resultsFormFactor="formFactor"
-                :routePath="routePath + activeSearchPreset"
-                :enable-pagination="true"
-                :multipleSelection="multipleSelection"
-                @folderClick="activeFolder = $event"/>
+                   :selectedFiles.sync="selectedFiles"
+                   :resultsFormFactor="formFactor"
+                   :filters="filters"
+                   :routePath="routePath + activeSearchPreset"
+                   :enable-pagination="true"
+                   :multipleSelection="multipleSelection"
+                   @folderClick="activeFolder = $event"/>
         </div>
     </div>
 </template>
@@ -48,6 +49,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            searchPresets: 'Search Presets',
+            selectPreset: 'Select a Preset'
+        },
         activeFolder: '',
         searchPresets: [],
         activeSearchPreset: '',
@@ -70,6 +75,9 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     methods: {
@@ -91,6 +99,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
 
         this.fetchSearchPresets()

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

@@ -6,7 +6,8 @@
             <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="Search" autocomplete="false" v-model="searchText">
+                        <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"/>
@@ -20,16 +21,17 @@
             <span class="search-icon my-4">
                 <Icon icon="search" type="fas" color="#f4f4f4"/>
             </span>
-            <p><b>Let's get some info on what you're looking for.</b></p>
+            <p><b>{{ i18n.initialSearchChooserTip }}</b></p>
         </div>
         <div>
             <files v-if="keywords"
-                :selectedFiles.sync="selectedFiles"
-                :resultsFormFactor="formFactor"
-                :routePath="routePath + keywords"
-                :enable-pagination="true"
-                :enable-sort="true"
-                :multipleSelection="multipleSelection"/>
+                   :selectedFiles.sync="selectedFiles"
+                   :resultsFormFactor="formFactor"
+                   :routePath="routePath + keywords"
+                   :enable-pagination="true"
+                   :enable-sort="true"
+                   :filters="filters"
+                   :multipleSelection="multipleSelection"/>
         </div>
     </div>
 </template>
@@ -47,6 +49,10 @@ export default {
         Files
     },
     data: () => ({
+        i18n: {
+            search: 'Search',
+            initialSearchChooserTip: "Let's get some info on what you're looking for."
+        },
         searchText: '',
         keywords: '',
         selectedFiles: [],
@@ -67,10 +73,13 @@ export default {
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     methods: {
-        search () {
+        search() {
             this.keywords = this.searchText
         }
     },
@@ -83,6 +92,13 @@ export default {
         }
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         this.formFactor = this.resultsFormFactor
     }
 }

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

@@ -34,6 +34,8 @@
                                    :selectedFiles.sync="selectedFiles"
                                    :resultsFormFactor.sync="resultsFormFactor"
                                    :filesReadyToUpload.sync="filesReadyToUpload"
+                                   :filters="filters"
+                                   @upload-complete="activateTabByKey('recent-uploads')"
                                    ref="c"
                         />
                     </transition>
@@ -41,11 +43,11 @@
             </div>
         </div>
         <div class="dialog-buttons">
-            <button class="btn btn-secondary" data-dialog-action="cancel">Cancel</button>
+            <button class="btn btn-secondary" data-dialog-action="cancel">{{ i18n.cancel }}</button>
 
-            <button type="button" v-show="isImportExternalFilesMode()" @click="importExternalFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">Import</button>
-            <button type="button" v-show="isChooseFilesMode()" @click="chooseFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">Choose</button>
-            <button type="button" v-show="isAddNewFilesMode()" @click="uploadFiles" :disabled="uploadReady === false" class="btn btn-primary">Upload</button>
+            <button type="button" v-show="isImportExternalFilesMode()" @click="importExternalFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">{{ i18n.import }}</button>
+            <button type="button" v-show="isChooseFilesMode()" @click="chooseFiles" :disabled="selectedFiles.length === 0" class="btn btn-primary">{{ i18n.choose }}</button>
+            <button type="button" v-show="isAddNewFilesMode()" @click="uploadFiles" :disabled="uploadReady === false" class="btn btn-primary">{{ i18n.upload }}</button>
         </div>
     </div>
 </template>
@@ -74,6 +76,16 @@ export default {
     },
     data() {
         return {
+            i18n: {
+                cancel: 'Cancel',
+                import: 'Import',
+                choose: 'Choose',
+                upload: 'Upload',
+                recentlyUploaded: 'Recently Uploaded',
+                fileManager: 'File Manager',
+                search: 'Search',
+                uploadFiles: 'Upload Files'
+            },
             filesReadyToUpload: 0,
             activeNavItem: null,
             resultsFormFactor: 'grid',
@@ -91,15 +103,15 @@ export default {
             default: [
                 {
                     key: 'recent-uploads',
-                    title: 'Recently Uploaded'
+                    title: null // use the detault one if null
                 },
                 {
                     key: 'file-manager',
-                    title: 'File Manager'
+                    title: null // use the detault one if null
                 },
                 {
                     key: 'search',
-                    title: 'Search'
+                    title: null // use the detault one if null
                 }
             ]
         },
@@ -108,13 +120,16 @@ export default {
             default: [
                 {
                     key: 'file-upload',
-                    title: 'Upload Files'
+                    title: null // use the detault one if null
                 }
             ]
         },
         multipleSelection: {
             type: Boolean,
             default: true
+        },
+        filters: {
+            type: Array
         }
     },
     created() {
@@ -122,11 +137,57 @@ export default {
     },
     mounted() {
         var my = this
+        if (window.ccmi18n_filemanager) {
+            for (const key in my.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    my.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
+        this.applyLocalization()
         ConcreteEvent.subscribe('FileUploaderFilesReadyToUpload', function(e, filesReadyToUpload) {
             my.filesReadyToUpload = filesReadyToUpload
         })
     },
+    watch: {
+        choosers() {
+            this.applyLocalization()
+        },
+        uploaders() {
+            this.applyLocalization()
+        }
+    },
     methods: {
+        applyLocalization() {
+            if (this.choosers) {
+                for (const chooser of this.choosers) {
+                    if (typeof chooser.title !== 'string') {
+                        switch (chooser.key) {
+                        case 'recent-uploads':
+                            chooser.title = this.i18n.recentlyUploaded
+                            break
+                        case 'file-manager':
+                            chooser.title = this.i18n.fileManager
+                            break
+                        case 'search':
+                            chooser.title = this.i18n.search
+                            break
+                        }
+                    }
+                }
+            }
+            if (this.uploaders) {
+                for (const uploader of this.uploaders) {
+                    if (typeof uploader.title !== 'string') {
+                        switch (uploader.key) {
+                        case 'file-upload':
+                            uploader.title = this.i18n.uploadFiles
+                            break
+                        }
+                    }
+                }
+            }
+        },
         isImportExternalFilesMode() {
             return this.activeNavItem.componentKey === 'external-file-provider'
         },
@@ -136,6 +197,19 @@ export default {
         isChooseFilesMode() {
             return this.activeNavItem.componentKey !== 'file-upload' && this.activeNavItem.componentKey !== 'external-file-provider'
         },
+        activateTabByKey(key) {
+            var my = this
+            this.choosers.forEach(function(chooser) {
+                if (chooser.id === key) {
+                    my.activateTab(chooser)
+                }
+            })
+            this.uploaders.forEach(function(uploader) {
+                if (uploader.id === key) {
+                    my.activateTab(uploader)
+                }
+            })
+        },
         activateTab(item) {
             this.activeNavItem = item
 

package/assets/cms/components/file-manager/Uploader/UploadFromComputer.vue

@@ -131,7 +131,8 @@ export default {
                             me.uploadedFiles.forEach(function(file) {
                                 fileIds.push(file.fID)
                             })
-                            ConcreteEvent.publish('FileManagerSelectFile', { fID: fileIds })
+                            // Instead of firing this event let's use uploadComplete() below to re-select the Recent Uploads tab.
+                            // ConcreteEvent.publish('FileManagerSelectFile', { fID: fileIds })
                             me.uploadedFiles = []
                         }
                         me.uploadComplete()
@@ -222,7 +223,7 @@ export default {
             this.dropzone.removeAllFiles(true)
         },
         uploadComplete() {
-            this.$emit('update:uploadCompleted')
+            this.$emit('upload-complete')
 
             ConcreteAlert.notify({
                 title: 'Complete',

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

@@ -2,6 +2,7 @@
     <div>
         <upload-from-computer
             :upload-directory-id="uploadDirectoryId"
+            @upload-complete="$emit('upload-complete')"
             @uploadProgressStateChange="isUploadInProgress = $event"/>
 
         <concrete-file-directory-input

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

@@ -12,7 +12,7 @@
                     <button type="button"
                             :class="{'btn': true, 'btn-outline-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
                             @click="toggleDirectoryInput" :disabled="disabled">
-                        Create New Folder
+                        {{ i18n.createNewFolder }}
                     </button>
                 </div>
                 <select v-else :id="directorySelectInputId" :name="inputName" class="ccm-directory-selector form-select" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled">
@@ -24,16 +24,16 @@
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
             <div class="form-group">
-                <label class="form-label" :for="directoryInputId">Name</label>
+                <label class="form-label" :for="directoryInputId">{{ i18n.name }}</label>
                 <div class="input-group">
                     <input type="text"
                            :id="directoryInputId"
-                           placeholder="Please enter a name..." class="ccm-new-directory-name form-control"
+                           :placeholder="i18n.specifyName" class="ccm-new-directory-name form-control"
                            v-model="newDirectoryName" @keyup.enter.stop.prevent="createDirectory" :disabled="disabled">
                     <button type="button"
                             :class="{'btn': true, 'btn-outline-secondary': true, 'disabled': disabled === true}"
                             @click.stop.prevent="createDirectory" :disabled="disabled">
-                        Add
+                        {{ i18n.add }}
                     </button>
                 </div>
             </div>
@@ -46,6 +46,12 @@
 /* global CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
 export default {
     data: () => ({
+        i18n: {
+            createNewFolder: 'Create New Folder',
+            name: 'Name',
+            specifyName: 'Please enter a name...',
+            add: 'Add'
+        },
         showAddDirectoryInput: false,
         selectedDirectoryID: 0,
         directorySelectInputId: _.uniqueId('input-'),
@@ -109,6 +115,13 @@ export default {
         this.fetchDirectories()
     },
     mounted() {
+        if (window.ccmi18n_filemanager) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_filemanager[key]) {
+                    this.i18n[key] = window.ccmi18n_filemanager[key]
+                }
+            }
+        }
         $(this.$refs.directoryInput).selectpicker()
 
         if (this.directoryId) {

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

@@ -52,6 +52,9 @@ export default {
         },
         chooseText: {
             type: String
+        },
+        filters: {
+            type: Array
         }
     },
     watch: {
@@ -84,9 +87,13 @@ export default {
         },
         openChooser: function() {
             var my = this
+            var options = {}
+            if (my.filters) {
+                options.filters = my.filters
+            }
             ConcreteFileManager.launchDialog(function(r) {
                 my.loadFile(r.fID)
-            })
+            }, options)
         },
         loadFile(fileId) {
             var my = this

package/assets/cms/components/gallery/GalleryEdit.vue

@@ -6,14 +6,14 @@
                 <a class="nav-link"
                     :class="activeTab === 'image' ? 'active' : ''"
                     @click="openTab('image')">
-                    Images
+                    {{ i18n.images }}
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link"
                     @click="openTab('settings')"
                     :class="activeTab === 'settings' ? 'active' : ''">
-                    Settings
+                    {{ i18n.settings }}
                 </a>
             </li>
         </ul>
@@ -22,7 +22,7 @@
             <div v-show="activeTab === 'image'"  id="galleryImages">
                 <div class="text-end mt-4">
                     <icon-button icon="plus" icon-type="fas" type="outline" class="btn btn-secondary" @click="addImage()">
-                        Add Images
+                        {{ i18n.addImages }}
                     </icon-button>
                 </div>
                 <div class="image-container mt-4"
@@ -51,13 +51,13 @@
             </div>
             <div v-show="activeTab === 'settings'" id="gallerySettings">
                 <h3>
-                  Settings
+                  {{ i18n.settings }}
                 </h3>
 
                 <div class="form-check">
                   <input class="form-check-input" type="checkbox" id="includeDownloadLink" :value="1" :checked="$root.includeDownloadLink" name="includeDownloadLink">
                   <label class="form-check-label" for="includeDownloadLink">
-                      Include link to download original
+                      {{ i18n.includeOriginalDownloadLink }}
                   </label>
                 </div>
             </div>
@@ -143,6 +143,12 @@ export default {
         ...ImageDetail.components
     },
     data: () => ({
+        i18n: {
+            images: 'Images',
+            settings: 'Settings',
+            addImages: 'Add Images',
+            includeOriginalDownloadLink: 'Include link to download original'
+        },
         activeTab: 'image',
         activeImage: null
     }),
@@ -200,6 +206,15 @@ export default {
             })
         }
     },
+    mounted() {
+        if (window.ccmi18n_gallery) {
+            for (const key in this.i18n) {
+                if (window.ccmi18n_gallery[key]) {
+                    this.i18n[key] = window.ccmi18n_gallery[key]
+                }
+            }
+        }
+    },
     props: {
         gallery: {
             type: Array,