Fix admin profil (#546)

This PR closes datagouv/data.gouv.fr#1450
It also removes duplicated types and components.

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Add beta admin discussion page [#539](https://github.com/datagouv/udata-front/pull/539)
 - Add beta admin harvester page [#547](https://github.com/datagouv/udata-front/pull/547)
 - Update beta admin members page [#544](https://github.com/datagouv/udata-front/pull/544)
+- Fix Beta admin profile page [#546](https://github.com/datagouv/udata-front/pull/546)
 
 ## 5.2.2 (2024-09-23)
 

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

@@ -1,15 +1,16 @@
+import type { NewOrganization, Organization } from "@datagouv/components/ts";
 import { type MaybeRefOrGetter, toValue } from "vue";
 import { api } from "../plugins/api";
 import { getLocalizedUrl } from "../i18n";
-import type { Member, MemberRole, OrganizationV1, PendingMembershipRequest } from "../types";
+import type { Member, MemberRole, PendingMembershipRequest } from "../types";
 
 type UploadLogoResponse = {
   image: string;
   success: boolean;
 };
 
-export function createOrganization(organization: MaybeRefOrGetter<OrganizationV1>) {
-  return api.post<OrganizationV1>("organizations/", {
+export function createOrganization(organization: MaybeRefOrGetter<NewOrganization>) {
+  return api.post<Organization>("organizations/", {
     ...toValue(organization),
   }).then(resp => resp.data);
 }
@@ -20,15 +21,15 @@ export function uploadLogo(oid: string, file: File) {
   }).then(resp => resp.data);
 }
 
-export function updateOrganization(organization: MaybeRefOrGetter<OrganizationV1>) {
+export function updateOrganization(organization: MaybeRefOrGetter<Organization>) {
   const organizationValue  = toValue(organization);
-  return api.put<OrganizationV1>(`organizations/${organizationValue.id}/`, {
+  return api.put<Organization>(`organizations/${organizationValue.id}/`, {
     ...organizationValue,
   }).then(resp => resp.data);
 }
 
 export function getOrganization(oid: string) {
-  return api.get<OrganizationV1>(getLocalizedUrl(`organizations/${oid}/`))
+  return api.get<Organization>(getLocalizedUrl(`organizations/${oid}/`))
     .then(res => res.data);
 }
 

udata_front/theme/gouvfr/assets/js/components/AdminSidebar/AdminSidebarMenu/AdminSidebarMenu.vue

@@ -76,6 +76,7 @@
           icon="fr-icon-user-line"
           :label="t('Profile')"
           :to="{name: 'organization-profile', params: {oid: organization.id}}"
+          @click="$emit('click')"
         />
         </template>
       </ul>

udata_front/theme/gouvfr/assets/js/locales/de.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/locales/en.json

@@ -559,7 +559,9 @@
   "Initialized": "Initialized",
   "Processing": "Processing",
   "Done": "Done",
-  "Done with errors": "Done with errors",
+  "Done with errors": "",
   "Failed": "Failed",
-  "No job yet": "No job yet"
-}
+  "No job yet": "No job yet",
+  "See the organization page": "See the organization page",
+  "asks to join the organization.": "asks to join the organization."
+}

udata_front/theme/gouvfr/assets/js/locales/es.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/locales/fr.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/locales/it.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/locales/pt.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/locales/sr.json

@@ -561,5 +561,8 @@
   "Done": "",
   "Done with erros": "",
   "Failed": "",
-  "No job yet": ""
+  "No job yet": "",
+  "See the organization page": "",
+  "asks to join the organization.": "",
+  "Done with errors": ""
 }

udata_front/theme/gouvfr/assets/js/pages/Admin/Profile/Profile.vue

@@ -17,12 +17,47 @@
         </a>
       </li>
     </Breadcrumb>
+    <h1 class="fr-h3 fr-mb-5v">{{ t("Profile") }}</h1>
+    <Container
+      v-if="organization"
+      class="fr-mb-5v"
+    >
+      <div class="fr-grid-row fr-grid-row--gutters fr-grid-row--middle justify-between">
+        <div class="fr-col-12 fr-col-md fr-grid-row fr-grid-row--middle">
+          <Placeholder
+              :src="organization.logo"
+              type="organization"
+              :size="80"
+              class="rounded-xxs border"
+            />
+          <div class="fr-ml-3v fr-my-0 fr-h3">
+            {{ organization.name }}
+            <span
+              v-if="organizationCertified"
+              class="fr-icon-success-line fr-icon--lg text-blue-400"
+              :title="t('The identity of this public service is certified by {certifier}', { certifier: title })"
+              aria-hidden="true"
+            >
+            </span>
+          </div>
+        </div>
+        <div class="fr-col-auto">
+          <a
+            :href="organization.page"
+            class="fr-btn fr-btn--sm fr-btn--secondary fr-btn--secondary-grey-500 fr-btn--icon-left fr-icon-eye-line"
+          >
+            {{ t('See the organization page') }}
+          </a>
+        </div>
+      </div>
+    </Container>
     <h2 class="subtitle subtitle--uppercase fr-mb-5v" v-if="form" :id="form.legend">
       {{ t("Edit profile") }}
     </h2>
+    <AdminLoader v-if="loading && !organization" />
     <DescribeOrganizationFrom
-      v-if="currentOrganization"
-      :organization="currentOrganization"
+      v-if="organization"
+      :organization="organization"
       :errors="errors"
       :showLegend="false"
       :showWell="false"
@@ -112,27 +147,29 @@
   </div>
 </template>
 <script setup lang="ts">
-import { getRandomId } from '@datagouv/components/ts';
+import { getRandomId, NewOrganization, Placeholder, useOrganizationCertified, type Organization } from '@datagouv/components/ts';
 import { onMounted, ref } from 'vue';
 import { useI18n } from "vue-i18n";
 import { useRouter } from 'vue-router';
-import { fetchMe } from "../../../api/me";
-import { deleteOrganization, updateOrganization } from '../../../api/organizations';
+import { deleteOrganization, getOrganization, updateOrganization, uploadLogo } from '../../../api/organizations';
 import Breadcrumb from "../../../components/Breadcrumb/Breadcrumb.vue";
 import AdminDangerZone from "../../../components/AdminDangerZone/AdminDangerZone.vue";
 import { useCurrentOrganization } from '../../../composables/admin/useCurrentOrganization';
 import { useToast } from '../../../composables/useToast';
 import DescribeOrganizationFrom from "../../OrganizationPublishingForm/Step2DescribeOrganization.vue";
-import type { Me, OrganizationV1 } from "../../../types";
+import AdminLoader from '../../../components/AdminLoader/AdminLoader.vue';
+import Container from '../../../components/Ui/Container/Container.vue';
+import { title } from '../../../config';
 
 const { t } = useI18n();
 const { toast } = useToast();
-defineProps<{oid: string}>();
+const props = defineProps<{oid: string}>();
 const router = useRouter();
-const me = ref<Me | null>(null);
 const form = ref<InstanceType<typeof DescribeOrganizationFrom> | null>(null);
 
 const { currentOrganization } = useCurrentOrganization();
+const organization = ref<Organization | null>(null);
+const { organizationCertified } = useOrganizationCertified(organization);
 const errors = ref([]);
 const loading = ref(false);
 const modalId = getRandomId("modal");
@@ -151,13 +188,35 @@ function deleteCurrentOrganization() {
   }
 }
 
-function updateCurrentOrganization(organization: OrganizationV1) {
+async function updateCurrentOrganization(updatedOrganization: NewOrganization | Organization, logo_file: File | null) {
   loading.value = true;
-  updateOrganization(organization)
-  .then(() => toast.success(t("Organization updated !")))
-  .catch(() => toast.error(t("An error occured when updating the organization.")))
-  .finally(() => loading.value = false);
+  try {
+    organization.value = await updateOrganization(updatedOrganization as Organization)
+    toast.success(t("Organization updated !"))
+  } catch (e) {
+    toast.error(t("An error occured when updating the organization."))
+  } finally {
+    loading.value = false;
+  }
+  if (logo_file && organization.value) {
+    loading.value = true;
+    try {
+      const resp = await uploadLogo(organization.value.id, logo_file);
+      organization.value.logo_thumbnail = resp.image;
+    } catch (e) {
+      toast.error(t("Failed to upload logo, you can upload it again in your management panel"));
+    } finally {
+      loading.value = false;
+    }
+  }
 }
 
-onMounted(async () => me.value = await fetchMe());
+onMounted(async () => {
+  loading.value = true;
+  try {
+    organization.value = await getOrganization(props.oid);
+  } finally {
+    loading.value = false;
+  }
+});
 </script>

udata_front/theme/gouvfr/assets/js/pages/OrganizationPublishingForm/OrganizationPublishingForm.vue

@@ -12,16 +12,16 @@
       @submit="createOrganizationAndMoveToNextStep"
     />
     <Step3CompleteTheOrganization
-      v-else-if="currentStep === 2"
-      :organization="organization"
+      v-else-if="currentStep === 2 && savedOrganization"
+      :organization="savedOrganization"
       :errors="errors"
       :datasetLink="datasetAdminUrl"
       :reuseLink="reuseAdminUrl"
     />
   </div>
 </template>
 <script setup lang="ts">
-import { type NewOrganization } from '@datagouv/components/ts';
+import type { NewOrganization, Organization } from '@datagouv/components/ts';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Stepper from "../../components/Form/Stepper/Stepper.vue";
@@ -49,9 +49,10 @@ const organization = ref<NewOrganization>({
   description: "",
   url: "",
   logo: "",
-  logo_thumbnail: "",
 });
 
+const savedOrganization = ref<Organization | null>(null);
+
 const errors = ref<Array<string>>([]);
 
 const moveToStep = (step: number) => {
@@ -67,15 +68,17 @@ async function createOrganizationAndMoveToNextStep(org: NewOrganization, file: F
   errors.value = [];
   let moveToNextStep = false;
   try {
-    organization.value = await createOrganization(org);
+    savedOrganization.value = await createOrganization(org);
     moveToNextStep = true;
-  } catch (e: Error) {
-    errors.value.push(e.message);
+  } catch (e) {
+    if(e instanceof Error) {
+      errors.value.push(e.message);
+    }
   }
-  if (file) {
+  if (file && savedOrganization.value) {
     try {
-      const resp = await uploadLogo(organization.value.id, file);
-      organization.value.logo_thumbnail = resp.image
+      const resp = await uploadLogo(savedOrganization.value.id, file);
+      savedOrganization.value.logo_thumbnail = resp.image
     } catch (e) {
       errors.value.push(t("Failed to upload logo, you can upload it again in your management panel"));
     }