Merge branch 'localEuge' into 'main'

Local euge

See merge request !5

angular.json

@@ -26,8 +26,11 @@
             ],
             "styles": [
               "src/styles.css"
+              
             ],
-            "scripts": []
+            "scripts": [
+              
+            ]
           },
           "configurations": {
             "production": {

package-lock.json

@@ -17,6 +17,7 @@
         "@angular/platform-browser-dynamic": "^15.1.0",
         "@angular/router": "^15.1.0",
         "bootstrap": "^5.3.0-alpha1",
+        "ngx-bootstrap": "^10.2.0",
         "rxjs": "~7.8.0",
         "tslib": "^2.3.0",
         "zone.js": "~0.12.0"
@@ -8126,6 +8127,21 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-10.2.0.tgz",
+      "integrity": "sha512-bn5wdvH6QQ2JGu4TgUbozdULBFMxZNPNTgO7dRiosx9FRrFvKcgxkGSgU/xoj+4kP1vgh8zwzaiDfvH/Bfb+Aw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^15.0.0",
+        "@angular/common": "^15.0.0",
+        "@angular/core": "^15.0.0",
+        "@angular/forms": "^15.0.0",
+        "rxjs": "^6.5.3 || ^7.6.0"
+      }
+    },
     "node_modules/nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser-dynamic": "^15.1.0",
     "@angular/router": "^15.1.0",
     "bootstrap": "^5.3.0-alpha1",
+    "ngx-bootstrap": "^10.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.12.0"

src/app/app.component.html

-
 <app-change-page></app-change-page>
 

src/app/app.module.ts

 import { NgModule } from '@angular/core';
-
 import { BrowserModule } from '@angular/platform-browser';
-
+import { AccordionModule } from 'ngx-bootstrap/accordion';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
@@ -11,6 +10,8 @@ import { ChangePageComponent } from './change-page/change-page.component';
 import { ListactivityComponent } from './listactivity/listactivity.component';
 import { ActivityComponent } from './activity/activity.component';
 import { DetailActivityComponent } from './detail-activity/detail-activity.component';
+import { StageAccordionComponent } from './stage-accordion/stage-accordion.component';
+import { StageDetailComponent } from './stage-detail/stage-detail.component';
 
 
 @NgModule({
@@ -21,12 +22,15 @@ import { DetailActivityComponent } from './detail-activity/detail-activity.compo
     ChangePageComponent,
     ListactivityComponent,
     ActivityComponent,
-    DetailActivityComponent
+    DetailActivityComponent,
+    StageAccordionComponent,
+    StageDetailComponent
 
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    AccordionModule.forRoot(),
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/change-page/change-page.component.html

 
     <div class="background">
-    <div class="border" id="border" (click)="changeclass()"></div>
+    <app-stage-accordion class="border" id="border" (click)="changeclass()"></app-stage-accordion>
     <app-activity-cards class="border2" id="border2" (click)="changeclass()"></app-activity-cards>
     </div>

src/app/mock-stage.ts

+import { Stage} from "./stage";
+
+export const STAGES: Stage[]=[{
+
+    id:1,
+    titre:"Stage en développement web",
+    description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue eros vitae magna tincidunt dictum. Sed at justo ac leo tristique tincidunt. Curabitur cursus velit eget dolor gravida placerat. Aenean eu est hendrerit, porttitor lacus id, tempor sem. Duis porttitor luctus efficitur. Etiam nec ante condimentum, euismod erat quis, bibendum urna.",
+
+},{
+    id:2,
+    titre:"Stage Product Owner",
+    description:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in metus augue. Maecenas turpis magna, commodo non semper at, feugiat ut nunc. Duis pellentesque fermentum lectus non hendrerit. Mauris auctor eget nulla a venenatis. Nam lacinia est elit, vel tempus nunc rhoncus ut. ",
+},
+{
+    id:3,
+    titre:"Stage data analyst",
+    description:"Ut non fringilla enim. Curabitur in orci massa. Cras fermentum diam id sodales fermentum. Nullam sed efficitur justo, consectetur tincidunt libero. Proin iaculis tellus velit, sit amet aliquet justo tempor laoreet. Curabitur elit tellus, interdum et libero id, ultrices lobortis odio. Integer id gravida orci.",
+},{
+    id:4,
+    titre:"Stage en tansition écologique",
+    description:"Cras varius mattis risus, vitae viverra nisi maximus et. Maecenas pellentesque vehicula mauris et tempus. Quisque et gravida turpis, ut tristique libero. Donec eu sapien id tellus dictum lobortis at sed erat. Vestibulum rhoncus venenatis aliquam. Phasellus auctor quis sem vel auctor. Cras ut condimentum sapien, ut tincidunt turpis. ",
+},{
+    id:5,
+    titre:"stage management du risque",
+    description:"Ut vitae tellus erat. In hac habitasse platea dictumst. Aenean eu rhoncus mauris, eu pharetra velit. Nulla efficitur a magna non gravida. Cras commodo enim in mauris porttitor ullamcorper. Praesent mauris neque, pulvinar nec ultricies sed, euismod vitae ex. Donec at neque eget tellus sodales volutpat. ",
+},{
+    id:6,
+    titre:"stage consultant en cybersécurité",
+    description:"Nullam porttitor purus a orci mollis, sit amet dictum erat accumsan. Fusce eu euismod dolor, a consectetur purus. Duis tempor dui odio. Nam at bibendum sapien. Aliquam aliquam consequat risus in tempus. Donec id egestas nisl. Etiam semper volutpat diam, vitae tristique sem aliquet id. Mauris viverra eleifend odio sed hendrerit.",
+},{
+    id:7,
+    titre:"Stage coordination projet télécom",
+    description:"Nulla facilisi. Ut commodo dui at eros rutrum vulputate. Morbi at tellus eu enim dapibus maximus vitae sit amet quam. Cras nec lectus ullamcorper, elementum magna vel, ultricies purus. Vivamus finibus fermentum tortor. Nullam suscipit, orci a lacinia efficitur, elit dui bibendum arcu, ac rutrum ante metus in libero. Nullam elementum eros et est malesuada, ac consectetur nunc sodales. ",
+},{
+    id:8,
+    titre:"stage consultant transformation digitale",
+    description:"Vivamus congue ipsum ante, ac pellentesque nunc cursus eu. In aliquam turpis erat, fringilla faucibus nunc dictum nec. Cras feugiat mattis nibh, eget dignissim nulla ornare nec. Aliquam malesuada, mi sit amet tincidunt condimentum, nulla ipsum posuere orci, ut blandit lacus dui sit amet magna. Integer pretium nisi eget scelerisque blandit. In dapibus arcu justo, vel convallis tortor viverra sed. Suspendisse nec egestas mauris.",
+}];
\ No newline at end of file

src/app/stage-accordion/stage-accordion.component.html

+<div class="w-100 h-100 p-5">
+    <h2 class="text-center color-bis mb-5">Trouvez le stage de vos rêves</h2>
+    <div class="accordion" id="accordionExample">
+        <div class="accordion-item" *ngFor="let stage of stages">
+            <h2 class="accordion-header" id="heading{{stage.id}}">
+                <button class="accordion-button" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#collapse{{stage.id}}" aria-expanded="true" aria-controls="collapse{{stage.id}}">
+                    {{stage.titre}}
+                </button>
+            </h2>
+            <div id="collapse{{stage.id}}" class="accordion-collapse collapse" aria-labelledby="heading{{stage.id}}"
+                data-bs-parent="#accordionExample">
+                <div class="accordion-body">
+                    {{stage.description}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/stage-accordion/stage-accordion.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StageAccordionComponent } from './stage-accordion.component';
+
+describe('StageAccordionComponent', () => {
+  let component: StageAccordionComponent;
+  let fixture: ComponentFixture<StageAccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StageAccordionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StageAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/stage-accordion/stage-accordion.component.ts

+import { Component } from '@angular/core';
+import { Stage } from '../stage';
+import { StageServiceService } from '../stage-service.service';
+
+@Component({
+  selector: 'app-stage-accordion',
+  templateUrl: './stage-accordion.component.html',
+  styleUrls: ['./stage-accordion.component.css']
+})
+export class StageAccordionComponent {
+    stages: Stage[]=[]
+
+    constructor(private StageService :StageServiceService){
+      this.stages=this.StageService.get();
+    }
+}

src/app/stage-detail/stage-detail.component.html

+<h2 class="accordion-header" id=`heading${stage.id}`>
+    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=`#collapse${stage.id}`
+        aria-expanded="true" aria-controls=`#collapse${stage.id}`>
+        {{stage.titre}}
+    </button>
+</h2>
+<div id=`#collapse${stage.id}` class="accordion-collapse collapse " aria-labelledby=`heading${stage.id}`
+    data-bs-parent="#accordionExample">
+    <div class="accordion-body">
+        {{stage.description}}
+     
+</div>
\ No newline at end of file

src/app/stage-detail/stage-detail.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StageDetailComponent } from './stage-detail.component';
+
+describe('StageDetailComponent', () => {
+  let component: StageDetailComponent;
+  let fixture: ComponentFixture<StageDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ StageDetailComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StageDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/stage-detail/stage-detail.component.ts

+import { Component, Input } from '@angular/core';
+import { Stage } from '../stage';
+import { StageServiceService } from '../stage-service.service';
+
+@Component({
+  selector: 'app-stage-detail',
+  templateUrl: './stage-detail.component.html',
+  styleUrls: ['./stage-detail.component.css']
+})
+export class StageDetailComponent {
+    @Input() stage! : Stage;
+
+    constructor(private StageService: StageServiceService){}
+}

src/app/stage-service.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { StageServiceService } from './stage-service.service';
+
+describe('StageServiceService', () => {
+  let service: StageServiceService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StageServiceService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/stage-service.service.ts

+import { Injectable } from '@angular/core';
+import { Stage } from './stage';
+import { STAGES } from './mock-stage';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StageServiceService {
+
+  constructor() { }
+
+  get(): Stage[]{
+      return(STAGES);
+  }
+}

src/app/stage.ts

+export interface Stage {
+    id:number;
+    titre:string;
+    description:string;
+}
\ No newline at end of file

src/index.html

 <!doctype html>
 <html lang="en">
 <head>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 </head>
 <body style="background-color: bisque; margin: 0px; overflow: hidden;">
-
   <app-root></app-root>
 </body>
 </html>