Sharkey/packages/frontend/src/pages/settings/import-export.vue

188 lines
6.5 KiB
Vue
Raw Normal View History

<template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_m">
2023-01-06 02:56:33 +02:00
<FormSection first>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-pencil"></i> {{ i18n.ts._exportOrImport.allNotes }}</template>
2023-01-09 02:41:25 +02:00
<MkFolder>
2022-07-20 16:24:26 +03:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
2021-10-03 17:51:54 +03:00
</FormSection>
<FormSection>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-star"></i> {{ i18n.ts._exportOrImport.favoritedNotes }}</template>
2023-01-09 02:41:25 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
</FormSection>
2021-10-03 17:51:54 +03:00
<FormSection>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.followingList }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_s">
2023-01-09 02:41:25 +02:00
<MkFolder>
2023-01-06 02:56:33 +02:00
<template #label>{{ i18n.ts.export }}</template>
<template #icon><i class="ti ti-download"></i></template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_s">
2023-01-07 07:59:54 +02:00
<MkSwitch v-model="excludeMutingUsers">
2023-01-06 02:56:33 +02:00
{{ i18n.ts._exportOrImport.excludeMutingUsers }}
2023-01-07 07:59:54 +02:00
</MkSwitch>
<MkSwitch v-model="excludeInactiveUsers">
2023-01-06 02:56:33 +02:00
{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
2023-01-07 07:59:54 +02:00
</MkSwitch>
2023-01-06 02:56:33 +02:00
<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
</div>
2023-01-09 02:41:25 +02:00
</MkFolder>
<MkFolder>
2023-01-06 02:56:33 +02:00
<template #label>{{ i18n.ts.import }}</template>
<template #icon><i class="ti ti-upload"></i></template>
<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
2023-01-09 02:41:25 +02:00
</MkFolder>
2023-01-06 02:56:33 +02:00
</div>
2021-10-03 17:51:54 +03:00
</FormSection>
<FormSection>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-users"></i> {{ i18n.ts._exportOrImport.userLists }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_s">
2023-01-09 02:41:25 +02:00
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
2023-01-06 02:56:33 +02:00
</div>
2021-10-03 17:51:54 +03:00
</FormSection>
<FormSection>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.muteList }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_s">
2023-01-09 02:41:25 +02:00
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
2023-01-06 02:56:33 +02:00
</div>
2021-10-03 17:51:54 +03:00
</FormSection>
<FormSection>
2023-01-01 09:57:13 +02:00
<template #label><i class="ti ti-user-off"></i> {{ i18n.ts._exportOrImport.blockingList }}</template>
2023-01-06 06:40:17 +02:00
<div class="_gaps_s">
2023-01-09 02:41:25 +02:00
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
<MkFolder>
2023-01-06 02:56:33 +02:00
<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>
2023-01-09 02:41:25 +02:00
</MkFolder>
2023-01-06 02:56:33 +02:00
</div>
2021-10-03 17:51:54 +03:00
</FormSection>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import MkButton from '@/components/MkButton.vue';
2021-11-11 19:02:25 +02:00
import FormSection from '@/components/form/section.vue';
2023-01-09 02:41:25 +02:00
import MkFolder from '@/components/MkFolder.vue';
2023-01-07 07:59:54 +02:00
import MkSwitch from '@/components/MkSwitch.vue';
2021-11-11 19:02:25 +02:00
import * as os from '@/os';
import { selectFile } from '@/scripts/select-file';
2021-12-09 18:22:35 +02:00
import { i18n } from '@/i18n';
import { definePageMetadata } from '@/scripts/page-metadata';
const excludeMutingUsers = ref(false);
const excludeInactiveUsers = ref(false);
const onExportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.exportRequested,
});
};
const onImportSuccess = () => {
os.alert({
type: 'info',
text: i18n.ts.importRequested,
});
};
const onError = (ev) => {
os.alert({
type: 'error',
text: ev.message,
});
};
const exportNotes = () => {
os.api('i/export-notes', {}).then(onExportSuccess).catch(onError);
};
const exportFavorites = () => {
os.api('i/export-favorites', {}).then(onExportSuccess).catch(onError);
};
const exportFollowing = () => {
os.api('i/export-following', {
excludeMuting: excludeMutingUsers.value,
excludeInactive: excludeInactiveUsers.value,
})
.then(onExportSuccess).catch(onError);
};
const exportBlocking = () => {
os.api('i/export-blocking', {}).then(onExportSuccess).catch(onError);
};
const exportUserLists = () => {
os.api('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
};
const exportMuting = () => {
os.api('i/export-mute', {}).then(onExportSuccess).catch(onError);
};
const importFollowing = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
os.api('i/import-following', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importUserLists = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
os.api('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importMuting = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
os.api('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const importBlocking = async (ev) => {
const file = await selectFile(ev.currentTarget ?? ev.target);
os.api('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
};
const headerActions = $computed(() => []);
const headerTabs = $computed(() => []);
definePageMetadata({
title: i18n.ts.importAndExport,
2022-12-20 01:35:49 +02:00
icon: 'ti ti-package',
});
</script>
2021-10-03 17:51:54 +03:00
<style module>
.button {
margin-right: 16px;
}
</style>