mirror of
https://github.com/jupyterhub/jupyterhub.git
synced 2025-10-14 13:33:00 +00:00
Added changes for group properties editing
This commit is contained in:
vladfreeze
256
jsx/src/components/DynamicTable/DynamicTable.jsx
Normal file
256
jsx/src/components/DynamicTable/DynamicTable.jsx
Normal file
@@ -0,0 +1,256 @@
|
||||
import React, { useState } from "react";
|
||||
import "./table-select.css";
|
||||
|
||||
function hasDuplicates(array) {
|
||||
var valuesSoFar = Object.create(null);
|
||||
for (var i = 0; i < array.length; ++i) {
|
||||
var value = array[i];
|
||||
if (value in valuesSoFar) {
|
||||
return true;
|
||||
}
|
||||
valuesSoFar[value] = true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export default class DynamicTable extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.current_propobject = props.current_propobject;
|
||||
this.setProp = props.setProp;
|
||||
this.setPropKeys = props.setPropKeys;
|
||||
this.setPropValues = props.setPropValues;
|
||||
this.setChanged = props.setChanged;
|
||||
|
||||
let current_keys = [];
|
||||
let current_values = [];
|
||||
|
||||
for (var property in this.current_propobject) {
|
||||
current_keys.push(property);
|
||||
current_values.push(this.current_propobject[property]);
|
||||
}
|
||||
//current_keys = this.current_propobject.propkeys
|
||||
//current_values = this.current_propobject.propvalues
|
||||
|
||||
this.state = {
|
||||
message: "",
|
||||
message2: "",
|
||||
propkeys: current_keys,
|
||||
propvalues: current_values,
|
||||
propobject: "",
|
||||
};
|
||||
}
|
||||
|
||||
updateMessageKey(event) {
|
||||
this.setState({
|
||||
message: event.target.value,
|
||||
});
|
||||
}
|
||||
|
||||
updateMessageValue(event) {
|
||||
this.setState({
|
||||
message2: event.target.value,
|
||||
});
|
||||
}
|
||||
handleRefresh(i) {
|
||||
var propkeys = this.state.propkeys;
|
||||
var propvalues = this.state.propvalues;
|
||||
var propobject = {};
|
||||
propkeys.forEach((key, i) => (propobject[key] = propvalues[i]));
|
||||
|
||||
console.log(propobject);
|
||||
this.setProp(propobject);
|
||||
this.setPropKeys(propkeys);
|
||||
this.setPropValues(propvalues);
|
||||
this.setChanged(true);
|
||||
|
||||
this.setState({
|
||||
propkeys: propkeys,
|
||||
propvalues: propvalues,
|
||||
message: "",
|
||||
message2: "",
|
||||
propobject: propobject,
|
||||
});
|
||||
}
|
||||
handleClick() {
|
||||
var propkeys = this.state.propkeys;
|
||||
var propvalues = this.state.propvalues;
|
||||
if (this.state.message != "") {
|
||||
if (this.state.message2 != "") {
|
||||
propkeys.push(this.state.message);
|
||||
propvalues.push(this.state.message2);
|
||||
} else {
|
||||
console.log("Value not valid");
|
||||
}
|
||||
} else {
|
||||
console.log("Value not valid");
|
||||
}
|
||||
|
||||
var propobject = {};
|
||||
propkeys.forEach((key, i) => (propobject[key] = propvalues[i]));
|
||||
console.log(propobject);
|
||||
this.setProp(propobject);
|
||||
this.setPropKeys(propkeys);
|
||||
this.setPropValues(propvalues);
|
||||
this.setChanged(true);
|
||||
this.setState({
|
||||
propkeys: propkeys,
|
||||
propvalues: propvalues,
|
||||
message: "",
|
||||
message2: "",
|
||||
propobject: propobject,
|
||||
});
|
||||
}
|
||||
|
||||
handleValueChanged(i, event) {
|
||||
var propvalues = this.state.propvalues;
|
||||
var propkeys = this.state.propkeys;
|
||||
propvalues[i] = event.target.value;
|
||||
|
||||
this.handleRefresh();
|
||||
this.setPropKeys(propkeys);
|
||||
this.setPropValues(propvalues);
|
||||
this.setState({
|
||||
propvalues: propvalues,
|
||||
});
|
||||
}
|
||||
handleKeyChanged(i, event) {
|
||||
var propkeys = this.state.propkeys;
|
||||
|
||||
if (event.target.value != "") {
|
||||
propkeys[i] = event.target.value;
|
||||
}
|
||||
console.log(event.target.value);
|
||||
|
||||
if (event.target.value == "") {
|
||||
this.handleItemDeleted(i);
|
||||
}
|
||||
this.handleRefresh(i);
|
||||
this.setPropKeys(propkeys);
|
||||
this.setState({
|
||||
propkeys: propkeys,
|
||||
});
|
||||
}
|
||||
|
||||
handleItemDeleted(i) {
|
||||
var propvalues = this.state.propvalues;
|
||||
var propkeys = this.state.propkeys;
|
||||
|
||||
propvalues.splice(i, 1);
|
||||
propkeys.splice(i, 1);
|
||||
this.setPropKeys(propkeys);
|
||||
this.setPropValues(propvalues);
|
||||
this.handleRefresh(i);
|
||||
this.setState({
|
||||
propvalues: propvalues,
|
||||
propkeys: propkeys,
|
||||
});
|
||||
}
|
||||
|
||||
renderKeyRows() {
|
||||
var context = this;
|
||||
|
||||
return this.state.propkeys.map(function (o, i) {
|
||||
return (
|
||||
<tr key={"item-" + i}>
|
||||
<td>
|
||||
<input
|
||||
className="properties-table-keyvalues"
|
||||
type="text"
|
||||
value={o}
|
||||
id={o + i}
|
||||
onChange={context.handleKeyChanged.bind(context, i)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
renderValueRows() {
|
||||
var context = this;
|
||||
|
||||
return this.state.propvalues.map(function (o, i) {
|
||||
return (
|
||||
<tr key={"item-" + i}>
|
||||
<td>
|
||||
<input
|
||||
className="properties-table-keyvalues"
|
||||
type="text"
|
||||
value={o}
|
||||
onChange={context.handleValueChanged.bind(context, i)}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
renderDelete() {
|
||||
var context = this;
|
||||
|
||||
return this.state.propvalues.map(function (o, i) {
|
||||
return (
|
||||
<tr key={"item-" + i}>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
onClick={context.handleItemDeleted.bind(context, i)}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<table className="">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{this.renderKeyRows()}</td>
|
||||
<td>{this.renderValueRows()}</td>
|
||||
<td>{this.renderDelete()}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<form>
|
||||
<tr>
|
||||
<td>
|
||||
<input
|
||||
className="properties-table"
|
||||
type="text"
|
||||
value={this.state.message}
|
||||
onChange={this.updateMessageKey.bind(this)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
className="properties-table"
|
||||
type="text"
|
||||
value={this.state.message2}
|
||||
onChange={this.updateMessageValue.bind(this)}
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
className="btn btn-default"
|
||||
onClick={this.handleClick.bind(this)}
|
||||
>
|
||||
Add Item
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
<hr />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
64
jsx/src/components/DynamicTable/table-select.css
Normal file
64
jsx/src/components/DynamicTable/table-select.css
Normal file
@@ -0,0 +1,64 @@
|
||||
@import url(../../style/root.css);
|
||||
|
||||
.properties-table {
|
||||
width: 95%;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.properties-table-keyvalues {
|
||||
width: 95%;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.properties-table div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.properties-table-keyvalues .item {
|
||||
padding: 3px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
border-radius: 1px;
|
||||
font-size: 14px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
transition: 30ms ease-in all;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: solid 1px #dfdfdf;
|
||||
}
|
||||
|
||||
.properties-table .item {
|
||||
padding: 3px;
|
||||
padding-left: 2px;
|
||||
padding-right: 2px;
|
||||
border-radius: 1px;
|
||||
font-size: 14px;
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
transition: 30ms ease-in all;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
border: solid 1px #dfdfdf;
|
||||
}
|
||||
|
||||
.properties-table .item.unselected {
|
||||
background-color: #f7f7f7;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.properties-table .item.selected {
|
||||
background-color: orange;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.properties-table .item:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.boxed {
|
||||
border: 1px solid red;
|
||||
}
|
||||
Reference in New Issue
Block a user