Skip to content

Commit

Permalink
fix: correctly handle save in profile name component (#105)
Browse files Browse the repository at this point in the history 
* fix: fix profile name componen's handleSave function

* fix: use namedNode instead of literal when saving photo

* fix: validate image uri

* fix: improve barcode component styling

* feat: add link to hosting organization

* fix: css lint

Signed-off-by: Wouter Termont <[email protected]>

* test: coverage debump

Signed-off-by: Wouter Termont <[email protected]>

Co-authored-by: Wouter Termont <[email protected]>
  • Loading branch information
@wouteraj @woutermont
wouteraj and woutermont authored Nov 24, 2021
1 parent 08a1e30 commit 68d105c
Show file tree
Hide file tree
Showing 10 changed files with 353 additions and 34 deletions.
22 changes: 22 additions & 0 deletions packages/dgt-components/demo/data/barcodes.ttl
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
@prefix : <#>.
@prefix solid: <http://www.w3.org/ns/solid/terms#>.
@prefix foaf: <http://xmlns.com/foaf/0.1/>.
@prefix pim: <http://www.w3.org/ns/pim/space#>.
@prefix schema: <http://schema.org/>.

:barcode-uitpas
schema:hostingOrganization <https://uitpas.be/> ;
schema:member <http://mijn.web.id/profile/card#me> ;
schema:membershipNumber "121345687789" ;
schema:programName "UiTPAS" .

:barcode-mock-1
schema:member <http://mijn.web.id/profile/card#me> ;
schema:membershipNumber "9876543210" ;
schema:programName "UiTPAS" .

:barcode-mock-2
schema:hostingOrganization <https://uitpas.be/> ;
schema:member <http://mijn.web.id/profile/card#me> ;
schema:membershipNumber "012345543210" ;
schema:programName "UiTPAS" .
244 changes: 244 additions & 0 deletions packages/dgt-components/demo/data/profile-2.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
@prefix : <#>.
@prefix solid: <http://www.w3.org/ns/solid/terms#>.
@prefix foaf: <http://xmlns.com/foaf/0.1/>.
@prefix pim: <http://www.w3.org/ns/pim/space#>.
@prefix schema: <http://schema.org/>.
@prefix ldp: <http://www.w3.org/ns/ldp#>.
@prefix c0: <https://wouteraj.inrupt.net/profile/card#>.
@prefix c1: <https://belgiannoise.inrupt.net/profile/card#>.
@prefix prof: <./>.
@prefix n3: <http://www.w3.org/ns/auth/acl#>.
@prefix in: </solid-chat/public/>.
@prefix n4: </>.
@prefix c: <https://stijntaelemans.inrupt.net/profile/card#>.
@prefix n: <http://www.w3.org/2006/vcard/ns#>.
@prefix pay: <http://digita.ai/voc/payslip#>.

prof:card a foaf:PersonalProfileDocument; foaf:maker :me; foaf:primaryTopic :me.

:id1601909945358
n:country-name "Belgium";
n:locality "Brussels";
n:postal-code "1000";
n:region "Brusssels";
n:street-address "Country Road 69".

:id1589374025993 a n:Work; n:value <mailto:[email protected]>.
:id1589374027282 a n:Home; n:value <mailto:[email protected]>.

:id1601214413622 a n:Work; n:value <tel:+32479315191>.
:id1601214413645 a n:Home; n:value <tel:+3216438543>.

:me
a schema:Person, foaf:Person;
n:note "I enjoy nettle soup!";
n:organization-name "Cynalco Medics";
n:role "Janitor & Maintenance";
solid:privateTypeIndex </settings/privateTypeIndex.ttl>;
solid:publicTypeIndex </settings/publicTypeIndex.ttl>;
n:hasEmail :id1589374025993, :id1589374027282;
n:hasAddress :id1601909945358;
n:hasTelephone :id1601214413622, :id1601214413645;
foaf:nick "tonyp";
n:honorific-prefix "Mr.";
foaf:name "Tony Paillard".

:payslip-jan-2021-w1
a pay:payslip;
pay:employer <https://lidl.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1609459200";
pay:until "1612051200";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#month>;
pay:grossAmount "2600";
pay:taxableAmount "2200";
pay:netAmount "1500".


:payslip-feb-2021-w1
a pay:payslip;
pay:employer <https://lidl.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1612137600";
pay:until "1614470400";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#month>;
pay:grossAmount "2600";
pay:taxableAmount "2200";
pay:netAmount "1500".


:payslip-mar-2021-w1
a pay:payslip;
pay:employer <https://lidl.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1614556800";
pay:until "1617148800";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#month>;
pay:grossAmount "2600";
pay:taxableAmount "2200";
pay:netAmount "1500".


:payslip-apr-2021-w1
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1616976000";
pay:until "1617494400";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-apr-2021-w2
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1617580800";
pay:until "1618099200";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-apr-2021-w3
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1618185600";
pay:until "1618704000";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-apr-2021-w4
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1618790400";
pay:until "1619308800";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".


:payslip-may-2021-w1
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1620000000";
pay:until "1620518400";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-may-2021-w2
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1620604800";
pay:until "1621123200";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-may-2021-w3
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1621209600";
pay:until "1621728000";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-may-2021-w4
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1621814400";
pay:until "1622332800";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".


:payslip-jun-2021-w1
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1622419200";
pay:until "1622937600";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-jun-2021-w2
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1623024000";
pay:until "1623542400";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-jun-2021-w3
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1623628800";
pay:until "1624147200";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".

:payslip-jun-2021-w4
a pay:payslip;
pay:employer <https://adecco.be>;
pay:employee <https://pods.actueel-inkomen.digita.ai/leapeeters/profile/card#me>;
pay:from "1624233600";
pay:until "1624752000";
pay:stature "White Collar";
pay:dependent "1";
pay:wageUnit <http://digita.ai/voc/payslip#week>;
pay:grossAmount "750";
pay:taxableAmount "650";
pay:netAmount "550".
4 changes: 3 additions & 1 deletion packages/dgt-components/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
<script>window.global = window;</script>
<script type="module" src="./demo.ts"></script>

<barcode-component entry="https://pod.inrupt.com/abelvandenbriel/public/barcodes.ttl#barcode-mock" ></barcode-component>
<barcode-component entry="./data/barcodes.ttl#barcode-mock-1" ></barcode-component>
<barcode-component entry="./data/barcodes.ttl#barcode-mock-2" ></barcode-component>
<demo-component></demo-component>

<demo-auth></demo-auth>
Expand All @@ -25,6 +26,7 @@
<div slot="action"><img style="height: 50px" src="./itsme.svg"></div>
</list-item>
<profile-name-component entry="./data/profile.txt"></profile-name-component>
<profile-name-component entry="./data/profile-2.txt"></profile-name-component>
<profile-contact-component entry="./data/profile.txt"></profile-contact-component>
<profile-payslip-component entry="./data/profile.txt"></profile-payslip-component>
</body>
Expand Down
55 changes: 42 additions & 13 deletions packages/dgt-components/lib/components/barcode/barcode.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@
import { Store } from 'n3';
import { css, CSSResult, html, internalProperty, property, PropertyValues, query, TemplateResult, unsafeCSS } from 'lit-element';
import { ComponentResponseEvent } from '@digita-ai/semcom-sdk';
import { Theme } from '@digita-ai/dgt-theme';
import { Theme, QR, Open } from '@digita-ai/dgt-theme';
import JsBarcode from 'jsbarcode';
import { unsafeSVG } from 'lit-html/directives/unsafe-svg';
import { BaseComponent } from '../base/base.component';

export class BarcodeComponent extends BaseComponent {

@internalProperty() cardNumber?: string;
@internalProperty() program?: string;
@internalProperty() hostingOrganization?: string;
@property({ type: Boolean }) hideProgram = false;

@query('#barcode') barcodeSvg?: HTMLOrSVGElement;
Expand All @@ -36,9 +38,11 @@ export class BarcodeComponent extends BaseComponent {
const quad = store.getQuads(undefined, 'http://schema.org/membershipNumber', undefined, undefined)[0];

const program = store.getQuads(quad.subject, 'http://schema.org/programName', undefined, undefined)[0];
const hostingOrganization = store.getQuads(quad.subject, 'http://schema.org/hostingOrganization', undefined, undefined)[0];

this.cardNumber = quad.object.value;
this.program = program.object.value;
this.hostingOrganization = hostingOrganization.object.value;

}

Expand All @@ -61,8 +65,21 @@ export class BarcodeComponent extends BaseComponent {
render(): TemplateResult {

return html`
${this.program && !this.hideProgram ? html`<p id="program">${this.program}</p>` : ''}
<svg id="barcode"></svg>
${this.program && !this.hideProgram ? html`
<nde-card ?hideImage="${ true }">
<div slot="title">${this.program}</div>
<div slot="subtitle">This is your barcode</div>
<div slot="icon">
${unsafeSVG(QR)}
</div>
<div slot="content">
<div class="barcode-container">
<svg id="barcode"></svg>
</div>
${this.hostingOrganization ? html`<a target="_blank" .href="${this.hostingOrganization}" class="btn primary">${unsafeSVG(Open)} <div>More information</div></a>` : ``}
</div>
</nde-card>
` : ''}
`;

}
Expand All @@ -72,27 +89,39 @@ export class BarcodeComponent extends BaseComponent {
return [
unsafeCSS(Theme),
css`
:host {
div[slot="icon"] svg {
fill: var(--colors-foreground-normal);
}
div[slot="content"] {
display: flex;
align-items: stretch;
flex-direction: column;
background-color: var(--colors-foreground-inverse);
padding: var(--gap-normal) 0;
}
:host > * {
align-self: center;
a.btn {
display: flex;
align-items: center;
flex-direction: row;
margin-top: var(--gap-large);
justify-content: center;
}
a.btn svg {
fill: var(--colors-foreground-inverse);
margin-right: var(--gap-normal);
}
p {
margin: 0;
.barcode-container {
display: flex;
align-items: center;
flex-direction: column;
}
#barcode {
.barcode-container #barcode {
width: 200px;
height: 110px;
}
`,
];

Expand Down
Loading

0 comments on commit 68d105c

Please sign in to comment.