Add editButton to posts (#242)

datagouv · Jan 10, 2025 · a574dfc · a574dfc
1 parent 19af1a8
commit a574dfc
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 33 deletions.
diff --git a/components/BrandedButton/BrandedButton.vue b/components/BrandedButton/BrandedButton.vue
@@ -4,7 +4,7 @@
     class="inline-flex items-center space-x-1 rounded-full font-medium border !bg-none !no-underline"
     :class="[colors, sizes, isDisabled ? '!opacity-50' : '']"
     :disabled="isDisabled"
-    aria-disabled="isDisabled"
+    :aria-disabled="isDisabled"
     :role="href ? 'link' : ''"
     :to="isDisabled ? undefined : href"
     :target="newTab ? '_blank' : undefined"

diff --git a/components/BrandedButton/EditButton.vue b/components/BrandedButton/EditButton.vue
@@ -0,0 +1,19 @@
+<template>
+  <BrandedButton
+    color="danger"
+    :href="`/beta/admin/${type}/${id}/`"
+    :icon="RiEdit2Line"
+    size="xs"
+  >
+    {{ $t('Edit') }}
+  </BrandedButton>
+</template>
+
+<script setup lang="ts">
+import { RiEdit2Line } from '@remixicon/vue'
+
+defineProps<{
+  type: 'posts'
+  id: string
+}>()
+</script>
diff --git a/pages/posts/[id].vue b/pages/posts/[id].vue
@@ -1,33 +1,41 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="container mb-24">
-    <Breadcrumb>
-      <li>
-        <NuxtLinkLocale
-          class="fr-breadcrumb__link"
-          :external="true"
-          to="/"
-        >
-          {{ $t('Home') }}
-        </NuxtLinkLocale>
-      </li>
-      <li>
-        <NuxtLinkLocale
-          class="fr-breadcrumb__link"
-          to="/posts"
-        >
-          {{ $t('Posts') }}
-        </NuxtLinkLocale>
-      </li>
-      <li>
-        <a
-          class="fr-breadcrumb__link"
-          aria-current="page"
-        >
-          {{ post.name }}
-        </a>
-      </li>
-    </Breadcrumb>
+    <div class="flex items-center">
+      <Breadcrumb class="flex-1">
+        <li>
+          <NuxtLinkLocale
+            class="fr-breadcrumb__link"
+            :external="true"
+            to="/"
+          >
+            {{ $t('Home') }}
+          </NuxtLinkLocale>
+        </li>
+        <li>
+          <NuxtLinkLocale
+            class="fr-breadcrumb__link"
+            to="/posts"
+          >
+            {{ $t('Posts') }}
+          </NuxtLinkLocale>
+        </li>
+        <li>
+          <a
+            class="fr-breadcrumb__link"
+            aria-current="page"
+          >
+            {{ post.name }}
+          </a>
+        </li>
+      </Breadcrumb>
+      <div v-if="isAdmin(me)">
+        <EditButton
+          :id="post.id"
+          type="posts"
+        />
+      </div>
+    </div>
     <h1 class="text-4.5xl font-extrabold !mb-0">
       {{ post.name }}
     </h1>
@@ -60,12 +68,13 @@
 
 <script setup lang="ts">
 import { formatDate } from '@datagouv/components'
+import EditButton from '~/components/BrandedButton/EditButton.vue'
 import type { Post } from '~/types/posts'
 
 const route = useRoute()
 const me = useMaybeMe()
-
-const { data: post } = await useAPI<Post>(`/api/1/posts/${route.params.id}/`, {
-  key: `${me.value ? me.value.id : 'guest'}-posts-${route.params.id}`,
+const url = computed(() => `/api/1/posts/${route.params.id}/`)
+const { data: post } = await useAPI<Post>(url, {
+  key: getUserBasedKey(url.value),
 })
 </script>
diff --git a/utils/api.ts b/utils/api.ts
@@ -4,7 +4,7 @@ import type { UseFetchOptions } from 'nuxt/app'
   Example : const { data: datasets } = await useAPI<PaginatedArray<Dataset>>('/api/1/datasets')
 */
 export function useAPI<T, U = T>(
-  url: any,
+  url: MaybeRefOrGetter<string>,
   options?: UseFetchOptions<T, U>,
 ) {
   return useFetch(url, {
@@ -22,3 +22,8 @@ export function useAPI<T, U = T>(
       return { ...response, data: response.data as Ref<T> }
     })
 }
+
+export function getUserBasedKey(route: string) {
+  const me = useMaybeMe()
+  return `${me.value ? me.value.id : 'guest'}-${route}`
+}
diff --git a/utils/auth.ts b/utils/auth.ts
@@ -28,7 +28,7 @@ export const useToken = () => {
   return useCookie('token')
 }
 
-export function isAdmin(me: Me | null): boolean {
+export function isAdmin(me: Me | null | undefined): boolean {
   if (!me) return false
 
   return me.roles ? me.roles.includes('admin') : false