Google api indexing page

pages/support/actions/google-api-indexing.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <ClientOnly>
+      <Teleport to="#teleport-breadcrumb">
+        <DsfrBreadcrumb
+          :links="[{ text: 'Support' }, { text: 'Actions' }, { text: `Google API Indexing` }]"
+        />
+      </Teleport>
+    </ClientOnly>
+
+    <div class="flex flex-col gap-8">
+      <BaseSectionHeading title="Google API Indexing">
+        <template #secondary-title-bottom>
+          Permet de gérer l'indexation des offres d'emplois dans Google
+        </template>
+      </BaseSectionHeading>
+
+      <BaseBox>
+        <div class="space-y-10">
+          <DsfrFormControl label="Url de la page de mission" html-for="url" required>
+            <template #bottom>
+              <p class="text-xs text-[#666666]">
+                Ex: https://www.jeveuxaider.gouv.fr/missions-benevolat/50450/benevolat-eloquentia-4
+              </p>
+            </template>
+            <DsfrInput
+              v-model="url"
+              name="url"
+              type="search"
+              size="lg"
+              placeholder="Url"
+              icon="RiSearchLine"
+            />
+          </DsfrFormControl>
+
+          <div class="flex flex-wrap justify-end gap-4">
+            <DsfrButton
+              type="secondary"
+              icon="RiInformationLine"
+              @click="onClickMetadata"
+              :loading="loadingMetadata"
+              >Informations</DsfrButton
+            >
+            <DsfrButton
+              type="primary"
+              icon="RiRefreshLine"
+              @click="onClickUpdateUrl"
+              :loading="loadingUpdating"
+              >Mettre à jour</DsfrButton
+            >
+          </div>
+        </div>
+      </BaseBox>
+
+      <BaseBox v-if="response">
+        <pre>{{ response }}</pre>
+      </BaseBox>
+    </div>
+  </div>
+</template>
+
+<script>
+export default defineNuxtComponent({
+  setup() {
+    definePageMeta({
+      layout: 'support',
+      middleware: ['admin'],
+    })
+  },
+  data() {
+    return {
+      url: '',
+      response: null,
+      loadingMetadata: false,
+      loadingUpdating: false,
+    }
+  },
+  methods: {
+    validateUrl() {
+      this.response = null
+      if (!this.url) {
+        this.$toast.error('Une url est requise')
+        return false
+      }
+      return true
+    },
+    async onClickMetadata() {
+      if (!this.validateUrl()) {
+        return
+      }
+      this.loadingMetadata = true
+      await apiFetch(`/google-api/indexing/url-notifications-metadata`, {
+        method: 'POST',
+        body: {
+          url: this.url,
+        },
+      })
+        .then((response) => {
+          console.log(response)
+          this.response = response
+        })
+        .finally(() => {
+          this.loadingMetadata = false
+        })
+    },
+    async onClickUpdateUrl() {
+      if (!this.validateUrl()) {
+        return
+      }
+      this.loadingUpdating = true
+      await apiFetch(`/google-api/indexing/submit-url-to-index`, {
+        method: 'POST',
+        body: {
+          url: this.url,
+        },
+      })
+        .then((response) => {
+          console.log(response)
+          this.response = response
+        })
+        .finally(() => {
+          this.loadingUpdating = false
+        })
+    },
+  },
+})
+</script>