Merge pull request #75 from Vastra-Gotalandsregionen/#153086320_full_…

…layout_kort #153086320 full layout kort
Vastra-Gotalandsregionen · Nov 27, 2017 · 7d4099f · 7d4099f
2 parents 7190697 + aeb1588
commit 7d4099f
Show file tree

Hide file tree

Showing 14 changed files with 138 additions and 19 deletions.
diff --git a/Content/partials/_components.card.scss b/Content/partials/_components.card.scss
@@ -30,6 +30,11 @@
   }
 }
 
+.card__fullwidth-container {
+  @extend .card__section-container;
+  flex: 1 1 auto;
+}
+
 .card__left-container {
   @extend .card__section-container;
   border-right: 1px solid $border-color;

diff --git a/component-package/controls/card/card.component.html b/component-package/controls/card/card.component.html
@@ -1,9 +1,20 @@
 <ng-content select=".card__top"></ng-content>
-<div class="card__bottom-container">
-  <div class="card__left-container">
-    <ng-content select="vgr-card-section.card__left"></ng-content>
+
+<div *ngIf="mode===2">
+  <div class="card__bottom-container">
+    <div class="card__left-container">
+      <ng-content select="vgr-card-section.card__left"></ng-content>
+    </div>
+    <div class="card__right-container">
+      <ng-content select="vgr-card-section.card__right"></ng-content>
+    </div>
   </div>
-  <div class="card__right-container">
-    <ng-content select="vgr-card-section.card__right"></ng-content>
+</div>
+
+<div *ngIf="mode===1">
+  <div class=" card__bottom-container">
+    <div class="card__fullwidth-container">
+      <ng-content select="vgr-card-section"></ng-content>
+    </div>
   </div>
 </div>
diff --git a/component-package/controls/card/card.component.ts b/component-package/controls/card/card.component.ts
@@ -1,12 +1,24 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'vgr-card',
     moduleId: module.id,
     templateUrl: './card.component.html'
 })
-export class CardComponent {
-    @HostBinding('class.card') cardClass = true;
+export class CardComponent implements OnInit {
+    // @HostBinding('class.card') cardClass = true;
+    @Input() mode: CardMode;
     constructor() {
+        console.log(this.mode);
+    }
+
+    ngOnInit() {
+        this.mode = this.mode === null || this.mode === undefined ? CardMode.fullWidth : this.mode;
+        console.log(this.mode);
     }
 }
+
+enum CardMode {
+    fullWidth = 1,
+    twoCollumns = 2
+}
diff --git a/demo-app/app.module.ts b/demo-app/app.module.ts
@@ -20,6 +20,7 @@ import { ExampleLayoutComponent } from './example-layout/example-layout.componen
 import { FakeAComponent } from './fake/fake-a.component';
 import { FakeBComponent } from './fake/fake-b.component';
 import { FakeCComponent } from './fake/fake-c.component';
+import { FullWidthCardComponent } from './fake/full-width-card.component';
 import { LoaderDemoComponent } from './loaderdemo/loaderdemo.component'
 import { CityService } from './inputFields/cityService';
 
@@ -49,7 +50,8 @@ import { appRoutes } from './routes'
         ExampleLayoutComponent,
         FakeAComponent,
         FakeBComponent,
-        FakeCComponent
+        FakeCComponent,
+        FullWidthCardComponent
     ],
     providers: [
         CityService, { provide: LOCALE_ID, useValue: 'sv-SE' }

diff --git a/demo-app/fake/fake-b.component.html b/demo-app/fake/fake-b.component.html
@@ -1,9 +1,13 @@
 <vgr-page-block>
-  <vgr-list>
-    <div class="list__header">
+  <vgr-list [flexibleHeader]="true" (sortChanged)="onSortChanged($event)">
+    <!-- <div class="list__header">
       <span class="flex-column-13">Förnamn</span>
       <span class="flex-column-15">Efternamn</span>
-    </div>
+    </div> -->
+    <vgr-list-header>
+      <vgr-list-column-header [text]="'Förnamn'" [width]="5" [sortKey]="'firstName'" [sortDirection]="sortDirections.Ascending"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+    </vgr-list-header>
     <vgr-list-item [notification]="notification">
       <div class="list-item__header">
         <div class="flex-column-13">John</div>

diff --git a/demo-app/fake/fake-b.component.ts b/demo-app/fake/fake-b.component.ts
@@ -1,12 +1,18 @@
 import { Component, ViewChildren, QueryList } from '@angular/core';
-
+import { SortDirection, } from '../../component-package/controls/list/list-column-header.component';
+import { SortChangedArgs } from '../../component-package/controls/list/list-header.component';
 
 @Component({
     moduleId: module.id,
     selector: 'vgr-fake-b',
     templateUrl: 'fake-b.component.html'
 })
 export class FakeBComponent {
+    sortDirections = SortDirection;
+
     constructor() { }
 
+    onSortChanged(event) {
+        console.log(event);
+    }
 }
diff --git a/demo-app/fake/fake-c.component.html b/demo-app/fake/fake-c.component.html
@@ -31,10 +31,18 @@
 </vgr-page-block>
 <vgr-page-block>
   <vgr-list class="list--inline">
-    <div class="list__header">
+    <!-- <div class="list__header">
       <span class="flex-column-13">Förnamn</span>
       <span class="flex-column-15">Efternamn</span>
-    </div>
+    </div> -->
+    <vgr-list-header>
+      <vgr-list-column-header [text]="'Förnamn'" [width]="5" [sortKey]="'firstName'" [sortDirection]="sortDirections.Ascending"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+      <vgr-list-column-header [text]="'Efternamn'" [width]="5" [sortKey]="'lastName'"></vgr-list-column-header>
+    </vgr-list-header>
     <vgr-list-item [notification]="notification">
       <div class="list-item__header">
         <div class="flex-column-13">John</div>

diff --git a/demo-app/fake/fake-c.component.ts b/demo-app/fake/fake-c.component.ts
@@ -1,4 +1,6 @@
 import { Component, ViewChildren, QueryList } from '@angular/core';
+import { SortDirection, } from '../../component-package/controls/list/list-column-header.component';
+import { SortChangedArgs } from '../../component-package/controls/list/list-header.component';
 
 
 @Component({
@@ -7,6 +9,7 @@ import { Component, ViewChildren, QueryList } from '@angular/core';
     templateUrl: 'fake-c.component.html'
 })
 export class FakeCComponent {
+    sortDirections = SortDirection;
     constructor() { }
 
 }
diff --git a/demo-app/fake/full-width-card.component.html b/demo-app/fake/full-width-card.component.html
@@ -0,0 +1,53 @@
+<vgr-page-block>
+  <vgr-card>
+    <div class="card__top">
+      <div class="row-layout">
+        <div class="enhet-card__enhet-title">Enhet</div>
+        <div>Enhetens namn</div>
+      </div>
+
+      <div class="flex-right">
+        <vgr-button class="enhet-card__abort-button" [secondary]="true ">Avbryt</vgr-button>
+        <vgr-button [secondary]="true ">Spara enhet</vgr-button>
+      </div>
+    </div>
+
+    <vgr-card-section [title]=" 'Enhetsinformation' " [expanded]="true " [readonly]="readonly">
+      <div class="title-value-layout">
+        <vgr-title-value [title]=" 'HSA-id' ">
+          <span>SE2321000131-E000000011887</span>
+        </vgr-title-value>
+        <vgr-title-value title="Avtalskod* ">
+          <vgr-input></vgr-input>
+        </vgr-title-value>
+        <vgr-title-value [title]=" 'Enhetskod*' ">
+          <span></span>
+        </vgr-title-value>
+        <vgr-title-value [title]=" 'Nämnd*' ">
+          <!-- <vgr-dropdown [noItemSelectedLabel]="'Välj nämnd'"></vgr-dropdown> -->
+        </vgr-title-value>
+        <vgr-title-value [title]=" 'Avtalsperiod*' ">
+          <div class="row-layout">
+            <vgr-monthpicker></vgr-monthpicker>
+            <vgr-monthpicker></vgr-monthpicker>
+          </div>
+        </vgr-title-value>
+      </div>
+    </vgr-card-section>
+    <vgr-card-section [title]=" 'Ersättningsgrundande information' " [readonly]="readonly " [expanded]="true">
+      <div class="title-value-layout ">
+        <vgr-title-value [title]=" 'Medverkan i familjecentral' ">
+          <!-- <vgr-dropdown [noItemSelectedLabel]="'Välj'"></vgr-dropdown> -->
+        </vgr-title-value>
+        <vgr-title-value [title]=" 'Regionsövergripande grupper (kr/månad)' ">
+          <vgr-input></vgr-input>
+        </vgr-title-value>
+      </div>
+    </vgr-card-section>
+    <vgr-card-section [title]=" 'Eget innehåll' " [readonly]="readonly " [expanded]="false">
+      <div>
+        Här kan man lägga in vad man vill själv
+      </div>
+    </vgr-card-section>
+  </vgr-card>
+</vgr-page-block>
diff --git a/demo-app/fake/full-width-card.component.ts b/demo-app/fake/full-width-card.component.ts
@@ -0,0 +1,13 @@
+import { Component, ViewChildren, QueryList, HostBinding } from '@angular/core';
+import { IDropdownItem } from '../../component-package/models/dropdownItem.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'vgr-full-width-card',
+  templateUrl: 'full-width-card.component.html'
+})
+export class FullWidthCardComponent {
+
+  constructor() { }
+
+}
diff --git a/demo-app/formexample/formexample.component.html b/demo-app/formexample/formexample.component.html
@@ -3,11 +3,12 @@
     <vgr-button (click)="view='A'">View A</vgr-button>
     <vgr-button (click)="view='B'">View B</vgr-button>
     <vgr-button (click)="view='C'">View C</vgr-button>
+    <vgr-button (click)="view='D'">Full Width Card</vgr-button>
     <vgr-button (click)="actionpanel=!actionpanel">Action</vgr-button>
   </vgr-page-header>
   <vgr-action-panel [expanded]="actionpanel" [title]="'Action-panel'">
 
-    <vgr-card>
+    <vgr-card [mode]="2">
       <div class="card__top">
         <div class="row-layout">
           <div class="enhet-card__enhet-title">Enhet</div>
@@ -136,6 +137,7 @@
     <vgr-fake-a *ngSwitchCase="'A'"></vgr-fake-a>
     <vgr-fake-b *ngSwitchCase="'B'"></vgr-fake-b>
     <vgr-fake-c *ngSwitchCase="'C'"></vgr-fake-c>
+    <vgr-full-width-card *ngSwitchCase="'D'"></vgr-full-width-card>
   </vgr-page-body>
 
 </vgr-page>
diff --git a/demo-app/lists/lists.component.html b/demo-app/lists/lists.component.html
@@ -3,7 +3,7 @@
     <vgr-button class="page-header__control" (click)="loadItems()">Foo</vgr-button>
   </vgr-page-header>
   <vgr-action-panel [expanded]="actionPanelVisible" [title]="'Lägg till ny enhet'">
-    <vgr-card>
+    <vgr-card [mode]="2">
       <div class="card__top flex-row">
         <span>Enhet</span>
         <span style="margin-left:40px">Mödravården Mölndal</span>

diff --git a/demo-app/lists/lists.component.ts b/demo-app/lists/lists.component.ts
@@ -46,7 +46,7 @@ export class ListsComponent {
             { id: '5', firstName: 'Erik', lastName: '', organisations: ['Team 2', 'Team 4'] } as ExamplePerson,
         ];
 
-
+        this.actionPanelVisible = true;
 
 
         this.grossAmount = 15000;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vgr-komponentkartan",
-  "version": "0.3.3-rc5",
+  "version": "0.3.3-rc6",
   "author": "Västra Götalandsregionen",
   "scripts": {
     "start": "concurrent \"npm run _watch-ts\" \"npm run _local-webserver\" \"npm run _watch-css\" \"npm run _watch-demo-app-css\"",
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ export class ListsComponent { @@
                 { id: '5', firstName: 'Erik', lastName: '', organisations: ['Team 2', 'Team 4'] } as ExamplePerson,
             ];
+            this.actionPanelVisible = true;
             this.grossAmount = 15000;
@@ Expand Down @@