diff --git a/apps/dafa-web/src/app/data/models/employee.model.ts b/apps/dafa-web/src/app/data/models/employee.model.ts index ea95db6..6b4fdfe 100644 --- a/apps/dafa-web/src/app/data/models/employee.model.ts +++ b/apps/dafa-web/src/app/data/models/employee.model.ts @@ -10,8 +10,8 @@ export interface Employee { fullName?: string; ssn: string; organizations: Organization[]; - authorizations: Authorization[]; services: Service[]; + authorizations: Authorization[]; createdAt?: number; } diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html index 40a1033..802374d 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html +++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.html @@ -1,7 +1,13 @@
-

{{ detailedEmployeeData.fullName }}

+
+

{{ detailedEmployeeData.fullName }}

+ + Redigera + +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus accusantium sit, reprehenderit, esse suscipit quis similique harum est eum eveniet aspernatur delectus magni asperiores porro aliquam voluptate! Architecto, @@ -27,83 +33,58 @@

-

Uppgifter om arbete

- -
-
Behörigheter
- -
{{ authorization.name }}
- -
Tjänster
+

Tjänst

+
    -
    {{ service.name }}
    +
  • + {{ service.name }} +
    • -
-
- -
-

Utförande verksamheter

- -
    -
  • -

    {{ organization.name }}

    -
    -
    KA-nummer
    -
    {{ organization.kaNumber }}
    -
    Adress
    -
    {{ organization.address.street }} {{ organization.address.houseNumber }}
    -
    {{ organization.address.postalCode }} {{ organization.address.city }}
    -
    -
-
- -

- Tilldelade deltagare ({{ detailedEmployeeData.participants?.length || 0 }}) -

- -
    -
  • - -
    • -
  • - +
    +

    Utförande verksamheter och utförande adresser

    +
      +
    • + {{ organization.name }} +
        +
      • + {{ organization.address.street }} {{ organization.address.postalCode }} + {{ organization.address.houseNumber }} {{ organization.address.city }}
      - - Byt handledare +
      • +
    +
    +
    +

    Behörigheter

    +
      + +
    • {{ authorization.name }}
      •  - -

      Inga deltagare har kopplats till {{ detailedEmployeeData.fullName }}.

      -       - +
+ +

+
+ + Tillbaka till personallistan + + + + Skapa nytt konto + +
- +
Info saknas diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.scss b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.scss index 154ef3f..95becf3 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.scss +++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.scss @@ -1,4 +1,6 @@ @import 'variables/gutters'; +@import 'variables/colors'; +@import 'mixins/buttons'; @import 'mixins/list'; .employee-card { @@ -6,10 +8,16 @@ display: flex; flex-direction: column; gap: $digi--layout--gutter--xl $digi--layout--gutter--l; + } - h2 { - margin-top: 0; - } + &__editcontainer { + display: flex; + justify-content: space-between; + align-items: center; + } + + &__h2 { + margin-top: 0; } &__column { @@ -17,52 +25,68 @@ max-width: var(--digi--typography--text--max-width); } - dl { - display: grid; - grid-template-columns: auto 1fr; - gap: 0.5rem 2rem; + &__organizations { + display: flex; + flex-direction: column; + gap: 1.25rem; } - dt, - dd { + &__footer { + margin-top: 5rem; + } + + //LISTS + + &__list { + @include dafa__reset-list; + } + + &__listitem--indent { + @include dafa__reset-list; + margin-left: 1rem; + } + + &__description { + margin-left: 0.1rem; + grid-column: 1; + } + + &__term { margin: 0; - } - - dt { grid-column: 1; font-weight: var(--digi--typography--font-weight--semibold); } - dd { - grid-column: 2; - } + //BUTTONS - &__organizations { - @include dafa__reset-list; - display: flex; - flex-direction: column; - gap: 1rem; - } - - &__organization { - border: 1px solid #333; - padding: var(--digi--layout--gutter); - - h3 { - margin-top: 0; + &__primarybutton { + a { + @include dafa_buttontemplate( + $dafa-button--background--primary, + $dafa-button--text--primary, + $dafa-button--hover--primary + ); } } - &__participants { - @include dafa__reset-list; - margin: var(--digi--layout--gutter) 0; + &__secondarybutton { + a { + @include dafa_buttontemplate( + $dafa-button--background--secondary, + $dafa-button--text--secondary, + $dafa-button--hover--secondary + ); + } } - &__participant { - padding: var(--digi--layout--gutter--s) var(--digi--layout--gutter--xs); - - &:nth-child(even) { - background-color: var(--digi--ui--color--background--tertiary); + &__editbutton { + a { + @include dafa_buttontemplate( + $dafa-button--background--secondary, + $dafa-button--text--secondary, + $dafa-button--hover--secondary + ); + width: var(--digi-button--width); } } } diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.ts index bf0e935..bcf7481 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/employee-card/employee-card.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { ChangeDetectionStrategy, Component} from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Employee } from '@dafa-models/employee.model'; import { Participant } from '@dafa-models/participant.model'; @@ -26,6 +26,7 @@ export class EmployeeCardComponent { return this._pendingSelectedParticipants$.getValue(); } + handleChangeEmployee(): void { console.log('change employee: ', this.pendingSelectedParticipants); } diff --git a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts index f96a4ec..c28ad0f 100644 --- a/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts +++ b/apps/dafa-web/src/app/pages/administration/pages/employee-form/employee-form.component.ts @@ -9,7 +9,7 @@ import { EmployeeService } from '@dafa-services/api/employee.service'; import { ServiceService } from '@dafa-services/api/service.service'; import { SocialSecurityNumberValidator } from '@dafa-utils/validators/social-security-number.validator'; import { RequiredValidator } from '@dafa-validators/required.validator'; -import { BehaviorSubject, Observable } from 'rxjs'; +import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; @Component({ @@ -24,7 +24,7 @@ export class EmployeeFormComponent { servicesSelectItems$: Observable = this.services$.pipe( map(services => services.map(({ name, id }) => ({ name, value: id }))) ); - toggleDialog: boolean = false; + toggleDialog = false; modalAuthInfo: any = {'name': 'Test Behörighetsnamn'}; formGroup: FormGroup = this.formBuilder.group({ diff --git a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts index 93e5c07..83962a3 100644 --- a/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts +++ b/apps/dafa-web/src/app/shared/components/hide-text/hide-text.component.ts @@ -12,7 +12,7 @@ export class HideTextComponent { @Input() symbols: string; @Input() ariaLabelType = 'text'; - hideText: boolean = true; + hideText = true; iconType = IconType; get transformedText(): string { diff --git a/apps/dafa-web/src/styles/mixins/_buttons.scss b/apps/dafa-web/src/styles/mixins/_buttons.scss new file mode 100644 index 0000000..3d6dca1 --- /dev/null +++ b/apps/dafa-web/src/styles/mixins/_buttons.scss @@ -0,0 +1,31 @@ +@import './variables/colors'; + +//Button properties + +$dafa-button--padding: var(--digi-button--padding); +$dafa-button--margin: 0.5rem; +$dafa-button--border-radius: var(--digi-button--border-radius); +$dafa-button--transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; +$dafa-button--border: var(--digi-button--border); +$dafa-button--text-decoration: none; +$dafa-button--font-weight: var(--digi-button--font-weight); +$dafa-button--font-font-size: var(--digi-button--font-size); + +//A basic link button + +@mixin dafa_buttontemplate($backgroundcolor, $textcolor, $hovercolor) { + background: $backgroundcolor; + padding: $dafa-button--padding; + margin: $dafa-button--margin; + border-radius: $dafa-button--border-radius; + transition: $dafa-button--transition; + border: $dafa-button--border; + text-decoration: none; + font-weight: $dafa-button--font-weight; + font-size: $dafa-button--font-font-size; + color: $textcolor; + + &:hover { + background: $hovercolor; + } +} diff --git a/apps/dafa-web/src/styles/mixins/_list.scss b/apps/dafa-web/src/styles/mixins/_list.scss index f4f299b..cda6e23 100644 --- a/apps/dafa-web/src/styles/mixins/_list.scss +++ b/apps/dafa-web/src/styles/mixins/_list.scss @@ -1,5 +1,8 @@ @mixin dafa__reset-list { - list-style: none; + list-style-type: none; padding: 0; margin: 0; } + + + diff --git a/apps/dafa-web/src/styles/variables/_colors.scss b/apps/dafa-web/src/styles/variables/_colors.scss index 7885520..0711a26 100644 --- a/apps/dafa-web/src/styles/variables/_colors.scss +++ b/apps/dafa-web/src/styles/variables/_colors.scss @@ -1,6 +1,15 @@ @import '~@digi/styles/src/ui/variables/ui__variables'; +@import '~@digi/core/dist/collection/components/_button/button/button.css'; // AF DIGI Variables $digi--ui--color--primary-light: lighten($digi--ui--color--primary, 10%); +$digi--ui--color--primary: $digi--ui--color--stratos; // Local variables + +$dafa-button--background--primary: var(--digi-button--background); +$dafa-button--text--primary: var(--digi--typography--color--text--light); +$dafa-button--hover--primary: var(--digi-button--background--hover); +$dafa-button--background--secondary: var(--digi-button--background--secondary); +$dafa-button--text--secondary: var(--digi--ui--color--primary); +$dafa-button--hover--secondary: var(--digi-button--background--secondary--hover);