change column name, add symbol for opening all contribution details, add details

admin/src/components/CollapseIcon.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="collapse-icon">
+    <IBiArrowUpCircle v-if="visible" class="text-black h2" />
+    <IBiArrowDownCircle v-else class="text-muted h2" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'CollapseIcon',
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+}
+</script>

admin/src/components/ContributionMessages/ContributionMessagesList.vue

@@ -1,17 +1,27 @@
 <template>
   <div class="contribution-messages-list">
+    <BListGroup>
+      <BListGroupItem>
+        {{
+          $t('contributionMessagesForm.userDetailsRegisteredAt', {
+            ...contribution,
+            createdAt: new Date(contribution.createdAt).toLocaleString(),
+          })
+        }}
+      </BListGroupItem>
+    </BListGroup>
     <BContainer>
       <div v-for="message in messages" :key="message.id">
         <contribution-messages-list-item
           :message="message"
-          :contribution-user-id="contributionUserId"
+          :contribution-user-id="contribution.userId"
         />
       </div>
     </BContainer>
-    <div v-if="contributionStatus === 'PENDING' || contributionStatus === 'IN_PROGRESS'">
+    <div v-if="contribution.status === 'PENDING' || contribution.status === 'IN_PROGRESS'">
       <contribution-messages-formular
-        :contribution-id="contributionId"
-        :contribution-memo="contributionMemo"
+        :contribution-id="contribution.id"
+        :contribution-memo="contribution.memo"
         :hide-resubmission="hideResubmission"
         :input-resubmission-date="resubmissionAt"
         @get-list-contribution-messages="refetch"
@@ -31,20 +41,8 @@ import { adminListContributionMessages } from '../../graphql/adminListContributi
 import { useAppToast } from '@/composables/useToast'
 
 const props = defineProps({
-  contributionId: {
-    type: Number,
-    required: true,
-  },
-  contributionMemo: {
-    type: String,
-    required: true,
-  },
-  contributionStatus: {
-    type: String,
-    required: true,
-  },
-  contributionUserId: {
-    type: Number,
+  contribution: {
+    type: Object,
     required: true,
   },
   hideResubmission: {
@@ -65,7 +63,7 @@ const messages = ref([])
 const { onResult, onError, result, refetch } = useQuery(
   adminListContributionMessages,
   {
-    contributionId: props.contributionId,
+    contributionId: props.contribution.id,
   },
   {
     fetchPolicy: 'no-cache',

admin/src/components/Tables/OpenCreationsTable.vue

@@ -67,6 +67,7 @@
         <BButton v-if="row.item.messagesCount > 0" @click="rowToggleDetails(row, 0)">
           <IBiChatDots />
         </BButton>
+        <collapse-icon v-else :visible="row.detailsShowing" @click="rowToggleDetails(row, 0)" />
       </template>
       <template #cell(deny)="row">
         <div v-if="!myself(row.item)">
@@ -92,6 +93,12 @@
           </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 #row-details="row">
         <row-details
           :row="row"
@@ -103,6 +110,7 @@
           <template #show-creation>
             <div v-if="row.item.moderatorId">
               <edit-creation-formular
+                v-if="row.item.confirmedAt === null"
                 type="singleCreation"
                 :item="row.item"
                 :row="row"
@@ -112,10 +120,7 @@
             </div>
             <div v-else>
               <contribution-messages-list
-                :contribution-id="row.item.id"
-                :contribution-status="row.item.status"
-                :contribution-user-id="row.item.userId"
-                :contribution-memo="row.item.memo"
+                :contribution="row.item"
                 :resubmission-at="row.item.resubmissionAt"
                 :hide-resubmission="hideResubmission"
                 @update-status="updateStatus"
@@ -201,22 +206,16 @@ export default {
       this.$emit('update-contributions')
     },
     rowToggleDetails(row, index) {
-      if (this.openRow) {
-        if (this.openRow.index === row.index) {
-          if (index === this.slotIndex) {
-            row.toggleDetails()
-            this.openRow = null
-          } else {
-            this.slotIndex = index
-          }
-        } else {
-          this.openRow.toggleDetails()
-          row.toggleDetails()
-          this.slotIndex = index
-          this.openRow = row
-          this.creationUserData = row.item
-        }
+      const isSameRow = this.openRow && this.openRow.index === row.index
+      const isSameSlot = index === this.slotIndex
+
+      if (isSameRow && isSameSlot) {
+        row.toggleDetails()
+        this.openRow = null
       } else {
+        if (this.openRow) {
+          this.openRow.toggleDetails()
+        }
         row.toggleDetails()
         this.slotIndex = index
         this.openRow = row
@@ -231,4 +230,8 @@ export default {
   background-color: #e1a908;
   border-color: #e1a908;
 }
+
+.no-select {
+  user-select: none;
+}
 </style>

admin/src/locales/de.json

@@ -35,7 +35,8 @@
     "validTo": "Enddatum"
   },
   "contributionMessagesForm": {
-    "resubmissionDateInPast": "Wiedervorlage Datum befindet sich in der Vergangenheit!"
+    "resubmissionDateInPast": "Wiedervorlage Datum befindet sich in der Vergangenheit!",
+    "userDetailsRegisteredAt": "{firstName} {lastName} <{email}> hat sich am {createdAt} registriert."
   },
   "contributions": {
     "all": "Alle",
@@ -73,6 +74,7 @@
   "deleted_user": "Alle gelöschten Nutzer",
   "deny": "Ablehnen",
   "description": "Beschreibung",
+  "details": "Details",
   "e_mail": "E-Mail",
   "edit": "bearbeiten",
   "enabled": "aktiviert",

admin/src/locales/en.json

@@ -35,7 +35,8 @@
     "validTo": "End-Date"
   },
   "contributionMessagesForm": {
-    "resubmissionDateInPast": "Resubmission date is in the past!"
+    "resubmissionDateInPast": "Resubmission date is in the past!",
+    "userDetailsRegisteredAt": "{firstName} {lastName} <{email}> registered on {createdAt}."
   },
   "contributions": {
     "all": "All",
@@ -74,6 +75,7 @@
   "deny": "Reject",
   "description": "Description",
   "e_mail": "E-mail",
+  "details": "Details",
   "edit": "edit",
   "enabled": "enabled",
   "error": "Error",

admin/src/pages/CreationConfirm.vue

@@ -152,7 +152,7 @@ const fields = computed(
           formatter: (value) => formatDateOrDash(value),
         },
         { key: 'moderatorId', label: t('moderator.moderator') },
-        { key: 'editCreation', label: t('chat') },
+        { key: 'editCreation', label: t('details') },
         { key: 'confirm', label: t('save') },
       ],
       // confirmed contributions
@@ -181,7 +181,7 @@ const fields = computed(
           formatter: (value) => formatDateOrDash(value),
         },
         { key: 'confirmedBy', label: t('moderator.moderator') },
-        { key: 'chatCreation', label: t('chat') },
+        { key: 'chatCreation', label: t('details') },
       ],
       // denied contributions
       [
@@ -209,7 +209,7 @@ const fields = computed(
           formatter: (value) => formatDateOrDash(value),
         },
         { key: 'deniedBy', label: t('moderator.moderator') },
-        { key: 'chatCreation', label: t('chat') },
+        { key: 'chatCreation', label: t('details') },
       ],
       // deleted contributions
       [
@@ -237,7 +237,7 @@ const fields = computed(
           formatter: (value) => formatDateOrDash(value),
         },
         { key: 'deletedBy', label: t('moderator.moderator') },
-        { key: 'chatCreation', label: t('chat') },
+        { key: 'chatCreation', label: t('details') },
       ],
       // all contributions
       [
@@ -266,7 +266,7 @@ const fields = computed(
           formatter: (value) => formatDateOrDash(value),
         },
         { key: 'confirmedBy', label: t('moderator.moderator') },
-        { key: 'chatCreation', label: t('chat') },
+        { key: 'chatCreation', label: t('details') },
       ],
     ][tabIndex.value],
 )