diff --git a/resources/assets/scripts/api/http.ts b/resources/assets/scripts/api/http.ts index 072268e56..36749bb5b 100644 --- a/resources/assets/scripts/api/http.ts +++ b/resources/assets/scripts/api/http.ts @@ -1,4 +1,5 @@ -import axios, {AxiosInstance} from 'axios'; +import axios, {AxiosInstance, AxiosRequestConfig} from 'axios'; +import {ServerApplicationCredentials} from "@/store/types"; // This token is set in the bootstrap.js file at the beginning of the request // and is carried through from there. @@ -25,3 +26,15 @@ if (typeof window.phpdebugbar !== 'undefined') { } export default http; + +/** + * Creates a request object for the node that uses the server UUID and connection + * credentials. Basically just a tiny wrapper to set this quickly. + */ +export function withCredentials(server: string, credentials: ServerApplicationCredentials): AxiosInstance { + http.defaults.baseURL = credentials.node; + http.defaults.headers['X-Access-Server'] = server; + http.defaults.headers['X-Access-Token'] = credentials.key; + + return http; +} diff --git a/resources/assets/scripts/api/server/files/createFolder.ts b/resources/assets/scripts/api/server/files/createFolder.ts index 5ad60748b..f28f7d3ec 100644 --- a/resources/assets/scripts/api/server/files/createFolder.ts +++ b/resources/assets/scripts/api/server/files/createFolder.ts @@ -1,27 +1,13 @@ import {ServerApplicationCredentials} from "@/store/types"; -import http from "@/api/http"; -import {AxiosError, AxiosRequestConfig} from "axios"; -import {ServerData} from "@/models/server"; +import {withCredentials} from "@/api/http"; /** * Connects to the remote daemon and creates a new folder on the server. */ -export function createFolder(server: ServerData, credentials: ServerApplicationCredentials, path: string): Promise { - const config: AxiosRequestConfig = { - baseURL: credentials.node, - headers: { - 'X-Access-Server': server.uuid, - 'X-Access-Token': credentials.key, - }, - }; - +export function createFolder(server: string, credentials: ServerApplicationCredentials, path: string): Promise { return new Promise((resolve, reject) => { - http.post('/v1/server/file/folder', { path }, config) - .then(() => { - resolve(); - }) - .catch((error: AxiosError) => { - reject(error); - }); + withCredentials(server, credentials).post('/v1/server/file/folder', { path }) + .then(() => resolve()) + .catch(reject); }); } diff --git a/resources/assets/scripts/api/server/files/renameElement.ts b/resources/assets/scripts/api/server/files/renameElement.ts new file mode 100644 index 000000000..efd991b17 --- /dev/null +++ b/resources/assets/scripts/api/server/files/renameElement.ts @@ -0,0 +1,23 @@ +import {withCredentials} from "@/api/http"; +import {ServerApplicationCredentials} from "@/store/types"; +import { join } from 'path'; + +type RenameObject = { + path: string, + fromName: string, + toName: string, +} + +/** + * Renames a file or folder on the server using the node. + */ +export function renameElement(server: string, credentials: ServerApplicationCredentials, data: RenameObject): Promise { + return new Promise((resolve, reject) => { + withCredentials(server, credentials).post('/v1/server/file/rename', { + from: join(data.path, data.fromName), + to: join(data.path, data.toName), + }) + .then(() => resolve()) + .catch(reject); + }); +} diff --git a/resources/assets/scripts/api/server/getDirectoryContents.ts b/resources/assets/scripts/api/server/getDirectoryContents.ts index 1e23621a0..75093ac29 100644 --- a/resources/assets/scripts/api/server/getDirectoryContents.ts +++ b/resources/assets/scripts/api/server/getDirectoryContents.ts @@ -2,7 +2,7 @@ import http from '../http'; import {filter, isObject} from 'lodash'; // @ts-ignore import route from '../../../../../vendor/tightenco/ziggy/src/js/route'; -import {DirectoryContents} from "./types"; +import {DirectoryContentObject, DirectoryContents} from "./types"; /** * Get the contents of a specific directory for a given server. @@ -12,10 +12,10 @@ export function getDirectoryContents(server: string, directory: string): Promise http.get(route('server.files', {server, directory})) .then((response) => { return resolve({ - files: filter(response.data.contents, function (o) { + files: filter(response.data.contents, function (o: DirectoryContentObject) { return o.file; }), - directories: filter(response.data.contents, function (o) { + directories: filter(response.data.contents, function (o: DirectoryContentObject) { return o.directory; }), editable: response.data.editable, diff --git a/resources/assets/scripts/api/server/types.ts b/resources/assets/scripts/api/server/types.ts index 8294868b9..30d68feb1 100644 --- a/resources/assets/scripts/api/server/types.ts +++ b/resources/assets/scripts/api/server/types.ts @@ -1,9 +1,21 @@ export type DirectoryContents = { - files: Array, - directories: Array, + files: Array, + directories: Array, editable: Array } +export type DirectoryContentObject = { + name: string, + created: string, + modified: string, + mode: number, + size: number, + directory: boolean, + file: boolean, + symlink: boolean, + mime: string, +} + export type ServerDatabase = { id: string, name: string, diff --git a/resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue b/resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue index 0264c2cc4..0593c60ef 100644 --- a/resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue +++ b/resources/assets/scripts/components/server/components/filemanager/FileContextMenu.vue @@ -1,7 +1,7 @@ @@ -60,19 +61,21 @@ import FileRow from "@/components/server/components/filemanager/FileRow.vue"; import FolderRow from "@/components/server/components/filemanager/FolderRow.vue"; import CreateFolderModal from '../components/filemanager/modals/CreateFolderModal.vue'; + import RenameModal from '../components/filemanager/modals/RenameModal.vue'; + import {DirectoryContentObject} from "@/api/server/types"; type DataStructure = { loading: boolean, errorMessage: string | null, currentDirectory: string, - files: Array, - directories: Array, + files: Array, + directories: Array, editableFiles: Array, } export default Vue.extend({ name: 'FileManager', - components: {CreateFolderModal, FileRow, FolderRow}, + components: {CreateFolderModal, FileRow, FolderRow, RenameModal}, computed: { ...mapState('server', ['server', 'credentials']), ...mapState('socket', ['connected']),