DEICH-5615: Clean up deviating opening hours when user toggles extended...

DEICH-5615: Clean up deviating opening hours when user toggles extended opening hours. Update datepicker date format.

tjenestekatalog/src/components/Modal.svelte

@@ -4,9 +4,10 @@
   const dispatch = createEventDispatcher()
   export let isLoading = false
   export let hideButtons = false
+  export let width = "narrow"
 </script>
 
-<div class="modal modal--visible">
+<div class={`modal modal--visible modal--${width}`}>
 	<button class="overlay overlay--for-modal overlay--visible" on:click="{() => dispatch('cancel')}"></button>
 	<div class="modal__inner">
     <header class="modal-card-head">

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

@@ -43,6 +43,7 @@
     options = {}
     options.onChange = []
     options.mode = "range"
+    options.dateFormat = "d.m.Y"
     options.onChange.push((selectedDates) => {
       if (selectedDates.length === 2) {
         let periodStart = selectedDates[0]

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

@@ -79,6 +79,10 @@
 
   export function toggleManned(idx) {
     values[idx].manned = !values[idx].manned
+    if (!values[idx].manned) {
+      values[idx].mannedFrom = null
+      values[idx].mannedTo = null
+    }
     values = values
   }
 

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

 <script>
   import EditTime from "./EditTime.svelte"
+  import Modal from "../Modal.svelte"
   import { dayEnumToDay } from "../../lib/util.js"
 
+  import moment from "moment"
+
   export let branch
 
+  let eohToggleConsequences = null
+
+  function requestToggleExtendedOpeningHours() {
+    // check if any deviating opening hours will be affected by toggling
+    if (branch.extendedOpeningHours) {
+      let dohToHaveEohRemoved = []
+      let dohToBeRemoved = []
+      for (const doh of branch.deviatingOpeningHours) {
+        if (doh.open) {
+          if (doh.manned) {
+            dohToHaveEohRemoved.push(doh)
+          } else {
+            dohToBeRemoved.push(doh)
+          }
+        }
+      }
+
+      if (dohToHaveEohRemoved.length > 0 || dohToBeRemoved.length > 0) {
+        eohToggleConsequences = {
+          dohToBeRemoved,
+          dohToHaveEohRemoved
+        }
+      } else {
+        toggleExtendedOpeningHours()
+      }
+    } else {
+      toggleExtendedOpeningHours()
+    }
+  }
+
+  function confirmToggleEoh() {
+    // filter out deviating opening hours with only extended opening hours
+    let mannedDohs = branch.deviatingOpeningHours.filter(doh => doh.manned)
+
+    // only keep manned opening hours for the remaining deviating hours
+    for (const doh of mannedDohs) {
+      if (doh.open) {
+        doh.openFrom = null
+        doh.openTo = null
+      }
+    }
+
+    branch.deviatingOpeningHours = mannedDohs
+    toggleExtendedOpeningHours()
+    eohToggleConsequences = null
+  }
+
   function toggleExtendedOpeningHours() {
-    branch.extendedOpeningHours = !branch.extendedOpeningHours
+    setTimeout(() => {
+      branch.extendedOpeningHours = !branch.extendedOpeningHours
+    }, 50) // workaround to make false -> true transition render correctly
   }
 
   function setMannedFrom(day, mannedFrom) {
@@ -27,8 +79,49 @@
     // so we update this derived field, which can be bound
     day.unmanned = wasMannedPreviously
   }
+
+  function formatPeriod (doh) {
+    if (!doh.periodStart) {
+      return "Innslag uten dato"
+    }
+    const prettyDohStart = moment(doh.periodStart).format("DD.MM.YYYY")
+    const prettyDohEnd = moment(doh.periodEnd).format("DD.MM.YYYY")
+    return prettyDohStart === prettyDohEnd ? prettyDohStart : `${prettyDohStart} - ${prettyDohEnd}`
+  }
 </script>
 
+<style>
+  input[type="checkbox"] {
+    margin-right: 1em;
+  }
+
+  label {
+    font-weight: normal;
+  }
+
+  label:hover {
+    cursor: pointer;
+  }
+
+  th {
+    text-align: left;
+    padding-left: var(--spacing-3);
+  }
+
+  .tr-disabled {
+    color: #aaa;
+  }
+
+  .tr-disabled .bold {
+    font-weight: bold;
+    color: #000;
+  }
+
+  input[type="checkbox"] {
+    margin-right: 0;
+  }
+</style>
+
 <div class="branch-manned-opening-hours">
   <div class="grid">
     <div class="grid__item large--two-fifths">
@@ -71,40 +164,61 @@
     </div>
     <div class="grid__item large--three-fifths">
       <input type="checkbox" checked={branch.extendedOpeningHours} id="hasExtended"
-             on:input="{() => toggleExtendedOpeningHours(branch)}" />
+             on:click|preventDefault="{() => requestToggleExtendedOpeningHours()}" />
       <label for="hasExtended"> Biblioteket er meråpent</label>
     </div>
   </div>
 </div>
 
-<style>
-    input[type="checkbox"] {
-        margin-right: 1em
-    }
-
-    label {
-        font-weight: normal
-    }
-
-    label:hover {
-        cursor: pointer
-    }
-
-    th {
-      text-align: left;
-      padding-left: var(--spacing-3);
-    }
-
-    .tr-disabled {
-        color: #aaa
-    }
-
-    .tr-disabled .bold {
-        font-weight: bold;
-        color: #000
-    }
-
-    input[type="checkbox"] {
-      margin-right: 0;
-    }
-</style>
+{#if eohToggleConsequences}
+  <Modal
+    width="medium"
+    on:confirm={confirmToggleEoh}
+    on:cancel={() => (eohToggleConsequences = null)}
+  >
+    <div slot="content">
+      <div class="block block--top-4">
+        <p class="text text--error">
+          Det finnes avvikende åpningstider som vil endres og/eller slettes dersom du skrur av meråpent for dette biblioteket:
+        </p>
+      </div>
+      {#if eohToggleConsequences.dohToHaveEohRemoved.length > 0}
+        <div class="block block--top-2">
+          <p class="text">
+            Meråpenttider vil tas vekk fra følgende:
+          </p>
+          <div>
+            <ul class="list--bulleted">
+            {#each eohToggleConsequences.dohToHaveEohRemoved as doh}
+              <li>
+                {formatPeriod(doh)}
+              </li>
+            {/each}
+            </ul>
+          </div>
+        </div>
+      {/if}
+      {#if eohToggleConsequences.dohToBeRemoved.length > 0}
+        <div class="block block--top-2">
+          <p class="text">
+            Følgende vil slettes, fordi ingen bemannet åpningstid er angitt:
+          </p>
+          <div>
+            <ul class="list--bulleted">
+            {#each eohToggleConsequences.dohToBeRemoved as doh}
+              <li>
+                {formatPeriod(doh)}
+              </li>
+            {/each}
+            </ul>
+          </div>
+        </div>
+      {/if}
+      <div class="block block--top-4">
+        <p>Dersom du vil rydde i avvikende åpningstider selv, kan du velge Avbryt. Hvis ikke, velg OK for å bekrefte at endringene kan gjøres automatisk.</p>
+      </div>
+    </div>
+    <span slot="confirmButtonLabel">OK</span>
+    <span slot="cancelButtonLabel">Avbryt</span>
+  </Modal>
+{/if}