Commit 06236f84 authored by Magnus Westergaard's avatar Magnus Westergaard
Browse files

DEICH-5757: Add simple validation to branch social media input fields. Remove some unused code.

parent abde31e5
...@@ -14,24 +14,25 @@ ...@@ -14,24 +14,25 @@
<div class="edit-branch"> <div class="edit-branch">
<div class="block block--top-8"> <div class="block block--top-8">
<EditBranchSignature strings={strings} bind:branch="{branch}" required={true} <EditBranchSignature strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" /> bind:validMandatoryFields="{validMandatoryFields}" />
</div> </div>
<div class="block block--top-8"> <div class="block block--top-8">
<EditBranchAddress strings={strings} bind:branch="{branch}" required={true} <EditBranchAddress strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" /> bind:validMandatoryFields="{validMandatoryFields}" />
</div> </div>
<div class="block block--top-8"> <div class="block block--top-8">
<EditBranchSocialMedia strings={strings} bind:branch="{branch}" required={true} /> <EditBranchSocialMedia strings={strings} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" />
</div> </div>
<div class="block block--top-8"> <div class="block block--top-8">
<EditBranchInformation strings={strings.description} bind:branch="{branch}" <EditBranchInformation strings={strings.description} bind:branch="{branch}"
bind:validMandatoryFields="{validMandatoryFields}" /> bind:validMandatoryFields="{validMandatoryFields}" />
</div> </div>
<div class="block block--top-8"> <div class="block block--top-8">
<EditSingleImage strings={strings} bind:image="{branch.profileImage}" label="Profilbilde" required={true} /> <EditSingleImage strings={strings} bind:image="{branch.profileImage}" label="Profilbilde" />
</div> </div>
<div class="block block--top-8"> <div class="block block--top-8">
<EditBranchImages strings={strings} bind:images="{branch.image}" required={true} /> <EditBranchImages strings={strings} bind:images="{branch.image}" />
</div> </div>
</div> </div>
\ No newline at end of file
...@@ -6,14 +6,6 @@ ...@@ -6,14 +6,6 @@
import {strings} from "../../lib/strings.js" import {strings} from "../../lib/strings.js"
import EditField from "./EditField.svelte" import EditField from "./EditField.svelte"
const validMandatoryFields = {}
validMandatoryFields["branch"] = false
validMandatoryFields["date"] = false
validMandatoryFields["startTime"] = false
validMandatoryFields["title"] = false
validMandatoryFields["ingress"] = false
validMandatoryFields["description"] = false
validMandatoryFields["libraryEventPrice"] = false
export let images export let images
onMount(() => { onMount(() => {
......
<script> <script>
import EditField from "./EditField.svelte" import EditField from "./EditField.svelte"
const urlProtocolPattern = "^https://.+"
const urlProtocolErrorMessage = "Vennligst legg inn hele nettadressen som begynner med https://..."
export let branch export let branch
export let strings export let strings
export let validMandatoryFields
export function setValidProp(event) {
validMandatoryFields[event.detail.prop] = event.detail.valid
validMandatoryFields = validMandatoryFields
}
</script> </script>
<div class="edit-branch-social-media"> <div class="edit-branch-social-media">
...@@ -10,15 +20,19 @@ ...@@ -10,15 +20,19 @@
<h2>Sosiale medier</h2> <h2>Sosiale medier</h2>
</div> </div>
<div class="grid__item large--three-fifths"> <div class="grid__item large--three-fifths">
<EditField strings={strings.twitter} bind:value="{branch.twitter}" required={false} data_cy="input-branch-twitter" /> <EditField strings={strings.twitter} bind:value="{branch.twitter}" required={false} data_cy="input-branch-twitter" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="twitter" />
<div class="block block--top-4"> <div class="block block--top-4">
<EditField strings={strings.facebook} bind:value="{branch.facebook}" required={false} data_cy="input-branch-facebook" /> <EditField strings={strings.facebook} bind:value="{branch.facebook}" required={false} data_cy="input-branch-facebook" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="facebook" />
</div> </div>
<div class="block block--top-4"> <div class="block block--top-4">
<EditField strings={strings.snapchat} bind:value="{branch.snapchat}" required={false} data_cy="input-branch-snapchat" /> <EditField strings={strings.snapchat} bind:value="{branch.snapchat}" required={false} data_cy="input-branch-snapchat" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="snapchat" />
</div> </div>
<div class="block block--top-4"> <div class="block block--top-4">
<EditField strings={strings.instagram} bind:value="{branch.instagram}" required={false} data_cy="input-branch-instagram" /> <EditField strings={strings.instagram} bind:value="{branch.instagram}" required={false} data_cy="input-branch-instagram" validPattern={urlProtocolPattern}
patternErrorMsg={urlProtocolErrorMessage} on:valid="{setValidProp}" prop="instagram" />
</div> </div>
</div> </div>
</div> </div>
......
...@@ -12,33 +12,34 @@ ...@@ -12,33 +12,34 @@
export let prop export let prop
export let data_cy = null export let data_cy = null
export let strings = {} export let strings = {}
export let validPattern
export let patternErrorMsg
$: valid = validate(value, required, validPattern)
onMount(() => { onMount(() => {
fireValid() fireValid()
}) })
export function fireValid () { export function fireValid () {
if (!required || required && value) { dispatch("valid", { prop, valid })
dispatch("valid", { prop: prop, valid: true })
} else if (required && !value) {
dispatch("valid", { prop: prop, valid: false })
}
} }
function validClass (value, required) { function validate(value, required, validPattern) {
if (!required) { if (value && validPattern) {
return "" return new RegExp(validPattern).test(value)
} }
if (required && value) {
return "" if (!required || (required && value)) {
} else { return true
return "input--error"
} }
return false
} }
</script> </script>
<div class="edit-field"> <div class="edit-field">
<div class="input input--full {validClass(value, required)}"> <div class="input input--full" class:input--error={!valid} >
<label>{strings.label} <label>{strings.label}
{#if required} {#if required}
* *
...@@ -66,6 +67,9 @@ ...@@ -66,6 +67,9 @@
on:blur="{fireValid}" on:blur="{fireValid}"
data-cy={data_cy} data-cy={data_cy}
/> />
{/if}
{#if !valid && patternErrorMsg}
<p class="text text--error">{patternErrorMsg}</p>
{/if} {/if}
</div> </div>
</div> </div>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment