From da64011e581832a0eda4990034fbea4b6f33ab24 Mon Sep 17 00:00:00 2001 From: Pierre Date: Mon, 5 Jun 2017 16:03:14 +0200 Subject: [PATCH] User select functionnal --- .../css/components/userSelect/userSelect.css | 10 +++ assets/js/common/functionsSchema.js | 7 ++ assets/js/components/userSelect/userSelect.js | 78 +++++++++++++++++++ assets/js/pages/home/home.js | 12 +++ corePage/config/dev.config.php | 4 + 5 files changed, 111 insertions(+) create mode 100644 assets/css/components/userSelect/userSelect.css create mode 100644 assets/js/components/userSelect/userSelect.js diff --git a/assets/css/components/userSelect/userSelect.css b/assets/css/components/userSelect/userSelect.css new file mode 100644 index 00000000..af6243c4 --- /dev/null +++ b/assets/css/components/userSelect/userSelect.css @@ -0,0 +1,10 @@ +/** + * Users select + * + * @author Pierre HUBERT + */ + +.user-select-image { + border-radius: 50%; + width: 25px; +} \ No newline at end of file diff --git a/assets/js/common/functionsSchema.js b/assets/js/common/functionsSchema.js index bead7442..697ce492 100644 --- a/assets/js/common/functionsSchema.js +++ b/assets/js/common/functionsSchema.js @@ -502,6 +502,13 @@ var ComunicWeb = { }, }, + + /** + * User selector + */ + userSelect:{ + //TODO : implement + } }, /** diff --git a/assets/js/components/userSelect/userSelect.js b/assets/js/components/userSelect/userSelect.js new file mode 100644 index 00000000..b89fab76 --- /dev/null +++ b/assets/js/components/userSelect/userSelect.js @@ -0,0 +1,78 @@ +/** + * User selector (using select2) + * + * @author Pierre HUBERT + */ + +ComunicWeb.components.userSelect = { + + /** + * Initialize user selector for an element of the page + * + * @param {HTMLElement} inputSelect The target select input + * @return {Boolean} True for a success + */ + init: function(inputSelect){ + + //Log action + ComunicWeb.debug.logMessage("INFO : Initialize user selector"); + + $(inputSelect).select2({ + ajax: { + transport: function(params, success, failure){ + + //Check if some data were passed or not + if(!params.data.term) + return false; + + //Retrive users list + ComunicWeb.user.userInfos.search(params.data.term, function(usersInfos){ + + if(usersInfos.error) + return; // Doesn't do anything failure(); + else{ + //Prepare results processing + returnData = { + results: [] + } + + //Processing results + for(i in usersInfos){ + returnData.results.push({ + id: usersInfos[i].userID, + text: usersInfos[i].firstName + " " + usersInfos[i].lastName, + accountImage: usersInfos[i].accountImage, + }); + } + + //Return result + success(returnData); + } + }); + + }, + delay: 250, + }, + + //Format result displaying + templateResult: ComunicWeb.components.userSelect.formatUser, + }); + + }, + + /** + * Format the display of a user + * + * @param {Object} infos Informations about the user + * @return {String} The formated informations + */ + formatUser: function(infos){ + console.log(infos); + + if(!infos.id) + return infos.id; + + return $(" " + infos.text + ""); + }, + +}; \ No newline at end of file diff --git a/assets/js/pages/home/home.js b/assets/js/pages/home/home.js index 1c9e7a4b..cee33b34 100644 --- a/assets/js/pages/home/home.js +++ b/assets/js/pages/home/home.js @@ -27,6 +27,18 @@ ComunicWeb.pages.home.home = { }); loginButton.innerHTML="Logout"; targetElement.appendChild(loginButton); + + //Create select user element + var formGroup = createElem("div", targetElement); + formGroup.className = "form-group"; + var selectElement = createElem("select", formGroup); + selectElement.className = "form-control select2"; + selectElement.setAttribute("multiple", "multiple"); + selectElement.setAttribute("data-placeholder", "Select users"); + + //Initialize user selector + ComunicWeb.components.userSelect.init(selectElement); + } else{ //Display landing page diff --git a/corePage/config/dev.config.php b/corePage/config/dev.config.php index 1069b2e7..2fffc2ce 100644 --- a/corePage/config/dev.config.php +++ b/corePage/config/dev.config.php @@ -16,6 +16,7 @@ $config['CSSfiles'] = array( "%PATH_ASSETS%3rdparty/adminLTE/plugins/ionicons/css/ionicons.min.css", "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/square/blue.css", "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/flat/blue.css", + "%PATH_ASSETS%3rdparty/adminLTE/plugins/select2/select2.min.css", "%PATH_ASSETS%3rdparty/adminLTE/dist/css/AdminLTE.min.css", "%PATH_ASSETS%3rdparty/adminLTE/dist/css/skins/_all-skins.min.css", @@ -29,6 +30,7 @@ $config['CSSfiles'] = array( "%PATH_ASSETS%css/components/friends/friendsBar.css", "%PATH_ASSETS%css/components/discussions/manager.css", "%PATH_ASSETS%css/components/discussions/windows.css", + "%PATH_ASSETS%css/components/userSelect/userSelect.css", ); //JS files to include (at the end of the page) @@ -39,6 +41,7 @@ $config['JSfiles'] = array( "%PATH_ASSETS%3rdparty/adminLTE/plugins/jquery-ui/jquery-ui.min.js", "%PATH_ASSETS%3rdparty/adminLTE/plugins/iCheck/icheck.min.js", "%PATH_ASSETS%3rdparty/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js", + "%PATH_ASSETS%3rdparty/adminLTE/plugins/select2/select2.js", //remove .min to debug "%PATH_ASSETS%3rdparty/adminLTE/dist/js/app.min.js", //Bootstrap notify @@ -78,6 +81,7 @@ $config['JSfiles'] = array( "%PATH_ASSETS%js/components/discussions/manager.js", "%PATH_ASSETS%js/components/discussions/list.js", "%PATH_ASSETS%js/components/discussions/windows.js", + "%PATH_ASSETS%js/components/userSelect/userSelect.js", //User scripts "%PATH_ASSETS%js/user/loginTokens.js",