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

tjenestekatalog/src/components/EditBranch.svelte

@@ -14,24 +14,25 @@
 
 <div class="edit-branch">
   <div class="block block--top-8">
-    <EditBranchSignature strings={strings} bind:branch="{branch}" required={true}
+    <EditBranchSignature strings={strings} bind:branch="{branch}"
       bind:validMandatoryFields="{validMandatoryFields}" />
   </div>
   <div class="block block--top-8">
-    <EditBranchAddress strings={strings} bind:branch="{branch}" required={true}
+    <EditBranchAddress strings={strings} bind:branch="{branch}"
       bind:validMandatoryFields="{validMandatoryFields}" />
   </div>
   <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 class="block block--top-8">
     <EditBranchInformation strings={strings.description} bind:branch="{branch}"
       bind:validMandatoryFields="{validMandatoryFields}" />
   </div>
   <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 class="block block--top-8">
-    <EditBranchImages strings={strings} bind:images="{branch.image}" required={true} />
+    <EditBranchImages strings={strings} bind:images="{branch.image}" />
   </div>
 </div>
\ No newline at end of file

tjenestekatalog/src/components/input-components/EditBranchImages.svelte

@@ -6,14 +6,6 @@
   import {strings} from "../../lib/strings.js"
   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
 
   onMount(() => {

tjenestekatalog/src/components/input-components/EditBranchSocialMedia.svelte

 <script>
   import EditField from "./EditField.svelte"
+
+  const urlProtocolPattern = "^https://.+"
+  const urlProtocolErrorMessage = "Vennligst legg inn hele nettadressen som begynner med https://..."
+
   export let branch
   export let strings
+  export let validMandatoryFields
+
+  export function setValidProp(event) {
+    validMandatoryFields[event.detail.prop] = event.detail.valid
+    validMandatoryFields = validMandatoryFields
+  }
 </script>
 
 <div class="edit-branch-social-media">
@@ -10,15 +20,19 @@
       <h2>Sosiale medier</h2>
     </div>
     <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">
-        <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 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 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>

tjenestekatalog/src/components/input-components/EditField.svelte

@@ -12,33 +12,34 @@
   export let prop
   export let data_cy = null
   export let strings = {}
+  export let validPattern
+  export let patternErrorMsg
+
+  $: valid = validate(value, required, validPattern)
 
   onMount(() => {
     fireValid()
   })
 
   export function fireValid () {
-    if (!required || required && value) {
-      dispatch("valid", { prop: prop, valid: true })
-    } else if (required && !value) {
-      dispatch("valid", { prop: prop, valid: false })
-    }
+    dispatch("valid", { prop, valid })
   }
 
-  function validClass (value, required) {
-    if (!required) {
-      return ""
+  function validate(value, required, validPattern) {
+    if (value && validPattern) {
+      return new RegExp(validPattern).test(value)
     }
-    if (required && value) {
-      return ""
-    } else {
-      return "input--error"
+
+    if (!required || (required && value)) {
+      return true
     }
+
+    return false
   }
 </script>
 
 <div class="edit-field">
-	<div class="input input--full {validClass(value, required)}">
+	<div class="input input--full" class:input--error={!valid} >
 		<label>{strings.label}
 			{#if required}
 				*
@@ -66,6 +67,9 @@
         on:blur="{fireValid}" 
         data-cy={data_cy} 
       />    
+    {/if}
+    {#if !valid && patternErrorMsg}
+      <p class="text text--error">{patternErrorMsg}</p>
     {/if}
 	</div>
 </div>