Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update PhotoUploader.vue

Browse Source
This commit is contained in:
Baghaztra 2025-10-27 21:47:36 +07:00
parent 884975181c
commit 3ef626d97a
1 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
resources/js/components/PhotoUploader.vue
View File

@ -195,7 +195,7 @@
</template> </template>
<script setup> <script setup>
import { ref, watch, onUnmounted } from 'vue'; import { ref, watch, onUnmounted, nextTick } from 'vue';
import axios from 'axios'; import axios from 'axios';
const props = defineProps({ const props = defineProps({
@ -211,7 +211,7 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'error']); const emit = defineEmits(['update:modelValue', 'error']);
const uploadedImages = ref([...props.modelValue]); const uploadedImages = ref([]);
const showUploadMenu = ref(false); const showUploadMenu = ref(false);
const fileInput = ref(null); const fileInput = ref(null);
const uploadLoading = ref(false); const uploadLoading = ref(false);
@ -224,19 +224,21 @@ const video = ref(null);
const canvas = ref(null); const canvas = ref(null);
let stream = null; let stream = null;
// Watch for external changes to modelValue // Initialize once
if (props.modelValue && props.modelValue.length > 0) {
uploadedImages.value = [...props.modelValue];
}
// Only watch for external changes, no bidirectional binding
watch( watch(
() => props.modelValue, () => props.modelValue,
(newVal) => { (newVal) => {
uploadedImages.value = [...newVal]; if (JSON.stringify(newVal) !== JSON.stringify(uploadedImages.value)) {
uploadedImages.value = newVal ? [...newVal] : [];
}
} }
); );
// Watch for internal changes to uploadedImages
watch(uploadedImages, (newVal) => {
emit('update:modelValue', newVal);
});
const toggleUploadMenu = () => { const toggleUploadMenu = () => {
if (!uploadLoading.value && uploadedImages.value.length < props.maxPhotos) { if (!uploadLoading.value && uploadedImages.value.length < props.maxPhotos) {
showUploadMenu.value = !showUploadMenu.value; showUploadMenu.value = !showUploadMenu.value;
@ -353,6 +355,8 @@ const uploadFile = async (file) => {
}, },
}); });
uploadedImages.value.push(response.data); uploadedImages.value.push(response.data);
// Emit update after adding image
emit('update:modelValue', [...uploadedImages.value]);
} catch (error) { } catch (error) {
console.error('Upload error:', error); console.error('Upload error:', error);
uploadError.value = error.response?.data?.message || 'Gagal mengupload foto'; uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@ -366,6 +370,8 @@ const removeImage = async (id) => {
headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }, headers: { Authorization: `Bearer ${localStorage.getItem('token')}` },
}); });
uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id); uploadedImages.value = uploadedImages.value.filter((i) => i.id !== id);
// Emit update after removing image
emit('update:modelValue', [...uploadedImages.value]);
} catch (error) { } catch (error) {
uploadError.value = 'Gagal menghapus foto'; uploadError.value = 'Gagal menghapus foto';
emit('error', uploadError.value); emit('error', uploadError.value);