fix missing user data on confirmation, use anchor links to jump to specific contribution in list

admin/src/components/Overlay.vue

@@ -23,11 +23,11 @@
       </BRow>
       <BRow class="mt-3">
         <BCol class="col-3">{{ $t('name') }}</BCol>
-        <BCol>{{ item.firstName }} {{ item.lastName }}</BCol>
+        <BCol>{{ item.user.firstName }} {{ item.user.lastName }}</BCol>
       </BRow>
       <BRow>
         <BCol class="col-3">{{ $t('e_mail') }}</BCol>
-        <BCol>{{ item.email }}</BCol>
+        <BCol>{{ item.user.emailContact.email }}</BCol>
       </BRow>
 
       <hr class="my-4" />

admin/src/components/RowDetails.vue

@@ -6,7 +6,7 @@
         :icon="type === 'PageCreationConfirm' ? 'x' : 'eye-slash-fill'"
         aria-label="Help"
       ></b-icon>
-      {{ $t('hide_details') }} {{ row.item.firstName }} {{ row.item.lastName }}
+      {{ $t('hide_details') }} {{ row.item.user.firstName }} {{ row.item.user.lastName }}
     </b-button>
   </b-card>
 </template>

frontend/src/components/Contributions/ContributionEdit.vue

@@ -4,6 +4,7 @@
     :max-gdd-last-month="maxForMonths[0]"
     :max-gdd-this-month="maxForMonths[1]"
     @upsert-contribution="handleUpdateContribution"
+    @abort="emit('contribution-updated')"
   />
 </template>
 

frontend/src/components/Contributions/ContributionForm.vue

@@ -63,7 +63,7 @@
               type="reset"
               variant="secondary"
               data-test="button-cancel"
-              @click="resetForm"
+              @click="emit('abort')"
             >
               {{ $t('form.cancel') }}
             </BButton>
@@ -102,7 +102,7 @@ const props = defineProps({
   maxGddThisMonth: { type: Number, required: true },
 })
 
-const emit = defineEmits(['upsert-contribution', 'update:modelValue', 'reset-form'])
+const emit = defineEmits(['upsert-contribution', 'update:modelValue', 'abort'])
 
 const { t } = useI18n()
 
@@ -212,9 +212,6 @@ const updateField = (newValue, name) => {
 function submit() {
   emit('upsert-contribution', toRaw(form))
 }
-function resetForm() {
-  Object.assign(form, entityDataToForm.value)
-}
 </script>
 <style>
 .form-style {

frontend/src/components/Contributions/ContributionList.vue

@@ -1,35 +1,42 @@
 <template>
   <div v-if="items.length === 0 && !loading">
-    {{ emptyText }}
+    <div v-if="currentPage === 1">
+      {{ emptyText }}
+    </div>
+    <div v-else>
+      {{ t('contribution.noContributions.emptyPage') }}
+    </div>
   </div>
   <div v-else class="contribution-list">
     <div v-for="item in items" :key="item.id + 'a'" class="mb-3">
-      <contribution-list-item
-        v-bind="item"
-        :contribution-id="item.id"
-        :all-contribution="allContribution"
-        :messages-visible="openMessagesListId === item.id"
-        @toggle-messages-visible="toggleMessagesVisible(item.id)"
-        @update-contribution-form="updateContributionForm"
-        @contribution-changed="refetch()"
-      />
+      <div :id="`contributionListItem-${item.id}`">
+        <contribution-list-item
+          v-bind="item"
+          :contribution-id="item.id"
+          :all-contribution="allContribution"
+          :messages-visible="openMessagesListId === item.id"
+          @toggle-messages-visible="toggleMessagesVisible(item.id)"
+          @update-contribution-form="updateContributionForm"
+          @contribution-changed="refetch()"
+        />
+      </div>
     </div>
-    <BPagination
-      v-if="isPaginationVisible"
-      :model-value="currentPage"
-      class="mt-3"
-      pills
-      size="lg"
-      :per-page="pageSize"
-      :total-rows="contributionCount"
-      align="center"
-      :hide-ellipsis="true"
-      @update:model-value="currentPage = $event"
-    />
   </div>
+  <BPagination
+    v-if="isPaginationVisible"
+    :model-value="currentPage"
+    class="mt-3"
+    pills
+    size="lg"
+    :per-page="pageSize"
+    :total-rows="contributionCount"
+    align="center"
+    :hide-ellipsis="true"
+    @update:model-value="updatePage"
+  />
 </template>
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
 import ContributionListItem from '@/components/Contributions/ContributionListItem.vue'
 import { listContributions, listAllContributions } from '@/graphql/contributions.graphql'
 import { useQuery } from '@vue/apollo-composable'
@@ -37,6 +44,7 @@ import { PAGE_SIZE } from '@/constants'
 import { useAppToast } from '@/composables/useToast'
 import { useI18n } from 'vue-i18n'
 import CONFIG from '@/config'
+import { useRoute, useRouter } from 'vue-router'
 
 const props = defineProps({
   allContribution: {
@@ -54,17 +62,19 @@ const props = defineProps({
 // composables
 const { toastError, toastSuccess } = useAppToast()
 const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
 
 // constants
 const pageSize = PAGE_SIZE
 const pollInterval = CONFIG.AUTO_POLL_INTERVAL || undefined
 
 // refs
-const currentPage = ref(1)
+const currentPage = computed(() => Number(route.params.page) || 1)
 const openMessagesListId = ref(null)
 
 // queries
-const { result, loading, refetch } = useQuery(
+const { result, loading, refetch, onResult } = useQuery(
   props.allContribution ? listAllContributions : listContributions,
   () => ({
     pagination: {
@@ -99,8 +109,23 @@ const items = computed(() => {
   return [...(contributionListResult.value?.contributionList || [])]
 })
 const isPaginationVisible = computed(() => {
-  return contributionCount.value > pageSize
+  return (contributionCount.value > pageSize || currentPage.value > 1) && !loading.value
 })
+
+// callbacks
+onResult(({ data }) => {
+  nextTick(() => {
+    if (!route.hash) {
+      return
+    }
+    const el = document.querySelector(route.hash)
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }
+  })
+})
+
+// methods
 const toggleMessagesVisible = (contributionId) => {
   if (openMessagesListId.value === contributionId) {
     openMessagesListId.value = 0
@@ -108,9 +133,10 @@ const toggleMessagesVisible = (contributionId) => {
     openMessagesListId.value = contributionId
   }
 }
-
-// methods
 const updateContributionForm = (item) => {
-  emit('update-contribution-form', item)
+  emit('update-contribution-form', { item, page: currentPage.value })
+}
+const updatePage = (page) => {
+  router.push({ params: { page } })
 }
 </script>

frontend/src/components/Template/ContentHeader/NavCommunity.vue

@@ -4,8 +4,8 @@
       class="nav-community-btn-wrapper bg-209 rounded-26 d-flex bd-highlight mx-xl-6 mx-lg-5 shadow justify-content-between"
     >
       <BButton
-        to="contribute"
-        active-class="btn-active svg-icon-active"
+        :to="{ path: '/community/contribute' }"
+        :class="stateClasses('/community/contribute')"
         block
         variant="link"
         class="nav-community__btn"
@@ -14,8 +14,8 @@
         {{ $t('community.submitContribution') }}
       </BButton>
       <BButton
-        to="contributions"
-        active-class="btn-active svg-icon-active"
+        :to="{ path: '/community/contributions' }"
+        :class="stateClasses('/community/contributions')"
         block
         variant="link"
         class="nav-community__btn"
@@ -24,8 +24,8 @@
         {{ $t('community.myContributions') }}
       </BButton>
       <BButton
-        to="community"
-        active-class="btn-active svg-icon-active"
+        :to="{ path: '/community/community' }"
+        :class="stateClasses('/community/community')"
         block
         variant="link"
         class="nav-community__btn"
@@ -39,6 +39,15 @@
 <script>
 export default {
   name: 'NavCommunity',
+
+  methods: {
+    stateClasses(path) {
+      if (this.$route.path.includes(path)) {
+        return 'router-link-active router-link-exact-active'
+      }
+      return ''
+    },
+  },
 }
 </script>
 <style scoped lang="scss">

frontend/src/locales/de.json

@@ -91,7 +91,8 @@
     "lastContribution": "Letzte Beiträge",
     "noContributions": {
       "allContributions": "Es wurden noch keine Beiträge eingereicht.",
-      "myContributions": "Du hast noch keine Beiträge eingereicht."
+      "myContributions": "Du hast noch keine Beiträge eingereicht.",
+      "emptyPage": "Diese Seite ist leer."
     },
     "noOpenCreation": {
       "allMonth": "Für alle beiden Monate ist dein Schöpfungslimit erreicht. Den Nächsten Monat kannst du wieder 1000 GDD Schöpfen.",

frontend/src/locales/en.json

@@ -91,7 +91,8 @@
     "lastContribution": "Last Contributions",
     "noContributions": {
       "allContributions": "No contributions have been submitted yet.",
-      "myContributions": "You have not submitted any entries yet."
+      "myContributions": "You have not submitted any entries yet.",
+      "emptyPage": "This page is empty."
     },
     "noOpenCreation": {
       "allMonth": "For all two months your creation limit is reached. The next month you can create 1000 GDD again.",

frontend/src/pages/Community.vue

@@ -4,10 +4,9 @@
       <BTabs :model-value="tabIndex" no-nav-style borderless align="center">
         <BTab no-body lazy>
           <contribution-edit
-            v-if="itemToEdit"
-            v-model="itemToEdit"
+            v-if="itemData"
+            v-model="itemData"
             @contribution-updated="handleContributionUpdated"
-            @reset-form="itemToEdit = null"
           />
           <contribution-create v-else />
         </BTab>
@@ -51,7 +50,8 @@ const { t } = useI18n()
 
 const tabIndex = ref(0)
 
-const itemToEdit = ref(null)
+const itemData = ref(null)
+const editContributionPage = ref(1)
 
 const { onResult: handleInProgressContributionFound } = useQuery(
   countContributionsInProgress,
@@ -79,15 +79,20 @@ const updateTabIndex = () => {
 }
 // after a edit contribution was saved, jump to contributions tab
 function handleContributionUpdated() {
-  itemToEdit.value = null
+  const contributionItemId = itemData.value.id
+  itemData.value = null
   tabIndex.value = 1
-  router.push({ params: { tab: 'contributions' } })
+  router.push({
+    params: { tab: 'contributions', page: editContributionPage.value },
+    hash: `#contributionListItem-${contributionItemId}`,
+  })
 }
 // if user clicks on edit contribution in contributions tab, jump to contribute tab and populate form with contribution data
-const handleUpdateContributionForm = (item) => {
-  itemToEdit.value = item
+const handleUpdateContributionForm = (data) => {
+  itemData.value = data.item
+  editContributionPage.value = data.page
   tabIndex.value = 0
-  router.push({ params: { tab: 'contribute' } })
+  router.push({ params: { tab: 'contribute', page: undefined } })
 }
 
 watch(() => route.params.tab, updateTabIndex)

frontend/src/routes/routes.js

@@ -68,7 +68,7 @@ const routes = [
     },
   },
   {
-    path: '/community/:tab',
+    path: '/community/:tab/:page?',
     component: () => import('@/pages/Community.vue'),
     meta: {
       requiresAuth: true,