Skip to content

Commit 5ee683b

Browse files
Apply prepare changes
1 parent 20d0306 commit 5ee683b

File tree

2 files changed

+143
-124
lines changed

2 files changed

+143
-124
lines changed

app/components/FileSelector.vue

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,69 @@
11
<template>
22
<FetchingData v-if="loading" />
3-
<FileUploader v-else v-bind="{ multiple, accept, files: internal_files, auto_upload }"
4-
@files_uploaded="files_uploaded_event" />
3+
<FileUploader
4+
v-else
5+
v-bind="{ multiple, accept, files: internal_files, auto_upload }"
6+
@files_uploaded="files_uploaded_event"
7+
/>
58
</template>
69

710
<script setup>
8-
import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
11+
import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
912
10-
import FetchingData from "@ogw_front/components/FetchingData.vue"
11-
import FileUploader from "@ogw_front/components/FileUploader.vue"
13+
import FetchingData from "@ogw_front/components/FetchingData.vue"
14+
import FileUploader from "@ogw_front/components/FileUploader.vue"
1215
13-
const schema = schemas.opengeodeweb_back.allowed_files
14-
const emit = defineEmits([
15-
"update_values",
16-
"increment_step",
17-
"decrement_step",
18-
])
16+
const schema = schemas.opengeodeweb_back.allowed_files
17+
const emit = defineEmits([
18+
"update_values",
19+
"increment_step",
20+
"decrement_step",
21+
])
1922
20-
const props = defineProps({
21-
multiple: { type: Boolean, required: true },
22-
supported_feature: { type: String, required: false, default: null },
23-
files: { type: Array, required: false, default: [] },
24-
auto_upload: { type: Boolean, required: false, default: true },
25-
})
23+
const props = defineProps({
24+
multiple: { type: Boolean, required: true },
25+
supported_feature: { type: String, required: false, default: null },
26+
files: { type: Array, required: false, default: [] },
27+
auto_upload: { type: Boolean, required: false, default: true },
28+
})
2629
27-
const { auto_upload, multiple, supported_feature } = props
30+
const { auto_upload, multiple, supported_feature } = props
2831
29-
const internal_files = ref(props.files)
30-
const accept = ref("")
31-
const loading = ref(false)
32+
const internal_files = ref(props.files)
33+
const accept = ref("")
34+
const loading = ref(false)
3235
33-
watch(
34-
() => props.files,
35-
(newVal) => {
36-
internal_files.value = newVal
37-
},
38-
{ deep: true },
39-
)
36+
watch(
37+
() => props.files,
38+
(newVal) => {
39+
internal_files.value = newVal
40+
},
41+
{ deep: true },
42+
)
4043
41-
const toggle_loading = useToggle(loading)
44+
const toggle_loading = useToggle(loading)
4245
43-
function files_uploaded_event(value) {
44-
if (value.length) {
45-
emit("update_values", { files: value, auto_upload: false })
46-
emit("increment_step")
46+
function files_uploaded_event(value) {
47+
if (value.length) {
48+
emit("update_values", { files: value, auto_upload: false })
49+
emit("increment_step")
50+
}
4751
}
48-
}
4952
50-
async function get_allowed_files() {
51-
toggle_loading()
52-
const params = { supported_feature }
53-
await api_fetch(
54-
{ schema, params },
55-
{
56-
response_function: (response) => {
57-
accept.value = response._data.extensions
58-
.map((extension) => "." + extension)
59-
.join(",")
53+
async function get_allowed_files() {
54+
toggle_loading()
55+
const params = { supported_feature }
56+
await api_fetch(
57+
{ schema, params },
58+
{
59+
response_function: (response) => {
60+
accept.value = response._data.extensions
61+
.map((extension) => "." + extension)
62+
.join(",")
63+
},
6064
},
61-
},
62-
)
63-
toggle_loading()
64-
}
65-
await get_allowed_files()
65+
)
66+
toggle_loading()
67+
}
68+
await get_allowed_files()
6669
</script>

app/components/FileUploader.vue

Lines changed: 91 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,122 @@
11
<template>
22
<v-row>
33
<v-col class="pa-0">
4-
<v-file-input v-model="internal_files" :multiple="props.multiple" :label="label" :accept="props.accept"
5-
:rules="[(value) => !!value || 'The file is mandatory']" color="primary" :hide-input="props.mini"
6-
:hide-details="props.mini" chips counter show-size @click:clear="clear()" />
4+
<v-file-input
5+
v-model="internal_files"
6+
:multiple="props.multiple"
7+
:label="label"
8+
:accept="props.accept"
9+
:rules="[(value) => !!value || 'The file is mandatory']"
10+
color="primary"
11+
:hide-input="props.mini"
12+
:hide-details="props.mini"
13+
chips
14+
counter
15+
show-size
16+
@click:clear="clear()"
17+
/>
718
</v-col>
819
</v-row>
920
<v-row v-if="!props.auto_upload">
1021
<v-col cols="auto">
11-
<v-btn color="primary" :disabled="!internal_files.length && !files_uploaded" :loading="loading" class="pa-2"
12-
@click="upload_files">
22+
<v-btn
23+
color="primary"
24+
:disabled="!internal_files.length && !files_uploaded"
25+
:loading="loading"
26+
class="pa-2"
27+
@click="upload_files"
28+
>
1329
Upload file(s)
1430
</v-btn>
1531
</v-col>
1632
</v-row>
1733
</template>
1834

1935
<script setup>
20-
import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
21-
const schema = schemas.opengeodeweb_back.upload_file
36+
import schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.json"
37+
const schema = schemas.opengeodeweb_back.upload_file
2238
23-
const emit = defineEmits(["files_uploaded", "decrement_step"])
39+
const emit = defineEmits(["files_uploaded", "decrement_step"])
2440
25-
const props = defineProps({
26-
multiple: { type: Boolean, required: true },
27-
accept: { type: String, required: true },
28-
files: { type: Array, required: false, default: [] },
29-
auto_upload: { type: Boolean, required: false, default: false },
30-
mini: { type: Boolean, required: false, default: false },
31-
})
41+
const props = defineProps({
42+
multiple: { type: Boolean, required: true },
43+
accept: { type: String, required: true },
44+
files: { type: Array, required: false, default: [] },
45+
auto_upload: { type: Boolean, required: false, default: false },
46+
mini: { type: Boolean, required: false, default: false },
47+
})
3248
33-
const label = props.multiple
34-
? "Please select file(s) to import"
35-
: "Please select a file to import"
36-
const internal_files = ref(props.files)
37-
const loading = ref(false)
38-
const files_uploaded = ref(false)
49+
const label = props.multiple
50+
? "Please select file(s) to import"
51+
: "Please select a file to import"
52+
const internal_files = ref(props.files)
53+
const loading = ref(false)
54+
const files_uploaded = ref(false)
3955
40-
const toggle_loading = useToggle(loading)
56+
const toggle_loading = useToggle(loading)
4157
42-
async function upload_files() {
43-
toggle_loading()
44-
var promise_array = []
45-
for (const file of internal_files.value) {
46-
const promise = new Promise((resolve, reject) => {
47-
upload_file(
48-
{ route: schema.$id, file },
49-
{
50-
request_error_function: () => {
51-
reject()
58+
async function upload_files() {
59+
toggle_loading()
60+
var promise_array = []
61+
for (const file of internal_files.value) {
62+
const promise = new Promise((resolve, reject) => {
63+
upload_file(
64+
{ route: schema.$id, file },
65+
{
66+
request_error_function: () => {
67+
reject()
68+
},
69+
response_function: () => {
70+
resolve()
71+
},
72+
response_error_function: () => {
73+
reject()
74+
},
5275
},
53-
response_function: () => {
54-
resolve()
55-
},
56-
response_error_function: () => {
57-
reject()
58-
},
59-
},
60-
)
61-
})
62-
promise_array.push(promise)
63-
}
64-
await Promise.all(promise_array)
65-
files_uploaded.value = true
66-
emit("files_uploaded", internal_files.value)
76+
)
77+
})
78+
promise_array.push(promise)
79+
}
80+
await Promise.all(promise_array)
81+
files_uploaded.value = true
82+
emit("files_uploaded", internal_files.value)
6783
68-
toggle_loading()
69-
}
84+
toggle_loading()
85+
}
7086
71-
if (props.files.length) {
72-
internal_files.value = props.files
73-
if (props.auto_upload) {
74-
upload_files()
87+
if (props.files.length) {
88+
internal_files.value = props.files
89+
if (props.auto_upload) {
90+
upload_files()
91+
}
7592
}
76-
}
7793
78-
function clear() {
79-
internal_files.value = []
80-
emit("files_uploaded", internal_files.value)
81-
}
94+
function clear() {
95+
internal_files.value = []
96+
emit("files_uploaded", internal_files.value)
97+
}
8298
83-
watch(
84-
() => props.files,
85-
(newVal) => {
86-
internal_files.value = newVal
87-
},
88-
{ deep: true },
89-
)
99+
watch(
100+
() => props.files,
101+
(newVal) => {
102+
internal_files.value = newVal
103+
},
104+
{ deep: true },
105+
)
90106
91-
watch(internal_files, (value) => {
92-
files_uploaded.value = false
93-
if (props.auto_upload) {
94-
if (props.multiple.value == false) {
95-
internal_files.value = [value]
107+
watch(internal_files, (value) => {
108+
files_uploaded.value = false
109+
if (props.auto_upload) {
110+
if (props.multiple.value == false) {
111+
internal_files.value = [value]
112+
}
113+
upload_files()
96114
}
97-
upload_files()
98-
}
99-
})
115+
})
100116
</script>
101117

102118
<style scoped>
103-
.div.v-input__details {
104-
display: none;
105-
}
119+
.div.v-input__details {
120+
display: none;
121+
}
106122
</style>

0 commit comments

Comments
 (0)