mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-28 08:04:39 +02:00
fix processing spinner and search filtering
This commit is contained in:
parent
8850189771
commit
636df9e14c
@ -1,71 +1,76 @@
|
||||
<template>
|
||||
<tr
|
||||
v-show="!/^\./.test(entry.name) || settings?.directoryView?.showHidden"
|
||||
v-if="settings.directoryView?.view === 'list'"
|
||||
@dblclick="doubleClickCallback"
|
||||
class="hover:!bg-red-600/10"
|
||||
>
|
||||
<td class="flex items-center gap-1 !pl-1">
|
||||
<div :style="{ width: `${24 * level}px` }"></div>
|
||||
<div class="relative w-6">
|
||||
<component :is="icon" class="size-icon icon-default" />
|
||||
<LinkIcon v-if="entry.type === 'link'" class="w-2 h-2 absolute right-0 bottom-0 text-default" />
|
||||
</div>
|
||||
<button v-if="directoryLike" @click.stop="showEntries = !showEntries">
|
||||
<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
|
||||
<ChevronUpIcon v-else class="size-icon icon-default" />
|
||||
</button>
|
||||
<div>{{ entry.name }}</div>
|
||||
<div v-if="entry.type === 'link'" class="inline-flex gap-1 items-center">
|
||||
<div class="inline relative">
|
||||
<ArrowNarrowRightIcon class="text-default size-icon-sm inline" />
|
||||
<XIcon
|
||||
v-if="entry.target?.broken"
|
||||
class="icon-danger size-icon-sm absolute inset-x-0 bottom-0"
|
||||
/>
|
||||
<template v-if="settings.directoryView?.view === 'list'">
|
||||
<tr v-show="show || showEntries" @dblclick="doubleClickCallback" class="hover:!bg-red-600/10">
|
||||
<td class="flex items-center gap-1 !pl-1">
|
||||
<div :style="{ width: `${24 * level}px` }"></div>
|
||||
<div class="relative w-6">
|
||||
<component :is="icon" class="size-icon icon-default" />
|
||||
<LinkIcon v-if="entry.type === 'link'" class="w-2 h-2 absolute right-0 bottom-0 text-default" />
|
||||
</div>
|
||||
<div>{{ entry.target?.rawPath ?? '' }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="settings?.directoryView?.cols?.mode" class="font-mono">{{ entry.modeStr }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.owner">{{ entry.owner }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.group">{{ entry.group }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.size">{{ entry.sizeHuman }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.ctime">{{ entry.ctime?.toLocaleString() ?? '-' }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.mtime">{{ entry.mtime?.toLocaleString() ?? '-' }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.atime">{{ entry.atime?.toLocaleString() ?? '-' }}</td>
|
||||
</tr>
|
||||
<button v-if="directoryLike" @click.stop="() => showEntries = !showEntries">
|
||||
<ChevronDownIcon v-if="!showEntries" class="size-icon icon-default" />
|
||||
<ChevronUpIcon v-else class="size-icon icon-default" />
|
||||
</button>
|
||||
<div>{{ entry.name }}</div>
|
||||
<div v-if="entry.type === 'link'" class="inline-flex gap-1 items-center">
|
||||
<div class="inline relative">
|
||||
<ArrowNarrowRightIcon class="text-default size-icon-sm inline" />
|
||||
<XIcon
|
||||
v-if="entry.target?.broken"
|
||||
class="icon-danger size-icon-sm absolute inset-x-0 bottom-0"
|
||||
/>
|
||||
</div>
|
||||
<div>{{ entry.target?.rawPath ?? '' }}</div>
|
||||
</div>
|
||||
</td>
|
||||
<td v-if="settings?.directoryView?.cols?.mode" class="font-mono">{{ entry.modeStr }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.owner">{{ entry.owner }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.group">{{ entry.group }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.size" class="text-right">{{ entry.sizeHuman }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.ctime">{{ entry.ctime?.toLocaleString() ?? '-' }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.mtime">{{ entry.mtime?.toLocaleString() ?? '-' }}</td>
|
||||
<td v-if="settings?.directoryView?.cols?.atime">{{ entry.atime?.toLocaleString() ?? '-' }}</td>
|
||||
</tr>
|
||||
<component
|
||||
:show="show || showEntries"
|
||||
:is="DirectoryEntryList"
|
||||
v-if="directoryLike && showEntries"
|
||||
:path="entry.path"
|
||||
:isChild="true"
|
||||
:inheritedSortCallback="inheritedSortCallback"
|
||||
:searchFilterRegExp="searchFilterRegExp"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@startProcessing="(...args) => $emit('startProcessing', ...args)"
|
||||
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
|
||||
ref="directoryViewRef"
|
||||
:level="level + 1"
|
||||
/>
|
||||
</template>
|
||||
<div
|
||||
v-else
|
||||
v-show="!/^\./.test(entry.name) || settings?.directoryView?.showHidden"
|
||||
v-show="show"
|
||||
@dblclick="doubleClickCallback"
|
||||
class="flex flex-col items-center w-20 overflow-hidden"
|
||||
>
|
||||
<div class="relative w-20">
|
||||
<component :is="icon" class="icon-default w-20 h-auto" />
|
||||
<div :class="[directoryLike ? 'right-3 bottom-5' : 'right-5 bottom-3', 'inline absolute']" :title="`-> ${entry.target?.rawPath ?? '?'}`">
|
||||
<LinkIcon v-if="entry.type === 'link'" :class="[entry.target?.broken ? 'text-red-300 dark:text-red-800' : 'text-gray-100 dark:text-gray-900','w-4 h-auto']" />
|
||||
<div
|
||||
:class="[directoryLike ? 'right-3 bottom-5' : 'right-5 bottom-3', 'inline absolute']"
|
||||
:title="`-> ${entry.target?.rawPath ?? '?'}`"
|
||||
>
|
||||
<LinkIcon
|
||||
v-if="entry.type === 'link'"
|
||||
:class="[entry.target?.broken ? 'text-red-300 dark:text-red-800' : 'text-gray-100 dark:text-gray-900', 'w-4 h-auto']"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center w-full" style="overflow-wrap: break-word;">{{ entry.name }}</div>
|
||||
</div>
|
||||
<component
|
||||
:is="DirectoryEntryList"
|
||||
v-if="directoryLike && showEntries"
|
||||
:path="entry.path"
|
||||
:isChild="true"
|
||||
:inheritedSortCallback="inheritedSortCallback"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@startProcessing="(...args) => $emit('startProcessing', ...args)"
|
||||
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
|
||||
ref="directoryViewRef"
|
||||
:level="level + 1"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, inject, watch } from 'vue';
|
||||
import { ref, inject, watch, nextTick } from 'vue';
|
||||
import { DocumentIcon, FolderIcon, LinkIcon, DocumentRemoveIcon, ArrowNarrowRightIcon, XIcon, ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/solid';
|
||||
import { settingsInjectionKey } from '../keys';
|
||||
import DirectoryEntryList from './DirectoryEntryList.vue';
|
||||
@ -74,6 +79,8 @@ export default {
|
||||
name: 'DirectoryEntry',
|
||||
props: {
|
||||
entry: Object,
|
||||
show: Boolean,
|
||||
searchFilterRegExp: RegExp,
|
||||
inheritedSortCallback: {
|
||||
type: Function,
|
||||
required: false,
|
||||
@ -119,6 +126,7 @@ export default {
|
||||
doubleClickCallback,
|
||||
getEntries,
|
||||
DirectoryEntryList,
|
||||
nextTick,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -1,22 +1,35 @@
|
||||
<template>
|
||||
<DirectoryEntry
|
||||
v-for="entry, index in entries"
|
||||
:key="entry.path"
|
||||
:entry="entry"
|
||||
:inheritedSortCallback="sortCallback"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@sortEntries="sortEntries"
|
||||
@updateStats="emitStats"
|
||||
@startProcessing="(...args) => $emit('startProcessing', ...args)"
|
||||
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
|
||||
ref="entryRefs"
|
||||
:level="level"
|
||||
/>
|
||||
<template v-for="entry, index in entries" :key="entry.path">
|
||||
<DirectoryEntry
|
||||
:show="entryFilterCallback(entry)"
|
||||
:entry="entry"
|
||||
:inheritedSortCallback="sortCallback"
|
||||
:searchFilterRegExp="searchFilterRegExp"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@sortEntries="sortEntries"
|
||||
@updateStats="emitStats"
|
||||
@startProcessing="(...args) => $emit('startProcessing', ...args)"
|
||||
@stopProcessing="(...args) => $emit('stopProcessing', ...args)"
|
||||
ref="entryRefs"
|
||||
:level="level"
|
||||
/>
|
||||
</template>
|
||||
<tr
|
||||
v-if="show && entries.reduce((sum, entry) => entryFilterCallback(entry) ? sum + 1 : sum, 0) === 0"
|
||||
>
|
||||
<td
|
||||
:colspan="Object.values(settings?.directoryView?.cols ?? {}).reduce((sum, current) => current ? sum + 1 : sum, 1) ?? 100"
|
||||
class="!pl-1 text-muted text-sm"
|
||||
>
|
||||
<div class="inline-block" :style="{ width: `${24 * level}px` }"></div>
|
||||
<div class="inline-block">No entries.</div>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, computed, inject, watch } from 'vue';
|
||||
import { ref, reactive, computed, inject, watch, onBeforeUnmount, onMounted } from 'vue';
|
||||
import { useSpawn, errorString, errorStringHTML, canonicalPath } from '@45drives/cockpit-helpers';
|
||||
import { notificationsInjectionKey, settingsInjectionKey } from '../keys';
|
||||
import DirectoryEntry from './DirectoryEntry.vue';
|
||||
@ -25,6 +38,12 @@ export default {
|
||||
name: 'DirectoryEntryList',
|
||||
props: {
|
||||
path: String,
|
||||
searchFilterRegExp: RegExp,
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: true,
|
||||
},
|
||||
sortCallback: {
|
||||
type: Function,
|
||||
required: false,
|
||||
@ -52,6 +71,23 @@ export default {
|
||||
return props.sortCallback(a, b);
|
||||
}
|
||||
});
|
||||
const processingHandler = {
|
||||
count: 0,
|
||||
start: () => {
|
||||
emit('startProcessing');
|
||||
processingHandler.count++;
|
||||
},
|
||||
stop: () => {
|
||||
if (processingHandler.count > 0) {
|
||||
emit('stopProcessing');
|
||||
processingHandler.count--;
|
||||
}
|
||||
},
|
||||
resolveDangling: () => {
|
||||
for (; processingHandler.count > 0; processingHandler.count--)
|
||||
emit('stopProcessing');
|
||||
}
|
||||
}
|
||||
|
||||
const getAsyncEntryStats = (cwd, entry, modeStr, path, linkTargetRaw) => {
|
||||
const procs = [];
|
||||
@ -90,9 +126,8 @@ export default {
|
||||
if (linkTargetRaw) {
|
||||
entry.target = {
|
||||
rawPath: linkTargetRaw,
|
||||
path: canonicalPath(linkTargetRaw.replace(/^(?!=\/)/, cwd + '/')),
|
||||
path: canonicalPath(linkTargetRaw.replace(/^(?!\/)/, cwd + '/')),
|
||||
};
|
||||
emit('startProcessing');
|
||||
procs.push(useSpawn(['stat', '-c', '%A', entry.target.path]).promise()
|
||||
.then(state => {
|
||||
getAsyncEntryStats(cwd, entry.target, state.stdout.trim());
|
||||
@ -101,7 +136,6 @@ export default {
|
||||
.catch(() => {
|
||||
entry.target.broken = true;
|
||||
})
|
||||
.finally(() => emit('stopProcessing'))
|
||||
);
|
||||
}
|
||||
break;
|
||||
@ -119,7 +153,6 @@ export default {
|
||||
break;
|
||||
}
|
||||
if (entry.permissions.acl && path) {
|
||||
emit('startProcessing');
|
||||
procs.push(useSpawn(['getfacl', '--omit-header', '--no-effective', path], { superuser: 'try' }).promise()
|
||||
.then(state => {
|
||||
entry.permissions.acl = state.stdout
|
||||
@ -139,31 +172,28 @@ export default {
|
||||
.catch(state => {
|
||||
console.error(`failed to get ACL for ${path}:`, errorString(state));
|
||||
})
|
||||
.finally(() => emit('stopProcessing'))
|
||||
);
|
||||
}
|
||||
if (path) {
|
||||
emit('startProcessing');
|
||||
procs.push(useSpawn(['stat', '-c', '%W:%Y:%X', path], { superuser: 'try' }).promise() // birth:modification:access
|
||||
.then(state => {
|
||||
const [ctimeStr, mtimeStr, atimeStr] = state.stdout.trim().split(':');
|
||||
const [ctime, mtime, atime] = state.stdout.trim().split(':').map(str => parseInt(str));
|
||||
Object.assign(entry, {
|
||||
ctime: new Date(parseInt(ctimeStr) * 1000),
|
||||
mtime: new Date(parseInt(mtimeStr) * 1000),
|
||||
atime: new Date(parseInt(atimeStr) * 1000),
|
||||
ctime: ctime ? new Date(ctime * 1000) : null,
|
||||
mtime: mtime ? new Date(mtime * 1000) : null,
|
||||
atime: atime ? new Date(atime * 1000) : null,
|
||||
});
|
||||
})
|
||||
.catch(state =>
|
||||
notifications.value.constructNotification(`Failed to get stats for ${path}`, errorStringHTML(state), 'error')
|
||||
)
|
||||
.finally(() => emit('stopProcessing'))
|
||||
);
|
||||
}
|
||||
return Promise.all(procs);
|
||||
}
|
||||
|
||||
const getEntries = async () => {
|
||||
emit('startProcessing');
|
||||
processingHandler.start();
|
||||
try {
|
||||
const cwd = props.path;
|
||||
const procs = [];
|
||||
@ -215,15 +245,16 @@ export default {
|
||||
})
|
||||
.filter(entry => entry !== null)
|
||||
?? [];
|
||||
processingHandler.start();
|
||||
return Promise.all(procs).then(() => {
|
||||
emitStats();
|
||||
sortEntries();
|
||||
})
|
||||
}).finally(() => processingHandler.stop());
|
||||
} catch (error) {
|
||||
entries.value = [];
|
||||
notifications.value.constructNotification("Error getting directory entries", errorStringHTML(error), 'error');
|
||||
} finally {
|
||||
emit('stopProcessing');
|
||||
processingHandler.stop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -238,11 +269,19 @@ export default {
|
||||
}
|
||||
|
||||
const sortEntries = () => {
|
||||
emit('startProcessing');
|
||||
processingHandler.start();
|
||||
entries.value.sort(sortCallbackComputed.value);
|
||||
emit('stopProcessing');
|
||||
processingHandler.stop();
|
||||
}
|
||||
|
||||
const entryFilterCallback = (entry) =>
|
||||
(!/^\./.test(entry.name) || settings?.directoryView?.showHidden)
|
||||
&& (props.searchFilterRegExp?.test(entry.name) ?? true);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
processingHandler.resolveDangling();
|
||||
});
|
||||
|
||||
watch(() => props.sortCallback, sortEntries);
|
||||
watch(entries, sortEntries);
|
||||
watch(() => settings.directoryView?.separateDirs, sortEntries);
|
||||
@ -256,6 +295,7 @@ export default {
|
||||
getEntries,
|
||||
emitStats,
|
||||
sortEntries,
|
||||
entryFilterCallback,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -38,7 +38,7 @@
|
||||
</th>
|
||||
<th v-if="settings?.directoryView?.cols?.size">
|
||||
<div class="flex flex-row flex-nowrap gap-2 items-center">
|
||||
<div class="grow">Size</div>
|
||||
<div class="grow text-right">Size</div>
|
||||
<SortCallbackButton v-model="sortCallback" :compareFunc="sortCallbacks.size" />
|
||||
</div>
|
||||
</th>
|
||||
@ -66,6 +66,7 @@
|
||||
<DirectoryEntryList
|
||||
:path="path"
|
||||
:sortCallback="sortCallback"
|
||||
:searchFilterRegExp="searchFilterRegExp"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@updateStats="(...args) => $emit('updateStats', ...args)"
|
||||
@ -80,6 +81,7 @@
|
||||
<DirectoryEntryList
|
||||
:path="path"
|
||||
:sortCallback="sortCallback"
|
||||
:searchFilterRegExp="searchFilterRegExp"
|
||||
@cd="(...args) => $emit('cd', ...args)"
|
||||
@edit="(...args) => $emit('edit', ...args)"
|
||||
@updateStats="(...args) => $emit('updateStats', ...args)"
|
||||
@ -101,6 +103,7 @@ import DirectoryEntryList from './DirectoryEntryList.vue';
|
||||
export default {
|
||||
props: {
|
||||
path: String,
|
||||
searchFilterRegExp: RegExp,
|
||||
},
|
||||
setup() {
|
||||
const settings = inject(settingsInjectionKey);
|
||||
|
@ -1,70 +1,73 @@
|
||||
<template>
|
||||
<div class="grow overflow-hidden">
|
||||
<div class="h-full flex flex-col items-stretch">
|
||||
<div class="flex items-stretch divide-x divide-y divide-default flex-wrap">
|
||||
<div class="flex items-stretch divide-x divide-default grow-[6] basis-0">
|
||||
<div class="button-group-row px-4 py-2">
|
||||
<button
|
||||
class="p-2 rounded-lg hover:bg-accent relative"
|
||||
:disabled="!pathHistory.backAllowed()"
|
||||
@click="back()"
|
||||
@mouseenter="backHistoryDropdown.mouseEnter"
|
||||
@mouseleave="backHistoryDropdown.mouseLeave"
|
||||
<div
|
||||
class="grid grid-cols-[auto_1fr] grid-rows-[1fr 1fr] md:grid-cols-[auto_3fr_1fr] md:grid-row-[1fr] items-stretch divide-x divide-y divide-default"
|
||||
>
|
||||
<div class="button-group-row p-1 md:px-4 md:py-2">
|
||||
<button
|
||||
class="p-2 rounded-lg hover:bg-accent relative"
|
||||
:disabled="!pathHistory.backAllowed()"
|
||||
@click="back()"
|
||||
@mouseenter="backHistoryDropdown.mouseEnter"
|
||||
@mouseleave="backHistoryDropdown.mouseLeave"
|
||||
>
|
||||
<ArrowLeftIcon class="size-icon icon-default" />
|
||||
<ChevronDownIcon
|
||||
class="w-3 h-3 icon-default absolute bottom-1 right-1"
|
||||
v-if="pathHistory.backAllowed()"
|
||||
/>
|
||||
<div
|
||||
v-if="backHistoryDropdown.showDropdown"
|
||||
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
|
||||
>
|
||||
<ArrowLeftIcon class="size-icon icon-default" />
|
||||
<ChevronDownIcon
|
||||
class="w-3 h-3 icon-default absolute bottom-1 right-1"
|
||||
v-if="pathHistory.backAllowed()"
|
||||
/>
|
||||
<div
|
||||
v-if="backHistoryDropdown.showDropdown"
|
||||
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
|
||||
>
|
||||
<div
|
||||
v-for="item, index in pathHistory.stack.slice(0, pathHistory.index).reverse()"
|
||||
:key="index"
|
||||
@click="pathHistory.index = pathHistory.index - index"
|
||||
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 rounded-lg hover:bg-accent relative"
|
||||
:disabled="!pathHistory.forwardAllowed()"
|
||||
@click="forward()"
|
||||
@mouseenter="forwardHistoryDropdown.mouseEnter"
|
||||
@mouseleave="forwardHistoryDropdown.mouseLeave"
|
||||
v-for="item, index in pathHistory.stack.slice(0, pathHistory.index).reverse()"
|
||||
:key="index"
|
||||
@click="pathHistory.index = pathHistory.index - index"
|
||||
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="p-2 rounded-lg hover:bg-accent relative"
|
||||
:disabled="!pathHistory.forwardAllowed()"
|
||||
@click="forward()"
|
||||
@mouseenter="forwardHistoryDropdown.mouseEnter"
|
||||
@mouseleave="forwardHistoryDropdown.mouseLeave"
|
||||
>
|
||||
<ArrowRightIcon class="size-icon icon-default" />
|
||||
<ChevronDownIcon
|
||||
class="w-3 h-3 icon-default absolute bottom-1 right-1"
|
||||
v-if="pathHistory.forwardAllowed()"
|
||||
/>
|
||||
<div
|
||||
v-if="forwardHistoryDropdown.showDropdown"
|
||||
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
|
||||
>
|
||||
<ArrowRightIcon class="size-icon icon-default" />
|
||||
<ChevronDownIcon
|
||||
class="w-3 h-3 icon-default absolute bottom-1 right-1"
|
||||
v-if="pathHistory.forwardAllowed()"
|
||||
/>
|
||||
<div
|
||||
v-if="forwardHistoryDropdown.showDropdown"
|
||||
class="absolute top-full left-0 flex flex-col items-stretch z-50 bg-default shadow-lg rounded-lg overflow-y-auto max-h-80"
|
||||
>
|
||||
<div
|
||||
v-for="item, index in pathHistory.stack.slice(pathHistory.index + 1)"
|
||||
:key="index"
|
||||
@click="pathHistory.index = pathHistory.index + index"
|
||||
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="p-2 rounded-lg hover:bg-accent" @click="up()">
|
||||
<ArrowUpIcon class="size-icon icon-default" />
|
||||
</button>
|
||||
<button class="p-2 rounded-lg hover:bg-accent" @click="directoryViewRef.getEntries()">
|
||||
<RefreshIcon class="size-icon icon-default" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="grow px-4 py-2">
|
||||
<PathBreadCrumbs :path="pathHistory.current() ?? '/'" @cd="newPath => cd(newPath)" />
|
||||
</div>
|
||||
v-for="item, index in pathHistory.stack.slice(pathHistory.index + 1)"
|
||||
:key="index"
|
||||
@click="pathHistory.index = pathHistory.index + index"
|
||||
class="hover:text-white hover:bg-red-600 px-4 py-2 text-sm text-left whitespace-nowrap"
|
||||
>{{ item }}</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="p-2 rounded-lg hover:bg-accent" @click="up()">
|
||||
<ArrowUpIcon class="size-icon icon-default" />
|
||||
</button>
|
||||
<button class="p-2 rounded-lg hover:bg-accent" @click="directoryViewRef.getEntries()">
|
||||
<RefreshIcon class="size-icon icon-default" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="grow shrink-0 px-4 py-2">
|
||||
<div
|
||||
class="p-1 md:px-4 md:py-2 col-start-1 col-end-3 row-start-2 row-end-3 md:col-start-auto md:col-end-auto md:row-start-auto md:row-end-auto"
|
||||
>
|
||||
<PathBreadCrumbs :path="pathHistory.current() ?? '/'" @cd="newPath => cd(newPath)" />
|
||||
</div>
|
||||
|
||||
<div class="p-1 md:px-4 md:py-2">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<SearchIcon class="size-icon icon-default" aria-hidden="true" />
|
||||
@ -72,8 +75,8 @@
|
||||
<input
|
||||
type="text"
|
||||
class="block input-textlike w-full pl-10"
|
||||
v-model="searchFilter"
|
||||
placeholder="Search in directory"
|
||||
v-model="searchFilterStr"
|
||||
placeholder="Search in directory (foo*, b?r, *.jpg)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,6 +84,7 @@
|
||||
<div class="grow overflow-hidden">
|
||||
<DirectoryView
|
||||
:path="pathHistory.current() ?? '/'"
|
||||
:searchFilterRegExp="searchFilterRegExp"
|
||||
@cd="newPath => cd(newPath)"
|
||||
@edit="(...args) => console.log('edit', ...args)"
|
||||
@updateStats="stats => $emit('updateFooterText', `${stats.files} file${stats.files === 1 ? '' : 's'}, ${stats.dirs} director${stats.dirs === 1 ? 'y' : 'ies'}`)"
|
||||
@ -98,16 +102,18 @@ import DirectoryView from "../components/DirectoryView.vue";
|
||||
import { errorStringHTML, canonicalPath } from '@45drives/cockpit-helpers';
|
||||
import PathBreadCrumbs from '../components/PathBreadCrumbs.vue';
|
||||
import { checkIfExists, checkIfAllowed } from '../mode';
|
||||
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey } from '../keys';
|
||||
import { notificationsInjectionKey, pathHistoryInjectionKey, lastPathStorageKey, settingsInjectionKey } from '../keys';
|
||||
import { ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, RefreshIcon, ChevronDownIcon, SearchIcon } from '@heroicons/vue/solid';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const settings = inject(settingsInjectionKey);
|
||||
const notifications = inject(notificationsInjectionKey);
|
||||
const route = useRoute();
|
||||
const pathHistory = inject(pathHistoryInjectionKey);
|
||||
const directoryViewRef = ref();
|
||||
const searchFilter = ref("");
|
||||
const searchFilterStr = ref("");
|
||||
const searchFilterRegExp = ref(/^/g);
|
||||
const backHistoryDropdown = reactive({
|
||||
showDropdown: false,
|
||||
timeoutHandle: null,
|
||||
@ -156,6 +162,17 @@ export default {
|
||||
cd(canonicalPath((pathHistory.current() ?? "") + '/..'), saveHistory);
|
||||
}
|
||||
|
||||
watch(searchFilterStr, () => {
|
||||
searchFilterRegExp.value = new RegExp(
|
||||
`^${
|
||||
searchFilterStr.value
|
||||
.replace(/[.+^${}()|[\]]|\\(?![*?])/g, '\\$&') // escape special chars, \\ only if not before * or ?
|
||||
.replace(/(?<!\\)\*/g, '.*') // replace * with .* if not escaped
|
||||
.replace(/(?<!\\)\?/g, '.') // replace ? with . if not escaped
|
||||
}`
|
||||
);
|
||||
}, { immediate: true });
|
||||
|
||||
watch(() => route.params.path, async () => {
|
||||
if (!route.params.path)
|
||||
return cockpit.location.go('/browse/');
|
||||
@ -194,7 +211,8 @@ export default {
|
||||
console,
|
||||
pathHistory,
|
||||
directoryViewRef,
|
||||
searchFilter,
|
||||
searchFilterStr,
|
||||
searchFilterRegExp,
|
||||
backHistoryDropdown,
|
||||
forwardHistoryDropdown,
|
||||
cd,
|
||||
|
@ -245,9 +245,9 @@ camelcase-css@^2.0.1:
|
||||
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
|
||||
|
||||
caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001335:
|
||||
version "1.0.30001340"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001340.tgz#029a2f8bfc025d4820fafbfaa6259fd7778340c7"
|
||||
integrity sha512-jUNz+a9blQTQVu4uFcn17uAD8IDizPzQkIKh3LCJfg9BkyIqExYYdyc/ZSlWUSKb8iYiXxKsxbv4zYSvkqjrxw==
|
||||
version "1.0.30001341"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001341.tgz#59590c8ffa8b5939cf4161f00827b8873ad72498"
|
||||
integrity sha512-2SodVrFFtvGENGCv0ChVJIDQ0KPaS1cg7/qtfMaICgeMolDdo/Z2OD32F0Aq9yl6F4YFwGPBS5AaPqNYiW4PoA==
|
||||
|
||||
chokidar@^3.5.3:
|
||||
version "3.5.3"
|
||||
|
Loading…
x
Reference in New Issue
Block a user