From 9d1ebf58993fd27118072bf35667aa1f4309f96d Mon Sep 17 00:00:00 2001 From: Pierre HUBERT Date: Mon, 15 Mar 2021 18:04:20 +0100 Subject: [PATCH] Create group tabs --- assets/css/pages/groups/sections/header.css | 18 +++ assets/js/common/messages.js | 4 +- assets/js/pages/groups/main.js | 121 +++++++++----- assets/js/pages/groups/pages/group.js | 110 ------------- assets/js/pages/groups/pages/posts.js | 56 +++++++ assets/js/pages/groups/sections/header.js | 149 ++++-------------- assets/js/pages/groups/sections/tabs.js | 38 +++++ assets/js/pages/virtualDirectory/page.js | 2 +- assets/js/typings/Group.d.ts | 26 +++ .../pages/groups/sections/GroupTabs.html | 13 ++ system/config/dev.config.php | 3 +- 11 files changed, 271 insertions(+), 269 deletions(-) delete mode 100644 assets/js/pages/groups/pages/group.js create mode 100644 assets/js/pages/groups/pages/posts.js create mode 100644 assets/js/pages/groups/sections/tabs.js create mode 100644 assets/js/typings/Group.d.ts create mode 100644 assets/templates/pages/groups/sections/GroupTabs.html diff --git a/assets/css/pages/groups/sections/header.css b/assets/css/pages/groups/sections/header.css index c803b6bc..9a402c92 100644 --- a/assets/css/pages/groups/sections/header.css +++ b/assets/css/pages/groups/sections/header.css @@ -34,4 +34,22 @@ .group-header .col-md-4 { display: table; margin: auto; +} + +.group-header .box-body { + display: flex; +} + +.group-header .box-body .spacer { + flex: 2; +} + + +.group-header .box-body .col-metadata { + flex: 1; + display: flex; + flex-direction: column; + align-items: baseline; + justify-content: center; + min-width: 160px; } \ No newline at end of file diff --git a/assets/js/common/messages.js b/assets/js/common/messages.js index 118f5e9e..856e4f41 100644 --- a/assets/js/common/messages.js +++ b/assets/js/common/messages.js @@ -11,7 +11,7 @@ * @param {String} calloutMessage The message of the callout * @param {String} calloutType The type of the callout (danger, info, warning, success) */ -ComunicWeb.common.messages.createCalloutElem = function(calloutTitle, calloutMessage, calloutType){ +function createCallout(calloutTitle, calloutMessage, calloutType){ //Prepare callout message calloutMessage = "

" + calloutMessage + "

"; @@ -39,6 +39,8 @@ ComunicWeb.common.messages.createCalloutElem = function(calloutTitle, calloutMes return calloutElem; } +ComunicWeb.common.messages.createCalloutElem = createCallout; + /** * Create loading callout element * diff --git a/assets/js/pages/groups/main.js b/assets/js/pages/groups/main.js index a28ec972..2423b384 100644 --- a/assets/js/pages/groups/main.js +++ b/assets/js/pages/groups/main.js @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -ComunicWeb.pages.groups.main = { +const GroupsPage = { /** * Open groups page @@ -12,50 +12,95 @@ ComunicWeb.pages.groups.main = { * @param {object} args Optionnal arguments * @param {HTMLElement} target The target for the page */ - open: function(args, target){ + open: async function(args, target){ - //Determine which page / group should be opened - if(!args.subfolder) - var page = "main"; - - else { + try { - //Extract the name of the page from the URL - if(!args.subfolder.includes("/")) - var page = args.subfolder; + //Determine which page / group should be opened + if(args.groupID) + page = args.groupID; + + else if(!args.subfolder) + var page = "main"; + else { - var page = args.subfolder.split("/")[0]; + + //Extract the name of the page from the URL + if(!args.subfolder.includes("/")) + var page = args.subfolder; + else { + var page = args.subfolder.split("/")[0]; + } + } - } + //Check if the main page has to be opened + if(page == "main"){ + if(!signed_in()) openPage("login"); + return ComunicWeb.pages.groups.pages.main.open(target); + } - //Check if the main page has to be opened - if(page == "main"){ - if(!signed_in()) openPage("login"); - return ComunicWeb.pages.groups.pages.main.open(target); - } + //Check if the page to create a group has to be opened + else if (page == "create"){ + if(!signed_in()) openPage("login"); + return ComunicWeb.pages.groups.pages.create.open(target); + } - //Check if the page to create a group has to be opened - else if (page == "create"){ - if(!signed_in()) openPage("login"); - return ComunicWeb.pages.groups.pages.create.open(target); - } + //Else determine which group page to open (specified after the ID of the group) + var groupID = page; + if(!args.subfolder || args.subfolder.split("/").length < 2){ + page = "posts"; + } + else { + //Extract the page to open from the URL + page = args.subfolder.split("/")[1]; - //Else determine which group page to open (specified after the ID of the group) - var groupID = page; - if(args.subfolder.split("/").length < 2){ - page = "group"; - } - else { - //Extract the page to open from the URL - page = args.subfolder.split("/")[1]; + //Check if there is nothing after "/" + if(page.length < 2) + page = "posts"; + } - //Check if there is nothing after "/" - if(page.length < 2) - page = "group"; - } + /** @type {AdvancedGroupInfo} Get information about the group*/ + const group = await new Promise((res, rej) => GroupsInterface.getAdvancedInfo(groupID, function(result){ - //Check which page to open + //Check for errors + if(result.error){ + + //Check the code of the error + if(result.error.code == 401) + ComunicWeb.pages.groups.pages.forbidden.open(id, target); + + //The group does not exists + else + + ComunicWeb.common.error.pageNotFound({}, target); + return; + } + + res(result); + + })); + + //Update page title + ComunicWeb.common.pageTitle.setTitle(group.name); + + // Display the header for the group + GroupSectionHeader.display(group, target); + + // Display the tabs of the group + await GroupTabs.show(group, target, page); + + } catch(e) { + console.error(e); + target.appendChild(createCallout( + tr("Error"), + tr("Failed to load group page!"), + "danger" + )) + } + + + /*//Check which page to open if(page == "group") ComunicWeb.pages.groups.pages.group.open(groupID, target); @@ -68,7 +113,9 @@ ComunicWeb.pages.groups.main = { //Unrecognized page else - ComunicWeb.common.error.pageNotFound(args, target); + ComunicWeb.common.error.pageNotFound(args, target);*/ } -}; \ No newline at end of file +}; + +ComunicWeb.pages.groups.main = GroupsPage; \ No newline at end of file diff --git a/assets/js/pages/groups/pages/group.js b/assets/js/pages/groups/pages/group.js deleted file mode 100644 index 430839a2..00000000 --- a/assets/js/pages/groups/pages/group.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * Group page - * - * @author Pierre HUBERT - */ - -ComunicWeb.pages.groups.pages.group = { - - /** - * Open (display) a group page - * - * @param {Number} id The ID of the group to display - * @param {HTMLElement} target The target for the page - */ - open: function(id, target){ - - //Get information about the group - ComunicWeb.components.groups.interface.getAdvancedInfo(id, function(result){ - - //Check for errors - if(result.error){ - - //Check the code of the error - if(result.error.code == 401){ - ComunicWeb.pages.groups.pages.forbidden.open(id, target); - } - - else - //The group does not exists - ComunicWeb.common.error.pageNotFound({}, target); - - } - - else - //Display group page - ComunicWeb.pages.groups.pages.group.display(id, result, target); - - }); - - }, - - /** - * Display information about a group - * - * @param {Number} id The ID of the group to display - * @param {Object} info Information about the group to display - * @param {HTMLElement} target The target for the page - */ - display: function(id, info, target){ - - //Update page title - ComunicWeb.common.pageTitle.setTitle(info.name); - - //Create page row - var pageRow = createElem2({ - appendTo: target, - type: "div", - class: "row group-page" - }); - - //Create header column - var headerColumn = createElem2({ - appendTo: pageRow, - type: "div", - class: "col-md-6" - }); - - //Display the header for the group - ComunicWeb.pages.groups.sections.header.display(info, headerColumn); - - - //Check if the user can create posts or not - if(ComunicWeb.components.groups.utils.canCreatePosts(info)){ - - //Intialize posts creation form - var postFormRow = createElem2({ - appendTo: target, - type: "div", - class: "row group-page" - }); - - //Add column - var postFormCol = createElem2({ - appendTo: postFormRow, - type: "div", - class: "col-md-6" - }); - - //Display form - ComunicWeb.components.posts.form.display("group", id, postFormCol); - } - - //Display group posts - var postsRow = createElem2({ - appendTo: target, - type: "div", - class: "row group-page" - }); - - var postsCol = createElem2({ - appendTo: postsRow, - type: "div", - class: "col-md-6" - }); - - ComunicWeb.pages.groups.sections.posts.display(info, postsCol); - - } - -} \ No newline at end of file diff --git a/assets/js/pages/groups/pages/posts.js b/assets/js/pages/groups/pages/posts.js new file mode 100644 index 00000000..b820b732 --- /dev/null +++ b/assets/js/pages/groups/pages/posts.js @@ -0,0 +1,56 @@ +/** + * Group page + * + * @author Pierre HUBERT + */ + +const GroupPostsPage = { + + /** + * Display information about a group + * + * @param {Number} id The ID of the group to display + * @param {Object} info Information about the group to display + * @param {HTMLElement} target The target for the page + */ + display: function(id, info, target){ + + //Check if the user can create posts or not + if(ComunicWeb.components.groups.utils.canCreatePosts(info)){ + + //Intialize posts creation form + var postFormRow = createElem2({ + appendTo: target, + type: "div", + class: "row group-page" + }); + + //Add column + var postFormCol = createElem2({ + appendTo: postFormRow, + type: "div", + class: "col-md-6" + }); + + //Display form + ComunicWeb.components.posts.form.display("group", id, postFormCol); + } + + //Display group posts + var postsRow = createElem2({ + appendTo: target, + type: "div", + class: "row group-page" + }); + + var postsCol = createElem2({ + appendTo: postsRow, + type: "div", + class: "col-md-6" + }); + + ComunicWeb.pages.groups.sections.posts.display(info, postsCol); + + } + +} \ No newline at end of file diff --git a/assets/js/pages/groups/sections/header.js b/assets/js/pages/groups/sections/header.js index 509d2089..c0b5c15d 100644 --- a/assets/js/pages/groups/sections/header.js +++ b/assets/js/pages/groups/sections/header.js @@ -4,7 +4,7 @@ * @author Pierre HUBERT */ -ComunicWeb.pages.groups.sections.header = { +const GroupSectionHeader = { /** * Display groups page header @@ -14,29 +14,43 @@ ComunicWeb.pages.groups.sections.header = { */ display: function(info, target){ - //Create header container - var headerContainer = createElem2({ + //Create page row + var pageRow = createElem2({ appendTo: target, type: "div", + class: "row group-page" + }); + + //Create header column + var headerColumn = createElem2({ + appendTo: pageRow, + type: "div", + class: "col-md-6" + }); + + //Create header container + const headerContainer = createElem2({ + appendTo: headerColumn, + type: "div", class: "group-header box box-primary" }); //Create a row - var row = createElem2({ + const row = createElem2({ appendTo: headerContainer, type: "div", class: "box-body row" }); //First column - var firstColumn = createElem2({ + const firstColumn = createElem2({ appendTo: row, type: "div", class: "col-md-4 group-col-icon", }); //Group icon - var groupIcon = createElem2({ + const groupIcon = createElem2({ appendTo: firstColumn, type: "img", src: info.icon_url, @@ -44,7 +58,7 @@ ComunicWeb.pages.groups.sections.header = { }); //Group name - var groupName = createElem2({ + const groupName = createElem2({ appendTo: firstColumn, type: "span", class: "group-name", @@ -62,132 +76,29 @@ ComunicWeb.pages.groups.sections.header = { } - //Second column : Information about the company - var secondColumn = createElem2({ + createElem2({ appendTo: row, type: "div", - class: "col-md-4 col-info" - }); + class: "spacer" + }) - //Group URL (if any) - if(info.url != "null"){ - var urlElem = createElem2({ - appendTo: secondColumn, - type: "a", - class: "a", - href: info.url, - innerHTML: " " + info.url - }); - urlElem.target = "_blank"; - - } - - - //Group description (if any) - if(info.description != "null") - createElem2({ - appendTo: secondColumn, - type: "div", - innerHTML: " " + info.description - }); - - //Add separator - add_p(secondColumn, " "); - - - - //Third column : information about the group + // Second column : basic information about the group var thirdColumn = createElem2({ appendTo: row, type: "div", - class: "col-md-4 col-metadata" - }); - - //Add join date - createElem2({ - appendTo: thirdColumn, - type: "div", - innerHTML: ' Created '+ComunicWeb.common.date.timeDiffToStr(info.time_create)+' ago' - }); - - //Add number of members - var members = createElem2({ - appendTo: thirdColumn, - type: "div", - innerHTML: ' '+ info.number_members+' members' - }); - - //Check if the user is a moderator or an admin - if(info.membership == "administrator" || info.membership == "moderator"){ - - //Turn members information into a link - members.className = "a"; - - members.addEventListener("click", function(e){ - - openPage("groups/" + info.id + "/members"); - - }); - } - - //Group visibility - var visibility = { - open: "Open group", - private: "Private group", - secrete: "Secrete group" - }; - createElem2({ - appendTo: thirdColumn, - type: "div", - innerHTML: " " + visibility[info.visibility] - }); - - //Group registration - var levels = { - open: "Open registration", - moderated: "Moderated registration", - closed: "Closed registration" - } - createElem2({ - appendTo: thirdColumn, - type: "div", - innerHTML: " " + levels[info.registration_level] + class: "col-md-7 col-metadata" }); //Display membership level - if(signed_in()) - ComunicWeb.pages.groups.sections.membershipBlock.display(info, thirdColumn); + ComunicWeb.pages.groups.sections.membershipBlock.display(info, thirdColumn); //Display follow block if(signed_in() && ComunicWeb.components.groups.utils.isGroupMember(info)) ComunicWeb.pages.groups.sections.followBlock.display(info, thirdColumn); - //If the user is an admin, add a link to configure the page - if(signed_in() && info.membership == "administrator"){ - - var settingsLink = createElem2({ - appendTo: thirdColumn, - type: "div", - class: "a", - innerHTML: " Settings" - }); - settingsLink.addEventListener("click", function(e){ - openPage("groups/" + info.id + "/settings"); - }); - } - - //Display likes block - ComunicWeb.components.like.button.display( - "group", - info.id, - info.number_likes, - info.is_liking, - createElem2({ - appendTo: thirdColumn, - type: "div" - }) - ); }, -}; \ No newline at end of file +}; + +ComunicWeb.pages.groups.sections.header = GroupSectionHeader; \ No newline at end of file diff --git a/assets/js/pages/groups/sections/tabs.js b/assets/js/pages/groups/sections/tabs.js new file mode 100644 index 00000000..c5930f64 --- /dev/null +++ b/assets/js/pages/groups/sections/tabs.js @@ -0,0 +1,38 @@ +/** + * Group tags + * + * @author Pierre Hubert + */ + +const GroupTabs = { + + /** + * @param {AdvancedGroupInfo} group Group information + * @param {HTMLElement} target Target + * @param {String} activePage Current active page + */ + show: async function(group, target, activePage) { + // Load template + const tpl = await Page.loadHTMLTemplate("pages/groups/sections/GroupTabs.html"); + const el = document.createElement("div") + el.innerHTML = tpl; + target.appendChild(el); + + Vue.createApp({ + + data: () => { + return { + isAdmin: group.membership == "administrator", + canSeeMembers: group.membership == "administrator" || group.membership == "moderator", + activePage: activePage + } + }, + + methods: { + openPage: (uri) => openPage("groups/" + group.id + "/" + uri) + } + + }).mount(el); + } + +} \ No newline at end of file diff --git a/assets/js/pages/virtualDirectory/page.js b/assets/js/pages/virtualDirectory/page.js index bfc7fab7..4c69e5c2 100644 --- a/assets/js/pages/virtualDirectory/page.js +++ b/assets/js/pages/virtualDirectory/page.js @@ -28,7 +28,7 @@ ComunicWeb.pages.virtualDirectory.page = { //Check if the page is a group if(r.kind == "group"){ - ComunicWeb.pages.groups.pages.group.open(r.id, target); + GroupsPage.open({groupID: r.id}, target); } }); diff --git a/assets/js/typings/Group.d.ts b/assets/js/typings/Group.d.ts new file mode 100644 index 00000000..6960294e --- /dev/null +++ b/assets/js/typings/Group.d.ts @@ -0,0 +1,26 @@ +/** + * Group typings + * + * @author Pierre Hubert + */ + +declare interface Group { + id: Number, + name: String, + icon_url: String, + number_members: Number, + visibility: "open"|"private"|"secrete", + registration_level: "open"|"moderated"|"closed", + posts_level: "moderators"|"members", + virtual_directory: String, + membership: "administrator"|"moderator"|"member"|"invited"|"pending"|"visitor", + following: Boolean, +} + +declare interface AdvancedGroupInfo extends Group { + time_create: Number, + description: String, + url: String, + number_likes: Number, + is_liking: Boolean +} \ No newline at end of file diff --git a/assets/templates/pages/groups/sections/GroupTabs.html b/assets/templates/pages/groups/sections/GroupTabs.html new file mode 100644 index 00000000..aee5af89 --- /dev/null +++ b/assets/templates/pages/groups/sections/GroupTabs.html @@ -0,0 +1,13 @@ + +
+
+ +
+ +
+
\ No newline at end of file diff --git a/system/config/dev.config.php b/system/config/dev.config.php index 4cc6b0c4..5e54350f 100644 --- a/system/config/dev.config.php +++ b/system/config/dev.config.php @@ -529,7 +529,7 @@ class Dev { //Groups sub pages "js/pages/groups/pages/main.js", "js/pages/groups/pages/create.js", - "js/pages/groups/pages/group.js", + "js/pages/groups/pages/posts.js", "js/pages/groups/pages/settings.js", "js/pages/groups/pages/members.js", "js/pages/groups/pages/forbidden.js", @@ -539,6 +539,7 @@ class Dev { "js/pages/groups/sections/membershipBlock.js", "js/pages/groups/sections/posts.js", "js/pages/groups/sections/followBlock.js", + "js/pages/groups/sections/tabs.js", //User settings page