Create post target picker

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;
+}

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
 	 * 

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))
+			})
+
+		});
+
+	});
+	}
+
+}

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",