@abi-software/map-side-bar 2.14.1-simulation.6 → 2.14.1-simulation.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/map-side-bar.js +1457 -1455
- package/dist/map-side-bar.umd.cjs +18 -18
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/DatasetExplorer.vue +2 -0
- package/src/components/FileBrowser.vue +82 -74
package/package.json
CHANGED
|
@@ -1,81 +1,83 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div>
|
|
2
|
+
<div class="file-browser-container">
|
|
3
3
|
<div class="badges-container">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
/>
|
|
10
|
-
</div>
|
|
11
|
-
<el-table
|
|
12
|
-
v-if="fileLists"
|
|
13
|
-
:data="fileLists"
|
|
14
|
-
style="width: 100%;"
|
|
15
|
-
height="600"
|
|
16
|
-
:stripe="true"
|
|
17
|
-
>
|
|
18
|
-
<el-table-column type="expand">
|
|
19
|
-
<template #default="props">
|
|
20
|
-
<div class="file-details" m="4">
|
|
21
|
-
<p m="t-0 b-2" v-if="props.row.description">
|
|
22
|
-
<b>Description:</b> {{ props.row.description }}
|
|
23
|
-
</p>
|
|
24
|
-
<p m="t-0 b-2">
|
|
25
|
-
<b>File path:</b> {{ props.row.filePath }}
|
|
26
|
-
</p>
|
|
27
|
-
<p m="t-0 b-2" v-if="props.row.protocol">
|
|
28
|
-
<b>Protocol</b>: {{ props.row.protocol }}
|
|
29
|
-
</p>
|
|
30
|
-
<div v-for="(val, key) in props.row.columns">
|
|
31
|
-
<p :key="key" m="t-0 b-2"><b>Column {{ key + 1 }}</b>: {{ val }}</p>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
</template>
|
|
35
|
-
</el-table-column>
|
|
36
|
-
<el-table-column
|
|
37
|
-
prop="thumbnail"
|
|
38
|
-
label="Thumbnail"
|
|
39
|
-
width="170"
|
|
40
|
-
>
|
|
41
|
-
<template #default="scope">
|
|
42
|
-
<el-image
|
|
43
|
-
v-if="scope.row.thumbnail"
|
|
44
|
-
:src="scope.row.thumbnail"
|
|
45
|
-
style="max-width: 150px; max-height: 150px"
|
|
46
|
-
fit="contain"
|
|
47
|
-
lazy
|
|
48
|
-
/>
|
|
49
|
-
</template>
|
|
50
|
-
</el-table-column>
|
|
51
|
-
<el-table-column
|
|
52
|
-
prop="fileName"
|
|
53
|
-
label="File name"
|
|
54
|
-
width="200"
|
|
55
|
-
class-name="column-text"
|
|
4
|
+
<BadgesGroup
|
|
5
|
+
:displayDataset="false"
|
|
6
|
+
:displayText="false"
|
|
7
|
+
:items="items"
|
|
8
|
+
@categoryChanged="categoryChanged"
|
|
56
9
|
/>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
10
|
+
</div>
|
|
11
|
+
<div class="table-container">
|
|
12
|
+
<el-table
|
|
13
|
+
v-if="fileLists"
|
|
14
|
+
:data="fileLists"
|
|
15
|
+
style="width: 100%;"
|
|
16
|
+
height="100%"
|
|
17
|
+
:stripe="true"
|
|
65
18
|
>
|
|
66
|
-
<
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
19
|
+
<el-table-column type="expand">
|
|
20
|
+
<template #default="props">
|
|
21
|
+
<div class="file-details" m="4">
|
|
22
|
+
<p m="t-0 b-2" v-if="props.row.description">
|
|
23
|
+
<b>Description:</b> {{ props.row.description }}
|
|
24
|
+
</p>
|
|
25
|
+
<p m="t-0 b-2" v-if="props.row.protocol">
|
|
26
|
+
<b>Protocol</b>: {{ props.row.protocol }}
|
|
27
|
+
</p>
|
|
28
|
+
<div v-for="(val, key) in props.row.columns">
|
|
29
|
+
<p :key="key" m="t-0 b-2"><b>Column {{ key + 1 }}</b>: {{ val }}</p>
|
|
30
|
+
</div>
|
|
31
|
+
<p m="t-0 b-2">
|
|
32
|
+
<b>File path:</b> {{ props.row.filePath }}
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
</template>
|
|
36
|
+
</el-table-column>
|
|
37
|
+
<el-table-column
|
|
38
|
+
prop="thumbnail"
|
|
39
|
+
label="Thumbnail"
|
|
40
|
+
width="170"
|
|
41
|
+
>
|
|
42
|
+
<template #default="scope">
|
|
43
|
+
<el-image
|
|
44
|
+
v-if="scope.row.thumbnail"
|
|
45
|
+
:src="scope.row.thumbnail"
|
|
46
|
+
style="max-width: 150px; max-height: 150px"
|
|
47
|
+
fit="contain"
|
|
48
|
+
lazy
|
|
49
|
+
/>
|
|
50
|
+
</template>
|
|
51
|
+
</el-table-column>
|
|
52
|
+
<el-table-column
|
|
53
|
+
prop="fileName"
|
|
54
|
+
label="File name"
|
|
55
|
+
width="200"
|
|
56
|
+
class-name="column-text"
|
|
57
|
+
/>
|
|
58
|
+
<el-table-column
|
|
59
|
+
prop="type"
|
|
60
|
+
label="Type"
|
|
61
|
+
width="100"
|
|
62
|
+
class-name="column-text"
|
|
63
|
+
/>
|
|
64
|
+
<el-table-column
|
|
65
|
+
fixed="right"
|
|
66
|
+
>
|
|
67
|
+
<template #header>
|
|
68
|
+
<el-input v-model="search" size="small" placeholder="Type to search" clearable/>
|
|
69
|
+
</template>
|
|
70
|
+
<template #default="scope">
|
|
71
|
+
<el-button
|
|
72
|
+
class="file-button"
|
|
73
|
+
@click="handleView(scope.row)"
|
|
74
|
+
:icon="ElIconView"
|
|
75
|
+
type="primary"
|
|
76
|
+
/>
|
|
77
|
+
</template>
|
|
78
|
+
</el-table-column>
|
|
79
|
+
</el-table>
|
|
80
|
+
</div>
|
|
79
81
|
</div>
|
|
80
82
|
</template>
|
|
81
83
|
|
|
@@ -241,4 +243,10 @@ export default {
|
|
|
241
243
|
padding-left: 8px;
|
|
242
244
|
font-size: 12px;
|
|
243
245
|
}
|
|
246
|
+
|
|
247
|
+
|
|
248
|
+
.file-browser-container {
|
|
249
|
+
max-height: 75vh;
|
|
250
|
+
overflow: auto;
|
|
251
|
+
}
|
|
244
252
|
</style>
|