diff --git a/src/admin/components/edition/collection-edition-form.vue b/src/admin/components/edition/collection-edition-form.vue index 401e200fd..e2817300f 100644 --- a/src/admin/components/edition/collection-edition-form.vue +++ b/src/admin/components/edition/collection-edition-form.vue @@ -276,6 +276,38 @@ + +
+ + + + + + {{ registeredViewModes[viewMode].label }} + + + + +
+ @@ -358,7 +390,9 @@ export default { collections: [], isFetchingCollections: true, thumbnailMediaFrame: undefined, - headerImageMediaFrame: undefined + headerImageMediaFrame: undefined, + registeredViewModes: tainacan_plugin.registered_view_modes, + viewModesList: [] } }, methods: { @@ -393,7 +427,8 @@ export default { slug: this.form.slug, status: this.form.status, moderators_ids: this.form.moderators_ids, - parent: this.form.parent + parent: this.form.parent, + enabled_view_modes: this.form.enabled_view_modes }; this.updateCollection(data).then(updatedCollection => { @@ -406,6 +441,7 @@ export default { this.form.status = this.collection.status; this.form.cover_page_id = this.collection.cover_page_id; this.form.enable_cover_page = this.collection.enable_cover_page; + this.form.enabled_view_modes = this.collection.enabled_view_modes; this.isLoading = false; this.formErrorMessage = ''; @@ -444,8 +480,21 @@ export default { this.form.cover_page_id = this.collection.cover_page_id; this.form.slug = this.collection.slug; this.form.parent = this.collection.parent; + this.form.enabled_view_modes = []; this.moderators = []; - + + // Fills or update enabled view modes + // for (let viewMode of Object.keys(this.registeredViewModes)) { + // let indexOfViewMode = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode.viewMode == viewMode); + // if (indexOfViewMode < 0) { + // this.form.enabled_view_modes.push({ + // viewMode: viewMode, + // label: this.registeredViewModes[viewMode].label, + // enabled: false + // }); + // } + // } + // Pre-fill status with publish to incentivate it this.form.status = 'publish'; @@ -472,6 +521,18 @@ export default { cancelBack(){ this.$router.push(this.$routerHelper.getCollectionsPath()); }, + updateViewModeslist(viewMode) { + + let index = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode == viewMode); + if (index > -1) + this.form.enabled_view_modes.splice(index, 1); + else + this.form.enabled_view_modes.push(viewMode); + }, + checkIfViewModeEnabled(viewMode) { + let index = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode == viewMode); + return index > -1; + }, fecthCoverPages(search) { this.isFetchingPages = true; this.fetchPages(search) @@ -601,8 +662,20 @@ export default { this.form.enable_cover_page = this.collection.enable_cover_page; this.form.cover_page_id = this.collection.cover_page_id; this.form.parent = this.collection.parent; - + this.form.enabled_view_modes = JSON.parse(JSON.stringify(this.collection.enabled_view_modes)); this.moderators = JSON.parse(JSON.stringify(this.collection.moderators)); + + // Fills or update enabled view modes + // for (let viewMode of Object.keys(this.registeredViewModes)) { + // let indexOfViewMode = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode.viewMode == viewMode); + // if (indexOfViewMode < 0) { + // this.form.enabled_view_modes.push({ + // viewMode: viewMode, + // label: this.registeredViewModes[viewMode].label, + // enabled: false + // }); + // } + // } // Generates CoverPage from current cover_page_id info if (this.form.cover_page_id != undefined && this.form.cover_page_id != '') { @@ -639,6 +712,7 @@ export default { } }, mounted() { + if (this.$route.fullPath.split("/").pop() != "new") { document.getElementById('collection-page-container').addEventListener('scroll', ($event) => { this.$emit('onShrinkHeader', ($event.originalTarget.scrollTop > 53)); diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js index 3b4642419..ddd80bb14 100644 --- a/src/admin/js/theme-main.js +++ b/src/admin/js/theme-main.js @@ -88,12 +88,20 @@ new Vue({ store, router: routerTheme, data: { - collectionId: '' + collectionId: '', + defaultViewMode: '', + enabledViewModes: {} }, render: h => h(ThemeItemsList), beforeMount () { + if (this.$el.attributes['collection-id'] != undefined) this.collectionId = this.$el.attributes['collection-id'].value; + if (this.$el.attributes['default-view-mode'] != undefined) + this.defaultViewMode = this.$el.attributes['default-view-mode'].value; + if (this.$el.attributes['enabled-view-modes'] != undefined) + this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(','); + } }); \ No newline at end of file diff --git a/src/admin/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue index 232191809..59d1bdf38 100644 --- a/src/admin/pages/lists/items-page.vue +++ b/src/admin/pages/lists/items-page.vue @@ -137,7 +137,9 @@ -
+
+ :mobile-modal="false"> - - - Table - - - - Cards - - - - Grid + + + {{ registeredViewModes[viewMode].label }} @@ -309,7 +306,7 @@ - +
@@ -343,7 +340,9 @@ } }, props: { - collectionId: Number + collectionId: Number, + defaultViewMode: String, // Used only on theme + enabledViewModes: Object // Used only on theme }, computed: { items() { @@ -571,8 +570,8 @@ }, mounted() { + this.prepareFieldsAndFilters(); - this.localTableFields = JSON.parse(JSON.stringify(this.tableFields)); // Watch Scroll for shrinking header, only on Admin at collection level diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php index 92333e316..32cbe287a 100644 --- a/src/admin/tainacan-admin-i18n.php +++ b/src/admin/tainacan-admin-i18n.php @@ -194,6 +194,8 @@ return [ 'label_created_by' => __( 'Created by', 'tainacan' ), 'label_apply_changes' => __( 'Apply changes', 'tainacan' ), 'label_view_mode' => __( 'View mode', 'tainacan' ), + 'label_default_view_mode' => __( 'Default view mode', 'tainacan' ), + 'label_enabled_view_modes' => __( 'Enabled view modes', 'tainacan' ), // Instructions. More complex sentences to guide user and placeholders 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), diff --git a/src/admin/theme-items-list.vue b/src/admin/theme-items-list.vue index 66adb533f..9beb0d585 100644 --- a/src/admin/theme-items-list.vue +++ b/src/admin/theme-items-list.vue @@ -1,6 +1,8 @@ diff --git a/src/classes/repositories/class-tainacan-collections.php b/src/classes/repositories/class-tainacan-collections.php index da9f36c0b..1843582e0 100644 --- a/src/classes/repositories/class-tainacan-collections.php +++ b/src/classes/repositories/class-tainacan-collections.php @@ -133,7 +133,7 @@ class Collections extends Repository { 'enabled_view_modes' => [ 'map' => 'meta', 'title' => __( 'Enabled view modes', 'tainacan' ), - 'type' => 'string', + 'type' => 'array', 'description' => __( 'Which visualization modes will be available for the public to choose from', 'tainacan' ), 'default' => [], //'validation' => v::stringType(), diff --git a/src/js/store/modules/collection/actions.js b/src/js/store/modules/collection/actions.js index a431dd565..6d8c9b5c4 100644 --- a/src/js/store/modules/collection/actions.js +++ b/src/js/store/modules/collection/actions.js @@ -127,7 +127,18 @@ export const deleteCollection = ({ commit }, { collectionId, isPermanently }) => }); } -export const updateCollection = ({ commit }, { collection_id, name, description, slug, status, enable_cover_page, cover_page_id, moderators_ids, parent }) => { +export const updateCollection = ({ commit }, { + collection_id, + name, + description, + slug, + status, + enable_cover_page, + cover_page_id, + moderators_ids, + parent, + enabled_view_modes + }) => { return new Promise((resolve, reject) => { axios.tainacan.patch('/collections/' + collection_id, { name: name, @@ -137,7 +148,8 @@ export const updateCollection = ({ commit }, { collection_id, name, description, cover_page_id: "" + cover_page_id, enable_cover_page: enable_cover_page, moderators_ids: moderators_ids, - parent: parent + parent: parent, + enabled_view_modes: enabled_view_modes }).then( res => { commit('setCollection', { id: collection_id, @@ -148,7 +160,8 @@ export const updateCollection = ({ commit }, { collection_id, name, description, enable_cover_page: enable_cover_page, cover_page_id: cover_page_id, moderators_ids: moderators_ids, - parent: parent + parent: parent, + enabled_view_modes: enabled_view_modes }); resolve( res.data ); }).catch( error => {