Skip to content

Commit

Permalink
filemanager v6.0.22
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Nov 22, 2023
1 parent c44bafa commit 1a6512c
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 42 deletions.
14 changes: 14 additions & 0 deletions src/app/system-apps/filemanager/file.manager.validator.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import {AbstractControl, ValidatorFn} from '@angular/forms';

export class CustomValidator{

static invalidCharacters(): ValidatorFn {
return(c: AbstractControl): {[key: string]: boolean } | null =>{
const invalidChars:string[] = ['#','%','&','{','}','|','\\','<','>','*','?','/','','$','!',"'",'"',':','@','+','`','=']
if(!invalidChars.includes(c.value)){
return {'value': true}
}
return null;
}
}
}
23 changes: 16 additions & 7 deletions src/app/system-apps/filemanager/filemanager.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,17 +135,26 @@ span.tail{
min-width: 18px;
}


.rename-textbox{
position: relative;
display: none;
top: 2px;
margin-bottom: 2px;
max-width: 75px;
max-height: 16px;
border: 1px solid #333;
font-size: 11.5px;
z-index: 3;
border: 1px solid #ccc;
overflow:hidden;
display: none;
text-align: center;
}
z-index: 2;
}

input {
text-align:calc(75px / 2 px);
font-size: 11.5px;
/* text-overflow:ellipsis; */
padding-left: 4px;
}

input::selection{
background-color: #0056b3;
color: #fff;
}
14 changes: 7 additions & 7 deletions src/app/system-apps/filemanager/filemanager.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
<ol (dragover)="onDragOver($event)" (drop)="onDrop($event)" (click)="hideIconContextMenu()" #myBounds>
<ol (dragover)="onDragOver($event)" (drop)="onDrop($event)" (click)="onHideIconContextMenu()" #myBounds>
<li *ngFor="let file of files; let i = index">
<button fileMngrHighlight (dblclick)="runProcess(file)"
<button (dblclick)="runProcess(file)" (mouseenter)="onMouseEnter(i)" (mouseleave)="onMouseLeave(i)"
ngDraggable [bounds]="myBounds" [inBounds]="true" [gridSize]="gridSize" zIndex="1" [preventDefaultEvent]="true"
(stopped)="onDragEnd($event)" (started)="onDragStart($event)"
(contextmenu)="showIconContextMenu($event, file, i)"
(contextmenu)="onShowIconContextMenu($event, file, i)"
id="iconBtn{{i}}" [style]="btnStyle">
<figure>
<img [src]="file.getIconPath | safeResourceUrl" [alt]="file.getFileName" [style]="iconSizeStyle"/>
<figcaption id="figCap{{i}}">
{{file.getFileName}}
</figcaption>
<div class="rename-textbox" id="renameContainer{{i}}">
<form [formGroup]="renameForm" (ngSubmit)="renameFile()">
<form [formGroup]="renameForm" (ngSubmit)="isFormDirty()">
<input type="text" formControlName="renameInput" autofocus spellcheck="false" id="renameTxtBox{{i}}"/>
</form>
</div>
Expand All @@ -23,7 +23,7 @@
<div class="icon-vertical-menu" [style]="iconCntxtMenuStyle">
<div class="empty-line-container"></div>

<div class="icon-vertical-menu-item" (click)="triggerRunProcess()">
<div class="icon-vertical-menu-item" (click)="onTriggerRunProcess()">
<span class="span head"> <figure class="figure-cntxt-menu"> </figure></span>
<span class="span mid" style="font-weight: bold;">Open</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
Expand All @@ -45,13 +45,13 @@
<div class="line-container"><div class="line"></div></div>
<div class="empty-line-container"></div>

<div class="icon-vertical-menu-item"(click)="deleteFile()">
<div class="icon-vertical-menu-item"(click)="onDeleteFile()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Delete</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
</div>

<div class="icon-vertical-menu-item" (click)="triggerRenameFile()">
<div class="icon-vertical-menu-item" (click)="onTriggerRenameFileStep1()">
<span class="span head"> <figure class="figure-cntxt-menu" > </figure></span>
<span class="span mid">Rename</span>
<span class="span tail"> <figure class="figure-cntxt-menu"> </figure> </span>
Expand Down
136 changes: 108 additions & 28 deletions src/app/system-apps/filemanager/filemanager.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { FileInfo } from 'src/app/system-files/fileinfo';
import { Subscription } from 'rxjs';
import { TriggerProcessService } from 'src/app/shared/system-service/trigger.process.service';
import { FileManagerService } from 'src/app/shared/system-service/file.manager.services';
import { FormGroup, FormBuilder } from '@angular/forms';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CustomValidator } from './file.manager.validator';

@Component({
selector: 'cos-filemanager',
Expand Down Expand Up @@ -54,11 +55,16 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
private autoArrange = false;
private showDesktopIcon = true;

isFormSubmitted = false;
isRenameActive = false;
isIconHighlightActive = false;
private selectedFile!:FileInfo;
renameForm!: FormGroup;
elementId = -1;

hideCntxtMenuEvtCnt = 0; // this is a dirty solution
renameFileTriggerCnt = 0; // this is a dirty solution


constructor( processIdService:ProcessIDService, runningProcessService:RunningProcessService, fileInfoService:FileService, triggerProcessService:TriggerProcessService, fileManagerService:FileManagerService, formBuilder: FormBuilder,) {
this._processIdService = processIdService;
Expand All @@ -82,20 +88,21 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
ngOnInit():void{

this.renameForm = this._formBuilder.nonNullable.group({
renameInput: '',
renameInput: ['',[Validators.required, CustomValidator.invalidCharacters()]],
});

if(this.folderPath === '')
this.directory = '/osdrive/desktop';
else
this.directory = `/${this.folderPath}`;

this.hideIconContextMenu();
this.onHideIconContextMenu();
}

async ngAfterViewInit():Promise<void>{
await this.loadFilesInfoAsync();
}


ngOnDestroy(): void {
this._viewByNotifySub?.unsubscribe();
Expand Down Expand Up @@ -153,13 +160,12 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
}
}

triggerRunProcess():void{
onTriggerRunProcess():void{
this.runProcess(this.selectedFile);
this.hideIconContextMenu();
}


showIconContextMenu(evt:MouseEvent, file:FileInfo, id:number):void{
onShowIconContextMenu(evt:MouseEvent, file:FileInfo, id:number):void{
this.elementId = id;
this._runningProcessService.responseToEventCount++;
this.selectedFile = file;
Expand All @@ -174,7 +180,7 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
evt.preventDefault();
}

hideIconContextMenu():void{
onHideIconContextMenu():void{
this.iconCntxtMenuStyle = {
'width': '0px',
'height': '0px',
Expand All @@ -183,8 +189,14 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
'opacity':0
}

// if(this.isRenameActive)
// this.renameFile();
this.hideCntxtMenuEvtCnt++;

if(this.isRenameActive){
//this.isFormDirty();
}
if(this.isIconHighlightActive){
this.iconWasInfocus();
}
}

onDragStart(evt:any):void{
Expand Down Expand Up @@ -213,6 +225,25 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
1
}

onMouseEnter(id:number):void{
const btnElement = document.getElementById(`iconBtn${id}`) as HTMLElement;
if(btnElement){
btnElement.style.backgroundColor = 'hsl(206deg 77% 70%/20%)';
btnElement.style.border = '2px solid hsla(0,0%,50%,25%)'
}
}

onMouseLeave(id:number):void{
const btnElement = document.getElementById(`iconBtn${id}`) as HTMLElement;
if(id != this.elementId){
if(btnElement){
btnElement.style.backgroundColor = 'transparent';
btnElement.style.border = 'none'
}
}else if((id == this.elementId) && this.isIconHighlightActive){
this.iconWasInfocus();
}
}

sortIcons(sortBy:string): void {
if(sortBy === "Size"){
Expand Down Expand Up @@ -290,20 +321,43 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
1
}

deleteFile():void{
//this.deletedFiles.push(this.selectedFile);
onDeleteFile():void{
this._fileService.deleteFileAsync(this.selectedFile.getCurrentPath)
}

isFormDirty(): void {
// form is not dirty and not submitted

console.log('this.isFormSubmitted :',this.isFormSubmitted);
console.log('this.renameForm.dirty :',this.renameForm.dirty );
console.log('this.renameForm.valid :',this.renameForm.valueChanges );

if (this.renameForm.dirty == true && this.renameForm.valid){
console.log('nothing changed')
} else if (this.renameForm.dirty == false){
this.renameFileTriggerCnt ++;

if(this.renameFileTriggerCnt > 1){
// the first trigger is a false
console.log('nothing changed 2')
// hide renameText box and show figCaption
this.untriggerRenameFile();

this.renameFileTriggerCnt = 0;
this.hideCntxtMenuEvtCnt = 0;
}

//return false;
}


// form is dirty and not submitted
//return true;

// this.files = this.files.filter((files_el) =>{
// return this.deletedFiles.filter(function(delFiles_el){
// return delFiles_el.getCurrentPath !== files_el.getCurrentPath;
// }).length == 0
// });

this.hideIconContextMenu();
}

triggerRenameFile():void{
onTriggerRenameFileStep1():void{
this.isRenameActive = !this.isRenameActive;

const figCapElement= document.getElementById(`figCap${this.elementId}`) as HTMLElement;
Expand All @@ -318,30 +372,25 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
renameContainerElement.style.display = 'block';

this.renameForm.setValue({
renameInput:' '+ this.selectedFile.getFileName
renameInput:this.selectedFile.getFileName
})

renameTxtBoxElement?.focus();
renameTxtBoxElement?.select();
}

this.hideIconContextMenu();
}

renameFile():void{
onTriggerRenameFileStep2():void{

const btnElement = document.getElementById(`iconBtn${this.elementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap${this.elementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.elementId}`) as HTMLElement;

const renameText = this.renameForm.value.renameInput as string
console.log('I will change the File Name to this:', this.renameForm.value.renameInput);

if( renameText === '' || renameText.trimStart().length == 0)
if( renameText === '' || renameText.length == 0)
return;

this._fileService.renameFileAsync(this.selectedFile.getCurrentPath, renameText.trimStart());

this._fileService.renameFileAsync(this.selectedFile.getCurrentPath, renameText);

if(btnElement){
btnElement.style.backgroundColor = 'hsl(206deg 77% 70%/20%)';
Expand All @@ -356,7 +405,38 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy {
renameContainerElement.style.display = 'none';
}

this.elementId = -1;
//this.elementId = -1;
}

untriggerRenameFile():void{
this.isRenameActive = !this.isRenameActive;

const btnElement = document.getElementById(`iconBtn${this.elementId}`) as HTMLElement;
const figCapElement= document.getElementById(`figCap${this.elementId}`) as HTMLElement;
const renameContainerElement= document.getElementById(`renameContainer${this.elementId}`) as HTMLElement;

if(figCapElement){
figCapElement.style.display = 'block';
}
if(renameContainerElement){
renameContainerElement.style.display = 'none';
}
if(btnElement){
btnElement.style.backgroundColor = 'hsl(206deg 77% 70%/20%)';
btnElement.style.border = '2px solid hsla(0,0%,50%,25%)'
this.isIconHighlightActive = true;
}
}

iconWasInfocus():void{
const btnElement = document.getElementById(`iconBtn${this.elementId}`) as HTMLElement;

if(this.hideCntxtMenuEvtCnt >= 1){
if(btnElement){
btnElement.style.backgroundColor = 'transparent';
btnElement.style.border = '1px dotted white'
}
}
}


Expand Down

0 comments on commit 1a6512c

Please sign in to comment.