@concretecms/bedrock 1.3.7 → 1.4.1

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

@@ -0,0 +1,173 @@
+<template>
+    <input :class="cssClasses" :name="name" v-if="maxItems == 1" />
+    <select multiple :class="cssClasses" :name="name" v-else />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+export default {
+    props: {
+        // If we use this component in a traditional non-vue-based form, we need to
+        // have a name for the input field. This controls that. Can be safely left blank
+        // if you're just using this in Vue w/v-model
+        name: {
+            type: String
+        },
+        // Do we want our input/select to have any custom classes?
+        cssClasses: {
+            type: Array
+        },
+        // The value of whatever item we're selecting, be it user ID, page ID, array of page IDs, etc...
+        value: {
+            type: [Array, String, Number]
+        },
+        // The URL used to search
+        dataSourceUrl: {
+            type: String,
+            required: true
+        },
+        // The selected options URL
+        selectedOptionsUrl: {
+            type: String,
+            required: true
+        },
+        // The data sent to the server with every request. Paired with an access token to ensure
+        // that only authorized requests are responded to.
+        formData: {
+            type: Object,
+            required: true
+        },
+        // Used to authorize requests
+        accessToken: {
+            type: String,
+            required: true
+        },
+        // Whether to include the remove button on each selected item
+        removeButton: {
+            type: Boolean,
+            required: false,
+            default: false
+        },
+        maxItems: {
+            required: false,
+            default: 1
+        },
+        allowCreate: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    },
+    data() {
+        return {}
+    },
+    mounted() {
+        var my = this
+        var config = {
+            maxOptions: null,
+            maxItems: my.maxItems,
+            searchField: 'primary_label',
+            labelField: 'primary_label',
+            valueField: 'id',
+            load: function (query, callback) {
+                var formData = my.getFormData()
+                formData.append('query', query)
+                var url = my.dataSourceUrl
+                fetch(url, {
+                    method: 'POST',
+                    body: formData
+                })
+                    .then(response => response.json())
+                    .then(json => {
+                        callback(json)
+                    }).catch(() => {
+                        callback()
+                    })
+            },
+            render: {
+                option: function (item, escape) {
+                    return (typeof (my.$parent.renderOption) === 'function')
+                        ? my.$parent.renderOption(item) : my.renderOption(item)
+                },
+                item: function (item, escape) {
+                    return (typeof (my.$parent.renderItem) === 'function')
+                        ? my.$parent.renderItem(item) : my.renderItem(item)
+                }
+            }
+        }
+
+        if (this.removeButton) {
+            config.plugins = ['remove_button']
+        }
+
+        if (!this.maxItems) {
+            config.onItemAdd = function () {
+                // Without this method, Tom Select persists the search string even after we search for something,
+                // requiring us to delete the string in order to continue searching for something else - it's kind
+                // of annoying. it only seems to be a problem in multi-select mode ?!
+                this.setTextboxValue('')
+                this.refreshOptions()
+            }
+        }
+
+        if (this.allowCreate) {
+            config.createOnBlur = true
+            config.create = true
+        }
+
+        my.select = new TomSelect(this.$el, config)
+        my.select.on('change', function (value) {
+            my.$emit('change', value)
+        })
+    },
+    watch: {
+        value: {
+            immediate: true,
+            handler: function () {
+                var my = this
+                if (my.value) {
+                    var formData = my.getFormData()
+                    var url = my.selectedOptionsUrl
+                    fetch(url, {
+                        method: 'POST',
+                        body: formData
+                    })
+                        .then(response => response.json())
+                        .then(json => {
+                            json.forEach((item) => {
+                                my.select.addOption(item)
+                                my.select.addItem(item.id)
+                            })
+                        }).catch(() => {})
+                }
+            }
+        }
+    },
+    methods: {
+        getFormData() {
+            var formData = new FormData()
+            for (const [key, value] of Object.entries(this.formData)) {
+                if (Array.isArray(value)) {
+                    // Multi-select, as in the case of ConcreteExpressEntrySelect, etc...
+                    value.forEach((thisValue) => {
+                        formData.append(key + '[]', thisValue)
+                    })
+                } else if (typeof (value) === 'boolean') {
+                    formData.append(key, value ? 1 : 0)
+                } else {
+                    formData.append(key, value)
+                }
+            }
+            formData.append('accessToken', this.accessToken)
+            return formData
+        },
+        renderOption(item) {
+            return `<div>${(item.primary_label)}</div>`
+        },
+        renderItem(item) {
+            return `<div>${(item.primary_label)}</div>`
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,74 @@
+<template>
+    <concrete-ajax-select
+        :name="inputName"
+        :access-token="accessToken"
+        :data-source-url="dataSourceUrl"
+        :selected-options-url="selectedOptionsUrl"
+        :value="entryId"
+        @change="updateSelected"
+        :form-data="formData"
+        :max-items="null"
+        :remove-button="true"
+    >
+    </concrete-ajax-select>
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect */
+import ConcreteAjaxSelect from './ConcreteAjaxSelect'
+export default {
+    components: { ConcreteAjaxSelect },
+    prop: ['entryId'],
+    model: {
+        prop: 'entryId',
+        event: 'change'
+    },
+    props: {
+        entity: {
+            type: String,
+            required: true
+        },
+        accessToken: {
+            type: String,
+            required: true
+        },
+        inputName: {
+            type: String
+        },
+        entryId: {
+            type: [Number, String, Array],
+            required: false
+        }
+    },
+    computed: {
+        formData() {
+            return {
+                entity: this.entity,
+                entryId: this.entryId
+            }
+        }
+    },
+    data() {
+        return {
+            dataSourceUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/express/entry/autocomplete',
+            selectedOptionsUrl: CCM_DISPATCHER_FILENAME + '/ccm/system/express/entry/autocomplete/get_selected',
+            selectedEntryId: null
+        }
+    },
+    watch: {
+        entryId: {
+            immediate: true,
+            handler: function(entryId) {
+                this.selectedEntryId = entryId
+            }
+        }
+    },
+    methods: {
+        updateSelected(value) {
+            this.selectedEntryId = value
+            this.$emit('change', this.selectedEntryId)
+        }
+    }
+}
+</script>

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

@@ -4,22 +4,14 @@
             <div class="form-group">
                 <label class="form-label" :for="directorySelectInputId" v-if="inputLabel">{{inputLabel}}</label>
                 <div v-if="showAddDirectoryButton" class="input-group">
-                    <select :id="directorySelectInputId" :name="inputName" data-size="5" data-live-search="true" class="ccm-directory-selector form-control" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled">
-                        <option v-for="directory in directories" :class="`level-${directory.directoryLevel}`" :value="directory.directoryId" data-icon="fas fa-folder">
-                            {{ directory.directoryName }}
-                        </option>
-                    </select>
+                    <input :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
                     <button type="button"
-                            :class="{'btn': true, 'btn-outline-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
+                            :class="{'btn': true, 'btn-secondary': true, 'ccm-create-new-directory-button': true, 'disabled': disabled === true}"
                             @click="toggleDirectoryInput" :disabled="disabled">
                         {{ i18n.createNewFolder }}
                     </button>
                 </div>
-                <select v-else :id="directorySelectInputId" :name="inputName" class="ccm-directory-selector form-select" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled">
-                    <option v-for="directory in directories" :class="`level-${directory.directoryLevel}`" :value="directory.directoryId" data-icon="fas fa-folder">
-                        {{ directory.directoryName }}
-                    </option>
-                </select>
+                <input v-else :id="directorySelectInputId" :name="inputName" v-model="selectedDirectoryID" ref="directoryInput" :disabled="disabled" />
             </div>
         </div>
         <div v-if="showAddDirectoryButton" v-show="showAddDirectoryInput" class="ccm-new-directory-name-container">
@@ -31,7 +23,7 @@
                            :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}"
+                            :class="{'btn': true, 'btn-secondary': true, 'disabled': disabled === true}"
                             @click.stop.prevent="createDirectory" :disabled="disabled">
                         {{ i18n.add }}
                     </button>
@@ -43,7 +35,7 @@
 
 <script>
 /* eslint-disable no-new */
-/* global CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
+/* global TomSelect, CCM_DISPATCHER_FILENAME, CCM_SECURITY_TOKEN, ConcreteAjaxRequest, _ */
 export default {
     data: () => ({
         i18n: {
@@ -81,15 +73,11 @@ export default {
     },
     watch: {
         selectedDirectoryID() {
-            $(this.$refs.directoryInput).selectpicker('val', this.selectedDirectoryID)
-
             this.$emit('change', parseInt(this.selectedDirectoryID))
         },
         directories() {
             const me = this
             me.$nextTick(() => {
-                $(me.$refs.directoryInput).selectpicker('refresh')
-
                 if (me.directories.length > 0) {
                     const isSelectedOptionInDirList = _.findWhere(me.directories, { directoryId: me.selectedDirectoryID }) !== undefined
 
@@ -102,12 +90,11 @@ export default {
 
                 me.showAddDirectoryInput = false
                 me.newDirectoryName = ''
-            })
-        },
-        disabled() {
-            const me = this
-            me.$nextTick(function () {
-                $(me.$refs.directoryInput).selectpicker('refresh')
+
+                this.selectMenu.clear(true)
+                this.selectMenu.clearOptions()
+                this.selectMenu.addOptions(me.directories)
+                this.selectMenu.setValue(me.selectedDirectoryID)
             })
         }
     },
@@ -122,11 +109,26 @@ export default {
                 }
             }
         }
-        $(this.$refs.directoryInput).selectpicker()
-
         if (this.directoryId) {
             this.selectedDirectoryID = this.directoryId
         }
+
+        this.selectMenu = new TomSelect(this.$refs.directoryInput, {
+            maxOptions: 200,
+            maxItems: 1,
+            items: [this.selectedDirectoryID],
+            options: [],
+            valueField: 'directoryId',
+            searchField: 'directoryName',
+            render: {
+                option: function (data, escape) {
+                    return `<div class="level-${data.directoryLevel}"><i class="fa fa-folder"></i> ${data.directoryName}</div>`
+                },
+                item: function (item, escape) {
+                    return `<div class="level-${item.directoryLevel}"><i class="fa fa-folder"></i> ${item.directoryName}</div>`
+                }
+            }
+        })
     },
     methods: {
         createDirectory() {
@@ -144,8 +146,8 @@ export default {
                 },
                 success: function (r) {
                     // re-fetch the directories and select the new folder
-                    me.fetchDirectories()
                     me.selectedDirectoryID = r.directoryId
+                    me.fetchDirectories()
                 }
             })
         },

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

@@ -1,6 +1,6 @@
 <template>
     <div class="ccm-item-selector-group">
-        <input type="hidden" :name="inputName" :value="selectedFileID" />
+        <input type="hidden" :name="inputName" :value="selectedFileID" ref="input" />
 
         <div class="ccm-item-selector-choose" v-if="!selectedFile && !isLoading">
             <button type="button" @click="openChooser" class="btn btn-secondary">
@@ -45,10 +45,11 @@ export default {
     props: {
         inputName: {
             type: String,
-            required: true
+            default: ''
         },
         fileId: {
-            type: Number
+            type: Number,
+            default: 0
         },
         chooseText: {
             type: String
@@ -57,7 +58,18 @@ export default {
             type: Array
         }
     },
+    prop: ['fileId'],
+    model: {
+        prop: 'fileId',
+        event: 'change'
+    },
     watch: {
+        fileId: {
+            immediate: true,
+            handler(value) {
+                this.selectedFileID = this.fileId
+            }
+        },
         selectedFileID: {
             immediate: true,
             handler(value) {
@@ -72,11 +84,11 @@ export default {
                         this.$emit('change', null)
                     }
                 }
-                if (!this.isFirstRun) {
+                if (!this.isFirstRun && this.inputName) {
                     // 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.$refs.input).trigger('change')
                 }
                 this.isFirstRun = false
             }

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

@@ -0,0 +1,134 @@
+<template>
+    <div class="ccm-item-selector-group">
+        <input type="hidden" :name="inputName" :value="selectedGroup ? selectedGroup.gID : ''" v-if="inputName !== ''" />
+
+        <div v-if="isLoading">
+            <div class="btn-group">
+                <div class="btn btn-secondary"><svg class="ccm-loader-dots"><use xlink:href="#icon-loader-circles" /></svg></div>
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
+                    <i class="fa fa-times-circle"></i>
+                </button>
+            </div>
+        </div>
+
+        <div v-else-if="selectedGroup === null" class="ccm-item-selector-choose">
+            <button type="button" @click="openChooser" :disabled="readonly" class="btn btn-secondary">
+                {{chooseText}}
+            </button>
+        </div>
+
+        <div v-else class="ccm-item-selector-loaded">
+            <div class="btn-group">
+                <div class="btn btn-secondary" :class="{disabled: readonly}" @click="openChooser">
+                    <span class="ccm-item-selector-title" v-bind:title="`ID: ${selectedGroup.gID}`">{{selectedGroup.gDisplayName}}</span>
+                </div>
+                <button type="button" @click="reset" :disabled="readonly" class="ccm-item-selector-reset btn btn-secondary">
+                    <i class="fa fa-times-circle"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            isLoadingGroupId: 0 /* integer */,
+            selectedGroup: null, /* json object */
+            mounted: false
+        }
+    },
+    computed: {
+        isLoading() {
+            return this.isLoadingGroupId !== 0
+        }
+    },
+    props: {
+        inputName: {
+            type: String,
+            default: ''
+        },
+        groupId: {
+            type: Number,
+            default: 0
+        },
+        chooseText: {
+            type: String,
+            default: 'Choose a Group'
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        groupId: {
+            immediate: true,
+            handler(value) {
+                if (this.mounted) {
+                    this.loadGroup()
+                }
+            }
+        }
+    },
+    beforeMount() {
+        this.mounted = true
+    },
+    mounted() {
+        this.loadGroup(true)
+    },
+    beforeUnmount() {
+        this.mounted = false
+    },
+    methods: {
+        setSelectedGroup(group, triggerChange) {
+            const currentlySelectedGroupID = parseInt(this.selectedGroup?.gID) || 0
+            const newlySelectedGroupID = parseInt(group?.gID) || 0
+            this.isLoadingGroupId = 0
+            this.selectedGroup = group
+            if (triggerChange && currentlySelectedGroupID !== newlySelectedGroupID) {
+                this.$emit('change', this.selectedGroup)
+            }
+        },
+        openChooser: function() {
+            window.ConcreteUserGroupManager.launchDialog((group) => {
+                this.setSelectedGroup(group, true)
+            })
+        },
+        loadGroup(initial) {
+            const wantedGroupId = Math.max(parseInt(this.groupId) || 0)
+            if (wantedGroupId === 0) {
+                this.setSelectedGroup(null, !initial)
+                return
+            }
+            const currentGroupId = parseInt(this.selectedGroup?.gID) || 0
+            if (wantedGroupId === currentGroupId) {
+                this.isLoadingGroupId = 0
+                return
+            }
+            this.isLoadingGroupId = wantedGroupId
+            window.ConcreteUserGroupManager.getGroupDetails(
+                wantedGroupId,
+                (r) => {
+                    if (this.isLoadingGroupId !== wantedGroupId) {
+                        return
+                    }
+                    this.setSelectedGroup(r.groups[0], !initial)
+                },
+                (r) => {
+                    if (this.isLoadingGroupId !== wantedGroupId) {
+                        return
+                    }
+                    this.setSelectedGroup(null, !initial)
+                    window.ConcreteAlert.dialog(ccmi18n.error, ConcreteAjaxRequest.renderJsonError(r, true))
+                }
+            )
+        },
+        reset() {
+            this.setSelectedGroup(null, true)
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+    <input :name="name" v-model="selectedValue" />
+</template>
+
+<script>
+/* eslint-disable no-new, no-unused-vars, camelcase, eqeqeq */
+/* globals TomSelect, WebFont */
+export default {
+    data() {
+        return {
+            selectedValue: this.value
+        }
+    },
+    props: {
+        value: {
+        },
+        name: {
+            type: String,
+            required: true
+        },
+        selectedLocale: {
+            required: false
+        },
+        locales: {
+            type: Array,
+            required: true
+        }
+    },
+    watch: {
+    },
+    mounted() {
+        var config = {}
+        config.maxOptions = null
+        config.maxItems = 1
+        config.items = [this.selectedLocale]
+        config.options = this.locales
+        config.valueField = 'id'
+        config.render = {
+            option: function (data, escape) {
+                return `<div><img class="me-2" src="${data.flag}">${data.language.text}</div>`
+            },
+            item: function (item, escape) {
+                return `<div><img class="me-2" src="${item.flag}">${item.language.text}</div>`
+            }
+        }
+        this.$nextTick(() => {
+            const select = new TomSelect(this.$el, config)
+            select.on('change', (option) => {
+                this.selectedValue = option
+            })
+            select.sync()
+        })
+    },
+    methods: {
+
+    }
+}
+</script>