Merge pull request 'feature/photo-view' (!133) from wbuezas/hedera-web-mindshore:feature/photo-view into beta
gitea/hedera-web/pipeline/head This commit looks good
Details
gitea/hedera-web/pipeline/head This commit looks good
Details
Reviewed-on: #133 Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
This commit is contained in:
commit
94b405ffc7
|
@ -3,11 +3,10 @@ import { useI18n } from 'vue-i18n';
|
||||||
import { ref, onMounted, inject, reactive, computed } from 'vue';
|
import { ref, onMounted, inject, reactive, computed } from 'vue';
|
||||||
|
|
||||||
import VnSelect from 'src/components/common/VnSelect.vue';
|
import VnSelect from 'src/components/common/VnSelect.vue';
|
||||||
import VnForm from 'src/components/common/VnForm.vue';
|
|
||||||
import VnInput from 'src/components/common/VnInput.vue';
|
import VnInput from 'src/components/common/VnInput.vue';
|
||||||
import useNotify from 'src/composables/useNotify.js';
|
import useNotify from 'src/composables/useNotify.js';
|
||||||
|
import FormModel from 'src/components/common/FormModel.vue';
|
||||||
|
|
||||||
const jApi = inject('jApi');
|
|
||||||
const api = inject('api');
|
const api = inject('api');
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { notify } = useNotify();
|
const { notify } = useNotify();
|
||||||
|
@ -33,7 +32,7 @@ const statusIcons = {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const formInitialData = reactive({
|
const formInitialData = reactive({
|
||||||
schema: 'catalog',
|
collectionFk: 'catalog',
|
||||||
updateMatching: true
|
updateMatching: true
|
||||||
});
|
});
|
||||||
const imageCollections = ref([]);
|
const imageCollections = ref([]);
|
||||||
|
@ -45,9 +44,8 @@ const isSubmitable = computed(() =>
|
||||||
|
|
||||||
const getImageCollections = async () => {
|
const getImageCollections = async () => {
|
||||||
try {
|
try {
|
||||||
imageCollections.value = await jApi.query(
|
const { data } = await api.get('imageCollections');
|
||||||
'SELECT name, `desc` FROM imageCollection ORDER BY `desc`'
|
imageCollections.value = data;
|
||||||
);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error getting image collections:', error);
|
console.error('Error getting image collections:', error);
|
||||||
}
|
}
|
||||||
|
@ -61,38 +59,36 @@ const onSubmit = async data => {
|
||||||
const filteredFiles = addedFiles.value.filter(
|
const filteredFiles = addedFiles.value.filter(
|
||||||
file => file.uploadStatus === 'pending'
|
file => file.uploadStatus === 'pending'
|
||||||
);
|
);
|
||||||
const promises = filteredFiles.map((file, index) => {
|
const promises = filteredFiles.map(async (file, index) => {
|
||||||
const fileIndex = filteredFiles[index].index;
|
const fileIndex = filteredFiles[index].index;
|
||||||
addedFiles.value[fileIndex].uploadStatus = 'uploading';
|
addedFiles.value[fileIndex].uploadStatus = 'uploading';
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('updateMatching', data.updateMatching);
|
const now = new Date();
|
||||||
formData.append('image', file.file);
|
const timestamp = now.getTime();
|
||||||
formData.append('name', file.name);
|
const fileName = `${file.name}_${timestamp}`;
|
||||||
formData.append('schema', data.schema);
|
formData.append('image', file.file, fileName);
|
||||||
formData.append('srv', 'json:image/upload');
|
|
||||||
return api({
|
await api.post('images/uploadPhotoAdmin', formData, {
|
||||||
method: 'post',
|
params: {
|
||||||
url: location.origin,
|
name: fileName,
|
||||||
data: formData,
|
collection: data.collectionFk,
|
||||||
|
updateMatching: data.updateMatching
|
||||||
|
},
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'multipart/form-data'
|
'Content-Type': 'multipart/form-data'
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const results = await Promise.allSettled(promises);
|
const results = await Promise.allSettled(promises);
|
||||||
results.forEach((result, index) => {
|
results.forEach((result, index) => {
|
||||||
const fileIndex = filteredFiles[index].index;
|
const fileIndex = filteredFiles[index].index;
|
||||||
addedFiles.value[fileIndex].uploadStatus = result.status;
|
addedFiles.value[fileIndex].uploadStatus = result.status;
|
||||||
|
|
||||||
if (result.status === 'rejected') {
|
if (result.status === 'rejected') {
|
||||||
addedFiles.value[fileIndex].errorMessage = t(
|
addedFiles.value[fileIndex].errorMessage = t(
|
||||||
result.reason?.response?.data?.data?.message
|
result.reason?.response?.data?.data?.message
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const allSuccessful = results.every(
|
const allSuccessful = results.every(
|
||||||
result => result.status === 'fulfilled'
|
result => result.status === 'fulfilled'
|
||||||
);
|
);
|
||||||
|
@ -139,16 +135,17 @@ onMounted(async () => getImageCollections());
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<QPage class="vn-w-sm">
|
<QPage class="vn-w-sm">
|
||||||
<VnForm
|
<FormModel
|
||||||
ref="vnFormRef"
|
ref="vnFormRef"
|
||||||
:default-actions="false"
|
:default-actions="false"
|
||||||
:form-initial-data="formInitialData"
|
:form-initial-data="formInitialData"
|
||||||
separation-between-inputs="md"
|
separation-between-inputs="md"
|
||||||
show-bottom-actions
|
show-bottom-actions
|
||||||
|
:save-fn="onSubmit"
|
||||||
>
|
>
|
||||||
<template #form="{ data }">
|
<template #form="{ data }">
|
||||||
<VnSelect
|
<VnSelect
|
||||||
v-model="data.schema"
|
v-model="data.collectionFk"
|
||||||
:label="t('collection')"
|
:label="t('collection')"
|
||||||
option-label="desc"
|
option-label="desc"
|
||||||
option-value="name"
|
option-value="name"
|
||||||
|
@ -269,7 +266,7 @@ onMounted(async () => getImageCollections());
|
||||||
data-cy="photoUploadSubmitBtn"
|
data-cy="photoUploadSubmitBtn"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</VnForm>
|
</FormModel>
|
||||||
</QPage>
|
</QPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue