Merge pull request #55 from Potits-chats/LMST2-58-Detail-Association

LMST2-58 Create association detail page
Potits-chats · Jun 5, 2024 · e9c9177 · e9c9177 · vercel · Jun 5, 2024
2 parents 4098e57 + 0c7a059
commit e9c9177
Show file tree

Hide file tree

Showing 11 changed files with 320 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@tinymce/tinymce-angular": "^8.0.0",
     "ngx-toastr": "^18.0.0",
+    "primeicons": "^7.0.0",
     "primeng": "^16.9.1",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.7.5",

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -15,6 +15,7 @@ import { CguComponent } from './components/cgu/cgu.component';
 import { ErreurComponent } from './components/erreur/erreur.component';
 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';
 
 const routes: Routes = [
@@ -54,6 +55,10 @@ const routes: Routes = [
     component: DonsComponent,
     data: { state: 'dons' },
   },
+  {
+    path: 'associations/:id',
+    component: AssociationsDetailsComponent,
+  },
   {
     path: 'associations',
     component: AssociationsListComponent,

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -42,11 +42,12 @@ import { TchatMessageComponent } from './components/tchat/tchat-message/tchat-me
 
 import { FileUploadModule } from 'primeng/fileupload';
 import { AccordionModule } from 'primeng/accordion';
-
 import { ToastModule } from 'primeng/toast';
 import { BugComponent } from './components/bug/bug.component';
 
 
+import { AssociationsDetailsComponent } from './components/associations/associations-details/associations-details.component';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -69,6 +70,7 @@ import { BugComponent } from './components/bug/bug.component';
     TchatComponent,
     TchatIconComponent,
     TchatMessageComponent,
+    AssociationsDetailsComponent,
     BugComponent,
   ],
   imports: [

diff --git a/src/app/components/associations/associations-details/associations-details.component.html b/src/app/components/associations/associations-details/associations-details.component.html
@@ -0,0 +1,146 @@
+<div *ngIf="asso" 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 : Association
+            </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)="updateAsso()" *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>
+
+        <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">{{ asso.nom }}</label> <!-- class="block" pour assurer l'affichage correct -->
+                <input *ngIf="isEditMode" [(ngModel)]="asso.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>
+
+    <div class="grid max-w-screen-lg gap-8 lg:grid-cols-2 sm:mx-auto">
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <div class="relative col-span-1 md:col-span-2">
+                <img [src]="asso.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>
+            </div>
+            <div *ngFor="let photo of asso.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>
+            </div>
+
+            <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">
+            <div class="pb-4 mb-4 border-b">
+                <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
+                    Ville :
+                </label>
+                <label *ngIf="!isEditMode" class="block">{{ asso.ville }}</label> <!-- class="block" pour assurer l'affichage correct -->
+                <input *ngIf="isEditMode" [(ngModel)]="asso.ville" name="ville" class="block w-full text-sm 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">
+
+
+            </div>
+
+            <div *ngIf="asso.tel" class="pb-4 mb-4 border-b">
+                <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
+                    N° de téléphone :
+                </label>
+                <p class="text-sm text-gray-900">
+                    {{asso.tel}}
+                </p>
+            </div>
+
+            <div>
+                <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
+                    Site Web :
+                </label>
+                <a class="text-sm text-gray-900" [attr.href]="sanitizeUrl(asso.url)">
+                    {{asso.url}}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <!-- New description block -->
+    <div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
+        <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">Description :</label>
+        <p *ngIf="!isEditMode" class="text-base text-gray-700" [innerHTML]="sanitizeHtml(asso.description ?? '')">
+        </p>
+
+        <editor *ngIf="isEditMode" modelEvents="change input undo redo setcontent closewindow"
+            ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove"
+            [(ngModel)]="asso.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>
+
+    <!-- Map integration to make dynamic -->
+    <!-- <div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
+        <label class="mb-2 block text-sm font-medium leading-5 text-gray-900">
+            Adresse :
+        </label>
+        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d369583.3585773802!2d0.7940654177299492!3d43.64047001863679!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12aea52dc1fad8e5%3A0x18307a79d79383ea!2sLes%20Chats%20de%20l&#39;Espoir%20du%2031%20(Blagnac%20-%20Toulouse)!5e0!3m2!1sfr!2sfr!4v1717587656821!5m2!1sfr!2sfr" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div> -->
+
+    <button (click)="updateAsso()" *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"
+        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 {{asso.nom }}
+    </button>
+
+</div>
diff --git a/src/app/components/associations/associations-details/associations-details.component.scss b/src/app/components/associations/associations-details/associations-details.component.scss
diff --git a/src/app/components/associations/associations-details/associations-details.component.spec.ts b/src/app/components/associations/associations-details/associations-details.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AssociationsDetailsComponent } from './associations-details.component';
+
+describe('AssociationsDetailsComponent', () => {
+  let component: AssociationsDetailsComponent;
+  let fixture: ComponentFixture<AssociationsDetailsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AssociationsDetailsComponent]
+    });
+    fixture = TestBed.createComponent(AssociationsDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});