antv
73 lines
3.1 KiB
PHP
73 lines
3.1 KiB
PHP
@props(['mode', 'user' => null])
|
|
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<div class="w-16 h-16 rounded-full overflow-hidden border border-gray-200 shrink-0">
|
|
<img src="{{ ($user && $user->avatar) ? asset($user->avatar) : asset('images/avatar.png') }}" alt="Avatar" class="w-full h-full object-cover" id="avatar-preview" onerror="this.onerror=null; this.src='{{ asset('images/avatar.png') }}';">
|
|
</div>
|
|
@if($mode !== 'edit')
|
|
<div class="flex-1">
|
|
<label class="block text-[13px] font-bold text-gray-700 mb-1" for="avatar">Thay đổi ảnh đại diện</label>
|
|
<input type="file" name="avatar" id="avatar" accept="image/jpeg, image/png, image/webp" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-3 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-[#3462f7] file:text-white hover:file:bg-[#254edb]" onchange="previewAvatar(event)">
|
|
@error('avatar')<span class="text-red-500 text-[13px] font-semibold mt-1.5 block">{{ $message }}</span>@enderror
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if($mode !== 'edit')
|
|
<x-error-dialog id="modal-avatar-size-error" title="Ảnh quá lớn" message="Ảnh đại diện không được vượt quá 2MB. Vui lòng chọn ảnh nhẹ hơn!" buttonText="Đã hiểu" />
|
|
|
|
@once
|
|
@push('scripts')
|
|
<script>
|
|
// 1. Separate configuration to ease extension (Open/Closed Principle)
|
|
const AVATAR_CONFIG = {
|
|
MAX_SIZE_BYTES: 2 * 1024 * 1024, // 2MB
|
|
DEFAULT_IMG_SRC: '{{ asset('images/avatar.png') }}',
|
|
PREVIEW_ELEMENT_ID: 'avatar-preview'
|
|
};
|
|
|
|
// 2. Separate Validation function (Single Responsibility Principle)
|
|
function isValidAvatar(file) {
|
|
if (file.size > AVATAR_CONFIG.MAX_SIZE_BYTES) {
|
|
if (window.openModal) {
|
|
window.openModal('modal-avatar-size-error');
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
// 3. Separate UI Reset function (Single Responsibility Principle)
|
|
function resetAvatarInput(inputElement) {
|
|
inputElement.value = '';
|
|
document.getElementById(AVATAR_CONFIG.PREVIEW_ELEMENT_ID).src = AVATAR_CONFIG.DEFAULT_IMG_SRC;
|
|
}
|
|
|
|
// 4. Separate image rendering function (Single Responsibility Principle)
|
|
function renderAvatarPreview(file) {
|
|
const reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
document.getElementById(AVATAR_CONFIG.PREVIEW_ELEMENT_ID).src = e.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
// 5. Main function acting as Controller
|
|
function previewAvatar(event) {
|
|
const input = event.target;
|
|
if (!input.files || !input.files[0]) return;
|
|
|
|
const file = input.files[0];
|
|
|
|
if (!isValidAvatar(file)) {
|
|
resetAvatarInput(input);
|
|
return;
|
|
}
|
|
|
|
renderAvatarPreview(file);
|
|
}
|
|
</script>
|
|
@endpush
|
|
@endonce
|
|
@endif
|