Add "Edit page" button on info pages for admins

Fixes #1601

Author: bkis

Tekst-Web/i18n/ui/deDE.yml

@@ -966,6 +966,7 @@ admin:
     newPage: Neue Seite
     phSelectPage: Seite auswählen
     noPage: Bitte wählen Sie eine Info-Seite aus oder erstellen Sie eine neue!
+    editPage: Diese Seite bearbeiten
 
 search:
   quickSearch:

Tekst-Web/i18n/ui/enUS.yml

@@ -941,6 +941,7 @@ admin:
     newPage: New Page
     phSelectPage: Select page
     noPage: Please select an info page or create a new one!
+    editPage: Edit this page
 
 search:
   quickSearch:

Tekst-Web/src/views/InfoPageView.vue

@@ -3,8 +3,9 @@ import type { ClientSegmentRead } from '@/api';
 import HydratedHtml from '@/components/generic/HydratedHtml.vue';
 import IconHeading from '@/components/generic/IconHeading.vue';
 import { usePlatformData } from '@/composables/platformData';
-import { useStateStore } from '@/stores';
-import { NSpin } from 'naive-ui';
+import { EditIcon } from '@/icons';
+import { useAuthStore, useStateStore } from '@/stores';
+import { NButton, NIcon, NSpin } from 'naive-ui';
 import { ref, watchEffect, type Component } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -14,12 +15,17 @@ const props = defineProps<{
 }>();
 
 const state = useStateStore();
+const auth = useAuthStore();
 const loading = ref(false);
 const { getSegment } = usePlatformData();
 const router = useRouter();
 
 const page = ref<ClientSegmentRead>();
 
+function handleEditClick() {
+  router.push({ name: 'adminInfoPages', hash: page.value ? `#page=${page.value.id}` : undefined });
+}
+
 watchEffect(async () => {
   loading.value = true;
   page.value = await getSegment(props.pageKey, state.locale);
@@ -35,6 +41,18 @@ watchEffect(async () => {
   <template v-else-if="page">
     <icon-heading v-if="page.title" level="1" :icon="icon">
       {{ page.title }}
+      <n-button
+        v-if="!!auth.user?.isSuperuser"
+        circle
+        quaternary
+        size="small"
+        :title="$t('admin.infoPages.editPage')"
+        @click="handleEditClick"
+      >
+        <template #icon>
+          <n-icon :component="EditIcon" />
+        </template>
+      </n-button>
     </icon-heading>
     <div class="content-block" style="padding: 1.2rem">
       <hydrated-html :html="page.html" />

Tekst-Web/src/views/admin/AdminSystemSegmentsView.vue

@@ -12,6 +12,7 @@ import { infoSegmentFormRules, systemSegmentFormRules } from '@/forms/formRules'
 import { $t, getLocaleProfile, renderLanguageOptionLabel } from '@/i18n';
 import { AddIcon, FileOpenIcon, InfoIcon, SegmentsIcon } from '@/icons';
 import { useStateStore } from '@/stores';
+import { useUrlSearchParams } from '@vueuse/core';
 import { cloneDeep } from 'lodash-es';
 import {
   NButton,
@@ -27,16 +28,19 @@ import {
   type FormInst,
   type InputInst,
 } from 'naive-ui';
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
-const props = defineProps<{ segmentType: 'info' | 'system' }>();
+const props = defineProps<{
+  segmentType: 'info' | 'system';
+}>();
 
 const state = useStateStore();
 const { loadPlatformData, getSegment } = usePlatformData();
 const { message } = useMessages();
 const dialog = useDialog();
 const route = useRoute();
+const hashParams = useUrlSearchParams('hash-params');
 
 const loading = ref(false);
 const formRef = ref<FormInst | null>(null);
@@ -156,7 +160,14 @@ async function handleChangeSegment(id?: string) {
   segmentModel.value = await getSegmentModel(id);
   formRef.value?.restoreValidation();
   resetModelChanges();
-  if (!id) nextTick(() => firstInputRef.value?.focus());
+  if (!id) {
+    nextTick(() => {
+      delete hashParams.page;
+      firstInputRef.value?.focus();
+    });
+  } else {
+    hashParams.page = id;
+  }
 }
 
 async function handleSaveClick() {
@@ -206,6 +217,7 @@ async function createSegment() {
       })
     );
     selectedSegmentId.value = data.id;
+    hashParams.page = data.id;
     segmentModel.value = data;
     resetModelChanges();
     loadPlatformData();
@@ -275,6 +287,14 @@ watch(
     clearForm();
   }
 );
+
+onMounted(() => {
+  nextTick(() => {
+    if (hashParams.page) {
+      handleChangeSegment(hashParams.page.toString());
+    }
+  });
+});
 </script>
 
 <template>