Add transfers

components/Dataservices/AdminDataservicesPage.vue

@@ -29,6 +29,12 @@
     <h1 class="fr-h3 fr-mb-5v">
       {{ t("Dataservices") }}
     </h1>
+    <TransferRequestList
+      v-if="props.organization || props.user"
+      type="Dataservice"
+      :recipient="props.organization || props.user"
+      @done="refresh"
+    />
     <div
       v-if="pageData"
       class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle"
@@ -106,7 +112,6 @@ import AdminDataservicesTable from '~/components/AdminTable/AdminDataservicesTab
 import type { DataserviceSortedBy, PaginatedArray, SortDirection } from '~/types/types'
 
 const { t } = useI18n()
-const config = useRuntimeConfig()
 
 const page = ref(1)
 const pageSize = ref(10)
@@ -138,5 +143,5 @@ const params = computed(() => {
   }
 })
 
-const { data: pageData, status } = await useAPI<PaginatedArray<Dataservice>>('/api/1/dataservices/', { lazy: true, query: params })
+const { data: pageData, status, refresh } = await useAPI<PaginatedArray<Dataservice>>('/api/1/dataservices/', { lazy: true, query: params })
 </script>

components/Dataservices/AdminUpdateDataservicePage.vue

@@ -15,45 +15,51 @@
           {{ t("Save") }}
         </button>
       </template>
-      <BannerAction
-        class="mt-5"
-        type="danger"
-        :title="$t('Delete the dataservice')"
-      >
-        {{ $t("Be careful, this action can't be reverse.") }}
-        <template #button>
-          <ModalWithButton
-            :title="$t('Are you sure you want to delete this dataservice ?')"
-            size="lg"
-          >
-            <template #button="{ attrs, listeners }">
-              <BrandedButton
-                color="danger"
-                size="xs"
-                :icon="RiDeleteBin6Line"
-                v-bind="attrs"
-                v-on="listeners"
-              >
-                {{ $t('Delete') }}
-              </BrandedButton>
-            </template>
-            <p class="fr-text--bold">
-              {{ $t("This action can't be reverse.") }}
-            </p>
-            <template #footer>
-              <div class="flex-1 fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+      <div class="mt-5 space-y-5">
+        <TransferBanner
+          type="Dataservice"
+          :subject="dataserviceSubject"
+          :label="$t('Transfer dataservice')"
+        />
+        <BannerAction
+          type="danger"
+          :title="$t('Delete the dataservice')"
+        >
+          {{ $t("Be careful, this action can't be reverse.") }}
+          <template #button>
+            <ModalWithButton
+              :title="$t('Are you sure you want to delete this dataservice ?')"
+              size="lg"
+            >
+              <template #button="{ attrs, listeners }">
                 <BrandedButton
                   color="danger"
-                  :disabled="loading"
-                  @click="deleteDataservice"
+                  size="xs"
+                  :icon="RiDeleteBin6Line"
+                  v-bind="attrs"
+                  v-on="listeners"
                 >
-                  {{ $t("Delete the dataservice") }}
+                  {{ $t('Delete') }}
                 </BrandedButton>
-              </div>
-            </template>
-          </ModalWithButton>
-        </template>
-      </BannerAction>
+              </template>
+              <p class="fr-text--bold">
+                {{ $t("This action can't be reverse.") }}
+              </p>
+              <template #footer>
+                <div class="flex-1 fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+                  <BrandedButton
+                    color="danger"
+                    :disabled="loading"
+                    @click="deleteDataservice"
+                  >
+                    {{ $t("Delete the dataservice") }}
+                  </BrandedButton>
+                </div>
+              </template>
+            </ModalWithButton>
+          </template>
+        </BannerAction>
+      </div>
     </DescribeDataservice>
   </div>
 </template>
@@ -62,7 +68,7 @@
 import type { Dataservice } from '@datagouv/components'
 import { RiDeleteBin6Line } from '@remixicon/vue'
 import DescribeDataservice from '~/components/Dataservices/DescribeDataservice.vue'
-import type { ContactPoint, DataserviceForm } from '~/types/types'
+import type { ContactPoint, DataserviceForm, LinkToSubject } from '~/types/types'
 import { toForm, toApi } from '~/utils/dataservices'
 
 const { t } = useI18n()
@@ -76,6 +82,12 @@ const localePath = useLocalePath()
 
 const url = computed(() => `/api/1/dataservices/${route.params.id}`)
 const { data: dataservice } = await useAPI<Dataservice>(url, { lazy: true })
+const dataserviceSubject = computed<Dataservice & LinkToSubject>(() => {
+  return {
+    ...dataservice.value,
+    page: dataservice.value.self_web_url,
+  }
+})
 const dataserviceForm = ref<DataserviceForm | null>(null)
 watchEffect(() => {
   dataserviceForm.value = toForm(dataservice.value)

components/LinkToSubject.vue

@@ -16,15 +16,17 @@
 </template>
 
 <script setup lang="ts">
-import { RiDatabase2Line, RiLineChartLine } from '@remixicon/vue'
+import { RiDatabase2Line, RiLineChartLine, RiRobot2Line } from '@remixicon/vue'
+import type { LinkToSubject } from '~/types/types'
 
 const props = defineProps<{
-  type: 'Dataset' | 'Reuse'
-  subject: { title: string, page: string }
+  type: 'Dataservice' | 'Dataset' | 'Reuse'
+  subject: LinkToSubject
 }>()
 
 const icon = computed(() => {
   if (props.type === 'Dataset') return RiDatabase2Line
+  if (props.type === 'Dataservice') return RiRobot2Line
   if (props.type === 'Reuse') return RiLineChartLine
 
   return throwOnNever(props.type, `Unknown subject ${JSON.stringify(props.subject)}`)

components/Reuses/AdminReusesPage.vue

@@ -29,6 +29,12 @@
     <h1 class="fr-h3 fr-mb-5v">
       {{ t("Reuses") }}
     </h1>
+    <TransferRequestList
+      v-if="props.organization || props.user"
+      type="Reuse"
+      :recipient="props.organization || props.user"
+      @done="refresh"
+    />
     <div
       v-if="pageData"
       class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle"
@@ -138,5 +144,5 @@ const params = computed(() => {
   }
 })
 
-const { data: pageData, status } = await useAPI<PaginatedArray<Reuse>>('/api/1/reuses/', { lazy: true, query: params })
+const { data: pageData, status, refresh } = await useAPI<PaginatedArray<Reuse>>('/api/1/reuses/', { lazy: true, query: params })
 </script>

components/Reuses/AdminUpdateReusePage.vue

@@ -15,45 +15,52 @@
           {{ t("Save") }}
         </button>
       </template>
-      <BannerAction
-        class="mt-5"
-        type="danger"
-        :title="$t('Delete the reuse')"
-      >
-        {{ $t("Be careful, this action can't be reverse.") }}
-        <template #button>
-          <ModalWithButton
-            :title="$t('Are you sure you want to delete this reuse ?')"
-            size="lg"
-          >
-            <template #button="{ attrs, listeners }">
-              <BrandedButton
-                color="danger"
-                size="xs"
-                :icon="RiDeleteBin6Line"
-                v-bind="attrs"
-                v-on="listeners"
-              >
-                {{ $t('Delete') }}
-              </BrandedButton>
-            </template>
-            <p class="fr-text--bold">
-              {{ $t("This action can't be reverse.") }}
-            </p>
-            <template #footer>
-              <div class="flex-1 fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+      <div class="mt-5 space-y-5">
+        <TransferBanner
+          type="Reuse"
+          :subject="reuse"
+          :label="$t('Transfer reuse')"
+        />
+        <BannerAction
+          class="mt-5"
+          type="danger"
+          :title="$t('Delete the reuse')"
+        >
+          {{ $t("Be careful, this action can't be reverse.") }}
+          <template #button>
+            <ModalWithButton
+              :title="$t('Are you sure you want to delete this reuse ?')"
+              size="lg"
+            >
+              <template #button="{ attrs, listeners }">
                 <BrandedButton
                   color="danger"
-                  :disabled="loading"
-                  @click="deleteReuse"
+                  size="xs"
+                  :icon="RiDeleteBin6Line"
+                  v-bind="attrs"
+                  v-on="listeners"
                 >
-                  {{ $t("Delete the reuse") }}
+                  {{ $t('Delete') }}
                 </BrandedButton>
-              </div>
-            </template>
-          </ModalWithButton>
-        </template>
-      </BannerAction>
+              </template>
+              <p class="fr-text--bold">
+                {{ $t("This action can't be reverse.") }}
+              </p>
+              <template #footer>
+                <div class="flex-1 fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+                  <BrandedButton
+                    color="danger"
+                    :disabled="loading"
+                    @click="deleteReuse"
+                  >
+                    {{ $t("Delete the reuse") }}
+                  </BrandedButton>
+                </div>
+              </template>
+            </ModalWithButton>
+          </template>
+        </BannerAction>
+      </div>
     </DescribeReuse>
   </div>
 </template>

components/TransferBanner.vue

@@ -86,14 +86,14 @@
 </template>
 
 <script setup lang="ts">
-import { formatDate, type Dataset, type DatasetV2 } from '@datagouv/components'
+import { formatDate, type Dataservice, type Dataset, type DatasetV2, type Reuse } from '@datagouv/components'
 import type { Owned } from '@datagouv/components/ts'
 import { RiSendPlaneLine } from '@remixicon/vue'
-import type { TransferRequest } from '~/types/types'
+import type { LinkToSubject, TransferRequest } from '~/types/types'
 
 const props = defineProps<{
-  type: 'Dataset'
-  subject: Dataset | DatasetV2
+  type: 'Dataservice' | 'Dataset' | 'Reuse'
+  subject: (LinkToSubject & Dataservice) | Dataset | DatasetV2 | Reuse
   label: string
 }>()
 
@@ -106,7 +106,7 @@ const to = ref<Owned | null>(null)
 const comment = ref('')
 const existingTransfers = ref<Array<TransferRequest> | null>(null)
 
-const fetchTransfer = async () => {
+async function fetchTransfer() {
   if (existingTransfers.value) return
 
   try {
@@ -121,7 +121,7 @@ const fetchTransfer = async () => {
   }
 }
 
-const requestTransfer = async (close) => {
+async function requestTransfer(close: () => void) {
   loading.value = true
   try {
     if (!to.value) return

components/TransferRequestList.vue

@@ -1,29 +1,29 @@
 <template>
-    <div
-      v-if="transfers && transfers.length"
-      class="space-y-8 mb-8 max-w-6xl"
-    >
-      <TransferRequest
-        v-for="transfer in transfers"
-        :key="transfer.id"
-        :transfer
-        @done="refresh(); $emit('done')"
-      />
-    </div>
+  <div
+    v-if="transfers && transfers.length"
+    class="space-y-8 mb-8 max-w-6xl"
+  >
+    <TransferRequest
+      v-for="transfer in transfersWithSubject"
+      :key="transfer.id"
+      :transfer
+      @done="refresh(); $emit('done')"
+    />
+  </div>
 </template>
+
 <script setup lang="ts">
-import type { Organization, User } from '@datagouv/components';
-import type { TransferRequest } from '~/types/types';
+import type { Organization, User } from '@datagouv/components'
+import type { TransferRequest } from '~/types/types'
 
 const props = defineProps<{
-    type: 'Dataset',
-    recipient: User | Organization
+  type: 'Dataset' | 'Dataservice' | 'Reuse'
+  recipient: User | Organization
 }>()
 defineEmits<{
-    (e: 'done'): void,
+  (e: 'done'): void
 }>()
 
-
 const params = computed(() => {
   return {
     recipient: props.recipient.id,
@@ -33,4 +33,16 @@ const params = computed(() => {
   }
 })
 const { data: transfers, refresh: refresh } = await useAPI<Array<TransferRequest>>('/api/1/transfer/', { lazy: true, query: params })
-</script>
+const transfersWithSubject = computed(() => transfers.value.map((transfer) => {
+  if (transfer.subject.class !== 'Dataservice') {
+    return transfer
+  }
+  return {
+    ...transfer,
+    subject: {
+      ...transfer.subject,
+      page: transfer.subject.self_web_url,
+    },
+  }
+}))
+</script>