81 lines
1.8 KiB
Svelte
81 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import Button from "layout/Button.svelte";
|
|
import { fs_delete_all, type FSNode } from "lib/FilesystemAPI";
|
|
import PathLink from "filesystem/util/PathLink.svelte";
|
|
import type { FSNavigator } from "filesystem/FSNavigator";
|
|
import { loading_finish, loading_start } from "lib/Loading";
|
|
|
|
let {
|
|
nav,
|
|
file = $bindable({} as FSNode),
|
|
new_name = $bindable(),
|
|
visible = $bindable(),
|
|
open_after_edit = $bindable(false)
|
|
}: {
|
|
nav: FSNavigator;
|
|
file?: FSNode;
|
|
new_name: string;
|
|
visible: boolean;
|
|
open_after_edit: boolean;
|
|
} = $props();
|
|
|
|
let is_root_dir = $derived(file.path === "/"+file.id)
|
|
|
|
const delete_file = async (e: MouseEvent) => {
|
|
e.preventDefault()
|
|
|
|
try {
|
|
loading_start()
|
|
await fs_delete_all(file.path)
|
|
} catch (err) {
|
|
console.error(err)
|
|
alert(err)
|
|
return
|
|
} finally {
|
|
loading_finish()
|
|
}
|
|
|
|
if (open_after_edit) {
|
|
nav.navigate(file.path, false)
|
|
} else {
|
|
nav.reload()
|
|
}
|
|
visible = false
|
|
}
|
|
</script>
|
|
|
|
<fieldset>
|
|
<legend>File settings</legend>
|
|
{#if is_root_dir}
|
|
<div class="highlight_yellow">
|
|
Filesystem root cannot be renamed. If this shared directory
|
|
is in
|
|
<PathLink nav={nav} path="/me">your filesystem</PathLink>
|
|
you can rename it from there
|
|
</div>
|
|
{/if}
|
|
<div class="form_grid">
|
|
<label for="file_name">Name</label>
|
|
<input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
|
|
</div>
|
|
</fieldset>
|
|
|
|
{#if $nav.permissions.delete === true}
|
|
<fieldset>
|
|
<legend>Delete</legend>
|
|
<p>
|
|
Delete this file or directory. If this is a directory then all
|
|
subfiles will be deleted as well. This action cannot be undone.
|
|
</p>
|
|
<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
|
|
</fieldset>
|
|
{/if}
|
|
|
|
<style>
|
|
.form_grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 10fr;
|
|
align-items: center;
|
|
}
|
|
</style>
|