(WiP) Commit Initial SetUp Pages

WiP


WiP

apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/index.ts

@@ -0,0 +1,5 @@
+// start:ng42.barrel
+export * from './shelf-edit-compartment.component';
+export * from './shelf-edit-compartment.module';
+// end:ng42.barrel
+

apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.html

@@ -0,0 +1,17 @@
+<div class="container layout-container">
+  <div class="layout-content">
+    <div class="isa-form-header sticky header">Kunde Name</div>
+    <hr class="isa-content-spacer" />
+
+    <ng-container>
+      <div class="isa-form-field">
+        <label for="Abholfachnummer">
+          Abholfachnummer
+          <input name="Abholfachnummer" type="text" />
+        </label>
+        <span class="status">Nicht Änderbar</span>
+      </div>
+      <hr class="isa-content-spacer" />
+    </ng-container>
+  </div>
+</div>

apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.scss

@@ -0,0 +1,6 @@
+.container {
+  .header {
+    //offset page layout padding
+    margin-top: -12px;
+  }
+}

apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of } from 'rxjs';
+import {
+  filter,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  take,
+  switchMap,
+} from 'rxjs/operators';
+import { isNullOrUndefined } from 'util';
+
+@Component({
+  selector: 'app-shelf-edit-compartment',
+  templateUrl: 'shelf-edit-compartment.component.html',
+  styleUrls: ['./shelf-edit-compartment.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShelfEditCompartmentComponent implements OnInit {
+  constructor(private activatedRoute: ActivatedRoute) {}
+
+  get compartmentCode$(): Observable<number> {
+    return this.activatedRoute.params.pipe(
+      filter((params) => !isNullOrUndefined(params)),
+      map((params) => Number(params.orderItemSubsetId)),
+      distinctUntilChanged(),
+      shareReplay()
+    );
+  }
+
+  ngOnInit() {
+    this.loadCompartment();
+  }
+
+  // TODO Implement get load compartment
+  loadCompartment() {
+    this.compartmentCode$.pipe(
+      take(1),
+      switchMap((code) => of({}))
+    );
+  }
+}

apps/sales/src/app/modules/shelf/pages/shelf-edit-compartment/shelf-edit-compartment.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ShelfEditCompartmentComponent } from './shelf-edit-compartment.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [ShelfEditCompartmentComponent],
+  declarations: [ShelfEditCompartmentComponent],
+  providers: [],
+})
+export class ShelfEditCompartmentModule {}

apps/sales/src/app/modules/shelf/pages/shelf-edit-order/index.ts

@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './shelf-edit-order.component';
+// end:ng42.barrel
+

apps/sales/src/app/modules/shelf/pages/shelf-edit-order/shelf-edit-order.component.ts

@@ -1,4 +1,9 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 import { CollectingShelfSelectors } from 'apps/sales/src/app/core/store/selectors/collecting-shelf.selector';
 import { Observable, Subject } from 'rxjs';
@@ -8,16 +13,18 @@ import { isNullOrUndefined } from 'util';
 import { Router, ActivatedRoute, Params } from '@angular/router';
 import { ChangeCurrentRoute } from 'apps/sales/src/app/core/store/actions/process.actions';
 import { PopBreadcrumbsAfterCurrent } from 'apps/sales/src/app/core/store/actions/breadcrumb.actions';
-import { CollectingShelfService } from 'apps/sales/src/app/core/services/collecting-shelf.service';
 import { SetBranchProcessCurrentPath } from 'apps/sales/src/app/core/store/actions/branch-process.actions';
 
 @Component({
   selector: 'app-shelf-edit-order',
   templateUrl: './shelf-edit-order.component.html',
   styleUrls: ['./shelf-edit-order.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ShelfEditOrderComponent implements OnInit, OnDestroy {
-  @Select(CollectingShelfSelectors.getShelfEditOrder) order$: Observable<OrderDTO>;
+  @Select(CollectingShelfSelectors.getShelfEditOrder) order$: Observable<
+    OrderDTO
+  >;
   destroy$ = new Subject();
   order: OrderDTO;
   compartmentCode: string;
@@ -28,7 +35,11 @@ export class ShelfEditOrderComponent implements OnInit, OnDestroy {
   customerId: number;
   itemId: number;
   multi = false;
-  constructor(private store: Store, private router: Router, private route: ActivatedRoute, private shelfService: CollectingShelfService) {}
+  constructor(
+    private store: Store,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
 
   ngOnInit() {
     this.route.params.pipe(take(1)).subscribe(this.routeParamsSubscriber$);
@@ -39,7 +50,14 @@ export class ShelfEditOrderComponent implements OnInit, OnDestroy {
   }
 
   routeParamsSubscriber$ = (params: Params) => {
-    if (params['id'] && params['status'] && params['type'] && params['orderId'] && params['origin'] && params['customerId']) {
+    if (
+      params['id'] &&
+      params['status'] &&
+      params['type'] &&
+      params['orderId'] &&
+      params['origin'] &&
+      params['customerId']
+    ) {
       this.status = params['status'];
       this.type = params['type'];
       this.compartmentCode = params['id'];
@@ -58,7 +76,11 @@ export class ShelfEditOrderComponent implements OnInit, OnDestroy {
           items:
             this.itemId === 0 || isNullOrUndefined(this.itemId)
               ? order.items
-              : order.items.filter((item) => item.data.subsetItems.some((subsetItem) => subsetItem.id === this.itemId)),
+              : order.items.filter((item) =>
+                  item.data.subsetItems.some(
+                    (subsetItem) => subsetItem.id === this.itemId
+                  )
+                ),
         }))
       )
       .subscribe(this.orderSubscriber$);
@@ -76,9 +98,9 @@ export class ShelfEditOrderComponent implements OnInit, OnDestroy {
   done() {
     if (this.compartmentCode || this.orderId) {
       if (this.origin === 'shelf') {
-        const path = `/shelf/details/${this.compartmentCode ? this.compartmentCode : this.orderId}/${this.orderId}/${this.status}/${
-          this.type
-        }`;
+        const path = `/shelf/details/${
+          this.compartmentCode ? this.compartmentCode : this.orderId
+        }/${this.orderId}/${this.status}/${this.type}`;
         this.store.dispatch(new PopBreadcrumbsAfterCurrent(path));
         this.store.dispatch(new ChangeCurrentRoute(path, true));
         this.router.navigate([path]);

apps/sales/src/app/modules/shelf/pages/shelf-edit-order/shelf-edit-order.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ShelfEditOrderComponent } from './shelf-edit-order.component';
+import {
+  OrderItemEditComponent,
+  OrderOverviewEditComponent,
+} from '../../components';
+import { ButtonModule, IconModule, DropdownModule } from '@libs/ui';
+import { ReactiveFormsModule } from '@angular/forms';
+import { SharedModule } from 'apps/sales/src/app/shared/shared.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ButtonModule,
+    IconModule,
+    ReactiveFormsModule,
+    DropdownModule,
+    SharedModule,
+  ],
+  exports: [
+    ShelfEditOrderComponent,
+    OrderItemEditComponent,
+    OrderOverviewEditComponent,
+  ],
+  declarations: [
+    ShelfEditOrderComponent,
+    OrderItemEditComponent,
+    OrderOverviewEditComponent,
+  ],
+  providers: [],
+})
+export class ShelfEditOrderModule {}

apps/sales/src/app/modules/shelf/shared/services/shelf-navigation.service.ts

@@ -69,11 +69,8 @@ export class ShelfNavigationService {
   }
 
   private getDetailsPath(order: OrderItemListItemDTO): string {
-    return `/shelf/details/${
-      order.compartmentCode ? order.compartmentCode : order.orderId
-    }/${order.orderId}/${order.processingStatus}/${
-      order.compartmentCode ? 'c' : 'o'
-    }`;
+    return `shelf/details/compartment/${order.compartmentCode}`;
+    // return `shelf/details/order/${order.orderNumber}`;
   }
 
   private createTab() {

apps/sales/src/app/modules/shelf/shelf-routing.module.ts

@@ -5,6 +5,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { ShelfOrderDetailsComponent } from './pages/shelf-order-details/shelf-order-details.component';
 import { ShelfEditOrderComponent } from './pages/shelf-edit-order/shelf-edit-order.component';
 import { ShelfHistoryComponent } from './pages/shelf-history';
+import { ShelfEditCompartmentComponent } from './pages/shelf-edit-compartment';
 
 export const routes: Routes = [
   {
@@ -16,13 +17,25 @@ export const routes: Routes = [
     component: ShelfSearchResultsComponent,
   },
   {
-    path: 'details/:id/:orderid/:status/:type',
+    path: 'details/order/:orderId',
     component: ShelfOrderDetailsComponent,
   },
   {
     path: 'edit/:id/:orderId/:status/:type/:origin/:customerId/:itemId',
     component: ShelfEditOrderComponent,
   },
+  {
+    path: 'details/order/:orderId/edit',
+    component: ShelfEditOrderComponent,
+  },
+  {
+    path: 'details/compartment/:compartmentCode',
+    component: ShelfEditCompartmentComponent,
+  },
+  {
+    path: 'details/compartment/:compartmentCode/edit',
+    component: ShelfEditCompartmentComponent,
+  },
   {
     path: 'history/:orderItemSubsetId',
     component: ShelfHistoryComponent,

apps/sales/src/app/modules/shelf/shelf.module.ts

@@ -5,7 +5,15 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { ButtonModule, CardModule, IconModule, InputModule, LoadingModule, SearchInputModule, DropdownModule } from '@libs/ui';
+import {
+  ButtonModule,
+  CardModule,
+  IconModule,
+  InputModule,
+  LoadingModule,
+  SearchInputModule,
+  DropdownModule,
+} from '@libs/ui';
 
 import { SharedModule } from '../../shared/shared.module';
 import {
@@ -15,18 +23,17 @@ import {
   ShelfOrderTagComponent,
   ShelfPartialCollectionModalComponent,
 } from './components';
-
 import { ShelfRoutingModule } from './shelf-routing.module';
 import { ShelfOrderDetailsComponent } from './pages/shelf-order-details/shelf-order-details.component';
 import { OrderStatusPipe } from '../../pipes/order-status.pipe';
 import { OrderLoadingComponent } from './components/order-loading/order-loading.component';
-import { ShelfEditOrderComponent } from './pages/shelf-edit-order/shelf-edit-order.component';
-import { OrderItemEditComponent } from './components/order-item-edit/order-item-edit.component';
-import { OrderOverviewEditComponent } from './components/order-overview-edit/order-overview-edit.component';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
 import { ShelfSearchResultsModule } from './pages/shelf-search-results/shelf-search-results.module';
 import { ShelfSearchModule } from './pages/shelf-search';
 import { ShelfHistoryModule } from './pages/shelf-history';
+import { ShelfEditOrderModule } from './pages/shelf-edit-order/shelf-edit-order.module';
+import { ShelfEditCompartmentModule } from './pages/shelf-edit-compartment';
 
 @NgModule({
   declarations: [
@@ -38,9 +45,6 @@ import { ShelfHistoryModule } from './pages/shelf-history';
     ShelfPartialCollectionModalComponent,
     OrderStatusPipe,
     OrderLoadingComponent,
-    ShelfEditOrderComponent,
-    OrderItemEditComponent,
-    OrderOverviewEditComponent,
   ],
   exports: [ShelfOrderTagComponent],
   imports: [
@@ -48,6 +52,8 @@ import { ShelfHistoryModule } from './pages/shelf-history';
     ShelfRoutingModule,
     ShelfSearchModule,
     ShelfHistoryModule,
+    ShelfEditOrderModule,
+    ShelfEditCompartmentModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,

apps/sales/src/scss/modules/_forms.scss

@@ -49,3 +49,40 @@
     }
   }
 }
+
+.isa-form-header {
+  font-family: $font-family;
+  font-size: $headline-font-size-m;
+  font-weight: $font-weight-bold;
+  line-height: 28px;
+
+  border-radius: 5px 5px 0 0;
+
+  margin-bottom: 20px;
+
+  .sticky {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.isa-form-field {
+  font-family: $font-family;
+  display: flex;
+  margin: 20px 0;
+
+  label {
+    font-size: $font-size;
+    margin-right: 20px;
+  }
+
+  input {
+    font-weight: $font-weight-bold;
+    border: none;
+  }
+
+  .status {
+    margin-left: auto;
+    color: $isa-customer;
+  }
+}