Add active and auto-archive toggles (#243)

components/Form/ToggleSwitch.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="space-y-1">
+    <div class="flex items-center space-x-6">
+      <Switch
+        v-model="enabled"
+        :class="[enabled ? 'bg-datagouv-defaultLight hover:!bg-datagouv-defaultLight' : 'bg-gray-200 hover:!bg-gray-200', 'relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full !border-2 !border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-datagouv-defaultbg-datagouv-defaultLight focus:ring-offset-2']"
+        style="border: inherit /** cancel DSFR default border: none **/"
+      >
+        <span class="sr-only">{{ label }}</span>
+        <span :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none relative inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out']">
+          <span
+            :class="[enabled ? 'opacity-0 duration-100 ease-out' : 'opacity-100 duration-200 ease-in', 'absolute inset-0 flex size-full items-center justify-center transition-opacity']"
+            aria-hidden="true"
+          >
+            <RiCloseLine class="size-3 text-gray-400" />
+          </span>
+          <span
+            :class="[enabled ? 'opacity-100 duration-200 ease-in' : 'opacity-0 duration-100 ease-out', 'absolute inset-0 flex size-full items-center justify-center transition-opacity']"
+            aria-hidden="true"
+          >
+            <RiCheckLine class="size-3 text-datagouv-defaultLight" />
+          </span>
+        </span>
+      </Switch>
+      <div>{{ label }}</div>
+    </div>
+    <div class="text-xs/5">
+      <div
+        v-if="enabled"
+        class="text-datagouv"
+      >
+        {{ labelTrue }}
+      </div>
+      <div v-else>
+        {{ labelFalse }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Switch } from '@headlessui/vue'
+import { RiCheckLine, RiCloseLine } from '@remixicon/vue'
+
+const props = defineProps<{
+  label: string
+  labelTrue?: string
+  labelFalse?: string
+}>()
+
+const { t } = useI18n()
+
+const labelTrue = computed(() => props.labelTrue || t('Enabled'))
+const labelFalse = computed(() => props.labelFalse || t('Disabled'))
+
+const enabled = defineModel<boolean>({ required: true })
+</script>

components/Harvesters/DescribeHarvester.vue

@@ -211,6 +211,26 @@
           </HelpAccordion>
         </template>
       </FieldsetElement>
+      <div class="w-full flex flex-col sm:flex-row">
+        <FieldsetElement
+          form-key="active"
+          class="w-full"
+        >
+          <ToggleSwitch
+            v-model="form.active"
+            :label="t('Enabled')"
+          />
+        </FieldsetElement>
+        <FieldsetElement
+          form-key="autoarchive"
+          class="w-full"
+        >
+          <ToggleSwitch
+            v-model="form.autoarchive"
+            :label="t('Auto-archive')"
+          />
+        </FieldsetElement>
+      </div>
     </FormFieldset>
     <FormFieldset
       v-if="isGlobalAdmin && type != 'create'"
@@ -237,6 +257,7 @@ import HelpAccordion from '../Form/HelpAccordion.vue'
 import FieldsetElement from '../Form/FieldsetElement.vue'
 import SelectGroup from '../Form/SelectGroup/SelectGroup.vue'
 import InputGroup from '../InputGroup/InputGroup.vue'
+import ToggleSwitch from '../Form/ToggleSwitch.vue'
 import ProducerSelect from '~/components/ProducerSelect.vue'
 import type { HarvestBackend, HarvesterForm } from '~/types/harvesters'
 
@@ -248,7 +269,6 @@ const emit = defineEmits<{
 }>()
 
 const model = defineModel<HarvesterForm>({ required: true })
-const runtimeConfig = useRuntimeConfig()
 const { t } = useI18n()
 
 const me = useMe()

i18n/locales/en-US.json

@@ -825,6 +825,9 @@
   "Remove": "Remove",
   "Add filters": "Add filters",
   "Add config variables": "Add config variables",
+  "Enabled": "Enabled",
+  "Disabled": "Disabled",
+  "Auto-archive": "Auto-archive",
   "Please note that the data will be published once the harvester has been validated.": "Please note that the data will be published once the harvester has been validated.",
   "Start typing to search in {type}": "Start typing to search in {type}",
   "Search “{query}” in {type}": "Search “{query}” in {type}",

i18n/locales/es-ES.json

@@ -818,6 +818,9 @@
   "Remove": "Remove",
   "Add filters": "Add filters",
   "Add config variables": "Add config variables",
+  "Enabled": "Enabled",
+  "Disabled": "Disabled",
+  "Auto-archive": "Auto-archive",
   "Please note that the data will be published once the harvester has been validated.": "Please note that the data will be published once the harvester has been validated.",
   "Start typing to search in {type}": "Start typing to search in {type}",
   "Search “{query}” in {type}": "Search “{query}” in {type}",

i18n/locales/fr-FR.json

@@ -846,6 +846,9 @@
   "Remove": "Supprimer",
   "Add filters": "Ajouter des filtres",
   "Add config variables": "Ajouter des variables de configuration",
+  "Enabled": "Activé",
+  "Disabled": "Désactivé",
+  "Auto-archive": "Archivage automatique",
   "Please note that the data will be published once the harvester has been validated.": "Attention les données seront publiées une fois le moissonneur validé.",
   "Start typing to search in {type}": "Commencer à taper pour rechercher parmi les {type}",
   "Search “{query}” in {type}": "Rechercher « {query} » dans les {type}",

pages/beta/admin/harvesters/new.vue

@@ -96,6 +96,8 @@ const harvesterForm = useState(
       filters: [],
       configs: [],
       schedule: '',
+      autoarchive: true,
+      active: true,
     } as HarvesterForm),
 )
 

tailwind.config.js

@@ -59,6 +59,7 @@ export default {
           lighter: '#e3e3fd',
           light: '#c1c1fd',
           hover: '#5982e0',
+          defaultLight: '#46699D',
           DEFAULT: '#465F9D',
           dark: '#3558a2',
         },

types/harvesters.d.ts

@@ -70,6 +70,8 @@ export type HarvesterForm = {
   filters: Array<HarvestSourceFilter>
   configs: Array<HarvestSourceConfig>
   schedule: string
+  autoarchive: boolean
+  active: boolean
 }
 
 export type HarvestSourceFilter = {

utils/harvesters.ts

@@ -18,6 +18,8 @@ export function toForm(harvester: HarvesterSource): HarvesterForm {
     filters: harvester.config.filters as Array<HarvestSourceFilter> || [],
     configs: harvester.config.extra_configs as Array<HarvestSourceConfig> || [],
     schedule: harvester.schedule,
+    autoarchive: harvester.autoarchive,
+    active: harvester.active,
   }
 }
 
@@ -29,6 +31,8 @@ export function toApi(form: HarvesterForm): HarvesterSource {
     description: form.description,
     url: form.url,
     backend: form.backend,
+    autoarchive: form.autoarchive,
+    active: form.active,
     config: {
       filters: form.filters,
       extra_configs: form.configs,