Refactor: Simplify the process to delete access url

Integrate notification composable.
Replace hardcoded URL generation with Symfony router.
Update accessurlService methods for improved readability.

Author: AngelFQC

assets/vue/services/accessurlService.js

@@ -11,53 +11,27 @@ export async function findUserActivePortals(userIri) {
   return items
 }
 
-async function getUrl(id) {
-  const apiUrl = `/api/access_urls/${encodeURIComponent(id)}`;
-  try {
-    const resp = await fetch(apiUrl, {
-      credentials: "same-origin",
-      headers: { Accept: "application/json" },
-    });
-    if (resp.ok) {
-      const contentType = resp.headers.get("content-type") || "";
-      return contentType.includes("application/json") ? resp.json() : { url: await resp.text() };
-    }
-  } catch (err) {
-  }
-}
-
-async function deleteAccessUrl(id, confirmValue, secToken = "") {
-  const url = `/api/access_urls/${encodeURIComponent(id)}`
-  const resp = await fetch(url, {
-    method: "DELETE",
-    credentials: "same-origin",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-      ...(secToken ? { "X-CSRF-Token": secToken } : {}),
-    },
-    body: JSON.stringify({ confirm_value: String(confirmValue) }),
-  })
-
-  if (!resp.ok) {
-    const txt = await resp.text()
-    throw new Error(txt || "Delete failed")
-  }
+export async function findAll() {
+  const { items } = await baseService.getCollection("/api/access_urls")
 
-  const contentType = resp.headers.get("content-type") || ""
-  if (contentType.includes("application/json")) {
-    return resp.json()
-  }
-  return { message: await resp.text(), redirectUrl: "/main/admin/access_urls.php" }
+  return items
 }
 
-export default {
-  deleteAccessUrl,
-  getUrl,
+/**
+ * @param {number} id
+ * @returns {Promise<Object>}
+ */
+export async function findById(id) {
+  return await baseService.get(`/api/access_urls/${id}`)
 }
 
-export async function findAll() {
-  const { items } = await baseService.getCollection("/api/access_urls")
+/**
+ * @param {number} id
+ * @param {string} [secToken]
+ * @returns {Promise<Object>}
+ */
+export async function deleteById(id, secToken = "") {
+  await baseService.delete(`/api/access_urls/${id}`)
 
-  return items
+  return { redirectUrl: "/main/admin/access_urls.php" }
 }

assets/vue/views/accessurl/DeleteAccessUrl.vue

@@ -1,66 +1,69 @@
 <template>
   <div class="space-y-6">
-    <Message severity="warn" class="inline-block max-w-max">{{ t("Danger zone: deleting an access URL is permanent.")}}</Message>
-    <section class="p-0">
-      <h3 class="mb-2 text-sm font-semibold text-rose-900">{{ t("Confirm deletion") }}</h3>
-      <p class="mb-3 text-sm text-rose-800">
-        {{ t("Type the full URL to confirm. The URL and its relations will be permanently removed.") }}
+    <SectionHeader :title="t('Confirm deletion')" />
+    <Message
+      severity="warn"
+      class="inline-block max-w-max"
+    >
+      {{ t("Danger zone: deleting an access URL is permanent.") }}
+    </Message>
+    <section>
+      <p class="mb-3">
+        {{ t("The value must match exactly: %s", [urlText]) }}
       </p>
-      <div class="grid grid-cols-1 gap-4 md:grid-cols-3 items-center">
-        <div class="md:col-span-2">
-          <label class="mb-1 block text-xs font-medium text-rose-900">{{ t("URL") }}</label>
-          <BaseInputText
-            v-model="confirmText"
-            class="w-full"
-            :placeholder="urlText || 'https://example.com'"
-          />
-          <p v-if="confirmText && !canDelete" class="mt-1 text-xs text-rose-700">
-            {{ t("The value must match exactly:") }} <strong>{{ urlText }}</strong>
-          </p>
-        </div>
-        <div class="flex items-center md:justify-end md:col-span-1 md:pr-8">
-          <div class="hidden md:block">
-            <BaseButton
-              :label="t('Delete URL')"
-              icon="delete"
-              type="danger"
-              :disabled="loading || !canDelete"
-              :isLoading="loading"
-              @click="openConfirmDialog"
-            />
-          </div>
-        </div>
-      </div>
+
+      <BaseInputText
+        id="confirm-text"
+        v-model="confirmText"
+        :label="t('URL')"
+        :placeholder="urlText || 'https://example.com'"
+        class="w-full"
+        :help-text="t('Type the full URL to confirm. The URL and its relations will be permanently removed.')"
+      />
+
+      <BaseButton
+        :disabled="loading || !canDelete"
+        :is-loading="loading"
+        :label="t('Delete URL')"
+        icon="delete"
+        type="danger"
+        @click="confirmDialogVisible = true"
+      />
     </section>
+
     <BaseDialogConfirmCancel
       v-model:isVisible="confirmDialogVisible"
+      :cancel-label="t('Cancel')"
+      :confirm-label="t('Delete')"
       :title="t('Confirm deletion')"
-      :confirmLabel="t('Delete')"
-      :cancelLabel="t('Cancel')"
-      @confirmClicked="confirmSubmit"
+      @confirm-clicked="confirmSubmit"
+      @cancel-clicked="confirmDialogVisible = false"
     />
   </div>
 </template>
 
-<script setup >
+<script setup>
 import { ref, computed, onMounted } from "vue"
 import { useI18n } from "vue-i18n"
-import { useRoute, useRouter } from "vue-router"
-import svc from "../../services/accessurlService"
+import { useRoute } from "vue-router"
+import { findById, deleteById } from "../../services/accessurlService"
 import Message from "primevue/message"
 
 import BaseInputText from "../../components/basecomponents/BaseInputText.vue"
 import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import BaseDialogConfirmCancel from "../../components/basecomponents/BaseDialogConfirmCancel.vue"
+import SectionHeader from "../../components/layout/SectionHeader.vue"
+import { useNotification } from "../../composables/notification"
 
 const { t } = useI18n()
 const route = useRoute()
-const router = useRouter()
+
+const notification = useNotification()
+
 const urlId = Number(route.params.id || 0)
 const urlText = ref(route.query.url || "")
 const confirmText = ref("")
 const loading = ref(false)
-const error = ref("")
 const notice = ref("")
 const confirmDialogVisible = ref(false)
 
@@ -69,34 +72,27 @@ const canDelete = computed(() => !!confirmText.value && confirmText.value === ur
 onMounted(async () => {
   if (!urlText.value && urlId) {
     try {
-      const data = await svc.getUrl(urlId)
+      const data = await findById(urlId)
       urlText.value = data.url || ""
     } catch (e) {
-      error.value = t("Unable to load URL data.")
+      notification.showErrorNotification(e)
     }
   }
 })
 
-function openConfirmDialog() {
-  confirmDialogVisible.value = true
-}
-
 async function confirmSubmit() {
   confirmDialogVisible.value = false
-  error.value = ""
   notice.value = ""
   try {
     loading.value = true
-    const secToken = (window.SEC_TOKEN || route.query.sec_token || "")
-    const res = await svc.deleteAccessUrl(urlId, confirmText.value, secToken)
-    notice.value = res.message || t("URL deleted successfully.")
-    if (res.redirectUrl) {
-      window.location.href = res.redirectUrl
-    } else {
-      router.push({ name: "AccessUrlsList" })
-    }
+    const secToken = window.SEC_TOKEN || route.query.sec_token || ""
+    const res = await deleteById(urlId, secToken)
+
+    notification.showSuccessNotification(t("URL deleted successfully."))
+
+    window.location.href = res.redirectUrl
   } catch (e) {
-    error.value = e?.message || (e?.response?.data?.error) || t("Failed to delete URL.")
+    notification.showErrorNotification(e)
   } finally {
     loading.value = false
   }

public/main/admin/access_urls.php

@@ -13,6 +13,7 @@
 use Chamilo\CoreBundle\Enums\ActionIcon;
 use Chamilo\CoreBundle\Enums\StateIcon;
 use Chamilo\CoreBundle\Framework\Container;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 $cidReset = true;
 require_once __DIR__.'/../inc/global.inc.php';
@@ -214,10 +215,17 @@
 
     if ($u->getId() !== 1) {
         // build a link to the Vue route that will open DeleteAccessUrl.vue
-        $urlEncoded = rawurlencode($u->getUrl());
-        $secTokenEncoded = rawurlencode($parameters['sec_token']);
-        $vueHref = api_get_path(WEB_PATH) . 'resources/accessurl/' . $u->getId() . '/delete?url=' . $urlEncoded . '&sec_token=' . $secTokenEncoded;
-        $rowActions .= '<a href="' . $vueHref . '">' .
+        $vueHref = Container::getRouter()->generate(
+            'access_url_delete',
+            [
+                'id' => $u->getId(),
+                'url' => $u->getUrl(),
+                'sec_token' => $parameters['sec_token'],
+            ],
+            UrlGeneratorInterface::ABSOLUTE_URL
+        );
+
+        $rowActions .= '<a href="'.$vueHref.'">' .
             Display::getMdiIcon('delete', 'ch-tool-icon', null, ICON_SIZE_SMALL, get_lang('Delete')) .
             '</a>';
     }

src/CoreBundle/Controller/IndexController.php

@@ -27,6 +27,7 @@ class IndexController extends BaseController
     #[Route('/catalogue/{slug}', name: 'catalogue', options: ['expose' => true], methods: ['GET', 'POST'])]
     #[Route('/resources/ccalendarevent', name: 'resources_ccalendarevent', methods: ['GET'])]
     #[Route('/resources/document/{nodeId}/manager', name: 'resources_filemanager', methods: ['GET'])]
+    #[Route('/resources/accessurl/{id}/delete', name: 'access_url_delete', methods: ['GET'])]
     #[Route('/account/home', name: 'chamilo_core_account_home', options: ['expose' => true])]
     #[Route('/social', name: 'chamilo_core_socialnetwork', options: ['expose' => true])]
     #[Route('/social/{vueRouting}', name: 'chamilo_core_socialnetwork_vue_entrypoint', requirements: ['vueRouting' => '.+'], options: ['expose' => true])]