add: drag and drop for food items

diff --git a/angular.json b/angular.json
index 8aad71644032bbc4f21c0f5374fadd6f90656c30..ac71ad0d966dbbcbdbd7422cc412079437f8cae6 100644 (file)
--- a/angular.json
+++ b/angular.json
@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "src/custom-theme.scss",
               "src/styles.css"
             ],
             "scripts": []

diff --git a/package-lock.json b/package-lock.json
index 70c4264bb55fcbe6a45b8e628eaffd310598b0b7..2c6ce3b0ace904e3971870bf07c4b375db936c05 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "~13.3.0",
+        "@angular/cdk": "^13.3.9",
         "@angular/common": "~13.3.0",
         "@angular/compiler": "~13.3.0",
         "@angular/core": "~13.3.0",
         "@angular/forms": "~13.3.0",
+        "@angular/material": "^13.3.9",
         "@angular/platform-browser": "~13.3.0",
         "@angular/platform-browser-dynamic": "~13.3.0",
         "@angular/router": "~13.3.0",
@@ -347,6 +349,28 @@
         "@angular/core": "13.3.11"
       }
     },
+    "node_modules/@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "13.3.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.8.tgz",
@@ -564,6 +588,23 @@
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
+    "node_modules/@angular/material": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
+      "integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^13.0.0 || ^14.0.0-0",
+        "@angular/cdk": "13.3.9",
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "@angular/forms": "^13.0.0 || ^14.0.0-0",
+        "@angular/platform-browser": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@angular/platform-browser": {
       "version": "13.3.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.11.tgz",
@@ -12100,6 +12141,23 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "13.3.8",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.8.tgz",
@@ -12252,6 +12310,14 @@
         "tslib": "^2.3.0"
       }
     },
+    "@angular/material": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.9.tgz",
+      "integrity": "sha512-FU8lcMgo+AL8ckd27B4V097ZPoIZNRHiCe3wpgkImT1qC0YwcyXZVn0MqQTTFSdC9a/aI8wPm3AbTClJEVw5Vw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "13.3.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-13.3.11.tgz",

diff --git a/package.json b/package.json
index 58699b369ce7a6e88709cdafdfb3f7861c3aada1..b3cfb87d6c47c83fbc2de0dac74785f6c9da0808 100644 (file)
--- a/package.json
+++ b/package.json
@@ -11,10 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.0",
+    "@angular/cdk": "^13.3.9",
     "@angular/common": "~13.3.0",
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",
     "@angular/forms": "~13.3.0",
+    "@angular/material": "^13.3.9",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
@@ -36,4 +38,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}
\ No newline at end of file

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1ed8a8b83eedef339f5aeb2ae55db908ef4ae375..3d58ae11c36b835596d61b4607b0ef59863a11c3 100644 (file)
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,7 +1,9 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { AppComponent } from './app.component';
 import { FoodComponent } from './food/food.component';
@@ -20,7 +22,9 @@ import { FoodcardComponent } from './foodcard/foodcard.component';
   imports: [
     BrowserModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
+    BrowserAnimationsModule,
+    DragDropModule
   ],
   providers: [],
   bootstrap: [AppComponent]

diff --git a/src/app/subtitle/subtitle.component.html b/src/app/subtitle/subtitle.component.html
index 40be1c7b8d162dada54bf42ac3d8e28f3585a24a..e38ebf329ace6186ab1d6133c2600ea571a012af 100644 (file)
--- a/src/app/subtitle/subtitle.component.html
+++ b/src/app/subtitle/subtitle.component.html
@@ -21,13 +21,15 @@
                        (click)="saveSubtitle()">Speichern</button>
        </form>
 
-       <div *ngFor="let food of subtitle.Foods; let i = index">
-               <app-food [food]="food"></app-food>
-               <button class="button"
-                       type="button"
-                       (click)="insertNewFood(i)">Einfügen</button>
-               <button class="button"
-                       type="button"
-                       (click)="removeFood(i)">Löschen</button>
+       <div cdkDropList (cdkDropListDropped)="reorderList($event)">
+               <div *ngFor="let food of subtitle.Foods; let i = index" cdkDrag>
+                       <app-food [food]="food"></app-food>
+                       <button class="button"
+                               type="button"
+                               (click)="insertNewFood(i)">Einfügen</button>
+                       <button class="button"
+                               type="button"
+                               (click)="removeFood(i)">Löschen</button>
+               </div>
        </div>
 </div>

diff --git a/src/app/subtitle/subtitle.component.ts b/src/app/subtitle/subtitle.component.ts
index 2384943b75bf589da8f7ddba63613df711381c7e..e6570b76194acdfd90eab6de709c25ff1a80fb98 100644 (file)
--- a/src/app/subtitle/subtitle.component.ts
+++ b/src/app/subtitle/subtitle.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ISubtitle } from '../isubtitle';
+import { IFood } from '../ifood';
 
 @Component({
        selector: 'app-subtitle',
@@ -52,4 +54,11 @@ export class SubtitleComponent implements OnInit
        {
                this.subtitle.Foods.splice(index, 1);
        }
+
+       public reorderList(event: CdkDragDrop<IFood[]>)
+       {
+               moveItemInArray(this.subtitle.Foods,
+                       event.previousIndex,
+                       event.currentIndex);
+       }
 }

diff --git a/src/index.html b/src/index.html
index 0b1c5f688a526e262394c824939f03fd4d103b7e..4d9e641b6d5c593d21ed37cadd5478eecbc6118e 100644 (file)
--- a/src/index.html
+++ b/src/index.html
@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>

diff --git a/src/styles.css b/src/styles.css
index 90d4ee0072ce3fc41812f8af910219f9eea3c3de..7e7239a2eeea2a25f548d2e04302921d28c2a27e 100644 (file)
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }