From f41fff7ab3e4ad90cd620c5e2f4ad822a87c4c82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Mon, 2 Sep 2024 19:16:15 +0200
Subject: [PATCH 01/10] core component html

---
 .../__tests__/TableNotifications.cy.js        |  39 ++++++
 src/components/profile/TableNotifications.vue | 127 ++++++++++++++++++
 src/components/types/Notifications.ts         |  15 +++
 test/cypress/fixtures/tableNotifications.json |  77 +++++++++++
 4 files changed, 258 insertions(+)
 create mode 100644 src/components/__tests__/TableNotifications.cy.js
 create mode 100644 src/components/profile/TableNotifications.vue
 create mode 100644 src/components/types/Notifications.ts
 create mode 100644 test/cypress/fixtures/tableNotifications.json

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
new file mode 100644
index 000000000..975c54603
--- /dev/null
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -0,0 +1,39 @@
+import TableNotifications from 'components/profile/TableNotifications.vue';
+import { i18n } from '../../boot/i18n';
+
+// selectors
+const tableNotifications = 'table-notifications';
+
+describe('<TableNotifications>', () => {
+  it('has translation for all strings', () => {
+    cy.testLanguageStringsInContext([], 'index.component', i18n);
+  });
+
+  context('desktop', () => {
+    beforeEach(() => {
+      cy.mount(TableNotifications, {
+        props: {},
+      });
+      cy.viewport('macbook-16');
+    });
+
+    coreTests();
+  });
+
+  context('mobile', () => {
+    beforeEach(() => {
+      cy.mount(TableNotifications, {
+        props: {},
+      });
+      cy.viewport('iphone-6');
+    });
+
+    coreTests();
+  });
+});
+
+function coreTests() {
+  it('renders component', () => {
+    cy.dataCy(tableNotifications).should('be.visible');
+  });
+}
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
new file mode 100644
index 000000000..9aec275b9
--- /dev/null
+++ b/src/components/profile/TableNotifications.vue
@@ -0,0 +1,127 @@
+<script lang="ts">
+/**
+ * TableNotifications Component
+ *
+ * @description * Use this component to display notifications in a table.
+ *
+ * Used in `ProfileTabs`
+ *
+ * @components
+ * - `CHILD`: Component to ... .
+ *
+ * @example
+ * <table-notifications />
+ *
+ * @see [Figma Design](https://www.figma.com/design/L8dVREySVXxh3X12TcFDdR/Do-pr%C3%A1ce-na-kole?node-id=4858-105372&t=WcrxMvLONggUrjGt-1)
+ */
+
+// libraries
+import { date } from 'quasar';
+import { defineComponent } from 'vue';
+
+// composables
+import { i18n } from '../../boot/i18n';
+
+// fixtures
+import tableNotificationsFixture from '../../../test/cypress/fixtures/tableNotifications.json';
+
+export default defineComponent({
+  name: 'TableNotifications',
+  setup() {
+    const columns = [
+      {
+        name: 'title',
+        required: true,
+        label: i18n.global.t('notifications.labelTitle'),
+        align: 'left',
+        field: 'verb',
+        format: (val) => `${val}`,
+        sortable: false,
+      },
+      {
+        name: 'timestamp',
+        align: 'left',
+        label: i18n.global.t('notifications.labelDate'),
+        field: 'timestamp',
+        format: (val: number | string | null): string =>
+          val ? date.formatDate(new Date(String(val)), 'D. MMM. YYYY') : '',
+        sortable: true,
+      },
+      {
+        name: 'unread',
+        align: 'left',
+        label: i18n.global.t('notifications.labelState'),
+        field: 'unread',
+        format: (val: number | string | null): string =>
+          val
+            ? i18n.global.t('notifications.labelUnread')
+            : i18n.global.t('notifications.labelRead'),
+        sortable: true,
+      },
+      {
+        name: 'action',
+        label: i18n.global.t('notifications.labelAction'),
+        field: 'action',
+      },
+    ];
+
+    const rows: Notification[] = tableNotificationsFixture;
+
+    return {
+      columns,
+      rows,
+    };
+  },
+});
+</script>
+
+<template>
+  <div data-cy="table-notifications">
+    <div></div>
+
+    <!-- Table -->
+    <q-table
+      flat
+      bordered
+      title="Treats"
+      :rows="rows"
+      :columns="columns"
+      row-key="name"
+    >
+      <template v-slot:body="props">
+        <q-tr :props="props" @click="onRowClick(props.row)">
+          <q-td key="title" :props="props">
+            {{ props.row.verb }}
+          </q-td>
+          <q-td key="timestamp" :props="props">
+            <template v-for="col in props.cols" :key="col.field">
+              <span v-if="col.field === 'timestamp'">
+                {{ col.value }}
+              </span>
+            </template>
+          </q-td>
+          <q-td key="unread" :props="props">
+            <template v-for="col in props.cols" :key="col.field">
+              <q-badge
+                v-if="col.field === 'unread'"
+                :color="props.row.unread ? 'orange' : 'green'"
+              >
+                {{ col.value }}
+              </q-badge>
+            </template>
+          </q-td>
+          <q-td key="action" :props="props">
+            <q-btn
+              round
+              size="sm"
+              :outline="!props.row.unread"
+              :disabled="!props.row.unread"
+              color="primary"
+              :icon="props.row.unread ? 'check' : 'close'"
+            />
+          </q-td>
+        </q-tr>
+      </template>
+    </q-table>
+  </div>
+</template>
diff --git a/src/components/types/Notifications.ts b/src/components/types/Notifications.ts
new file mode 100644
index 000000000..21bbd8ba5
--- /dev/null
+++ b/src/components/types/Notifications.ts
@@ -0,0 +1,15 @@
+export interface Notification {
+  mark_as_read: string;
+  mark_as_unread: string;
+  id: number;
+  level: string;
+  unread: boolean;
+  deleted: boolean;
+  verb: string;
+  description: string | null;
+  timestamp: string;
+  data: {
+    url: string;
+    icon: string;
+  };
+}
diff --git a/test/cypress/fixtures/tableNotifications.json b/test/cypress/fixtures/tableNotifications.json
new file mode 100644
index 000000000..de6ba3652
--- /dev/null
+++ b/test/cypress/fixtures/tableNotifications.json
@@ -0,0 +1,77 @@
+[
+  {
+    "mark_as_read": "Mark as read",
+    "mark_as_unread": "Mark as unread",
+    "id": 1,
+    "level": "info",
+    "unread": true,
+    "deleted": false,
+    "verb": "New message",
+    "description": "You have a new message from your coordinator.",
+    "timestamp": "2023-05-15T10:30:00Z",
+    "data": {
+      "url": "/messages/1",
+      "icon": "mail"
+    }
+  },
+  {
+    "mark_as_read": "Mark as read",
+    "mark_as_unread": "Mark as unread",
+    "id": 2,
+    "level": "success",
+    "unread": false,
+    "deleted": false,
+    "verb": "Challenge completed",
+    "description": "Congratulations! You've completed the weekly challenge.",
+    "timestamp": "2023-05-14T18:45:00Z",
+    "data": {
+      "url": "/challenges/weekly",
+      "icon": "trophy"
+    }
+  },
+  {
+    "mark_as_read": "Mark as read",
+    "mark_as_unread": "Mark as unread",
+    "id": 3,
+    "level": "warning",
+    "unread": true,
+    "deleted": false,
+    "verb": "Profile update required",
+    "description": "Please update your profile information.",
+    "timestamp": "2023-05-13T09:15:00Z",
+    "data": {
+      "url": "/profile",
+      "icon": "person"
+    }
+  },
+  {
+    "mark_as_read": "Mark as read",
+    "mark_as_unread": "Mark as unread",
+    "id": 4,
+    "level": "error",
+    "unread": true,
+    "deleted": false,
+    "verb": "Payment failed",
+    "description": "Your recent payment for the challenge registration has failed.",
+    "timestamp": "2023-05-12T14:20:00Z",
+    "data": {
+      "url": "/payments",
+      "icon": "warning"
+    }
+  },
+  {
+    "mark_as_read": "Mark as read",
+    "mark_as_unread": "Mark as unread",
+    "id": 5,
+    "level": "info",
+    "unread": false,
+    "deleted": false,
+    "verb": "New team member",
+    "description": "A new member has joined your team.",
+    "timestamp": "2023-05-11T11:00:00Z",
+    "data": {
+      "url": "/team",
+      "icon": "group_add"
+    }
+  }
+]

From f0396650e98348adf923afb8005f1d0957c862ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 15:34:45 +0200
Subject: [PATCH 02/10] labels

---
 src/i18n/cs.toml | 8 ++++++++
 src/i18n/en.toml | 8 ++++++++
 src/i18n/sk.toml | 8 ++++++++
 3 files changed, 24 insertions(+)

diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
index bb5b9c9f4..cb1a5ef2d 100755
--- a/src/i18n/cs.toml
+++ b/src/i18n/cs.toml
@@ -436,6 +436,14 @@ description = "Stáhněte si appku a zapisujte jízdy odkudkoliv."
 voucherApplySuccess = "Voucher byl úspěšně uplatněn"
 voucherApplyError = "Neplatný voucher"
 
+[notifications]
+labelAction = "Akce"
+labelDate = "Datum"
+labelRead = "Přečteno"
+labelState = "Stav"
+labelTitle = "Notifikace"
+labelUnread = "Nepřečteno"
+
 [offer]
 titleOfferValidation = "Pro využití se stačí na místě prokázat:"
 labelOfferValidationTshirt = "Trikem nebo nákrčníkem"
diff --git a/src/i18n/en.toml b/src/i18n/en.toml
index aea757667..9f2374fa4 100755
--- a/src/i18n/en.toml
+++ b/src/i18n/en.toml
@@ -433,6 +433,14 @@ description = "Download the app and log rides from anywhere."
 voucherApplySuccess = "Voucher successfully redeemed"
 voucherApplyError = "Invalid voucher"
 
+[notifications]
+labelAction = "Action"
+labelDate = "Date"
+labelRead = "Read"
+labelState = "State"
+labelTitle = "Notification"
+labelUnread = "Unread"
+
 [offer]
 titleOfferValidation = "To use it, just show proof of identity on the spot:"
 labelOfferValidationTshirt = "T-shirt or neck warmer"
diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
index 3501f4dba..9e28ab5d3 100755
--- a/src/i18n/sk.toml
+++ b/src/i18n/sk.toml
@@ -433,6 +433,14 @@ description = "Stiahnite si aplikáciu a prihlasujte jazdy odkiaľkoľvek."
 voucherApplySuccess = "Voucher bol úspešne uplatnený"
 voucherApplyError = "Neplatný voucher"
 
+[notifications]
+labelAction = "Akcia"
+labelDate = "Dátum"
+labelRead = "Prečité"
+labelState = "Stav"
+labelTitle = "Oznámenie"
+labelUnread = "Neprečité"
+
 [offer]
 titleOfferValidation = "Chcete-li ji použít, stačí se na místě prokázat dokladem totožnosti:"
 labelOfferValidationTshirt = "Tričko nebo nákrčník"

From 1f92e33c3a9502e56cef36d21dbd9a9f79d06f4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 15:58:19 +0200
Subject: [PATCH 03/10] update tests

---
 .../__tests__/TableNotifications.cy.js        | 80 +++++++++++++++++--
 src/components/profile/TableNotifications.vue | 34 ++++----
 2 files changed, 91 insertions(+), 23 deletions(-)

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
index 975c54603..69ba1fdae 100644
--- a/src/components/__tests__/TableNotifications.cy.js
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -1,12 +1,37 @@
+import { date } from 'quasar';
 import TableNotifications from 'components/profile/TableNotifications.vue';
 import { i18n } from '../../boot/i18n';
 
 // selectors
-const tableNotifications = 'table-notifications';
+const dataSelectorNotificationTitle = '[data-cy="notification-title"]';
+const dataSelectorNotificationTimestamp = '[data-cy="notification-timestamp"]';
+const dataSelectorNotificationUnread = '[data-cy="notification-unread"]';
+const dataSelectorNotificationAction = '[data-cy="notification-action"]';
+const selectorTableNotifications = 'table-notifications';
+const selectorNotificationRow = 'notification-row';
 
 describe('<TableNotifications>', () => {
   it('has translation for all strings', () => {
-    cy.testLanguageStringsInContext([], 'index.component', i18n);
+    cy.testLanguageStringsInContext(
+      [
+        'labelAction',
+        'labelDate',
+        'labelRead',
+        'labelState',
+        'labelTitle',
+        'labelUnread',
+      ],
+      'notifications',
+      i18n,
+    );
+  });
+
+  let notifications;
+
+  before(() => {
+    cy.fixture('tableNotifications').then((data) => {
+      notifications = data;
+    });
   });
 
   context('desktop', () => {
@@ -30,10 +55,49 @@ describe('<TableNotifications>', () => {
 
     coreTests();
   });
-});
 
-function coreTests() {
-  it('renders component', () => {
-    cy.dataCy(tableNotifications).should('be.visible');
-  });
-}
+  function coreTests() {
+    it('renders component', () => {
+      cy.dataCy(selectorTableNotifications).should('be.visible');
+    });
+
+    it('renders notifications', () => {
+      cy.dataCy(selectorNotificationRow)
+        .should('be.visible')
+        .should('have.length', 5);
+      cy.dataCy(selectorTableNotifications) // scroll to the right
+        .find('.scroll')
+        .scrollTo('right', {
+          ensureScrollable: false,
+        });
+      cy.dataCy(selectorNotificationRow).each((row, index) => {
+        const notification = notifications[index];
+        cy.wrap(row)
+          .find(dataSelectorNotificationTitle)
+          .should('be.visible')
+          .should('contain', notification.verb);
+        cy.wrap(row)
+          .find(dataSelectorNotificationTimestamp)
+          .should('be.visible')
+          .should(
+            'contain',
+            date.formatDate(
+              new Date(String(notification.timestamp)),
+              'D. MMM. YYYY',
+            ),
+          );
+        cy.wrap(row)
+          .find(dataSelectorNotificationUnread)
+          .should('be.visible')
+          .should(
+            'contain',
+            notification.unread
+              ? i18n.global.t('notifications.labelUnread')
+              : i18n.global.t('notifications.labelRead'),
+          );
+
+        cy.wrap(row).find(dataSelectorNotificationAction).should('be.visible');
+      });
+    });
+  }
+});
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index 9aec275b9..fa1aaaf3b 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -17,7 +17,7 @@
 
 // libraries
 import { date } from 'quasar';
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 
 // composables
 import { i18n } from '../../boot/i18n';
@@ -65,11 +65,16 @@ export default defineComponent({
       },
     ];
 
-    const rows: Notification[] = tableNotificationsFixture;
+    const rows = reactive<Notification[]>(tableNotificationsFixture);
+
+    const markAsRead = (row: Notification) => {
+      row.unread = false;
+    };
 
     return {
       columns,
       rows,
+      markAsRead,
     };
   },
 });
@@ -80,27 +85,24 @@ export default defineComponent({
     <div></div>
 
     <!-- Table -->
-    <q-table
-      flat
-      bordered
-      title="Treats"
-      :rows="rows"
-      :columns="columns"
-      row-key="name"
-    >
+    <q-table flat bordered :rows="rows" :columns="columns" row-key="title">
       <template v-slot:body="props">
-        <q-tr :props="props" @click="onRowClick(props.row)">
-          <q-td key="title" :props="props">
+        <q-tr
+          :props="props"
+          @click="onRowClick(props.row)"
+          data-cy="notification-row"
+        >
+          <q-td key="title" :props="props" data-cy="notification-title">
             {{ props.row.verb }}
           </q-td>
-          <q-td key="timestamp" :props="props">
+          <q-td key="timestamp" :props="props" data-cy="notification-timestamp">
             <template v-for="col in props.cols" :key="col.field">
               <span v-if="col.field === 'timestamp'">
                 {{ col.value }}
               </span>
             </template>
           </q-td>
-          <q-td key="unread" :props="props">
+          <q-td key="unread" :props="props" data-cy="notification-unread">
             <template v-for="col in props.cols" :key="col.field">
               <q-badge
                 v-if="col.field === 'unread'"
@@ -110,14 +112,16 @@ export default defineComponent({
               </q-badge>
             </template>
           </q-td>
-          <q-td key="action" :props="props">
+          <q-td key="action" :props="props" data-cy="notification-action">
             <q-btn
               round
+              unelevated
               size="sm"
               :outline="!props.row.unread"
               :disabled="!props.row.unread"
               color="primary"
               :icon="props.row.unread ? 'check' : 'close'"
+              @click="markAsRead(props.row)"
             />
           </q-td>
         </q-tr>

From a409eaf1dea4812613e182914c351527fc7a43d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 17:56:37 +0200
Subject: [PATCH 04/10] add mark as read functionality + button mark all as
 read

---
 .../__tests__/TableNotifications.cy.js        | 52 ++++++++++++-------
 src/components/profile/TableNotifications.vue | 35 +++++++++++--
 src/i18n/cs.toml                              |  1 +
 src/i18n/en.toml                              |  1 +
 src/i18n/sk.toml                              |  1 +
 5 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
index 69ba1fdae..1b6d4dd2b 100644
--- a/src/components/__tests__/TableNotifications.cy.js
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -5,10 +5,11 @@ import { i18n } from '../../boot/i18n';
 // selectors
 const dataSelectorNotificationTitle = '[data-cy="notification-title"]';
 const dataSelectorNotificationTimestamp = '[data-cy="notification-timestamp"]';
-const dataSelectorNotificationUnread = '[data-cy="notification-unread"]';
+const dataSelectorNotificationState = '[data-cy="notification-state"]';
 const dataSelectorNotificationAction = '[data-cy="notification-action"]';
 const selectorTableNotifications = 'table-notifications';
 const selectorNotificationRow = 'notification-row';
+const selectorButtonMarkAllAsRead = 'button-mark-all-as-read';
 
 describe('<TableNotifications>', () => {
   it('has translation for all strings', () => {
@@ -45,17 +46,6 @@ describe('<TableNotifications>', () => {
     coreTests();
   });
 
-  context('mobile', () => {
-    beforeEach(() => {
-      cy.mount(TableNotifications, {
-        props: {},
-      });
-      cy.viewport('iphone-6');
-    });
-
-    coreTests();
-  });
-
   function coreTests() {
     it('renders component', () => {
       cy.dataCy(selectorTableNotifications).should('be.visible');
@@ -65,11 +55,6 @@ describe('<TableNotifications>', () => {
       cy.dataCy(selectorNotificationRow)
         .should('be.visible')
         .should('have.length', 5);
-      cy.dataCy(selectorTableNotifications) // scroll to the right
-        .find('.scroll')
-        .scrollTo('right', {
-          ensureScrollable: false,
-        });
       cy.dataCy(selectorNotificationRow).each((row, index) => {
         const notification = notifications[index];
         cy.wrap(row)
@@ -87,7 +72,7 @@ describe('<TableNotifications>', () => {
             ),
           );
         cy.wrap(row)
-          .find(dataSelectorNotificationUnread)
+          .find(dataSelectorNotificationState)
           .should('be.visible')
           .should(
             'contain',
@@ -99,5 +84,36 @@ describe('<TableNotifications>', () => {
         cy.wrap(row).find(dataSelectorNotificationAction).should('be.visible');
       });
     });
+
+    it('allows to mark notification as read', () => {
+      cy.dataCy(selectorNotificationRow)
+        .first()
+        .find(dataSelectorNotificationState)
+        .should('contain', i18n.global.t('notifications.labelUnread'));
+      cy.dataCy(selectorNotificationRow)
+        .first()
+        .find(dataSelectorNotificationAction)
+        .find('.q-btn')
+        .click();
+      cy.dataCy(selectorNotificationRow)
+        .first()
+        .find(dataSelectorNotificationState)
+        .should('not.contain', i18n.global.t('notifications.labelUnread'));
+    });
+
+    it('allows to mark all notifications as read', () => {
+      cy.dataCy(selectorButtonMarkAllAsRead)
+        .should('be.visible')
+        .and('not.be.disabled')
+        .click();
+      cy.dataCy(selectorNotificationRow).each((row) => {
+        cy.wrap(row)
+          .find(dataSelectorNotificationState)
+          .should('contain', i18n.global.t('notifications.labelRead'));
+      });
+      cy.dataCy(selectorButtonMarkAllAsRead)
+        .should('be.visible')
+        .and('be.disabled');
+    });
   }
 });
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index fa1aaaf3b..e5320b46f 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -17,7 +17,7 @@
 
 // libraries
 import { date } from 'quasar';
-import { defineComponent, reactive } from 'vue';
+import { computed, defineComponent, reactive } from 'vue';
 
 // composables
 import { i18n } from '../../boot/i18n';
@@ -35,7 +35,7 @@ export default defineComponent({
         label: i18n.global.t('notifications.labelTitle'),
         align: 'left',
         field: 'verb',
-        format: (val) => `${val}`,
+        format: (val: string): string => `${val}`,
         sortable: false,
       },
       {
@@ -67,14 +67,26 @@ export default defineComponent({
 
     const rows = reactive<Notification[]>(tableNotificationsFixture);
 
-    const markAsRead = (row: Notification) => {
+    const markAsRead = (row: Notification): void => {
       row.unread = false;
     };
 
+    const markAllAsRead = (): void => {
+      rows.forEach((row) => {
+        markAsRead(row);
+      });
+    };
+
+    const unreadCount = computed(() => {
+      return rows.filter((row) => row.unread).length;
+    });
+
     return {
       columns,
       rows,
       markAsRead,
+      markAllAsRead,
+      unreadCount,
     };
   },
 });
@@ -82,7 +94,20 @@ export default defineComponent({
 
 <template>
   <div data-cy="table-notifications">
-    <div></div>
+    <div class="flex justify-end q-mb-lg">
+      <q-btn
+        unelevated
+        rounded
+        outline
+        color="primary"
+        :disabled="unreadCount === 0"
+        data-cy="button-mark-all-as-read"
+        @click.prevent="markAllAsRead"
+      >
+        <q-icon name="check" size="18px" class="q-mr-sm" />
+        {{ $t('notifications.labelMarkAllAsRead') }}
+      </q-btn>
+    </div>
 
     <!-- Table -->
     <q-table flat bordered :rows="rows" :columns="columns" row-key="title">
@@ -102,7 +127,7 @@ export default defineComponent({
               </span>
             </template>
           </q-td>
-          <q-td key="unread" :props="props" data-cy="notification-unread">
+          <q-td key="unread" :props="props" data-cy="notification-state">
             <template v-for="col in props.cols" :key="col.field">
               <q-badge
                 v-if="col.field === 'unread'"
diff --git a/src/i18n/cs.toml b/src/i18n/cs.toml
index cb1a5ef2d..106274361 100755
--- a/src/i18n/cs.toml
+++ b/src/i18n/cs.toml
@@ -443,6 +443,7 @@ labelRead = "Přečteno"
 labelState = "Stav"
 labelTitle = "Notifikace"
 labelUnread = "Nepřečteno"
+labelMarkAllAsRead = "Označit vše jako přečtené"
 
 [offer]
 titleOfferValidation = "Pro využití se stačí na místě prokázat:"
diff --git a/src/i18n/en.toml b/src/i18n/en.toml
index 9f2374fa4..046c6719e 100755
--- a/src/i18n/en.toml
+++ b/src/i18n/en.toml
@@ -440,6 +440,7 @@ labelRead = "Read"
 labelState = "State"
 labelTitle = "Notification"
 labelUnread = "Unread"
+labelMarkAllAsRead = "Mark all as read"
 
 [offer]
 titleOfferValidation = "To use it, just show proof of identity on the spot:"
diff --git a/src/i18n/sk.toml b/src/i18n/sk.toml
index 9e28ab5d3..7db6bbb1f 100755
--- a/src/i18n/sk.toml
+++ b/src/i18n/sk.toml
@@ -440,6 +440,7 @@ labelRead = "Prečité"
 labelState = "Stav"
 labelTitle = "Oznámenie"
 labelUnread = "Neprečité"
+labelMarkAllAsRead = "Označiť všetko ako prečítané"
 
 [offer]
 titleOfferValidation = "Chcete-li ji použít, stačí se na místě prokázat dokladem totožnosti:"

From a56cc5347be0ab8060f55e2dc07162f23073371c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 18:13:41 +0200
Subject: [PATCH 05/10] add icon and link

---
 .../__tests__/TableNotifications.cy.js          | 16 +++++++++++++++-
 src/components/profile/ProfileTabs.vue          |  5 ++++-
 src/components/profile/TableNotifications.vue   | 17 +++++++++++++++--
 test/cypress/fixtures/tableNotifications.json   |  4 ++--
 4 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
index 1b6d4dd2b..ff162ae7d 100644
--- a/src/components/__tests__/TableNotifications.cy.js
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -7,6 +7,8 @@ const dataSelectorNotificationTitle = '[data-cy="notification-title"]';
 const dataSelectorNotificationTimestamp = '[data-cy="notification-timestamp"]';
 const dataSelectorNotificationState = '[data-cy="notification-state"]';
 const dataSelectorNotificationAction = '[data-cy="notification-action"]';
+const dataSelectorNotificationIcon = '[data-cy="notification-icon"]';
+const dataSelectorNotificationVerbal = '[data-cy="notification-verbal"]';
 const selectorTableNotifications = 'table-notifications';
 const selectorNotificationRow = 'notification-row';
 const selectorButtonMarkAllAsRead = 'button-mark-all-as-read';
@@ -61,6 +63,19 @@ describe('<TableNotifications>', () => {
           .find(dataSelectorNotificationTitle)
           .should('be.visible')
           .should('contain', notification.verb);
+        cy.wrap(row).find(dataSelectorNotificationIcon).should('be.visible');
+        if (notification.data.url) {
+          cy.wrap(row)
+            .find(dataSelectorNotificationVerbal)
+            .should('be.visible')
+            .and('have.prop', 'tagName', 'A')
+            .and('have.attr', 'href', notification.data.url)
+            .and('have.attr', 'target', '_blank');
+        } else {
+          cy.wrap(row)
+            .find(dataSelectorNotificationVerbal)
+            .and('have.prop', 'tagName', 'SPAN');
+        }
         cy.wrap(row)
           .find(dataSelectorNotificationTimestamp)
           .should('be.visible')
@@ -80,7 +95,6 @@ describe('<TableNotifications>', () => {
               ? i18n.global.t('notifications.labelUnread')
               : i18n.global.t('notifications.labelRead'),
           );
-
         cy.wrap(row).find(dataSelectorNotificationAction).should('be.visible');
       });
     });
diff --git a/src/components/profile/ProfileTabs.vue b/src/components/profile/ProfileTabs.vue
index 39c81cdb8..378f72449 100644
--- a/src/components/profile/ProfileTabs.vue
+++ b/src/components/profile/ProfileTabs.vue
@@ -7,6 +7,7 @@
  *
  * @components
  * - `ProfileDetails`: Component to display a ProfileDetails section.
+ * - `TableNotifications`: Component to display a table of notifications.
  *
  * @example
  * <profile-tabs />
@@ -19,6 +20,7 @@ import { defineComponent, ref } from 'vue';
 
 // components
 import ProfileDetails from './ProfileDetails.vue';
+import TableNotifications from './TableNotifications.vue';
 
 // routes
 import { routesConf } from '../../router/routes_conf';
@@ -35,6 +37,7 @@ export default defineComponent({
   name: 'ProfileTabs',
   components: {
     ProfileDetails,
+    TableNotifications,
   },
   setup() {
     const activeTab = ref(tabsProfile.none);
@@ -113,7 +116,7 @@ export default defineComponent({
         :name="tabsProfile.notifications"
         data-cy="profile-tabs-panel-notifications"
       >
-        <!-- <profile-notifications /> -->
+        <table-notifications />
       </q-tab-panel>
     </q-tab-panels>
   </div>
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index e5320b46f..74b528b6d 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -118,7 +118,20 @@ export default defineComponent({
           data-cy="notification-row"
         >
           <q-td key="title" :props="props" data-cy="notification-title">
-            {{ props.row.verb }}
+            <q-icon
+              :name="props.row.data.icon"
+              size="18px"
+              color="primary"
+              class="q-mr-sm"
+              data-cy="notification-icon"
+            />
+            <component
+              :is="props.row.data.url ? 'a' : 'span'"
+              :href="props.row.data.url"
+              target="_blank"
+              data-cy="notification-verbal"
+              >{{ props.row.verb }}</component
+            >
           </q-td>
           <q-td key="timestamp" :props="props" data-cy="notification-timestamp">
             <template v-for="col in props.cols" :key="col.field">
@@ -141,7 +154,7 @@ export default defineComponent({
             <q-btn
               round
               unelevated
-              size="sm"
+              size="xs"
               :outline="!props.row.unread"
               :disabled="!props.row.unread"
               color="primary"
diff --git a/test/cypress/fixtures/tableNotifications.json b/test/cypress/fixtures/tableNotifications.json
index de6ba3652..3d6bf808c 100644
--- a/test/cypress/fixtures/tableNotifications.json
+++ b/test/cypress/fixtures/tableNotifications.json
@@ -10,7 +10,7 @@
     "description": "You have a new message from your coordinator.",
     "timestamp": "2023-05-15T10:30:00Z",
     "data": {
-      "url": "/messages/1",
+      "url": "",
       "icon": "mail"
     }
   },
@@ -26,7 +26,7 @@
     "timestamp": "2023-05-14T18:45:00Z",
     "data": {
       "url": "/challenges/weekly",
-      "icon": "trophy"
+      "icon": "mdi-trophy"
     }
   },
   {

From 5bfd8b5c2b0b704ecc55a3740d0b3a49ff600f77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 20:34:54 +0200
Subject: [PATCH 06/10] fix column type

---
 src/components/profile/TableNotifications.vue | 29 ++++++++++++-------
 src/components/types/Table.ts                 | 21 ++++++++++----
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index 74b528b6d..4e4a637e2 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -25,18 +25,22 @@ import { i18n } from '../../boot/i18n';
 // fixtures
 import tableNotificationsFixture from '../../../test/cypress/fixtures/tableNotifications.json';
 
+// types
+import type { TableColumn } from '../types/Table';
+import type { Notification } from '../types/Notifications';
+
 export default defineComponent({
   name: 'TableNotifications',
   setup() {
-    const columns = [
+    const columns: TableColumn[] = [
       {
         name: 'title',
-        required: true,
-        label: i18n.global.t('notifications.labelTitle'),
         align: 'left',
+        label: i18n.global.t('notifications.labelTitle'),
         field: 'verb',
-        format: (val: string): string => `${val}`,
+        format: (val: string | number | null): string => `${val}`,
         sortable: false,
+        required: true,
       },
       {
         name: 'timestamp',
@@ -46,6 +50,7 @@ export default defineComponent({
         format: (val: number | string | null): string =>
           val ? date.formatDate(new Date(String(val)), 'D. MMM. YYYY') : '',
         sortable: true,
+        required: true,
       },
       {
         name: 'unread',
@@ -57,11 +62,15 @@ export default defineComponent({
             ? i18n.global.t('notifications.labelUnread')
             : i18n.global.t('notifications.labelRead'),
         sortable: true,
+        required: true,
       },
       {
         name: 'action',
+        align: 'right',
         label: i18n.global.t('notifications.labelAction'),
         field: 'action',
+        sortable: false,
+        required: false,
       },
     ];
 
@@ -112,11 +121,7 @@ export default defineComponent({
     <!-- Table -->
     <q-table flat bordered :rows="rows" :columns="columns" row-key="title">
       <template v-slot:body="props">
-        <q-tr
-          :props="props"
-          @click="onRowClick(props.row)"
-          data-cy="notification-row"
-        >
+        <q-tr :props="props" data-cy="notification-row">
           <q-td key="title" :props="props" data-cy="notification-title">
             <q-icon
               :name="props.row.data.icon"
@@ -158,7 +163,11 @@ export default defineComponent({
               :outline="!props.row.unread"
               :disabled="!props.row.unread"
               color="primary"
-              :icon="props.row.unread ? 'check' : 'close'"
+              :icon="
+                props.row.unread
+                  ? 'mdi-email-check-outline'
+                  : 'mdi-email-open-outline'
+              "
               @click="markAsRead(props.row)"
             />
           </q-td>
diff --git a/src/components/types/Table.ts b/src/components/types/Table.ts
index 9c1d62b5f..ba8b41471 100644
--- a/src/components/types/Table.ts
+++ b/src/components/types/Table.ts
@@ -1,11 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 export type TableColumn = {
-  align: string;
-  field: string;
-  format?: (val: number | string | null) => string;
-  label: string;
   name: string;
-  required: boolean;
-  sortable: boolean;
+  label: string;
+  field: string | ((row: any) => any);
+  required?: boolean;
+  align?: 'left' | 'right' | 'center';
+  sortable?: boolean;
+  sort?: (a: any, b: any, rowA: any, rowB: any) => number;
+  rawSort?: (a: any, b: any, rowA: any, rowB: any) => number;
+  sortOrder?: 'ad' | 'da';
+  format?: (val: any, row: any) => any;
+  style?: string | ((row: any) => string);
+  classes?: string | ((row: any) => string);
+  headerStyle?: string;
+  headerClasses?: string;
 };
 
 export type TableRow = {

From af49e0aa52174c222db4fe4379728b67ca2c4f2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 20:35:44 +0200
Subject: [PATCH 07/10] fix column type

---
 src/components/types/Table.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/types/Table.ts b/src/components/types/Table.ts
index ba8b41471..cb856c771 100644
--- a/src/components/types/Table.ts
+++ b/src/components/types/Table.ts
@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+// this rule is disabled because we are copying Quasar table column type.
 
 export type TableColumn = {
   name: string;

From c6c8f285e7a5423e79a2df1052eb9a251fcc356c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Tue, 3 Sep 2024 20:50:37 +0200
Subject: [PATCH 08/10] update font weight + tests

---
 .../__tests__/TableNotifications.cy.js        | 34 +++++++++++++++----
 src/components/profile/TableNotifications.vue |  8 ++++-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
index ff162ae7d..6ba8d74ee 100644
--- a/src/components/__tests__/TableNotifications.cy.js
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -1,8 +1,13 @@
-import { date } from 'quasar';
+import { colors, date } from 'quasar';
 import TableNotifications from 'components/profile/TableNotifications.vue';
 import { i18n } from '../../boot/i18n';
 
+// colors
+const { getPaletteColor } = colors;
+const grey10 = getPaletteColor('grey-10');
+
 // selectors
+const classSelectorQBtn = '.q-btn';
 const dataSelectorNotificationTitle = '[data-cy="notification-title"]';
 const dataSelectorNotificationTimestamp = '[data-cy="notification-timestamp"]';
 const dataSelectorNotificationState = '[data-cy="notification-state"]';
@@ -13,6 +18,11 @@ const selectorTableNotifications = 'table-notifications';
 const selectorNotificationRow = 'notification-row';
 const selectorButtonMarkAllAsRead = 'button-mark-all-as-read';
 
+// variables
+const defaultTablePostsPerPage = 5;
+const fontWeightBold = '700';
+const fontWeightRegular = '400';
+
 describe('<TableNotifications>', () => {
   it('has translation for all strings', () => {
     cy.testLanguageStringsInContext(
@@ -56,7 +66,7 @@ describe('<TableNotifications>', () => {
     it('renders notifications', () => {
       cy.dataCy(selectorNotificationRow)
         .should('be.visible')
-        .should('have.length', 5);
+        .should('have.length', defaultTablePostsPerPage);
       cy.dataCy(selectorNotificationRow).each((row, index) => {
         const notification = notifications[index];
         cy.wrap(row)
@@ -64,22 +74,32 @@ describe('<TableNotifications>', () => {
           .should('be.visible')
           .should('contain', notification.verb);
         cy.wrap(row).find(dataSelectorNotificationIcon).should('be.visible');
+        cy.wrap(row).find(dataSelectorNotificationVerbal).should('be.visible');
         if (notification.data.url) {
           cy.wrap(row)
             .find(dataSelectorNotificationVerbal)
-            .should('be.visible')
             .and('have.prop', 'tagName', 'A')
             .and('have.attr', 'href', notification.data.url)
             .and('have.attr', 'target', '_blank');
         } else {
           cy.wrap(row)
             .find(dataSelectorNotificationVerbal)
-            .and('have.prop', 'tagName', 'SPAN');
+            .should('have.prop', 'tagName', 'SPAN')
+            .and('have.color', grey10);
+        }
+        if (notification.unread) {
+          cy.wrap(row)
+            .find(dataSelectorNotificationVerbal)
+            .should('have.css', 'font-weight', fontWeightBold);
+        } else {
+          cy.wrap(row)
+            .find(dataSelectorNotificationVerbal)
+            .should('have.css', 'font-weight', fontWeightRegular);
         }
         cy.wrap(row)
           .find(dataSelectorNotificationTimestamp)
           .should('be.visible')
-          .should(
+          .and(
             'contain',
             date.formatDate(
               new Date(String(notification.timestamp)),
@@ -89,7 +109,7 @@ describe('<TableNotifications>', () => {
         cy.wrap(row)
           .find(dataSelectorNotificationState)
           .should('be.visible')
-          .should(
+          .and(
             'contain',
             notification.unread
               ? i18n.global.t('notifications.labelUnread')
@@ -107,7 +127,7 @@ describe('<TableNotifications>', () => {
       cy.dataCy(selectorNotificationRow)
         .first()
         .find(dataSelectorNotificationAction)
-        .find('.q-btn')
+        .find(classSelectorQBtn)
         .click();
       cy.dataCy(selectorNotificationRow)
         .first()
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index 4e4a637e2..5cb9472d9 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -122,7 +122,12 @@ export default defineComponent({
     <q-table flat bordered :rows="rows" :columns="columns" row-key="title">
       <template v-slot:body="props">
         <q-tr :props="props" data-cy="notification-row">
-          <q-td key="title" :props="props" data-cy="notification-title">
+          <q-td
+            key="title"
+            :props="props"
+            class="text-grey-10"
+            data-cy="notification-title"
+          >
             <q-icon
               :name="props.row.data.icon"
               size="18px"
@@ -133,6 +138,7 @@ export default defineComponent({
             <component
               :is="props.row.data.url ? 'a' : 'span'"
               :href="props.row.data.url"
+              :class="props.row.unread ? 'text-weight-bold' : ''"
               target="_blank"
               data-cy="notification-verbal"
               >{{ props.row.verb }}</component

From b506e7176f4f3840a959955a6320fc79e294193c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Wed, 4 Sep 2024 16:31:02 +0200
Subject: [PATCH 09/10] table notification row click + enums

---
 .../__tests__/TableNotifications.cy.js        | 12 +++-
 src/components/profile/TableNotifications.vue | 70 +++++++++++++++----
 test/cypress/fixtures/tableNotifications.json |  6 +-
 3 files changed, 71 insertions(+), 17 deletions(-)

diff --git a/src/components/__tests__/TableNotifications.cy.js b/src/components/__tests__/TableNotifications.cy.js
index 6ba8d74ee..c20b5bb3f 100644
--- a/src/components/__tests__/TableNotifications.cy.js
+++ b/src/components/__tests__/TableNotifications.cy.js
@@ -132,7 +132,17 @@ describe('<TableNotifications>', () => {
       cy.dataCy(selectorNotificationRow)
         .first()
         .find(dataSelectorNotificationState)
-        .should('not.contain', i18n.global.t('notifications.labelUnread'));
+        .should('not.contain', i18n.global.t('notifications.labelUnread'))
+        .and('contain', i18n.global.t('notifications.labelRead'));
+    });
+
+    it('marks notification as read when row is clicked', () => {
+      cy.dataCy(selectorNotificationRow).last().click();
+      cy.dataCy(selectorNotificationRow)
+        .last()
+        .find(dataSelectorNotificationState)
+        .should('not.contain', i18n.global.t('notifications.labelUnread'))
+        .and('contain', i18n.global.t('notifications.labelRead'));
     });
 
     it('allows to mark all notifications as read', () => {
diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index 5cb9472d9..cd3781ee5 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -3,6 +3,10 @@
  * TableNotifications Component
  *
  * @description * Use this component to display notifications in a table.
+ * Shows icon, notification title, date, state and action button.
+ * After clicking on a notification, it is moved to the "read" state.
+ * If the notification has a URL, it is opened.
+ * Action button click marks the notification as read, but does not open URL.
  *
  * Used in `ProfileTabs`
  *
@@ -22,6 +26,14 @@ import { computed, defineComponent, reactive } from 'vue';
 // composables
 import { i18n } from '../../boot/i18n';
 
+// enums
+enum NotificationTableColumn {
+  title = 'title',
+  timestamp = 'timestamp',
+  unread = 'unread',
+  action = 'action',
+}
+
 // fixtures
 import tableNotificationsFixture from '../../../test/cypress/fixtures/tableNotifications.json';
 
@@ -34,7 +46,7 @@ export default defineComponent({
   setup() {
     const columns: TableColumn[] = [
       {
-        name: 'title',
+        name: NotificationTableColumn.title,
         align: 'left',
         label: i18n.global.t('notifications.labelTitle'),
         field: 'verb',
@@ -43,7 +55,7 @@ export default defineComponent({
         required: true,
       },
       {
-        name: 'timestamp',
+        name: NotificationTableColumn.timestamp,
         align: 'left',
         label: i18n.global.t('notifications.labelDate'),
         field: 'timestamp',
@@ -53,7 +65,7 @@ export default defineComponent({
         required: true,
       },
       {
-        name: 'unread',
+        name: NotificationTableColumn.unread,
         align: 'left',
         label: i18n.global.t('notifications.labelState'),
         field: 'unread',
@@ -65,7 +77,7 @@ export default defineComponent({
         required: true,
       },
       {
-        name: 'action',
+        name: NotificationTableColumn.action,
         align: 'right',
         label: i18n.global.t('notifications.labelAction'),
         field: 'action',
@@ -76,6 +88,13 @@ export default defineComponent({
 
     const rows = reactive<Notification[]>(tableNotificationsFixture);
 
+    const onNotificationClick = (row: Notification): void => {
+      markAsRead(row);
+      if (row.data.url) {
+        window.location.href = row.data.url;
+      }
+    };
+
     const markAsRead = (row: Notification): void => {
       row.unread = false;
     };
@@ -96,6 +115,7 @@ export default defineComponent({
       markAsRead,
       markAllAsRead,
       unreadCount,
+      onNotificationClick,
     };
   },
 });
@@ -119,11 +139,22 @@ export default defineComponent({
     </div>
 
     <!-- Table -->
-    <q-table flat bordered :rows="rows" :columns="columns" row-key="title">
+    <q-table
+      flat
+      bordered
+      :rows="rows"
+      :columns="columns"
+      :row-key="NotificationTableColumn.title"
+    >
       <template v-slot:body="props">
-        <q-tr :props="props" data-cy="notification-row">
+        <q-tr
+          :props="props"
+          class="cursor-pointer"
+          data-cy="notification-row"
+          @click="onNotificationClick(props.row)"
+        >
           <q-td
-            key="title"
+            :key="NotificationTableColumn.title"
             :props="props"
             class="text-grey-10"
             data-cy="notification-title"
@@ -141,27 +172,40 @@ export default defineComponent({
               :class="props.row.unread ? 'text-weight-bold' : ''"
               target="_blank"
               data-cy="notification-verbal"
+              @click.prevent
               >{{ props.row.verb }}</component
             >
           </q-td>
-          <q-td key="timestamp" :props="props" data-cy="notification-timestamp">
+          <q-td
+            :key="NotificationTableColumn.timestamp"
+            :props="props"
+            data-cy="notification-timestamp"
+          >
             <template v-for="col in props.cols" :key="col.field">
-              <span v-if="col.field === 'timestamp'">
+              <span v-if="col.field === NotificationTableColumn.timestamp">
                 {{ col.value }}
               </span>
             </template>
           </q-td>
-          <q-td key="unread" :props="props" data-cy="notification-state">
+          <q-td
+            :key="NotificationTableColumn.unread"
+            :props="props"
+            data-cy="notification-state"
+          >
             <template v-for="col in props.cols" :key="col.field">
               <q-badge
-                v-if="col.field === 'unread'"
+                v-if="col.field === NotificationTableColumn.unread"
                 :color="props.row.unread ? 'orange' : 'green'"
               >
                 {{ col.value }}
               </q-badge>
             </template>
           </q-td>
-          <q-td key="action" :props="props" data-cy="notification-action">
+          <q-td
+            :key="NotificationTableColumn.action"
+            :props="props"
+            data-cy="notification-action"
+          >
             <q-btn
               round
               unelevated
@@ -174,7 +218,7 @@ export default defineComponent({
                   ? 'mdi-email-check-outline'
                   : 'mdi-email-open-outline'
               "
-              @click="markAsRead(props.row)"
+              @click.stop="markAsRead(props.row)"
             />
           </q-td>
         </q-tr>
diff --git a/test/cypress/fixtures/tableNotifications.json b/test/cypress/fixtures/tableNotifications.json
index 3d6bf808c..a169c798c 100644
--- a/test/cypress/fixtures/tableNotifications.json
+++ b/test/cypress/fixtures/tableNotifications.json
@@ -49,7 +49,7 @@
     "mark_as_unread": "Mark as unread",
     "id": 4,
     "level": "error",
-    "unread": true,
+    "unread": false,
     "deleted": false,
     "verb": "Payment failed",
     "description": "Your recent payment for the challenge registration has failed.",
@@ -64,13 +64,13 @@
     "mark_as_unread": "Mark as unread",
     "id": 5,
     "level": "info",
-    "unread": false,
+    "unread": true,
     "deleted": false,
     "verb": "New team member",
     "description": "A new member has joined your team.",
     "timestamp": "2023-05-11T11:00:00Z",
     "data": {
-      "url": "/team",
+      "url": "",
       "icon": "group_add"
     }
   }

From 3230e595179f6c84e1598d9056499cfdfb24f0a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=CC=8Cimon=20Macek?= <simon.macek@proficio.cz>
Date: Thu, 5 Sep 2024 13:53:08 +0200
Subject: [PATCH 10/10] expose enum

---
 src/components/profile/TableNotifications.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/profile/TableNotifications.vue b/src/components/profile/TableNotifications.vue
index cd3781ee5..3315e77b4 100644
--- a/src/components/profile/TableNotifications.vue
+++ b/src/components/profile/TableNotifications.vue
@@ -114,6 +114,7 @@ export default defineComponent({
       rows,
       markAsRead,
       markAllAsRead,
+      NotificationTableColumn,
       unreadCount,
       onNotificationClick,
     };