merge: upd: remove file on cleaner, fix load more not working (!699)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/699

Closes #762

Approved-by: dakkar <dakkar@thenautilus.net>
Approved-by: Hazelnoot <acomputerdog@gmail.com>
This commit is contained in:
Hazelnoot 2024-10-20 12:14:40 +00:00
commit 5482aac3aa

View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option> <option v-for="x in sortOptions" :key="x.value" :value="x.value">{{ x.displayName }}</option>
</MkSelect> </MkSelect>
<div v-if="!fetching"> <div v-if="!fetching">
<MkPagination v-slot="{items}" :pagination="pagination"> <MkPagination v-slot="{items}" ref="paginationComponent" :pagination="pagination">
<div class="_gaps"> <div class="_gaps">
<div <div
v-for="file in items" :key="file.id" v-for="file in items" :key="file.id"
@ -48,8 +48,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, watch, type StyleValue } from 'vue'; import { computed, ref, shallowRef, watch, type StyleValue } from 'vue';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import * as Misskey from 'misskey-js';
import type { MenuItem } from '@/types/menu.js';
import * as os from '@/os.js'; import * as os from '@/os.js';
import { misskeyApi } from '@/scripts/misskey-api.js'; import { misskeyApi } from '@/scripts/misskey-api.js';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
@ -58,13 +60,16 @@ import { i18n } from '@/i18n.js';
import bytes from '@/filters/bytes.js'; import bytes from '@/filters/bytes.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkSelect from '@/components/MkSelect.vue'; import MkSelect from '@/components/MkSelect.vue';
import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js'; import { copyToClipboard } from '@/scripts/copy-to-clipboard.js';
const paginationComponent = shallowRef<InstanceType<typeof MkPagination>>();
const sortMode = ref('+size'); const sortMode = ref('+size');
const pagination = { const pagination = {
endpoint: 'drive/files' as const, endpoint: 'drive/files' as const,
limit: 10, limit: 10,
params: computed(() => ({ sort: sortMode.value })), params: computed(() => ({ sort: sortMode.value })),
offsetMode: true,
}; };
const sortOptions = [ const sortOptions = [
@ -109,6 +114,46 @@ function genUsageBar(fsize: number): StyleValue {
}; };
} }
async function deleteFile(file: Misskey.entities.DriveFile) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.tsx.driveFileDeleteConfirm({ name: file.name }),
});
if (canceled) return;
misskeyApi('drive/files/delete', {
fileId: file.id,
});
if (paginationComponent.value) {
paginationComponent.value.items.delete(file.id);
}
}
function getDriveFileMenu(file: Misskey.entities.DriveFile): MenuItem[] {
const menuItems: MenuItem[] = [];
menuItems.push({
text: i18n.ts.copyUrl,
icon: 'ti ti-link',
action: () => copyToClipboard(file.url),
}, {
type: 'a',
href: file.url,
target: '_blank',
text: i18n.ts.download,
icon: 'ti ti-download',
download: file.name,
}, { type: 'divider' }, {
text: i18n.ts.delete,
icon: 'ti ti-trash',
danger: true,
action: () => deleteFile(file),
});
return menuItems;
}
function onClick(ev: MouseEvent, file) { function onClick(ev: MouseEvent, file) {
os.popupMenu(getDriveFileMenu(file), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined); os.popupMenu(getDriveFileMenu(file), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
} }