From cc77a1e8078788e286e70829242958d4b02a8fa1 Mon Sep 17 00:00:00 2001
From: Fabio Tacke <fabio.tacke@digitalservice.bund.de>
Date: Thu, 18 Jan 2024 16:32:43 +0100
Subject: [PATCH] Refactor date chips

RISDEV-3075
---
 frontend/src/fields/caselaw/coreDataFields.ts |   2 +-
 .../components/input/ChipsDateInput.vue       | 335 ++----------------
 .../shared/components/input/ChipsInput.vue    |   4 +
 .../components/input/chipsDateInput.spec.ts   | 228 ++++--------
 4 files changed, 111 insertions(+), 458 deletions(-)

diff --git a/frontend/src/fields/caselaw/coreDataFields.ts b/frontend/src/fields/caselaw/coreDataFields.ts
index 01c7eb1be4..95e50914e6 100644
--- a/frontend/src/fields/caselaw/coreDataFields.ts
+++ b/frontend/src/fields/caselaw/coreDataFields.ts
@@ -197,7 +197,7 @@ export const coreDataFields: InputField[] = [
         "Entscheidungsdatum",
         "Entscheidungsdatum",
       ),
-      child: defineChipsField(
+      child: defineChipsDateField(
         "deviatingDecisionDates",
         "Abweichendes Entscheidungsdatum",
         "Abweichendes Entscheidungsdatum",
diff --git a/frontend/src/shared/components/input/ChipsDateInput.vue b/frontend/src/shared/components/input/ChipsDateInput.vue
index f80737f7a2..04a3d17c02 100644
--- a/frontend/src/shared/components/input/ChipsDateInput.vue
+++ b/frontend/src/shared/components/input/ChipsDateInput.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import dayjs from "dayjs"
 import customParseFormat from "dayjs/plugin/customParseFormat"
-import { vMaska, MaskaDetail } from "maska"
-import { ref, watch, computed } from "vue"
+import { computed } from "vue"
+import ChipsInput from "@/shared/components/input/ChipsInput.vue"
 import { ValidationError } from "@/shared/components/input/types"
-import IconClear from "~icons/ic/baseline-clear"
 
 const props = defineProps<Props>()
 const emit = defineEmits<{
@@ -15,323 +14,63 @@ const emit = defineEmits<{
 
 interface Props {
   id: string
-  value?: string[]
   modelValue?: string[]
   ariaLabel: string
-  placeholder?: string
-  isFutureDate?: boolean
-  validationError?: ValidationError
 }
 
-const chips = ref<string[]>(props.modelValue ?? [])
-const currentInput = ref<string | undefined>()
-const currentInputField = ref<HTMLInputElement>()
-const focusedItemIndex = ref<number>()
-const containerRef = ref<HTMLElement>()
-
-watch(
-  props,
-  () =>
-    (chips.value = props.modelValue
-      ? props.modelValue.map((value) => dayjs(value).format("DD.MM.YYYY"))
-      : []),
-  {
-    immediate: true,
-  },
-)
-
-watch(
-  () => props.modelValue,
-  (is) => {
-    chips.value = is
-      ? is.map((value) => dayjs(value, "YYYY-MM-DD", true).format("DD.MM.YYYY"))
+const chips = computed<string[]>({
+  get: () => {
+    return props.modelValue
+      ? props.modelValue.map((value) =>
+          dayjs(value, "YYYY-MM-DD", true).format("DD.MM.YYYY"),
+        )
       : []
   },
-)
-
-function updateModelValue() {
-  emit(
-    "update:modelValue",
-    chips.value.length === 0
-      ? undefined
-      : chips.value.map((value) =>
-          dayjs(value, "DD.MM.YYYY", true).format("YYYY-MM-DD"),
-        ),
-  )
-}
-
-function saveChip() {
-  if (!hasError.value && currentInput.value && currentInput.value.length > 0) {
-    chips.value.push(currentInput.value)
-    updateModelValue()
-    currentInput.value = undefined
-    resetFocus()
-  }
-}
-
-function deleteChip(index: number) {
-  chips.value.splice(index, 1)
-  updateModelValue()
-  resetFocus()
-}
-
-function resetFocus() {
-  currentInputField.value?.blur()
-  focusedItemIndex.value = undefined
-  currentInputField.value?.focus()
-}
-
-function backspaceDelete() {
-  if (currentInput.value === undefined) {
-    chips.value.splice(chips.value.length - 1)
-    updateModelValue()
-    resetFocus()
-  } else currentInput.value = undefined
-}
-
-function enterDelete() {
-  if (focusedItemIndex.value !== undefined) {
-    currentInput.value = undefined
-    chips.value.splice(focusedItemIndex.value, 1)
-    // bring focus on second last item if last item was deleted
-    if (focusedItemIndex.value === chips.value.length) {
-      focusPrevious()
-    }
-    if (focusedItemIndex.value === 0) {
-      resetFocus()
-    }
-  }
-
-  updateModelValue()
-}
-
-const focusPrevious = () => {
-  if (
-    (currentInput.value && currentInput.value.length > 0) ||
-    focusedItemIndex.value === 0
-  ) {
-    return
-  }
-  focusedItemIndex.value =
-    focusedItemIndex.value === undefined
-      ? chips.value.length - 1
-      : focusedItemIndex.value - 1
-  const prev = containerRef.value?.children[
-    focusedItemIndex.value
-  ] as HTMLElement
-  if (prev) prev.focus()
-}
-
-const focusNext = () => {
-  if (
-    (currentInput.value && currentInput.value.length > 0) ||
-    focusedItemIndex.value === undefined
-  ) {
-    return
-  }
-  if (focusedItemIndex.value == chips.value.length - 1) {
-    resetFocus()
-    return
-  }
-  focusedItemIndex.value =
-    focusedItemIndex.value === undefined ? 0 : focusedItemIndex.value + 1
-  const next = containerRef.value?.children[
-    focusedItemIndex.value
-  ] as HTMLElement
-  if (next) next.focus()
-}
-
-const setFocusedItemIndex = (index: number) => {
-  focusedItemIndex.value = index
-}
-
-const inputCompleted = ref<boolean>(false)
-
-dayjs.extend(customParseFormat)
-
-const isValidDate = computed(() => {
-  return dayjs(currentInput.value, "DD.MM.YYYY", true).isValid()
-})
-
-const isInPast = computed(() => {
-  if (props.isFutureDate) return true
-  return dayjs(currentInput.value, "DD.MM.YYYY", true).isBefore(dayjs())
-})
-
-const onMaska = (event: CustomEvent<MaskaDetail>) => {
-  inputCompleted.value = event.detail.completed
-}
 
-const hasError = computed(
-  () =>
-    props.validationError ||
-    (inputCompleted.value && !isInPast.value && !props.isFutureDate) ||
-    (inputCompleted.value && !isValidDate.value),
-)
+  set: (newValue: string[]) => {
+    const lastValue = newValue[newValue.length - 1]
 
-const conditionalClasses = computed(() => ({
-  input__error: props.validationError ?? hasError.value,
-}))
+    const isValidDate = dayjs(lastValue, "DD.MM.YYYY", true).isValid()
 
-function validateInput() {
-  if (inputCompleted.value) {
-    if (isValidDate.value) {
+    if (isValidDate) {
       // if valid date, check for future dates
-      if (!isInPast.value && !props.isFutureDate && isValidDate.value)
+      const isInFuture = dayjs(lastValue, "DD.MM.YYYY", true).isAfter(dayjs())
+      if (isInFuture) {
         emit("update:validationError", {
-          message:
-            "Das " + props.ariaLabel + " darf nicht in der Zukunft liegen",
+          message: props.ariaLabel + " darf nicht in der Zukunft liegen",
           instance: props.id,
         })
-      else emit("update:validationError", undefined)
+        return
+      } else {
+        emit("update:validationError", undefined)
+      }
     } else {
       emit("update:validationError", {
         message: "Kein valides Datum",
         instance: props.id,
       })
+      return
     }
-  } else if (currentInput.value) {
-    emit("update:validationError", {
-      message: "Unvollständiges Datum",
-      instance: props.id,
-    })
-  } else {
-    emit("update:validationError", undefined)
-  }
-}
-
-function inputDelete() {
-  emit("update:validationError", undefined)
-}
 
-function onBlur() {
-  validateInput()
-}
-
-watch(inputCompleted, () => {
-  validateInput()
+    emit(
+      "update:modelValue",
+      newValue.length === 0
+        ? undefined
+        : newValue.map((value) =>
+            dayjs(value, "DD.MM.YYYY", true).format("YYYY-MM-DD"),
+          ),
+    )
+  },
 })
+
+dayjs.extend(customParseFormat)
 </script>
 
 <template>
-  <div class="input bg-white" :class="conditionalClasses">
-    <div ref="containerRef" class="flex flex-row flex-wrap" tabindex="-1">
-      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
-      <div
-        v-for="(chip, i) in chips"
-        :key="i"
-        aria-label="chip"
-        class="chip ds-body-01-reg bg-blue-500"
-        tabindex="0"
-        @click="setFocusedItemIndex(i)"
-        @keydown.delete="backspaceDelete"
-        @keypress.enter="enterDelete"
-        @keyup.left="focusPrevious"
-        @keyup.right="focusNext"
-      >
-        <div class="label-wrapper">{{ chip }}</div>
-
-        <button
-          aria-Label="Löschen"
-          class="icon-wrapper"
-          @click="deleteChip(i)"
-          @keydown.enter="deleteChip(i)"
-        >
-          <IconClear />
-        </button>
-      </div>
-    </div>
-
-    <input
-      :id="id"
-      ref="currentInputField"
-      v-model="currentInput"
-      v-maska
-      :aria-label="ariaLabel"
-      :class="conditionalClasses"
-      data-maska="##.##.####"
-      placeholder="TT.MM.JJJJ"
-      @blur="onBlur"
-      @keydown.delete="inputDelete"
-      @keypress.enter="saveChip"
-      @keyup.left="focusPrevious"
-      @keyup.right="focusNext"
-      @maska="onMaska"
-    />
-  </div>
+  <ChipsInput
+    :id="id"
+    v-model="chips"
+    :aria-label="ariaLabel"
+    maska="##.##.####"
+  />
 </template>
-
-<style lang="scss" scoped>
-.input {
-  display: flex;
-  width: 100%;
-  min-height: 3.75rem;
-  flex-wrap: wrap;
-  align-content: space-between;
-  padding: 12px 16px 4px;
-  @apply border-2 border-solid border-blue-800 uppercase;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:autofill {
-    @apply text-inherit shadow-white;
-  }
-
-  &:autofill:focus {
-    @apply text-inherit shadow-white;
-  }
-
-  &__error {
-    width: 100%;
-    @apply border-red-800 bg-red-200;
-
-    &:autofill {
-      @apply text-inherit shadow-error;
-    }
-
-    &:autofill:focus {
-      @apply text-inherit shadow-error;
-    }
-  }
-
-  .chip {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    margin: 0 8px 8px 0;
-
-    .icon-wrapper {
-      display: flex;
-      padding: 4px 3px;
-      border-radius: 0 10px 10px 0;
-    }
-
-    .label-wrapper {
-      display: flex;
-      padding: 3px 0 3px 8px;
-      margin-right: 8px;
-    }
-
-    &:focus {
-      outline: none;
-
-      .icon-wrapper {
-        @apply bg-blue-900;
-
-        color: white;
-      }
-    }
-  }
-
-  input {
-    min-width: 8.74rem;
-    flex: 1 1 auto;
-    border: none;
-    margin-bottom: 8px;
-    outline: none;
-    text-transform: uppercase;
-  }
-}
-</style>
diff --git a/frontend/src/shared/components/input/ChipsInput.vue b/frontend/src/shared/components/input/ChipsInput.vue
index cafd6609f9..0e6f9a2fa5 100644
--- a/frontend/src/shared/components/input/ChipsInput.vue
+++ b/frontend/src/shared/components/input/ChipsInput.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { produce } from "immer"
+import { vMaska } from "maska"
 import { nextTick, ref, watch, watchEffect } from "vue"
 import ChipsList from "@/shared/components/input/ChipsList.vue"
 import IconSubdirectoryArrowLeft from "~icons/ic/baseline-subdirectory-arrow-left"
@@ -9,6 +10,7 @@ interface Props {
   modelValue?: string[]
   ariaLabel?: string
   readOnly?: boolean
+  maska?: string
 }
 
 const props = defineProps<Props>()
@@ -158,9 +160,11 @@ watch(newChipText, async () => {
         :id="id"
         ref="chipsInput"
         v-model="newChipText"
+        v-maska
         :aria-describedby="`enter-note-for-${id}`"
         :aria-label="ariaLabel"
         class="peer w-4 min-w-0 border-none bg-transparent outline-none"
+        :data-maska="maska ?? null"
         :style="{ width: inputContentWidth }"
         type="text"
         @blur="addChip"
diff --git a/frontend/test/shared/components/input/chipsDateInput.spec.ts b/frontend/test/shared/components/input/chipsDateInput.spec.ts
index 099b936c2f..08966657b5 100644
--- a/frontend/test/shared/components/input/chipsDateInput.spec.ts
+++ b/frontend/test/shared/components/input/chipsDateInput.spec.ts
@@ -1,193 +1,103 @@
 import { userEvent } from "@testing-library/user-event"
-import { fireEvent, render, screen } from "@testing-library/vue"
-import { nextTick } from "vue"
+import { render, screen } from "@testing-library/vue"
 import ChipsDateInput from "@/shared/components/input/ChipsDateInput.vue"
 
-function renderComponent(options?: {
-  ariaLabel?: string
-  value?: string
-  modelValue?: string[]
-  placeholder?: string
-}) {
+type DateChipsInputProps = InstanceType<typeof ChipsDateInput>["$props"]
+
+function renderComponent(props?: Partial<DateChipsInputProps>) {
   const user = userEvent.setup()
-  const props = {
-    id: "identifier",
-    value: options?.value,
-    modelValue: options?.modelValue,
-    ariaLabel: options?.ariaLabel ?? "aria-label",
-    placeholder: options?.placeholder,
+
+  let modelValue: string[] | undefined = props?.modelValue ?? []
+
+  const effectiveProps: DateChipsInputProps = {
+    id: props?.id ?? "identifier",
+    modelValue,
+    "onUpdate:modelValue":
+      props?.["onUpdate:modelValue"] ??
+      ((val: string[] | undefined) => (modelValue = val)),
+    "onUpdate:validationError": props?.["onUpdate:validationError"],
+    ariaLabel: props?.ariaLabel ?? "aria-label",
+    readOnly: props?.readOnly,
   }
-  const utils = render(ChipsDateInput, { props })
-  return { screen, user, props, ...utils }
+
+  return { user, ...render(ChipsDateInput, { props: effectiveProps }) }
 }
 
 describe("ChipsInput", () => {
   it("shows a chips input element", () => {
-    renderComponent({
-      ariaLabel: "test-label",
-    })
-    const input = screen.getByLabelText("test-label") as HTMLInputElement
+    renderComponent()
+    const input = screen.getByRole<HTMLInputElement>("textbox")
 
     expect(input).toBeInTheDocument()
     expect(input?.type).toBe("text")
   })
 
-  it("shows chips date input with an aria label", () => {
-    renderComponent({
-      ariaLabel: "test-label",
-    })
-    const input = screen.getByLabelText("test-label")
-
-    expect(input).toBeInTheDocument()
-  })
-
-  it("press enter renders formatted date value in chip", async () => {
-    const { user } = renderComponent({
-      ariaLabel: "test-label",
-    })
-    const input = screen.getByLabelText("test-label")
-
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-
-    const chipList = screen.getAllByLabelText("chip")
-    expect(chipList.length).toBe(1)
-    expect(chipList[0]).toHaveTextContent("03.02.2022")
+  it("shows dates in correct format", () => {
+    renderComponent({ modelValue: ["2020-11-30"] })
 
-    expect(input).toHaveValue("")
+    const chips = screen.getAllByRole("listitem")
+    expect(chips).toHaveLength(1)
+    expect(chips[0]).toHaveTextContent("30.11.2020")
   })
 
-  it("press enter does not render chip if date string empty", async () => {
-    const { user } = renderComponent()
-    const input = screen.getByLabelText("aria-label")
-    expect(input).toHaveValue("")
-
-    await user.type(input, "{enter}")
-
-    const chipList = screen.queryAllByLabelText("chip")
-
-    expect(chipList.length).toBe(0)
+  it("converts date format of user input", async () => {
+    const onUpdate = vi.fn()
+    const { user } = renderComponent({ "onUpdate:modelValue": onUpdate })
 
-    expect(input).toHaveValue("")
+    const input = screen.getByRole("textbox")
+    await user.type(input, "30.11.2020{enter}")
+    expect(onUpdate).toHaveBeenCalledWith(["2020-11-30"])
   })
 
-  it("adds multiple date values in chips", async () => {
+  it("uses date input maska", async () => {
     const { user } = renderComponent()
-    const input = screen.getByLabelText("aria-label")
 
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-    await user.type(input, "03.01.2022")
-    await user.type(input, "{enter}")
-
-    const chipList = screen.getAllByLabelText("chip")
-    expect(chipList.length).toBe(2)
-    expect(chipList[0]).toHaveTextContent("03.02.2022")
-    expect(chipList[1]).toHaveTextContent("03.01.2022")
-
-    expect(input).toHaveValue("")
+    const input = screen.getByRole("textbox")
+    await user.type(input, "abc12d§07202099")
+    expect(input).toHaveValue("12.07.2020")
   })
 
-  it("does not render chips with letters", async () => {
-    const { user } = renderComponent()
-    const input = screen.getByLabelText("aria-label")
-    expect(input).toHaveValue("")
-
-    await user.type(input, "test")
-    await user.type(input, "{enter}")
-
-    expect(screen.queryByLabelText("chip")).not.toBeInTheDocument()
-    expect(input).toHaveValue("")
-  })
+  it("does not accept incorrect dates", async () => {
+    const id = "id"
 
-  it("emits model update event when user adds an input", async () => {
-    const { emitted, user } = renderComponent()
-    const input = screen.getByLabelText("aria-label")
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-    await userEvent.tab()
+    const onError = vi.fn()
+    const onUpdate = vi.fn()
+    const { user } = renderComponent({
+      id: id,
+      "onUpdate:modelValue": onUpdate,
+      "onUpdate:validationError": onError,
+    })
 
-    expect(emitted()["update:modelValue"]).toEqual([[["2022-02-03"]]])
-  })
+    const input = screen.getByRole("textbox")
+    await user.type(input, "50022020{enter}")
 
-  it("resets date input on backspace delete", async () => {
-    renderComponent()
-    const input: HTMLInputElement = screen.queryByLabelText(
-      "aria-label",
-    ) as HTMLInputElement
-    await userEvent.type(input, "13.05.2022")
-    expect(input).toHaveValue("13.05.2022")
-    await userEvent.type(input, "{backspace}")
-    await fireEvent.update(input)
-    await nextTick()
-
-    expect(input).toHaveValue("")
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(onError).toHaveBeenCalledWith({
+      message: "Kein valides Datum",
+      instance: id,
+    })
   })
 
-  it("deletes active chip on press enter", async () => {
-    const { user } = renderComponent()
-    const input = screen.getByLabelText("aria-label") as HTMLInputElement
-    expect(input).toHaveValue("")
-
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-    await user.type(input, "04.02.2022")
-    await user.type(input, "{enter}")
-
-    const chipList = screen.getAllByLabelText("chip")
-    expect(chipList.length).toBe(2)
-
-    await user.type(input, "{arrowleft}")
-    await user.type(input, "{arrowleft}")
-    expect(chipList[0]).toHaveFocus()
+  it("does not accept dates in future", async () => {
+    const id = "id"
+    const ariaLabel = "chip"
 
-    await user.type(chipList[0], "{enter}")
-    expect(screen.getAllByLabelText("chip").length).toBe(1)
-    expect(chipList[0]).toHaveTextContent("04.02.2022")
-  })
-
-  it("deleting chips multiple times correctly resets focus", async () => {
-    const { user } = renderComponent()
-    const input = screen.getByLabelText("aria-label") as HTMLInputElement
-    expect(input).toHaveValue("")
-
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-
-    expect(screen.getAllByLabelText("chip").length).toBe(1)
-
-    await user.type(input, "{arrowleft}")
-    await user.type(screen.getByLabelText("chip"), "{enter}")
-
-    expect(screen.queryAllByLabelText("chip").length).toBe(0)
-
-    await user.type(input, "03.02.2022")
-    await user.type(input, "{enter}")
-
-    expect(screen.getAllByLabelText("chip").length).toBe(1)
+    const onError = vi.fn()
+    const onUpdate = vi.fn()
+    const { user } = renderComponent({
+      id: id,
+      ariaLabel: ariaLabel,
+      "onUpdate:modelValue": onUpdate,
+      "onUpdate:validationError": onError,
+    })
 
-    await user.type(input, "{arrowleft}")
-    await user.type(screen.getByLabelText("chip"), "{enter}")
+    const input = screen.getByRole("textbox")
+    await user.type(input, "01012100{enter}")
 
-    expect(screen.queryAllByLabelText("chip").length).toBe(0)
-  })
-
-  it("does not allow incomplete dates", async () => {
-    const { emitted } = renderComponent()
-    const input = screen.queryByLabelText("aria-label") as HTMLInputElement
-
-    await userEvent.type(input, "03")
-    await userEvent.type(input, "{tab}")
-    await nextTick()
-
-    expect(emitted()["update:modelValue"]).not.toBeTruthy()
-    expect(emitted()["update:validationError"]).toEqual([
-      [
-        {
-          message: "Unvollständiges Datum",
-          instance: "identifier",
-        },
-      ],
-    ])
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(onError).toHaveBeenCalledWith({
+      message: ariaLabel + " darf nicht in der Zukunft liegen",
+      instance: id,
+    })
   })
 })