102 feature uiux (#103)

* [Feat][UI/UX] Enhance coordinate input fields UI experience

 - below components converted to standalone component
   - new journey
   - page header
   - world map

* [Feat][UI/UX] Enhance coordinate input fields UI experience

 - varies paste options added for entering coordinates

---------

Co-authored-by: Ramachandran Nellaiyappan <ramachandran.nellaiyappan@1und1.de>

src/app/app.module.ts

@@ -3,7 +3,6 @@ import {BrowserModule} from '@angular/platform-browser';
 
 import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
-import {WorldMapComponent} from './component/world-map/world-map.component';
 import {NgbDateAdapter, NgbModule} from "@ng-bootstrap/ng-bootstrap";
 import {SideNavbarComponent} from './component/side-navbar/side-navbar.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -14,7 +13,6 @@ import {DashboardComponent} from './page/dashboard/dashboard.component';
 import {SearchComponent} from './page/search/search.component';
 import {GalleryComponent} from './page/gallery/gallery.component';
 import {WorkspaceComponent} from './page/workspace/workspace.component';
-import {PageHeaderComponent} from './component/page-header/page-header.component';
 import {HttpClientModule} from "@angular/common/http";
 import {MarkerPopupComponent} from './component/marker-popup/marker-popup.component';
 import {LocationComponent} from './page/location/location.component';
@@ -25,7 +23,6 @@ import {MatTabsModule} from "@angular/material/tabs";
 import {LocationCardComponent} from "./component/location-card/location-card.component";
 import {CloudinaryModule} from "@cloudinary/ng";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {NewJourneyComponent} from "./page/journeys/new-journey/new-journey.component";
 import {UpdateJourneyDetailsComponent} from "./page/workspace/update-journey-details/update-journey-details.component";
 import {
   MatStep,
@@ -74,24 +71,23 @@ import {
 } from "./page/journeys/edit-journey/edit-journey-image-details/edit-journey-images-details.component";
 import {MatBadge} from "@angular/material/badge";
 import {
-    EditJourneyVideosDetailsComponent
+  EditJourneyVideosDetailsComponent
 } from "./page/journeys/edit-journey/edit-journey-video-details/edit-journey-videos-details.component";
+import {PageHeaderComponent} from "./component/page-header/page-header.component";
+import {WorldMapComponent} from "./component/world-map/world-map.component";
 
 @NgModule({
   declarations: [
     AppComponent,
-    WorldMapComponent,
     SideNavbarComponent,
     HomeComponent,
     SearchJourneyComponent,
-    NewJourneyComponent,
     ViewJourneyComponent,
     EditJourneyComponent,
     DashboardComponent,
     SearchComponent,
     GalleryComponent,
     WorkspaceComponent,
-    PageHeaderComponent,
     MarkerPopupComponent,
     LocationComponent,
     MediaViewerComponent,
@@ -101,58 +97,60 @@ import {
     EditJourneyGeoDetailsComponent,
     EditJourneyImagesDetailsComponent
   ],
-    imports: [
-        BrowserModule,
-        NgbModule,
-        AppRoutingModule,
-        BrowserAnimationsModule,
-        MatButtonModule,
-        MatIconModule,
-        HttpClientModule,
-        MediaGalleryComponent,
-        MatTabsModule,
-        LocationCardComponent,
-        CloudinaryModule,
-        FormsModule,
-        UpdateJourneyDetailsComponent,
-        MatStepper,
-        MatStep,
-        MatStepLabel,
-        MatStepContent,
-        ReactiveFormsModule,
-        MatPaginator,
-        MatHeaderCell,
-        MatColumnDef,
-        MatCell,
-        MatProgressSpinnerModule,
-        MatTable,
-        MatSort,
-        MatHeaderRow,
-        MatRow,
-        MatRowDef,
-        MatCellDef,
-        MatHeaderCellDef,
-        MatHeaderRowDef,
-        MatSortHeader,
-        MatRipple,
-        MatDatepickerInput,
-        MatHint,
-        MatSuffix,
-        MatDatepickerToggle,
-        MatDatepicker,
-        MatChipGrid,
-        MatChipRow,
-        MatChipInput,
-        MatFormField,
-        MatChipRemove,
-        MatChip,
-        MatChipOption,
-        MatStepperNext,
-        MatStepperIcon,
-        FeedbackMessageComponent,
-        MatBadge,
-        EditJourneyVideosDetailsComponent
-    ],
+  imports: [
+    BrowserModule,
+    NgbModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatIconModule,
+    HttpClientModule,
+    MediaGalleryComponent,
+    MatTabsModule,
+    LocationCardComponent,
+    CloudinaryModule,
+    FormsModule,
+    UpdateJourneyDetailsComponent,
+    MatStepper,
+    MatStep,
+    MatStepLabel,
+    MatStepContent,
+    ReactiveFormsModule,
+    MatPaginator,
+    MatHeaderCell,
+    MatColumnDef,
+    MatCell,
+    MatProgressSpinnerModule,
+    MatTable,
+    MatSort,
+    MatHeaderRow,
+    MatRow,
+    MatRowDef,
+    MatCellDef,
+    MatHeaderCellDef,
+    MatHeaderRowDef,
+    MatSortHeader,
+    MatRipple,
+    MatDatepickerInput,
+    MatHint,
+    MatSuffix,
+    MatDatepickerToggle,
+    MatDatepicker,
+    MatChipGrid,
+    MatChipRow,
+    MatChipInput,
+    MatFormField,
+    MatChipRemove,
+    MatChip,
+    MatChipOption,
+    MatStepperNext,
+    MatStepperIcon,
+    FeedbackMessageComponent,
+    MatBadge,
+    EditJourneyVideosDetailsComponent,
+    PageHeaderComponent,
+    WorldMapComponent
+  ],
   providers: [
     {
       provide: LIGHTBOX_CONFIG, useValue: {
@@ -162,9 +160,7 @@ import {
     },
     {provide: NgbDateAdapter, useClass: JourneyDateAdapter}
   ],
-  exports: [
-    PageHeaderComponent
-  ],
+  exports: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {

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

@@ -3,7 +3,8 @@ import {PageInfo} from "../../model/page-info";
 
 @Component({
   selector: 'app-page-header',
-  templateUrl: './page-header.component.html'
+  templateUrl: './page-header.component.html',
+  standalone: true
 })
 export class PageHeaderComponent {
 

src/app/component/world-map/world-map.component.ts

@@ -32,7 +32,8 @@ L.Marker.prototype.options.icon = iconDefault;
 @Component({
   selector: 'app-world-map',
   templateUrl: './world-map.component.html',
-  styleUrls: ['./world-map.component.scss']
+  styleUrls: ['./world-map.component.scss'],
+  standalone: true
 })
 export class WorldMapComponent implements AfterViewInit {
   private elementRef: ElementRef = inject(ElementRef);

src/app/page/journeys/new-journey/new-journey.component.html

@@ -115,10 +115,18 @@
 
         <div class="col-12 col-md-6">
           <div class="input-group mb-3">
-            <span class="input-group-text">Coordinates</span>
             <input type="number" class="form-control" placeholder="Longitude" aria-label="Longitude"
                    id="longitude" name="longitude" [(ngModel)]="coordinates[0]" [readOnly]="journey.id"
                    required min="-180.0" max="180.0" #longitude="ngModel" (blur)="refreshMapWithCoordinates()">
+            <button class="btn btn-primary input-group-text dropdown-toggle" data-bs-toggle="dropdown"
+                    aria-expanded="false">
+              Coordinates
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" role="button" (click)="copyCoordinatesFromGoogleMap()">Paste coordinates copied from Google Map</a></li>
+              <li><a class="dropdown-item" role="button" (click)="copyCoordinatesFromClipboard()">Paste from clipboard</a></li>
+              <li><a class="dropdown-item" role="button" (click)="swapCoordinates()">Swap Coordinates</a></li>
+            </ul>
             <input type="number" class="form-control" placeholder="Latitude" aria-label="Latitude"
                    id="latitude" name="latitude" [(ngModel)]="coordinates[1]" [readOnly]="journey.id"
                    required min="-90.0" max="90.0" #latitude="ngModel" (blur)="refreshMapWithCoordinates()">

src/app/page/journeys/new-journey/new-journey.component.ts

@@ -2,16 +2,34 @@ import {Component} from '@angular/core';
 import {NEW_JOURNEY_PAGE_INFO} from "../../../model/page-info";
 import {Journey} from "../../../model/core/journey.model";
 import {JourneyService} from "../../../service/journey/journey.service";
-import {NgForm} from "@angular/forms";
+import {FormsModule, NgForm} from "@angular/forms";
 import {Router} from "@angular/router";
 import {COMMA, ENTER, SPACE} from "@angular/cdk/keycodes";
-import {MatChipInputEvent} from "@angular/material/chips";
+import {MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRow} from "@angular/material/chips";
 import {debounceTime, distinctUntilChanged, map, Observable, OperatorFunction} from "rxjs";
+import {NgbInputDatepicker, NgbTypeahead} from "@ng-bootstrap/ng-bootstrap";
+import {MatIcon} from "@angular/material/icon";
+import {NgIf} from "@angular/common";
+import {PageHeaderComponent} from "../../../component/page-header/page-header.component";
+import {WorldMapComponent} from "../../../component/world-map/world-map.component";
 
 @Component({
   selector: 'app-new-journey',
   templateUrl: './new-journey.component.html',
-  styleUrl: './new-journey.component.scss'
+  styleUrl: './new-journey.component.scss',
+  imports: [
+    FormsModule,
+    NgbTypeahead,
+    MatChipGrid,
+    MatChipRow,
+    MatIcon,
+    MatChipInput,
+    NgIf,
+    NgbInputDatepicker,
+    PageHeaderComponent,
+    WorldMapComponent
+  ],
+  standalone: true
 })
 export class NewJourneyComponent {
   protected readonly NEW_JOURNEY_PAGE_INFO = NEW_JOURNEY_PAGE_INFO;
@@ -57,7 +75,7 @@ export class NewJourneyComponent {
 
   continue() {
     if (this.journey.id) {
-      this.router.navigate(['/journey', this.journey.id, 'edit']);
+      this.router.navigate(['/journey', this.journey.id, 'edit']).then();
     }
   }
 
@@ -96,4 +114,33 @@ export class NewJourneyComponent {
       }
     }
   }
+
+  swapCoordinates() {
+    let temp = this.coordinates[0];
+    this.coordinates[0] = this.coordinates[1];
+    this.coordinates[1] = temp;
+    this.refreshMapWithCoordinates();
+  }
+
+  async copyCoordinatesFromGoogleMap() {
+    const copiedValue = await navigator.clipboard.readText()
+    console.debug('Value copied from clipboard:', copiedValue);
+    if (copiedValue) {
+      let copiedCoordinates = copiedValue.split(',');
+      this.coordinates[0] = Number(copiedCoordinates.length < 2 ? copiedCoordinates[0] : copiedCoordinates[1]);
+      this.coordinates[1] = Number(copiedCoordinates[0]);
+      this.refreshMapWithCoordinates();
+    }
+  }
+
+  async copyCoordinatesFromClipboard() {
+    const copiedValue = await navigator.clipboard.readText()
+    console.debug('Value copied from clipboard:', copiedValue);
+    if (copiedValue) {
+      let copiedCoordinates = copiedValue.split(',');
+      this.coordinates[0] = Number(copiedCoordinates[0]);
+      this.coordinates[1] = Number(copiedCoordinates.length >= 2 ? copiedCoordinates[1] : copiedCoordinates[0]);
+      this.refreshMapWithCoordinates();
+    }
+  }
 }