arnellebalane · arnellebalane · Oct 31, 2024 · Oct 31, 2024
diff --git a/src/features/todos/components/TodoItem.spec.js b/src/features/todos/components/TodoItem.spec.js
@@ -3,6 +3,7 @@ import { SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
 import TodoItem from './TodoItem.svelte';
 
 import { settings } from '@features/settings/store';
+import { TODOS_DATE_ABSOLUTE } from '../constants';
 import { generateTodo } from '../utils/test-helpers';
 
 describe('TodoItem', () => {
@@ -19,6 +20,7 @@ describe('TodoItem', () => {
             tags: ['one', 'two'],
             date: '2024-01-27',
         });
+        settings.set({ todoDateDisplay: TODOS_DATE_ABSOLUTE });
 
         cy.mount(TodoItem, {
             props: { todo },

diff --git a/src/features/todos/components/TodoItemDate.spec.js b/src/features/todos/components/TodoItemDate.spec.js
@@ -1,5 +1,6 @@
 import TodoItemDate from './TodoItemDate.svelte';
 
+import { settings } from '@features/settings/store';
 import { TODOS_DATE_ABSOLUTE, TODOS_DATE_RELATIVE } from '@features/todos/constants';
 
 describe('TodoItemDate', () => {
@@ -9,25 +10,21 @@ describe('TodoItemDate', () => {
 
     it('displays date in absolute format', () => {
         const date = '2024-01-10';
+        settings.set({ todoDateDisplay: TODOS_DATE_ABSOLUTE });
 
         cy.mount(TodoItemDate, {
-            props: {
-                date,
-                variant: TODOS_DATE_ABSOLUTE,
-            },
+            props: { date },
         });
 
         cy.get('[data-cy="todo-item-date"]').should('contain.text', 'Jan 10');
     });
 
     it('displays date in relative format', () => {
         const date = '2024-01-10';
+        settings.set({ todoDateDisplay: TODOS_DATE_RELATIVE });
 
         cy.mount(TodoItemDate, {
-            props: {
-                date,
-                variant: TODOS_DATE_RELATIVE,
-            },
+            props: { date },
         });
 
         cy.get('[data-cy="todo-item-date"]').should('contain.text', 'In 9 days');

diff --git a/src/features/todos/components/TodoItemDate.svelte b/src/features/todos/components/TodoItemDate.svelte
@@ -1,15 +1,18 @@
 <script>
 import Badge from '@components/Badge.svelte';
 
+import { settings } from '@features/settings/store';
 import { TODOS_DATE_ABSOLUTE } from '@features/todos/constants';
 import { formatAbsoluteDate, formatRelativeDate } from '../lib/date';
 
 export let date;
-export let variant = TODOS_DATE_ABSOLUTE;
 
 $: dateObject = new Date(`${date}T00:00:00`);
 $: dateDisplay = (() => {
-    const display = variant === TODOS_DATE_ABSOLUTE ? formatAbsoluteDate(dateObject) : formatRelativeDate(dateObject);
+    const display =
+        $settings.todoDateDisplay === TODOS_DATE_ABSOLUTE
+            ? formatAbsoluteDate(dateObject)
+            : formatRelativeDate(dateObject);
     return display.charAt(0).toUpperCase() + display.substring(1);
 })();
 </script>

diff --git a/src/features/todos/settings/DateDisplayChoiceField.spec.js b/src/features/todos/settings/DateDisplayChoiceField.spec.js
@@ -0,0 +1,40 @@
+import DateDisplayChoiceField from './DateDisplayChoiceField.svelte';
+
+const choice = {
+    label: 'Label text',
+    subtext: 'This is the subtext',
+};
+
+describe('DateDisplayChoiceField', () => {
+    beforeEach(() => {
+        cy.viewport(500, 500);
+    });
+
+    it('displays the choice label and subtext', () => {
+        cy.mount(DateDisplayChoiceField, {
+            props: { choice },
+        });
+
+        cy.get('p').should('contain.text', choice.label);
+        cy.get('span').should('contain.text', choice.subtext);
+    });
+
+    it('does not add the selected class when selected prop is false', () => {
+        cy.mount(DateDisplayChoiceField, {
+            props: { choice },
+        });
+
+        cy.get('p').should('not.have.class', 'selected');
+    });
+
+    it('adds the selected class when selected prop is true', () => {
+        cy.mount(DateDisplayChoiceField, {
+            props: {
+                choice,
+                selected: true,
+            },
+        });
+
+        cy.get('p').should('have.class', 'selected');
+    });
+});
diff --git a/src/features/todos/settings/DateDisplayChoiceField.svelte b/src/features/todos/settings/DateDisplayChoiceField.svelte
@@ -0,0 +1,31 @@
+<script>
+export let choice;
+export let selected;
+</script>
+
+<p class:selected>
+    {choice.label}
+    <span>{choice.subtext}</span>
+</p>
+
+<style>
+p {
+    padding: 1.2rem;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+p.selected {
+    border-color: var(--primary);
+}
+
+span {
+    display: block;
+    font-size: 1.3rem;
+    font-weight: 400;
+    color: var(--dimmed-500);
+}
+</style>
diff --git a/src/features/todos/settings/TodosSettings.spec.js b/src/features/todos/settings/TodosSettings.spec.js
@@ -1,55 +1,109 @@
+import { TODOS_DATE_ABSOLUTE, TODOS_DATE_RELATIVE } from '../constants';
+
 import { component as TodosSettings } from '.';
 
 describe('TodosSettings', () => {
     beforeEach(() => {
         cy.viewport(500, 500);
     });
 
-    it('selects open optional fields switch when data.openOptionalFields is true', () => {
+    it('selects toggles based on data prop', () => {
+        const data = {
+            openOptionalFields: true,
+            moveTodosAutomatically: true,
+        };
+
         cy.mount(TodosSettings, {
-            props: {
-                data: {
-                    openOptionalFields: true,
-                },
-            },
+            props: { data },
         });
 
         cy.get('[data-cy="open-optional-fields-toggle"]').should('be.checked');
+        cy.get('[data-cy="move-todos-automatically-toggle"]').should('be.checked');
     });
 
-    it('deselects open optional fields switch when data.openOptionalFields is false', () => {
+    it('deselects toggles based on data prop', () => {
+        const data = {
+            openOptionalFields: false,
+            moveTodosAutomatically: false,
+        };
+
         cy.mount(TodosSettings, {
-            props: {
-                data: {
-                    openOptionalFields: false,
-                },
-            },
+            props: { data },
         });
 
         cy.get('[data-cy="open-optional-fields-toggle"]').should('not.be.checked');
+        cy.get('[data-cy="move-todos-automatically-toggle"]').should('not.be.checked');
     });
 
-    it('selects move todos automatically switch when data.moveTodosAutomatically is true', () => {
+    it('selects date display format based on data.todoDateDisplay', () => {
+        const data = {
+            todoDateDisplay: TODOS_DATE_RELATIVE,
+        };
+
         cy.mount(TodosSettings, {
-            props: {
-                data: {
-                    moveTodosAutomatically: true,
-                },
-            },
+            props: { data },
         });
 
-        cy.get('[data-cy="move-todos-automatically-toggle"]').should('be.checked');
+        cy.get(`[data-cy="todo-date-display-selector"] input[value="${TODOS_DATE_RELATIVE}"]`).should('be.checked');
     });
 
-    it('selects move todos automatically switch when data.moveTodosAutomatically is false', () => {
+    it('dispatches "change" event when openOptionalFields toggle changes', () => {
+        const data = {
+            openOptionalFields: true,
+        };
+
+        const changeSpy = cy.spy();
         cy.mount(TodosSettings, {
-            props: {
-                data: {
-                    moveTodosAutomatically: false,
-                },
-            },
+            props: { data },
+        }).then(({ component }) => {
+            component.$on('change', changeSpy);
         });
 
-        cy.get('[data-cy="move-todos-automatically-toggle"]').should('not.be.checked');
+        cy.get('[data-cy="open-optional-fields-toggle"]').click({ force: true });
+
+        cy.wrap(changeSpy).should('have.been.called');
+        cy.wrap(data).should('deep.equal', {
+            openOptionalFields: false,
+        });
+    });
+
+    it('dispatches "change" event when moveTodosAutomatically toggle changes', () => {
+        const data = {
+            moveTodosAutomatically: true,
+        };
+
+        const changeSpy = cy.spy();
+        cy.mount(TodosSettings, {
+            props: { data },
+        }).then(({ component }) => {
+            component.$on('change', changeSpy);
+        });
+
+        cy.get('[data-cy="move-todos-automatically-toggle"]').click({ force: true });
+
+        cy.wrap(changeSpy).should('have.been.called');
+        cy.wrap(data).should('deep.equal', {
+            moveTodosAutomatically: false,
+        });
+    });
+
+    it('dispatches "change" event when date display format changes', () => {
+        const data = {
+            todoDateDisplay: TODOS_DATE_ABSOLUTE,
+        };
+
+        const changeSpy = cy.spy();
+        cy.mount(TodosSettings, {
+            props: { data },
+        }).then(({ component }) => {
+            component.$on('change', changeSpy);
+        });
+
+        cy.get(`[data-cy="todo-date-display-selector"] input[value="${TODOS_DATE_RELATIVE}"]`).click({ force: true });
+
+        cy.wrap(changeSpy).should('have.been.called');
+        cy.wrap(data).should('deep.equal', {
+            todoDateDisplay: TODOS_DATE_RELATIVE,
+        });
     });
 });
diff --git a/src/features/todos/settings/TodosSettings.svelte b/src/features/todos/settings/TodosSettings.svelte
@@ -1,9 +1,18 @@
 <script>
+import Selector from '@components/Selector.svelte';
 import Switch from '@components/Switch.svelte';
+import DateDisplayChoiceField from './DateDisplayChoiceField.svelte';
+
+import { TODOS_DATE_ABSOLUTE, TODOS_DATE_RELATIVE } from '../constants';
 
 import { getDefaultSettings } from '.';
 
 export let data = getDefaultSettings();
+
+const dateFormatChoices = [
+    { label: 'Absolute', subtext: 'Example: "Dec 21"', value: TODOS_DATE_ABSOLUTE },
+    { label: 'Relative', subtext: 'Example: "In 5 days"', value: TODOS_DATE_RELATIVE },
+];
 </script>
 
 <section>
@@ -32,6 +41,18 @@ export let data = getDefaultSettings();
             data-cy="move-todos-automatically-toggle"
         />
     </div>
+
+    <div>
+        <label for="todoDateDisplay">Date display format</label>
+        <Selector
+            name="todoDateDisplay"
+            bind:value={data.todoDateDisplay}
+            choices={dateFormatChoices}
+            choiceComponent={DateDisplayChoiceField}
+            on:change
+            data-cy="todo-date-display-selector"
+        />
+    </div>
 </section>
 
 <style>

diff --git a/src/features/todos/settings/index.js b/src/features/todos/settings/index.js
@@ -1,11 +1,20 @@
 import TodosSettings from './TodosSettings.svelte';
 
+import { TODOS_DATE_ABSOLUTE } from '../constants';
+
 export const id = 'TODOS';
 export const label = 'Todos';
 export const component = TodosSettings;
 
 export const getDefaultSettings = () => ({
+    todoDateDisplay: TODOS_DATE_ABSOLUTE,
     openOptionalFields: false,
     moveTodosAutomatically: false,
 });
-export const allowedFields = ['openOptionalFields', 'moveTodosLastUpdated', 'moveTodosAutomatically'];
+
+export const allowedFields = [
+    'todoDateDisplay',
+    'openOptionalFields',
+    'moveTodosLastUpdated',
+    'moveTodosAutomatically',
+];