wip

Author: NeoIsRecursive

client/package.json

@@ -2,7 +2,7 @@
   "name": "@statamic-backup/client",
   "type": "module",
   "scripts": {
-    "dev": "vite build --watch",
+    "dev": "vite build --watch --mode development",
     "build": "vite build"
   },
   "devDependencies": {

client/src/components/Backup.vue

@@ -2,11 +2,22 @@
 import { Listing, DropdownItem, Header, Button } from "@statamic/cms/ui";
 import { requireElevatedSession } from "@statamic/cms"
 import { useBackupStore } from "../store";
+import { ref, useTemplateRef } from "vue";
+import { useResumable } from "../resumable";
+
+const props = defineProps(['chunkSize']);
 
 const backupStore = useBackupStore();
 
+const dropZone = useTemplateRef("dropZone");
+const browseTarget = ref(null);
+
+const { files } = useResumable({ chunkSize: props.chunkSize ?? 2 * 1024 * 1024, dropZone, browseTarget });
+
 backupStore.startPolling();
 
+
+
 const restoreFrom = async (id) => {
 
     try {
@@ -44,12 +55,40 @@ const queueBackup = async () => {
     }
 }
 
+const deleteBackup = async (id) => {
+    try {
+        await requireElevatedSession();
+
+        const { data } = await window.Statamic.$app.config.globalProperties.$axios.delete(cp_url(`api/backups/${id}`));
+
+        Statamic.$toast.info(__(data.message));
+    } catch (e) {
+        console.error(e);
+
+        if (error.response.data.message) {
+            Statamic.$toast.error(message);
+        } else {
+            Statamic.$toast.error(__('statamic-backup::backup.destroy.failed'));
+        }
+    }
+}
+
 </script>
+
 <template>
     <Header :icon="database" :title="__('statamic-backup::backup.title')">
-        <Button icon="save" variant="primary" v-on:click="queueBackup" :disabled="!backupStore.abilities.backup.isPossible">{{ __("statamic-backup::backup.create") }}</Button>
+        <Button variant="subtle" ref="browseTarget">{{ __("statamic-backup::backup.upload.label") }}</Button>
+        <Button variant="primary" v-on:click="queueBackup"
+            :disabled="!backupStore.abilities.backup.isPossible">{{ __("statamic-backup::backup.create") }}</Button>
     </Header>
 
+    <p v-for="file in files" :key="file.file.uniqueIdentifier" class="mb-2">
+        <span>{{ file.file.fileName }}</span>
+        <span v-if="file.status === 'uploading'"> - {{ Math.round(file.progress * 100) }}%</span>
+        <span v-if="file.status === 'retrying'"> - {{ __('statamic-backup::backup.upload.retrying') }}</span>
+        <span v-if="file.status === 'error'" class="text-red-600"> - {{ __('statamic-backup::backup.upload.error') }}</span>
+    </p>
+
     <Listing :allowSearch="false" :allowCustomizingColumns="false" :url="cp_url('api/backups')">
         <template #prepended-row-actions="{ row }">
             <DropdownItem v-if="backupStore.abilities.download.isPermitted"
@@ -58,8 +97,8 @@ const queueBackup = async () => {
             <DropdownItem v-if="backupStore.abilities.restore.isPermitted"
                 :disabled="!backupStore.abilities.restore.isPossible" @click="restoreFrom(row.id)"
                 :text="__('statamic-backup::backup.restore.label')" />
-            <DropdownItem v-if="backupStore.abilities.destroy.isPermitted" :dangerous="true"
-                @click="() => console.log(row.id, row.name)" :text="__('statamic-backup::backup.destroy.label')" />
+            <DropdownItem v-if="backupStore.abilities.destroy.isPermitted" variant="destructive"
+                @click="deleteBackup(row.id)" :text="__('statamic-backup::backup.destroy.label')" />
         </template>
     </Listing>
 </template>