Skip to content

Commit e0d43df

Browse files
ml-evsml-evs
committed
Refactor file list into separate component
1 parent 1419429 commit e0d43df

File tree

2 files changed

+144
-76
lines changed

2 files changed

+144
-76
lines changed

‎webapp/src/components/FileList.vue‎

Lines changed: 23 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -3,77 +3,44 @@
33
<label class="mr-2">Files</label>
44
<div class="card">
55
<div id="filearea" class="card-body overflow-auto">
6-
<div v-for="(file, file_id) in stored_files" :key="file_id" class="file-group">
7-
<a @click="deleteFile($event, file_id)">
8-
<font-awesome-icon icon="times" fixed-width class="delete-file-button" />
9-
</a>
10-
<a class="filelink" target="_blank" :href="`${$API_URL}/files/${file_id}/${file.name}`">
11-
{{ file.name }}
12-
</a>
13-
<font-awesome-icon
14-
v-if="file.is_live == true"
15-
v-show="true"
16-
class="link-icon"
17-
:icon="['fa', 'link']"
18-
/>
19-
<font-awesome-icon
20-
v-else-if="file.source_server_name != null"
21-
v-show="true"
22-
class="unlink-icon"
23-
:icon="['fa', 'unlink']"
24-
/>
25-
<span v-if="file.source_server_name != null">
26-
<span class="server-name">
27-
<font-awesome-icon :icon="['fas', 'hdd']" class="toplevel-icon" />
28-
{{ file.source_server_name }}
29-
</span>
30-
<span class="last-updated-text">
31-
(updated
32-
{{
33-
formatDistance(new Date(file.last_modified_remote), new Date(), {
34-
addSuffix: true,
35-
})
36-
}}, last synced
37-
{{
38-
formatDistance(new Date(file.last_modified), new Date(), {
39-
addSuffix: true,
40-
})
41-
}})
42-
</span>
43-
</span>
44-
<span v-else class="last-updated-text">
45-
(uploaded
46-
{{
47-
formatDistance(new Date(file.last_modified), new Date(), {
48-
addSuffix: true,
49-
})
50-
}})
51-
</span>
52-
</div>
6+
<FileListItem
7+
v-for="(file, file_id) in stored_files"
8+
:key="file_id"
9+
:file="file"
10+
:file-id="file_id"
11+
@delete-file-from-sample="deleteFile"
12+
/>
5313
</div>
5414
<div class="row">
55-
<button id="uppy-trigger" class="btn btn-default btn-sm mb-3 ml-4" type="button">
15+
<button
16+
id="uppy-trigger"
17+
class="btn btn-default btn-sm mb-3 ml-4 text-start d-flex align-items-center"
18+
type="button"
19+
>
5620
<font-awesome-icon class="upload-icon" icon="file" fixed-width />
57-
Upload files...</button
58-
><!-- Surrounding divs so that buttons don't become full-width in the card -->
21+
<span class="ms-1">Upload files</span>
22+
</button>
5923
<button
60-
class="btn btn-default btn-sm mb-3 ml-2"
24+
class="btn btn-default btn-sm mb-3 ml-2 text-start d-flex align-items-center"
6125
type="button"
6226
@click="setFileSelectModalOpen"
6327
>
6428
<font-awesome-icon class="remote-upload-icon" icon="cloud-upload-alt" fixed-width />
65-
Add files from server...
29+
<span class="ms-1">Add files from server</span>
6630
</button>
6731
</div>
6832
</div>
6933
</div>
7034
</template>
7135

7236
<script>
37+
import FileListItem from "./FileListItem.vue";
7338
import { deleteFileFromSample } from "@/server_fetch_utils";
74-
import { formatDistance } from "date-fns";
7539
7640
export default {
41+
components: {
42+
FileListItem,
43+
},
7744
props: {
7845
item_id: {
7946
type: String,
@@ -90,8 +57,7 @@ export default {
9057
};
9158
},
9259
methods: {
93-
formatDistance,
94-
deleteFile(event, file_id) {
60+
deleteFile(file_id) {
9561
deleteFileFromSample(this.item_id, file_id);
9662
return false;
9763
},
@@ -120,7 +86,8 @@ export default {
12086
.unlink-icon,
12187
.upload-icon,
12288
.remote-upload-icon {
123-
margin-left: 0.4rem;
89+
margin-left: 0.2rem;
90+
margin-right: 0.2rem;
12491
color: #888;
12592
font-size: small;
12693
}
@@ -132,25 +99,5 @@ export default {
13299
133100
#uppy-trigger {
134101
scroll-anchor: auto;
135-
width: 8rem;
136-
}
137-
138-
.last-updated-text {
139-
font-size: 0.8em;
140-
color: #888;
141-
font-style: italic;
142-
vertical-align: middle;
143-
}
144-
145-
.server-name {
146-
font-family: "Andalé Mono", monospace;
147-
font-weight: 400;
148-
/*font-style: italic;*/
149-
color: teal;
150-
border: solid 1px teal;
151-
padding: 0.1rem 0.25rem;
152-
margin-left: 0.5rem;
153-
border-radius: 0.2rem;
154-
font-size: 0.8em;
155102
}
156103
</style>

‎webapp/src/components/FileListItem.vue‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<template>
2+
<div class="file-group">
3+
<a @click="onDelete">
4+
<font-awesome-icon icon="times" fixed-width class="delete-file-button" />
5+
</a>
6+
<a class="filelink" target="_blank" :href="`${$API_URL}/files/${fileId}/${file.name}`">
7+
{{ file.name }}
8+
</a>
9+
<font-awesome-icon v-if="file.is_live === true" class="link-icon" :icon="['fa', 'link']" />
10+
<font-awesome-icon
11+
v-else-if="file.source_server_name != null"
12+
class="unlink-icon"
13+
:icon="['fa', 'unlink']"
14+
/>
15+
<span v-if="file.source_server_name != null">
16+
<span class="server-name">
17+
<font-awesome-icon :icon="['fas', 'hdd']" class="toplevel-icon" />
18+
{{ file.source_server_name }}
19+
</span>
20+
<span class="last-updated-text">
21+
(updated
22+
{{
23+
formatDistance(new Date(file.last_modified_remote), new Date(), {
24+
addSuffix: true,
25+
})
26+
}}, last synced
27+
{{
28+
formatDistance(new Date(file.last_modified), new Date(), {
29+
addSuffix: true,
30+
})
31+
}})
32+
</span>
33+
</span>
34+
<span v-else class="last-updated-text">
35+
(uploaded
36+
{{
37+
formatDistance(new Date(file.last_modified), new Date(), {
38+
addSuffix: true,
39+
})
40+
}})
41+
</span>
42+
</div>
43+
</template>
44+
45+
<script>
46+
import { formatDistance } from "date-fns";
47+
48+
export default {
49+
name: "FileListItem",
50+
props: {
51+
file: {
52+
type: Object,
53+
required: true,
54+
},
55+
fileId: {
56+
type: String,
57+
required: true,
58+
},
59+
},
60+
emits: ["deleteFileFromSample"],
61+
methods: {
62+
formatDistance,
63+
onDelete() {
64+
this.$emit("deleteFileFromSample", this.fileId);
65+
},
66+
},
67+
};
68+
</script>
69+
70+
<style scoped>
71+
.file-group {
72+
padding: 0.25rem 0rem;
73+
}
74+
75+
.filelink {
76+
color: #004175;
77+
font-family: "Andalé Mono", monospace;
78+
}
79+
80+
.filelink:hover {
81+
text-decoration: none;
82+
}
83+
84+
.delete-file-button {
85+
color: #888;
86+
margin-right: 0.1rem;
87+
}
88+
89+
.delete-file-button:hover {
90+
color: black;
91+
}
92+
93+
.link-icon,
94+
.unlink-icon,
95+
.upload-icon,
96+
.remote-upload-icon {
97+
margin-left: 0.2rem;
98+
margin-right: 0.2rem;
99+
color: #888;
100+
font-size: small;
101+
}
102+
103+
.last-updated-text {
104+
font-size: 0.8em;
105+
color: #888;
106+
font-style: italic;
107+
vertical-align: middle;
108+
}
109+
110+
.server-name {
111+
font-family: "Andalé Mono", monospace;
112+
font-weight: 400;
113+
/*font-style: italic;*/
114+
color: teal;
115+
border: solid 1px teal;
116+
padding: 0.1rem 0.25rem;
117+
margin-left: 0.5rem;
118+
border-radius: 0.2rem;
119+
font-size: 0.8em;
120+
}
121+
</style>

0 commit comments

Comments
 (0)