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

LMST2-58 Create association detail page #55

Merged
merged 2 commits into from
Jun 5, 2024
Merged

LMST2-58 Create association detail page #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2bf3499
Create association detail page
marion-sgr Jun 5, 2024
0c7a059
Merge branch 'main' into LMST2-58-Detail-Association
marion-sgr Jun 5, 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
47 changes: 23 additions & 24 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
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 @@ -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 = [
Expand Down Expand Up @@ -54,6 +55,10 @@ const routes: Routes = [
component: DonsComponent,
data: { state: 'dons' },
},
{
path: 'associations/:id',
component: AssociationsDetailsComponent,
},
{
path: 'associations',
component: AssociationsListComponent,
Expand Down
4 changes: 3 additions & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -69,6 +70,7 @@ import { BugComponent } from './components/bug/bug.component';
TchatComponent,
TchatIconComponent,
TchatMessageComponent,
AssociationsDetailsComponent,
BugComponent,
],
imports: [
Expand Down
146 changes: 146 additions & 0 deletions src/app/components/associations/associations-details/associations-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Empty file added src/app/components/associations/associations-details/associations-details.component.scss
View file
Open in desktop
Empty file.
21 changes: 21 additions & 0 deletions src/app/components/associations/associations-details/associations-details.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
});
});
Loading
Loading