initial commit

angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": [],
@@ -84,6 +85,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.scss"
             ],
             "scripts": [],

package.json

@@ -12,14 +12,17 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~7.2.0",
+    "@angular/cdk": "~7.3.7",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
     "@angular/forms": "~7.2.0",
+    "@angular/material": "^7.3.7",
     "@angular/platform-browser": "~7.2.0",
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
+    "hammerjs": "^2.0.8",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"

src/app/app.component.html

@@ -1,21 +1,2 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{ title }}!
-  </h1>
-  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
-  </li>
-</ul>
-
+<app-main-page></app-main-page>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -3,16 +3,39 @@ import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MainPageComponent } from './main-page/main-page.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatInputModule } from '@angular/material/input';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { DataService } from './data.service';
+import { FormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MainPageComponent
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatToolbarModule,
+    MatCheckboxModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    FormsModule,
+    MatMenuModule,
+    DragDropModule
   ],
-  providers: [],
+  providers: [DataService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/data.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: DataService = TestBed.get(DataService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/data.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+
+  constructor() { }
+
+  getData(){
+    return [
+      {"_id":1, "description":"something to do 1","date":"date 1","checked":true},
+      {"_id":2, "description":"something to do 2","date":"date 2","checked":false},
+      {"_id":3, "description":"something to do 3","date":"date 3","checked":false},
+      {"_id":4, "description":"something to do 4","date":"date 4","checked":true}
+    ]
+  }
+}

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

@@ -0,0 +1,39 @@
+<mat-toolbar>  
+    <mat-toolbar-row>
+      <span>fake to do</span> 
+    </mat-toolbar-row>
+</mat-toolbar>
+
+<div class="container">
+    <div class="checkbox">
+      <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
+        <mat-checkbox class="example-box" *ngFor="let data of datas" [(ngModel)]="data.checked" cdkDrag>
+          id : {{ data._id }}
+          description : {{ data.description }}
+          date : {{ data.date | date:'medium' }}
+          {{ data.checked }}
+        </mat-checkbox>
+      </div>
+    </div>
+
+    <form #myForm="ngForm" class="form">
+
+      <mat-form-field class="full-width">
+        <input #descriptionModel="ngModel" matInput placeholder="Description" required minlength="5" name="description" [(ngModel)]="description">
+        <mat-error *ngIf="descriptionModel?.errors?.required">This field is required</mat-error>
+        <mat-error *ngIf="descriptionModel?.errors?.minlength">You must type at least {{descriptionModel?.errors.minlength.requiredLength}} characters</mat-error>       
+      </mat-form-field>
+
+      <mat-form-field>
+        <input #dateModel="ngModel" matInput [matDatepicker]="picker" placeholder="Choose a date" required name="date" [(ngModel)]="date">
+        <mat-datepicker-toggle matSuffix [for]="picker" ></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+        <mat-error *ngIf="dateModel?.errors?.required">This field is required</mat-error>
+      </mat-form-field>
+
+      <button mat-button (click)="pushData()" [disabled]="myForm.invalid">Add Task</button>
+      <button mat-button (click)="myForm.resetForm()">Cancel</button>
+
+    </form>
+    <!--{{ descriptionModel.errors | json}}-->
+</div>

src/app/main-page/main-page.component.scss

@@ -0,0 +1,81 @@
+$first-color: #5085ca;
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 10px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+    border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+:host {
+    mat-toolbar {
+        background-color: $first-color;
+        height: 44px;
+        min-height: 0px;
+        border-bottom: solid 2px #4a80bd;
+
+        span {
+            color:rgba(255, 255, 255, 0.973);
+        }
+    }
+
+    .container {
+        max-width: 1000px;
+        margin: 0px auto;
+
+        .checkbox {
+            max-width: 500px;
+            margin: 10px auto;
+
+            .example-list {
+                width: 500px;
+                max-width: 100%;
+                border: solid 1px #ccc;
+                min-height: 44px;
+                background: white;
+                border-radius: 4px;
+                overflow: hidden;
+
+                .example-box {
+                    padding: 10px 10px;
+                    border-bottom: solid 1px #ccc;
+                    color: rgba(0, 0, 0, 0.87);
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    justify-content: space-between;
+                    box-sizing: border-box;
+                    cursor: move;
+                    background: white;
+                    font-size: 14px;
+                } 
+            }
+        }
+    }
+
+    .form {
+        max-width: 500px;
+        margin: 0 auto;
+
+        .full-width {
+        width: 100%;
+        }
+    }  
+
+}

src/app/main-page/main-page.component.spec.ts

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

src/app/main-page/main-page.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { DataService } from '../data.service';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
+import { NgForm } from '@angular/forms';
+
+@Component({
+  selector: 'app-main-page',
+  templateUrl: './main-page.component.html',
+  styleUrls: ['./main-page.component.scss']
+})
+export class MainPageComponent implements OnInit {
+
+  public datas = [];
+  public description = "";
+  public date = "";
+  @ViewChild('myForm') myForm: NgForm;
+
+  constructor(private _dataService: DataService) { }
+
+  ngOnInit() {
+    //this.datas = this._dataService.getData();
+  }
+
+  pushData(){
+    this.datas.push({description: this.description, date: this.date});
+    this.myForm.resetForm();
+    this.myForm.control.markAsUntouched();
+    //this.myForm.controls.description.markAsUntouched();
+    console.log(this.myForm.controls);
+  }
+
+  drop(event: CdkDragDrop<string[]>) {
+    moveItemInArray(this.datas, event.previousIndex, event.currentIndex);
+  }
+
+}

src/index.html

@@ -7,6 +7,8 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

src/main.ts

@@ -1,3 +1,4 @@
+import 'hammerjs';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 

src/styles.scss

@@ -1 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }