startpage added and employee, administration page updated

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.html

@@ -8,9 +8,9 @@
     </p>
   </digi-typography>
   <form [formGroup]="formGroup" (ngSubmit)="submitForm()">
+    
     <div class="create-account__block">
       <h2>Personuppgifter</h2>
-
       <div class="create-account__combined-inputs">
         <digi-ng-form-input
           class="create-account__input"
@@ -20,6 +20,7 @@
           [afDisableValidStyle]="true"
           [afInvalid]="firstNameControl.invalid && firstNameControl.dirty"
         ></digi-ng-form-input>
+      </div>
       <digi-ng-form-input
       class="create-account__input"
       formControlName="lastName"
@@ -28,7 +29,6 @@
       [afDisableValidStyle]="true"
       [afInvalid]="lastNameControl.invalid && lastNameControl.dirty"
     ></digi-ng-form-input>
-      </div>
       <digi-ng-form-input
         class="create-account__input"
         formControlName="ssn"
@@ -37,44 +37,86 @@
         [afDisableValidStyle]="true"
         [afInvalid]="ssnControl.invalid && ssnControl.dirty"
       ></digi-ng-form-input>
-      <digi-ng-form-input
+      
-        class="create-account__input"
+
-        formControlName="staffId"
+      <h2>Tjänst</h2>
-        afLabel="Personal-ID"
+
-        [afInvalidMessage]="staffIdControl.errors?.message || ''"
+      <digi-ng-form-select-base [afSelectItems]="list" style="display: block; width: 50%; margin-bottom: 50px;"></digi-ng-form-select-base>
-        [afDisableValidStyle]="true"
+
-        [afInvalid]="staffIdControl.invalid && staffIdControl.dirty"
+      
-      ></digi-ng-form-input>
+      <h2 >Tilldela behörigheter</h2>
-      <digi-ng-form-input
+
-        class="create-account__input"
+    <div class="assign-permissions">
-        formControlName="email"
+        <div class="assign-permissions__child">
-        afLabel="Arbetsmejl"
+        <h3>Behörighet: administrera behörigheter</h3>
-        afType="email"
+          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-        [afInvalidMessage]="emailControl.errors?.message || ''"
+            <p>
-        [afDisableValidStyle]="true"
+              Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
-        [afInvalid]="emailControl.invalid && emailControl.dirty"
+            </p>
-      ></digi-ng-form-input>
+            <a href="#">Tab to me</a>
-      <digi-ng-form-input
+          </digi-ng-popover>
-        class="create-account__input"
+        </div>  
-        formControlName="phone"
+      <div>
-        afLabel="Telefonnummer arbete"
+        <digi-ng-form-checkbox-base
-        afType="tel"
+        formControlName = "permissions" 
-        [afInvalidMessage]="phoneControl.errors?.message || ''"
+        afLabel="Välj administrera behörigheter"
-        [afDisableValidStyle]="true"
+        >
-        [afInvalid]="phoneControl.invalid && phoneControl.dirty"
+      </digi-ng-form-checkbox-base>
-      ></digi-ng-form-input>
       </div>
 
-    <div class="create-account__block">
-      <h2>Bemanning av personal</h2>
   
-      <fieldset class="create-account__fieldset">
+      <div class="assign-permissions__child">
-        <legend>Är {{ firstNameControl.value || 'medarbetaren' }} i aktiv tjänst?</legend>
+        <h3>Behörighet: ta emot deltagare</h3>
-        <digi-ng-form-radiobutton-group
+          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
-          [afRadiobuttons]="activeRadioButtons"
+            <p>
-          formControlName="active"
+              Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
-        ></digi-ng-form-radiobutton-group>
+            </p>
-      </fieldset>
+            <a href="#">Tab to me</a>
+          </digi-ng-popover>
+        </div> 
+      <div>
+        <digi-ng-form-checkbox-base 
+         afLabel="Välj ta emot deltagare"></digi-ng-form-checkbox-base>
+      </div>
+      
+
+      <div class="assign-permissions__child">
+        <h3>Behörighet: rapportering, planering och information om deltagare</h3>
+          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
+            <p>
+              Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
+            </p>
+            <a href="#">Tab to me</a>
+          </digi-ng-popover>
+        </div> 
+      <div>
+        <digi-ng-form-checkbox-base 
+         afLabel="Välj rapportering, planering och infomration om deltagare">
+        </digi-ng-form-checkbox-base>
+      </div>
+
+      <div class="assign-permissions__child">
+        <h3>Behörighet: administrera ordrar och fakturor</h3>
+          <digi-ng-popover [afOrientation]="popoverOrientation" [afDirection]="popoverDirection" style="margin-left: 20px;">
+            <p>
+              Jag har tillräckligt med utrymme för att öppnas till höger (inline-start).
+            </p>
+            <a href="#">Tab to me</a>
+          </digi-ng-popover>
+        </div> 
+      <div>
+        <digi-ng-form-checkbox-base 
+        afLabel="Välj administrera ordrar och fakturor">
+      </digi-ng-form-checkbox-base>
+      </div>
+    </div>
+  </div>
+
+  <!--  <div class="create-account__block">
+
+
+
+      <h2>Bemanning av personal</h2>
 
       <fieldset class="create-account__fieldset">
         <legend>Planerad frånvaroperiod</legend>
@@ -103,8 +145,18 @@
         </ul>
       </fieldset>
     </div>
+-->
     
-    <div class="create-account__footer">
+<form class="search-address"  (ngSubmit)="handleSearchSubmit()">
+  <h2>utförandeverksamheter</h2>
+  <digi-form-input-search
+    af-label-description="Sök på utförandeverksamheter"
+    (afOnInput)="handleSearchInput($event)"
+  ></digi-form-input-search>
+</form>
+
+
+<div class="create-account__footer">
       <digi-button af-type="reset" af-variation="secondary">Avbryt</digi-button>
       <digi-button af-type="submit">Registrera konto</digi-button>
     </div>

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.scss

@@ -51,7 +51,33 @@
   }
 
   &__footer {
+    margin-top: 50px;
     display: flex;
     gap: var(--digi--layout--gutter);
   }
 }
+
+.assign-permissions
+{
+  &__child{
+    &:first-child
+    {
+      margin-top: 0px;
+    }
+  display: flex;
+  flex-direction: row;
+  height: 100px;
+  width: 100%;
+  align-items: center;
+  margin-right: 330px;
+  margin-top: 80px;
+  }
+}
+
+.search-address
+{
+  margin-top: 80px;
+  width: 30%;
+}
+
+

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.component.ts

@@ -1,7 +1,9 @@
 import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
+import { FormSelectBaseItem } from '@af/digi-ng/_form/form-select-base';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Service } from '@dafa-enums/service.enum';
 import { OutOfOfficeDate } from '@dafa-models/out-of-office-date.model';
 import { StaffService } from '@dafa-services/api/staff.service';
 import { RequiredValidator } from '@dafa-validators/required.validator';
@@ -15,51 +17,70 @@ import { BehaviorSubject } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CreateAccountComponent {
-  private _pendingOutOfOfficeDates$ = new BehaviorSubject<OutOfOfficeDate[]>([
+
-    {
+  private _searchValue$ = new BehaviorSubject<string>('');
-      id: 123456789,
+
-      start: new Date(),
-      end: new Date(),
-    },
-    {
-      id: 987654321,
-      start: new Date(),
-      end: new Date(),
-    },
-  ]);
   formGroup: FormGroup;
   todaysDate = new Date();
   
+  list: FormSelectBaseItem[] = [
+    {
+      name:Service.STOM,
+      value: '1'
+    },
+    {
+      name: Service.KVL,
+      value: '2'
+    },
+    {
+      name: Service.KROM,
+      value: '3'
+    },
+    
+  ]
+
+  popoverOrientation: string;
+  popoverDirection: string;
+
   constructor(private formBuilder: FormBuilder, private staffService: StaffService, private router: Router) {
     this.formGroup = this.formBuilder.group({
       firstName: this.formBuilder.control('', [RequiredValidator('Förnamn')]),
       lastName: this.formBuilder.control('', [RequiredValidator('Efternamn')]),
       ssn: this.formBuilder.control('', [RequiredValidator('Personnummer'), SocialSecurityNumberValidator()]),
       staffId: this.formBuilder.control('', [RequiredValidator('Personal-ID')]),
-      email: this.formBuilder.control('', [RequiredValidator('Arbetsmejl')]),
+      permissions: this.formBuilder.control(true),
-      phone: this.formBuilder.control('', [RequiredValidator('Telefonnummer arbete')]),
-      active: this.formBuilder.control(true),
-      outOfOfficeStart: this.formBuilder.control(''),
-      outOfOfficeEnd: this.formBuilder.control(''),
     });
   }
 
-  get pendingOutOfOfficeDates(): OutOfOfficeDate[] {
+  handleSearchSubmit(): void {
-    return this._pendingOutOfOfficeDates$.getValue();
+   // skicka searchvalue till en service och filtrera
   }
-  get activeRadioButtons(): RadiobuttonModel[] {
+
+  handleSearchInput($event: CustomEvent): void {
+    this._searchValue$.next($event.detail.target.value);
+  }
+
+  get formselectItem(): FormSelectBaseItem[]
+  {
     return  [
+
       {
-        label: 'Ja',
+        name:Service.STOM,
-        value: true,
+        value: '1'
       },
       {
-        label: 'Nej',
+        name: Service.KVL,
-        value: false,
+        value: '2'
       },
+      {
+        name: Service.KROM,
+        value: '3'
+      },
+
     ];
   }
 
+
   get firstNameControl(): AbstractControl {
     return this.formGroup.get('firstName');
   }
@@ -69,41 +90,6 @@ export class CreateAccountComponent {
   get ssnControl(): AbstractControl {
     return this.formGroup.get('ssn');
   }
-  get staffIdControl(): AbstractControl {
-    return this.formGroup.get('staffId');
-  }
-  get emailControl(): AbstractControl {
-    return this.formGroup.get('email');
-  }
-  get phoneControl(): AbstractControl {
-    return this.formGroup.get('phone');
-  }
-  get outOfOfficeStartControl(): AbstractControl {
-    return this.formGroup.get('outOfOfficeStart');
-  }
-  get outOfOfficeEndControl(): AbstractControl {
-    return this.formGroup.get('outOfOfficeEnd');
-  }
-
-  addOutOfOfficeDate(): void {
-    if (this.outOfOfficeStartControl.value && this.outOfOfficeEndControl.value) {
-      this._pendingOutOfOfficeDates$.next([
-        ...this.pendingOutOfOfficeDates,
-        {
-          id: Date.now(),
-          start: new Date(this.outOfOfficeStartControl.value),
-          end: new Date(this.outOfOfficeEndControl.value),
-        },
-      ]);
-
-      this.outOfOfficeStartControl.patchValue('');
-      this.outOfOfficeEndControl.patchValue('');
-    }
-  }
-
-  removeOutOfOfficeDate(id: number): void {
-    this._pendingOutOfOfficeDates$.next(this.pendingOutOfOfficeDates.filter(date => date.id !== id));
-  }
 
   private _markFormAsDirty(): void {
     Object.keys(this.formGroup.controls).forEach(control => {
@@ -117,7 +103,6 @@ export class CreateAccountComponent {
       const submittableValues = {
         ...this.formGroup.value,
         fullName: `${this.firstNameControl.value} ${this.lastNameControl.value}`,
-        outOfOffice: this.pendingOutOfOfficeDates,
       };
 
       delete submittableValues.outOfOfficeStart;

apps/dafa-web/src/app/pages/administration/pages/create-account/create-account.module.ts

@@ -7,6 +7,15 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { LocalDatePipeModule } from '@dafa-shared/pipes/local-date/local-date.module';
 import { CreateAccountComponent } from './create-account.component';
+import {DigiNgFormSelectBaseModule} from '@af/digi-ng/_form/form-select-base';
+import {DigiNgPopoverModule} from '@af/digi-ng/_popover/popover';
+import {DigiNgFormCheckboxBaseModule} from '@af/digi-ng/_form/form-checkbox-base';
+
+
+
+
+
+
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,6 +28,9 @@ import { CreateAccountComponent } from './create-account.component';
     DigiNgFormInputModule,
     DigiNgFormRadiobuttonGroupModule,
     DigiNgFormDatepickerModule,
+    DigiNgFormSelectBaseModule,
+    DigiNgPopoverModule,
+    DigiNgFormCheckboxBaseModule
   ],
 })
 export class CreateAccountModule {}

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.html

@@ -3,6 +3,7 @@
     <thead>
       <tr>
         <th scope="col" class="staff-list__column-head">
+
           <button class="staff-list__sort-button" (click)="handleSort('fullName')">
             Namn
             <ng-container *ngIf="sortBy?.key === 'fullName'">
@@ -11,33 +12,6 @@
             </ng-container>
           </button>
         </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('staffId')">
-            Personal-ID
-            <ng-container *ngIf="sortBy?.key === 'staffId'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('kommun')">
-            Kommun
-            <ng-container *ngIf="sortBy?.key === 'kommun'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
-        <th scope="col" class="staff-list__column-head">
-          <button class="staff-list__sort-button" (click)="handleSort('active')">
-            Aktiv i tjänst
-            <ng-container *ngIf="sortBy?.key === 'active'">
-              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
-              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
-            </ng-container>
-          </button>
-        </th>
         <th scope="col" class="staff-list__column-head">
           <button class="staff-list__sort-button" (click)="handleSort('service')">
             Tjänst
@@ -47,29 +21,39 @@
             </ng-container>
           </button>
         </th>
+        <th scope="col" class="staff-list__column-head">
+          <button class="staff-list__sort-button" (click)="handleSort('kommun')">
+            Utförandeverksamhet
+            <ng-container *ngIf="sortBy?.key === 'kommun'">
+              <digi-icon-caret-up class="staff-list__sort-icon" *ngIf="!sortBy.reverse"></digi-icon-caret-up>
+              <digi-icon-caret-down class="staff-list__sort-icon" *ngIf="sortBy.reverse"></digi-icon-caret-down>
+            </ng-container>
+          </button>
+        </th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let staff of pagedStaff">
         <th scope="row">
+          <!-- <a (click)="popup()" style="cursor: pointer;">
+            {{staff.fullName}}
+          <div class="staff-list__modal">
+           <p>asdasdasdasd</p>>
+          </div>
+        </a > -->
           <a [routerLink]="staff.id" class="staff-list__link">{{ staff.fullName }}</a>
         </th>
-        <td>{{ staff.staffId }}</td>
-        <td>{{ staff.kommun }}</td>
-        <td>{{ staff.active ? 'Ja' : 'Nej' }}</td>
         <td>{{ staff.service }}</td>
+        <td>{{ staff.kommun }}</td>
+
+
       </tr>
     </tbody>
   </table>
 </digi-ng-table>
 
-<digi-navigation-pagination
+
-  *ngIf="staff.length > pagedStaff.length"
+<digi-navigation-pagination *ngIf="staff.length > pagedStaff.length" class="staff-list__pagination"
-  class="staff-list__pagination"
+  [afTotalPages]="totalPages" [afCurrentResultStart]="currentResultStart" [afCurrentResultEnd]="currentResultEnd"
-  [afTotalPages]="totalPages"
+  [afTotalResults]="staff.length" (afOnPageChange)="handlePagination($event.detail)" af-result-name="deltagare">
-  [afCurrentResultStart]="currentResultStart"
+</digi-navigation-pagination>
-  [afCurrentResultEnd]="currentResultEnd"
-  [afTotalResults]="staff.length"
-  (afOnPageChange)="handlePagination($event.detail)"
-  af-result-name="deltagare"
-></digi-navigation-pagination>

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.scss

@@ -20,6 +20,7 @@
     align-items: center;
     gap: var(--digi--layout--gutter);
     cursor: pointer;
+    color: #1616B2;
   }
 
   &__sort-icon {
@@ -32,4 +33,16 @@
     display: block;
     margin-top: var(--digi--layout--gutter);
   }
+  
+  // &__modal{
+  //   visibility: hidden;
+  //   position: fixed; /* Stay in place */
+  //   z-index: 1; /* Sit on top */
+  //   width: 25%; /* Full width */
+  //   height: 25%; /* Full height */
+  //   overflow: auto; /* Enable scroll if needed */
+  //   background-color:white; /* Fallback color */
+  //  border: 1px solid black;
+  // }
+  
 }

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.component.ts

@@ -14,9 +14,13 @@ export class StaffListComponent {
   @Input() sortBy: SortBy | null;
   @Output() sorted = new EventEmitter<keyof Staff>();
 
+
+  
   private _currentPage$ = new BehaviorSubject<number>(1);
   private _staffPerPage = 10;
 
+  private _searchValue$ = new BehaviorSubject<string>('');
+
   get currentPage(): number {
     return this._currentPage$.getValue();
   }
@@ -29,6 +33,7 @@ export class StaffListComponent {
     return [...this.staff].slice(this.currentResultStart - 1, this.currentResultEnd - 1);
   }
 
+
   get currentResultStart(): number {
     return (this.currentPage - 1) * this._staffPerPage + 1;
   }
@@ -44,4 +49,22 @@ export class StaffListComponent {
   handlePagination(page: number): void {
     this._currentPage$.next(page);
   }
+
+
+  // popup()
+  // {
+  //   var open = document.getElementsByClassName('staff-list__modal');
+    
+
+  //   for (let i = 0; i < open.length; i++) {
+  //     const slide = open[i] as HTMLElement;
+  //     if(slide.style.visibility == "hidden")
+  //     {
+  //     slide.style.visibility = "visible";
+  //   }else
+  //   slide.style.visibility = "hidden";
+  // }
+
+
+  // }
 }

apps/dafa-web/src/app/pages/administration/pages/staff/components/staff-list/staff-list.module.ts

@@ -4,6 +4,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StaffListComponent } from './staff-list.component';
 
+
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   declarations: [StaffListComponent],

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.html

@@ -7,16 +7,28 @@
       leo quis ante porttitor tincidunt. Nam tincidunt imperdiet tortor eu suscipit. Maecenas ut dui est.
     </p>
 
-    <div class="staff__cta-wrapper">
+    <div class="staff__cta-wrapper" >
-      <digi-ng-link-internal afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-internal>
+      <digi-ng-link-button afText="Skapa nytt konto" afRoute="/administration/skapa-konto"></digi-ng-link-button>
     </div>
 
-    <h2>Personallista</h2>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, officia perferendis? Excepturi animi rem culpa
-      facere, laboriosam vel, quia eos eligendi, cupiditate doloribus aspernatur unde nihil iste earum corrupti illo.
-    </p>
   
+
+    <h3>Personallista</h3>
+    <hr style="border: 1px solid #00005a;">
+
+    <div class="staff__search-wrapper">
+    <div class="staff__search-form">
+      <digi-form-input
+        af-label-description="Sök på namn"
+        (afOnInput)="handleSearchInput($event)"
+        [afSize]="size"
+      ></digi-form-input> 
+    </div>
+    <div class="staff__search-button">
+        <digi-button class="search-address"  (afOnClick)="handleSearchSubmit()">
+        Sök </digi-button >
+    </div>
+  </div>
     <dafa-staff-list
       *ngIf="filteredStaff$ | async as staff; else loadingRef"
       [staff]="staff"

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.scss

@@ -1,6 +1,10 @@
 .staff { 
+  text-decoration: none;
+  
   &__cta-wrapper {
     margin-top: var(--digi--layout--gutter);
+  
+   
   }
 
   &__link {
@@ -8,4 +12,23 @@
     align-items: center;
     gap: var(--digi--layout--gutter--s);
   }
+  &__search-wrapper
+  {
+    display: flex;
+ 
+   
+  }
+  &__search-form
+  {
+  
+    max-width: var(--digi--typography--text--max-width);
+  }
+  &__search-button
+  {
+   flex-direction: column;
+
+   margin-top: 46px;
+   
+   
+  }
 }

apps/dafa-web/src/app/pages/administration/pages/staff/staff.component.ts

@@ -1,3 +1,4 @@
+import { FormInputSize } from '@af/digi-ng/_form/form-input/form-input-size.enum';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { IconType } from '@dafa-enums/icon-type.enum';
 import { SortBy } from '@dafa-models/sort-by.model';
@@ -17,6 +18,8 @@ export class StaffComponent {
   staffSortBy$: Observable<SortBy | null> = this.staffService.staffSortBy$;
   iconType = IconType;
 
+  size: FormInputSize.M;
+
   constructor(private staffService: StaffService) {}
 
   get searchValue(): string {
@@ -34,4 +37,6 @@ export class StaffComponent {
   handleStaffSort(key: keyof Staff): void {
     this.staffService.setStaffSortKey(key);
   }
+
+
 }

apps/dafa-web/src/app/pages/administration/pages/staff/staff.module.ts

@@ -5,6 +5,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StaffListModule } from './components/staff-list/staff-list.module';
 import { StaffComponent } from './staff.component';
+import {DigiNgLinkButtonModule} from '@af/digi-ng/_link/link-button';
+
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -15,6 +17,7 @@ import { StaffComponent } from './staff.component';
     DigiNgLinkInternalModule,
     DigiNgSkeletonBaseModule,
     StaffListModule,
+    DigiNgLinkButtonModule
   ],
 })
 export class StaffModule {}

apps/dafa-web/src/app/pages/start/start.component.html

@@ -1 +1,48 @@
-<section class="start">Start funkar!</section>
+<section class="start">
+   
+<div>
+  <h1>Välkommen till DAFA 2.0</h1>
+  <p>Här finner du de senaste nyheterna om uppdateringar, notiser och mer.</p>
+</div>
+
+<br>
+
+<div class="start__wrapper">
+
+<div class="start__card-info">
+
+<div>
+    <digi-ng-card afHeading="Notiser" [afHeadingLevel]="afHeadingLevel" afLinkText="Deltagare" afLinkHref="/mina-deltagare" [afCardVariation]="afCardVariation">
+        <p>Det har kommit in nya avrop med deltagare, länken nedan tar dig till fliken Nya deltagare. Du finner den också i vänster menyn på sidan</p>
+    </digi-ng-card>
+
+  </div>
+<div class="start__card-info-notice">
+    <digi-ng-form-error-list afHeading="Viktig Information">
+     
+    </digi-ng-form-error-list>
+    <br>
+    <digi-ng-form-error-list afHeading="Viktig Information">
+     
+    </digi-ng-form-error-list>
+</div>
+
+  </div> <!--end of carf-info-->
+
+
+<div class="start__statistics">
+
+  <div style="width: 100%; max-height: 100%;">
+    <digi-ng-card afHeading="Statistik" [afHeadingLevel]="afHeadingLevel" [afCardVariation]="afCardVariation">
+       <p><br><br><br><br><br><br><br><br><br><br><br><br>
+       </p>
+    </digi-ng-card>
+  </div>
+
+  </div>
+
+</div> <!--end of wrapper-->
+
+
+
+</section>

apps/dafa-web/src/app/pages/start/start.component.scss

@@ -0,0 +1,30 @@
+.start
+{
+    &__wrapper
+    {
+        display: flex;
+        flex-direction: column;
+       
+    
+    }
+   
+    &__card-info
+    {
+    
+       flex-direction: row;
+       display: flex;
+      
+      
+        
+    }
+    &__card-info-notice{
+        margin-left: 5%;
+    }
+    &__statistics{
+        display: flex;
+        flex-direction: row;
+        margin-top: 5%;
+    }
+   
+    
+}

apps/dafa-web/src/app/pages/start/start.component.ts

@@ -1,3 +1,4 @@
+import { CardHeadingLevel, CardVariation } from '@af/digi-ng/_card/card';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
@@ -6,4 +7,13 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   styleUrls: ['./start.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StartComponent {}
+export class StartComponent {
+
+
+  afHeadingLevel : CardHeadingLevel = CardHeadingLevel.H3;
+
+  afCardVariation: CardVariation = CardVariation.INFO
+
+
+  
+}

apps/dafa-web/src/app/pages/start/start.module.ts

@@ -2,9 +2,18 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { StartComponent } from './start.component';
+import {DigiNgCardModule} from '@af/digi-ng/_card/card';
+import {DigiNgFormErrorListModule} from '@af/digi-ng/_form/form-error-list';
+
+
+
+
 
 @NgModule({
   declarations: [StartComponent],
-  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }])],
+  imports: [CommonModule, RouterModule.forChild([{ path: '', component: StartComponent }]),
+  DigiNgCardModule,
+  DigiNgFormErrorListModule
+],
 })
 export class StartModule {}

mock-api/dafa-web/package-lock.json

@@ -114,9 +114,6 @@
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
     "node_modules/array-flatten": {
@@ -171,9 +168,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/bytes": {
@@ -210,9 +204,6 @@
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cacheable-request/node_modules/lowercase-keys": {
@@ -229,9 +220,6 @@
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/chalk": {
@@ -244,9 +232,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
     "node_modules/ci-info": {
@@ -260,9 +245,6 @@
       "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
       "engines": {
         "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/cliui": {
@@ -662,9 +644,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/got": {
@@ -806,9 +785,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-npm": {
@@ -817,9 +793,6 @@
       "integrity": "sha512-WW/rQLOazUq+ST/bCAVBp/2oMERWLsR7OrKyt052dNDk4DHcDE0/7QSXITlmi+VBcV13DfIbysG3tZJm5RfdBA==",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/is-obj": {
@@ -984,9 +957,6 @@
       },
       "engines": {
         "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/make-dir/node_modules/semver": {
@@ -1553,9 +1523,6 @@
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/type-is": {
@@ -1619,9 +1586,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/yeoman/update-notifier?sponsor=1"
       }
     },
     "node_modules/url-parse-lax": {
@@ -1673,9 +1637,6 @@
       },
       "engines": {
         "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
     "node_modules/wrappy": {

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "repository": "https://bitbucket.arbetsformedlingen.se/projects/TEA/repos/dafa-web-monorepo",
   "engines": {
-    "node": "15.11.0"
+    "node": "16.0.0"
   },
   "scripts": {
     "ng": "nx",