technostrea/trouvetonprofile
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refacto et TU user

Browse Source
This commit is contained in:
styve Lioumba
2025-11-17 17:59:45 +01:00
parent 778cb95724
commit 9669b2b5b4
11 changed files with 377 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/shared/components/user-avatar-form/user-avatar-form.component.html
View File

@@ -1,69 +1,75 @@
@if (user) {
<h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white mb-4">Ma photo de profil</h3>
<div
class="w-40 h-40 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
>
@if (imagePreviewUrl != null) {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
[src]="imagePreviewUrl"
loading="lazy"
/>
} @else if (user.avatar) {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
src="{{ environment.baseUrl }}/api/files/users/{{ user.id }}/{{ user.avatar }}"
loading="lazy"
/>
} @else {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user.username }}"
loading="lazy"
/>
}
</div>
@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) {
<app-loading message="Mise à jour de la photo de profile..." />
} @else {
<ng-container *ngTemplateOutlet="content" />
}
<label
for="uploadFile1"
class="flex bg-gray-800 hover:bg-gray-700 text-white text-base px-5 py-3 outline-none rounded w-max cursor-pointer mx-auto font-[sans-serif]"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-2 fill-white inline"
viewBox="0 0 32 32"
>
<path
d="M23.75 11.044a7.99 7.99 0 0 0-15.5-.009A8 8 0 0 0 9 27h3a1 1 0 0 0 0-2H9a6 6 0 0 1-.035-12 1.038 1.038 0 0 0 1.1-.854 5.991 5.991 0 0 1 11.862 0A1.08 1.08 0 0 0 23 13a6 6 0 0 1 0 12h-3a1 1 0 0 0 0 2h3a8 8 0 0 0 .75-15.956z"
data-original="#000000"
/>
<path
d="M20.293 19.707a1 1 0 0 0 1.414-1.414l-5-5a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L15 16.414V29a1 1 0 0 0 2 0V16.414z"
data-original="#000000"
/>
</svg>
<small class="text-xs">Selectionner une image</small>
<input
type="file"
id="uploadFile1"
class="hidden"
accept="image/*"
(change)="onPictureChange($event)"
/>
</label>
<ng-template #content>
@if (user) {
<div
class="w-40 h-40 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
>
@if (imagePreviewUrl != null) {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
[src]="imagePreviewUrl"
loading="lazy"
/>
} @else if (user.avatar) {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
src="{{ environment.baseUrl }}/api/files/users/{{ user.id }}/{{ user.avatar }}"
loading="lazy"
/>
} @else {
<img
alt="{{ user!.username }}"
class="object-cover object-center h-full w-full rounded-full"
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user.username }}"
loading="lazy"
/>
}
</div>
}
@if (file != null || imagePreviewUrl != null) {
<button
type="button"
[ngClass]="{ 'bg-purple-600': file != null || imagePreviewUrl != null }"
class="!mt-2 px-6 py-2 w-full bg-[#333] hover:bg-[#444] text-sm text-white mx-auto block"
(click)="onUserAvatarFormSubmit()"
<label
for="uploadFile1"
class="flex bg-gray-800 hover:bg-gray-700 text-white text-base px-5 py-3 outline-none rounded w-max cursor-pointer mx-auto font-[sans-serif]"
>
Mettre à jour ma photo de profile
</button>
}
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 mr-2 fill-white inline"
viewBox="0 0 32 32"
>
<path
d="M23.75 11.044a7.99 7.99 0 0 0-15.5-.009A8 8 0 0 0 9 27h3a1 1 0 0 0 0-2H9a6 6 0 0 1-.035-12 1.038 1.038 0 0 0 1.1-.854 5.991 5.991 0 0 1 11.862 0A1.08 1.08 0 0 0 23 13a6 6 0 0 1 0 12h-3a1 1 0 0 0 0 2h3a8 8 0 0 0 .75-15.956z"
data-original="#000000"
/>
<path
d="M20.293 19.707a1 1 0 0 0 1.414-1.414l-5-5a1 1 0 0 0-1.414 0l-5 5a1 1 0 0 0 1.414 1.414L15 16.414V29a1 1 0 0 0 2 0V16.414z"
data-original="#000000"
/>
</svg>
<small class="text-xs">Selectionner une image</small>
<input
type="file"
id="uploadFile1"
class="hidden"
accept="image/*"
(change)="onPictureChange($event)"
/>
</label>
@if (file != null || imagePreviewUrl != null) {
<button
type="button"
[ngClass]="{ 'bg-purple-600': file != null || imagePreviewUrl != null }"
class="!mt-2 px-6 py-2 w-full bg-[#333] hover:bg-[#444] text-sm text-white mx-auto block"
(click)="onUserAvatarFormSubmit()"
>
Mettre à jour ma photo de profile
</button>
}
</ng-template>