Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/create cat #83

Merged
merged 3 commits into from
Sep 15, 2024
Merged

Feature/create cat #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ee364b6
wip create-edit cat
FazCodeFR Sep 12, 2024
407025b
Wip img
FazCodeFR Sep 15, 2024
6943a1f
Update et create cat
FazCodeFR Sep 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { AuthGuard } from '@auth0/auth0-angular';
import { TchatComponent } from './components/tchat/tchat.component';
import { AssociationsDetailsComponent } from './components/associations/associations-details/associations-details.component';
import { BugComponent } from './components/bug/bug.component';
import { AnimauxEditComponent } from './components/animaux/animaux-edit/animaux-edit.component';

const routes: Routes = [
{
Expand All @@ -41,6 +42,10 @@ const routes: Routes = [
path: 'contact',
component: ContactComponent,
},
{
path: 'animaux/ajouter',
component: AnimauxEditComponent,
},
{
path: 'animaux/:id',
component: AnimauxDetailsComponent,
Expand Down
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import { BugComponent } from './components/bug/bug.component';
import { AssociationsDetailsComponent } from './components/associations/associations-details/associations-details.component';
import { PaginatorModule } from 'primeng/paginator';
import { AssociationsFormComponent } from './components/associations/associations-form/associations-form.component';
import { AnimauxEditComponent } from './components/animaux/animaux-edit/animaux-edit.component';


@NgModule({
Expand Down Expand Up @@ -76,6 +77,7 @@ import { AssociationsFormComponent } from './components/associations/association
AssociationsDetailsComponent,
BugComponent,
AssociationsFormComponent,
AnimauxEditComponent,
],
imports: [
BrowserModule,
Expand Down
157 changes: 12 additions & 145 deletions src/app/components/animaux/animaux-details/animaux-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<div *ngIf="chat" class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div *ngIf="chat && userService.isAdmin" class="flex justify-center">
<button (click)="toggleEditMode()" class="focus:outline-none bg-white text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
{{ isEditMode ? 'Voir le rendu' : 'Édition' }}
</button>
</div>

<div *ngIf="chat && !isEditMode" class="px-4 py-16 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8 lg:py-20">
<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
<div>
<p class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
Catégorie : Chat
</p>
</div>
<button *ngIf="userService.isAdmin" (click)="toggleEditMode()" class="focus:outline-none bg-white text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
Édition
</button>

<button (click)="updateChat()" *ngIf="isEditMode"
class="focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
Sauvegarder
</button>

<!-- Bouton Favori -->
<fa-icon *ngIf="isAuthenticated" [icon]="chat.isFavori ? faHeart : fasHeart"
Expand All @@ -26,7 +24,6 @@
<div class="flex justify-center">
<h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tight text-gray-900 sm:text-2xl md:mx-auto">
<label *ngIf="!isEditMode" class="block">{{ chat.nom }}</label> <!-- class="block" pour assurer l'affichage correct -->
<input *ngIf="isEditMode" [(ngModel)]="chat.nom" name="nom" class="block w-full text-xl text-center rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:leading-6">
</h1>
</div>
</div>
Expand All @@ -35,43 +32,12 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh

<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="relative col-span-1 md:col-span-2">
<img [src]="chat.photos[0].url" class="object-cover w-full h-56 md:h-auto rounded shadow-lg" alt="" />
<div *ngIf="isEditMode" class="absolute right-0 bottom-0 mb-2 mr-2 space-x-2">
<button
class="text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 focus:outline-none">
Changer
<fa-icon [icon]="faUpload" aria-label="Upload" title="Upload" class="ml-1"></fa-icon>
</button>
<button
class="text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 focus:outline-none">
Supprimer
<fa-icon [icon]="faTrash" aria-label="Supprimer" title="Supprimer" class="ml-1"></fa-icon>
</button>
</div>
<img *ngIf="chat.photos && chat.photos[0]" [src]="s3Url + chat.photos[0].url" class="object-cover w-full h-56 md:h-auto rounded shadow-lg" alt="" />
</div>
<div *ngFor="let photo of chat.photos.slice(1); let i = index" class="relative">
<img [src]="photo.url" class="object-cover w-full h-48 rounded shadow-lg" alt="" />
<div *ngIf="isEditMode" class="absolute right-0 bottom-0 mb-2 mr-2 space-x-2">
<button
class="text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-3 py-1.5 focus:outline-none">
Changer
</button>
<button
class="text-white bg-red-500 hover:bg-red-600 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-1.5 focus:outline-none">
Supprimer
<fa-icon [icon]="faTrash" aria-label="Sexe" title="Male" class="ml-1"></fa-icon>
</button>
</div>
<img *ngIf="photo" [src]="s3Url + photo.url" class="object-cover w-full h-48 rounded shadow-lg" alt="" />
</div>

<!-- Bouton Rajouter des images -->
<div class="col-span-1 md:col-span-2" *ngIf="isEditMode">
<button
class="text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none w-full md:w-auto">
Rajouter des images
<fa-icon [icon]="faUpload" aria-label="Rajouter" title="Rajouter" class="ml-1"></fa-icon>
</button>
</div>
</div>

<div class="flex flex-col justify-center">
Expand All @@ -87,31 +53,6 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
<fa-icon *ngIf="chat.sexe === sexe.MALE" [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
style="color: Dodgerblue;"></fa-icon>
</p>
<div *ngIf="isEditMode">
<fieldset class="mt-4">
<div class="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
<div class="flex items-center">
<input id="male" name="sexe" type="radio" checked=""
[(ngModel)]="chat.sexe" [value]="'MALE'"
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
<label for="male" class="ml-3 block text-sm font-medium leading-6 text-gray-900">
Male
<fa-icon [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
style="color: Dodgerblue;"></fa-icon>
</label>
</div>
<div class="flex items-center">
<input id="sms" name="sexe" type="radio"
[(ngModel)]="chat.sexe" [value]="'FEMELLE'"
class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" >
<label for="sms" class="ml-3 block text-sm font-medium leading-6 text-gray-900">
Femelle <fa-icon [icon]="faVenus" aria-label="Sexe" title="Femelle" class="ml-2"
style="color: fuchsia;"></fa-icon>
</label>
</div>
</div>
</fieldset>
</div>
</div>
<div class="pb-4 mb-4 border-b">
<label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
Expand All @@ -120,12 +61,6 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
<p *ngIf="!isEditMode" class="text-sm text-gray-900">
J'ai {{ chat.age }} ans
</p>
<p *ngIf="isEditMode" class="text-sm text-gray-900">
J'ai
<input *ngIf="isEditMode" [(ngModel)]="chat.age" class="text-center rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:leading-6"
type="number" min="0" max="50" />
ans
</p>

</div>

Expand Down Expand Up @@ -153,51 +88,8 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
{{chat.ententeEnfant ? 'Avec les enfants' : 'Pas avec les enfants ❌'}}
</p>
</div>

<div *ngIf="isEditMode">
<div>
<!-- Entente avec les autres chats -->
<label>
<input type="radio" name="ententeChat" [(ngModel)]="chat.ententeChat" [value]="true"/>
Avec les autres chats
</label>

<label>
<input type="radio" name="ententeChat" [(ngModel)]="chat.ententeChat" [value]="false"/>
Pas avec les autres chats ❌
</label>
</div>

<div>
<!-- Entente avec les chiens -->
<label>
<input type="radio" name="ententeChien" [(ngModel)]="chat.ententeChien" [value]="true" />
Avec les chiens
</label>

<label>
<input type="radio" name="ententeChien" [(ngModel)]="chat.ententeChien" [value]="false" />
Pas avec les chiens ❌
</label>
</div>

<div>
<!-- Entente avec les enfants -->
<label>
<input type="radio" name="ententeEnfant" [(ngModel)]="chat.ententeEnfant" [value]="true"/>
Avec les enfants
</label>

<label>
<input type="radio" name="ententeEnfant" [(ngModel)]="chat.ententeEnfant" [value]="false"/>
Pas avec les enfants ❌
</label>
</div>
</div>

</div>


<div>
<label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
Association :
Expand All @@ -215,29 +107,6 @@ <h1 class="max-w-lg mb-6 font-sans text-2xl font-bold leading-none tracking-tigh
<label class="mb-2 block text-lg font-medium leading-5 text-gray-900">Description :</label>
<p *ngIf="!isEditMode" class="text-base text-gray-700" [innerHTML]="sanitizeHtml(chat.description)">
</p>

<editor *ngIf="isEditMode" modelEvents="change input undo redo setcontent closewindow"
ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove"
[(ngModel)]="chat.description" [init]="{

base_url: '/tinymce',
height: 500,
menubar: false,
plugins: [
],
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',

mergetags_list: [
{ value: 'First.Name', title: 'First Name' },
{ value: 'Email', title: 'Email' },
],

toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"></editor>
</div>

<div *ngIf="chat.vaccinations" class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
Expand All @@ -247,16 +116,14 @@ <h3 class="mb-4 text-xl font-semibold leading-6">Santé :</h3>
</p>
</div>

<button (click)="updateChat()" *ngIf="isEditMode"
class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Sauvegarder
</button>

<button *ngIf="!isEditMode" [routerLink]="['/tchat', chat.association.id]"
class="flex mx-auto mt-16 text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">
Contacter {{chat.nom }}
</button>

</div>

<app-animaux-edit *ngIf="isEditMode" [chat]="chat" [isCreationMode]="false"></app-animaux-edit>


<app-loader *ngIf="!isLoaded"></app-loader>
21 changes: 2 additions & 19 deletions src/app/components/animaux/animaux-details/animaux-details.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { ToastrService } from 'ngx-toastr';
import { AuthService } from '@auth0/auth0-angular';
import { UserService } from '../../../services/user.service';
import { Subscription, firstValueFrom } from 'rxjs';
import { environment } from 'src/environments/environment';

@Component({
selector: 'app-animaux-details',
Expand All @@ -31,6 +32,7 @@ export class AnimauxDetailsComponent {
isEditMode: boolean = false;
isAuthenticated: boolean = false;
private subscriptions = new Subscription();
s3Url = environment.s3Url;

constructor(
private route: ActivatedRoute,
Expand Down Expand Up @@ -69,25 +71,6 @@ export class AnimauxDetailsComponent {
});
}

updateChat() {
this.appService.updateChat(this.chat!).subscribe({
error: (error) => {
console.error('error:', error);
if (error?.error?.message) {
this.toastr.error(
error.error.message,
'Erreur de mise à jour du chat'
);
} else {
this.toastr.error('Erreur de mise à jour du chat');
}
},
complete: () => {
this.toastr.success('Chat mis à jour avec succès');
this.isEditMode = false;
},
});
}
getFavs() {
const favSubscription = this.appService.getFavorisByUser().subscribe({
next: (favoriIds: number[]) => {
Expand Down
Loading
Loading