editCommercialProps, confirmationService, MessageService, Drag & Drop
This commit is contained in:
parent
e0dbebb61c
commit
7f67b81242
|
|
@ -137,7 +137,7 @@ function getFilenames(id: string): string[] {
|
|||
let filePath = `./pictures_base/property/${id}`;
|
||||
return readdirSync(filePath);
|
||||
} catch (e) {
|
||||
return null;
|
||||
return [];
|
||||
}
|
||||
}
|
||||
function getRandomDateWithinLastYear(): Date {
|
||||
|
|
|
|||
|
|
@ -30,11 +30,9 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^6.5.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.5.2",
|
||||
"@ng-select/ng-select": "^13.4.1",
|
||||
"@types/cropperjs": "^1.3.0",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"angular-cropperjs": "^14.0.1",
|
||||
"angular-mixed-cdk-drag-drop": "^2.2.3",
|
||||
"browser-bunyan": "^1.8.0",
|
||||
"cropperjs": "^1.6.2",
|
||||
"dayjs": "^1.11.11",
|
||||
"express": "^4.18.2",
|
||||
"flowbite": "^2.4.1",
|
||||
|
|
@ -43,6 +41,7 @@
|
|||
"keycloak-js": "^25.0.1",
|
||||
"memoize-one": "^6.0.0",
|
||||
"ngx-currency": "^18.0.0",
|
||||
"ngx-image-cropper": "^8.0.0",
|
||||
"ngx-quill": "^26.0.5",
|
||||
"on-change": "^5.0.1",
|
||||
"rxjs": "~7.8.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
import { AsyncPipe, NgIf } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
import { ConfirmationService } from './confirmation.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-confirmation',
|
||||
standalone: true,
|
||||
imports: [AsyncPipe, NgIf],
|
||||
template: `
|
||||
<div *ngIf="confirmationService.modalVisible$ | async" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
|
||||
<div class="relative p-4 w-full max-w-md max-h-full">
|
||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||
<button
|
||||
(click)="confirmationService.reject()"
|
||||
type="button"
|
||||
class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white"
|
||||
>
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
||||
</svg>
|
||||
<span class="sr-only">Close modal</span>
|
||||
</button>
|
||||
<div class="p-4 md:p-5 text-center">
|
||||
<svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||||
</svg>
|
||||
<h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ confirmationService.message$ | async }}</h3>
|
||||
<button
|
||||
(click)="confirmationService.accept()"
|
||||
type="button"
|
||||
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2"
|
||||
>
|
||||
Yes, I'm sure
|
||||
</button>
|
||||
<button
|
||||
(click)="confirmationService.reject()"
|
||||
type="button"
|
||||
class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
|
||||
>
|
||||
No, cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class ConfirmationComponent {
|
||||
constructor(public confirmationService: ConfirmationService) {}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class ConfirmationService {
|
||||
private modalVisibleSubject = new BehaviorSubject<boolean>(false);
|
||||
private messageSubject = new BehaviorSubject<string>('');
|
||||
private resolvePromise!: (value: boolean) => void;
|
||||
|
||||
modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
|
||||
message$: Observable<string> = this.messageSubject.asObservable();
|
||||
|
||||
showConfirmation(message: string): Promise<boolean> {
|
||||
this.messageSubject.next(message);
|
||||
this.modalVisibleSubject.next(true);
|
||||
return new Promise<boolean>(resolve => {
|
||||
this.resolvePromise = resolve;
|
||||
});
|
||||
}
|
||||
|
||||
accept(): void {
|
||||
this.modalVisibleSubject.next(false);
|
||||
this.resolvePromise(true);
|
||||
}
|
||||
|
||||
reject(): void {
|
||||
this.modalVisibleSubject.next(false);
|
||||
this.resolvePromise(false);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<div #_container class="container">
|
||||
<!-- <div
|
||||
*ngFor="let item of items"
|
||||
cdkDrag
|
||||
(cdkDragEnded)="dragEnded($event)"
|
||||
(cdkDragStarted)="dragStarted()"
|
||||
(cdkDragMoved)="dragMoved($event)"
|
||||
class="item"
|
||||
[class.animation]="isAnimationActive"
|
||||
[class.large]="item === 3"
|
||||
>
|
||||
Drag Item {{ item }}
|
||||
</div> -->
|
||||
<div *ngFor="let item of items" cdkDrag (cdkDragEnded)="dragEnded($event)" (cdkDragStarted)="dragStarted()" (cdkDragMoved)="dragMoved($event)" [class.animation]="isAnimationActive" class="grid-item item">
|
||||
<div class="image-box hover:cursor-pointer">
|
||||
<img [src]="getImageUrl(item)" class="w-full h-full object-cover rounded-lg shadow-md" />
|
||||
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md" (click)="imageToDelete.emit(item)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
// max-width: 200px;
|
||||
max-height: 150px;
|
||||
// background-color: blanchedalmond;
|
||||
}
|
||||
|
||||
.animation.cdk-drag:not(.cdk-drag-dragging) {
|
||||
transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.large {
|
||||
width: 150px;
|
||||
}
|
||||
// --------------------
|
||||
.image-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.grid-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.grid-item:active {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
|
@ -0,0 +1,476 @@
|
|||
import { CdkDrag, CdkDragEnd, CdkDragMove, DragDropModule, DragRef, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { _getShadowRoot } from '@angular/cdk/platform';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component, ElementRef, input, output, QueryList, ViewChild, ViewChildren } from '@angular/core';
|
||||
import { CommercialPropertyListing } from '../../../../../bizmatch-server/src/models/db.model';
|
||||
import { environment } from '../../../environments/environment';
|
||||
@Component({
|
||||
selector: 'app-drag-drop-mixed',
|
||||
standalone: true,
|
||||
imports: [CommonModule, DragDropModule],
|
||||
templateUrl: './drag-drop-mixed.component.html',
|
||||
styleUrl: './drag-drop-mixed.component.scss',
|
||||
})
|
||||
export class DragDropMixedComponent {
|
||||
@ViewChild('_container') _container!: ElementRef<HTMLDivElement>;
|
||||
@ViewChildren(CdkDrag) _drags!: QueryList<CdkDrag>;
|
||||
|
||||
listing = input<CommercialPropertyListing>();
|
||||
imageOrderChanged = output<string[]>();
|
||||
imageToDelete = output<string>();
|
||||
env = environment;
|
||||
ts = new Date().getTime();
|
||||
items: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
private _cachedItems: string[] = []; //[1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
|
||||
private _itemPositions: CachedItemPosition<DragRef>[] = [];
|
||||
private _rootNode: DocumentOrShadowRoot | undefined;
|
||||
private _activeItems: DragRef[] = [];
|
||||
private _previousSwap = {
|
||||
drag: null as DragRef | null,
|
||||
deltaX: 0,
|
||||
deltaY: 0,
|
||||
overlaps: false,
|
||||
};
|
||||
private _containerStyle: CSSStyleDeclaration | null = null;
|
||||
public isAnimationActive = false;
|
||||
|
||||
ngOnChanges() {
|
||||
this.items = this.listing()?.imageOrder;
|
||||
this._cachedItems = this.items.slice();
|
||||
}
|
||||
|
||||
getImageUrl(image: string): string {
|
||||
return `${this.env.imageBaseUrl}/pictures/property/${this.listing().imagePath}/${this.listing().serialId}/${image}?_ts=${this.ts}`;
|
||||
}
|
||||
|
||||
dragStarted() {
|
||||
this.start();
|
||||
}
|
||||
|
||||
dragMoved(event: CdkDragMove) {
|
||||
const item = event.source._dragRef;
|
||||
this.sort(item, event.pointerPosition.x, event.pointerPosition.y, event.delta);
|
||||
}
|
||||
|
||||
dragEnded(event: CdkDragEnd) {
|
||||
this.imageOrderChanged.emit(this._cachedItems);
|
||||
this.reset();
|
||||
}
|
||||
|
||||
start() {
|
||||
const dragRefs: DragRef[] = [];
|
||||
|
||||
this._drags.forEach(drag => {
|
||||
dragRefs.push(drag._dragRef);
|
||||
});
|
||||
|
||||
this._activeItems = dragRefs;
|
||||
this._cacheItemPosition();
|
||||
this.isAnimationActive = true;
|
||||
}
|
||||
|
||||
sort(item: DragRef, pointerX: number, pointerY: number, pointerDelta: { x: number; y: number }) {
|
||||
const siblings = this._itemPositions.slice();
|
||||
const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
|
||||
|
||||
const previousSwap = this._previousSwap;
|
||||
|
||||
if (newIndex === -1 || this._activeItems[newIndex] === item) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toSwapWith = this._activeItems[newIndex];
|
||||
|
||||
if (previousSwap.drag === toSwapWith && previousSwap.overlaps && previousSwap.deltaX === pointerDelta.x && previousSwap.deltaY === pointerDelta.y) {
|
||||
return;
|
||||
}
|
||||
|
||||
const previousIndex = this.getItemIndex(item);
|
||||
const siblingAtNewPosition = siblings[newIndex];
|
||||
const previousPosition = siblings[previousIndex].clientRect;
|
||||
const newPosition = siblingAtNewPosition.clientRect;
|
||||
|
||||
const delta = this.getDelta(newPosition.top, previousPosition.top, pointerDelta);
|
||||
|
||||
if (delta === 0) return;
|
||||
if (delta === 1 && previousIndex > newIndex) return;
|
||||
if (delta === -1 && previousIndex < newIndex) return;
|
||||
|
||||
const startIndex = Math.min(previousIndex, newIndex);
|
||||
const endIndex = Math.max(previousIndex, newIndex);
|
||||
|
||||
let itemPositions = this._itemPositions.slice();
|
||||
|
||||
if (delta === 1) {
|
||||
for (let i = startIndex; i < endIndex; i++) {
|
||||
itemPositions = this._updateItemPosition(i, itemPositions, delta);
|
||||
|
||||
const newIndex = i + 1;
|
||||
moveItemInArray(itemPositions, i, newIndex);
|
||||
}
|
||||
} else if (delta === -1) {
|
||||
for (let i = endIndex; i > startIndex; i--) {
|
||||
itemPositions = this._updateItemPosition(i, itemPositions, delta);
|
||||
|
||||
const newIndex = i - 1;
|
||||
moveItemInArray(itemPositions, i, newIndex);
|
||||
}
|
||||
}
|
||||
|
||||
const threshold = getMutableClientRect(this._container.nativeElement).right;
|
||||
|
||||
let currentTop = itemPositions[0].clientRect.top;
|
||||
|
||||
for (let i = 0; i < itemPositions.length; i++) {
|
||||
const itemPosition = itemPositions[i];
|
||||
if (Math.round(itemPosition.clientRect.right) > Math.round(threshold)) {
|
||||
const nextPosition = itemPositions[i + 1];
|
||||
if (nextPosition) {
|
||||
currentTop = nextPosition.clientRect.top;
|
||||
}
|
||||
itemPositions = this._updateItemPositionToDown(itemPositions, i);
|
||||
} else if (itemPosition.clientRect.top !== currentTop) {
|
||||
currentTop = itemPosition.clientRect.top;
|
||||
itemPositions = this._updateItemPositionToUp(itemPositions, i);
|
||||
}
|
||||
}
|
||||
|
||||
const oldOrder = this._itemPositions.slice();
|
||||
this._itemPositions = itemPositions;
|
||||
moveItemInArray(this._activeItems, previousIndex, newIndex);
|
||||
moveItemInArray(this._cachedItems, previousIndex, newIndex);
|
||||
|
||||
itemPositions.forEach((sibling, index) => {
|
||||
if (oldOrder[index] === sibling) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isDraggedItem = sibling.drag === item;
|
||||
if (isDraggedItem) return;
|
||||
const elementToOffset = sibling.drag.getRootElement();
|
||||
|
||||
elementToOffset.style.transform = `translate3d(${Math.round(sibling.transform.x)}px, ${Math.round(sibling.transform.y)}px, 0)`;
|
||||
});
|
||||
|
||||
previousSwap.deltaX = pointerDelta.x;
|
||||
previousSwap.deltaY = pointerDelta.y;
|
||||
previousSwap.drag = toSwapWith;
|
||||
previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
|
||||
}
|
||||
|
||||
reset() {
|
||||
// ignore animation
|
||||
this.isAnimationActive = false;
|
||||
const previousSwap = this._previousSwap;
|
||||
this.items = this._cachedItems.slice();
|
||||
this._activeItems.forEach(item => {
|
||||
item.reset();
|
||||
});
|
||||
this._itemPositions = [];
|
||||
this._activeItems = [];
|
||||
previousSwap.drag = null;
|
||||
previousSwap.deltaX = previousSwap.deltaY = 0;
|
||||
previousSwap.overlaps = false;
|
||||
}
|
||||
|
||||
getItemIndex(item: DragRef): number {
|
||||
return this._activeItems.indexOf(item);
|
||||
}
|
||||
|
||||
getDelta(newTop: number, previousTop: number, pointerDelta: { x: number; y: number }) {
|
||||
if (newTop === previousTop) {
|
||||
return pointerDelta.x;
|
||||
}
|
||||
|
||||
return newTop > previousTop ? 1 : -1;
|
||||
}
|
||||
|
||||
private _getRootNode(): DocumentOrShadowRoot {
|
||||
if (!this._rootNode) {
|
||||
this._rootNode = _getShadowRoot(this._container.nativeElement) || document;
|
||||
}
|
||||
return this._rootNode;
|
||||
}
|
||||
|
||||
private _cacheItemPosition() {
|
||||
this._itemPositions = this._activeItems.map(drag => {
|
||||
const elementToMeasure = drag.getRootElement();
|
||||
return {
|
||||
drag,
|
||||
clientRect: getMutableClientRect(elementToMeasure),
|
||||
transform: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
this._containerStyle = getComputedStyle(this._container.nativeElement);
|
||||
}
|
||||
|
||||
private _updateItemPosition(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number) {
|
||||
let siblingsUpdated = siblings.slice();
|
||||
const offsetVertical = this._getOffset(currentIndex, siblingsUpdated, delta, false);
|
||||
const offsetHorizontal = this._getOffset(currentIndex, siblingsUpdated, delta, true);
|
||||
|
||||
const immediateIndex = currentIndex + delta * 1;
|
||||
const currentItem = siblingsUpdated[currentIndex];
|
||||
const immediateSibling = siblingsUpdated[immediateIndex];
|
||||
|
||||
const currentItemUpdated: CachedItemPosition<DragRef> = {
|
||||
...currentItem,
|
||||
clientRect: {
|
||||
...currentItem.clientRect,
|
||||
x: currentItem.clientRect.x + offsetHorizontal.itemOffset,
|
||||
left: currentItem.clientRect.left + offsetHorizontal.itemOffset,
|
||||
right: currentItem.clientRect.right + offsetHorizontal.itemOffset,
|
||||
y: currentItem.clientRect.y + offsetVertical.itemOffset,
|
||||
top: currentItem.clientRect.top + offsetVertical.itemOffset,
|
||||
bottom: currentItem.clientRect.bottom + offsetVertical.itemOffset,
|
||||
},
|
||||
transform: {
|
||||
x: currentItem.transform.x + offsetHorizontal.itemOffset,
|
||||
y: currentItem.transform.y + offsetVertical.itemOffset,
|
||||
},
|
||||
};
|
||||
|
||||
const immediateSiblingUpdated: CachedItemPosition<DragRef> = {
|
||||
...immediateSibling,
|
||||
clientRect: {
|
||||
...immediateSibling.clientRect,
|
||||
x: immediateSibling.clientRect.x + offsetHorizontal.siblingOffset,
|
||||
left: immediateSibling.clientRect.left + offsetHorizontal.siblingOffset,
|
||||
right: immediateSibling.clientRect.right + offsetHorizontal.siblingOffset,
|
||||
y: immediateSibling.clientRect.y + offsetVertical.siblingOffset,
|
||||
top: immediateSibling.clientRect.top + offsetVertical.siblingOffset,
|
||||
bottom: immediateSibling.clientRect.bottom + offsetVertical.siblingOffset,
|
||||
},
|
||||
transform: {
|
||||
x: immediateSibling.transform.x + offsetHorizontal.siblingOffset,
|
||||
y: immediateSibling.transform.y + offsetVertical.siblingOffset,
|
||||
},
|
||||
};
|
||||
|
||||
if (offsetVertical.itemOffset !== offsetVertical.siblingOffset) {
|
||||
const offset = (currentItemUpdated.clientRect.right - immediateSibling.clientRect.right) * delta;
|
||||
const top = delta === 1 ? immediateSibling.clientRect.top : currentItem.clientRect.top;
|
||||
|
||||
const ignoreItem = delta === 1 ? immediateSibling.drag : currentItem.drag;
|
||||
|
||||
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, top, offset, ignoreItem);
|
||||
}
|
||||
siblingsUpdated[currentIndex] = currentItemUpdated;
|
||||
siblingsUpdated[immediateIndex] = immediateSiblingUpdated;
|
||||
|
||||
return siblingsUpdated;
|
||||
}
|
||||
|
||||
private _updateItemPositionToUp(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
|
||||
let siblingsUpdated = siblings.slice();
|
||||
const immediateSibling = siblingsUpdated[currentIndex - 1];
|
||||
const currentItem = siblingsUpdated[currentIndex];
|
||||
|
||||
const nextEmptySlotLeft = immediateSibling.clientRect.right + this.getContainerGapPixel();
|
||||
|
||||
const threshold = getMutableClientRect(this._container.nativeElement).right;
|
||||
if (nextEmptySlotLeft + currentItem.clientRect.right - currentItem.clientRect.left <= threshold) {
|
||||
const offsetLeft = nextEmptySlotLeft - currentItem.clientRect.left;
|
||||
const offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
|
||||
|
||||
const nextSibling = siblingsUpdated[currentIndex + 1];
|
||||
if (nextSibling) {
|
||||
const offset = currentItem.clientRect.left - nextSibling.clientRect.left;
|
||||
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, currentItem.clientRect.top, offset, currentItem.drag);
|
||||
}
|
||||
|
||||
siblingsUpdated[currentIndex] = {
|
||||
...currentItem,
|
||||
clientRect: {
|
||||
...currentItem.clientRect,
|
||||
x: nextEmptySlotLeft,
|
||||
left: nextEmptySlotLeft,
|
||||
right: currentItem.clientRect.right - currentItem.clientRect.left + nextEmptySlotLeft,
|
||||
y: immediateSibling.clientRect.y,
|
||||
top: immediateSibling.clientRect.top,
|
||||
bottom: currentItem.clientRect.bottom - currentItem.clientRect.top + immediateSibling.clientRect.top,
|
||||
},
|
||||
transform: {
|
||||
x: currentItem.transform.x + offsetLeft,
|
||||
y: currentItem.transform.y + offsetTop,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return siblingsUpdated;
|
||||
}
|
||||
|
||||
private _updateItemPositionToDown(siblings: CachedItemPosition<DragRef>[], currentIndex: number) {
|
||||
let siblingsUpdated = siblings.slice();
|
||||
const currentItem = siblingsUpdated[currentIndex];
|
||||
const immediateSibling = siblingsUpdated[currentIndex + 1];
|
||||
let offsetLeft = 0;
|
||||
let offsetTop = 0;
|
||||
|
||||
if (immediateSibling) {
|
||||
offsetLeft = immediateSibling.clientRect.left - currentItem.clientRect.left;
|
||||
offsetTop = immediateSibling.clientRect.top - currentItem.clientRect.top;
|
||||
} else {
|
||||
const firstSibling = siblings.find(item => item.clientRect.top === currentItem.clientRect.top);
|
||||
|
||||
if (firstSibling) {
|
||||
offsetLeft = firstSibling.clientRect.left - currentItem.clientRect.left;
|
||||
}
|
||||
|
||||
offsetTop = currentItem.clientRect.bottom - currentItem.clientRect.top + this.getContainerGapPixel();
|
||||
}
|
||||
|
||||
const currentItemUpdated: CachedItemPosition<DragRef> = {
|
||||
...currentItem,
|
||||
clientRect: {
|
||||
...currentItem.clientRect,
|
||||
x: currentItem.clientRect.x + offsetLeft,
|
||||
left: currentItem.clientRect.left + offsetLeft,
|
||||
right: currentItem.clientRect.right + offsetLeft,
|
||||
y: currentItem.clientRect.y + offsetTop,
|
||||
top: currentItem.clientRect.top + offsetTop,
|
||||
bottom: currentItem.clientRect.bottom + offsetTop,
|
||||
},
|
||||
transform: {
|
||||
x: currentItem.transform.x + offsetLeft,
|
||||
y: currentItem.transform.y + offsetTop,
|
||||
},
|
||||
};
|
||||
|
||||
if (immediateSibling) {
|
||||
const offset = currentItemUpdated.clientRect.right - immediateSibling.clientRect.left + this.getContainerGapPixel();
|
||||
|
||||
siblingsUpdated = this._updateItemPositionHorizontalOnRow(siblingsUpdated, immediateSibling.clientRect.top, offset);
|
||||
}
|
||||
|
||||
siblingsUpdated[currentIndex] = currentItemUpdated;
|
||||
return siblingsUpdated;
|
||||
}
|
||||
|
||||
private _updateItemPositionHorizontalOnRow(siblings: CachedItemPosition<DragRef>[], top: number, offset: number, ignoreItem?: DragRef) {
|
||||
const siblingsUpdated = siblings.slice();
|
||||
|
||||
siblingsUpdated
|
||||
.filter(item => (!ignoreItem || item.drag !== ignoreItem) && item.clientRect.top === top)
|
||||
.forEach(currentItem => {
|
||||
const index = siblingsUpdated.findIndex(item => item.drag === currentItem.drag);
|
||||
|
||||
siblingsUpdated[index] = {
|
||||
...siblingsUpdated[index],
|
||||
clientRect: {
|
||||
...siblingsUpdated[index].clientRect,
|
||||
x: siblingsUpdated[index].clientRect.x + offset,
|
||||
left: siblingsUpdated[index].clientRect.left + offset,
|
||||
right: siblingsUpdated[index].clientRect.right + offset,
|
||||
},
|
||||
transform: {
|
||||
...siblingsUpdated[index].transform,
|
||||
x: siblingsUpdated[index].transform.x + offset,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return siblingsUpdated;
|
||||
}
|
||||
|
||||
private _getItemIndexFromPointerPosition(item: DragRef, pointerX: number, pointerY: number) {
|
||||
const elementAtPoints = this._getRootNode().elementsFromPoint(Math.floor(pointerX), Math.floor(pointerY));
|
||||
|
||||
const elementAtPoint = elementAtPoints.find(element => {
|
||||
// ignore element is transiting
|
||||
const animations = element.getAnimations();
|
||||
const isTransitionRunning = animations.length > 0;
|
||||
|
||||
return !isTransitionRunning && this._itemPositions.some(item => item.drag.getRootElement() === element) && element !== item.getRootElement();
|
||||
});
|
||||
|
||||
const index = elementAtPoint
|
||||
? this._itemPositions.findIndex(({ drag }) => {
|
||||
// Skip the item itself.
|
||||
if (drag === item) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const root = drag.getRootElement();
|
||||
return elementAtPoint === root || root.contains(elementAtPoint);
|
||||
})
|
||||
: -1;
|
||||
return index;
|
||||
}
|
||||
|
||||
private _getOffset(currentIndex: number, siblings: CachedItemPosition<DragRef>[], delta: number, isHorizontal: boolean) {
|
||||
const currentPosition = siblings[currentIndex].clientRect;
|
||||
const immediateSibling = siblings[currentIndex + delta].clientRect;
|
||||
|
||||
let itemOffset = 0;
|
||||
let siblingOffset = 0;
|
||||
|
||||
if (immediateSibling) {
|
||||
const start = isHorizontal ? 'left' : 'top';
|
||||
const end = isHorizontal ? 'right' : 'bottom';
|
||||
|
||||
if (delta === 1) {
|
||||
itemOffset = immediateSibling[end] - currentPosition[end];
|
||||
siblingOffset = currentPosition[start] - immediateSibling[start];
|
||||
|
||||
if (isHorizontal && immediateSibling[end] < currentPosition[end]) {
|
||||
itemOffset = immediateSibling[start] - currentPosition[start];
|
||||
}
|
||||
} else {
|
||||
itemOffset = immediateSibling[start] - currentPosition[start];
|
||||
siblingOffset = currentPosition[end] - immediateSibling[end];
|
||||
|
||||
if (isHorizontal && immediateSibling[end] > currentPosition[end]) {
|
||||
siblingOffset = currentPosition[start] - immediateSibling[start];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
itemOffset,
|
||||
siblingOffset,
|
||||
};
|
||||
}
|
||||
|
||||
private getContainerGapPixel() {
|
||||
if (this._containerStyle && (this._containerStyle.display === 'flex' || this._containerStyle.display === 'grid')) {
|
||||
return this._containerStyle.gap ? +this._containerStyle.gap.split('px')[0] : 0;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
const getMutableClientRect = (element: Element): DOMRect => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
top: rect.top,
|
||||
right: rect.right,
|
||||
bottom: rect.bottom,
|
||||
left: rect.left,
|
||||
width: rect.width,
|
||||
height: rect.height,
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
} as DOMRect;
|
||||
};
|
||||
|
||||
const isInsideClientRect = (clientRect: DOMRect, x: number, y: number) => {
|
||||
const { top, bottom, left, right } = clientRect;
|
||||
return y >= top && y <= bottom && x >= left && x <= right;
|
||||
};
|
||||
|
||||
interface CachedItemPosition<T> {
|
||||
drag: T;
|
||||
clientRect: DOMRect;
|
||||
transform: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
import { AsyncPipe, NgIf } from '@angular/common';
|
||||
import { MessageService } from './message.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-message',
|
||||
standalone: true,
|
||||
imports: [AsyncPipe, NgIf],
|
||||
template: `
|
||||
<div id="toast-success" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
|
||||
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
|
||||
</svg>
|
||||
<span class="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div class="ms-3 text-sm font-normal">Item moved successfully.</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
data-dismiss-target="#toast-success"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`,
|
||||
})
|
||||
export class MessageComponent {
|
||||
constructor(public messageService: MessageService) {}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { BehaviorSubject, Observable } from 'rxjs';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
export class MessageService {
|
||||
private modalVisibleSubject = new BehaviorSubject<boolean>(false);
|
||||
private messageSubject = new BehaviorSubject<string>('');
|
||||
private resolvePromise!: (value: boolean) => void;
|
||||
|
||||
modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
|
||||
message$: Observable<string> = this.messageSubject.asObservable();
|
||||
|
||||
showMessage(message: string): Promise<boolean> {
|
||||
this.messageSubject.next(message);
|
||||
this.modalVisibleSubject.next(true);
|
||||
return new Promise<boolean>(resolve => {
|
||||
this.resolvePromise = resolve;
|
||||
});
|
||||
}
|
||||
|
||||
accept(): void {
|
||||
this.modalVisibleSubject.next(false);
|
||||
this.resolvePromise(true);
|
||||
}
|
||||
|
||||
reject(): void {
|
||||
this.modalVisibleSubject.next(false);
|
||||
this.resolvePromise(false);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import { CdkDrag, CdkDragEnter, CdkDragSortEvent, CdkDropList, CdkDropListGroup, DropListOrientation, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, Self, SimpleChanges, SkipSelf } from '@angular/core';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
export const autoScrollStep = 6;
|
||||
@Directive({
|
||||
selector: '[cdkDropListGroup][mixedCdkDragDrop]', // eslint-disable-line
|
||||
})
|
||||
export class MixedCdkDragDropDirective<T = any> implements OnChanges, AfterViewInit, OnDestroy {
|
||||
/** @param {EventEmitter} dropped: emit previousIndex and currentIndex when dropList dropped. Valid when itemList is not being provided. **/
|
||||
@Output() readonly dropped = new EventEmitter<{ previousIndex: number; currentIndex: number }>();
|
||||
|
||||
@Input() itemList: T[] | undefined;
|
||||
@Input() orientation: DropListOrientation = 'horizontal';
|
||||
@Input() containerSelector = '';
|
||||
|
||||
private readonly _resizeDragItem = new Set<MixedCdkDragSizeHelperDirective>();
|
||||
|
||||
private targetIndex = -1;
|
||||
private sourceIndex = -1;
|
||||
private source: CdkDropList | undefined;
|
||||
private observer: ResizeObserver | undefined;
|
||||
private currentContentRect: DOMRectReadOnly | undefined;
|
||||
private animationFrame: number | undefined;
|
||||
|
||||
constructor(public element: ElementRef<HTMLElement>, @Self() private cdkDropListGroup: CdkDropListGroup<any>) {
|
||||
this.observer = new ResizeObserver((entries: Array<ResizeObserverEntry>) => {
|
||||
this.animationFrame = window.requestAnimationFrame(() => {
|
||||
if (entries.length) {
|
||||
const element = this.containerSelector ? entries[0] : entries.find((e: ResizeObserverEntry) => e.target === this.element.nativeElement);
|
||||
if (element) {
|
||||
this.currentContentRect = element.contentRect;
|
||||
for (let item of this._resizeDragItem) {
|
||||
item.onSizeChangeEmit(element.contentRect);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.observeAll();
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['orientation']) {
|
||||
this.cdkDropListGroup._items.forEach((i: CdkDropList) => {
|
||||
i.orientation = this.orientation;
|
||||
i.element.nativeElement.style.flexDirection = this.orientation === 'horizontal' ? 'row' : 'column';
|
||||
});
|
||||
}
|
||||
if (changes['containerSelector']) {
|
||||
this.observer?.disconnect();
|
||||
this.observeAll();
|
||||
}
|
||||
}
|
||||
|
||||
addResizeDragItem(item: MixedCdkDragSizeHelperDirective) {
|
||||
this._resizeDragItem.add(item);
|
||||
if (this.currentContentRect) {
|
||||
item.onSizeChangeEmit(this.currentContentRect);
|
||||
}
|
||||
}
|
||||
|
||||
deleteResizeDragItem(item: MixedCdkDragSizeHelperDirective) {
|
||||
this._resizeDragItem.delete(item);
|
||||
}
|
||||
|
||||
onDropListDropped() {
|
||||
if (this.sourceIndex < 0 || this.targetIndex < 0) {
|
||||
return;
|
||||
}
|
||||
// if sourceIndex is before targetIndex then the real target should minus one, to remove the source placeholder which being counted.
|
||||
const target = this.targetIndex + (this.sourceIndex < this.targetIndex ? -1 : 0);
|
||||
if (this.sourceIndex !== this.targetIndex && target >= 0) {
|
||||
if (this.itemList) {
|
||||
moveItemInArray(this.itemList, this.sourceIndex, target);
|
||||
} else {
|
||||
this.dropped.emit({
|
||||
previousIndex: this.sourceIndex,
|
||||
currentIndex: target,
|
||||
});
|
||||
}
|
||||
this.sourceIndex = -1;
|
||||
this.targetIndex = -1;
|
||||
}
|
||||
// reset
|
||||
this.source = undefined;
|
||||
}
|
||||
|
||||
onDropListEntered({ item, container, currentIndex }: CdkDragEnter | CdkDragSortEvent) {
|
||||
// dropList which the cdkDrag currently entered.
|
||||
const dropElement = container.element.nativeElement;
|
||||
// get all the dropList nodes in dropListGroup
|
||||
const dropListNodes = Array.from(dropElement.parentElement?.children ?? []);
|
||||
// dropList which the cdkDrag originally belonged.
|
||||
const sourceElement = item.dropContainer.element.nativeElement;
|
||||
|
||||
// might enter multiple dropList after drag start, should only keep the index from the first time
|
||||
if (!this.source || this.sourceIndex === -1) {
|
||||
this.sourceIndex = dropListNodes.indexOf(sourceElement);
|
||||
this.source = item.dropContainer;
|
||||
}
|
||||
// target index should consider the currentIndex, which indicate drop before/after dropIndex (index of dropList which currently entered).
|
||||
this.targetIndex = dropListNodes.indexOf(dropElement) + currentIndex;
|
||||
}
|
||||
|
||||
private observeAll() {
|
||||
if (this.containerSelector) {
|
||||
const el = document.querySelector(this.containerSelector);
|
||||
if (el) {
|
||||
this.observer?.observe(el);
|
||||
}
|
||||
} else {
|
||||
this.observer?.observe(this.element.nativeElement);
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.observer?.disconnect();
|
||||
this.observer = undefined;
|
||||
this.currentContentRect = undefined;
|
||||
this._resizeDragItem.clear();
|
||||
if (this.animationFrame) {
|
||||
window.cancelAnimationFrame(this.animationFrame);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDropList][mixedCdkDropList]', // eslint-disable-line
|
||||
})
|
||||
export class MixedCdkDropListDirective implements OnInit, OnDestroy {
|
||||
private lifecycleEmitter = new Subject<void>();
|
||||
|
||||
constructor(@Self() private cdkDropList: CdkDropList, @SkipSelf() private mixedDragDrop: MixedCdkDragDropDirective) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.cdkDropList.autoScrollStep = autoScrollStep;
|
||||
this.cdkDropList.orientation = this.mixedDragDrop.orientation;
|
||||
this.cdkDropList.element.nativeElement.style.flexDirection = this.mixedDragDrop.orientation === 'horizontal' ? 'row' : 'column';
|
||||
this.cdkDropList.element.nativeElement.style.display = 'flex';
|
||||
this.cdkDropList.element.nativeElement.style.flexWrap = 'nowrap';
|
||||
this.cdkDropList.element.nativeElement.style.width = 'fit-content';
|
||||
this.cdkDropList.element.nativeElement.style.height = 'fit-content';
|
||||
this.cdkDropList.sorted.pipe(takeUntil(this.lifecycleEmitter)).subscribe(event => this.mixedDragDrop.onDropListEntered(event));
|
||||
this.cdkDropList.entered.pipe(takeUntil(this.lifecycleEmitter)).subscribe(event => this.mixedDragDrop.onDropListEntered(event));
|
||||
this.cdkDropList.dropped.pipe(takeUntil(this.lifecycleEmitter)).subscribe(() => this.mixedDragDrop.onDropListDropped());
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.lifecycleEmitter.next();
|
||||
this.lifecycleEmitter.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '[cdkDrag][mixedCdkDragSizeHelper]', // eslint-disable-line
|
||||
})
|
||||
export class MixedCdkDragSizeHelperDirective implements AfterViewInit, OnDestroy {
|
||||
@Output() contentBoxSize = new EventEmitter<{
|
||||
drag: CdkDrag;
|
||||
containerSize: DOMRectReadOnly;
|
||||
}>();
|
||||
|
||||
constructor(@Self() private cdkDrag: CdkDrag, @SkipSelf() private mixedContainer: MixedCdkDragDropDirective) {}
|
||||
|
||||
ngAfterViewInit() {
|
||||
this.mixedContainer.addResizeDragItem(this);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.mixedContainer.deleteResizeDragItem(this);
|
||||
}
|
||||
|
||||
onSizeChangeEmit(rect: DOMRectReadOnly) {
|
||||
this.contentBoxSize?.emit({ drag: this.cdkDrag, containerSize: rect });
|
||||
}
|
||||
|
||||
/** @param {drag: CdkDrag, containerSize: DOMRectReadOnly} event: contentSize observer event.
|
||||
* @param {number} percentWidth: set width to the percentage based on the dropListGroup Container width, valid from 0 to 100.
|
||||
* @param {number} percentHeight: set width to the percentage based on the dropListGroup Container width, valid from 0 to 100. **/
|
||||
static defaultEmitter(event: { drag: CdkDrag; containerSize: DOMRectReadOnly }, percentWidth: number, percentHeight: number) {
|
||||
if (percentWidth) {
|
||||
event.drag.element.nativeElement.style.width = `${(percentWidth * event.containerSize.width) / 100}px`;
|
||||
} else {
|
||||
event.drag.element.nativeElement.style.width = '';
|
||||
}
|
||||
if (percentHeight) {
|
||||
event.drag.element.nativeElement.style.height = `${(percentHeight * event.containerSize.height) / 100}px`;
|
||||
} else {
|
||||
event.drag.element.nativeElement.style.height = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
<fa-icon [icon]="faTimes" size="2x"></fa-icon>
|
||||
</button>
|
||||
<div class="lg:hidden">
|
||||
@if (listing && listing.imageOrder.length > 0) {
|
||||
@if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
|
||||
<div id="gallery" class="relative w-full" data-carousel="slide">
|
||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
||||
@for (image of listing.imageOrder; track $index) {
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
|
||||
<div class="w-full lg:w-1/2 mt-6 lg:mt-0">
|
||||
<div class="hidden lg:block">
|
||||
@if (listing && listing.imageOrder.length > 0) {
|
||||
@if (listing && listing.imageOrder && listing.imageOrder.length > 0) {
|
||||
<div id="gallery" class="relative w-full" data-carousel="slide">
|
||||
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
|
||||
@for (image of listing.imageOrder; track $index) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { ChangeDetectorRef, Component } from '@angular/core';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
||||
import { AngularCropperjsModule } from 'angular-cropperjs';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
|
|
@ -19,7 +18,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
|
|||
@Component({
|
||||
selector: 'app-account',
|
||||
standalone: true,
|
||||
imports: [SharedModule, AngularCropperjsModule],
|
||||
imports: [SharedModule],
|
||||
providers: [],
|
||||
templateUrl: './account.component.html',
|
||||
styleUrl: './account.component.scss',
|
||||
|
|
|
|||
|
|
@ -7,8 +7,6 @@ import { createDefaultBusinessListing, map2User, routeListingWithState } from '.
|
|||
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
||||
import { AngularCropperjsModule } from 'angular-cropperjs';
|
||||
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { QuillModule } from 'ngx-quill';
|
||||
|
||||
|
|
@ -27,7 +25,7 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
|
|||
@Component({
|
||||
selector: 'business-listing',
|
||||
standalone: true,
|
||||
imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
|
||||
imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
|
||||
providers: [],
|
||||
templateUrl: './edit-business-listing.component.html',
|
||||
styleUrl: './edit-business-listing.component.scss',
|
||||
|
|
|
|||
|
|
@ -146,10 +146,11 @@
|
|||
<div class="container mx-auto p-4">
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h1 class="text-2xl font-semibold mb-6">Edit Listing</h1>
|
||||
@if (listing){
|
||||
<form #listingForm="ngForm">
|
||||
<div class="mb-4">
|
||||
<label for="listingsCategory" class="block text-sm font-bold text-gray-700 mb-1">Listing category</label>
|
||||
<select id="listingsCategory" [(ngModel)]="listing.listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
<select id="listingsCategory" [ngModel]="listingsCategory" name="listingsCategory" class="w-full p-2 border border-gray-300 rounded-md">
|
||||
<option value="business">Business</option>
|
||||
<option value="commercialProperty">Commercial Property</option>
|
||||
</select>
|
||||
|
|
@ -220,11 +221,10 @@
|
|||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto p-4">
|
||||
<div cdkDropList class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" (cdkDropListDropped)="drop($event)">
|
||||
<!-- <div class="container mx-auto p-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
@for (image of listing.imageOrder; track listing.imageOrder) {
|
||||
<div cdkDrag class="relative aspect-video cursor-move">
|
||||
<!-- <img [src]="image" class="w-full h-full object-cover rounded-lg shadow-md" /> -->
|
||||
<div class="relative aspect-video cursor-move">
|
||||
<img src="{{ env.imageBaseUrl }}/pictures/property/{{ listing.imagePath }}/{{ listing.serialId }}/{{ image }}?_ts={{ ts }}" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
|
||||
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
|
||||
|
|
@ -234,12 +234,56 @@
|
|||
</div>
|
||||
}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="container mx-auto p-4">
|
||||
<!-- <div class="grid-container"> -->
|
||||
<!-- @for (image of listing.imageOrder; track image) {
|
||||
<div cdkDrag class="grid-item">
|
||||
<div class="image-box">
|
||||
<img [src]="getImageUrl(image)" [alt]="image" class="w-full h-full object-cover rounded-lg shadow-md" />
|
||||
<div class="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
} -->
|
||||
<app-drag-drop-mixed [listing]="listing" (imageOrderChanged)="imageOrderChanged($event)" (imageToDelete)="deleteConfirm($event)"></app-drag-drop-mixed>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg shadow">
|
||||
<h2 class="text-lg font-semibold mb-2">Property Pictures</h2>
|
||||
<p class="text-sm text-gray-500 mb-4">(Pictures can be uploaded once the listing is posted initially)</p>
|
||||
<button
|
||||
(click)="openFileDialog()"
|
||||
class="flex items-center justify-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
>
|
||||
<svg class="mr-2 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
||||
</svg>
|
||||
Upload
|
||||
</button>
|
||||
<input type="file" #fileInput style="display: none" (change)="fileChangeEvent($event)" accept="image/*" />
|
||||
</div>
|
||||
@if (mode==='create'){
|
||||
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Post Listing</button>
|
||||
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Post Listing</button>
|
||||
} @else {
|
||||
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">Update Listing</button>
|
||||
<button (click)="save()" class="bg-blue-500 text-white px-4 py-2 mt-3 rounded-md hover:bg-blue-600">Update Listing</button>
|
||||
}
|
||||
</form>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div *ngIf="showModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex items-center justify-center">
|
||||
<div class="bg-white p-5 rounded-lg shadow-xl" style="width: 90%; max-width: 600px">
|
||||
<h3 class="text-lg font-semibold mb-4">Crop Image</h3>
|
||||
<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="16 / 9" format="png" (imageCropped)="imageCropped($event)"></image-cropper>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<button (click)="closeModal()" class="mr-2 px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300">Cancel</button>
|
||||
<button (click)="uploadImage()" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Upload</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<app-confirmation></app-confirmation>
|
||||
|
|
|
|||
|
|
@ -55,3 +55,52 @@
|
|||
cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
|
||||
border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
|
||||
}
|
||||
|
||||
// -------------------------------
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 8px;
|
||||
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
|
||||
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.grid-item:active {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.image-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cdk-drag-preview {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.cdk-drag-placeholder {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.cdk-drag-animating {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.grid-container.cdk-drop-list-dragging .grid-item:not(.cdk-drag-placeholder) {
|
||||
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,25 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
|
||||
import { lastValueFrom } from 'rxjs';
|
||||
import { ListingsService } from '../../../services/listings.service';
|
||||
import { SelectOptionsService } from '../../../services/select-options.service';
|
||||
import { createDefaultCommercialPropertyListing, map2User, routeListingWithState } from '../../../utils/utils';
|
||||
|
||||
import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { DragDropModule } from '@angular/cdk/drag-drop';
|
||||
import { ViewportRuler } from '@angular/cdk/scrolling';
|
||||
import { faTrash } from '@fortawesome/free-solid-svg-icons';
|
||||
import { NgSelectModule } from '@ng-select/ng-select';
|
||||
import { AngularCropperjsModule } from 'angular-cropperjs';
|
||||
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
|
||||
import { KeycloakService } from 'keycloak-angular';
|
||||
import { NgxCurrencyDirective } from 'ngx-currency';
|
||||
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
|
||||
import { QuillModule } from 'ngx-quill';
|
||||
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
|
||||
import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
|
||||
import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
|
||||
import { DragDropMixedComponent } from '../../../components/drag-drop-mixed/drag-drop-mixed.component';
|
||||
import { MessageService } from '../../../components/message/message.service';
|
||||
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
|
||||
import { GeoService } from '../../../services/geo.service';
|
||||
import { ImageService } from '../../../services/image.service';
|
||||
|
|
@ -26,13 +30,15 @@ import { TOOLBAR_OPTIONS } from '../../utils/defaults';
|
|||
@Component({
|
||||
selector: 'commercial-property-listing',
|
||||
standalone: true,
|
||||
imports: [SharedModule, ArrayToStringPipe, AngularCropperjsModule, DragDropModule, MixedCdkDragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule],
|
||||
imports: [SharedModule, ArrayToStringPipe, DragDropModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, DragDropMixedComponent],
|
||||
providers: [],
|
||||
templateUrl: './edit-commercial-property-listing.component.html',
|
||||
styleUrl: './edit-commercial-property-listing.component.scss',
|
||||
})
|
||||
export class EditCommercialPropertyListingComponent {
|
||||
// @ViewChild(FileUpload) public fileUpload: FileUpload;
|
||||
@ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
|
||||
|
||||
listingsCategory = 'commercialProperty';
|
||||
category: string;
|
||||
location: string;
|
||||
|
|
@ -74,6 +80,10 @@ export class EditCommercialPropertyListingComponent {
|
|||
quillModules = {
|
||||
toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
|
||||
};
|
||||
showModal = false;
|
||||
imageChangedEvent: any = '';
|
||||
croppedImage: Blob | null = null;
|
||||
|
||||
constructor(
|
||||
public selectOptions: SelectOptionsService,
|
||||
private router: Router,
|
||||
|
|
@ -87,6 +97,10 @@ export class EditCommercialPropertyListingComponent {
|
|||
|
||||
private route: ActivatedRoute,
|
||||
private keycloakService: KeycloakService,
|
||||
private cdr: ChangeDetectorRef,
|
||||
private confirmationService: ConfirmationService,
|
||||
private messageService: MessageService,
|
||||
private viewportRuler: ViewportRuler,
|
||||
) {
|
||||
// Abonniere Router-Events, um den aktiven Link zu ermitteln
|
||||
this.router.events.subscribe(event => {
|
||||
|
|
@ -130,7 +144,43 @@ export class EditCommercialPropertyListingComponent {
|
|||
const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query, this.listing.state));
|
||||
this.suggestions = result.map(r => r.city).slice(0, 5);
|
||||
}
|
||||
openFileDialog() {
|
||||
this.fileInput.nativeElement.click();
|
||||
}
|
||||
|
||||
fileChangeEvent(event: any): void {
|
||||
this.imageChangedEvent = event;
|
||||
this.showModal = true;
|
||||
}
|
||||
|
||||
imageCropped(event: ImageCroppedEvent) {
|
||||
this.croppedImage = event.blob;
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
this.showModal = false;
|
||||
this.imageChangedEvent = '';
|
||||
this.croppedImage = null;
|
||||
}
|
||||
|
||||
uploadImage() {
|
||||
if (this.croppedImage) {
|
||||
// Convert base64 to blob
|
||||
// Replace with your actual API endpoint
|
||||
this.imageService.uploadImage(this.croppedImage, 'uploadPropertyPicture', this.listing.imagePath, this.listing.serialId).subscribe(
|
||||
async response => {
|
||||
console.log('Upload successful', response);
|
||||
setTimeout(async () => {
|
||||
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
|
||||
});
|
||||
this.closeModal();
|
||||
},
|
||||
error => {
|
||||
console.error('Upload failed', error);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
// select(event: any) {
|
||||
// const imageUrl = URL.createObjectURL(event.files[0]);
|
||||
// getImageDimensions(imageUrl).then(dimensions => {
|
||||
|
|
@ -174,36 +224,22 @@ export class EditCommercialPropertyListingComponent {
|
|||
// });
|
||||
// }
|
||||
|
||||
// deleteConfirm(imageName: string) {
|
||||
// this.confirmationService.confirm({
|
||||
// target: event.target as EventTarget,
|
||||
// message: `Do you want to delete this image ${imageName}?`,
|
||||
// header: 'Delete Confirmation',
|
||||
// icon: 'pi pi-info-circle',
|
||||
// acceptButtonStyleClass: 'p-button-danger p-button-text',
|
||||
// rejectButtonStyleClass: 'p-button-text p-button-text',
|
||||
// acceptIcon: 'none',
|
||||
// rejectIcon: 'none',
|
||||
|
||||
// accept: async () => {
|
||||
// this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
|
||||
// await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
|
||||
// this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
|
||||
// },
|
||||
// reject: () => {
|
||||
// // this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
|
||||
// console.log('deny');
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
|
||||
onDrop(event: { previousIndex: number; currentIndex: number }) {
|
||||
moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
|
||||
async deleteConfirm(imageName: string) {
|
||||
const confirmed = await this.confirmationService.showConfirmation('Are you sure you want to delete this image?');
|
||||
if (confirmed) {
|
||||
this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
|
||||
await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
|
||||
this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
|
||||
this.messageService.showMessage('Image deleted');
|
||||
} else {
|
||||
console.log('deny');
|
||||
}
|
||||
}
|
||||
|
||||
changeListingCategory(value: 'business' | 'commercialProperty') {
|
||||
routeListingWithState(this.router, value, this.listing);
|
||||
}
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
|
||||
imageOrderChanged(imageOrder: string[]) {
|
||||
this.listing.imageOrder = imageOrder;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue