feat(form): Remove old form components

.gitlab-ci.yml

@@ -128,7 +128,6 @@ sonarqube:
       -Dsonar.host.url=${SONAR_URL}
       -Dsonar.projectKey=${SONAR_PROJECT_KEY}
       -Dsonar.login=${SONAR_TOKEN}
-      -Dsonar.cpd.exclusions=tests/**,src/**/*.spec.ts*,src/app/form/structure-form/form.component.ts,src/app/form/structure-form/form.component.html
       -Dsonar.qualitygate.wait=true
 
 sonarqube-mr:
@@ -153,5 +152,4 @@ sonarqube-mr:
       -Dsonar.host.url=${SONAR_URL}
       -Dsonar.projectKey=${SONAR_PROJECT_KEY}
       -Dsonar.login=${SONAR_MR_TOKEN}
-      -Dsonar.cpd.exclusions=tests/**,src/**/*.spec.ts*,src/app/form/structure-form/form.component.ts,src/app/form/structure-form/form.component.html
       -Dsonar.qualitygate.wait=true

api/Dockerfile

-# Based on Node.js
-FROM node:12.16
-
-WORKDIR /app
-
-# Copy the package.json file first in order to cache the modules
-COPY . .
-
-# Install npm dependencies
-RUN npm install
-
-# expose port 3000
-EXPOSE 3000
-
-CMD ["npm", "start"]

api/package.json

-{
-  "name": "pamn-mock-api",
-  "version": "0.1.0",
-  "scripts": {
-    "start": "node server.js"
-  },
-  "private": true,
-  "dependencies": {
-    "json-server": "^0.16.2"
-  }
-}

api/server.js

-const jsonServer = require('json-server');
-const server = jsonServer.create();
-const router = jsonServer.router('db.json');
-const routes = {
-  '/api/*': '/$1',
-};
-const middlewares = [jsonServer.defaults(), jsonServer.rewriter(routes)];
-
-// Set default middlewares (logger, static, cors and no-cache)
-server.use(middlewares);
-
-// Add custom routes before JSON Server router
-server.get('/structures/count', (req, res) => {
-  let structureCountTab = [];
-  // Compétences de base
-  structureCountTab.push({ id: '260', count: 12 });
-  structureCountTab.push({ id: '259', count: 10 });
-  structureCountTab.push({ id: '261', count: 10 });
-  structureCountTab.push({ id: '249', count: 9 });
-  structureCountTab.push({ id: '222', count: 9 });
-  structureCountTab.push({ id: '212', count: 8 });
-  structureCountTab.push({ id: '186', count: 7 });
-  structureCountTab.push({ id: '183', count: 6 });
-  // Accès aux droits
-  structureCountTab.push({ id: '176', count: 6 });
-  structureCountTab.push({ id: '175', count: 1 });
-  structureCountTab.push({ id: '174', count: 2 });
-  structureCountTab.push({ id: '173', count: 2 });
-  structureCountTab.push({ id: '172', count: 2 });
-  structureCountTab.push({ id: '171', count: 4 });
-  structureCountTab.push({ id: '167', count: 3 });
-  structureCountTab.push({ id: '165', count: 2 });
-  // Insertion sociale et professionnelle
-  structureCountTab.push({ id: '254', count: 5 });
-  structureCountTab.push({ id: '240', count: 4 });
-  structureCountTab.push({ id: '194', count: 7 });
-  structureCountTab.push({ id: '193', count: 7 });
-  structureCountTab.push({ id: '192', count: 5 });
-  structureCountTab.push({ id: '191', count: 7 });
-  structureCountTab.push({ id: '262', count: 5 });
-  structureCountTab.push({ id: '263', count: 3 });
-  structureCountTab.push({ id: '3', count: 3 });
-  // Aide à la parentalité
-  structureCountTab.push({ id: '257', count: 4 });
-  structureCountTab.push({ id: '238', count: 1 });
-  structureCountTab.push({ id: '178', count: 4 });
-  structureCountTab.push({ id: '166', count: 2 });
-  // Culture et sécurité numérique
-  structureCountTab.push({ id: '264', count: 5 });
-  structureCountTab.push({ id: '255', count: 7 });
-  structureCountTab.push({ id: '265', count: 2 });
-  structureCountTab.push({ id: '232', count: 4 });
-  structureCountTab.push({ id: '225', count: 5 });
-  structureCountTab.push({ id: '221', count: 3 });
-  structureCountTab.push({ id: '218', count: 2 });
-  structureCountTab.push({ id: '209', count: 3 });
-  structureCountTab.push({ id: '208', count: 4 });
-  structureCountTab.push({ id: '206', count: 5 });
-  structureCountTab.push({ id: '195', count: 5 });
-  structureCountTab.push({ id: '164', count: 4 });
-  structureCountTab.push({ id: '163', count: 2 });
-  structureCountTab.push({ id: '162', count: 3 });
-  // Accompagnement des démarches
-  structureCountTab.push({ id: 'Accompagnant CAF', count: 7 });
-  structureCountTab.push({ id: 'Pôle Emploi', count: 9 });
-  structureCountTab.push({ id: 'CPAM', count: 7 });
-  structureCountTab.push({ id: 'Impôts', count: 6 });
-  structureCountTab.push({ id: 'Logement', count: 5 });
-  structureCountTab.push({ id: 'CARSAT', count: 5 });
-  structureCountTab.push({ id: 'Autres', count: 2 });
-  // Publics acceptés
-  structureCountTab.push({ id: 'Tout public', count: 7 });
-  structureCountTab.push({ id: 'Moins de 16 ans', count: 4 });
-  structureCountTab.push({ id: 'Jeunes (16-25 ans)', count: 6 });
-  structureCountTab.push({ id: 'Adultes', count: 9 });
-  structureCountTab.push({ id: 'Séniors (+ de 65 ans)', count: 1 });
-  // Labels et qualifications
-  structureCountTab.push({ id: 'Aidants Connect', count: 0 });
-  structureCountTab.push({ id: 'Espace public numérique (EPN)', count: 2 });
-  structureCountTab.push({ id: 'Fabrique de territoire', count: 3 });
-  structureCountTab.push({ id: 'Maison France Service', count: 0 });
-  structureCountTab.push({ id: 'Pass numérique', count: 4 });
-  // Modalités d'accès
-  structureCountTab.push({ id: 'Uniquement sur RDV', count: 13 });
-  structureCountTab.push({ id: 'Accès libre', count: 6 });
-  structureCountTab.push({ id: 'Téléphone / Visio', count: 6 });
-  // Accompagnement des publics
-  structureCountTab.push({ id: "Personnes en situation d'illetrisme", count: 0 });
-  structureCountTab.push({ id: 'Langue étrangère (anglais)', count: 0 });
-  structureCountTab.push({ id: 'Langues étrangères (autres)', count: 0 });
-  structureCountTab.push({ id: 'Surdité', count: 0 });
-  structureCountTab.push({ id: 'Déficience visuelle', count: 0 });
-  structureCountTab.push({ id: 'Handicap moteur', count: 0 });
-  // Équipements et services proposés
-  structureCountTab.push({ id: 'Wifi en accès libre', count: 6 });
-  structureCountTab.push({ id: 'Ordinateurs', count: 5 });
-  structureCountTab.push({ id: 'Tablettes', count: 1 });
-  structureCountTab.push({ id: 'Bornes numériques', count: 1 });
-  structureCountTab.push({ id: 'Imprimantes', count: 5 });
-  structureCountTab.push({ id: 'Prêt / don de matériels', count: 0 });
-  structureCountTab.push({ id: 'Reconditionnements de matériel', count: 0 });
-  structureCountTab.push({ id: 'Accès à des revues ou livres informatiques et numériques', count: 0 });
-
-  return res.status(200).jsonp(structureCountTab);
-});
-
-// Use default router
-server.use(router);
-server.listen(3000, () => {
-  console.log('JSON Server is running');
-});

package.json

@@ -13,8 +13,7 @@
     "lint": "ng lint",
     "e2e": "ng e2e",
     "release": "standard-version",
-    "translate": "ng xi18n --ivy --output-path src/locale --out-file messages.en.xlf",
-    "api": "json-server api/db.json --routes api/routes.json --no-cors=true"
+    "translate": "ng xi18n --ivy --output-path src/locale --out-file messages.en.xlf"
   },
   "private": true,
   "dependencies": {
@@ -33,7 +32,6 @@
     "@ngx-translate/core": "^13.0.0",
     "ag-grid-angular": "^26.2.0",
     "ag-grid-community": "^26.2.1",
-    "json-server": "^0.17.0",
     "jwt-decode": "^3.1.2",
     "leaflet": "^1.7.1",
     "leaflet.locatecontrol": "^0.72.0",

src/app/app-routing.module.ts

@@ -5,11 +5,8 @@ import { ContactComponent } from './contact/contact.component';
 import { FooterComponent } from './footer/footer.component';
 import { StructureListPrintComponent } from './form/orientation-form/component/structure-list-print/structure-list-print.component';
 import { OrientationFormComponent } from './form/orientation-form/orientation-form.component';
-import { FormComponent } from './form/structure-form/form.component';
 import { AdminGuard } from './guards/admin.guard';
 import { AuthGuard } from './guards/auth.guard';
-import { DeactivateGuard } from './guards/deactivate.guard';
-import { RoleGuard } from './guards/role.guard';
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { LoginComponent } from './login/login.component';
 import { NewsletterSubscriptionComponent } from './newsletter-subscription/newsletter-subscription.component';
@@ -18,9 +15,7 @@ import { EditComponent } from './profile/edit/edit.component';
 import { ResetEmailComponent } from './reset-email/reset-email.component';
 import { ResetPasswordComponent } from './reset-password/reset-password.component';
 import { StructureResolver } from './resolvers/structure.resolver';
-import { TempUserResolver } from './resolvers/temp-user.resolver';
 import { PasswordFormComponent } from './shared/components';
-import { RouteRole } from './shared/enum/routeRole.enum';
 import { StructureJoinComponent } from './structure-join/structure-join.component';
 import { StructureDetailsComponent } from './structure-list/components/structure-details/structure-details.component';
 import { StructureListComponent } from './structure-list/structure-list.component';
@@ -126,20 +121,6 @@ const routes: Routes = [
       footerOutletRoute,
     ],
   },
-  {
-    path: 'register',
-    children: [
-      {
-        path: '',
-        component: FormComponent,
-        canDeactivate: [DeactivateGuard],
-        resolve: {
-          user: TempUserResolver,
-        },
-      },
-      footerOutletRoute,
-    ],
-  },
   {
     path: 'change-email/:id',
     children: [

src/app/app.module.ts

@@ -21,7 +21,6 @@ import { ModalFilterComponent } from './structure-list/components/modal-filter/m
 import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
 import { PageComponent } from './page/page.component';
 import { ContactComponent } from './contact/contact.component';
-import { FormComponent } from './form/structure-form/form.component';
 import { AuthGuard } from './guards/auth.guard';
 import { CustomHttpInterceptor } from './config/http-interceptor';
 import { ResetEmailComponent } from './reset-email/reset-email.component';
@@ -62,7 +61,6 @@ import { LoginComponent } from './login/login.component';
     ContactComponent,
     ResetEmailComponent,
     ResetPasswordComponent,
-    FormComponent,
     StructureJoinComponent,
     NewsletterSubscriptionComponent,
     OrientationFormComponent,

src/app/form/orientation-form/orientation-form.component.scss

@@ -5,15 +5,214 @@
 @import '../../../assets/scss/typography';
 @import '../../../assets/scss/buttons';
 
-.body-wrap {
-  height: 400px;
+h3 {
+  margin: 0;
+}
+
+h4 {
+  margin-bottom: 16px;
+}
+
+.form {
+  background: $grey-7;
+  width: 100vw;
+  height: calc(var(--vh, 1vh) * 100 - #{$header-height});
+  top: #{$header-height};
+  z-index: $structure-details-z-index;
+  @media #{$tablet} {
+    height: calc(var(--vh, 1vh) * 100 - #{$header-height});
+    position: fixed; //Hide default header app.
+  }
+}
+
+.content {
+  padding: 0 16px;
+  display: block;
+  overflow-y: auto;
+  height: auto;
+  h3 {
+    @include lato-bold-26;
+
+    @media #{$tablet} {
+      @include lato-bold-22;
+    }
+  }
+  .page {
+    max-width: 980px;
+    box-sizing: border-box;
+    margin: auto;
+    min-height: 450px;
+    max-height: 75vh;
+    overflow-y: auto;
+    color: $grey-1;
+    background: $white;
+    border-radius: 8px;
+    border: 1px solid $grey-6;
+    padding: 32px 24px 32px 48px;
+
+    .title {
+      margin-bottom: 16px;
+    }
+    .welcomingTerms,
+    .procedureContainer,
+    .otherServices,
+    .textareaBlock {
+      max-width: 600px;
+    }
+  }
+  p {
+    color: $grey-1;
+    @include lato-regular-14;
+    margin: 7px 0 0 0;
+  }
+  .textareaBlock {
+    @media #{$tablet} {
+      max-width: 90%;
+    }
+    p {
+      text-align: right;
+      @include lato-regular-14;
+      color: $grey-3;
+      font-style: italic;
+    }
+  }
+}
+.form-group {
+  &.facebook,
+  &.twitter,
+  &.instagram,
+  &.linkedin,
+  &.website,
+  div {
+    height: 44px;
+  }
 }
 
-.titleCateg {
+img {
+  max-height: 340px;
+}
+
+// collapse
+.collapse {
+  border: 1px solid $grey-5;
+  border-radius: 4px;
+  margin-bottom: 13px;
+  max-width: 600px;
+  @media #{$small-phone} {
+    width: 95% !important;
+  }
+  @media #{$tablet} {
+    width: 296px;
+  }
+  &.notCollapsed {
+    margin-bottom: 8px;
+    background: $grey-8;
+    .logo {
+      .hide {
+        display: none;
+      }
+      .show {
+        display: block;
+      }
+    }
+  }
+  .form-group {
+    margin: 0;
+    color: $grey-2;
+    @include lato-regular-14;
+    &.website,
+    &.facebook,
+    &.twitter,
+    &.instagram,
+    &.linkedin {
+      svg {
+        height: 22px;
+        width: 22px;
+        padding: 6px;
+      }
+      &:focus-within {
+        input {
+          border-color: $grey-3;
+          fill: $primary-color;
+        }
+      }
+    }
+    app-svg-icon {
+      padding-top: 12px;
+      margin-right: 0 !important;
+    }
+  }
+  .titleCollapse {
     width: 100%;
     @include lato-bold-16;
-  padding: 1.5em;
     color: $grey-2;
+    p {
+      color: $grey-2;
+      @include lato-bold-16;
+    }
+  }
+  .collapseHeader {
+    height: 65px;
+    padding: 0 15px 0 12px;
+    cursor: pointer;
+  }
+  .logo {
+    height: 24px;
+    width: 24px;
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: $grey-1;
+    }
+  }
+  .logo,
+  .titleCollapse {
+    .hide {
+      display: block;
+    }
+    .show {
+      display: none;
+    }
+  }
+}
+
+.tags {
+  padding: 8px;
+  button {
+    background: $grey-8;
+    border-radius: 20px;
+    margin: 4px;
+    max-width: 100%;
+    height: 40px;
+    padding: 0 13px;
+    @include lato-bold-14;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    &.selectedChoice {
+      background: $green-1 !important;
+      color: $white;
+    }
+  }
+  svg {
+    width: 20px;
+    height: 10px;
+    margin-right: 4px;
+    stroke: $grey-8;
+  }
+}
+.textBtn {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  width: 100%;
+  margin-right: 12px;
+}
+
+.section {
+  padding-bottom: 2rem;
 }
 
 .titleInfo {
@@ -25,10 +224,6 @@
   .validateIcon {
     height: 38px !important;
   }
-  .markerIcon {
-    height: 38px !important;
-    cursor: pointer;
-  }
 }
 
 .nbStructure-panel {
@@ -56,10 +251,6 @@
   margin: 0 0.5em;
 }
 
-.form-override {
-  height: unset !important;
-}
-
 .form-footer {
   padding: 17px 0;
   width: 100%;

src/app/form/orientation-form/orientation-form.component.ts

@@ -19,7 +19,7 @@ import { PageTypeEnum } from './pageType.enum';
 @Component({
   selector: 'app-orientation-form',
   templateUrl: './orientation-form.component.html',
-  styleUrls: ['./orientation-form.component.scss', '../structure-form/form.component.scss'],
+  styleUrls: ['./orientation-form.component.scss'],
 })
 export class OrientationFormComponent implements OnInit {
   public displayMapMarkerId: string;

src/app/form/structure-form/form.component.scss

-@import '../../../assets/scss/layout';
-@import '../../../assets/scss/breakpoint';
-@import '../../../assets/scss/color';
-@import '../../../assets/scss/typography';
-@import '../../../assets/scss/shapes';
-@import '../../../assets/scss/z-index';
-
-.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-h3 {
-  margin: 0;
-}
-
-h4 {
-  margin-bottom: 16px;
-}
-
-.form {
-  background: $grey-7;
-  width: 100vw;
-  height: calc(var(--vh, 1vh) * 100 - #{$header-height});
-  top: #{$header-height};
-  z-index: $structure-details-z-index;
-  @media #{$tablet} {
-    height: calc(var(--vh, 1vh) * 100 - #{$header-height});
-    position: fixed; //Hide default header app.
-  }
-}
-
-.footer {
-  width: 100%;
-  max-width: 980px;
-  margin: 20px auto;
-  text-align: center;
-  &.desktop {
-    @media #{$tablet} {
-      display: none;
-    }
-  }
-
-  &.phone {
-    display: none;
-    @media #{$tablet} {
-      margin: 0 auto;
-      //border-top: 1px solid $grey-4;
-      display: block;
-    }
-  }
-}
-.header {
-  height: #{$header-height-phone};
-  line-height: #{$header-height-phone};
-  display: none;
-  align-items: center;
-  justify-content: space-between;
-  text-align: center;
-  border-bottom: solid 1px $grey-4;
-  background-color: $grey-1;
-  color: $white;
-  padding: 0 20px;
-  @media #{$tablet} {
-    display: block !important;
-  }
-  .container-icoMenu {
-    width: 100%;
-    position: absolute;
-    height: 50px;
-
-    .block-iconMenu {
-      right: 44px;
-      width: 50px;
-      height: 50px;
-      position: absolute;
-    }
-    .ico-menu {
-      right: 13px;
-      top: 24px;
-      background: $white;
-      &::after {
-        background: $white;
-      }
-      &::before {
-        background: $white;
-      }
-    }
-  }
-}
-.content {
-  .editHome {
-    height: calc(
-      100vh - #{$header-height} - #{$footer-height} - 81px - 1px - 55px - 48px
-    ) !important; // -1px because of header border
-  }
-  @media #{$tablet} {
-    &.editMode {
-      .page {
-        height: calc(
-          100vh - #{$header-height-phone} - #{$footer-height-phone} - 87px - 1px
-        ); // -1px because of header border
-      }
-      .editHome {
-        height: unset !important; // -1px because of header border
-        margin-bottom: 80px;
-      }
-    }
-  }
-  padding: 0 16px;
-  display: block;
-  overflow-y: auto;
-  height: auto;
-  h2 {
-    @include lato-bold-26;
-    color: $black;
-    margin-bottom: 0;
-    span {
-      color: $primary-color;
-    }
-  }
-  h3 {
-    @include lato-bold-26;
-
-    @media #{$tablet} {
-      @include lato-bold-22;
-    }
-  }
-  .page {
-    max-width: 980px;
-    box-sizing: border-box;
-    margin: auto;
-    min-height: 450px;
-    max-height: 75vh;
-    overflow-y: auto;
-    color: $grey-1;
-    background: $white;
-    border-radius: 8px;
-    border: 1px solid $grey-6;
-    padding: 32px 24px 32px 48px;
-    * {
-      max-width: 600px;
-    }
-    &.home {
-      .btnStart {
-        margin-top: 90px;
-        margin-bottom: 10px;
-        text-align: center;
-      }
-    }
-    &.informations {
-      ul {
-        padding-left: 24px;
-        li::marker {
-          color: $primary-color;
-          font-size: 26px;
-        }
-        li > * {
-          vertical-align: text-bottom;
-        }
-        li {
-          @include lato-regular-18;
-          line-height: 24px;
-          margin: 10px 0;
-        }
-      }
-    }
-    .title {
-      margin-bottom: 16px;
-    }
-    .nextTitle {
-      margin-bottom: 10px;
-      margin-top: 10px;
-    }
-    .type-picker {
-      height: 100%;
-    }
-    .welcomingTerms,
-    .procedureContainer,
-    .otherServices,
-    .textareaBlock {
-      max-width: 600px;
-    }
-    .labelsQualifications {
-      gap: 0 8px;
-    }
-  }
-  .titleDesc {
-    @include lato-bold-20;
-    margin-bottom: 20px;
-  }
-  p {
-    color: $grey-1;
-    @include lato-regular-14;
-    margin: 7px 0 0 0;
-    &.special {
-      @include lato-regular-14;
-      color: $grey-3;
-
-      margin-top: 4px;
-      width: 280px;
-      &.invalid {
-        color: $orange-warning;
-      }
-    }
-    &.informationEndForm {
-      margin-top: 18px;
-      color: $grey-2;
-      @include lato-regular-14;
-      a {
-        color: $default-link-color;
-        text-decoration: underline;
-        font-weight: bold;
-      }
-    }
-    &.notRequired {
-      @include lato-regular-18;
-      color: $grey-3;
-      font-style: italic;
-      margin-top: 4px;
-    }
-  }
-  .passwordInfo {
-    @include lato-regular-14;
-    font-style: italic;
-    color: $grey-3;
-  }
-  .textareaBlock {
-    @media #{$tablet} {
-      max-width: 90%;
-    }
-    p {
-      text-align: right;
-      @include lato-regular-14;
-      color: $grey-3;
-      font-style: italic;
-    }
-  }
-}
-
-.btn-primary {
-  &.previous {
-    background-color: initial;
-    color: $grey-2;
-    width: 120px;
-    border-radius: 6px;
-    border: 1px solid $grey-4;
-  }
-  &.start {
-    margin-bottom: 26px;
-  }
-}
-.chevronRight {
-  height: 24px;
-  width: 24px;
-  stroke: $grey-2;
-  margin-left: 10px;
-}
-.chevronLeft {
-  height: 24px;
-  width: 24px;
-  stroke: $black;
-  margin-right: 10px;
-}
-.form-group {
-  &.facebook,
-  &.twitter,
-  &.instagram,
-  &.linkedin,
-  &.website,
-  &.equipments {
-    div {
-      height: 52px;
-      .validationIcon {
-        margin-right: -53px;
-      }
-    }
-  }
-  div {
-    height: 44px;
-  }
-  ul {
-    padding-left: 0;
-    li {
-      display: flex;
-      margin-left: 1%;
-      font-size: $font-size-xsmall;
-      align-items: center;
-      p {
-        margin-left: 10px;
-        margin-top: unset;
-        @include lato-regular-14;
-      }
-      &.valid {
-        color: $green;
-      }
-      &.invalid {
-        color: $orange-warning;
-        p {
-          color: $orange-warning;
-        }
-      }
-    }
-  }
-  .addressRow {
-    height: auto;
-    .validateIcon {
-      height: 38px !important;
-    }
-  }
-}
-
-input {
-  &.email-placeholder::placeholder {
-    color: $white;
-    font-style: italic;
-  }
-  &.phone {
-    width: 205px;
-  }
-  &.password {
-    width: 256px;
-  }
-  &.structureName {
-    width: 250px;
-  }
-}
-img {
-  max-height: 340px;
-  &.eyePassword {
-    cursor: pointer;
-    &:hover {
-      opacity: 0.8;
-    }
-  }
-}
-
-//section equipments controller
-.controller {
-  border: 1px solid $grey-5;
-  border-radius: 4px;
-  margin-bottom: 13px;
-  max-width: 600px;
-  @media #{$small-phone} {
-    width: 95% !important;
-  }
-  @media #{$tablet} {
-    width: 296px;
-  }
-  .contorllerHeader {
-    height: 65px;
-    padding: 0 15px 0 12px;
-    p {
-      @include lato-bold-14;
-    }
-  }
-  .equipments {
-    svg {
-      width: 32px;
-      height: 32px;
-      background-color: $grey-8;
-      border-radius: 50%;
-      cursor: pointer;
-    }
-    input {
-      width: 56px;
-      margin: 0 6px;
-    }
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input[type='number'] {
-      -moz-appearance: textfield;
-    }
-  }
-}
-
-// collapse
-.collapse {
-  border: 1px solid $grey-5;
-  border-radius: 4px;
-  margin-bottom: 13px;
-  max-width: 600px;
-  @media #{$small-phone} {
-    width: 95% !important;
-  }
-  @media #{$tablet} {
-    width: 296px;
-  }
-  &.notCollapsed {
-    margin-bottom: 8px;
-    background: $grey-8;
-    .logo {
-      .hide {
-        display: none;
-      }
-      .show {
-        display: block;
-      }
-    }
-  }
-  .form-group {
-    margin: 0;
-    color: $grey-2;
-    @include lato-regular-14;
-    &.website,
-    &.facebook,
-    &.twitter,
-    &.instagram,
-    &.linkedin {
-      svg {
-        height: 22px;
-        width: 22px;
-        padding: 6px;
-      }
-      &:focus-within {
-        input {
-          border-color: $grey-3;
-          fill: $primary-color;
-        }
-      }
-    }
-    app-svg-icon {
-      padding-top: 12px;
-      margin-right: 0 !important;
-    }
-    &.website {
-      &:focus-within {
-        svg {
-          &.website {
-            border-color: $grey-3;
-            fill: $primary-color;
-          }
-        }
-      }
-    }
-    &.facebook {
-      &:focus-within {
-        svg {
-          &.facebook {
-            border-color: $grey-3;
-            fill: $primary-color;
-          }
-        }
-      }
-    }
-    &.instagram {
-      &:focus-within {
-        svg {
-          &.instagram {
-            border-color: $grey-3;
-            fill: $primary-color;
-          }
-        }
-      }
-    }
-    &.twitter {
-      &:focus-within {
-        svg {
-          &.twitter {
-            border-color: $grey-3;
-            fill: $primary-color;
-          }
-        }
-      }
-    }
-    &.linkedin {
-      &:focus-within {
-        svg {
-          &.linkedin {
-            border-color: $grey-3;
-            fill: $primary-color;
-          }
-        }
-      }
-    }
-  }
-  .inputSection {
-    input {
-      width: 100%;
-      margin-top: 8px;
-      &.withIcon {
-        border-radius: 0 4px 4px 0;
-        border-left: 0;
-      }
-    }
-    padding: 0px 15px 19px 12px;
-    svg {
-      margin-top: 8px;
-      width: 22px;
-      height: 38px;
-      fill: $grey-3;
-      margin-right: 0 !important;
-      border: 1px solid $grey-5;
-      border-radius: 4px 0 0 4px;
-      border-right: 0;
-      padding-left: 16px;
-      background: $grey-8;
-    }
-  }
-  .titleCollapse {
-    width: 100%;
-    @include lato-bold-16;
-    color: $grey-2;
-    p {
-      color: $grey-2;
-      @include lato-bold-16;
-    }
-  }
-  .collapseHeader {
-    height: 65px;
-    padding: 0 15px 0 12px;
-    cursor: pointer;
-  }
-  .logo {
-    height: 24px;
-    width: 24px;
-    svg {
-      width: 100%;
-      height: 100%;
-      fill: $grey-1;
-    }
-  }
-  .logo,
-  .titleCollapse {
-    .hide {
-      display: block;
-    }
-    .show {
-      display: none;
-    }
-  }
-}
-
-.tags {
-  padding: 8px;
-  button {
-    background: $grey-8;
-    border-radius: 20px;
-    margin: 4px;
-    max-width: 100%;
-    height: 40px;
-    padding: 0 13px;
-    @include lato-bold-14;
-    outline: none;
-    border: none;
-    cursor: pointer;
-    &.selectedChoice {
-      background: $green-1 !important;
-      color: $white;
-    }
-  }
-  svg {
-    width: 20px;
-    height: 10px;
-    margin-right: 4px;
-    stroke: $grey-8;
-  }
-}
-.textBtn {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  width: 100%;
-  margin-right: 12px;
-}
-
-.cgu {
-  h3 {
-    @include lato-bold-18;
-  }
-  .asterisk {
-    color: $primary-color;
-  }
-}
-
-.structureInfoBlock {
-  background: $green-1;
-  color: $white;
-  padding: 16px;
-  border-radius: 6px;
-  @include lato-bold-18;
-  .structureInfoContent {
-    width: 100%;
-  }
-  span {
-    font-style: italic;
-    @include lato-regular-14;
-  }
-  .validateSvg {
-    stroke: $white;
-    text-align: right;
-    svg {
-      height: 14px;
-      width: 14px;
-    }
-  }
-}
-.footerEditMode {
-  width: 100%;
-  position: fixed;
-  bottom: 56px;
-  margin: 0;
-  background: $white;
-  left: 0;
-  border-top: 1px solid $grey-4;
-  padding: 20px 0;
-  @media #{$tablet} {
-    bottom: 0;
-    left: 0;
-  }
-}
-.returnBtnSection {
-  max-width: 960px;
-  margin: 24px auto;
-}
-.itemSummary {
-  height: 60px;
-  border-bottom: 1px solid $grey-4;
-  @include lato-bold-20;
-  cursor: pointer;
-  &:hover {
-    background: $grey-8;
-  }
-  &.last {
-    border: 0;
-  }
-}
-.headerEditMode {
-  max-width: 960px;
-  margin: auto;
-  margin-top: 24px;
-  margin-bottom: 24px;
-  h2 {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-}
-
-.lastPage {
-  max-width: 530px;
-  margin: 0 auto;
-}
-
-.section {
-  padding-bottom: 2rem;
-}
-.dataShareConsent {
-  ::ng-deep button p {
-    font-weight: normal !important;
-  }
-}
-.missing-information {
-  display: flex;
-  color: $orange-warning;
-  span {
-    margin-top: 12px;
-    margin-left: 1%;
-  }
-}

src/app/form/structure-form/form.component.spec.ts

-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormArray, FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { SharedModule } from '../../shared/shared.module';
-
-import { FormComponent } from './form.component';
-
-describe('FormComponent', () => {
-  let component: FormComponent;
-  let fixture: ComponentFixture<FormComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [FormComponent],
-      imports: [HttpClientTestingModule, FormsModule, ReactiveFormsModule, SharedModule],
-    }).compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FormComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-    component.structureForm = new FormGroup({
-      structureType: new FormArray([new FormControl('mediatheque'), new FormControl('cyber')]),
-      structureName: new FormControl('structure.structureName', Validators.required),
-      structureRepresentation: new FormControl('structure.structureRepresentation', Validators.required),
-      description: new FormControl('structure.description'),
-      lockdownActivity: new FormControl('structure.lockdownActivity'),
-      address: new FormGroup({
-        numero: new FormControl('structure.address.numero'),
-        street: new FormControl('structure.address.street', Validators.required),
-        commune: new FormControl('structure.address.commune', Validators.required),
-      }),
-      contactPhone: new FormControl('structure.contactPhone', Validators.required),
-      contactMail: new FormControl('structure.contactMail', Validators.required),
-      website: new FormControl('structure.website'),
-      facebook: new FormControl('structure.facebook'),
-      twitter: new FormControl('structure.twitter'),
-      instagram: new FormControl('structure.instagram'),
-      gender: new FormControl('structure.gender'),
-      contactName: new FormControl('structure.contactName'),
-      contactSurname: new FormControl('structure.contactSurname'),
-      fonction: new FormControl('structure.fonction'),
-      pmrAccess: new FormControl('structure.pmrAccess'),
-      hours: new FormGroup({
-        monday: new FormGroup({
-          open: new FormControl(true, Validators.required),
-          time: new FormArray([
-            new FormGroup({
-              opening: new FormControl(900, Validators.required),
-              closing: new FormControl(1200, Validators.required),
-            }),
-          ]),
-        }),
-        tuesday: new FormGroup({
-          open: new FormControl(true, Validators.required),
-          time: new FormArray([]),
-        }),
-        wednesday: new FormGroup({
-          open: new FormControl(true, Validators.required),
-          time: new FormArray([]),
-        }),
-        thursday: new FormGroup({
-          open: new FormControl(true, Validators.required),
-          time: new FormArray([]),
-        }),
-        friday: new FormGroup({
-          open: new FormControl(true, Validators.required),
-          time: new FormArray([]),
-        }),
-        saturday: new FormGroup({
-          open: new FormControl(false, Validators.required),
-          time: new FormArray([]),
-        }),
-        sunday: new FormGroup({
-          open: new FormControl(false, Validators.required),
-          time: new FormArray([]),
-        }),
-      }),
-      exceptionalClosures: new FormControl('structure.exceptionalClosures'),
-      labelsQualifications: new FormControl([]),
-      accessModality: new FormControl([]),
-      publicsAccompaniment: new FormControl([]),
-      equipmentsAndServices: new FormControl([]),
-      publics: new FormControl([]),
-      baseSkills: new FormControl([]),
-      accessRight: new FormControl([]),
-      parentingHelp: new FormControl([]),
-      socialAndProfessional: new FormControl([]),
-      digitalCultureSecurity: new FormControl([]),
-      nbComputers: new FormControl('structure.nbComputers'),
-      nbPrinters: new FormControl('structure.nbPrinters'),
-      nbTablets: new FormControl('structure.nbTablets'),
-      nbNumericTerminal: new FormControl('structure.nbNumericTerminal'),
-      equipmentsDetails: new FormControl('structure.equipmentsDetails'),
-      personalOffers: new FormControl([]),
-    });
-  });
-
-  it('should return the correct Abstract Control', () => {
-    const nameControl = 'structureName';
-    const control = component.getStructureControl(nameControl);
-    const expectControl = component.structureForm.get(nameControl);
-    expect(control).toEqual(expectControl);
-  });
-
-  it('should return the correct Abstract Control from address', () => {
-    const nameControl = 'street';
-    const control = component.getAddressControl(nameControl);
-    const addressForm = component.structureForm.get('address').get(nameControl);
-    expect(control).toEqual(addressForm);
-  });
-  it('should return the correct Time from a specific day', () => {
-    // const day = 'monday';
-    // const control = component.getTime(day);
-    // const TimeForm = component.structureForm.get('hours').get(day).get('time');
-    // expect(control).toEqual(TimeForm);
-  });
-  it('should return true', () => {
-    // const day = 'monday';
-    // const control = component.isOpen(day);
-    // expect(control).toEqual(true);
-  });
-  it('should return check if value is in formArray', () => {
-    const nameControl = 'structureType';
-    const isInArray = component.isInArray('cyber', nameControl);
-    const isntInArray = component.isInArray('unknowType', nameControl);
-    expect(isInArray).toEqual(true);
-    expect(isntInArray).toEqual(false);
-  });
-});

src/app/form/structure-form/pageType.enum.ts

-export enum PageTypeEnum {
-  summary,
-  info,
-  accountInfo,
-  accountCredentials,
-  structureNameAndAddress,
-  structurePhone,
-  structureType,
-  structureAccessModality,
-  structureHours,
-  structurePmr,
-  structureWebAndSocialNetwork,
-  structurePublicTarget,
-  structureAccompaniment,
-  structureOtherAccompaniment,
-  structureRemoteAccompaniment,
-  structureWorkshop,
-  structureWorkshopPrice,
-  structureWifi,
-  structureEquipments,
-  structureLabels,
-  structureOtherServices,
-  structureDescription,
-  structureCovidInfo,
-  cgu,
-}