feat: barcode component (#101)

* feat: barcode component

* chore: remove program as only 1 quad is selected

* chore: add back program + styling

* chore: remove logs, add test

packages/dgt-components/demo/demo.ts

@@ -1,4 +1,4 @@
-import { Parser } from 'n3';
+import { Parser, Store } from 'n3';
 import { ComponentEventType, ComponentReadEvent, ComponentResponseEvent, ComponentWriteEvent } from '@digita-ai/semcom-sdk';
 import {ProfileNameComponent} from '../lib/components/profile/profile-name.component';
 import {FormElementComponent} from '../lib/components/forms/form-element.component';
@@ -8,6 +8,7 @@ import { ProfilePayslipComponent } from '../lib/components/profile/profile-pays
 import { DemoAuthenticateComponent } from './demo-authenticate.component';
 import { ListItemComponent } from '../lib/components/list-item/list-item.component';
 import { DemoComponent } from './demo.component';
+import { BarcodeComponent } from '../lib/components/barcode/barcode.component'
 
 
 
@@ -19,6 +20,7 @@ customElements.define('profile-contact-component', ProfileContactComponent);
 customElements.define('profile-payslip-component',  ProfilePayslipComponent);
 customElements.define('list-item', ListItemComponent);
 customElements.define('demo-component', DemoComponent);
+customElements.define('barcode-component', BarcodeComponent);
 
 const parser = new Parser();
 
@@ -33,11 +35,12 @@ document.addEventListener(ComponentEventType.READ, (event: ComponentReadEvent) =
   }
 
   fetch(event.detail.uri).then((response) => response.text().then((profileText) => {
-
     const quads = parser.parse(profileText);
+    const store = new Store(quads);
+    const filteredQuads = store.getQuads(event.detail.uri.split('#')[1] ? '#' + event.detail.uri.split('#')[1] : undefined , undefined, undefined, undefined);
 
     event.target?.dispatchEvent(new ComponentResponseEvent({
-      detail: { uri: event.detail.uri, cause: event, data: quads, success: true },
+      detail: { uri: event.detail.uri, cause: event, data: filteredQuads, success: true },
     }));
 
   }));

packages/dgt-components/demo/index.html

@@ -14,6 +14,7 @@
   <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>
   <demo-component></demo-component>
 
   <demo-auth></demo-auth>

packages/dgt-components/lib/components/barcode/barcode.component.spec.ts

@@ -0,0 +1,26 @@
+import { BarcodeComponent } from './barcode.component';
+
+describe('BarcodeComponent', () => {
+
+  let component: BarcodeComponent;
+  const tag = 'barcode-component';
+
+  beforeEach(() => {
+
+    component = window.document.createElement(tag) as BarcodeComponent;
+
+  });
+
+  afterEach(() => {
+
+    document.getElementsByTagName('html')[0].innerHTML = '';
+
+  });
+
+  it('should be correctly instantiated', () => {
+
+    expect(component).toBeTruthy();
+
+  });
+
+});

packages/dgt-components/lib/components/barcode/barcode.component.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-console -- is a web component */
+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 JsBarcode from 'jsbarcode';
+import { BaseComponent } from '../base/base.component';
+
+export class BarcodeComponent extends BaseComponent {
+
+  @internalProperty() cardNumber?: string;
+  @internalProperty() program?: string;
+  @property({ type: Boolean }) hideProgram = false;
+
+  @query('#barcode') barcodeSvg?: HTMLOrSVGElement;
+
+  /**
+   * Handles a response event.
+   * Expects an event containing a detail object that contains a data object containing quads. Will take the first quad containing a membershipNumber it finds.
+   * Make sure to filter the quads you send it if you want a specific barcode.
+   *
+   * @param event The response event to handle.
+   */
+  handleResponse(event: ComponentResponseEvent): void {
+
+    console.log('handleResponse');
+
+    if (!event || !event.detail || !event.detail.data) {
+
+      throw new Error('Arguments event, event.detail, and event.detail.data should be set.');
+
+    }
+
+    const store = new Store(event.detail.data);
+
+    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];
+
+    this.cardNumber = quad.object.value;
+    this.program = program.object.value;
+
+  }
+
+  updated(changed: PropertyValues): void {
+
+    if (changed.has('entry') && this.entry) this.readData(this.entry);
+
+    if (this.barcodeSvg) {
+
+      JsBarcode(this.barcodeSvg, this.cardNumber, {
+        background: 'none',
+      });
+
+    }
+
+    super.updated(changed);
+
+  }
+
+  render(): TemplateResult {
+
+    return html`
+      ${this.program && !this.hideProgram ? html`<p id="program">${this.program}</p>` : ''}
+      <svg id="barcode"></svg>
+    `;
+
+  }
+
+  static get styles(): CSSResult[] {
+
+    return [
+      unsafeCSS(Theme),
+      css`
+      
+        :host {
+          display: flex;
+          flex-direction: column;
+          background-color: var(--colors-foreground-inverse);
+          padding: var(--gap-normal) 0;
+        }
+
+        :host > * {
+          align-self: center;
+        }
+
+        p {
+          margin: 0;
+        }
+
+        #barcode {
+          width: 200px;
+          height: 110px;  
+        }
+
+      `,
+    ];
+
+  }
+
+}
+
+export default BarcodeComponent;

packages/dgt-components/lib/index.ts

@@ -36,6 +36,7 @@ export * from './components/state/state';
 export * from './components/source/source-list.component';
 export * from './components/source/source.component';
 export * from './components/checkbox/checkbox.component';
+export * from './components/barcode/barcode.component';
 export * from './models/holder.model';
 export * from './models/invite.model';
 export * from './models/issuer.model';