Feat/add reuse publishing

udata_front/theme/gouvfr/assets/js/api/reuses.ts

@@ -1,6 +1,7 @@
 import { getLocalizedUrl } from "../i18n";
+import { toValue } from "vue";
 import { api } from "../plugins/api";
-import { Reuse } from "../types";
+import type { Reuse, NewReuse } from "../types";
 
 let reuseTypesRequest: Promise<Array<ReuseType>> | null = null;
 
@@ -9,10 +10,19 @@ export type ReuseType = {
   label: string,
 };
 
+type UploadLogoResponse = {
+  image: string;
+  success: boolean;
+};
+
 export function getReuseTypesUrl() {
   return getLocalizedUrl("reuses/types/");
 }
 
+export function getReuseTopicsUrl() {
+  return getLocalizedUrl("reuses/topics/");
+}
+
 export function fetchReuseTypes() {
   if (reuseTypesRequest) {
     return reuseTypesRequest;
@@ -25,3 +35,21 @@ export function getType(types: Array<ReuseType>, id: string): string {
   const type = types.find(t => t.id === id);
   return type ? type.label : "";
 }
+
+export function createReuse(reuse: NewReuse) {
+  return api.post<Reuse>("reuses/", {
+    ...toValue(reuse),
+  }).then(resp => resp.data);
+}
+
+export function updateReuse(reuse: Reuse) {
+  return api.put<Reuse>(`reuses/${reuse.id}`, {
+    ...toValue(reuse),
+  }).then(resp => resp.data);
+}
+
+export function uploadLogo(reuseId: string, file: File) {
+  return api.postForm<UploadLogoResponse>(`reuses/${reuseId}/image`, {
+    file: file
+  });
+}

udata_front/theme/gouvfr/assets/js/api/user.ts

@@ -0,0 +1,6 @@
+import { api } from "../plugins/api";
+
+export async function getUser() {
+    const resp = await api.get('me/');
+    return resp.data;
+}

udata_front/theme/gouvfr/assets/js/components/Form/Stepper/StepperReuse.stories.js

@@ -0,0 +1,50 @@
+import Stepper from './Stepper.vue';
+
+export default {
+  title: 'Components/StepperReuse',
+  component: Stepper,
+};
+
+const args = {
+  steps: ["Describe your reuse", "Add datasets", "Complete your publishing"],
+  currentStep: 0,
+};
+
+export const StepperOnFirstStep = {
+  render: (args) => ({
+    components: { Stepper },
+    setup() {
+      return { args };
+    },
+    template: '<Stepper v-bind="args" />',
+  }),
+  args,
+};
+
+export const StepperOnSecondStep = {
+  render: (args) => ({
+    components: { Stepper },
+    setup() {
+      return { args };
+    },
+    template: '<Stepper v-bind="args" />',
+  }),
+  args: {
+    ...args,
+    currentStep: 1,
+  },
+};
+
+export const StepperOnThirdStep = {
+    render: (args) => ({
+      components: { Stepper },
+      setup() {
+        return { args };
+      },
+      template: '<Stepper v-bind="args" />',
+    }),
+    args: {
+      ...args,
+      currentStep: 2,
+    },
+  };

udata_front/theme/gouvfr/assets/js/components/ProducerSelector/ProducerSelector.vue

@@ -3,8 +3,8 @@
     <MultiSelect
       :required="true"
       :minimumCharacterBeforeSuggest="2"
-      :placeholder="$t('Check the identity with which you want to publish')"
-      :searchPlaceholder="$t('Select an organization')"
+      :placeholder="t('Check the identity with which you want to publish')"
+      :searchPlaceholder="t('Select an organization')"
       suggestUrl="/organizations/suggest/"
       :initialOptions="organizations"
       :values="userOrganization"
@@ -17,8 +17,8 @@
     <MultiSelect
       :required="true"
       :minimumCharacterBeforeSuggest="2"
-      :placeholder="$t('Check the identity with which you want to publish')"
-      :searchPlaceholder="$t('Select an organization')"
+      :placeholder="t('Check the identity with which you want to publish')"
+      :searchPlaceholder="t('Select an organization')"
       :initialOptions="organizations"
       :values="userOrganization"
       @change="updateOrganization"
@@ -34,12 +34,12 @@
       <div class="fr-grid-row fr-grid-row--middle fr-pb-3v">
         <div class="fr-col-6">
           <a class="fr-btn fr-btn--secondary fr-btn--secondary-grey-500" :href="organization_url">
-            {{ $t("Join an organization") }}
+            {{ t("Join an organization") }}
           </a>
         </div>
         <div class="fr-col-6">
           <a class="fr-btn" :href="createOrganizationUrl">
-            {{ $t("Create an organization") }}
+            {{ t("Create an organization") }}
           </a>
         </div>
       </div>
@@ -67,6 +67,7 @@ const props = defineProps<{
 const createOrganizationUrl = `${organization_url}publishing-form/`;
 
 const userOrganization = ref<Organization>();
+console.log(props.user)
 const owned = ref<OwnedWithId>({
   organization: null,
   owner: props.user.id,

udata_front/theme/gouvfr/assets/js/components/Reuse/NewReuseLoader.vue

@@ -0,0 +1,24 @@
+<template>
+    <ContentLoader
+      viewBox="0 0 350 350"
+      :speed="2"
+      primaryColor="#eeeeee"
+      secondaryColor="#ecebeb"
+    >
+    <rect x="1" y="-7" rx="0" ry="0" width="375" height="328" /> 
+    <rect x="16" y="341" rx="0" ry="0" width="261" height="16" /> 
+    <rect x="16" y="365" rx="0" ry="0" width="206" height="16" /> 
+    <rect x="16" y="389" rx="0" ry="0" width="157" height="16" />
+    </ContentLoader>
+  </template>
+
+  <script>
+  import { ContentLoader } from "vue-content-loader";
+
+  export default {
+    components: {
+      ContentLoader,
+    },
+  };
+  </script>
+

udata_front/theme/gouvfr/assets/js/components/Reuse/ReuseLoader.vue

@@ -0,0 +1,24 @@
+<template>
+    <ContentLoader
+      viewBox="0 0 350 350"
+      :speed="2"
+      primaryColor="#EEEEEE"
+      secondaryColor="#ecebeb"
+    >
+    <rect x="0" y="0" rx="0" ry="0" width="350" height="200" /> 
+    <rect x="10" y="240" rx="0" ry="0" width="240" height="15" /> 
+    <rect x="10" y="280" rx="0" ry="0" width="325" height="12" /> 
+    <rect x="10" y="320" rx="0" ry="0" width="325" height="12" /> 
+    </ContentLoader>
+  </template>
+
+  <script>
+  import { ContentLoader } from "vue-content-loader";
+
+  export default {
+    components: {
+      ContentLoader,
+    },
+  };
+  </script>
+

udata_front/theme/gouvfr/assets/js/components/dataset/CardSM.vue

@@ -0,0 +1,129 @@
+<template>
+  <article class="fr-my-2w fr-p-2w border border-default-grey fr-enlarge-link" :style="style">
+    <div class="absolute top-0 fr-grid-row fr-grid-row--middle fr-mt-n3v" v-if="dataset.private || dataset.archived">
+      <p class="fr-badge fr-badge--mention-grey fr-mr-1w" v-if="dataset.private">
+        <span class="fr-icon-lock-line" aria-hidden="true"></span>
+        {{ t('Private') }}
+      </p>
+      <p class="fr-badge fr-badge--mention-grey" v-if="dataset.archived">
+        <span class="fr-icon-archive-line" aria-hidden="true"></span>
+        {{ t('Archived') }}
+      </p>
+    </div>
+    <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--top">
+      <div class="fr-col-auto">
+        <div class="logo">
+          <Placeholder
+            v-if="dataset.organization"
+            type="dataset"
+            :src="dataset.organization.logo_thumbnail"
+            alt=""
+            :size="60"
+          />
+          <Avatar
+            v-else-if="dataset.owner"
+            :user="dataset.owner"
+            :size="60"
+          />
+          <Placeholder
+            v-else
+            type="dataset"
+            :size="60"
+          />
+        </div>
+      </div>
+      <div class="fr-col">
+        <h4 class="fr-mb-1v fr-grid-row">
+          <a :href="dataset.page" class="text-grey-500">
+            {{ dataset.title }}
+            <small v-if="dataset.acronym">{{ dataset.acronym }}</small>
+          </a>
+        </h4>
+        <p class="fr-my-0 fr-text--xs " v-if="dataset.organization || dataset.owner">
+          <span class="not-enlarged fr-mr-1v" v-if="dataset.organization">
+            <a class="fr-link fr-text--xs" :href="dataset.organization.page">
+              <OrganizationNameWithCertificate :organization="dataset.organization" />
+            </a>
+          </span>
+          <span class="not-enlarged fr-mr-1v" v-else-if="dataset.owner">
+            <a class="fr-link fr-text--xs" :href="dataset.owner.page">
+              {{ ownerName }}
+            </a>
+          </span>
+          <span class="text-mention-grey">{{ $t('Updated {date}', {date: formatRelativeIfRecentDate(dataset.last_update)}) }}</span>
+        </p>
+        <div class="fr-mx-0 fr-mt-n2v fr-grid-row fr-grid-row--middle fr-text--sm text-mention-grey">
+          <div class="fr-grid-row fr-grid-row--middle fr-hidden flex-sm dash-after text-grey-500 not-enlarged">
+            <p class="fr-m-0 fr-mr-1v text-mention-grey fr-text--sm" :id="id">
+              {{$t('Metadata quality:')}}
+            </p>
+            <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
+              <QualityScore :score="dataset.quality.score"/>
+            </div>
+          </div>
+          <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
+            <p class="fr-text--xs"><span class="fr-icon-download-line fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.discussions }}</p>
+            <p class="fr-text--xs"><span class="fr-icon-star-line fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.followers }}</p>
+            <p class="fr-text--xs"><span class="fr-icon-line-chart-line fr-px-1v" aria-hidden="true"></span>{{ dataset.metrics.views }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import useLicense from "../../composables/useLicense";
+import { OrganizationNameWithCertificate, useOwnerName, formatRelativeIfRecentDate} from "@etalab/data.gouv.fr-components";
+import useUid from "../../composables/useUid";
+import Avatar from "../discussions/Avatar/Avatar.vue";
+import Placeholder from "../utils/placeholder.vue";
+import { QualityItem, QualityScore, Toggletip } from '@etalab/data.gouv.fr-components';
+import { excerpt } from "../../helpers";
+import { guides_quality_url } from "../../config";
+import type { Dataset } from "../../types";
+
+export default defineComponent({
+  components: {
+    Avatar,
+    OrganizationNameWithCertificate,
+    Placeholder,
+    QualityScore,
+    Toggletip,
+    QualityItem,
+},
+  inheritAttrs: false,
+  props: {
+    dataset: {
+      type: Object as PropType<Dataset>,
+      required: true,
+    },
+    style: {
+      type: Object,
+      default: () => ({})
+    },
+    showMetrics: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  setup(props) {
+    const { t } = useI18n();
+    const { id } = useUid("metadata-quality");
+    const ownerName = useOwnerName(props.dataset);
+    const license = useLicense(props.dataset.license);
+    return {
+      excerpt,
+      formatRelativeIfRecentDate,
+      guides_quality_url,
+      license,
+      id,
+      ownerName,
+      t,
+    };
+  }
+});
+</script>
+

udata_front/theme/gouvfr/assets/js/index.ts

@@ -21,6 +21,7 @@ import Captcha from "./components/utils/captcha.vue";
 import UserDatasetList from "./components/UserDatasetList/UserDatasetList.vue";
 import UserReuseList from "./components/UserReuseList/UserReuseList.vue";
 import PublishingForm from "./pages/PublishingForm/PublishingForm.vue";
+import ReusePublishingForm from "./pages/ReusePublishingForm/ReusePublishingForm.vue";
 import OrganizationPublishingForm from "./pages/OrganizationPublishingForm/OrganizationPublishingForm.vue";
 import { ReadMore, Toggletip } from "@etalab/data.gouv.fr-components";
 
@@ -78,6 +79,7 @@ const configAndMountApp = (el: HTMLElement) => {
   app.component("toggletip", Toggletip);
   app.component("publishing-form", PublishingForm);
   app.component("organization-publishing-form", OrganizationPublishingForm);
+  app.component("reuse-publishing-form", ReusePublishingForm);
   app.component("user-dataset-list", UserDatasetList);
   app.component("user-reuse-list", UserReuseList);