mirror of
https://github.com/pierre42100/ComunicWeb
synced 2025-06-20 04:45:17 +00:00
Create group tabs
This commit is contained in:
@ -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: "<i class='fa fa-link'></i> " + info.url
|
||||
});
|
||||
urlElem.target = "_blank";
|
||||
|
||||
}
|
||||
|
||||
|
||||
//Group description (if any)
|
||||
if(info.description != "null")
|
||||
createElem2({
|
||||
appendTo: secondColumn,
|
||||
type: "div",
|
||||
innerHTML: "<i class='fa fa-file-text-o'></i> " + 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: '<i class="fa fa-clock-o"></i> Created '+ComunicWeb.common.date.timeDiffToStr(info.time_create)+' ago'
|
||||
});
|
||||
|
||||
//Add number of members
|
||||
var members = createElem2({
|
||||
appendTo: thirdColumn,
|
||||
type: "div",
|
||||
innerHTML: '<i class="fa fa-group"></i> '+ 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: "<i class='fa fa-lock'></i> " + visibility[info.visibility]
|
||||
});
|
||||
|
||||
//Group registration
|
||||
var levels = {
|
||||
open: "Open registration",
|
||||
moderated: "Moderated registration",
|
||||
closed: "Closed registration"
|
||||
}
|
||||
createElem2({
|
||||
appendTo: thirdColumn,
|
||||
type: "div",
|
||||
innerHTML: "<i class='fa fa-pencil'></i> " + 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: " <i class='fa fa-gear'></i>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"
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
ComunicWeb.pages.groups.sections.header = GroupSectionHeader;
|
||||
38
assets/js/pages/groups/sections/tabs.js
Normal file
38
assets/js/pages/groups/sections/tabs.js
Normal file
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user