Merge pull request #3461 from gradido/admin_fix_formatting_issues

fix(admin): date formatting, hashtag copy filter, no-select
2026-02-06 09:56:05 +00:00 · 2025-03-28 23:39:32 +01:00 · 2025-03-28 23:39:32 +01:00 · f3e486d7a4
commit f3e486d7a4
parent 39414a379a d889b61ad3
4 changed files with 94 additions and 130 deletions
--- 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">
--- 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>
--- 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) => {
--- 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>