Skip to content

Commit c7ee4d7

Browse files
wip
1 parent fbb1c90 commit c7ee4d7

File tree

1 file changed

+122
-80
lines changed

1 file changed

+122
-80
lines changed

client/src/components/Backup.vue

Lines changed: 122 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<script setup>
22
import { Listing, DropdownItem, Header, Button } from "@statamic/cms/ui";
3-
import { requireElevatedSession } from "@statamic/cms"
3+
import { requireElevatedSession } from "@statamic/cms";
44
import { useBackupStore } from "../store";
55
import { ref, watch } from "vue";
66
import { useResumable } from "../resumable";
77
8-
const props = defineProps(['chunkSize']);
8+
const props = defineProps(["chunkSize"]);
99
1010
const backupStore = useBackupStore();
1111
@@ -14,102 +14,144 @@ const listing = ref(null);
1414
const dropZone = ref(null);
1515
const browseTarget = ref(null);
1616
17-
const { files } = useResumable({ chunkSize: props.chunkSize ?? 2 * 1024 * 1024, dropZone, browseTarget, onFileUploaded: (file) => {
18-
listing.value.refresh();
19-
}});
17+
const { files } = useResumable({
18+
chunkSize: props.chunkSize ?? 2 * 1024 * 1024,
19+
dropZone,
20+
browseTarget,
21+
onFileUploaded: (file) => {
22+
listing.value.refresh();
23+
},
24+
});
2025
2126
backupStore.startPolling();
2227
23-
watch(() => backupStore.status, (newStatus, oldStatus) => {
28+
watch(
29+
() => backupStore.status,
30+
(newStatus, oldStatus) => {
31+
if (oldStatus === "initializing") return;
2432
if (newStatus !== oldStatus) {
25-
listing.value.refresh();
33+
listing.value.refresh();
2634
}
27-
});
28-
29-
30-
const restoreFrom = async (id) => {
31-
32-
try {
33-
await requireElevatedSession();
34-
35-
const { data } = await window.Statamic.$app.config.globalProperties.$axios.post(cp_url(`api/backups/restore/${id}`));
35+
}
36+
);
3637
37-
Statamic.$toast.info(__(data.message));
38-
} catch (e) {
39-
console.error(e);
38+
const withErrHandling = (fn) => async (params) => {
39+
return fn(params).catch((err) => {
40+
console.error(err);
4041
41-
if (error.response.data.message) {
42-
Statamic.$toast.error(message);
43-
} else {
44-
Statamic.$toast.error(__('statamic-backup::backup.restore.failed'));
45-
}
42+
if (err.response) {
43+
Statamic.$toast.error(err.response.data.message);
44+
} else {
45+
Statamic.$toast.error(err.message);
4646
}
47-
}
47+
});
48+
};
4849
49-
const queueBackup = async () => {
50-
try {
51-
backupStore.setStatus('backup_in_progress');
50+
const queueRestore = withErrHandling(async (id) => {
51+
await requireElevatedSession();
5252
53-
const { data } = await window.Statamic.$app.config.globalProperties.$axios.post(cp_url("api/backups"));
53+
const { data } =
54+
await window.Statamic.$app.config.globalProperties.$axios.post(
55+
cp_url(`api/backups/restore/${id}`)
56+
);
5457
55-
Statamic.$toast.info(__(data.message));
56-
listing.value.refresh();
57-
} catch (e) {
58-
console.error(e);
58+
Statamic.$toast.info(__(data.message));
59+
});
5960
60-
if (error.response.data.message) {
61-
Statamic.$toast.error(message);
62-
} else {
63-
Statamic.$toast.error(__('statamic-backup::backup.restore.failed'));
64-
}
65-
}
66-
}
61+
const queueBackup = withErrHandling(async () => {
62+
backupStore.setStatus("backup_in_progress");
6763
68-
const deleteBackup = async (id) => {
69-
try {
70-
await requireElevatedSession();
64+
const { data } =
65+
await window.Statamic.$app.config.globalProperties.$axios.post(
66+
cp_url("api/backups")
67+
);
7168
72-
const { data } = await window.Statamic.$app.config.globalProperties.$axios.delete(cp_url(`api/backups/${id}`));
69+
Statamic.$toast.info(__(data.message));
70+
listing.value.refresh();
71+
});
7372
74-
Statamic.$toast.info(__(data.message));
75-
listing.value.refresh();
76-
} catch (e) {
77-
console.error(e);
73+
const deleteBackup = withErrHandling(async (id) => {
74+
await requireElevatedSession();
7875
79-
if (error.response.data.message) {
80-
Statamic.$toast.error(message);
81-
} else {
82-
Statamic.$toast.error(__('statamic-backup::backup.destroy.failed'));
83-
}
84-
}
85-
}
76+
const { data } =
77+
await window.Statamic.$app.config.globalProperties.$axios.delete(
78+
cp_url(`api/backups/${id}`)
79+
);
8680
81+
Statamic.$toast.info(__(data.message));
82+
listing.value.refresh();
83+
});
8784
</script>
8885
8986
<template>
90-
<Header :icon="database" :title="__('statamic-backup::backup.title')">
91-
<Button variant="subtle" ref="browseTarget">{{ __("statamic-backup::backup.upload.label") }}</Button>
92-
<Button variant="primary" v-on:click="queueBackup"
93-
:disabled="!backupStore.abilities.backup.isPossible">{{ __("statamic-backup::backup.create") }}</Button>
94-
</Header>
95-
96-
<p v-for="file in files" :key="file.file.uniqueIdentifier" class="mb-2">
97-
<span>{{ file.file.fileName }}</span>
98-
<span v-if="file.status === 'uploading'"> - {{ Math.round(file.progress * 100) }}%</span>
99-
<span v-if="file.status === 'retrying'"> - {{ __('statamic-backup::backup.upload.retrying') }}</span>
100-
<span v-if="file.status === 'error'" class="text-red-600"> - {{ __('statamic-backup::backup.upload.error') }}</span>
101-
</p>
102-
103-
<Listing ref="listing" :allowSearch="false" :allowCustomizingColumns="false" :url="cp_url('api/backups')">
104-
<template #prepended-row-actions="{ row }">
105-
<DropdownItem v-if="backupStore.abilities.download.isPermitted"
106-
:text="__('statamic-backup::backup.download.label')"
107-
:href="`${cp_url('api/backups/download')}/${row.id}`" />
108-
<DropdownItem v-if="backupStore.abilities.restore.isPermitted"
109-
:disabled="!backupStore.abilities.restore.isPossible" @click="restoreFrom(row.id)"
110-
:text="__('statamic-backup::backup.restore.label')" />
111-
<DropdownItem v-if="backupStore.abilities.destroy.isPermitted" variant="destructive"
112-
@click="deleteBackup(row.id)" :text="__('statamic-backup::backup.destroy.label')" />
113-
</template>
114-
</Listing>
87+
<Header :icon="database" :title="__('statamic-backup::backup.title')">
88+
<Button variant="subtle" ref="browseTarget">{{
89+
__("statamic-backup::backup.upload.label")
90+
}}</Button>
91+
<Button
92+
variant="primary"
93+
v-on:click="queueBackup"
94+
:disabled="!backupStore.abilities.backup.isPossible"
95+
:loading="backupStore.status === 'backup_in_progress'"
96+
>
97+
{{ __("statamic-backup::backup.create") }}
98+
</Button>
99+
</Header>
100+
101+
<p v-for="file in files" :key="file.file.uniqueIdentifier" class="mb-2">
102+
<span>{{ file.file.fileName }}</span>
103+
<span v-if="file.status === 'uploading'">
104+
- {{ Math.round(file.progress * 100) }}%</span
105+
>
106+
<span v-if="file.status === 'retrying'">
107+
- {{ __("statamic-backup::backup.upload.retrying") }}</span
108+
>
109+
<span v-if="file.status === 'error'" class="text-red-600">
110+
- {{ __("statamic-backup::backup.upload.error") }}</span
111+
>
112+
</p>
113+
114+
<Listing
115+
ref="listing"
116+
:allowSearch="false"
117+
:allowCustomizingColumns="false"
118+
:url="cp_url('api/backups')"
119+
:columns="[
120+
{
121+
field: 'name',
122+
label: __('statamic-backup::backup.name'),
123+
visible: true,
124+
},
125+
{
126+
field: 'created_at',
127+
label: __('statamic-backup::backup.created_at'),
128+
visible: true,
129+
},
130+
{
131+
field: 'size',
132+
label: __('statamic-backup::backup.size'),
133+
visible: true,
134+
},
135+
]"
136+
>
137+
<template #prepended-row-actions="{ row }">
138+
<DropdownItem
139+
v-if="backupStore.abilities.download.isPermitted"
140+
:text="__('statamic-backup::backup.download.label')"
141+
:href="`${cp_url('api/backups/download')}/${row.id}`"
142+
/>
143+
<DropdownItem
144+
v-if="backupStore.abilities.restore.isPermitted"
145+
:disabled="!backupStore.abilities.restore.isPossible"
146+
v-on:click="queueRestore(row.id)"
147+
:text="__('statamic-backup::backup.restore.label')"
148+
/>
149+
<DropdownItem
150+
v-if="backupStore.abilities.destroy.isPermitted"
151+
variant="destructive"
152+
v-on:click="deleteBackup(row.id)"
153+
:text="__('statamic-backup::backup.destroy.label')"
154+
/>
155+
</template>
156+
</Listing>
115157
</template>

0 commit comments

Comments
 (0)