chore: migrate remaining pages to script setup (#7310)

frontend/pages/g/[groupSlug]/r/create/bulk.vue

@@ -49,7 +49,7 @@
                 </template>
               </v-text-field>
             </v-col>
-            <template v-if="showCatTags">
+            <template v-if="state.showCatTags">
               <v-col
                 cols="12"
                 xs="12"
@@ -115,14 +115,14 @@
               {{ $t('general.new') }}
             </BaseButton>
             <RecipeDialogBulkAdd
-              v-model="bulkDialog"
+              v-model="state.bulkDialog"
               class="mr-1 mr-sm-0 mb-1"
               @bulk-data="assignUrls"
             />
           </v-card-actions>
           <div class="px-0">
             <v-checkbox
-              v-model="showCatTags"
+              v-model="state.showCatTags"
               hide-details
               :label="$t('recipe.set-categories-and-tags')"
             />
@@ -154,7 +154,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { whenever } from "@vueuse/shared";
 import { useUserApi } from "~/composables/api";
 import { alert } from "~/composables/use-toast";
@@ -162,84 +162,67 @@ import RecipeOrganizerSelector from "~/components/Domain/Recipe/RecipeOrganizerS
 import type { ReportSummary } from "~/lib/api/types/reports";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 
-export default defineNuxtComponent({
-  components: { RecipeOrganizerSelector, RecipeDialogBulkAdd },
-  setup() {
-    const state = reactive({
-      error: false,
-      loading: false,
-      showCatTags: false,
-      bulkDialog: false,
-    });
-
-    whenever(
-      () => !state.showCatTags,
-      () => {
-        console.log("showCatTags changed");
-      },
-    );
-
-    const api = useUserApi();
-    const i18n = useI18n();
-
-    const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
-    const lockBulkImport = ref(false);
-
-    async function bulkCreate() {
-      if (bulkUrls.value.length === 0) {
-        return;
-      }
-
-      const { response } = await api.recipes.createManyByUrl({ imports: bulkUrls.value });
-
-      if (response?.status === 202) {
-        alert.success(i18n.t("recipe.bulk-import-process-has-started"));
-        lockBulkImport.value = true;
-      }
-      else {
-        alert.error(i18n.t("recipe.bulk-import-process-has-failed"));
-      }
-
-      fetchReports();
-    }
-
-    // =========================================================
-    // Reports
-
-    const reports = ref<ReportSummary[]>([]);
-
-    async function fetchReports() {
-      const { data } = await api.groupReports.getAll("bulk_import");
-      reports.value = data ?? [];
-    }
-
-    async function deleteReport(id: string) {
-      console.log(id);
-      const { response } = await api.groupReports.deleteOne(id);
-
-      if (response?.status === 200) {
-        fetchReports();
-      }
-      else {
-        alert.error(i18n.t("recipe.report-deletion-failed"));
-      }
-    }
-
-    fetchReports();
-
-    function assignUrls(urls: string[]) {
-      bulkUrls.value = urls.map(url => ({ url, categories: [], tags: [] }));
-    }
-
-    return {
-      assignUrls,
-      reports,
-      deleteReport,
-      bulkCreate,
-      bulkUrls,
-      lockBulkImport,
-      ...toRefs(state),
-    };
-  },
+const state = reactive({
+  showCatTags: false,
+  bulkDialog: false,
 });
+
+whenever(
+  () => !state.showCatTags,
+  () => {
+    console.log("showCatTags changed");
+  },
+);
+
+const api = useUserApi();
+const i18n = useI18n();
+
+const bulkUrls = ref([{ url: "", categories: [], tags: [] }]);
+const lockBulkImport = ref(false);
+
+async function bulkCreate() {
+  if (bulkUrls.value.length === 0) {
+    return;
+  }
+
+  const { response } = await api.recipes.createManyByUrl({ imports: bulkUrls.value });
+
+  if (response?.status === 202) {
+    alert.success(i18n.t("recipe.bulk-import-process-has-started"));
+    lockBulkImport.value = true;
+  }
+  else {
+    alert.error(i18n.t("recipe.bulk-import-process-has-failed"));
+  }
+
+  fetchReports();
+}
+
+// =========================================================
+// Reports
+
+const reports = ref<ReportSummary[]>([]);
+
+async function fetchReports() {
+  const { data } = await api.groupReports.getAll("bulk_import");
+  reports.value = data ?? [];
+}
+
+async function deleteReport(id: string) {
+  console.log(id);
+  const { response } = await api.groupReports.deleteOne(id);
+
+  if (response?.status === 200) {
+    fetchReports();
+  }
+  else {
+    alert.error(i18n.t("recipe.report-deletion-failed"));
+  }
+}
+
+fetchReports();
+
+function assignUrls(urls: string[]) {
+  bulkUrls.value = urls.map(url => ({ url, categories: [], tags: [] }));
+}
 </script>