From: Bastian Dehn Date: Fri, 1 Jul 2022 16:32:24 +0000 (+0200) Subject: add: drag and drop for food items X-Git-Tag: v1.0.4^2^2 X-Git-Url: https://gitweb.hhaalo.de/?a=commitdiff_plain;h=5010792aa836a2aac60da84789594f957a143d19;p=speisekarten-editor.git add: drag and drop for food items --- diff --git a/angular.json b/angular.json index 8aad716..ac71ad0 100644 --- 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 70c4264..2c6ce3b 100644 --- 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 58699b3..b3cfb87 100644 --- 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 1ed8a8b..3d58ae1 100644 --- 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 40be1c7..e38ebf3 100644 --- a/src/app/subtitle/subtitle.component.html +++ b/src/app/subtitle/subtitle.component.html @@ -21,13 +21,15 @@ (click)="saveSubtitle()">Speichern -
- - - +
+
+ + + +
diff --git a/src/app/subtitle/subtitle.component.ts b/src/app/subtitle/subtitle.component.ts index 2384943..e6570b7 100644 --- 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) + { + moveItemInArray(this.subtitle.Foods, + event.previousIndex, + event.currentIndex); + } } diff --git a/src/index.html b/src/index.html index 0b1c5f6..4d9e641 100644 --- a/src/index.html +++ b/src/index.html @@ -6,6 +6,9 @@ + + + diff --git a/src/styles.css b/src/styles.css index 90d4ee0..7e7239a 100644 --- 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; }