puniko/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

client: use combined drive endpoint

Browse source
This commit is contained in:
Johann150 2022-12-22 17:55:13 +01:00
parent d96070bc80
commit c983c4860c
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 55 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

172
packages/client/src/components/drive.vue
View file

@ -35,27 +35,35 @@
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
> >
<div ref="contents" class="contents"> <MkPagination
<MkPagination ref="paginationElem"
ref="foldersPaginationElem" :pagination="pagination"
:pagination="foldersPagination" class="contents"
class="folders" >
@loaded="foldersLoading = false" <template #empty>
> <p v-if="folder == null" class="empty"><strong>{{ i18n.ts.emptyDrive }}</strong></p>
<template #empty> <p v-else class="empty">{{ i18n.ts.emptyFolder }}</p>
<!-- </template>
Don't display anything here if there are no folders,
there is a separate check if both paginations are empty.
-->
{{ null }}
</template>
<template #default="{ items: folders }"> <template #default="{ items }">
<XFolder <template v-for="(f, i) in items">
v-for="(f, i) in folders" <XFile
v-if="'size' in f"
:key="f.id" :key="f.id"
v-anim="i" v-anim="i"
class="folder" class="item"
:file="f"
:select-mode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === f.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<XFolder
v-else
:key="f.id"
v-anim="i"
class="item"
:folder="f" :folder="f"
:select-mode="select === 'folder'" :select-mode="select === 'folder'"
:is-selected="selectedFolders.some(x => x.id === f.id)" :is-selected="selectedFolders.some(x => x.id === f.id)"
@ -67,46 +75,9 @@
@dragstart="isDragSource = true" @dragstart="isDragSource = true"
@dragend="isDragSource = false" @dragend="isDragSource = false"
/> />
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
</template> </template>
</MkPagination> </template>
<MkPagination </MkPagination>
ref="filesPaginationElem"
:pagination="filesPagination"
class="files"
@loaded="filesLoading = false"
>
<template #empty>
<!--
Don't display anything here if there are no files,
there is a separate check if both paginations are empty.
-->
{{ null }}
</template>
<template #default="{ items: files }">
<XFile
v-for="(file, i) in files"
:key="file.id"
v-anim="i"
class="file"
:file="file"
:select-mode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
</template>
</MkPagination>
<div v-if="empty" class="empty">
<p v-if="folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong></p>
<p v-else>{{ i18n.ts.emptyFolder }}</p>
</div>
</div>
</div> </div>
<div v-if="draghover" class="dropzone"></div> <div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/> <input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
@ -145,13 +116,7 @@ const emit = defineEmits<{
(ev: 'open-folder', v: foundkey.entities.DriveFolder): void; (ev: 'open-folder', v: foundkey.entities.DriveFolder): void;
}>(); }>();
let foldersPaginationElem = $ref<InstanceType<typeof MkPagination>>(); let paginationElem = $ref<InstanceType<typeof MkPagination>>();
let filesPaginationElem = $ref<InstanceType<typeof MkPagination>>();
let foldersLoading = $ref<boolean>(true);
let filesLoading = $ref<boolean>(true);
const empty = $computed(() => !foldersLoading && !filesLoading
&& foldersPaginationElem?.items.length === 0 && filesPaginationElem?.items.length === 0);
let fileInput = $ref<HTMLInputElement>(); let fileInput = $ref<HTMLInputElement>();
@ -434,10 +399,6 @@ function chooseFolder(folderToChoose: foundkey.entities.DriveFolder) {
} }
function move(target?: string | foundkey.entities.DriveFolder) { function move(target?: string | foundkey.entities.DriveFolder) {
// reset loading state
foldersLoading = true;
filesLoading = true;
if (!target) { if (!target) {
goRoot(); goRoot();
return; return;
@ -466,13 +427,13 @@ function addFolder(folderToAdd: foundkey.entities.DriveFolder, unshift = false)
const current = folder?.id ?? null; const current = folder?.id ?? null;
if (current !== folderToAdd.parentId) return; if (current !== folderToAdd.parentId) return;
const exist = foldersPaginationElem.items.some(f => f.id === folderToAdd.id); const exist = paginationElem.items.some(f => f.id === folderToAdd.id);
if (exist) { if (exist) {
foldersPaginationElem.updateItem(folderToAdd.id, () => folderToAdd); paginationElem.updateItem(folderToAdd.id, () => folderToAdd);
} else if (unshift) { } else if (unshift) {
foldersPaginationElem.prepend(folderToAdd); paginationElem.prepend(folderToAdd);
} else { } else {
foldersPaginationElem.append(folderToAdd); paginationElem.append(folderToAdd);
} }
} }
@ -480,24 +441,24 @@ function addFile(fileToAdd: foundkey.entities.DriveFile, unshift = false) {
const current = folder?.id ?? null; const current = folder?.id ?? null;
if (current !== fileToAdd.folderId) return; if (current !== fileToAdd.folderId) return;
const exist = filesPaginationElem.items.some(f => f.id === fileToAdd.id); const exist = paginationElem.items.some(f => f.id === fileToAdd.id);
if (exist) { if (exist) {
filesPaginationElem.updateItem(fileToAdd.id, () => fileToAdd); paginationElem.updateItem(fileToAdd.id, () => fileToAdd);
} else if (unshift) { } else if (unshift) {
filesPaginationElem.prepend(fileToAdd); paginationElem.prepend(fileToAdd);
} else { } else {
filesPaginationElem.append(fileToAdd); paginationElem.append(fileToAdd);
} }
} }
function removeFolder(folderToRemove: foundkey.entities.DriveFolder | string): void { function removeFolder(folderToRemove: foundkey.entities.DriveFolder | string): void {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove; const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
foldersPaginationElem.removeItem(item => item.id === folderIdToRemove); paginationElem.removeItem(item => item.id === folderIdToRemove);
} }
function removeFile(fileToRemove: foundkey.entities.DriveFile | string): void { function removeFile(fileToRemove: foundkey.entities.DriveFile | string): void {
const fileIdToRemove = typeof fileToRemove === 'object' ? fileToRemove.id : fileToRemove; const fileIdToRemove = typeof fileToRemove === 'object' ? fileToRemove.id : fileToRemove;
filesPaginationElem.removeItem(item => item.id === fileIdToRemove); paginationElem.removeItem(item => item.id === fileIdToRemove);
} }
function goRoot() { function goRoot() {
@ -509,23 +470,14 @@ function goRoot() {
emit('move-root'); emit('move-root');
} }
const foldersPagination = { const pagination = {
endpoint: 'drive/folders' as const, endpoint: 'drive/show' as const,
limit: 30, limit: 30,
params: computed(() => ({ params: computed(() => ({
folderId: folder?.id ?? null, folderId: folder?.id ?? null,
})), })),
}; };
const filesPagination = {
endpoint: 'drive/files' as const,
limit: 30,
params: computed(() => ({
folderId: folder?.id ?? null,
type: props.type,
})),
};
function getMenu() { function getMenu() {
return [{ return [{
type: 'switch', type: 'switch',
@ -669,37 +621,23 @@ onBeforeUnmount(() => {
} }
> .contents { > .contents {
display: flex;
flex-wrap: wrap;
> .folders, > .item {
> .files { flex-grow: 1;
display: flex; width: 128px;
flex-wrap: wrap; margin: 4px;
box-sizing: border-box;
> .folder,
> .file {
flex-grow: 1;
width: 128px;
margin: 4px;
box-sizing: border-box;
}
> .padding {
flex-grow: 1;
pointer-events: none;
width: 128px + 8px;
}
} }
}
> .empty { > .empty {
padding: 16px; padding: 16px;
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
opacity: 0.5; opacity: 0.5;
margin: 0;
> p {
margin: 0;
}
}
} }
} }