Skip to content

Commit 8adacca

Browse files
thknielingthknieling
committed
Update file browser
1 parent 1948d08 commit 8adacca

File tree

2 files changed

+185
-64
lines changed

2 files changed

+185
-64
lines changed

‎src/adabas/file.ts

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,33 @@ export class FilePathBrowser {
5151
async filesQuery(): Promise<any> {
5252
return triggerCall("/file/browse/" + this.current + "?file=" + this.filePath());
5353
}
54-
async download(file: string): Promise<any> {
55-
return triggerCall("/file/access/" + this.current + "?file=" + this.filePath() + "/" + file);
54+
async read(fileName: string): Promise<any> {
55+
return triggerCall("/file/access/" + this.current + "?file=" + this.filePath() + "/" + fileName);
56+
}
57+
async download(fileName: string): Promise<any> {
58+
var h = authHeader("application/json");
59+
const getConfig = {
60+
headers: authHeader("application/json"),
61+
};
62+
axios.get(
63+
config.Url() + "/file/access/" + this.current + "?file=" + this.filePath() + "/" + fileName,
64+
{ responseType: 'blob', headers: h }
65+
).then((response) => {
66+
const url = window.URL.createObjectURL(new Blob([response.data]));
67+
const link = document.createElement('a');
68+
link.href = url;
69+
link.setAttribute('download', fileName); //or any other extension
70+
document.body.appendChild(link);
71+
link.click();
72+
});
5673
}
5774
async upload(file: File): Promise<any> {
5875
const getConfig = {
5976
headers: authHeader("multipart/form-data"),
6077
};
78+
console.log("Upload file...");
6179
let fileData = new FormData();
62-
fileData.append("FileKey", file);
80+
fileData.append("uploadFile", file);
6381
return axios
6482
.post(
6583
config.Url() + "/file/access/" + this.current + "?file=" + this.filePath() + "/" + file.name,
@@ -75,6 +93,25 @@ export class FilePathBrowser {
7593
);
7694
});
7795
}
96+
async deleteFile(fileName: string): Promise<any> {
97+
const getConfig = {
98+
headers: authHeader("application/json"),
99+
};
100+
console.log("Delete file...");
101+
return axios
102+
.delete(
103+
config.Url() + "/file/access/" + this.current + "?file=" + this.filePath() + "/" + fileName,
104+
getConfig
105+
)
106+
.then(function (response) {
107+
console.log(response);
108+
})
109+
.catch(function (error) {
110+
console.log(
111+
error.response.statusText + ":" + JSON.stringify(error.response)
112+
);
113+
});
114+
}
78115
}
79116
export async function fileAccessConfig(): Promise<any> {
80117
return triggerCall("/file/browse");

‎src/components/FileBrowser.vue

Lines changed: 145 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -32,66 +32,104 @@
3232
</b-col>
3333
</b-row>
3434
<b-row
35-
><b-col> Select Path</b-col
35+
><b-col sm="2"> Select Path:</b-col
3636
><b-col>
3737
<b-form-select
3838
v-model="selected"
3939
:options="options"
4040
></b-form-select> </b-col
4141
></b-row>
4242
<b-row
43-
><b-col> Upload</b-col
44-
><b-col>
43+
><b-col sm="2"> Upload file to remote:</b-col
44+
><b-col sm="8">
4545
<b-form-file
4646
v-model="uploadFile"
4747
:state="Boolean(uploadFile)"
4848
placeholder="Choose a file or drop it here..."
4949
drop-placeholder="Drop file here..."
5050
></b-form-file></b-col
51-
><b-col> <b-button>Upload</b-button> </b-col></b-row
52-
>
53-
<b-table
54-
striped
55-
bordered
56-
hover
57-
small
58-
selectable
59-
select-mode="single"
60-
@row-selected="onRowSelected"
61-
:items="files"
62-
:fields="fields"
63-
primary-key="Name"
64-
sort-by="Type"
65-
:sort-compare="sortingChanged"
51+
><b-col sm="2">
52+
<b-button @click="upload()">Upload</b-button>
53+
</b-col></b-row
6654
>
67-
<template v-slot:cell(Size)="row">
68-
<div v-if="row.item.Type != 'Directory'">
69-
{{ new Intl.NumberFormat().format(row.item.Size) }}
70-
</div>
71-
</template>
72-
<template v-slot:cell(Modified)="row">
73-
<div v-if="row.item.Modified">
74-
{{ new Date(row.item.Modified).toUTCString() }}
75-
</div>
76-
</template>
77-
<template v-slot:cell(Operation)="row">
78-
<b-button-group class="mr-1">
79-
<b-button class="mr-1"
80-
v-if="row.item.Type != 'Directory' && row.item.Size < 100000"
81-
@click="show(row.item.Name)"
82-
v-b-modal.modal-xl
83-
variant="primary"
84-
>Show</b-button
85-
>
86-
<b-button class="mr-1"
87-
v-if="row.item.Type != 'Directory'"
88-
@click="download(row.item.Name)"
89-
variant="primary"
90-
>Download</b-button
91-
></b-button-group
55+
<b-row
56+
><b-col sm="10">
57+
<b-pagination
58+
v-model="currentPage"
59+
:total-rows="files.length"
60+
:per-page="perPage"
61+
aria-controls="my-table"
62+
></b-pagination>
63+
</b-col>
64+
<b-col sm="2">
65+
<b-form-select
66+
v-model="perPage"
67+
:options="perPageOptions"
68+
size="sm"
69+
class="mt-3"
70+
></b-form-select> </b-col
71+
></b-row>
72+
<b-row
73+
><b-col>
74+
<b-table
75+
striped
76+
bordered
77+
hover
78+
:per-page="perPage"
79+
:current-page="currentPage"
80+
small
81+
selectable
82+
select-mode="single"
83+
@row-selected="onRowSelected"
84+
:items="files"
85+
:fields="fields"
86+
primary-key="Name"
87+
sort-by="Type"
88+
:sort-compare="sortingChanged"
9289
>
93-
</template>
94-
</b-table>
90+
<template v-slot:cell(Size)="row">
91+
<div v-if="row.item.Type != 'Directory'">
92+
{{ new Intl.NumberFormat().format(row.item.Size) }}
93+
</div>
94+
</template>
95+
<template v-slot:cell(Modified)="row">
96+
<div v-if="row.item.Modified">
97+
{{ new Date(row.item.Modified).toUTCString() }}
98+
</div>
99+
</template>
100+
<template v-slot:cell(Operation)="row">
101+
<b-button-group class="mr-1">
102+
<b-button
103+
class="mr-1"
104+
v-if="
105+
row.item.Type != 'Directory' && row.item.Size < 100000
106+
"
107+
@click="show(row.item.Name)"
108+
v-b-modal.modal-xl
109+
variant="primary"
110+
>Show</b-button
111+
>
112+
<b-button
113+
class="mr-1"
114+
v-if="row.item.Type != 'Directory'"
115+
@click="download(row.item.Name)"
116+
variant="primary"
117+
>Download</b-button
118+
>
119+
<b-button
120+
class="mr-1"
121+
v-if="
122+
row.item.Type != 'Directory' && row.item.Size < 100000
123+
"
124+
@click="deleteFile(row.item.Name)"
125+
variant="primary"
126+
>Delete</b-button
127+
></b-button-group
128+
>
129+
</template>
130+
</b-table></b-col
131+
>
132+
</b-row>
95133
</b-container></b-card-body
96134
></b-card
97135
>
@@ -117,12 +155,16 @@ export default class FileBrowser extends Vue {
117155
@Prop(String) readonly url: string | undefined;
118156
data() {
119157
return {
158+
perPage: 10,
159+
currentPage: 1,
160+
perPageOptions: [10, 20, 50, 100],
120161
selected: null,
162+
selectedFile: null,
121163
timer: "",
122164
options: [],
123165
files: [],
124166
uploadFile: null,
125-
filedata: "AC",
167+
filedata: "Loading data ...",
126168
path: "/",
127169
browser: null as FilePathBrowser | null,
128170
fields: [
@@ -171,22 +213,30 @@ export default class FileBrowser extends Vue {
171213
} else {
172214
b.addPath(this.$data.path);
173215
}
174-
this.$data.browser
175-
.filesQuery()
176-
.then((response: any) => {
177-
console.log("Got response ---");
178-
this.$data.current = this.$data.path;
179-
this.$data.files = response.Content;
180-
this.$data.files.push({ Name: "..", Type: "Directory" });
181-
this.$data.path = "";
182-
})
183-
.catch((error: any) => {
184-
console.log("ERROR:" + JSON.stringify(error));
185-
});
216+
this.refreshDirectory();
186217
}
187218
}
219+
refreshDirectory() {
220+
this.$data.browser
221+
.filesQuery()
222+
.then((response: any) => {
223+
this.$data.current = this.$data.path;
224+
this.$data.files = response.Content;
225+
this.$data.files.push({ Name: "..", Type: "Directory" });
226+
this.$data.path = "";
227+
})
228+
.catch((error: any) => {
229+
console.log("Refresh ERROR:" + JSON.stringify(error));
230+
});
231+
}
188232
sortingChanged(a: any, b: any, key: any) {
189233
let result = 0;
234+
if (a["Name"] === "..") {
235+
return -1;
236+
}
237+
if (b["Name"] === "..") {
238+
return 1;
239+
}
190240
if (key === "day") {
191241
let day1 = a[key].toLowerCase();
192242
let day2 = b[key].toLowerCase();
@@ -204,10 +254,19 @@ export default class FileBrowser extends Vue {
204254
return a["Name"] - b["Name"];
205255
}
206256
onRowSelected(items: any) {
207-
console.log("Selected " + JSON.stringify(items));
208257
if (items.length == 0) {
209258
return;
210259
}
260+
console.log(
261+
"Selected " +
262+
JSON.stringify(items) +
263+
" " +
264+
JSON.stringify(this.$data.selected)
265+
);
266+
if (this.$data.selectedFile == items[0]) {
267+
return;
268+
}
269+
this.$data.selectedFile = items[0];
211270
if (items[0].Name == "..") {
212271
this.$data.path = "..";
213272
this.loadDirectory();
@@ -222,17 +281,42 @@ export default class FileBrowser extends Vue {
222281
}
223282
}
224283
show(fileName: string) {
225-
console.log("Download " + fileName);
226-
this.$data.browser.download(fileName).then((response: any) => {
284+
console.log("Read " + fileName);
285+
this.$data.filedata = "Loading data ...";
286+
this.$data.browser.read(fileName).then((response: any) => {
227287
this.$data.filedata = response;
228288
});
229289
}
230290
download(fileName: string) {
231291
console.log("Download " + fileName);
292+
this.$data.browser.download(fileName);
232293
}
233294
upload() {
295+
console.log("Upload " + this.$data.uploadFile.Name);
234296
this.$data.browser.upload(this.$data.uploadFile);
235297
}
298+
deleteFile(fileName: string) {
299+
console.log("Delete " + fileName);
300+
this.$bvModal
301+
.msgBoxConfirm("Really delete file " + fileName + "?")
302+
.then((value) => {
303+
if (value == true) {
304+
this.$data.browser
305+
.deleteFile(fileName)
306+
.then((value: any) => {
307+
console.log("File deleted");
308+
})
309+
.catch((err: any) => {
310+
console.log("Error deleting file");
311+
});
312+
this.refreshDirectory();
313+
}
314+
})
315+
.catch((err) => {
316+
// An error occurred
317+
console.log("Error: " + JSON.stringify(err));
318+
});
319+
}
236320
}
237321
</script>
238322

0 commit comments

Comments
 (0)