From 494a3514a6a676e507f0c1075d24651924afd5e6 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Fri, 28 Mar 2025 10:30:57 +0100
Subject: [PATCH] fix regexp, add more no-select, refactor, fix date formatting

---
 .../slots/ContributionMessagesListItem.vue    |   4 +-
 .../components/Tables/OpenCreationsTable.vue  |  15 +-
 .../src/components/Tables/SearchUserTable.vue |  33 +++-
 admin/src/pages/CreationConfirm.vue           | 172 +++++++-----------
 frontend/src/locales/de.json                  |   2 +-
 5 files changed, 95 insertions(+), 131 deletions(-)

diff --git a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
index 22bbc6157..a786adfda 100644
--- a/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
+++ b/admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
@@ -7,7 +7,7 @@
       <small class="ms-2" data-test="moderator-date">
         {{ $d(new Date(message.createdAt), 'short') }}
       </small>
-      <span class="ms-2 me-2" data-test="moderator-name">
+      <span class="ms-2 me-2 no-select" data-test="moderator-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
       <BAvatar square variant="warning">
@@ -28,7 +28,7 @@
       <BAvatar variant="info">
         <variant-icon icon="person-fill" variant="white" />
       </BAvatar>
-      <span class="ms-2 me-2" data-test="user-name">
+      <span class="ms-2 me-2 no-select" data-test="user-name">
         {{ message.userFirstName }} {{ message.userLastName }}
       </span>
       <small class="ms-2" data-test="user-date">
diff --git a/admin/src/components/Tables/OpenCreationsTable.vue b/admin/src/components/Tables/OpenCreationsTable.vue
index 6a1680601..5bce1bfb7 100644
--- a/admin/src/components/Tables/OpenCreationsTable.vue
+++ b/admin/src/components/Tables/OpenCreationsTable.vue
@@ -93,15 +93,6 @@
           </BButton>
         </div>
       </template>
-      <template #cell(firstName)="row">
-        <div class="no-select">{{ row.item.firstName }}</div>
-      </template>
-      <template #cell(lastName)="row">
-        <div class="no-select">{{ row.item.lastName }}</div>
-      </template>
-      <template #cell(contributionDate)="row">
-        <div class="no-select">{{ row.item.contributionDate }}</div>
-      </template>
       <template #row-details="row">
         <row-details
           :row="row"
@@ -250,7 +241,7 @@ export default {
 
       if (selectedText) {
         // remove hashtags
-        const cleanedText = selectedText.replace(/#[a-zA-Z0-9_-]*/g, '')
+        const cleanedText = selectedText.replace(/#([\p{L}\p{N}_-]+)/gu, '')
         event.clipboardData.setData('text/plain', cleanedText)
         event.preventDefault()
       }
@@ -263,8 +254,4 @@ export default {
   background-color: #e1a908;
   border-color: #e1a908;
 }
-
-.no-select {
-  user-select: none;
-}
 </style>
diff --git a/admin/src/components/Tables/SearchUserTable.vue b/admin/src/components/Tables/SearchUserTable.vue
index 996b35733..1a92962e3 100644
--- a/admin/src/components/Tables/SearchUserTable.vue
+++ b/admin/src/components/Tables/SearchUserTable.vue
@@ -156,6 +156,7 @@ const props = defineProps({
 const rolesValues = {
   ADMIN: 'ADMIN',
   MODERATOR: 'MODERATOR',
+  MODERATOR_AI: 'MODERATOR_AI',
   USER: 'USER',
 }
 
@@ -166,6 +167,28 @@ const myItems = ref()
 const creationUserData = ref({})
 const rowDetails = ref()
 
+const userRoleChangeConfirmationBody = computed(() => {
+  let roleLabel = ''
+  switch (userChangeForm.value.roleSelected) {
+    case rolesValues.ADMIN:
+      roleLabel = t('userRole.selectRoles.admin')
+      break
+    case rolesValues.MODERATOR:
+      roleLabel = t('userRole.selectRoles.moderator')
+      break
+    case rolesValues.MODERATOR_AI:
+      roleLabel = t('userRole.selectRoles.moderatorAi')
+      break
+    default:
+      roleLabel = t('userRole.selectRoles.user')
+      break
+  }
+  return t('overlay.changeUserRole.question', {
+    username: `${selectedRow.value.firstName} ${selectedRow.value.lastName}`,
+    newRole: roleLabel,
+  })
+})
+
 const showModal = async () => {
   await confirm?.({
     props: {
@@ -175,15 +198,7 @@ const showModal = async () => {
       title: t('overlay.changeUserRole.title'),
       okTitle: t('overlay.changeUserRole.yes'),
       okVariant: 'danger',
-      body: t('overlay.changeUserRole.question', {
-        username: `${selectedRow.value.firstName} ${selectedRow.value.lastName}`,
-        newRole:
-          userChangeForm.value.roleSelected === rolesValues.ADMIN
-            ? t('userRole.selectRoles.admin')
-            : userChangeForm.value.roleSelected === rolesValues.MODERATOR
-              ? t('userRole.selectRoles.moderator')
-              : t('userRole.selectRoles.user'),
-      }),
+      body: userRoleChangeConfirmationBody.value,
     },
   })
     .then((ok) => {
diff --git a/admin/src/pages/CreationConfirm.vue b/admin/src/pages/CreationConfirm.vue
index c5a330f54..ee76bdfb3 100644
--- a/admin/src/pages/CreationConfirm.vue
+++ b/admin/src/pages/CreationConfirm.vue
@@ -119,7 +119,7 @@ const FILTER_TAB_MAP = [
 ]
 
 const store = useStore()
-const { t, d } = useI18n()
+const { t } = useI18n()
 const { toastError, toastSuccess } = useAppToast()
 
 const tabIndex = ref(0)
@@ -134,6 +134,33 @@ const query = ref('')
 const noHashtag = ref(null)
 const hideResubmissionModel = ref(true)
 
+const formatDateOrDash = (value) => (value ? new Date(value).toLocaleDateString() : '—')
+const baseFields = {
+  firstName: { key: 'firstName', label: t('firstname'), class: 'no-select' },
+  lastName: { key: 'lastName', label: t('lastname'), class: 'no-select' },
+  amount: { key: 'amount', label: t('creation'), formatter: (value) => value + ' GDD' },
+  memo: { key: 'memo', label: t('text'), class: 'text-break' },
+  contributionDate: {
+    key: 'contributionDate',
+    label: t('created'),
+    class: 'no-select',
+    formatter: formatDateOrDash,
+  },
+  createdAt: {
+    key: 'createdAt',
+    label: t('createdAt'),
+    class: 'no-select',
+    formatter: formatDateOrDash,
+  },
+  confirmedAt: {
+    key: 'confirmedAt',
+    label: t('contributions.confirms'),
+    class: 'no-select',
+    formatter: formatDateOrDash,
+  },
+  confirmedBy: { key: 'confirmedBy', label: t('moderator.moderator'), class: 'no-select' },
+}
+
 const fields = computed(
   () =>
     [
@@ -141,103 +168,54 @@ const fields = computed(
       [
         { key: 'bookmark', label: t('delete') },
         { key: 'deny', label: t('deny') },
-        { key: 'firstName', label: t('firstname') },
-        { key: 'lastName', label: t('lastname') },
-        {
-          key: 'amount',
-          label: t('creation'),
-          formatter: (value) => value + ' GDD',
-        },
-        { key: 'memo', label: t('text'), class: 'text-break' },
-        {
-          key: 'contributionDate',
-          label: t('created'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        { key: 'moderatorId', label: t('moderator.moderator') },
+        baseFields.firstName,
+        baseFields.lastName,
+        baseFields.amount,
+        baseFields.memo,
+        baseFields.contributionDate,
+        { key: 'moderatorId', label: t('moderator.moderator'), class: 'no-select' },
         { key: 'editCreation', label: t('details') },
         { key: 'confirm', label: t('save') },
       ],
       // confirmed contributions
       [
-        { key: 'firstName', label: t('firstname') },
-        { key: 'lastName', label: t('lastname') },
-        {
-          key: 'amount',
-          label: t('creation'),
-          formatter: (value) => value + ' GDD',
-        },
-        { key: 'memo', label: t('text'), class: 'text-break' },
-        {
-          key: 'contributionDate',
-          label: t('created'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'createdAt',
-          label: t('createdAt'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'confirmedAt',
-          label: t('contributions.confirms'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        { key: 'confirmedBy', label: t('moderator.moderator') },
+        baseFields.firstName,
+        baseFields.lastName,
+        baseFields.memo,
+        baseFields.contributionDate,
+        baseFields.createdAt,
+        baseFields.confirmedAt,
+        baseFields.confirmedBy,
         { key: 'chatCreation', label: t('details') },
       ],
       // denied contributions
       [
-        { key: 'firstName', label: t('firstname') },
-        { key: 'lastName', label: t('lastname') },
-        {
-          key: 'amount',
-          label: t('creation'),
-          formatter: (value) => value + ' GDD',
-        },
-        { key: 'memo', label: t('text'), class: 'text-break' },
-        {
-          key: 'contributionDate',
-          label: t('created'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'createdAt',
-          label: t('createdAt'),
-          formatter: (value) => formatDateOrDash(value),
-        },
+        baseFields.firstName,
+        baseFields.lastName,
+        baseFields.amount,
+        baseFields.memo,
+        baseFields.contributionDate,
+        baseFields.createdAt,
         {
           key: 'deniedAt',
           label: t('contributions.denied'),
-          formatter: (value) => formatDateOrDash(value),
+          formatter: formatDateOrDash,
         },
         { key: 'deniedBy', label: t('moderator.moderator') },
         { key: 'chatCreation', label: t('details') },
       ],
       // deleted contributions
       [
-        { key: 'firstName', label: t('firstname') },
-        { key: 'lastName', label: t('lastname') },
-        {
-          key: 'amount',
-          label: t('creation'),
-          formatter: (value) => value + ' GDD',
-        },
-        { key: 'memo', label: t('text'), class: 'text-break' },
-        {
-          key: 'contributionDate',
-          label: t('created'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'createdAt',
-          label: t('createdAt'),
-          formatter: (value) => formatDateOrDash(value),
-        },
+        baseFields.firstName,
+        baseFields.lastName,
+        baseFields.amount,
+        baseFields.memo,
+        baseFields.contributionDate,
+        baseFields.createdAt,
         {
           key: 'deletedAt',
           label: t('contributions.deleted'),
-          formatter: (value) => formatDateOrDash(value),
+          formatter: formatDateOrDash,
         },
         { key: 'deletedBy', label: t('moderator.moderator') },
         { key: 'chatCreation', label: t('details') },
@@ -245,30 +223,14 @@ const fields = computed(
       // all contributions
       [
         { key: 'status', label: t('status') },
-        { key: 'firstName', label: t('firstname') },
-        { key: 'lastName', label: t('lastname') },
-        {
-          key: 'amount',
-          label: t('creation'),
-          formatter: (value) => value + ' GDD',
-        },
-        { key: 'memo', label: t('text'), class: 'text-break' },
-        {
-          key: 'contributionDate',
-          label: t('created'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'createdAt',
-          label: t('createdAt'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        {
-          key: 'confirmedAt',
-          label: t('contributions.confirms'),
-          formatter: (value) => formatDateOrDash(value),
-        },
-        { key: 'confirmedBy', label: t('moderator.moderator') },
+        baseFields.firstName,
+        baseFields.lastName,
+        baseFields.amount,
+        baseFields.memo,
+        baseFields.contributionDate,
+        baseFields.createdAt,
+        baseFields.confirmedAt,
+        baseFields.confirmedBy,
         { key: 'chatCreation', label: t('details') },
       ],
     ][tabIndex.value],
@@ -455,10 +417,6 @@ const updateStatus = (id) => {
     target.status = 'IN_PROGRESS'
   }
 }
-
-const formatDateOrDash = (value) => {
-  return value ? d(new Date(value), 'short') : '—'
-}
 </script>
 
 <style>
@@ -474,4 +432,8 @@ const formatDateOrDash = (value) => {
   z-index: 1000000;
   cursor: pointer;
 }
+
+.no-select {
+  user-select: none;
+}
 </style>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 64bdd993e..92b215f41 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -286,7 +286,7 @@
     "logout": "Abmelden",
     "overview": "Übersicht",
     "send": "Senden",
-    "settings": "Einstellung",
+    "settings": "Einstellungen",
     "circles": "Kreise",
     "support": "Support",
     "transactions": "Transaktionen",