mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-05-03 12:06:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request 'Disable import/export buttons when action is in progress' (#47) from import-buttons-feedback into dev

Browse source 
Reviewed-on: https://codeberg.org/yeentown/barkey/pulls/47
Reviewed-by: zima <zima@noreply.codeberg.org>
This commit is contained in:
zima 2025-01-14 01:19:54 +00:00
commit 4bfe849810
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> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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>
<MkFolder v-if="$i && $i.policies.canImportNotes"> <MkFolder v-if="$i && $i.policies.canImportNotes">
<template #label>{{ i18n.ts.import }}</template> <template #label>{{ i18n.ts.import }}</template>
@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="Instagram">Instagram</option> <option value="Instagram">Instagram</option>
<option value="Facebook">Facebook</option> <option value="Facebook">Facebook</option>
</MkRadios> </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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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> </MkFolder>
</FormSection> </FormSection>
<FormSection> <FormSection>
@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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> </MkFolder>
</FormSection> </FormSection>
<FormSection> <FormSection>
@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="excludeInactiveUsers"> <MkSwitch v-model="excludeInactiveUsers">
{{ i18n.ts._exportOrImport.excludeInactiveUsers }} {{ i18n.ts._exportOrImport.excludeInactiveUsers }}
</MkSwitch> </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> </div>
</MkFolder> </MkFolder>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing"> <MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing">
@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSwitch v-model="withReplies"> <MkSwitch v-model="withReplies">
{{ i18n.ts._exportOrImport.withReplies }} {{ i18n.ts._exportOrImport.withReplies }}
</MkSwitch> </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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -76,12 +76,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists"> <MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists">
<template #label>{{ i18n.ts.import }}</template> <template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -91,12 +91,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting"> <MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting">
<template #label>{{ i18n.ts.import }}</template> <template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -106,12 +106,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking"> <MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking">
<template #label>{{ i18n.ts.import }}</template> <template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -121,12 +121,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkFolder> <MkFolder>
<template #label>{{ i18n.ts.export }}</template> <template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></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>
<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas"> <MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas">
<template #label>{{ i18n.ts.import }}</template> <template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></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> </MkFolder>
</div> </div>
</FormSection> </FormSection>
@ -152,6 +152,7 @@ const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false); const excludeInactiveUsers = ref(false);
const noteType = ref(null); const noteType = ref(null);
const withReplies = ref(defaultStore.state.defaultWithReplies); const withReplies = ref(defaultStore.state.defaultWithReplies);
const disableButtons = ref(false);
const onExportSuccess = () => { const onExportSuccess = () => {
os.alert({ 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 = () => { 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 = () => { 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 = () => { 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 = () => { const exportFollowing = () => {
disableButtons.value = true;
misskeyApi('i/export-following', { misskeyApi('i/export-following', {
excludeMuting: excludeMutingUsers.value, excludeMuting: excludeMutingUsers.value,
excludeInactive: excludeInactiveUsers.value, excludeInactive: excludeInactiveUsers.value,
}) })
.then(onExportSuccess).catch(onError); .then(onExportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
}; };
const exportBlocking = () => { 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 = () => { 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 = () => { 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 = () => { 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 importFollowing = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); const file = await selectFile(ev.currentTarget ?? ev.target);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-following', { misskeyApi('i/import-following', {
fileId: file.id, fileId: file.id,
withReplies: withReplies.value, withReplies: withReplies.value,
}).then(onImportSuccess).catch(onError); }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
}; };
const importNotes = async (ev) => { const importNotes = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); const file = await selectFile(ev.currentTarget ?? ev.target);
clearTimeout(timer);
disableButtons.value = true;
misskeyApi('i/import-notes', { misskeyApi('i/import-notes', {
fileId: file.id, fileId: file.id,
type: noteType.value, type: noteType.value,
}).then(onImportSuccess).catch(onError); }).then(onImportSuccess).catch(onError).finally(() => { disableButtons.value = false; });
}; };
const importUserLists = async (ev) => { const importUserLists = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); 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 importMuting = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); 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 importBlocking = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); 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 importAntennas = async (ev) => {
const timer = tempDisable();
const file = await selectFile(ev.currentTarget ?? ev.target); 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(() => []); const headerActions = computed(() => []);