keith/barkey
0
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey synced 2025-03-23 17:57:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Disable import/export buttons when action is in progress

Browse source
This commit is contained in:
~keith 2025-01-13 16:43:49 -05:00
parent e2339ca32e
commit 987ad20f74
No known key found for this signature in database
1 changed files with 63 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
packages/frontend/src/pages/settings/import-export.vue
View file

@ -11,7 +11,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && $i.policies.canImportNotes">
<template #label>{{ i18n.ts.import }}</template>
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option>
</MkRadios>
<MkButton primary :class="$style.button" inline @click="importNotes($event)"><i class="ph-upload ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importNotes($event)"><i class="ph-upload ph-bold ph-lg"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</FormSection>
<FormSection>
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
</FormSection>
<FormSection>
@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="excludeInactiveUsers">
{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</div>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing">
@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="withReplies">
{{ i18n.ts._exportOrImport.withReplies }}
</MkSwitch>
<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -76,12 +76,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -91,12 +91,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -106,12 +106,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -121,12 +121,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder>
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
<MkButton primary :class="$style.button" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas">
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
<MkButton primary :class="$style.button" :disabled="disableButtons" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
</MkFolder>
</div>
</FormSection>
@ -152,6 +152,7 @@ const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false);
const noteType = ref(null);
const withReplies = ref(defaultStore.state.defaultWithReplies);
const disableButtons = ref(false);
const onExportSuccess = () => {
os.alert({
@ -174,76 +175,110 @@ const onError = (ev) => {
});
};
// HACK: purely theatrical lockout delay when the file picker is opened, because we actually can't tell
// if it was canceled, and file upload can take a while. this is stupid and gets in the user's way if
// they accidentally cancel out, but it's better than them spamming the import button 50 times
const tempDisable = () => {
disableButtons.value = true;
return setTimeout(() => { disableButtons.value = false; }, 10000);
};
const exportNotes = () => {
misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportFavorites = () => {
misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportClips = () => {
misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportFollowing = () => {
disableButtons.value = true;
misskeyApi('i/export-following', {
excludeMuting: excludeMutingUsers.value,
excludeInactive: excludeInactiveUsers.value,
})
.then(onExportSuccess).catch(onError);
.then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportBlocking = () => {
misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportUserLists = () => {
misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportMuting = () => {
misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const exportAntennas = () => {
misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
disableButtons.value = true;
misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importFollowing = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-following', {
fileId: file.id,
withReplies: withReplies.value,
}).then(onImportSuccess).catch(onError);
}).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importNotes = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-notes', {
fileId: file.id,
type: noteType.value,
}).then(onImportSuccess).catch(onError);
}).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importUserLists = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importMuting = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importBlocking = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const importAntennas = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target);
misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
};
const headerActions = computed(() => []);