From 971f10ab6e676235d10e1879a7268a521ef4dfbd Mon Sep 17 00:00:00 2001
From: antoine37120 <ant.dupre@gmail.com>
Date: Mon, 24 Apr 2023 16:18:55 +0200
Subject: [PATCH] feature: profile user update and css form, view
---
src/custom-tzcld.js | 226 ++++++++++++++++++++++---
src/index.js | 3 +
src/styles/custom-grid.scss | 14 ++
src/styles/dashboard.scss | 4 +-
src/styles/index.scss | 38 +++++
src/styles/user-profile.scss | 72 ++++++++
src/widjets-display-territory-tzcld.js | 55 ++++++
src/widjets-display-user-tzcld.js | 171 +++++++++++++++++++
8 files changed, 558 insertions(+), 25 deletions(-)
create mode 100644 src/styles/user-profile.scss
create mode 100644 src/widjets-display-territory-tzcld.js
create mode 100644 src/widjets-display-user-tzcld.js
diff --git a/src/custom-tzcld.js b/src/custom-tzcld.js
index 913a9b5..a8d17c5 100644
--- a/src/custom-tzcld.js
+++ b/src/custom-tzcld.js
@@ -112,7 +112,7 @@ import("./utils.js").then((utils) => {
tzcldprofile[ignore.trim()] = null;
}
}
- let render = "<div class='border-top margin-medium border-color-grey'></div>";
+ 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>`;
}
@@ -163,6 +163,103 @@ import("./utils.js").then((utils) => {
},
});
+
+
+ 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>
+ <span> sur le teritoire de </span><br/>\${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" 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-display class="segment whitespace-normal full" bind-resources="" fields="community"
+ widget-community="customtzcld-display-user-territories"
+ data-src="${await tzcldprofile.communities['@id']}" 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) occuppé(s)</h2>
+ <div class="col-2-wrapper segment full shadow padding-left-small padding-bottom-small">`;
+
+
+
+ render += `<solid-display class="segment" 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 {
@@ -228,40 +325,52 @@ import("./utils.js").then((utils) => {
data-src="\${value}"
data-holder
naked
- fields="segment11(position, organisation), segment12(address, postal_code), segment13(city, department, address_public), phones, emails"
+ fields="segment11(position, organisation, link), segment12(address, postal_code), segment13(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-segment13="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 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 padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
- class-city="segment margin-bottom-medium width-45 sm-full padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
- class-department="segment margin-bottom-medium width-45 sm-full padding-left-small padding-right-small sm-padding-none text-xlarge text-semibold text-color-heading"
- class-address_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"
- label-position="Poste occupé"
+ 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-address_public="Public"
- widget-address_public="solid-form-checkbox-label"
- 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"
-
+ 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-dropdown-label"
range-department="${dataSrc}tzcld-departments/"
+ required-position
></solid-form>
</template>
@@ -314,12 +423,83 @@ import("./utils.js").then((utils) => {
></solid-form>
</template>
- </solid-widget>`;
+ </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-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>
+ */
diff --git a/src/index.js b/src/index.js
index 338c212..22a9a27 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,8 +3,11 @@ import('./utils.js').then(utils => {
core.Helpers.importCSS(utils.path() + '/styles/index.css?min');
core.Helpers.importCSS(utils.path() + '/styles/custom-grid.css?min');
core.Helpers.importCSS(utils.path() + '/styles/dashboard.css?min');
+ core.Helpers.importCSS(utils.path() + '/styles/user-profile.css?min');
await import("./custom-tzcld.js");
+ await import("./widjets-display-user-tzcld.js");
+ await import("./widjets-display-territory-tzcld.js");
});
});
\ No newline at end of file
diff --git a/src/styles/custom-grid.scss b/src/styles/custom-grid.scss
index eea3c4f..7a29609 100644
--- a/src/styles/custom-grid.scss
+++ b/src/styles/custom-grid.scss
@@ -5,6 +5,9 @@
.width-20 {
width: 20%;
}
+ .width-25 {
+ width: 25%;
+ }
.width-30 {
width: 30%;
}
@@ -23,16 +26,27 @@
.width-70 {
width: 70%;
}
+ .width-75 {
+ width: 75%;
+ }
.width-80 {
width: 80%;
}
.width-90 {
width: 90%;
}
+ .width-100 {
+ width: 100%;
+ }
}
.rowClear {
white-space: normal;
}
.d-block {
display: block;
+}
+
+/* custom paddings */
+.padding-right-60 {
+ padding-right: 60px;
}
\ No newline at end of file
diff --git a/src/styles/dashboard.scss b/src/styles/dashboard.scss
index d375689..a9c3f4e 100644
--- a/src/styles/dashboard.scss
+++ b/src/styles/dashboard.scss
@@ -4,7 +4,7 @@
--color-dev-secondary: #1a2c5f;
--color-dev-third: #8dd8f8;
--color-dev-heading: #1a2c5f;
- --color-h2: #1F82C0;
+ --color-fourth: #1F82C0;
--color-body: #636363;
}
body {
@@ -13,7 +13,7 @@ body {
#dashboard {
h2 {
- color: var(--color-h2);
+ color: var(--color-fourth);
}
h3 {
font-weight: 800;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index b490ff0..c8c487b 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -304,4 +304,42 @@ solid-form {
appearance: none;
}
}
+ .ss-multi-selected {
+ box-shadow: none!important;
+ }
+}
+
+/* All link on main */
+main .link {
+ color: var(--color-primary);
+}
+
+/* All tag */
+.tag {
+ margin-left: 4px;
+ margin-right: 4px;
+}
+
+/* img */
+.segment.full>img {
+ width: 100%;
+ max-width: 100%;
+}
+
+/* Breadcrum */
+main div[data-view] {
+ &>div.border-color-grey:first-of-type {
+ border: none;
+ padding-bottom: 5px;
+ }
+}
+
+/* typo tzcld */
+.tzcld-h2 {
+ color: var(--color-primary);
+ font-size: 18px;
+ font-weight: 900;
+ line-height: 25px;
+ margin-top: 0;
+ margin-bottom: 8px;
}
\ No newline at end of file
diff --git a/src/styles/user-profile.scss b/src/styles/user-profile.scss
new file mode 100644
index 0000000..ee4a1f6
--- /dev/null
+++ b/src/styles/user-profile.scss
@@ -0,0 +1,72 @@
+#members-member-profile {
+ &>div:first-of-type {
+ &>div:first-of-type {
+ display: none;
+ }
+ &>div.text-right:last-of-type {
+ text-align: left;
+ }
+ }
+ &>div.shadow {
+ box-shadow: none;
+ background: transparent;
+
+ &>div:first-of-type {
+ display: none;
+ background-color: #fff;
+ box-shadow: 0 0 6px 0 rgba(46,63,88,.14);
+ }
+ &>.member-bio {
+ width: 100%;
+ max-width: 100%;
+ padding: 0;
+ }
+
+ }
+ &>div:last-of-type {
+ &>div:last-of-type {
+ display: none;
+ }
+ }
+ .tzcld-user-profile-wrapper {
+
+ .tzcld-user-profile-col1 {
+ margin-top: 32px;
+ .section-avatar {
+ position: relative;
+ background-color: #fff;
+ }
+ .button-modify-picture, solid-picture .button-modify-picture {
+ top: 15px;
+ position: absolute;
+ right: 15px;
+ z-index: 1;
+ }
+
+ .territoires-mini-cards-2 {
+
+ .territoires-mini-card-2 {
+ background-color: #fff;
+ &>div {
+ vertical-align: top;
+ }
+ }
+ }
+ }
+ .tzcld-user-profile-col2 {
+ vertical-align: top;
+ h3 {
+ margin-bottom: 0;
+ }
+ &>div.shadow {
+ background-color: #fff;
+ }
+ }
+ }
+
+ #tzcld-user-profile-first-job {
+ nav {
+ display: none;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/widjets-display-territory-tzcld.js b/src/widjets-display-territory-tzcld.js
new file mode 100644
index 0000000..26f6525
--- /dev/null
+++ b/src/widjets-display-territory-tzcld.js
@@ -0,0 +1,55 @@
+import("./utils.js").then((utils) => {
+ import(utils.coreVersion()).then((core) => {
+
+ core.Sib.register({
+ name: "customtzcld-display-user-territories",
+ 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 = {
+ community: await this.resource
+ };
+ let tzcld_profile = {
+ resource: await tzcldprofile.community.tzcld_profile
+ };
+ let region = await tzcld_profile.resource.region ;
+ let step_state = await tzcld_profile.resource.step_state ;
+ let kind = await tzcld_profile.resource.kind ;
+ if("label" in this.element.attributes) {
+ for(let ignore of this.element.attributes['label'].value.split(',')) {
+ tzcldprofile[ignore.trim()] = null;
+ }
+ }
+ let render = ``;
+
+ let html_region = `<div class="region segment tag color-fourth">${await region.name}</div>`;
+ let html_step_state = `<div class="region segment tag color-fourth">${await step_state.name}</div>`;
+ let html_kind = `<div class="region segment tag color-fourth">${await kind.name}</div>`;
+ render += `<div class="territoires-mini-card-2 segment full shadow margin-top-small">
+ <div class="segment width-25 padding-small padding-top-medium">
+ <solid-display class="segment full" bind-resources="" label-logo="" fields="logo" class-logo="segment full" widget-logo="orbit-user-avatar" data-src="${await tzcldprofile.community['@id']}" solid-resource=""></solid-display>
+ </div>
+ <div class="segment width-75 padding-large border-left border-color-grey">
+ <div class="community-card-2 segment full">
+ <h4 class="text-xlarge text-semibold text-color-secondary margin-top-xxsmall margin-bottom-xsmall">${await tzcldprofile.community.name}</h4>
+ <div>${html_region + html_step_state + html_kind }</div>
+ </div>
+ </div>
+ </div>`;
+ this.element.innerHTML = render;
+ },
+ });
+ });
+});
\ No newline at end of file
diff --git a/src/widjets-display-user-tzcld.js b/src/widjets-display-user-tzcld.js
new file mode 100644
index 0000000..34676f8
--- /dev/null
+++ b/src/widjets-display-user-tzcld.js
@@ -0,0 +1,171 @@
+import("./utils.js").then((utils) => {
+ import(utils.coreVersion()).then((core) => {
+
+ core.Sib.register({
+ name: "customtzcld-display-user-regions",
+ 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 = {
+ regions: await this.resource["ldp:contains"]
+ };
+ if("label" in this.element.attributes) {
+ for(let ignore of this.element.attributes['label'].value.split(',')) {
+ tzcldprofile[ignore.trim()] = null;
+ }
+ }
+ let render = ``;
+ for(let region of tzcldprofile.regions) {
+ render += `<div class="region segment tag color-fourth">${await region.name}</div>`;
+ }
+
+ this.element.innerHTML = render;
+ },
+ });
+ core.Sib.register({
+ name: "customtzcld-display-user-profile-phones",
+ 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 = {
+ phones: await this.resource["ldp:contains"]
+ };
+ if("label" in this.element.attributes) {
+ for(let ignore of this.element.attributes['label'].value.split(',')) {
+ tzcldprofile[ignore.trim()] = null;
+ }
+ }
+ let render = ``;
+ for(let phone of tzcldprofile.phones) {
+ render += `<div class="phone">${await phone.phone} ${await phone.phone_type}</div>`;
+ }
+
+ this.element.innerHTML = render;
+ },
+ });
+ core.Sib.register({
+ name: "customtzcld-display-user-profile-emails",
+ 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 = {
+ emails: await this.resource["ldp:contains"]
+ };
+ if("label" in this.element.attributes) {
+ for(let ignore of this.element.attributes['label'].value.split(',')) {
+ tzcldprofile[ignore.trim()] = null;
+ }
+ }
+ let render = ``;
+ for(let email of tzcldprofile.emails) {
+ render += `<div class="email"><a class="link" href="mailto:${await email.email}">${await email.email}</a> ${await email.email_type}</div>`;
+ }
+
+ this.element.innerHTML = render;
+ },
+ });
+
+ core.Sib.register({
+ name: "customtzcld-display-user-profile-jobs",
+ 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 = {
+ jobs: await this.resource["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="segment full margin-top-small margin-bottom-small">`;
+ for(let job of tzcldprofile.jobs) {
+ if(await job.organisation !="") {
+ if(await job.link !="") {
+ render += `<h3 class="position text-medium padding-bottom-large">${await job.position} Ã <a class="link text-top" href="${await job.link}">${await job.organisation}</a></h3>`;
+ } else {
+ render += `<h3 class="position text-medium padding-bottom-large">${await job.position} Ã ${await job.organisation}</h3>`;
+ }
+ } else {
+ render += `<h3 class="position text-medium padding-bottom-large">${await job.position}</h3>`;
+ }
+
+ render += `<div class="address padding-bottom-small">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>`;
+ if ((await job.mobile_phone != '') || (await job.phone != '')) {
+ render += `<div class="phone padding-bottom-small">`;
+ }
+
+ if (await job.mobile_phone != '') {
+ render += `${await job.phone}`;
+ }
+ if ((await job.mobile_phone != '') && (await job.phone != '')) {
+ render += ` - `;
+ }
+ if (await job.mobile_phone != '') {
+ render += `${await job.mobile_phone}`;
+ }
+ if ((await job.mobile_phone != '') || (await job.phone != '')) {
+ render += `</div>`;
+ }
+
+ if (await job.email != '') {
+ render += `<div class="email padding-bottom-small"><a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>`;
+ }
+
+ }
+
+ render += `</div>`;
+
+ this.element.innerHTML = render;
+ },
+ });
+ });
+});
\ No newline at end of file
--
GitLab