Skip to content

Commit

Permalink
Update the components in the dialog and add the logics to properly re…
Browse files Browse the repository at this point in the history 
…nder them.
  • Loading branch information
@HaudinFlorence
HaudinFlorence committed Nov 3, 2023
1 parent 127b7df commit 781da3a
Show file tree
Hide file tree
Showing 3 changed files with 334 additions and 64 deletions.
276 changes: 222 additions & 54 deletions src/drivelistmanager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,92 +2,260 @@ import * as React from 'react';
import { VDomModel, VDomRenderer } from '@jupyterlab/ui-components';
import {
Button,
/*DataGrid,
DataGrid,
DataGridCell,
DataGridRow,*/
DataGridRow,
Search
} from '@jupyter/react-components';
import { useState } from 'react';

interface IProps {
model: DriveListModel;
}
export interface IDrive {
name: string;
url: string;
}

/*export function CustomDataGrid() {
export interface IDriveInputProps {
value: string;
getValue: (event: any) => void;
updateSelectedDrives: (item: string) => void;
}
export function DriveInputComponent(props: IDriveInputProps) {
return (
<div>
<div className="row">
<div className="column">
<Search className="drive-search-input" onInput={props.getValue} />
</div>
<div className="column"></div>
<Button
className="input-add-drive-button"
onClick={() => {
props.updateSelectedDrives(props.value);
}}
>
add drive
</Button>
</div>
</div>
);
}
interface ISearchListProps {
filteredList: Array<string>;
filter: (value: any) => void;
updateSelectedDrives: (item: string) => void;
}

export function DriveSearchListComponent(props: ISearchListProps) {
return (
<div className="drive-search-list">
<div className="row">
<div className="column">
<Search className="drive-search-input" onInput={props.filter} />
</div>
<div className="column"></div>
</div>
{props.filteredList.map((item, index) => (
<li key={item}>
<div className="row">
<div className="column">
<div>{item} </div>
</div>
<div className="column">
<Button
className="search-add-drive-button"
onClick={() => {
props.updateSelectedDrives(item);
}}
>
add drive
</Button>
</div>
</div>
</li>
))}
</div>
);
}
interface IDriveDataGridProps {
drives: IDrive[];
}

export function DriveDataGridComponent(props: IDriveDataGridProps) {
return (
<div id="data-grid-added-drives">
<DataGrid grid-template-columns= "1f 1fr" >
<div className="drive-data-grid">
<DataGrid grid-template-columns="1f 1fr">
<DataGridRow row-type="header">
<DataGridCell grid-column="1">Header 1</DataGridCell>
<DataGridCell grid-column="2">Header 2</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell grid-column="1">1.1</DataGridCell>
<DataGridCell grid-column="2">1.2</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell grid-column="1">2.1</DataGridCell>
<DataGridCell grid-column="2">2.2</DataGridCell>
<DataGridCell className="data-grid-cell" grid-column="1">
<b> name </b>
</DataGridCell>
<DataGridCell className="data-grid-cell" grid-column="2">
<b> url </b>
</DataGridCell>
</DataGridRow>

{props.drives.map((item, index) => (
<li key={item.name}>
<DataGridRow row-type="default">
<DataGridCell className="data-grid-cell" grid-column="1">
{item.name}
</DataGridCell>
<DataGridCell className="data-grid-cell" grid-column="2">
{item.url}
</DataGridCell>
</DataGridRow>
</li>
))}
</DataGrid>
</div>
);
}*/
}

export function DriveListManagerComponent(props: IProps) {
const [driveUrl, setDriveUrl] = useState('');
const [driveName, setDriveName] = useState('');
let updatedSelectedDrives = [...props.model.selectedDrives];
const [selectedDrives, setSelectedDrives] = useState(updatedSelectedDrives);

const nameList: Array<string> = [];

export function DriveListComponent(props: IProps) {
const { model } = props;
const [filteredList, setFilteredList] = useState(['']);
for (const item of props.model.availableDrives) {
if (item.name !== '') {
nameList.push(item.name);
}
}
const [nameFilteredList, setNameFilteredList] = useState(nameList);

const isDriveAlreadySelected = (pickedDrive: IDrive, driveList: IDrive[]) => {
const isbyNameIncluded: boolean[] = [];
const isbyUrlIncluded: boolean[] = [];
let isIncluded: boolean = false;
driveList.forEach(item => {
if (pickedDrive.name !== '' && pickedDrive.name === item.name) {
isbyNameIncluded.push(true);
} else {
isbyNameIncluded.push(false);
}
if (pickedDrive.url !== '' && pickedDrive.url === item.url) {
isbyUrlIncluded.push(true);
} else {
isbyUrlIncluded.push(false);
}
});

const filterBySearch = (event: any) => {
if (isbyNameIncluded.includes(true) || isbyUrlIncluded.includes(true)) {
isIncluded = true;
}

return isIncluded;
};

const updateDrivesSelectedByName = (item: string) => {
updatedSelectedDrives = [...props.model.selectedDrives];
const pickedDrive: IDrive = { name: driveName, url: '' };
const checkDrive = isDriveAlreadySelected(
pickedDrive,
updatedSelectedDrives
);
if (checkDrive === false) {
updatedSelectedDrives.push(pickedDrive);
} else {
console.log('The selected drive is already in the list');
}

setSelectedDrives(updatedSelectedDrives);
props.model.selectedDrives = updatedSelectedDrives;
};

const updateDrivesSelectedByUrl = (item: string) => {
updatedSelectedDrives = [...props.model.selectedDrives];
if (item !== driveUrl) {
setDriveUrl(item);
}

const pickedDrive: IDrive = { name: '', url: driveUrl };
const checkDrive = isDriveAlreadySelected(
pickedDrive,
updatedSelectedDrives
);
if (checkDrive === false) {
updatedSelectedDrives.push(pickedDrive);
} else {
console.log('The selected drive is already in the list');
}

setSelectedDrives(updatedSelectedDrives);
props.model.selectedDrives = updatedSelectedDrives;
};

const getValue = (event: any) => {
setDriveUrl(event.target.value);
};

const filter = (event: any) => {
const query = event.target.value;
let updatedList = [...model.driveList];
let updatedList: Array<string>;

updatedList = [...nameList];
updatedList = updatedList.filter(item => {
return item.toLowerCase().indexOf(query.toLowerCase()) !== -1;
});
setFilteredList(updatedList);
console.log('updatedList:', updatedList);
};

const addDriveToTree = (item: string) => {
const list: Array<string> = [];
list.push(item);
console.log('list is:', list);
setNameFilteredList(updatedList);
if (nameFilteredList.length === 1 && nameFilteredList[0] !== '') {
setDriveName(nameFilteredList[0]);
setDriveUrl('');
}
};

return (
<div>
<div className="jp-AddDrive-Header">
<h3> Add drives to your filebrowser </h3>
</div>
<p> Enter a driveUrl </p>
<Search />
<p>Select drive(s) from list</p>
<Search onInput={filterBySearch} />

<div id="item-list">
<ol>
{filteredList.map((item, index) => (
<li key={index}>
{item}
<Button onClick={() => addDriveToTree(item)} type="submit">
add drive
</Button>
</li>
))}
</ol>
<>
<div className="drive-list-manager">
<div>
<h3> Select drive(s) to be added to your filebrowser </h3>
</div>
<div className="row">
<div className="column">
<label> Enter a drive URL</label>
<label> </label>
<DriveInputComponent
value={driveUrl}
getValue={getValue}
updateSelectedDrives={updateDrivesSelectedByUrl}
/>

<label> Select drive(s) from list</label>
<label> </label>
<DriveSearchListComponent
filteredList={nameFilteredList}
filter={filter}
updateSelectedDrives={updateDrivesSelectedByName}
/>
</div>

<div className="column">
<div className="jp-custom-datagrid">
<label> Selected drives </label>
<label> </label>
<DriveDataGridComponent drives={selectedDrives} />
</div>
</div>
</div>
</div>
</div>
</>
);
}

export class DriveListModel extends VDomModel {
public driveList: string[];
public availableDrives: IDrive[];
public selectedDrives: IDrive[];

constructor(driveList: string[]) {
constructor(availableDrives: IDrive[], selectedDrives: IDrive[]) {
super();
this.driveList = driveList;

this.availableDrives = availableDrives;
this.selectedDrives = selectedDrives;
}
}

Expand All @@ -99,7 +267,7 @@ export class DriveListView extends VDomRenderer<DriveListModel> {
render() {
return (
<>
<DriveListComponent model={this.model} />
<DriveListManagerComponent model={this.model} />
</>
);
}
Expand Down
Loading

0 comments on commit 781da3a

Please sign in to comment.