Merge pull request #130 from undernightcore/feature/MOCKOS-129

feat: created new sorting/moving functionality

src/app/pages/projects/pages/routes/components/folder-list-item/folder-list-item.component.html

@@ -1,7 +1,39 @@
-<div class="folder-list-item" cdkDragPreviewClass="height-fit" cdkDrag>
+<div
+  (cdkDragStarted)="draggingStart.emit()"
+  (cdkDragEnded)="draggingEnd.emit()"
+  [class.is-dragging]="sortingMode && dragZone"
+  class="folder-list-item"
+  cdkDragPreviewClass="height-fit"
+  cdkDrag
+>
+  <div
+    *ngIf="sortingMode && dragZone === 'up'"
+    class="folder-list-item__divider"
+  ></div>
   <div class="folder-list-item__content">
     <mat-icon>folder_open</mat-icon>
     <h4>{{ folder.name }}</h4>
   </div>
+  <div class="folder-list-item__drop">
+    <div
+      (mouseenter)="draggingInEdge('up')"
+      (mouseleave)="draggingInEdge(undefined)"
+      class="folder-list-item__drop__zone"
+    ></div>
+    <div
+      (mouseenter)="draggingInside(true)"
+      (mouseleave)="draggingInside(false)"
+      class="folder-list-item__drop__zone"
+    ></div>
+    <div
+      (mouseenter)="draggingInEdge('down')"
+      (mouseleave)="draggingInEdge(undefined)"
+      class="folder-list-item__drop__zone"
+    ></div>
+  </div>
+  <div
+    *ngIf="sortingMode && dragZone === 'down'"
+    class="folder-list-item__divider"
+  ></div>
   <div class="folder-list-item__placeholder" *cdkDragPlaceholder></div>
 </div>

src/app/pages/projects/pages/routes/components/folder-list-item/folder-list-item.component.scss

@@ -1,6 +1,5 @@
 .folder-list-item {
   position: relative;
-  padding: 16px;
   border-bottom: 1px solid var(--disabled-color);
   background-color: white;
   cursor: pointer;
@@ -9,21 +8,48 @@
     background-color: var(--soft-gray);
   }
 
+  &__divider {
+    height: 2px;
+    background-color: var(--main-color);
+  }
+
   &__content {
     display: flex;
+    align-items: center;
     gap: 12px;
+    padding: 16px;
+    height: 40px;
 
     & > h4 {
       margin-bottom: 0;
     }
   }
 
   &__placeholder {
-    height: 57px;
+    height: 74px;
     background-color: lightgray;
   }
+
+  &__drop {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    top: 0;
+
+    &__zone {
+      height: 100%;
+    }
+  }
 }
 
 .height-fit {
   height: fit-content !important;
 }
+
+.is-dragging {
+  &:hover {
+    background-color: white !important;
+  }
+}

src/app/pages/projects/pages/routes/components/folder-list-item/folder-list-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FolderInterface } from '../../../../../../interfaces/route.interface';
 
 @Component({
@@ -7,10 +7,24 @@ import { FolderInterface } from '../../../../../../interfaces/route.interface';
   styleUrls: ['./folder-list-item.component.scss'],
 })
 export class FolderListItemComponent {
-  @Input() sortable = true;
   @Input() folder!: FolderInterface;
+  @Input() sortingMode = false;
 
-  log(an: any) {
-    console.log(an);
+  @Output() draggingStart = new EventEmitter();
+  @Output() draggingEnd = new EventEmitter();
+  @Output() dragging = new EventEmitter<'up' | 'down' | undefined>();
+  @Output() dropping = new EventEmitter<boolean>();
+
+  dragZone?: 'up' | 'down';
+
+  draggingInEdge(position?: 'up' | 'down') {
+    this.dragZone = position;
+    if (!this.sortingMode) return;
+    this.dragging.emit(position);
+  }
+
+  draggingInside(enter: boolean) {
+    if (!this.sortingMode) return;
+    this.dropping.emit(enter);
   }
 }

src/app/pages/projects/pages/routes/components/route-list-item/route-list-item.component.html

@@ -1,14 +1,39 @@
-<div class="route-list-item" [class.is-selected]="isSelected" cdkDragPreviewClass="height-fit" cdkDrag>
-  <button (click)="goBack($event)" *ngIf="showBackButton" mat-button>
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <div>
+<div
+  [class.is-selected]="isSelected"
+  [class.is-dragging]="sortingMode && dragZone"
+  (cdkDragStarted)="draggingStart.emit()"
+  (cdkDragEnded)="draggingEnd.emit()"
+  cdkDragPreviewClass="height-fit"
+  cdkDrag
+  class="route-list-item"
+>
+  <div *ngIf="sortingMode && dragZone === 'up'" class="route-list-item__divider"></div>
+  <div class="route-list-item__content">
     <div>
-      <h4>{{ route.name }}</h4>
-      <div [style.background-color]="route.enabled ? 'green' : 'var(--disabled-color)'"></div>
+      <div>
+        <h4>{{ route.name }}</h4>
+        <div
+          [style.background-color]="
+          route.enabled ? 'green' : 'var(--disabled-color)'
+        "
+        ></div>
+      </div>
+      <p>{{ route.endpoint }}</p>
+      <app-http-chip [method]="route.method"></app-http-chip>
     </div>
-    <p>{{ route.endpoint }}</p>
-    <app-http-chip [method]="route.method"></app-http-chip>
   </div>
+  <div class="route-list-item__drop">
+    <div
+      (mouseenter)="draggingInEdge('up')"
+      (mouseleave)="draggingInEdge(undefined)"
+      class="route-list-item__drop__zone"
+    ></div>
+    <div
+      (mouseenter)="draggingInEdge('down')"
+      (mouseleave)="draggingInEdge(undefined)"
+      class="route-list-item__drop__zone"
+    ></div>
+  </div>
+  <div *ngIf="sortingMode && dragZone === 'down'" class="route-list-item__divider"></div>
   <div class="route-list-item__placeholder" *cdkDragPlaceholder></div>
 </div>

src/app/pages/projects/pages/routes/components/route-list-item/route-list-item.component.scss

@@ -1,67 +1,89 @@
 .route-list-item {
   position: relative;
-  padding: 16px;
-  border-bottom: 1px solid var(--disabled-color);
   background-color: white;
   cursor: pointer;
-  display: flex;
-  gap: 12px;
-  align-items: center;
 
   &:hover {
     background-color: var(--soft-gray);
   }
 
-  & > button {
-    height: fit-content;
-    width: fit-content;
-    background-color: var(--alt-color);
+  &__divider {
+    height: 2px;
+    background-color: var(--main-color);
   }
 
-  & > div {
-    width: 100%;
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px;
+    border-bottom: 1px solid var(--disabled-color);
+
+    & > button {
+      height: fit-content;
+      width: fit-content;
+      background-color: var(--alt-color);
+    }
 
     & > div {
-      display: flex;
-      align-items: center;
-      gap: 12px;
+      width: 100%;
 
       & > div {
-        height: 8px;
-        width: 8px;
-        border-radius: 25px;
-        background-color: red;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        & > div {
+          height: 8px;
+          width: 8px;
+          border-radius: 25px;
+          background-color: red;
+        }
       }
-    }
 
-    & > p {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      padding-right: 52px;
+      & > p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        padding-right: 52px;
+      }
     }
-  }
 
 
-  app-http-chip {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-  }
+    app-http-chip {
+      position: absolute;
+      top: 16px;
+      right: 16px;
+    }
 
-  & > mat-icon {
-    position: absolute;
-    right: 16px;
-    bottom: 16px;
-  }
+    & > mat-icon {
+      position: absolute;
+      right: 16px;
+      bottom: 16px;
+    }
 
-  h4, p {
-    margin-bottom: 0;
+    h4, p {
+      margin-bottom: 0;
+    }
   }
 
   &__placeholder {
     height: 77px;
     background-color: lightgray;
   }
+
+  &__drop {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+
+    & > div {
+      height: 100%;
+    }
+  }
 }
 
 .height-fit {
@@ -71,3 +93,9 @@
 .is-selected {
   border-left: 5px solid var(--main-color) !important;
 }
+
+.is-dragging {
+  &:hover {
+    background-color: white !important;
+  }
+}

src/app/pages/projects/pages/routes/components/route-list-item/route-list-item.component.ts

@@ -9,12 +9,19 @@ import { RouteInterface } from '../../../../../../interfaces/route.interface';
 export class RouteListItemComponent {
   @Input() route!: RouteInterface;
   @Input() isSelected = false;
+  @Input() sortingMode = false;
   @Input() showBackButton = false;
 
-  @Output() back = new EventEmitter();
+  dragZone?: 'up' | 'down';
 
-  goBack(event: MouseEvent) {
-    event.stopPropagation();
-    this.back.emit();
+  @Output() draggingStart = new EventEmitter();
+  @Output() draggingEnd = new EventEmitter();
+
+  @Output() dragging = new EventEmitter<'up' | 'down' | undefined>();
+
+  draggingInEdge(position?: 'up' | 'down') {
+    this.dragZone = position;
+    if (!this.sortingMode) return;
+    this.dragging.emit(position)
   }
 }