feat: datasets access_type and access_audiences

components/AccessType/AccessTypeForm.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="space-y-3">
+    <RadioButtons
+      v-model="form.access_type"
+      class="!mb-0"
+      :label="$t(`Type d'accès`)"
+      :options="disallowOpenWithAccount ? [
+        { value: 'open', label: $t('Ouvert') },
+        { value: 'restricted', label: $t('Restreint') },
+      ] : [
+        { value: 'open', label: $t('Ouvert') },
+        { value: 'open_with_account', label: $t('Ouvert avec compte') },
+        { value: 'restricted', label: $t('Restreint') },
+      ]"
+    />
+    <SimpleBanner
+      v-if="getFirstWarning('access_type')"
+      class="mt-2"
+      type="warning"
+    >
+      {{ getFirstWarning("access_type") }}
+    </SimpleBanner>
+    <template v-if="form.access_type === 'restricted'">
+      <SelectAudiencesTypes
+        v-model="form.access_audiences"
+      />
+      <SelectGroup
+        v-model="form.access_type_reason_category"
+        :label="$t('Raison de la restriction')"
+        :options="categoriesWithOthers"
+      />
+      <InputGroup
+        v-if="form.access_type_reason_category === 'other'"
+        v-model="form.access_type_reason"
+        :label="$t('Veuillez préciser la raison')"
+        :has-error="!!getFirstError('access_type_reason')"
+        :has-warning="!!getFirstWarning('access_type_reason')"
+        :error-text="getFirstError('access_type_reason')"
+      />
+      <SimpleBanner
+        v-if="getFirstWarning('access_type_reason')"
+        type="warning"
+      >
+        {{ getFirstWarning("access_type_reason") }}
+      </SimpleBanner>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SimpleBanner, type AccessTypeForm } from '@datagouv/components-next'
+import SelectGroup from '../Form/SelectGroup/SelectGroup.vue'
+
+defineProps<{
+  getFirstWarning: (key: string) => string | null
+  getFirstError: (key: string) => string | null
+  disallowOpenWithAccount?: boolean
+}>()
+
+const form = defineModel<AccessTypeForm>({ required: true })
+const { t } = useTranslation()
+
+const { data: categories } = await useAPI<Array<{ value: string, label: string }>>('/api/1/access_type/reason_categories')
+
+const categoriesWithOthers = computed(() => {
+  return [...(categories.value || []), { value: 'other', label: t('Autre') }]
+})
+
+watch(() => form.value.access_type_reason_category, (newValue, oldValue) => {
+  if (oldValue === 'other' && newValue !== 'other') {
+    form.value.access_type_reason = ''
+  }
+})
+</script>

components/AdminTable/AdminDataservicesTable/DataserviceAccessTypeBadge.vue → components/AccessTypes/AccessTypeBadge.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script setup lang="ts">
-import type { Dataservice } from '@datagouv/components-next'
+import type { AccessType } from '@datagouv/components-next'
 import type { AdminBadgeType } from '~/types/types'
 
-const props = defineProps<{ dataservice: Dataservice }>()
+const props = defineProps<{ accessType: AccessType }>()
 
 const { t } = useTranslation()
 
@@ -20,14 +20,14 @@ const label = computed(() => {
     open: t('Ouvert'),
     open_with_account: t('Ouvert avec compte'),
     restricted: t('Restreint'),
-  }[props.dataservice.access_type]
+  }[props.accessType]
 })
 
 const type = computed(() => {
   return {
     open: 'success' as AdminBadgeType,
     open_with_account: 'warning' as AdminBadgeType,
     restricted: 'warning' as AdminBadgeType,
-  }[props.dataservice.access_type]
+  }[props.accessType]
 })
 </script>

components/AccessTypes/AccessTypePanel.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="space-y-1">
+    <dt class="text-gray-plain font-bold">
+      {{ $t('Accès') }}
+    </dt>
+    <dd class="p-0">
+      <AccessTypeBadge
+        v-if="object.access_type"
+        :access-type="object.access_type"
+      />
+      <template v-else>
+        {{ $t('Non spécifié') }}
+      </template>
+      <div
+        v-if="object.authorization_request_url"
+        class="mt-2.5"
+      >
+        <a
+          :href="object.authorization_request_url"
+          rel="ugc nofollow noopener"
+          target="_blank"
+          class="fr-text--sm fr-link"
+        >
+          {{ $t("Faire une demande d'habilitation") }}
+        </a>
+      </div>
+    </dd>
+    <template v-if="object.access_type === 'restricted'">
+      <dt class="text-gray-plain font-bold mt-2.5">
+        {{ $t('Publics éligibles') }}
+      </dt>
+      <dd
+        class="p-0"
+      >
+        <ul
+          v-if="accessAudiences.length"
+          class="list-none p-0 space-y-1 m-0"
+        >
+          <template
+            v-for="audience in accessAudiences"
+            :key="audience"
+          >
+            <DataservicesAccessAudienceCondition
+              :condition="audience.condition"
+              :audience="audience.role"
+            />
+          </template>
+        </ul>
+        <template v-else>
+          {{ $t('Non spécifiés') }}
+        </template>
+      </dd>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { AccessAudience, AccessAudienceType, WithAccessType } from '@datagouv/components-next'
+import AccessTypeBadge from './AccessTypeBadge.vue'
+
+const props = defineProps<{
+  object: WithAccessType
+}>()
+
+const accessAudiences = computed(() => (['local_authority_and_administration', 'company_and_association', 'private'] as Array<AccessAudienceType>)
+  .map(type => props.object.access_audiences.find(a => a.role === type))
+  .filter(Boolean) as Array<AccessAudience>)
+</script>

components/AdminBadge/AdminBadge.vue

@@ -32,6 +32,7 @@ const colors = computed(() => {
     warning: 'text-warning2-dark bg-warning2-lightest',
     danger: 'text-danger-dark bg-danger-lightest',
     default: 'text-gray-plain bg-gray-lower',
+    pink: 'text-pink bg-pink-soft',
   }[props.type]
 })
 

components/AdminTable/AdminDataservicesTable/AdminDataservicesTable.vue

@@ -61,7 +61,7 @@
           </AdminBadge>
         </td>
         <td>
-          <DataserviceAccessTypeBadge :dataservice />
+          <AccessTypeBadge :access-type="dataservice.access_type" />
         </td>
         <td>{{ formatDate(dataservice.created_at) }}</td>
         <td>
@@ -119,8 +119,8 @@ import AdminBadge from '../../../components/AdminBadge/AdminBadge.vue'
 import AdminTable from '../../../components/AdminTable/Table/AdminTable.vue'
 import AdminTableTh from '../../../components/AdminTable/Table/AdminTableTh.vue'
 import AdminContentWithTooltip from '../../../components/AdminContentWithTooltip/AdminContentWithTooltip.vue'
-import DataserviceAccessTypeBadge from './DataserviceAccessTypeBadge.vue'
 import type { DataserviceSortedBy, SortDirection } from '~/types/types'
+import AccessTypeBadge from '~/components/AccessTypes/AccessTypeBadge.vue'
 
 const props = withDefaults(defineProps<{
   activities?: Record<string, Activity>

components/Dataservices/AccessAudienceCondition.vue

@@ -14,11 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import type { DataserviceAccessAudienceCondition, DataserviceAccessAudienceType } from '@datagouv/components-next'
+import type { AccessAudienceCondition, AccessAudienceType } from '@datagouv/components-next'
 
 const props = defineProps<{
-  audience: DataserviceAccessAudienceType
-  condition: DataserviceAccessAudienceCondition
+  audience: AccessAudienceType
+  condition: AccessAudienceCondition
 }>()
 
 const { getAccessAudienceCondition, getAccessAudienceType } = useAccessAudience()

components/Dataservices/DescribeDataservice.vue

@@ -418,36 +418,11 @@
             :accordion="accessTypeAccordionId"
             @blur="touch('access_type')"
           >
-            <RadioButtons
-              v-model="form.access_type"
-              class="!mb-0"
-              :label="t(`Type d'accès`)"
-              :options="[
-                { value: 'open', label: t('Ouvert') },
-                { value: 'open_with_account', label: t('Ouvert avec compte') },
-                { value: 'restricted', label: t('Restreint') },
-              ]"
+            <AccessTypeForm
+              :model="form"
+              :get-first-warning
+              :get-first-error
             />
-            <SimpleBanner
-              v-if="getFirstWarning('access_type')"
-              class="mt-2"
-              type="warning"
-            >
-              {{ getFirstWarning("access_type") }}
-            </SimpleBanner>
-            <div
-              v-if="form.access_type === 'restricted'"
-              class="grid md:grid-cols-2 xl:grid-cols-3 gap-4 items-end"
-            >
-              <SelectGroup
-                v-for="accessAudienceType in accessAudienceTypes"
-                :key="accessAudienceType"
-                v-model="form.access_audiences[accessAudienceType]"
-                class="mb-0"
-                :label="getAccessAudienceType(accessAudienceType)"
-                :options="accessAudienceConditionOptions"
-              />
-            </div>
           </LinkedToAccordion>
           <LinkedToAccordion
             class="fr-fieldset__element"
@@ -531,18 +506,16 @@
 </template>
 
 <script setup lang="ts">
-import { BrandedButton, SimpleBanner, type DataserviceAccessAudienceCondition, type DataserviceAccessAudienceType } from '@datagouv/components-next'
+import { BrandedButton, SimpleBanner, TranslationT } from '@datagouv/components-next'
 import { RiAddLine } from '@remixicon/vue'
 import { computed } from 'vue'
-import { TranslationT } from '@datagouv/components-next'
 import ModalClient from '../Modal/Modal.client.vue'
 import Accordion from '~/components/Accordion/Accordion.global.vue'
 import AccordionGroup from '~/components/Accordion/AccordionGroup.global.vue'
 import ToggleSwitch from '~/components/Form/ToggleSwitch.vue'
 import ContactPointSelect from '~/components/ContactPointSelect.vue'
 import ProducerSelect from '~/components/ProducerSelect.vue'
 import type { DataserviceForm, Owned } from '~/types/types'
-import SelectGroup from '~/components/Form/SelectGroup/SelectGroup.vue'
 
 const props = defineProps<{
   harvested?: boolean
@@ -574,21 +547,10 @@ const rateLimitingDataserviceAccordionId = useId()
 const availabilityDataserviceAccordionId = useId()
 const contactPointAccordionId = useId()
 
-const { getAccessAudienceCondition, getAccessAudienceType } = useAccessAudience()
-
 const ownedOptions = computed<Array<Owned>>(() => {
   return [...user.value.organizations.map(organization => ({ organization, owner: null })), { owner: user.value, organization: null }]
 })
 
-const accessAudienceConditions: Array<DataserviceAccessAudienceCondition> = ['yes', 'no', 'under_condition']
-
-const accessAudienceTypes: Array<DataserviceAccessAudienceType> = ['local_authority_and_administration', 'company_and_association', 'private']
-
-const accessAudienceConditionOptions = computed(() => accessAudienceConditions.map(condition => ({
-  value: condition,
-  label: getAccessAudienceCondition(condition).label,
-})))
-
 const machineDocumentationUrlWarningMessage = t(`Il est fortement recommandé d'ajouter une documentation OpenAPI ou Swagger à votre API.`)
 const openConfirmModal = ref(false)
 

components/Datasets/DescribeDataset.vue

@@ -271,7 +271,35 @@
               {{ getFirstWarning("tags") }}
             </SimpleBanner>
           </LinkedToAccordion>
+        </fieldset>
+        <fieldset
+          class="fr-fieldset"
+          aria-labelledby="description-legend"
+        >
+          <legend
+            id="description-legend"
+            class="fr-fieldset__legend"
+          >
+            <h2 class="text-sm font-bold uppercase mb-0">
+              {{ t("Accès") }}
+            </h2>
+          </legend>
+
+          <LinkedToAccordion
+            class="fr-fieldset__element"
+            :accordion="accessTypeAccordionId"
+            @blur="touch('access_type')"
+          >
+            <AccessTypeForm
+              v-model="form"
+              :get-first-warning
+              :get-first-error
+              disallow-open-with-account
+            />
+          </LinkedToAccordion>
+
           <LinkedToAccordion
+            v-if="form.access_type === 'open'"
             class="fr-fieldset__element"
             :accordion="selectLicenseAccordionId"
             @blur="touch('license')"
@@ -603,6 +631,7 @@ const nameDatasetAccordionId = useId()
 const addAcronymAccordionId = useId()
 const writeAGoodDescriptionAccordionId = useId()
 const useTagsAccordionId = useId()
+const accessTypeAccordionId = useId()
 const selectLicenseAccordionId = useId()
 const contactPointAccordionId = useId()
 const chooseFrequencyAccordionId = useId()

components/Datasets/New/Step3AddResources.vue

@@ -180,11 +180,12 @@
 <script setup lang="ts">
 import { BrandedButton, PaddedContainer, SimpleBanner } from '@datagouv/components-next'
 import UploadResourceModal from '../UploadResourceModal.vue'
-import type { ResourceForm } from '~/types/types'
+import type { DatasetForm, ResourceForm } from '~/types/types'
 
 const props = defineProps<{
   loading: boolean
   resources: Array<ResourceForm>
+  datasetForm: DatasetForm
 }>()
 
 const emit = defineEmits<{
@@ -199,11 +200,13 @@ const { t } = useTranslation()
 const publishFileAccordionId = useId()
 const addDescriptionAccordionId = useId()
 
+const isDatasetOpen = computed(() => props.datasetForm.access_type === 'open')
+
 const { form, getFirstError, getFirstWarning, touch, validate, errorsAsList: errors } = useForm({
   resources: props.resources,
   hasDocumentation: false,
 }, {
-  resources: [required(t('Au moins un fichier est requis.'))],
+  resources: [ruleIf(isDatasetOpen, required(t('Au moins un fichier est requis.')))],
 }, {
   resources: [resources => resources.find(resource => !isClosedFormat(resource, extensions.value)) ? null : t('Vous n\'avez pas ajouté de fichier dans un format ouvert.')],
   hasDocumentation: [hasDocumentation => !hasDocumentation ? t('Vous n\'avez pas ajouté de fichier de documentation ni décrit vos fichiers.') : null],