From 67b3e4414d735968cc5a9c6dc9a6ade72f5b23d6 Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Sun, 19 May 2019 17:16:18 +0200 Subject: [PATCH] Create post target picker --- assets/css/components/posts/targetPicker.css | 47 ++++++ assets/js/components/posts/interface.js | 7 + assets/js/components/posts/targetPicker.js | 162 +++++++++++++++++++ system/config/dev.config.php | 2 + 4 files changed, 218 insertions(+) create mode 100644 assets/css/components/posts/targetPicker.css create mode 100644 assets/js/components/posts/targetPicker.js diff --git a/assets/css/components/posts/targetPicker.css b/assets/css/components/posts/targetPicker.css new file mode 100644 index 00000000..f9ea3bd0 --- /dev/null +++ b/assets/css/components/posts/targetPicker.css @@ -0,0 +1,47 @@ +/** + * Post target picker + * + * @author Pierre HUBERT + */ + +.posts-target-picker { + display: flex; + flex-wrap: wrap; + justify-content: start; +} + +.posts-target-picker .title { + width: 100%; + margin-bottom: 10px; + margin-top: 20px; +} + +.posts-target-picker .title:first-child { + margin-top: 0px; +} + +.posts-target-picker > div { + padding: 5px; + cursor: pointer; + border-radius: 5px; + display: flex; + flex-direction: column; + align-items: center; + width: 95px; + text-align: center; +} + +.posts-target-picker > div:hover { + background-color: #0003; +} + +.posts-target-picker > div:active { + background-color: black; + color: white; +} + +.posts-target-picker img { + height: 30px; + width: 30px; + margin-right: 5px; +} \ No newline at end of file diff --git a/assets/js/components/posts/interface.js b/assets/js/components/posts/interface.js index 7e1ae358..071d9715 100644 --- a/assets/js/components/posts/interface.js +++ b/assets/js/components/posts/interface.js @@ -122,6 +122,13 @@ ComunicWeb.components.posts.interface = { }, + /** + * Get the list of available targets where user can create posts + */ + getAvailableTargets: function(){ + return api("posts/getAvailableTargets", null, true); + }, + /** * Change post visibility level * diff --git a/assets/js/components/posts/targetPicker.js b/assets/js/components/posts/targetPicker.js new file mode 100644 index 00000000..10db80a3 --- /dev/null +++ b/assets/js/components/posts/targetPicker.js @@ -0,0 +1,162 @@ +/** + * Posts target picker + * + * @author Pierre HUBERT + */ + +class SelectedPostTarget { + constructor(user, group){ + /** @type {User} */ + this.user = user; + + /** @type {Group} */ + this.group = group + } + + get isUser() { + return this.user != null; + } + + get isGroup() { + return this.group != null; + } +} + +class PostTargetPicker { + + /** + * Show post target picker + * + * @returns {Promise} Promise with information about the selected target + */ + static async show() { + + const dialog = ComunicWeb.common.messages.createDialogSkeleton({ + title: "Choose post destination", + }); + $(dialog.modal).modal("show"); + + const closeFunction = () => { + $(dialog.modal).modal("hide"); + emptyElem(dialog.modal); + dialog.modal.remove(); + }; + + const loadErrorFunction = () => { + closeFunction(); + notify("Could not get the list of possible targets !", "danger"); + } + + dialog.cancelButton.addEventListener("click", closeFunction); + dialog.closeModal.addEventListener("click", closeFunction); + + //Show loading message + const loadingMessage = + ComunicWeb.common.messages.createLoadingCallout(dialog.modalBody); + + // Get the list of posts + const list = await ComunicWeb.components.posts.interface.getAvailableTargets().catch(e => {}); + + loadingMessage.remove(); + + // Check for errors + if(!list) + return loadErrorFunction(); + + //Get information about related users and groups + const users = await getUsers(list.friends).catch(e => {}); + const groups = await getGroups(list.groups).catch(e => {}); + + if(!users || !groups) + return loadErrorFunction(); + + // Display the list of option and wait for user response + const result = await this._showResults(dialog.modalBody, list, users, groups); + closeFunction(); + return result; + } + + + static _showResults(target, list, users, groups) { + + return new Promise((resolve, reject) => { + + // Apply the list of targets + target.className += " posts-target-picker"; + + // Friends + createElem2({ + appendTo: target, + type: "strong", + class: "title", + innerHTML: "Friends" + }); + + list.friends.forEach(id => { + + const user = users.get(id); + + createElem2({ + appendTo: target, + type: "div", + class: "friend-elem", + children: [ + + // Account image + createElem2({ + type: "img", + class: "img-circle user-image", + src: user.image + }), + + // User name + createElem2({ + type: "span", + innerHTML: user.fullName + }), + ], + onclick: (e) => resolve(new SelectedPostTarget(user, null)) + }) + + }); + + // Groups + createElem2({ + appendTo: target, + type: "strong", + class: "title", + innerHTML: "Groups" + }); + + list.groups.forEach(id => { + + const group = groups.get(id); + + createElem2({ + appendTo: target, + type: "div", + class: "group-elem", + children: [ + + // Account image + createElem2({ + type: "img", + class: "user-image", + src: group.icon_url + }), + + // User name + createElem2({ + type: "span", + innerHTML: group.name + }), + ], + onclick: (e) => resolve(new SelectedPostTarget(null, group)) + }) + + }); + + }); + } + +} \ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 1825f51d..98de8d12 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -207,6 +207,7 @@ class Dev { "css/components/posts/ui.css", "css/components/posts/form.css", "css/components/posts/edit.css", + "css/components/posts/targetPicker.css", //Movies picker "css/components/movies/picker.css", @@ -406,6 +407,7 @@ class Dev { "js/components/posts/ui.js", "js/components/posts/form.js", "js/components/posts/edit.js", + "js/components/posts/targetPicker.js", //Comments component "js/components/comments/ui.js",