Skip to content

Commit

Permalink
Make project owner select work
Browse files Browse the repository at this point in the history
  • Loading branch information
@LightOfHeaven1994
LightOfHeaven1994 committed Apr 26, 2024
1 parent c368036 commit c0aec30
Showing 1 changed file with 123 additions and 47 deletions.
170 changes: 123 additions & 47 deletions frontend/src/pages/admin/project-edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,6 @@ import {
TextInputGroupUtilities,
Title
} from '@patternfly/react-core';
import {
Select as DeprecatedSelect,
SelectVariant as DeprecatedSelectVariant,
SelectOption as DeprecatedSelectOption
} from '@patternfly/react-core/deprecated';
import { Link } from 'react-router-dom';

import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
Expand Down Expand Up @@ -68,9 +63,12 @@ export class ProjectEdit extends React.Component {
id: props.params.id,
project: {},
users: [],
owner: {},
initUsers: [],
isOwnerOpen: false,
selectedOwner: {},
userFilter: '',
filterValueOwner: '',
inputValueOwner: '',
dashboards: [],
initDashboards: [],
isDashboardOpen: false,
Expand All @@ -80,6 +78,7 @@ export class ProjectEdit extends React.Component {
inputValueDashboard: '',
};
this.textInputRefDashboard = React.createRef();
this.textInputRefOwner = React.createRef();
}

onProjectNameChanged = (value) => {
Expand All @@ -95,8 +94,8 @@ export class ProjectEdit extends React.Component {
}

onSubmitClick = () => {
const { project, owner, selectedDashboard } = this.state;
project.owner_id = owner && owner.user ? owner.user.id : null;
const { project, selectedOwner, selectedDashboard } = this.state;
project.owner_id = selectedOwner ? selectedOwner.id : null;
project.default_dashboard_id = selectedDashboard ? selectedDashboard.id : null;
delete project.owner;
// delete project.defaultDashboard;
Expand All @@ -105,23 +104,34 @@ export class ProjectEdit extends React.Component {
.catch((error) => console.error(error));
};

onOwnerToggle = (isOpen) => {
this.setState({isOwnerOpen: isOpen});
onOwnerToggle = () => {
this.setState({isOwnerOpen: !this.state.isOwnerOpen});
};

onOwnerSelect = (event, value, isPlaceholder) => {
if (isPlaceholder) {
this.onOwnerClear();
}
else {
this.setState({owner: value, isOwnerOpen: false});
}
onDashboardToggle = () => {
this.setState({isDashboardOpen: !this.state.isDashboardOpen});
};

onOwnerInputChange = (_event, value) => {
this.setState({inputValueOwner: value});
this.setState({filterValueOwner: value});
};

onOwnerSelect = (event, value) => {
this.setState({
selectedOwner: value.user,
isOwnerOpen: false,
filterValueOwner: '',
inputValueOwner: value.user.name
});
this.textInputRefOwner.current?.focus();
};

onOwnerClear = () => {
this.setState({
owner: null,
isOwnerOpen: false
selectedOwner: null,
inputValueOwner: '',
filterValueOwner: ''
});
}

Expand All @@ -136,7 +146,8 @@ export class ProjectEdit extends React.Component {
return response.json();
})
.then(project => {
this.setState({project: project, owner: userToOption(project.owner),
this.setState({project: project, selectedOwner: project.owner,
inputValueOwner: project.owner?.name,
selectedDashboard: project.defaultDashboard,
inputValueDashboard: project.defaultDashboard?.title});
})
Expand All @@ -151,7 +162,7 @@ export class ProjectEdit extends React.Component {
this.setState({
selectedDashboard: value.dashboard,
isDashboardOpen: false,
setFilterValue: '',
filterValueDashboard: '',
inputValueDashboard: value.dashboard.title
});
this.textInputRefDashboard.current?.focus();
Expand Down Expand Up @@ -196,7 +207,7 @@ export class ProjectEdit extends React.Component {
response = HttpClient.handleResponse(response, 'response');
return response.json();
})
.then(data => this.setState({users: data.users}))
.then(data => this.setState({users: data.users, initUsers: data.users}))
.catch(error => console.error(error));
}

Expand Down Expand Up @@ -249,19 +260,77 @@ export class ProjectEdit extends React.Component {
dashboards: newSelectOptionsDashboard,
});
}

if (
prevState.filterValueOwner !== this.state.filterValueOwner
) {
let newSelectOptionsUser = this.state.initUsers;
if (this.state.inputValueOwner) {
newSelectOptionsUser = this.state.initUsers.filter(menuItem =>
String(menuItem.name).toLowerCase().includes(this.state.filterValueOwner.toLowerCase())
);
if (newSelectOptionsUser.length === 0) {
newSelectOptionsUser = [{
isDisabled: true,
value: {},
name: `No results found for "${this.state.filterValueOwner}"`,
}];
}

if (!this.state.isOwnerOpen) {
this.setState({ isOwnerOpen: true });
}
}

this.setState({
users: newSelectOptionsUser,
});
}
}


render() {
const { project, users, owner, dashboards, selectedDashboard, inputValueDashboard } = this.state;
const { project, users, selectedOwner, dashboards, selectedDashboard, inputValueDashboard, inputValueOwner } = this.state;

// const toggleOwner = toggleRef => (
// <MenuToggle
// innerRef={toggleRef}
// >

// </MenuToggle>
// )
const toggleOwner = toggleRef => (
<MenuToggle
innerRef={toggleRef}
variant="typeahead"
aria-label="Typeahead menu toggle"
onClick={this.onOwnerToggle}
isExpanded={this.state.isOwnerOpen}
isFullWidth
>
<TextInputGroup isPlain>
<TextInputGroupMain
value={inputValueOwner}
onClick={this.onOwnerToggle}
onChange={this.onOwnerInputChange}
id="typeahead-select-input"
autoComplete="off"
innerRef={this.textInputRefOwner}
placeholder="Select project owner"
role="combobox"
isExpanded={this.state.isOwnerOpen}
aria-controls="select-typeahead-listbox"
/>
<TextInputGroupUtilities>
{(!!inputValueOwner) && (
<Button
variant="plain"
onClick={() => {
this.onOwnerClear();
this.textInputRefOwner?.current?.focus();
}}
aria-label="Clear input value"
>
<TimesIcon aria-hidden />
</Button>
)}
</TextInputGroupUtilities>
</TextInputGroup>
</MenuToggle>
)

const toggleDashboard = toggleRef => (
<MenuToggle
Expand Down Expand Up @@ -349,22 +418,29 @@ export class ProjectEdit extends React.Component {
</FormHelperText>
</FormGroup>
<FormGroup fieldId="owner" label="Owner">
<DeprecatedSelect
variant={DeprecatedSelectVariant.typeahead}
typeAheadAriaLabel="Select user"
onToggle={(_event, isOpen) => this.onOwnerToggle(isOpen)}
onSelect={this.onOwnerSelect}
onClear={this.onOwnerClear}
onTypeaheadInputChanged={this.onOwnerChanged}
selections={owner}
isOpen={this.state.isOwnerOpen}
aria-labelledby="owner"
placeholderText="Select user"
>
{users.map(user => (
<DeprecatedSelectOption key={user.id} value={userToOption(user)} description={user.email} />
))}
</DeprecatedSelect>
<Select
id="typeahead-select-owner"
isOpen={this.state.isOwnerOpen}
selected={selectedOwner}
onSelect={this.onOwnerSelect}
onOpenChange={() => this.setState({isOwnerOpen: false})}
toggle={toggleOwner}
>
<SelectList id="select-typeahead-listbox">
{users.map((user, index) => (
<SelectOption
key={user.id || index}
onClick={() => this.setState({selectedOwner: user})}
value={userToOption(user)}
description={user.email}
isDisabled={user.isDisabled}
ref={null}
>
{user.name}
</SelectOption>
))}
</SelectList>
</Select>
<FormHelperText>
<HelperText>
<HelperTextItem>The user who owns the project</HelperTextItem>
Expand All @@ -387,7 +463,7 @@ export class ProjectEdit extends React.Component {
onClick={() => this.setState({selectedDashboard: dashboard})}
value={dashboardToOption(dashboard)}
description={dashboard.description}
{...dashboard}
isDisabled={dashboard.isDisabled}
ref={null}
>
{dashboard.title}
Expand Down

0 comments on commit c0aec30

Please sign in to comment.