diff --git a/src-ui/src/app/components/folder-management/viewall-forder/tailieuhoctap.txt b/src-ui/src/app/components/folder-management/viewall-forder/tailieuhoctap.txt new file mode 100644 index 000000000..01132aee9 --- /dev/null +++ b/src-ui/src/app/components/folder-management/viewall-forder/tailieuhoctap.txt @@ -0,0 +1,373 @@ +import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; +import { FoldersService } from 'src/app/services/rest/folders.service'; +import { Document, Folders, Results } from 'src/app/data/folders'; + +@Component({ + selector: 'app-view-all-folder', + templateUrl: './viewall-forder.component.html', + styleUrls: ['./viewall-forder.component.scss'] +}) +export class ViewallForderComponent implements OnInit { + folders: Folders[] = []; + documents: Document[] = []; + results: Results[] = []; + selectedFolderId: number | null = null; + + constructor(private foldersService: FoldersService, private renderer: Renderer2, private elementRef: ElementRef) {} + + ngOnInit(): void { + this.foldersService.getFoldersAndDocuments().subscribe({ + next: (data: any) => { + this.folders = data.folders; + this.documents = data.documents; + this.initializeFolders(); + this.initializeDocuments(); + this.addEventListeners(); + }, + error: error => { + console.error('Error fetching data:', error); + } + }); + + this.foldersService.getResults().subscribe({ + next: (data: any) => { + this.results = data.results.filter(result => result.parent_folder !== null); + this.initializeFolders(); + }, + error: error => { + console.error('Error fetching results:', error); + } + }); + } + + initializeFolders(): void { + const foldersContainer = this.elementRef.nativeElement.querySelector('#folders-container'); + if (foldersContainer) { + const allFolders = [...this.folders, ...this.results]; + foldersContainer.innerHTML = ''; + + const folderMap = new Map(); + allFolders.forEach(folder => { + const parentId = folder.parent_folder ?? null; + if (!folderMap.has(parentId)) { + folderMap.set(parentId, []); + } + folderMap.get(parentId)?.push(folder); + }); + + const createFolders = (parentId: number | null, parentDiv: HTMLElement | null): void => { + const children = folderMap.get(parentId) || []; + children.forEach(folder => { + const folderHTML = this.createFolderHTML(folder); + if (parentDiv) { + this.renderer.appendChild(parentDiv, folderHTML); + } else { + this.renderer.appendChild(foldersContainer, folderHTML); + } + createFolders(folder.id, folderHTML.querySelector('.children-container') as HTMLElement); + }); + }; + + createFolders(null, null); + } + } + + initializeDocuments(): void { + const documentsContainer = this.elementRef.nativeElement.querySelector('#documents-container'); + if (documentsContainer) { + documentsContainer.innerHTML = ''; + const addedDocumentFilenames = new Set(); + + this.documents.forEach(doc => { + const folder = this.findFolderById(doc.folder_id); + if (!addedDocumentFilenames.has(doc.filename)) { + if (folder && folder.id > 0) { + const folderDiv = this.findFolderDiv(folder.id); + if (folderDiv) { + const documentsContainerInFolder = folderDiv.querySelector('.documents-container') as HTMLElement; + if (documentsContainerInFolder && !documentsContainerInFolder.querySelector(`.document[data-document-id="${doc.id}"]`)) { + const documentHTML = this.createDocumentHTML(doc); + this.renderer.appendChild(documentsContainerInFolder, documentHTML); + addedDocumentFilenames.add(doc.filename); + } + } + } else { + if (!documentsContainer.querySelector(`.document[data-document-id="${doc.id}"]`)) { + const documentHTML = this.createDocumentHTML(doc); + this.renderer.appendChild(documentsContainer, documentHTML); + addedDocumentFilenames.add(doc.filename); + } + } + } + }); + } + } + + addEventListeners(): void { + // Handling double click for elements with class .folder-cha + const folderChaElements = this.elementRef.nativeElement.querySelectorAll('.folder-cha'); + folderChaElements.forEach(item => { + this.renderer.listen(item, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLElement; + const folderElement = target.closest('.folder') as HTMLElement; + const folderId = Number(folderElement?.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); + }); + + // Remove all 'click' event listeners on 'tr' elements + const folderRows = this.elementRef.nativeElement.querySelectorAll('tr[data-folder-id]'); + folderRows.forEach(row => { + // Completely remove 'click' event listener + row.removeEventListener('click', this.handleRowClick); + + // Use 'dblclick' instead of 'click' + this.renderer.listen(row, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); + }); + + // Resizing folderLeft section (unchanged from original) + const folderLeft = this.elementRef.nativeElement.querySelector('#folderLeft'); + if (folderLeft) { + const resizeHandle = folderLeft.querySelector('.resize-handle') as HTMLElement; + if (resizeHandle) { + let startX: number; + let startWidth: number; + + const resizeWidth = (event: MouseEvent) => { + const newWidth = startWidth + (event.clientX - startX); + folderLeft.style.width = `${newWidth}px`; // Corrected template literal usage + + const folderRight = this.elementRef.nativeElement.querySelector('.folder-right') as HTMLElement; + if (folderRight) { + folderRight.style.width = `calc(100% - ${newWidth}px)`; // Corrected template literal usage + } + }; + + + const stopResize = () => { + document.removeEventListener('mousemove', resizeWidth); + document.removeEventListener('mouseup', stopResize); + }; + + this.renderer.listen(resizeHandle, 'mousedown', (event: MouseEvent) => { + startX = event.clientX; + startWidth = parseInt(window.getComputedStyle(folderLeft).width, 10); + document.addEventListener('mousemove', resizeWidth); + document.addEventListener('mouseup', stopResize); + }); + } + } + } + + // Example function for handling 'click' on rows (if necessary) + handleRowClick(event: Event) { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + // Handle click action here if needed + } + + + + confirmDisplayFolderContents(folderId: number): void { + this.displayFolderContents(folderId); + } + + displayFolderContents(folderId: number, parentRow: HTMLTableRowElement | null = null): void { + const tableBody = this.elementRef.nativeElement.querySelector('.folder-contents tbody'); + if (tableBody) { + const rowsToRemove = parentRow + ? tableBody.querySelectorAll(`.child-of-folder-${folderId}`) + : tableBody.querySelectorAll('tr'); + rowsToRemove.forEach(row => row.remove()); + + const childFolders = this.folders.filter(folder => folder.parent_folder === folderId); + const childResults = this.results.filter(result => result.parent_folder === folderId); + const allChildFolders = [...childFolders, ...childResults]; + + allChildFolders.forEach(folder => { + const row = this.createFolderRowHTML(folder, folderId); + if (parentRow) { + parentRow.insertAdjacentElement('afterend', row); + } else { + tableBody.appendChild(row); + } + }); + + const childDocuments = this.documents.filter(doc => doc.folder_id === folderId); + childDocuments.forEach(doc => { + const row = this.createDocumentRowHTML(doc, folderId); + if (parentRow) { + parentRow.insertAdjacentElement('afterend', row); + } else { + tableBody.appendChild(row); + } + }); + + this.addRowEventListeners(); + } + } + + createFolderRowHTML(folder: Folders, parentId: number): HTMLElement { + const row = document.createElement('tr'); + row.classList.add(`child-of-folder-${parentId}`); + row.dataset.folderId = folder.id.toString(); + + const nameCell = document.createElement('td'); + const folderIcon = document.createElement('i'); + folderIcon.classList.add('fa-solid', 'fa-folder'); + const folderName = document.createElement('p'); + folderName.textContent = folder.name; + nameCell.appendChild(folderIcon); + nameCell.appendChild(folderName); + + const dateCell = document.createElement('td'); + dateCell.textContent = '11/10/2002'; // Placeholder date + + const typeCell = document.createElement('td'); + typeCell.textContent = 'File Folder'; + + const sizeCell = document.createElement('td'); + sizeCell.textContent = '2 KB'; // Placeholder size + + row.appendChild(nameCell); + row.appendChild(dateCell); + row.appendChild(typeCell); + row.appendChild(sizeCell); + + return row; + } + + createDocumentRowHTML(doc: Document, parentId: number): HTMLElement { + const row = document.createElement('tr'); + row.classList.add(`child-of-folder-${parentId}`); + row.dataset.documentId = doc.id.toString(); + + const nameCell = document.createElement('td'); + const fileIcon = document.createElement('i'); + fileIcon.classList.add('fa-solid', 'fa-file'); + const fileName = document.createElement('p'); + fileName.textContent = doc.filename; + nameCell.appendChild(fileIcon); + nameCell.appendChild(fileName); + + const dateCell = document.createElement('td'); + dateCell.textContent = '11/10/2002'; // Placeholder date + + const typeCell = document.createElement('td'); + typeCell.textContent = 'txt'; // Placeholder type + + const sizeCell = document.createElement('td'); + sizeCell.textContent = '2 KB'; // Placeholder size + + row.appendChild(nameCell); + row.appendChild(dateCell); + row.appendChild(typeCell); + row.appendChild(sizeCell); + + return row; + } + + createFolderHTML(folder: Folders): HTMLElement { + const folderDiv = document.createElement('div'); + folderDiv.classList.add('folder'); + folderDiv.dataset.folderId = folder.id.toString(); + + const folderIcon = document.createElement('i'); + folderIcon.classList.add('fa', 'fa-solid', 'fa-chevron-right'); + + const folderIconFolder = document.createElement('i'); + folderIconFolder.classList.add('fa', 'fa-solid', 'fa-folder'); + + const folderName = document.createElement('p'); + folderName.textContent = folder.name; + + const folderHeader = document.createElement('div'); + folderHeader.classList.add('folder-cha'); + folderHeader.appendChild(folderIcon); + folderHeader.appendChild(folderIconFolder); + folderHeader.appendChild(folderName); + + folderDiv.appendChild(folderHeader); + + const childrenContainer = document.createElement('div'); + childrenContainer.classList.add('children-container'); + childrenContainer.style.display = 'none'; + folderDiv.appendChild(childrenContainer); + + // Variable to store the logged folder id + let loggedFolderId: number | null = null; + + this.renderer.listen(folderHeader, 'click', () => { + // Check and log folder id when clicking on folderHeader + const clickedFolderId = folder.id; + if (clickedFolderId !== loggedFolderId) { + if (loggedFolderId !== null) { + console.log(`Removed log for folder ${loggedFolderId}`); + } + console.log(`Clicked folder ${clickedFolderId}`); + loggedFolderId = clickedFolderId; + } + + // Display contents of the folder in the tbody + this.displayFolderContents(clickedFolderId); + }); + + this.renderer.listen(folderIcon, 'click', (event: Event) => { + // Prevent folderHeader click event when clicking on folderIcon + event.stopPropagation(); + + // Toggle display of childrenContainer + if (childrenContainer.style.display === 'none') { + childrenContainer.style.display = 'block'; + folderIcon.style.transform = 'rotate(90deg)'; + folderIconFolder.classList.replace('fa-folder', 'fa-folder-open'); + } else { + childrenContainer.style.display = 'none'; + folderIcon.style.transform = ''; + folderIconFolder.classList.replace('fa-folder-open', 'fa-folder'); + } + }); + + return folderDiv; + } + + createDocumentHTML(doc: Document): HTMLElement { + const documentDiv = document.createElement('div'); + documentDiv.classList.add('document'); + documentDiv.dataset.documentId = doc.id.toString(); + + const documentName = document.createElement('p'); + documentName.textContent = doc.filename; + + const documentContainer = document.createElement('div'); + documentContainer.classList.add('document-container'); + documentContainer.appendChild(documentName); + + documentDiv.appendChild(documentContainer); + return documentDiv; + } + + findFolderById(folderId: number): Folders | undefined { + return this.folders.find(folder => folder.id === folderId); + } + + findFolderDiv(folderId: number): HTMLElement | null { + const foldersContainer = document.getElementById('folders-container'); + return foldersContainer?.querySelector(`.folder[data-folder-id="${folderId}"]`) as HTMLElement | null; + } + + addRowEventListeners(): void { + const folderRows = this.elementRef.nativeElement.querySelectorAll('tr[data-folder-id]'); + folderRows.forEach(row => { + this.renderer.listen(row, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); + }); + } +} \ No newline at end of file diff --git a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.html b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.html index f1828b059..609814588 100644 --- a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.html +++ b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.html @@ -1,68 +1,74 @@ -
-
- +
+ -
-
-
- - + +
+
+
+ + +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+

Folder 1

+ +
+
+

Folder 2

+ +
+
+

Folder 3

+ +
+
+

Folder 4

+
-
-
- -
-
-
-
-
-
-
-
- - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
NameData modifiedTypeSize
- -

Folder 1

- 		11/10/2002 -

File Folder

- 		-

2 KB

-
- -

Document

- 		11/10/2002 -

txt

- 		-

2 KB

-
-
-
+
+ + +
+
+
+ + + + + + + + + + + + +
NameData modifiedTypeSize
+
+
\ No newline at end of file diff --git a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.scss b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.scss index 4ab1c2634..922cb06c5 100644 --- a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.scss +++ b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.scss @@ -3,251 +3,283 @@ body { height: 100%; overflow: hidden; } + .folder-container { width: 100%; height: 100%; display: flex; -} -.folder-container .folder-left { - width: 30%; - position: relative; - min-width: 100px; - height: 100vh; - overflow-x: auto; - overflow-y: auto; - background: rgba(37, 36, 36, 0.845); - display: flex; - align-items: center; - flex-direction: column; - overflow: hidden; -} -.resize-handle { - background-color: #f0f0f0; - cursor: ew-resize; - width: 2px; - height: 100%; - position: absolute; - right: 0; -} -.folder-container .folder-right { - width: 70%; - height: 100vh; - overflow-y: auto; -} -.folder-left-1 { - width: 100%; - height: 30px; - display: flex; - align-items: center; - justify-content: center; -} -.folder-left-search { - width: 85%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - margin-top: 10px; - box-shadow: 0 0 3px 0 gold; -} -.folder-left-search .serch { - width: 90%; - height: 100%; - border-left: none; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; -} -.folder-left-search .serch:focus { - outline: none; -} -.serch:focus + .folder-left-search { - border: 5px solid gold; -} -.folder-left-search .search { - width: 10%; - height: 100%; - cursor: pointer; - border-right: none; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; -} -.folder{ - width: 95%; - height: auto; -} -#folders-container{ - margin-top: 20px; -} -.documents { - width: 95%; - height: auto; -} -.folder-cha{ - width: 100%; - height: auto; - display: flex; - cursor: pointer; - margin-top: 2%; - text-align: left; -} -.folder-cha P{ - color: #f0f0f0; -} -.folder-cha .fa-solid{ - color: gold; - padding: 0 5px; -} -.folder-cha .fa-chevron-right{ - color: #f0f0f0; -} -.folder-cha .fa-folder{ - color: goldenrod; -} -.folder-con{ - width: 100%; - height: auto; - display: flex; - cursor: pointer; - text-align: left; -} -.folder-con P{ - color: #f0f0f0; -} -.foder{ - width: 100%; - height: auto; - position: relative; - text-align: left; -} -.folder-con .fa-solid{ - color: gold; - padding: 0 5px; -} -.folder-con .fa-chevron-right{ - color: #f0f0f0; -} -.folder-con .fa-folder{ - color: goldenrod; -} -#folders-container{ - margin-left: -10%; -} -.docoment{ - width: 100%; - display: flex; - align-items: center; - text-align: left; -} -.docomenta, -.document-container{ - margin-left: 7%; -} -p{ - color: aliceblue; -} -.folder { - position: relative; - overflow: hidden; - padding-left: 20px; -} + .folder-left { + width: 30%; + position: relative; + min-width: 100px; + height: 100vh; + overflow-x: auto; + overflow-y: auto; + background: rgba(37, 36, 36, 0.845); + display: flex; + align-items: center; + flex-direction: column; + overflow: hidden; -.folder .ke { - background: #f0f0f0; - width: 1px; - height: 180%; - z-index: 10000; - position: absolute; - left: 8.5%; - top: 60%; - display: none; - transform: translateY(-15%); -} -.folder-search{ - width: 100%; - height: 50px; - display: flex; - align-items: center; -} -.folder-right-tim{ - width: 60%; - height: 40px; - background: rgba(128, 128, 128, 0.534); - border-radius: 5px; + .resize-handle { + background-color: #f0f0f0; + cursor: ew-resize; + width: 2px; + height: 100%; + position: absolute; + right: 0; + } - margin-left: 10px; -} -.folder-right-search{ - width: 30%; - height: 40px; - background: rgba(128, 128, 128, 0.449); - border-radius: 5px; - margin-left: 50px; - display: flex; -} -.folder-right-search button{ - cursor: pointer; - padding: 11px 15px; - border-right: none; -} -.folder-right-search input{ - border-left: none; - width: 100%; -} -.folder-right-conten{ - width: 100%; - height: 100%; -} -table { - width: 100%; - border-collapse: collapse; - margin: 20px 0; - background-color: #fff; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} -table td{ - color: black; -} -table thead { - background-color: #007bff25; - color: #fff; -} + .folder-left-1 { + width: 100%; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + } -table thead tr { - border-bottom: 1px solid #dee2e6; -} + .folder-left-search { + width: 85%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; + box-shadow: 0 0 3px 0 gold; -table thead td { - padding: 12px 15px; - text-align: left; - font-weight: bold; -} + .serch { + width: 90%; + height: 100%; + border-left: none; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; -table tbody tr { - border-bottom: 1px solid #dee2e6; -} + &:focus { + outline: none; + } -table tbody tr:nth-of-type(even) { - background-color: #f2f2f2; -} + &:focus + .folder-left-search { + border: 5px solid gold; + } + } -table tbody tr:hover { - background-color: #f1f1f1; -} + .search { + width: 10%; + height: 100%; + cursor: pointer; + border-right: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + } -table tbody td { - padding: 12px 15px; - text-align: left; -} -tbody td p{ - color: black; -} + .folder { + width: 95%; + height: auto; + } -table tbody td i { - margin-right: 8px; -} + #folders-container { + margin-top: 20px; + } -table tbody td p { - display: inline; - margin: 0; -} \ No newline at end of file + .folder-cha { + width: 100%; + height: auto; + display: flex; + cursor: pointer; + margin-top: 2%; + text-align: left; + + p { + color: #f0f0f0; + } + + .fa-solid { + color: gold; + padding: 0 5px; + } + .fa{ + color: gold; + padding: 0 5px; + } + + .fa-chevron-right { + color: #f0f0f0; + } + + .fa-folder { + color: goldenrod; + } + } + + .folder-con { + width: 100%; + height: auto; + display: flex; + cursor: pointer; + text-align: left; + + p { + color: #f0f0f0; + } + + .fa-solid { + color: gold; + padding: 0 5px; + } + + .fa-chevron-right { + color: #f0f0f0; + } + + .fa-folder { + color: goldenrod; + } + } + + #folders-container { + margin-left: -10%; + } + + .docoment { + width: 100%; + display: flex; + align-items: center; + text-align: left; + } + + .docomenta, + .document-container { + margin-left: 7%; + } + + p { + color: aliceblue; + } + + .folder { + position: relative; + overflow: hidden; + padding-left: 20px; + + .ke { + background: #f0f0f0; + width: 1px; + height: 180%; + z-index: 10000; + position: absolute; + left: 8.5%; + top: 60%; + display: none; + transform: translateY(-15%); + } + } + } + + .folder-right { + width: 70%; + height: 100vh; + overflow-y: auto; + + .folder-search { + width: 100%; + height: 50px; + display: flex; + align-items: center; + + .folder-right-tim { + width: 60%; + height: 40px; + background: rgba(128, 128, 128, 0.534); + border-radius: 5px; + margin-left: 10px; + } + + .folder-right-search { + width: 30%; + height: 40px; + background: rgba(128, 128, 128, 0.449); + border-radius: 5px; + margin-left: 50px; + display: flex; + + button { + cursor: pointer; + padding: 11px 15px; + border-right: none; + } + + input { + border-left: none; + width: 100%; + } + } + } + + .folder-right-conten { + width: 100%; + height: 100%; + } + + table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + + td { + color: black; + } + + thead { + background-color: #007bff25; + color: #fff; + + tr { + border-bottom: 1px solid #dee2e6; + } + + td { + padding: 12px 15px; + text-align: left; + font-weight: bold; + border-left: ăp; + } + } + + tbody { + tr { + border-bottom: 1px solid #dee2e6; + + &:nth-of-type(even) { + background-color: #f2f2f2; + } + + &:hover { + background-color: #f1f1f1; + } + + td { + padding: 12px 15px; + text-align: left; + + p { + color: black; + } + + i { + margin-right: 8px; + } + + p { + display: inline; + margin: 0; + } + } + } + } + } + } +} diff --git a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.ts b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.ts index 71a10932b..539b03d3e 100644 --- a/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.ts +++ b/src-ui/src/app/components/folder-management/viewall-forder/viewall-forder.component.ts @@ -1,92 +1,213 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; import { FoldersService } from 'src/app/services/rest/folders.service'; -import { Document, Folders } from 'src/app/data/folders'; +import { Document, Folders, Results } from 'src/app/data/folders'; @Component({ selector: 'app-view-all-folder', templateUrl: './viewall-forder.component.html', styleUrls: ['./viewall-forder.component.scss'] }) -export class ViewAllFolderComponent implements OnInit { +export class ViewallForderComponent implements OnInit { folders: Folders[] = []; documents: Document[] = []; + results: Results[] = []; + selectedFolderId: number | null = null; - constructor(private foldersService: FoldersService) {} + constructor(private foldersService: FoldersService, private renderer: Renderer2, private elementRef: ElementRef) {} ngOnInit(): void { this.foldersService.getFoldersAndDocuments().subscribe({ - next: data => { + next: (data: any) => { this.folders = data.folders; this.documents = data.documents; this.initializeFolders(); this.initializeDocuments(); this.addEventListeners(); + this.setupEventListeners(); }, error: error => { console.error('Error fetching data:', error); - // Xử lý lỗi theo yêu cầu của bạn + } + }); + + this.foldersService.getResults().subscribe({ + next: (data: any) => { + this.results = data.results.filter(result => result.parent_folder !== null); + this.initializeFolders(); + }, + error: error => { + console.error('Error fetching results:', error); + } + }); + } + setupEventListeners(): void { + document.addEventListener("DOMContentLoaded", () => { + const folderLeft = document.getElementById('folderLeft'); + const folderright = document.getElementById('folderrightt'); + const folderContainer = document.querySelector('.folder-container'); + const zoom = document.getElementById("zoomImg"); + const contextMenu = document.getElementById("contextMenu"); + const toggleButton = document.getElementById("toggleButton"); + const amButton = document.getElementById("am"); + const subFolderContainer = document.querySelector('.sub-folder-container') as HTMLElement; + + let eventsEnabled = false; + + amButton.addEventListener("click", () => { + subFolderContainer.style.display = "block"; + contextMenu.style.display = "none"; + + const inputInSubFolder = subFolderContainer.querySelector('input[type="text"]') as HTMLElement; + if (inputInSubFolder) { + inputInSubFolder.focus(); + } + + const allInputs = document.querySelectorAll('input'); + allInputs.forEach((input) => { + if (input !== inputInSubFolder) { + input.blur(); + } + }); + }); + + document.getElementById('sss').addEventListener('click', () => { + const contextMenu1 = document.querySelector('.sub-folder-container') as HTMLElement; + if (contextMenu1) { + contextMenu1.style.display = 'none'; + } + }); + + folderLeft.addEventListener('click', () => { + hideContextMenu(); + }); + + folderLeft.addEventListener('contextmenu', (event) => { + event.preventDefault(); + showContextMenu(event.clientX, event.clientY); + }); + + document.addEventListener('mousedown', (event) => { + const targetElement = event.target as HTMLElement; + + const clickedInsideContextMenu = contextMenu.contains(targetElement); + const clickedInsideFolderContainer = folderContainer.contains(targetElement); + const clickedInsideAddFolder = targetElement.classList.contains('addfolder') || targetElement.closest('.addfolder'); + const clickedInsideAm = targetElement.id === 'am' || targetElement.closest('#am'); + + if (!clickedInsideContextMenu && !clickedInsideAddFolder && !clickedInsideAm) { + hideContextMenu(); + } + + if (clickedInsideAm) { + event.preventDefault(); + } + }); + + toggleButton.addEventListener("click", () => { + toggleEvents(); + }); + + function showContextMenu(x: number, y: number) { + if (contextMenu) { + contextMenu.style.display = "block"; + contextMenu.style.left = x + "px"; + contextMenu.style.top = y + "px"; + } + } + + function hideContextMenu() { + if (contextMenu) { + contextMenu.style.display = "none"; + } + } + + function toggleEvents() { + eventsEnabled = !eventsEnabled; + if (eventsEnabled) { + if (zoom) { + zoom.addEventListener("contextmenu", handleContextMenu); + } + } else { + if (zoom) { + zoom.removeEventListener("contextmenu", handleContextMenu); + } + } + } + + function handleContextMenu(e: MouseEvent) { + e.preventDefault(); + showContextMenu(e.clientX, e.clientY); + } + + if (zoom) { + zoom.onmouseup = () => { + if (eventsEnabled) { + hideContextMenu(); + } + }; + + zoom.onmousemove = (e: MouseEvent) => { + // Additional handling if needed + }; } }); } initializeFolders(): void { - const foldersContainer = document.getElementById('folders-container'); + const foldersContainer = this.elementRef.nativeElement.querySelector('#folders-container'); if (foldersContainer) { + const allFolders = [...this.folders, ...this.results]; foldersContainer.innerHTML = ''; - const createFolders = (parentId: number | null, parentDiv: HTMLElement | null) => { - this.folders.forEach(folder => { - if (folder.parent_folder_id === parentId) { - const folderHTML = this.createFolderHTML(folder, parentDiv); - createFolders(folder.id, folderHTML.querySelector('.children-container') as HTMLElement); + const folderMap = new Map(); + allFolders.forEach(folder => { + const parentId = folder.parent_folder ?? null; + if (!folderMap.has(parentId)) { + folderMap.set(parentId, []); + } + folderMap.get(parentId)?.push(folder); + }); + + const createFolders = (parentId: number | null, parentDiv: HTMLElement | null): void => { + const children = folderMap.get(parentId) || []; + children.forEach(folder => { + const folderHTML = this.createFolderHTML(folder); + if (parentDiv) { + this.renderer.appendChild(parentDiv, folderHTML); + } else { + this.renderer.appendChild(foldersContainer, folderHTML); } + createFolders(folder.id, folderHTML.querySelector('.children-container') as HTMLElement); }); }; - this.folders.forEach(folder => { - if (folder.parent_folder_id === null) { - const folderHTML = this.createFolderHTML(folder); - foldersContainer.appendChild(folderHTML); - this.documents.forEach(doc => { - if (doc.folder_id === folder.id) { - const documentHTML = this.createDocumentHTML(doc); - folderHTML.querySelector('.children-container')?.appendChild(documentHTML); - } - }); - createFolders(folder.id, folderHTML.querySelector('.children-container') as HTMLElement); - } - }); + createFolders(null, null); } } initializeDocuments(): void { - const documentsContainer = document.getElementById('documents-container'); - const foldersContainer = document.getElementById('folders-container'); - - if (documentsContainer && foldersContainer) { + const documentsContainer = this.elementRef.nativeElement.querySelector('#documents-container'); + if (documentsContainer) { documentsContainer.innerHTML = ''; - const addedDocumentFilenames = new Set(); this.documents.forEach(doc => { + const folder = this.findFolderById(doc.folder_id); if (!addedDocumentFilenames.has(doc.filename)) { - const folder = this.findFolderById(doc.folder_id); - if (folder && folder.id === 71) { + if (folder && folder.id > 0) { const folderDiv = this.findFolderDiv(folder.id); if (folderDiv) { - const documentsContainerInFolder = folderDiv.querySelector('.documents-container'); - if (documentsContainerInFolder) { - if (!documentsContainerInFolder.querySelector(`.document[data-document-id="${doc.id}"]`)) { - const documentHTML = this.createDocumentHTML(doc); - documentsContainerInFolder.appendChild(documentHTML); - addedDocumentFilenames.add(doc.filename); - } + const documentsContainerInFolder = folderDiv.querySelector('.documents-container') as HTMLElement; + if (documentsContainerInFolder && !documentsContainerInFolder.querySelector(`.document[data-document-id="${doc.id}"]`)) { + const documentHTML = this.createDocumentHTML(doc); + this.renderer.appendChild(documentsContainerInFolder, documentHTML); + addedDocumentFilenames.add(doc.filename); } } } else { if (!documentsContainer.querySelector(`.document[data-document-id="${doc.id}"]`)) { const documentHTML = this.createDocumentHTML(doc); - documentsContainer.appendChild(documentHTML); + this.renderer.appendChild(documentsContainer, documentHTML); addedDocumentFilenames.add(doc.filename); } } @@ -95,24 +216,182 @@ export class ViewAllFolderComponent implements OnInit { } } - createFolderHTML(folder: Folders, parentDiv: HTMLElement | null = null): HTMLElement { + addEventListeners(): void { + // Handling double click for elements with class .folder-cha + const folderChaElements = this.elementRef.nativeElement.querySelectorAll('.folder-cha'); + folderChaElements.forEach(item => { + this.renderer.listen(item, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLElement; + const folderElement = target.closest('.folder') as HTMLElement; + const folderId = Number(folderElement?.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); + }); + + // Remove all 'click' event listeners on 'tr' elements + const folderRows = this.elementRef.nativeElement.querySelectorAll('tr[data-folder-id]'); + folderRows.forEach(row => { + // Completely remove 'click' event listener + row.removeEventListener('click', this.handleRowClick); + + // Use 'dblclick' instead of 'click' + this.renderer.listen(row, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); + }); + + // Resizing folderLeft section (unchanged from original) + const folderLeft = this.elementRef.nativeElement.querySelector('#folderLeft'); + if (folderLeft) { + const resizeHandle = folderLeft.querySelector('.resize-handle') as HTMLElement; + if (resizeHandle) { + let startX: number; + let startWidth: number; + + const resizeWidth = (event: MouseEvent) => { + const newWidth = startWidth + (event.clientX - startX); + folderLeft.style.width = `${newWidth}px`; // Corrected template literal usage + + const folderRight = this.elementRef.nativeElement.querySelector('.folder-right') as HTMLElement; + if (folderRight) { + folderRight.style.width = `calc(100% - ${newWidth}px)`; // Corrected template literal usage + } + }; + + + const stopResize = () => { + document.removeEventListener('mousemove', resizeWidth); + document.removeEventListener('mouseup', stopResize); + }; + + this.renderer.listen(resizeHandle, 'mousedown', (event: MouseEvent) => { + startX = event.clientX; + startWidth = parseInt(window.getComputedStyle(folderLeft).width, 10); + document.addEventListener('mousemove', resizeWidth); + document.addEventListener('mouseup', stopResize); + }); + } + } + } + + // Example function for handling 'click' on rows (if necessary) + handleRowClick(event: Event) { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + // Handle click action here if needed + } + + + + confirmDisplayFolderContents(folderId: number): void { + this.displayFolderContents(folderId); + } + + displayFolderContents(folderId: number, parentRow: HTMLTableRowElement | null = null): void { + const tableBody = this.elementRef.nativeElement.querySelector('.folder-contents tbody'); + if (tableBody) { + const rowsToRemove = parentRow + ? tableBody.querySelectorAll(`.child-of-folder-${folderId}`) + : tableBody.querySelectorAll('tr'); + rowsToRemove.forEach(row => row.remove()); + + const childFolders = this.folders.filter(folder => folder.parent_folder === folderId); + const childResults = this.results.filter(result => result.parent_folder === folderId); + const allChildFolders = [...childFolders, ...childResults]; + + allChildFolders.forEach(folder => { + const row = this.createFolderRowHTML(folder, folderId); + if (parentRow) { + parentRow.insertAdjacentElement('afterend', row); + } else { + tableBody.appendChild(row); + } + }); + + const childDocuments = this.documents.filter(doc => doc.folder_id === folderId); + childDocuments.forEach(doc => { + const row = this.createDocumentRowHTML(doc, folderId); + if (parentRow) { + parentRow.insertAdjacentElement('afterend', row); + } else { + tableBody.appendChild(row); + } + }); + + this.addRowEventListeners(); + } + } + + createFolderRowHTML(folder: Folders, parentId: number): HTMLElement { + const row = document.createElement('tr'); + row.classList.add(`child-of-folder-${parentId}`); + row.dataset.folderId = folder.id.toString(); + + const nameCell = document.createElement('td'); + const folderIcon = document.createElement('i'); + folderIcon.classList.add('fa-solid', 'fa-folder'); + const folderName = document.createElement('p'); + folderName.textContent = folder.name; + nameCell.appendChild(folderIcon); + nameCell.appendChild(folderName); + + const dateCell = document.createElement('td'); + dateCell.textContent = '11/10/2002'; // Placeholder date + + const typeCell = document.createElement('td'); + typeCell.textContent = 'File Folder'; + + const sizeCell = document.createElement('td'); + sizeCell.textContent = '2 KB'; // Placeholder size + + row.appendChild(nameCell); + row.appendChild(dateCell); + row.appendChild(typeCell); + row.appendChild(sizeCell); + + return row; + } + + createDocumentRowHTML(doc: Document, parentId: number): HTMLElement { + const row = document.createElement('tr'); + row.classList.add(`child-of-folder-${parentId}`); + row.dataset.documentId = doc.id.toString(); + + const nameCell = document.createElement('td'); + const fileIcon = document.createElement('i'); + fileIcon.classList.add('fa-solid', 'fa-file'); + const fileName = document.createElement('p'); + fileName.textContent = doc.filename; + nameCell.appendChild(fileIcon); + nameCell.appendChild(fileName); + + const dateCell = document.createElement('td'); + dateCell.textContent = '11/10/2002'; // Placeholder date + + const typeCell = document.createElement('td'); + typeCell.textContent = 'txt'; // Placeholder type + + const sizeCell = document.createElement('td'); + sizeCell.textContent = '2 KB'; // Placeholder size + + row.appendChild(nameCell); + row.appendChild(dateCell); + row.appendChild(typeCell); + row.appendChild(sizeCell); + + return row; + } + + createFolderHTML(folder: Folders): HTMLElement { const folderDiv = document.createElement('div'); folderDiv.classList.add('folder'); folderDiv.dataset.folderId = folder.id.toString(); - if (this.hasParentFolder(folder.id)) { - const keDiv = document.createElement('div'); - keDiv.classList.add('ke'); - folderDiv.appendChild(keDiv); - } - - if (parentDiv) { - parentDiv.appendChild(folderDiv); - folderDiv.style.marginLeft = '0px'; - } - const folderIcon = document.createElement('i'); folderIcon.classList.add('fa', 'fa-solid', 'fa-chevron-right'); + const folderIconFolder = document.createElement('i'); folderIconFolder.classList.add('fa', 'fa-solid', 'fa-folder'); @@ -132,8 +411,49 @@ export class ViewAllFolderComponent implements OnInit { childrenContainer.style.display = 'none'; folderDiv.appendChild(childrenContainer); + // Function to log folder chain recursively + const logFolderChainRecursive = (currentFolder: Folders, chain: string[] = []) => { + chain.unshift(currentFolder.id.toString()); // Prepend current folder id to the chain + + if (currentFolder.parent_folder) { + const parentFolder = this.findFolderById(currentFolder.parent_folder); + if (parentFolder) { + logFolderChainRecursive(parentFolder, chain); // Recursive call to log parent folder + } + } else { + console.log(`Clicked folder ${chain.join(' > ')}`); // Log the chain when reached the root folder + } + }; + + this.renderer.listen(folderHeader, 'click', () => { + logFolderChainRecursive(folder); // Start logging from the clicked folder + this.displayFolderContents(folder.id); + }); + + this.renderer.listen(folderIcon, 'click', (event: Event) => { + event.stopPropagation(); + if (childrenContainer.style.display === 'none') { + childrenContainer.style.display = 'block'; + folderIcon.style.transform = 'rotate(90deg)'; + folderIconFolder.classList.replace('fa-folder', 'fa-folder-open'); + } else { + childrenContainer.style.display = 'none'; + folderIcon.style.transform = ''; + folderIconFolder.classList.replace('fa-folder-open', 'fa-folder'); + } + }); + + // Recursively create HTML for child folders + const childFolders = this.folders.filter(f => f.parent_folder === folder.id); + childFolders.forEach(childFolder => { + const childFolderHTML = this.createFolderHTML(childFolder); + childrenContainer.appendChild(childFolderHTML); + }); + return folderDiv; - } +} + + createDocumentHTML(doc: Document): HTMLElement { const documentDiv = document.createElement('div'); @@ -151,80 +471,23 @@ export class ViewAllFolderComponent implements OnInit { return documentDiv; } - hasParentFolder(folderId: number): boolean { - return this.folders.some(folder => folder.parent_folder_id === folderId); - } - - findFolderById(folderId: number | null): Folders | undefined { + findFolderById(folderId: number): Folders | undefined { return this.folders.find(folder => folder.id === folderId); } findFolderDiv(folderId: number): HTMLElement | null { const foldersContainer = document.getElementById('folders-container'); - return foldersContainer?.querySelector(`.folder[data-folder-id="${folderId}"]`) as HTMLElement; + return foldersContainer?.querySelector(`.folder[data-folder-id="${folderId}"]`) as HTMLElement | null; } - addEventListeners(): void { - document.addEventListener('DOMContentLoaded', () => { - const folderLeft = document.getElementById('folderLeft'); - if (folderLeft) { - const resizeHandle = folderLeft.querySelector('.resize-handle') as HTMLElement | null; - if (resizeHandle) { - let startX: number, startWidth: number; - - resizeHandle.addEventListener('mousedown', (event: MouseEvent) => { - startX = event.clientX; - startWidth = parseInt(document.defaultView.getComputedStyle(folderLeft).width, 10); - - document.addEventListener('mousemove', resizeWidth); - document.addEventListener('mouseup', stopResize); - }); - - const resizeWidth = (event: MouseEvent) => { - const newWidth = startWidth + (event.clientX - startX); - folderLeft.style.width = newWidth + 'px'; - const folderRight = document.querySelector('.folder-right') as HTMLElement | null; - if (folderRight) { - folderRight.style.width = `calc(100% - ${newWidth}px)`; - } - }; - - const stopResize = () => { - document.removeEventListener('mousemove', resizeWidth); - document.removeEventListener('mouseup', stopResize); - }; - } - } - - // Handle folder open/close toggle - const folderCha = document.querySelectorAll('.folder-cha'); - if (folderCha.length > 0) { - folderCha.forEach(item => { - let isOpen = false; // Track whether folder is open or closed - const folderIcon = item.querySelector('.fa-folder'); - const chevronIcon = item.querySelector('.fa-chevron-right') as HTMLElement; - const folder = item.closest('.folder'); - const ke = folder.querySelector('.ke'); - - item.addEventListener('click', () => { - if (isOpen) { - const ke = folder.querySelector('.ke') as HTMLElement; - ke.style.display = 'none'; // Hide .ke when closing the folder - folderIcon.classList.remove('fa-folder-open' ) ; - folderIcon.classList.add('fa-folder'); - chevronIcon.style.transform = ''; // Reset chevron rotation - } else { - const ke = folder.querySelector('.ke') as HTMLElement; - ke.style.display = 'block'; // Show .ke when opening the folder - folderIcon.classList.remove('fa-folder'); - folderIcon.classList.add('fa-folder-open'); - chevronIcon.style.transform = 'rotate(90deg)'; // Rotate chevron - } - - isOpen = !isOpen; // Toggle isOpen state - }); - }); - } + addRowEventListeners(): void { + const folderRows = this.elementRef.nativeElement.querySelectorAll('tr[data-folder-id]'); + folderRows.forEach(row => { + this.renderer.listen(row, 'dblclick', (event: Event) => { + const target = event.currentTarget as HTMLTableRowElement; + const folderId = Number(target.dataset.folderId); + this.confirmDisplayFolderContents(folderId); + }); }); } -} +} \ No newline at end of file diff --git a/src-ui/src/app/data/folders.ts b/src-ui/src/app/data/folders.ts index 54790e66d..c94998512 100644 --- a/src-ui/src/app/data/folders.ts +++ b/src-ui/src/app/data/folders.ts @@ -10,7 +10,17 @@ export interface Folders extends MatchingModel { match: string; matching_algorithm: number; is_insensitive: boolean; - parent_folder_id: number | null; + parent_folder: number | null; + path: string; +} +export interface Results{ + id: number; + owner_id: number; + name: string; + match: string; + matching_algorithm: number; + is_insensitive: boolean; + parent_folder: number | null; path: string; } diff --git a/src-ui/src/app/services/rest/folders.service.ts b/src-ui/src/app/services/rest/folders.service.ts index 6f8105897..726a5d879 100644 --- a/src-ui/src/app/services/rest/folders.service.ts +++ b/src-ui/src/app/services/rest/folders.service.ts @@ -2,7 +2,7 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { AbstractNameFilterService } from './abstract-name-filter-service'; -import { Folders, Document } from 'src/app/data/folders'; +import { Folders, Document,Results } from 'src/app/data/folders'; import { environment } from 'src/environments/environment'; @Injectable({ @@ -11,6 +11,10 @@ import { environment } from 'src/environments/environment'; export class FoldersService extends AbstractNameFilterService { constructor(http: HttpClient) { super(http, 'folders'); + + } + getResults(): Observable<{results: Results[]}> { + return this.http.get<{results: Results[]}>(`${environment.apiBaseUrl}folders/`); } getFoldersAndDocuments(): Observable<{ folders: Folders[], documents: Document[] }> { diff --git a/src-ui/src/assets/css-folder/style.css b/src-ui/src/assets/css-folder/style.css new file mode 100644 index 000000000..b193e2dcf --- /dev/null +++ b/src-ui/src/assets/css-folder/style.css @@ -0,0 +1,339 @@ + +body { + overflow: hidden; +} +.folder-container { + width: 100%; + height: 100%; + display: flex; + z-index: 10000 !important; +} +.folder-container .folder-left { + width: 30%; + position: relative; + min-width: 100px; + height: 100vh; + overflow-x: auto; + overflow-y: auto; + background: rgba(37, 36, 36, 0.845); + display: flex; + align-items: center; + flex-direction: column; + overflow: hidden; +} +.resize-handle { + background-color: #f0f0f0; + cursor: ew-resize; + width: 2px; + height: 100%; + position: absolute; + right: 0; +} +.folder-container .folder-right { + width: 70%; + height: 100%; + overflow-y: auto; +} +.folder-left-1 { + width: 100%; + height: 30px; + display: flex; + align-items: center; + justify-content: center; +} +.folder-left-search { + width: 85%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + margin-top: 10px; + box-shadow: 0 0 3px 0 gold; +} +.folder-left-search .serch { + width: 90%; + height: 100%; + border-left: none; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; +} +.folder-left-search .serch:focus { + outline: none; +} +.serch:focus + .folder-left-search { + border: 5px solid gold; +} +.folder-left-search .search { + width: 10%; + height: 100%; + cursor: pointer; + border-right: none; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} +.folder{ + width: 95%; + height: auto; +} +#folders-container{ + margin-top: 20px; +} +.documents { + width: 95%; + height: auto; +} +.folder-cha{ + width: 100%; + height: auto; + display: flex; + align-items: center; + cursor: pointer; + text-align: left; +} +.folder-cha P{ + color: #f0f0f0; + text-align: center; + position: relative; + margin-bottom: 0; +} +.folder-cha .fa-solid{ + color: gold; + padding: 0 5px; +} +.folder-cha .fa-chevron-right{ + color: #f0f0f0; +} +.folder-cha .fa-folder{ + color: goldenrod; +} +.folder-con{ + width: 100%; + height: auto; + display: flex; + cursor: pointer; + + text-align: left; +} +.folder-con P{ + color: #f0f0f0; +} +.foder{ + width: 100%; + height: auto; + position: relative; + text-align: left; +} +.folder-con .fa-solid{ + color: gold; + padding: 0 5px; +} +.folder-con .fa-chevron-right{ + color: #f0f0f0; +} +.folder-con .fa-folder{ + color: goldenrod; +} +#folders-container{ + margin-left: -10%; +} +.docoment{ + width: 100%; + display: flex; + align-items: center; + text-align: left; +} +.docomenta, +.document-container{ + margin-left: 7%; +} + p{ + color: aliceblue; +} +.folder { + position: relative; + overflow: hidden; + padding-left: 20px; +} + +.folder .ke { + background: #f0f0f0; + width: 1px; + height: 180%; + z-index: 10000; + position: absolute; + left: 8.5%; + top: 60%; + display: none; + transform: translateY(-15%); +} +.folder-search{ + width: 100%; + height: 50px; + display: flex; + align-items: center; +} +.folder-right-tim{ + width: 60%; + height: 40px; + background: rgba(128, 128, 128, 0.534); + border-radius: 5px; + + margin-left: 10px; +} +.folder-right-search{ + width: 30%; + height: 40px; + background: rgba(128, 128, 128, 0.449); + border-radius: 5px; + margin-left: 50px; + display: flex; +} +.folder-right-search button{ + cursor: pointer; + padding: 11px 15px; + border-right: none; +} +.folder-right-search input{ + border-left: none; + width: 100%; +} +.folder-right-conten{ + width: 100%; + height: 100%; +} +table { + width: 100%; + border-collapse: collapse; + margin: 20px 0; + background-color: #fff; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} +table td{ + color: black; + border-left: 1px solid gray; + border-right: 1px solid gray; +} +table thead { + background-color: #007bff25; + color: #fff; +} + +table thead tr { + border-bottom: 1px solid #dee2e6; +} + +table thead td { + padding: 12px 15px; + text-align: left; + font-weight: bold; +} + +table tbody tr { + border-bottom: 1px solid #dee2e6; +} + +table tbody tr:nth-of-type(even) { + background-color: #f2f2f2; +} + +table tbody tr:hover { + background-color: #f1f1f1; +} + +table tbody td { + padding: 12px 15px; + text-align: left; + border: none; +} +table tbody tr td .fa-folder{ + color: gold; +} +table tbody tr td .fa-file{ + color: rgb(79, 58, 16); +} +tbody td p{ + color: black; +} + +table tbody td i { + margin-right: 8px; +} + +table tbody td p { + display: inline; + margin: 0; +} +.folder-cha:hover{ + background: rgb(87, 87, 205); +} +.folder-right-tim { + display: flex; + align-items: center; +} +.logo-folder, +.ten-folder{ + display: flex; + align-items: center; +} +.folder-right-tim .fa-folder{ + color: gold; + margin-left: 2%; +} +.folder-right-tim .fa-chevron-right{ + padding: 0 3px; + color: gray; +} +.logo-folder{ + margin-left: 2%; +} +.ten-folder p{ + color: black; +} +.sub-folder-container{ + width: 40%; + height: 50px; + background: darkcyan; + position: fixed; + z-index: 10000; + top: 0; + left: 30%; +} +.sub-folder-container form{ + display: flex; + flex-direction: column; +} +.sub-folder-container form input{ + height: 40px; + padding: 0 10px; + border: none; + border: 2px solid salmon; +} +.sub-folder-container form input:focus { + border-color: dodgerblue; + outline: none; +} +.addfolder{ + position: absolute; + background: grey; + width: 200px; + height: auto; + z-index: 10000; + border: 1px solid black; +} +#contextMenu{ + display: none; +} +.addfolder ul li{ + padding: 5px 5px; + list-style-type: none; + cursor: pointer; +} +.addfolder ul li a{ + text-decoration: none; +} +.addfolder ul li:hover{ + background: burlywood; +} +.folder-right{ + background-color: #fff; +} \ No newline at end of file diff --git a/src-ui/src/assets/css-folder/zomm.js b/src-ui/src/assets/css-folder/zomm.js new file mode 100644 index 000000000..8c7a1a264 --- /dev/null +++ b/src-ui/src/assets/css-folder/zomm.js @@ -0,0 +1,117 @@ +document.addEventListener("DOMContentLoaded", function() { + var folderLeft = document.getElementById('folderLeft'); + var folderright = document.getElementById('folderrightt'); + var folderContainer = document.querySelector('.folder-container'); + var zoom = document.getElementById("zoomImg"); + var contextMenu = document.getElementById("contextMenu"); + var toggleButton = document.getElementById("toggleButton"); + + var eventsEnabled = false; + + + var amButton = document.getElementById("am"); + var subFolderContainer = document.querySelector('.sub-folder-container'); + + amButton.addEventListener("click", function() { + + subFolderContainer.style.display = "block"; + + contextMenu.style.display = "none"; + + + var inputInSubFolder = subFolderContainer.querySelector('input[type="text"]'); + if (inputInSubFolder) { + inputInSubFolder.focus(); + } + + + var allInputs = document.querySelectorAll('input'); + allInputs.forEach(function(input) { + if (input !== inputInSubFolder) { + input.blur(); + } + }); + }); + document.getElementById('sss').addEventListener('click', function() { + var contextMenu1 = document.querySelector('.sub-folder-container'); + contextMenu1.style.display = 'none'; + }); + + + folderLeft.addEventListener('click', function() { + hideContextMenu(); + }); + + + folderLeft.addEventListener('contextmenu', function(event) { + event.preventDefault(); + showContextMenu(event.clientX, event.clientY); + }); + + + folderright.addEventListener('contextmenu', function(event) { + event.preventDefault(); + showContextMenu(event.clientX, event.clientY); + }); + + + document.addEventListener('mousedown', function(event) { + var targetElement = event.target; + + var clickedInsideContextMenu = contextMenu.contains(targetElement); + var clickedInsideFolderContainer = folderContainer.contains(targetElement); + var clickedInsideAddFolder = targetElement.classList.contains('addfolder') || targetElement.closest('.addfolder'); + var clickedInsideAm = targetElement.id === 'am' || targetElement.closest('#am'); + + if (!clickedInsideContextMenu && !clickedInsideAddFolder && !clickedInsideAm) { + hideContextMenu(); + } + + + if (clickedInsideAm) { + event.preventDefault(); + } + }); + + + toggleButton.addEventListener("click", function() { + toggleEvents(); + }); + + function showContextMenu(x, y) { + contextMenu.style.display = "block"; + contextMenu.style.left = x + "px"; + contextMenu.style.top = y + "px"; + } + + function hideContextMenu() { + contextMenu.style.display = "none"; + } + + function toggleEvents() { + eventsEnabled = !eventsEnabled; + if (eventsEnabled) { + zoom.addEventListener("contextmenu", handleContextMenu); + } else { + zoom.removeEventListener("contextmenu", handleContextMenu); + } + } + + function handleContextMenu(e) { + e.preventDefault(); + showContextMenu(e.clientX, e.clientY); + } + + + zoom.onmouseup = function () { + if (eventsEnabled) { + hideContextMenu(); + } + }; + + + zoom.onmousemove = function (e) { + + }; + +}); diff --git a/src-ui/src/index.html b/src-ui/src/index.html index 7096f2cbc..540096892 100644 --- a/src-ui/src/index.html +++ b/src-ui/src/index.html @@ -9,6 +9,7 @@ +