104 lines
2.8 KiB
JavaScript
104 lines
2.8 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import {
|
|
FlatList,
|
|
Image,
|
|
RefreshControl,
|
|
Text,
|
|
TouchableOpacity,
|
|
View,
|
|
} from "react-native";
|
|
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
|
|
import * as Sentry from "sentry-expo";
|
|
|
|
import cleanAxios from "../../util/CleanAxios";
|
|
|
|
export default function JobDocumentsLocalComponent({ bodyshop, job }) {
|
|
const [previewVisible, setPreviewVisible] = useState(false);
|
|
const [images, setImages] = useState([]);
|
|
const [imgIndex, setImgIndex] = useState(0);
|
|
useEffect(() => {
|
|
if (job.id) {
|
|
getPhotos({ bodyshop, jobid: job.id, setImages });
|
|
}
|
|
}, [job.id, bodyshop]);
|
|
|
|
const onRefresh = async () => {
|
|
return getPhotos({ bodyshop, jobid: job.id, setImages });
|
|
};
|
|
|
|
return (
|
|
<View style={{ flex: 1 }}>
|
|
<FlatList
|
|
refreshControl={
|
|
<RefreshControl refreshing={false} onRefresh={onRefresh} />
|
|
}
|
|
data={images}
|
|
numColumns={4}
|
|
style={{ flex: 1 }}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={(object) => (
|
|
<TouchableOpacity
|
|
style={{ flex: 1 / 4, aspectRatio: 1, margin: 4 }}
|
|
onPress={async () => {
|
|
setImgIndex(object.index);
|
|
setPreviewVisible(true);
|
|
}}
|
|
>
|
|
<Image
|
|
style={{ flex: 1 }}
|
|
resizeMode="cover"
|
|
source={{
|
|
uri: object.item.thumbUrl,
|
|
aspectRatio: 1,
|
|
}}
|
|
/>
|
|
</TouchableOpacity>
|
|
)}
|
|
/>
|
|
<Text>
|
|
{images?.filter((d) => d.type?.mime?.startsWith("image")).length}
|
|
</Text>
|
|
|
|
<MediaCacheOverlay
|
|
photos={images}
|
|
imgIndex={imgIndex}
|
|
setImgIndex={setImgIndex}
|
|
previewVisible={previewVisible}
|
|
setPreviewVisible={setPreviewVisible}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
async function getPhotos({ bodyshop, jobid, setImages }) {
|
|
const localmediaserverhttp = bodyshop.localmediaserverhttp.trim();
|
|
try {
|
|
const imagesFetch = await cleanAxios.post(
|
|
`${localmediaserverhttp}/jobs/list`,
|
|
{
|
|
jobid,
|
|
},
|
|
{ headers: { ims_token: bodyshop.localmediatoken } }
|
|
);
|
|
|
|
const normalizedImages = imagesFetch.data
|
|
.filter((d) => d.type?.mime?.startsWith("image"))
|
|
.map((d, idx) => {
|
|
return {
|
|
...d,
|
|
// src: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
|
|
|
|
uri: `${bodyshop.localmediaserverhttp}/${d.src}`.replace("//", "/"),
|
|
thumbUrl: `${bodyshop.localmediaserverhttp}/${d.thumbnail}`.replace(
|
|
"//",
|
|
"/"
|
|
),
|
|
id: idx,
|
|
};
|
|
});
|
|
setImages(normalizedImages);
|
|
} catch (error) {
|
|
Sentry.Native.captureException(error);
|
|
}
|
|
}
|