-
Antoine Dupré authoredAntoine Dupré authored
custom-tzcld.js 29.37 KiB
import("./utils.js").then((utils) => {
import(utils.coreVersion()).then((core) => {
core.Sib.register({
name: "customtzcld-display-community-widget",
use: [core.StoreMixin],
empty() {
this.element.innerHTML = "";
},
async populate() {
this.element.innerHTML = `
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
</div>`;
let tzcldprofile = {
contact_first_name: await this.resource.contact_first_name,
contact_last_name: await this.resource.contact_last_name,
contact_job: await this.resource.contact_job,
kind: await this.resource.kind,
features: await this.resource.features,
region: await this.resource.region,
contact_mail_1: await this.resource.contact_mail_1,
contact_mail_2: await this.resource.contact_mail_2,
contact_mail_3: await this.resource.contact_mail_3,
membership: await this.resource.membership,
last_contribution_year: await this.resource.last_contribution_year
};
if("label" in this.element.attributes) {
for(let ignore of this.element.attributes['label'].value.split(',')) {
tzcldprofile[ignore.trim()] = null;
}
}
let render = "<div class='border-top margin-medium border-color-grey'></div>";
if(tzcldprofile.features) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Caractéristiques</span>: ${tzcldprofile.features}</div>`;
}
if(tzcldprofile.region) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Région / Département</span>: ${tzcldprofile.region}</div>`;
}
if(tzcldprofile.contact_mail_1) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 1</span>: ${tzcldprofile.contact_mail_1}</div>`;
}
if(tzcldprofile.contact_mail_2) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 2</span>: ${tzcldprofile.contact_mail_2}</div>`;
}
if(tzcldprofile.contact_mail_3) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Mail contact 3</span>: ${tzcldprofile.contact_mail_3}</div>`;
}
if(tzcldprofile.contact_first_name || tzcldprofile.contact_last_name) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Personne de contact</span>: `;
if(tzcldprofile.contact_first_name) render += `${tzcldprofile.contact_first_name}`;
if(tzcldprofile.contact_last_name && tzcldprofile.contact_first_name) render += ` `;
if(tzcldprofile.contact_last_name) render += `${tzcldprofile.contact_last_name}`;
render += `</div>`;
}
if(tzcldprofile.contact_job) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Poste occupé par le contact</span>: ${tzcldprofile.contact_job}</div>`;
}
if(tzcldprofile.kind) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Type de territoire</span>: ${await tzcldprofile.kind['name']}</div>`;
}
if(tzcldprofile.membership) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>: <input type="checkbox" checked disabled /></div>`;
}
if(!tzcldprofile.membership) { render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>: <input type="checkbox" disabled /></div>`;
}
if(tzcldprofile.last_contribution_year) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Année dernière cotisation</span>: ${tzcldprofile.last_contribution_year}</div>`;
}
render += "<div class='border-top margin-medium border-color-grey'></div>";
this.element.innerHTML = render;
},
});
core.Sib.register({
name: "customtzcld-display-profile-widget",
use: [core.StoreMixin],
empty() {
//console.debug();
this.element.innerHTML = "";
},
async populate() {
this.element.innerHTML = `
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
</div>`;
let tzcldprofile = {
description: await this.resource.description,
postal_code: await this.resource.postal_code,
address: await this.resource.address,
phone: await this.resource.phone,
position: await this.resource.position,
membership: await this.resource.membership,
last_contribution_year: await this.resource.last_contribution_year,
events: await this.resource["events.ldp:contains"],
orgs: await this.resource["orgs.ldp:contains"],
regions: await this.resource["regions.ldp:contains"]
};
if("label" in this.element.attributes) {
for(let ignore of this.element.attributes['label'].value.split(',')) {
tzcldprofile[ignore.trim()] = null;
}
}
let render = "<div class='border-top margin-medium border-color-grey'>fffffffffffffffff</div>";
if(tzcldprofile.description) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Description</span>: ${tzcldprofile.description}</div>`;
}
if(tzcldprofile.regions && tzcldprofile.regions.length > 0) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Région / Département</span>: `;
for(let region of tzcldprofile.regions) {
render += `${await region['name']}, `;
}
render = render.slice(0, -7);
render += `</div>`;
}
if(tzcldprofile.postal_code) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Code postal</span>: ${tzcldprofile.postal_code}</div>`;
}
if(tzcldprofile.address) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adresse postale</span>: ${tzcldprofile.address}</div>`;
}
if(tzcldprofile.events && tzcldprofile.events.length > 0) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Évènements marquants</span>: `;
for(let event of tzcldprofile.events) {
render += `${await event['name']}, `;
}
render = render.slice(0, -7);
render += `</div>`;
} if(tzcldprofile.orgs && tzcldprofile.orgs.length > 0) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Organisation ou Territoire</span>: `;
for(let org of tzcldprofile.orgs) {
render += `${await org['name']}, `;
}
render = render.slice(0, -7);
render += `</div>`;
}
if(tzcldprofile.position) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Poste occupé</span>: ${tzcldprofile.position}</div>`;
}
if(tzcldprofile.membership) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>: <input type="checkbox" checked disabled /></div>`;
}
if(!tzcldprofile.membership) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Adhésion</span>: <input type="checkbox" disabled /></div>`;
}
if(tzcldprofile.last_contribution_year) {
render += `<div class="segment block"><span class="text-semibold text-uppercase text-color-heading">Année dernière cotisation</span>: ${tzcldprofile.last_contribution_year}</div>`;
}
render += "<div class='border-top margin-medium border-color-grey'></div>";
this.element.innerHTML = render;
},
});
core.Sib.register({
name: "customtzcld-display-user-profile-widget",
use: [core.StoreMixin],
empty() {
//console.debug();
this.element.innerHTML = "";
},
async populate() {
this.element.innerHTML = `
<div class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
</div>`;
let tzcldprofile = {
id: await this.resource['@id'],
name: await this.resource.name,
communities: await this.resource.communities,
//tzcld_profile: await this.resource.tzcld_profile
};
/*let user_tzld_profile = {
jobs: await tzcldprofile.tzcld_profile.jobs
};*/
if("label" in this.element.attributes) {
for(let ignore of this.element.attributes['label'].value.split(',')) {
tzcldprofile[ignore.trim()] = null;
}
}
let render = `
<solid-widget name="tzcld-display-user-organisation">
<template>
\${value != "" ? \`- \${value}\` : \`\`}
</template>
</solid-widget>
<div id="tzcld-user-profile-wrapper" class="tzcld-user-profile-wrapper segment full">
<div id="tzcld-user-profile-col1" class="tzcld-user-profile-col1 segment width-40 padding-right-60">
<div class="section-avatar shadow padding-small padding-bottom-large text-center">
<solid-ac-checker class="button-modify-picture" permission="acl:Write" bind-resources="">
<solid-link class="button rounded rounded-icon icon-pencil reversed color-primary bordered" next="members-edit-picture" bind-resources="" data-src="${tzcldprofile.id}"></solid-link> </solid-ac-checker>
<div id="loader-tzcld-profile-picture" class="loader loader-top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<solid-display
class="segment avatar-wrapper"
bind-resources=""
label-account.picture=""
nested-field="account"
fields="picture"
loader-id="loader-tzcld-profile-picture"
class-picture="avatar xlarge text-center"
widget-picture="${window.orbit ? "orbit-user-avatar" : "solid-display-img"}"
data-src="${tzcldprofile.id}"
></solid-display>`;
if(tzcldprofile.name) {
render += `<div class="segment block margin-top-small text-xlarge text-semibold text-color-secondary text-center">${tzcldprofile.name}</div>`;
}
render += `<solid-display id="tzcld-user-profile-first-job" class="segment padding-small whitespace-normal" bind-resources="" nested-field="tzcld_profile.jobs" fields="position, organisation" class-picture="avatar xlarge"
widget-organisation="tzcld-display-user-organisation"
data-src="${tzcldprofile.id}" solid-resource="" paginate-by="1"></solid-display>`;
render += `<div><solid-display class="segment" bind-resources="" nested-field="tzcld_profile" fields="regions"
widget-regions="customtzcld-display-user-regions"
data-src="${tzcldprofile.id}" solid-resource=""></solid-display></div>`;
render += `</div>`; //section-avatar
render += `<div class="territoires-mini-cards-2">`; //section-territoires cards 2
render += `
<solid-form-search
class="hidden"
id="tzcld-user-territories-filter-${utils.getIntId(tzcldprofile.id)}"
nested-field="communities"
fields="community.tzcld_profile.visible"
value-community.tzcld_profile.visible=true
submit-button="Rechercher"
submit-widget="button"
naked=""
></solid-form-search>
<solid-display
filtered-by="tzcld-user-territories-filter-${utils.getIntId(tzcldprofile.id)}"
class="segment whitespace-normal full"
data-src="${tzcldprofile.id}"
nested-field="communities"
fields="community"
widget-community="customtzcld-display-user-territories"
class-community="segment block"
solid-resource=""></solid-display>`;
render += `</div>`; //section-avatar
render += `</div>`; //col 1
render += `<div id="tzcld-user-profile-col2" class="tzcld-user-profile-col2 segment width-60">
<h2 class="tzcld-h2">Poste(s) occupé(s)</h2>
<div class="col-2-wrapper segment full shadow padding-left-xxlarge padding-bottom-small">`;
render += `<solid-display class="segment full" bind-resources="" nested-field="tzcld_profile" fields="jobs" widget-jobs="customtzcld-display-user-profile-jobs" data-src="${tzcldprofile.id}" solid-resource="" paginate-by="10"></solid-display>`;
render += `</div></div>`; //col 2
render += `</div>`;
this.element.innerHTML = render;
},
});
customElements.define(
"customtzcld-form-profile-jobs-widget-hook",
class extends core.SolidTemplateElement {
constructor() {
super();
this.loaderID = core.Helpers.uniqID();
}
static get propsDefinition() {
return {
dataSrc: 'data-src',
};
}
template({dataSrc
}) {
return `
<solid-widget name="customtzcld-form-profile-phone-widget">
<template>
<solid-form
class="d-block rowClear"
data-src="\${value}"
data-holder
partial
fields="segment1(phone, phone_type, phone_public)"
class-segment1="segment full sm-full rowClear"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone_type="segment margin-bottom-medium width-45 sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone_public="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
widget-phone_public="solid-form-checkbox-label"
label-phone="Téléphone *"
required-phone
label-phone_type="Type de ligne"
label-phone_public="Public"
></solid-form>
</template>
</solid-widget>
<solid-widget name="customtzcld-form-profile-email-widget">
<template>
<solid-form
class="d-block rowClear"
data-src="\${value}"
data-holder
partial
fields="segment1(email, email_type, email_public)"
class-segment1="segment full sm-full rowClear"
class-email="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-email_type="segment margin-bottom-medium width-45 sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-email_public="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
widget-email_public="solid-form-checkbox-label"
label-email="E-mail *"
required-email
label-email_type="Type d'e-mail"
label-email_public="Public"
></solid-form>
</template>
</solid-widget>
<solid-widget name="customtzcld-form-profile-jobs-widget">
<template>
<solid-form
class="d-block rowClear orgs-wrapper"
data-src="\${value}"
data-holder
fields="segment11(position, organisation, link), segment12(address, postal_code), segment133(city, department), segment14(mobile_phone, mobile_phone_public), segment15(phone, phone_public), segment16(email, email_public), sep"
value-profile="\${value}"
class-segment11="segment full sm-full rowClear"
class-segment12="segment full sm-full rowClear"
class-segment133="segment full sm-full rowClear"
class-segment14="segment full sm-full rowClear"
class-segment15="segment full sm-full rowClear"
class-segment16="segment full sm-full rowClear" class-sep="margin-top-small margin-bottom-small border-top border-color-grey"
widget-sep="div"
class-position="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-organisation="segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-address="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-postal_code="segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-city="segment margin-bottom-medium width-50 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-department="segment margin-bottom-medium width-50 sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-phone_public="segment margin-bottom-medium half sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
class-mobile_phone="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-mobile_phone_public="segment margin-bottom-medium half sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
class-email="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-email_public="segment margin-bottom-medium half sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
class-link="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
label-position="Poste occupé *"
label-organisation="Organisation"
label-link="Site web"
label-address="Adresse"
label-postal_code="Code postal"
label-city="Ville"
label-department="Département"
label-phone="Téléphone fixe"
label-mobile_phone="Téléphone mobile"
label-email="Email"
label-phone_public="Public"
label-mobile_phone_public="Public"
label-email_public="Public"
widget-phone_public="solid-form-checkbox-label"
widget-mobile_phone_public="solid-form-checkbox-label"
widget-email_public="solid-form-checkbox-label"
widget-department="solid-form-multipleselect-autocompletion-label"
order-asc-department="name"
range-department="${dataSrc}tzcld-departments/"
required-position
></solid-form>
</template>
</solid-widget>
<solid-widget name="customtzcld-form-profile-locations-widget">
<template>
<solid-form
class="d-block rowClear locations-wrapper"
data-src="\${value}"
data-holder
fields="segment11(name), segment12(address), segment13(postal_code, city), phones, emails"
value-profile="\${value}"
class-segment11="segment full sm-full rowClear"
class-segment12="segment full sm-full rowClear"
class-segment13="segment full sm-full rowClear"
class-name="segment margin-bottom-medium full sm-full sm-padding-none text-xlarge text-semibold text-color-heading"
class-address="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-postal_code="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-city="segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-xlarge text-semibold text-color-heading"
label-name="Nom de l'adresse"
label-address="Adresse"
label-postal_code="Code postal"
label-city="Ville"
multiple-phones
widget-phones="customtzcld-form-profile-phone-widget"
multiple-phones-label= "Téléphone"
multiple-phones-add-label= "Ajouter un téléphone"
multiple-phones-remove-label= "Supprimer"
multiple-emails
widget-emails="customtzcld-form-profile-email-widget"
multiple-phones-label= "Téléphone" multiple-emails-add-label= "Ajouter un E-mail"
multiple-emails-remove-label= "Supprimer"
multiple-emails-remove-class= "multiple-delete"
></solid-form>
</template>
</solid-widget>
<solid-widget name="communities-contact-add-button">
<template>
<div class="segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered">
<button
class="form-sub"
type="button">
Ajouter
</button>
</div>
</template>
</solid-widget>
<solid-widget name="customtzcld-form-profile-contacts-widget">
<template>
<solid-form
class="d-block rowClear"
bind-resources=""
nested-field="tzcld_profile.tzcld_community_contacts"
fields="member, addButton"
widget-community="solid-form-hidden"
value-community="\${value}"
range-member="\${value}members/"
widget-member="solid-form-dropdown-label"
class-segment1="segment full sm-full rowClear"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
label-member="Contacts"
widget-addButton="communities-contact-add-button"
label-addButton="Ajouter"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
></solid-form>
</template>
</solid-widget>
<solid-widget name="customtzcld-form-profile-contact-widget">
<template>
<solid-form
class="d-block rowClear"
data-src="\${value}"
partial
naked
fields="member, is_primary"
class-segment1="segment full sm-full rowClear"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
class-is_primary="segment margin-bottom-medium width-10 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading text-uppercase tzcld-checkbox"
widget-is_primary="solid-form-checkbox-label"
label-phone_type="Type de ligne"
label-is_primary="Contact pricipal"
></solid-form>
</template>
</solid-widget>
<solid-widget name="tzcld-communities-logo">
<template>
<div class="communities-logo">
\${value != "" ? \`<div \style="background-image:url(\${value});" />\` : \`<div></div>\`}
</div>
</template>
</solid-widget>
<solid-widget name="tzcld-communities-counter-alternate">
<template> <div>
<span class="icon icon-people icon-third icon-large margin-right-xsmall"></span>
<solid-display
fields=""
data-src="\${src || value}"
nested-field="members"
counter-template="\\\${counter}">
</solid-display>
<span>membre(s)</span>
</div>
</template>
</solid-widget>
<solid-widget name='tzcld-communities-name'>
<template>
<solid-link
data-src="\${value}"
next="${this.route}-community-profile">
\${await value.name}
</solid-link>
</template>
</solid-widget>
<solid-widget name='tzcld-communities-profile-members-counter'>
<template>
<span>
<span class="margin-bottom-xsmall icon mdi-account-multiple icon-third icon-large icon-margin-right-xsmall"></span>
<solid-display
class="text-medium"
data-src="\${src || value}"
fields=''
counter-template="\\\${counter}"
></solid-display>
<span class="text-medium">${this.localize("profile.members")}</span>
</span>
</template>
</solid-widget>
<solid-widget name="tzcld-communities-profile-twitter">
<template>
\${value != "" ? \`<a class="segment children-link-rounded children-icon-social-twitter children-link-reversed color-secondary bordered margin-right-medium" href="\${value}" target="_blank"><span></span></a>\` : ""}
</template>
</solid-widget>
<solid-widget name="tzcld-communities-profile-website">
<template>
\${value != "" ? \`<a class="link margin-bottom-xsmall icon mdi-link-variant icon-third icon-large icon-margin-right-xsmall link-hover" href="\${value}" target="_blank">\${value}</a>\` : ""}
</template>
</solid-widget>
<solid-widget name="tzcld-communities-profile-picture">
<template>
\${value != "" ? \`<div><div style="background-image:url(\${value});"></div></div>\` : \`<div class="picture-empty"></div>\`}
</template>
</solid-widget>
<solid-widget name="tzcld-communities-profile-phone">
<template>
\${value != "" ? \`<a class="link margin-bottom-xsmall icon mdi-cellphone-iphone icon-third icon-large icon-margin-right-xsmall link-hover" href="tel:\${value}">\${value}</a>\` : ""}
</template>
</solid-widget>
<solid-widget name="tzcld-communities-profile-logo">
<template>
\${value != "" ? \`<div style="background-image:url(\${value});" />\` : ""}
</template>
</solid-widget>
<solid-widget name="tzcld-generic-no-result-info">
<template>
<div class="segment bg-color-white shadow full text-top whitespace-normal margin-left-xsmall tzcld-generic-empty-info"> <p class="padding-xxlarge">\${value}</p>
</div>
</template>
</solid-widget>
<solid-widget name="tzcld-orbit-territory-team-contact-actions">
<template>
<solid-link class="icon icon-secondary hover icon-info margin-left-xsmall margin-right-xxsmall" data-src="\${value}" next="members-member-profile"></solid-link>
<solid-link class="icon icon-secondary hover icon-speech margin-left-xxsmall margin-right-medium" data-src="\${value}" next="messages"></solid-link>
</template>
</solid-widget>
`;
}
}
);
});
});
/*
<solid-form
class="d-block rowClear"
data-src="\${value}"
partial
naked
fields="tzcld_contact_member"
range-tzcld_contact_member="\${value}tzcld-contact-member/"
multiple-tzcld_contact_member
widget-tzcld_contact_member="customtzcld-form-profile-contact-widget"
class-segment1="segment full sm-full rowClear"
class-phone="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
label-tzcld_contact_member="Contacts"
submit-button="Ajouter"
submit-widget="button"
class-submit-button="submit-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-rocket children-icon-small children-icon-margin-right-xsmall"
></solid-form>
*/