mirror of
https://github.com/urbit/shrub.git
synced 2024-11-24 04:58:08 +03:00
groups: incorporate group filter component
This commit is contained in:
Matilde Park
parent
612a88272f
commit
8335ae059c
@ -167,6 +167,6 @@ a {
|
||||
border-color: #fff;
|
||||
}
|
||||
.hover-bg-gray1-d:hover {
|
||||
color: #4d4d4d;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
}
|
||||
@ -191,6 +191,16 @@ class UrbitApi {
|
||||
})
|
||||
}
|
||||
|
||||
setSelected(selected) {
|
||||
store.handleEvent({
|
||||
data: {
|
||||
local: {
|
||||
selected: selected
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export let api = new UrbitApi();
|
||||
|
||||
232
pkg/interface/groups/src/js/components/lib/group-filter.js
Normal file
232
pkg/interface/groups/src/js/components/lib/group-filter.js
Normal file
@ -0,0 +1,232 @@
|
||||
import React, { Component } from 'react'
|
||||
|
||||
export class GroupFilter extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
open: false,
|
||||
selected: [],
|
||||
groups: [],
|
||||
searchTerm: "",
|
||||
results: []
|
||||
}
|
||||
this.toggleOpen = this.toggleOpen.bind(this);
|
||||
this.handleClickOutside = this.handleClickOutside.bind(this);
|
||||
this.groupIndex = this.groupIndex.bind(this);
|
||||
this.search = this.search.bind(this);
|
||||
this.addGroup = this.addGroup.bind(this);
|
||||
this.deleteGroup = this.deleteGroup.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('mousedown', this.handleClickOutside);
|
||||
this.groupIndex();
|
||||
let selected = localStorage.getItem("urbit-selectedGroups");
|
||||
if (selected) {
|
||||
this.setState({selected: JSON.parse(selected)}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('mousedown', this.handleClickOutside);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
if (prevProps !== this.props) {
|
||||
this.groupIndex();
|
||||
}
|
||||
}
|
||||
|
||||
handleClickOutside(evt) {
|
||||
if ((this.dropdown && !this.dropdown.contains(evt.target))
|
||||
&& (this.toggleButton && !this.toggleButton.contains(evt.target))) {
|
||||
this.setState({ open: false });
|
||||
}
|
||||
}
|
||||
|
||||
toggleOpen() {
|
||||
this.setState({open: !this.state.open});
|
||||
}
|
||||
|
||||
groupIndex() {
|
||||
const { props, state } = this;
|
||||
let index = [];
|
||||
let associations = !!props.associations ? props.associations : {};
|
||||
index = Object.keys(associations).map((each) => {
|
||||
let eachGroup = [];
|
||||
eachGroup.push(each);
|
||||
let name = each;
|
||||
let groupPath = `${each}/contacts${each}`;
|
||||
if (associations[each][groupPath] && associations[each][groupPath].metadata) {
|
||||
name = (associations[each][groupPath].metadata.title !== "")
|
||||
? associations[each][groupPath].metadata.title : name;
|
||||
}
|
||||
eachGroup.push(name);
|
||||
return eachGroup;
|
||||
});
|
||||
this.setState({groups: index})
|
||||
}
|
||||
|
||||
search(evt) {
|
||||
this.setState({searchTerm: evt.target.value});
|
||||
let term = evt.target.value.toLowerCase();
|
||||
|
||||
if (term.length < 3) {
|
||||
return this.setState({results: []})
|
||||
}
|
||||
|
||||
let groupMatches = [];
|
||||
groupMatches = this.state.groups.filter(e => {
|
||||
return (e[0].includes(term) || e[1].includes(term));
|
||||
});
|
||||
this.setState({results: groupMatches});
|
||||
}
|
||||
|
||||
addGroup(group) {
|
||||
let selected = this.state.selected;
|
||||
if (!(group in selected)) {
|
||||
selected.push(group);
|
||||
}
|
||||
this.setState({
|
||||
searchTerm: "",
|
||||
selected: selected,
|
||||
results: []
|
||||
}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
|
||||
}))
|
||||
}
|
||||
|
||||
deleteGroup(group) {
|
||||
let selected = this.state.selected;
|
||||
selected = selected.filter(e => {
|
||||
return e !== group;
|
||||
});
|
||||
this.setState({selected: selected}, (() => {
|
||||
window.api.setSelected(this.state.selected);
|
||||
localStorage.setItem("urbit-selectedGroups", JSON.stringify(this.state.selected));
|
||||
}))
|
||||
}
|
||||
|
||||
render() {
|
||||
const { props, state } = this;
|
||||
|
||||
let currentGroup = "All Groups";
|
||||
|
||||
if (state.selected.length > 0) {
|
||||
let titles = state.selected.map((each) => {
|
||||
return each[1];
|
||||
})
|
||||
currentGroup = titles.join(" + ");
|
||||
}
|
||||
|
||||
let buttonOpened = (state.open)
|
||||
? "bg-gray5 bg-gray1-d white-d" : "hover-bg-gray5 hover-bg-gray1-d white-d";
|
||||
|
||||
let dropdownClass = (state.open)
|
||||
? "absolute db z-2 bg-white bg-gray0-d white-d ba b--gray3 b--gray1-d"
|
||||
: "dn";
|
||||
|
||||
let inviteCount = (props.invites && props.invites.length > 0)
|
||||
? <template className="dib fr">
|
||||
<p className="dib bg-green2 bg-gray2-d white fw6 ph1 br1 v-mid" style={{ marginBottom: 2 }}>
|
||||
{props.invites.length}
|
||||
</p>
|
||||
<span className="dib v-mid ml1">
|
||||
<img
|
||||
className="v-mid"
|
||||
src="/~launch/img/Chevron.png"
|
||||
style={{ height: 16, width: 16, paddingBottom: 1 }}
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
: <template className="dib fr">
|
||||
<span className="dib v-top ml1">
|
||||
<img className="v-mid"
|
||||
src="/~launch/img/Chevron.png"
|
||||
style={{ height: 16, width: 16, paddingBottom: 1 }}
|
||||
/>
|
||||
</span>
|
||||
</template>;
|
||||
|
||||
let selectedGroups = <div/>
|
||||
let searchResults = <div/>
|
||||
|
||||
if (state.results.length > 0) {
|
||||
let groupResults = state.results.map((group => {
|
||||
return(
|
||||
<li
|
||||
key={group[0]}
|
||||
className="tl list white-d f9 pv2 ph3 pointer hover-bg-gray4 hover-bg-gray1-d inter" onClick={() => this.addGroup(group)}>
|
||||
<span className="mix-blend-diff white">{(group[1]) ? group[1] : group[0]}</span>
|
||||
</li>
|
||||
)
|
||||
}))
|
||||
searchResults = (
|
||||
<div className={"tl absolute bg-white bg-gray0-d white-d pv3 z-1 w-100 ba b--gray4 b--white-d overflow-y-scroll"} style={{maxWidth: "15.67rem", maxHeight: "8rem"}}>
|
||||
<p className="f9 tl gray2 ph3 pb2">Groups</p>
|
||||
{groupResults}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (state.selected.length > 0) {
|
||||
let allSelected = this.state.selected.map((each) => {
|
||||
let name = each[1];
|
||||
return(
|
||||
<span
|
||||
key={each[0]}
|
||||
className={"f9 inter black pa2 bg-gray5 bg-gray1-d " +
|
||||
"ba b--gray4 b--gray2-d white-d dib mr2 mt2 c-default"}
|
||||
>
|
||||
{name}
|
||||
<span
|
||||
className="white-d ml3 mono pointer"
|
||||
onClick={e => this.deleteGroup(each)}>
|
||||
x
|
||||
</span>
|
||||
</span>
|
||||
)
|
||||
})
|
||||
selectedGroups = (
|
||||
<div className={
|
||||
"f9 gray2 bb bl br b--gray3 b--gray2-d bg-gray0-d " +
|
||||
"white-d pa3 db w-100 inter bg-gray5 lh-solid tl"
|
||||
} style={{width: 253}}>
|
||||
{allSelected}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ml1 dib">
|
||||
<div className={buttonOpened}
|
||||
onClick={() => this.toggleOpen()}
|
||||
ref={(el) => this.toggleButton = el}>
|
||||
<p className="dib f9 pointer pa1 mw5 truncate v-mid">{currentGroup}</p>
|
||||
</div>
|
||||
<div className={dropdownClass}
|
||||
style={{ maxHeight: "24rem", width: 285 }}
|
||||
ref={(el) => { this.dropdown = el }}>
|
||||
<p className="tc bb b--gray3 b--gray1-d gray3 pv4 f9">Group Select and Filter</p>
|
||||
<a href="/~groups" className="ma4 bg-gray5 bg-gray1-d f9 tl pa1 br1 db no-underline" style={{paddingLeft: "6.5px", paddingRight: "6.5px"}}>Manage all Groups
|
||||
{inviteCount}
|
||||
</a>
|
||||
<p className="pt4 gray3 f9 tl mh4">Filter Groups</p>
|
||||
<div className="relative pb6 w-100 ph4 pt2">
|
||||
<input className="ba b--gray3 white-d bg-gray0-d inter w-100 f9 pa2" style={{boxSizing: "border-box"}} placeholder="Group name..."
|
||||
onChange={this.search}
|
||||
value={state.searchTerm}
|
||||
/>
|
||||
{searchResults}
|
||||
{selectedGroups}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default GroupFilter;
|
||||
@ -57,6 +57,14 @@ export class GroupSidebar extends Component {
|
||||
(path in props.groups)
|
||||
);
|
||||
})
|
||||
.filter((path) => {
|
||||
let selectedGroups = !!props.selectedGroups ? props.selectedGroups : [];
|
||||
if (selectedGroups.length === 0) {
|
||||
return true;
|
||||
}
|
||||
let selectedPaths = selectedGroups.map((e => {return e[0]}));
|
||||
return (selectedPaths.includes(path));
|
||||
})
|
||||
.sort((a, b) => {
|
||||
let aName = a.substr(1);
|
||||
let bName = b.substr(1);
|
||||
|
||||
@ -1,23 +1,24 @@
|
||||
import React, { Component } from "react";
|
||||
import { cite } from '../../lib/util';
|
||||
import { IconHome } from "/components/lib/icons/icon-home";
|
||||
import { GroupFilter } from "./group-filter";
|
||||
import { Sigil } from "/components/lib/icons/sigil";
|
||||
|
||||
export class HeaderBar extends Component {
|
||||
render() {
|
||||
let popout = window.location.href.includes("popout/")
|
||||
? "dn"
|
||||
: "dn db-m db-l db-xl";
|
||||
? "dn" : "dn db-m db-l db-xl";
|
||||
|
||||
let title = document.title === "Home" ? "" : document.title;
|
||||
// let spinner = !!this.props.spinner
|
||||
// ? this.props.spinner : false;
|
||||
|
||||
let spinner = !!this.props.spinner ? this.props.spinner : false;
|
||||
// let spinnerClasses = "";
|
||||
|
||||
let spinnerClasses = "";
|
||||
// if (spinner === true) {
|
||||
// spinnerClasses = "spin-active";
|
||||
// }
|
||||
|
||||
if (spinner === true) {
|
||||
spinnerClasses = "spin-active";
|
||||
}
|
||||
let invites = (this.props.invites && this.props.invites.contacts)
|
||||
? this.props.invites.contacts
|
||||
: {};
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -25,33 +26,22 @@ export class HeaderBar extends Component {
|
||||
"bg-white bg-gray0-d w-100 justify-between relative tc pt3 " + popout
|
||||
}
|
||||
style={{ height: 40 }}>
|
||||
<a
|
||||
className="dib gray2 f9 inter absolute left-0"
|
||||
href="/"
|
||||
style={{ top: 14 }}>
|
||||
<IconHome classes={spinnerClasses} />
|
||||
<span
|
||||
className="ml2 white-d v-top lh-title"
|
||||
style={{ paddingTop: 3 }}>
|
||||
Home
|
||||
</span>
|
||||
</a>
|
||||
<span
|
||||
className="f9 white-d inter dib"
|
||||
style={{
|
||||
verticalAlign: "text-top",
|
||||
paddingTop: 3
|
||||
}}>
|
||||
{title}
|
||||
</span>
|
||||
<div className="absolute right-0 lh-copy" style={{ top: 8 }}>
|
||||
<Sigil
|
||||
ship={"~" + window.ship}
|
||||
size={16}
|
||||
color={"#000000"}
|
||||
classes={"v-mid mix-blend-diff"}
|
||||
/>
|
||||
<span className="mono white-d f9 ml2 c-default">{cite(window.ship)}</span>
|
||||
<div className="fl lh-copy absolute left-0" style={{ top: 8 }}>
|
||||
<a href="/~groups/me" className="dib v-top">
|
||||
<Sigil
|
||||
ship={"~" + window.ship}
|
||||
classes="v-mid mix-blend-diff"
|
||||
size={16}
|
||||
color={"#000000"}
|
||||
/>
|
||||
</a>
|
||||
<GroupFilter invites={invites} associations={this.props.associations} />
|
||||
<span className="dib f9 v-mid gray2 ml1 mr1 c-default inter">/</span>
|
||||
<a
|
||||
className="dib f9 v-mid inter ml1"
|
||||
href="/"
|
||||
style={{ top: 14 }}>
|
||||
⟵ Manage Groups</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -34,7 +34,8 @@ export class Root extends Component {
|
||||
let invites =
|
||||
(!!state.invites && '/contacts' in state.invites) ?
|
||||
state.invites['/contacts'] : {};
|
||||
let associations = !! state.associations ? state.associations : {};
|
||||
let associations = !!state.associations ? state.associations : {};
|
||||
let selectedGroups = !!state.selected ? state.selected : [];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
@ -45,6 +46,7 @@ export class Root extends Component {
|
||||
<Skeleton
|
||||
activeDrawer="groups"
|
||||
spinner={state.spinner}
|
||||
selectedGroups={selectedGroups}
|
||||
history={props.history}
|
||||
api={api}
|
||||
contacts={contacts}
|
||||
@ -67,6 +69,7 @@ export class Root extends Component {
|
||||
<Skeleton
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
selectedGroups={selectedGroups}
|
||||
api={api}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
@ -99,6 +102,7 @@ export class Root extends Component {
|
||||
<Skeleton
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
selectedGroups={selectedGroups}
|
||||
api={api}
|
||||
contacts={contacts}
|
||||
invites={invites}
|
||||
@ -139,6 +143,7 @@ export class Root extends Component {
|
||||
<Skeleton
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
selectedGroups={selectedGroups}
|
||||
api={api}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
@ -183,6 +188,7 @@ export class Root extends Component {
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
api={api}
|
||||
selectedGroups={selectedGroups}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
invites={invites}
|
||||
@ -232,6 +238,7 @@ export class Root extends Component {
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
api={api}
|
||||
selectedGroups={selectedGroups}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
invites={invites}
|
||||
@ -267,6 +274,7 @@ export class Root extends Component {
|
||||
spinner={state.spinner}
|
||||
history={props.history}
|
||||
api={api}
|
||||
selectedGroups={selectedGroups}
|
||||
contacts={contacts}
|
||||
groups={groups}
|
||||
invites={invites}
|
||||
|
||||
@ -12,7 +12,7 @@ export class Skeleton extends Component {
|
||||
|
||||
return (
|
||||
<div className="h-100 w-100 ph4-m ph4-l ph4-xl pb4-m pb4-l pb4-xl">
|
||||
<HeaderBar spinner={props.spinner} />
|
||||
<HeaderBar spinner={props.spinner} invites={props.invites} associations={props.associations} />
|
||||
<div className="cf w-100 h-100 h-100-m-40-ns flex ba-m ba-l ba-xl b--gray2 br1">
|
||||
<GroupSidebar
|
||||
contacts={props.contacts}
|
||||
@ -20,6 +20,7 @@ export class Skeleton extends Component {
|
||||
invites={props.invites}
|
||||
activeDrawer={props.activeDrawer}
|
||||
selected={props.selected}
|
||||
selectedGroups={props.selectedGroups}
|
||||
history={props.history}
|
||||
api={api}
|
||||
associations={props.associations}
|
||||
|
||||
@ -5,6 +5,7 @@ export class LocalReducer {
|
||||
let data = _.get(json, 'local', false);
|
||||
if (data) {
|
||||
this.setSpinner(data, state);
|
||||
this.setSelected(data, state);
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,4 +15,10 @@ export class LocalReducer {
|
||||
state.spinner = json.spinner;
|
||||
}
|
||||
}
|
||||
setSelected(json, state) {
|
||||
let data = _.has(json, 'selected', false);
|
||||
if (data) {
|
||||
state.selected = json.selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -15,6 +15,7 @@ class Store {
|
||||
associations: {},
|
||||
permissions: {},
|
||||
invites: {},
|
||||
selected: [],
|
||||
spinner: false
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user