-
-
-
-
-
-
{{ $i18n.get('instruction_image_upload_box') }}
-
-
- ![]()
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
{{ $i18n.get('instruction_image_upload_box') }}
-
-
- ![]()
-
-
+
+
+
+
-
+ class="button is-rounred is-secondary"
+ id="button-edit-thumbnail"
+ :aria-label="$i18n.get('label_button_edit_thumb')"
+ @click="editImage($event, true)">
+
+ {{ $i18n.get('label_empty_thumbnail') }}
+ ![]()
+
+
-
+
+
+ {{ $i18n.get('label_empty_header_image') }}
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
- {{ props.option.title.rendered }}
-
- No esults found
-
-
-
-
+
-
-
-
+
+
+
+
+ {{ props.option.name }}
+
+ {{ $i18n.get('info_no_user_found') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {{ $i18n.get('label_enable_cover_page') }}
-
-
+
+
+
+ {{ $i18n.get('label_enable_cover_page') }}
+
+
-
- -
-
+
-
+
+ {{ moderator.name }} + +
+
+ {{ $i18n.get('info_no_moderator_on_collection') }}
+
+
@@ -308,8 +320,9 @@ export default {
slug: '',
enable_cover_page: '',
featured_image: '',
- cover_image: '',
- files:[]
+ header_image: '',
+ files:[],
+ moderators_ids: []
},
thumbnail: {},
cover: {},
@@ -337,12 +350,13 @@ export default {
isNewCollection: false,
// Fream Uploader variables
frameUploader: undefined,
- your_img_src: '',
- your_img_id: '',
- you_have_img: false,
- upload_link: '',
- custom_img_id: ''
-
+ thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
+ headerPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_rectangle.png',
+ isFetchingModerators: false,
+ users: [],
+ moderators: [],
+ collections: [],
+ isFetchingCollections: true
}
},
methods: {
@@ -352,22 +366,32 @@ export default {
'fetchCollection',
'sendAttachment',
'updateThumbnail',
- 'updateCover',
+ 'updateHeaderImage',
'fetchPages',
- 'fetchPage'
+ 'fetchPage',
+ 'fetchUsers',
+ 'fetchCollectionsForParent'
+ ]),
+ ...mapActions('fields', [
+ 'fetchFields'
]),
onSubmit() {
- // Puts loading on Draft Collection creation
this.isLoading = true;
+ this.form.moderators_ids = [];
+ for (let moderator of this.moderators)
+ this.form.moderators_ids.push(moderator.id);
+
let data = {
collection_id: this.collectionId,
name: this.form.name,
description: this.form.description,
enable_cover_page: this.form.enable_cover_page,
- cover_page_id: this.form.cover_page_id,
+ cover_page_id: this.form.cover_page_id,
slug: this.form.slug,
- status: this.form.status
+ status: this.form.status,
+ moderators_ids: this.form.moderators_ids,
+ parent: this.form.parent
};
this.updateCollection(data).then(updatedCollection => {
@@ -427,12 +451,25 @@ export default {
this.form.description = this.collection.description;
this.form.enable_cover_page = this.collection.enable_cover_page;
this.form.cover_page_id = this.collection.cover_page_id;
- this.form.cover_page_id = this.collection.cover_page_id;
this.form.slug = this.collection.slug;
+ this.form.parent = this.collection.parent;
+ this.moderators = [];
// Pre-fill status with publish to incentivate it
this.form.status = 'publish';
+ // Generates options for parent collection
+ this.isFetchingCollections = true;
+ this.fetchCollectionsForParent()
+ .then((collections) => {
+ this.collections = collections;
+ this.isFetchingCollections = false;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ this.isFetchingCollections = false;
+ });
+
this.isLoading = false;
})
@@ -444,65 +481,9 @@ export default {
cancelBack(){
this.$router.push(this.$routerHelper.getCollectionsPath());
},
- uploadThumbnail($event) {
-
- this.sendAttachment({ collection_id: this.collectionId, file: $event[0] })
- .then((res) => {
-
- this.updateThumbnail({collectionId: this.collectionId, thumbnailId: res.id})
- .then((res) => {
- this.collection.featured_image = res.featured_image;
- })
- .catch((error) => {
- this.$console.error(error);
- });
- })
- .catch((error) => {
- this.$console.error(error);
- });
-
- },
- deleteThumbnail() {
-
- this.updateThumbnail({collectionId: this.collectionId, thumbnailId: 0})
- .then(() => {
- this.collection.featured_image = false;
- })
- .catch((error) => {
- this.$console.error(error);
- });
- },
- uploadCover($event) {
-
- this.sendAttachment({ collection_id: this.collectionId, file: $event[0] })
- .then((res) => {
-
- this.updateCover({collectionId: this.collectionId, coverId: res.id})
- .then((res) => {
- this.collection.cover_image = res.cover_image;
- })
- .catch((error) => {
- this.$console.error(error);
- });
- })
- .catch((error) => {
- this.$console.error(error);
- });
-
- },
- deleteCover() {
-
- this.updateCover({collectionId: this.collectionId, coverId: 0})
- .then(() => {
- this.collection.cover_image = false;
- })
- .catch((error) => {
- this.$console.error(error);
- });
- },
- fecthCoverPages() {
+ fecthCoverPages(search) {
this.isFetchingPages = true;
- this.fetchPages()
+ this.fetchPages(search)
.then((pages) => {
this.coverPages = pages;
this.isFetchingPages = false;
@@ -518,12 +499,37 @@ export default {
this.coverPageTitle = this.coverPage.title.rendered;
this.coverPageEditPath = tainacan_plugin.admin_url + '/post.php?post=' + selectedPage.id + '&action=edit';
},
+ fecthModerators(search) {
+ this.isFetchingModerators = true;
+
+ let exceptions = [];
+ for (let user of this.moderators)
+ exceptions.push(parseInt(user.id));
+ exceptions.push(this.collection.author_id);
+
+ this.fetchUsers({ search: search, exceptions: exceptions})
+ .then((users) => {
+ this.users = users;
+ this.isFetchingModerators = false;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ this.isFetchingPages = false;
+ });
+ },
+ onAddModerator(user) {
+ this.moderators.push({'id': user.id, 'name': user.name});
+ },
+ removeModerator(moderatorIndex) {
+ this.moderators.splice(moderatorIndex, 1);
+ },
removeCoverPage() {
this.coverPage = {};
this.coverPageTitle = '';
this.form.cover_page_id = '';
},
- openFrameUploader(event) {
+ editImage(event, isThumbnail) {
+ 'use strict';
event.preventDefault();
// If the media frame already exists, reopen it.
@@ -534,32 +540,126 @@ export default {
// Create a new media frame
this.frameUploader = wp.media.frames.frame_uploader = wp.media({
- title: 'Select or Upload Media Of Your Chosen Persuasion',
+ frame: 'select',
+ title: 'Select or Upload and Image.',
button: {
- text: 'Use this media'
+ text: 'Select and Crop',
+ close: false
},
multiple: false,
+ library: {
+ type: 'image',
+ uploadedTo: this.collectionId
+ },
+ uploader: true,
+ states: [
+ new wp.media.controller.Library({
+ title: 'Corta aÃ',
+ library: wp.media.query({ type: 'image' }),
+ multiple: false,
+ date: false,
+ priority: 20,
+ suggestedWidth: 1000,
+ suggestedHeight: 200
+ }),
+ new wp.media.controller.Cropper({
+ imgSelectOptions: {
+ enable: true,
+ handles: true,
+ imageHeight: 200,
+ imageWidth: 1000,
+ instance: true,
+ keys: true,
+ maxWidth: 1000,
+ persistent: true,
+ x1: 0,
+ x2: 250,
+ y1: 0,
+ y2: 50
+ }
+ })
+ ]
});
wp.media.view.settings.post = {
- id: this.collectionId,
- featuredImageId: this.collection.featured_img_id
+ id: this.collectionId
}
- //console.log(wp.wp_get_image_editor())
-
this.frameUploader.on('select', () => {
-
+ this.frameUploader.state('cropper').set( 'canSkipCrop', true );
+ this.frameUploader.setState('cropper');
+ });
+
+ this.frameUploader.on('skippedcrop', () => {
let media = this.frameUploader.state().get( 'selection' ).first().toJSON();
+
+ if (isThumbnail) {
+ this.updateThumbnail({collectionId: this.collectionId, thumbnailId: media.id})
+ .then((res) => {
+ this.collection.featured_image = res.featured_image;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ } else {
+ this.updateHeaderImage({collectionId: this.collectionId, headerImageId: media.id})
+ .then((res) => {
+ this.collection.header_image = res.header_image;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ }
- console.log(media);
+ });
+
+ this.frameUploader.on('cropped', (croppedImage) => {
+
+ // it is not cropping where we choose, but almost there
+
+ if (isThumbnail) {
+ this.updateThumbnail({collectionId: this.collectionId, thumbnailId: croppedImage.attachment_id})
+ .then((res) => {
+ this.collection.featured_image = res.featured_image;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ } else {
+ this.updateHeaderImage({collectionId: this.collectionId, headerImageId: croppedImage.attachment_id})
+ .then((res) => {
+ this.collection.header_image = res.header_image;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ }
});
this.frameUploader.open();
- }
-
+ },
+ deleteThumbnail() {
+
+ this.updateThumbnail({collectionId: this.collectionId, thumbnailId: 0})
+ .then(() => {
+ this.collection.featured_image = false;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ },
+ deleteHeaderImage() {
+
+ this.updateHeaderImage({collectionId: this.collectionId, headerImageId: 0})
+ .then(() => {
+ this.collection.header_image = false;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ });
+ },
},
created(){
@@ -584,7 +684,11 @@ export default {
this.form.status = this.collection.status;
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.moderators = JSON.parse(JSON.stringify(this.collection.moderators));
+
+ // Generates CoverPage from current cover_page_id info
if (this.form.cover_page_id != undefined && this.form.cover_page_id != '') {
this.isFetchingPages = true;
@@ -600,11 +704,23 @@ export default {
this.$console.error(error);
this.isFetchingPages = false;
});
- }
+ }
+
+ // Generates options for parent collection
+ this.isFetchingCollections = true;
+ this.fetchCollectionsForParent()
+ .then((collections) => {
+ this.collections = collections;
+ this.isFetchingCollections = false;
+ })
+ .catch((error) => {
+ this.$console.error(error);
+ this.isFetchingCollections = false;
+ });
this.isLoading = false;
});
- }
+ }
}
}
@@ -612,21 +728,48 @@ export default {
diff --git a/src/admin/components/edition/field-edition-form.vue b/src/admin/components/edition/field-edition-form.vue
index 88979f591..06bdbd1a7 100644
--- a/src/admin/components/edition/field-edition-form.vue
+++ b/src/admin/components/edition/field-edition-form.vue
@@ -1,125 +1,178 @@
-