Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

Extra pattern toevoegen voor een uuid #22

Merged
merged 5 commits into from
Mar 4, 2021
Merged

Extra pattern toevoegen voor een uuid #22

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cea575a
UIG-1142: orginele pattern.js van AIV
Pieter-Beckers Mar 2, 2021
66d9cfd
UIG-1142: orginele pattern.js van AIV
Pieter-Beckers Mar 2, 2021
421ada3
UIG-1142: pattern uuid implementatie
Pieter-Beckers Mar 2, 2021
4f3d4b4
UIG-1142: opmerkingen Pascal
Pieter-Beckers Mar 2, 2021
04b2c29
absoluut path
Pieter-Beckers Mar 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions demo/vl-pattern.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,14 @@
<html>
<head>
<title>vl-pattern voorbeeld</title>

<script type="module" src="/src/vl-pattern.js"></script>

<script type="module" src="/node_modules/vl-ui-demo/dist/vl-demo-all.js"></script>
<script type="module" src="/node_modules/vl-ui-body/dist/vl-body.js"></script>
<script type="module" src="/node_modules/vl-ui-form-message/dist/vl-form-message.js"></script>
<script type="module" src="/node_modules/vl-ui-input-field/dist/vl-input-field.js"></script>

<script type="module" src="/src/vl-pattern.js"></script>

<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-body/dist/style.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-demo/dist/style.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/vl-ui-form-message/dist/style.css" />
Expand Down Expand Up @@ -41,6 +42,11 @@
<label is="vl-form-label" for="pattern-5">Rijksregisternummer</label>
<input is="vl-input-field" data-vl-block type="text" id="pattern-rrn" name="pattern-5" value="" placeholder="11.22.33-444.55" data-vl-pattern="rrn" data-vl-js-dress="true" />
</vl-demo>

<vl-demo data-vl-title="UUID validation">
<label is="vl-form-label" for="pattern-6">UUID</label>
Pieter-Beckers marked this conversation as resolved.
Show resolved Hide resolved
<input is="vl-input-field" data-vl-block type="text" id="pattern-uuid" name="pattern-6" value="" placeholder="1c6fa548-5eef-11eb-ae93-0242ac130002" data-vl-pattern="uuid" />
</vl-demo>
</vl-demo-page>
</body>
</html>
8 changes: 8 additions & 0 deletions lib/pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -917,6 +917,7 @@

target.swapHiddenInput = !!opts.swapHiddenInput;
target.numericOnly = target.creditCard || target.date || !!opts.numericOnly;
target.hexadecimalOnly = !!opts.hexadecimalOnly;
target.uppercase = !!opts.uppercase;
target.lowercase = !!opts.lowercase;
target.prefix = target.creditCard || target.date ? '' : opts.prefix || '';
Expand Down Expand Up @@ -1207,6 +1208,7 @@
value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix); // strip non-numeric characters

value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value; // convert case
value = pps.hexadecimalOnly ? Util.strip(value, /[^0-9a-fA-F]/g) : value; // strip non-hexadecimal characters

value = pps.uppercase ? value.toUpperCase() : value;
value = pps.lowercase ? value.toLowerCase() : value; // prevent from showing prefix when no immediate option enabled with empty input value
Expand Down Expand Up @@ -2195,6 +2197,12 @@
stripLeadingZeroes: false,
numeralPositiveOnly: true
},
uuid: {
blocks: [8, 4, 4, 4, 12],
delimiter: '-',
hexadecimalOnly: true,
stripLeadingZeroes: false,
},
date: {
date: true,
datePattern: ['d', 'm', 'Y'],
Expand Down
4 changes: 2 additions & 2 deletions src/vl-pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import {awaitUntil} from '/node_modules/vl-ui-core/dist/vl-core.js';
import '/node_modules/@govflanders/vl-ui-util/dist/js/util.js';
import '/node_modules/@govflanders/vl-ui-core/dist/js/core.js';
import '/node_modules/@govflanders/vl-ui-pattern/dist/js/pattern.js';
import '../lib/pattern.js';
Pieter-Beckers marked this conversation as resolved.
Show resolved Hide resolved

/**
* Gebruik de pattern mixin in combinatie met een input field om de gebruiker te verplichten om informatie in een bepaald formaat op te geven.
* @mixin vlPattern
*
* @property {(iban | phone | date | price | rrn)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {(iban | phone | date | price | rrn | uuid)} data-vl-pattern - Attribuut wordt gebruikt om aan te duiden welk patroon van toepassing is.
* @property {string} data-vl-pattern-prefix - Attribuut bepaalt de prefix die de gebruiker zal zien. In het geval van iban en phone pattern type wordt de prefix toegevoegd aan de value. Bij price pattern type is de prefix puur visueel.
*
* @see {@link https://www.github.com/milieuinfo/webcomponent-vl-ui-pattern/releases/latest|Release notes}
Expand Down
3 changes: 3 additions & 0 deletions test/e2e/components/vl-pattern.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ const vlPattern = {
async hasRRNPattern() {
return this._hasPattern('rrn');
},
async hasUuidPattern() {
return this._hasPattern('uuid');
},
async hasPatternPrefix() {
const prefix = await this.getAttribute('data-vl-pattern-prefix');
return prefix != undefined;
Expand Down
4 changes: 4 additions & 0 deletions test/e2e/pages/vl-pattern.page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ class VlPatternPage extends Page {
return this._getInput('rrn');
}

async getUuidInput() {
return this._getInput('uuid');
}

async load() {
await super.load(`${Config.baseUrl}/demo/vl-pattern.html`);
}
Expand Down
24 changes: 24 additions & 0 deletions test/e2e/pattern.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ describe('vl-pattern', async () => {
await assert.eventually.isFalse(input.hasRRNPattern());
await assert.eventually.isTrue(input.hasPatternPrefix());
await assert.eventually.equal(input.getPatternPrefix(), 'BE');
await assert.eventually.isFalse(input.hasUuidPattern());
});

it('als gebruiker kan ik alleen een toegelaten telefoonnummer patroon invullen', async () => {
Expand All @@ -41,6 +42,7 @@ describe('vl-pattern', async () => {
await assert.eventually.isFalse(input.hasRRNPattern());
await assert.eventually.isTrue(input.hasPatternPrefix());
await assert.eventually.equal(input.getPatternPrefix(), '+32');
await assert.eventually.isFalse(input.hasUuidPattern());
});

it('als gebruiker kan ik alleen een toegelaten datum patroon invullen', async () => {
Expand All @@ -57,6 +59,7 @@ describe('vl-pattern', async () => {
await assert.eventually.isFalse(input.hasPricePattern());
await assert.eventually.isFalse(input.hasRRNPattern());
await assert.eventually.isFalse(input.hasPatternPrefix());
await assert.eventually.isFalse(input.hasUuidPattern());
});

it('als gebruiker kan ik alleen een toegelaten prijs patroon invullen', async () => {
Expand All @@ -76,6 +79,7 @@ describe('vl-pattern', async () => {
await assert.eventually.isFalse(input.hasRRNPattern());
await assert.eventually.isTrue(input.hasPatternPrefix());
await assert.eventually.equal(input.getPatternPrefix(), '€');
await assert.eventually.isFalse(input.hasUuidPattern());
});

it('als gebruiker kan ik alleen een toegelaten rijksregisternummer patroon invullen', async () => {
Expand All @@ -92,5 +96,25 @@ describe('vl-pattern', async () => {
await assert.eventually.isFalse(input.hasPricePattern());
await assert.eventually.isTrue(input.hasRRNPattern());
await assert.eventually.isFalse(input.hasPatternPrefix());
await assert.eventually.isFalse(input.hasUuidPattern());
});

it('als gebruiker kan ik alleen een toegelaten uuid patroon invullen', async () => {
const input = await vlPatternPage.getUuidInput();
await input.setValue('---XYZ___');
await assert.eventually.equal(input.getValue(), '');
await input.setValue('ZZZZZZZZ-ZZZZ-ZZZZ-ZZZZ-ZZZZZZZZZZZZ');
await assert.eventually.equal(input.getValue(), '');
await input.setValue('1c6fa548-5eef-11eb-ae93-0242ac130002');
await assert.eventually.equal(input.getValue(), '1c6fa548-5eef-11eb-ae93-0242ac130002');
await input.setValue('1c6fa5485eef11ebae930242ac130002');
await assert.eventually.equal(input.getValue(), '1c6fa548-5eef-11eb-ae93-0242ac130002');
await assert.eventually.isFalse(input.hasIBANPattern());
await assert.eventually.isFalse(input.hasPhonePattern());
await assert.eventually.isFalse(input.hasDatePattern());
await assert.eventually.isFalse(input.hasPricePattern());
await assert.eventually.isFalse(input.hasRRNPattern());
await assert.eventually.isFalse(input.hasPatternPrefix());
Pieter-Beckers marked this conversation as resolved.
Show resolved Hide resolved
await assert.eventually.isTrue(input.hasUuidPattern());
});
});