From a94bbed03bc1b2ca11cebf1d676628b019d0ef39 Mon Sep 17 00:00:00 2001 From: Nikolai R Kristiansen Date: Sun, 5 Jan 2020 16:38:48 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Filterting=20by=20query=20and=20org?= =?UTF-8?q?=20unit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mailadmin/static/mailadmin/src/App.js | 6 +-- mailadmin/static/mailadmin/src/_sidebar.scss | 2 +- .../mailadmin/src/components/AliasList.js | 8 +-- .../src/components/AliasListCreate.js | 30 +++++------ .../mailadmin/src/components/MailAdmin.js | 36 +++++++++++++ .../mailadmin/src/components/MainArea.js | 31 +++++++---- .../mailadmin/src/components/OrgUnitList.js | 52 +++++++------------ 7 files changed, 99 insertions(+), 66 deletions(-) create mode 100644 mailadmin/static/mailadmin/src/components/MailAdmin.js diff --git a/mailadmin/static/mailadmin/src/App.js b/mailadmin/static/mailadmin/src/App.js index e7bb507..3663628 100644 --- a/mailadmin/static/mailadmin/src/App.js +++ b/mailadmin/static/mailadmin/src/App.js @@ -4,9 +4,8 @@ import { RestLink } from 'apollo-link-rest'; import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; -import { OrgUnitList, MainArea } from './components'; - import { getCookie } from './utils'; +import MailAdmin from './components/MailAdmin'; const restLink = new RestLink({ uri: '/api/', @@ -25,8 +24,7 @@ const App = () => (
- - +
diff --git a/mailadmin/static/mailadmin/src/_sidebar.scss b/mailadmin/static/mailadmin/src/_sidebar.scss index 86051ff..cb43daf 100644 --- a/mailadmin/static/mailadmin/src/_sidebar.scss +++ b/mailadmin/static/mailadmin/src/_sidebar.scss @@ -23,7 +23,7 @@ } } a { - padding: 0.5rem 0.8rem; + padding: 0.1rem 0.4rem; display: block; diff --git a/mailadmin/static/mailadmin/src/components/AliasList.js b/mailadmin/static/mailadmin/src/components/AliasList.js index d8bf92e..3598aeb 100644 --- a/mailadmin/static/mailadmin/src/components/AliasList.js +++ b/mailadmin/static/mailadmin/src/components/AliasList.js @@ -7,10 +7,11 @@ import { DELETE_ALIASES_MUTATION } from '../mutations'; import { notify } from '../utils'; import { GET_ALIASES } from '../queries'; -const AliasRow = ({ id, destination, updateDeletionList }) => { +const AliasRow = ({ id, destination, query, updateDeletionList }) => { const [checked, setChecked] = useState(false); + const queryMatch = query && destination.includes(query); return ( - + {destination}
@@ -49,7 +50,7 @@ const ActionRow = ({ onAddEmailClick, deleteVisible, onDelete }) => { ); }; -const AliasList = ({ list, aliases, domain }) => { +const AliasList = ({ list, aliases, domain, query }) => { const [textareaVisible, setTextareaVisible] = useState(false); const [deletionList, setDeletionList] = useState([]); const [deleteAliases] = useMutation(DELETE_ALIASES_MUTATION); @@ -106,6 +107,7 @@ const AliasList = ({ list, aliases, domain }) => { setDeletionList(deletionList.filter(({ id }) => id !== aliasId)); // remove } }} + query={query} /> ))} { const listName = `${selectedPrefix}-${name}@${domain.name}`; const shouldCreate = Boolean(Object.entries(lists).filter(([list]) => list === listName).length); + const flattenedPrefixes = [].concat(...orgUnits.map((ou) => ou.prefixes.map((prefix) => prefix))).sort(); + return (
- {orgUnits.map((ou) => - ou.prefixes.map((prefix) => ( - { - e.preventDefault(); - setSelectedPrefix(prefix); - }} - > - {prefix}- - - )) - )} + {flattenedPrefixes.map((prefix) => ( + { + e.preventDefault(); + setSelectedPrefix(prefix); + }} + > + {prefix}- + + ))}
{ + const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('q') || ''); + const [selectedOrgUnit, setOrgUnit] = useState( + parseInt(new URLSearchParams(window.location.search).get('orgunit'), 10) || null + ); + const { data, loading, error } = useQuery(GET_ORG_UNITS); + if (loading || error) { + return null; + } + + // Format a prefix regex for each org unit + const orgUnits = data.orgUnits.map((ou) => { + const prefixes = ou.prefixes.map((prefix) => { + return `^${prefix}-|^${prefix}@`; + }); + return { prefixesRegex: prefixes.join('|'), ...ou }; + }); + return ( + <> + + + + ); +}; +export default MailAdmin; diff --git a/mailadmin/static/mailadmin/src/components/MainArea.js b/mailadmin/static/mailadmin/src/components/MainArea.js index 77813cd..4221fb5 100644 --- a/mailadmin/static/mailadmin/src/components/MainArea.js +++ b/mailadmin/static/mailadmin/src/components/MainArea.js @@ -2,41 +2,50 @@ import React from 'react'; import { groupBy, sortBy } from 'lodash'; import { useQuery } from '@apollo/react-hooks'; -import { GET_ALIASES, GET_DOMAINS, GET_ORG_UNITS } from '../queries'; +import { GET_ALIASES, GET_DOMAINS } from '../queries'; import AliasList from './AliasList'; import AliasListCreate from './AliasListCreate'; -const MainArea = ({ filterQuery }) => { - // TODO: Filter aliases by filterQuery +const MainArea = ({ query, selectedOrgUnit, orgUnits }) => { const { data, loading, error } = useQuery(GET_ALIASES); - const { data: ouData, loading: ouLoading, error: ouError } = useQuery(GET_ORG_UNITS); const { data: domainData, loading: domainLoading, error: domainError } = useQuery(GET_DOMAINS); - if (loading || ouLoading || domainLoading) { + if (loading || domainLoading) { return (
); } - if (error || ouError || domainError) { + if (error || domainError) { return null; } - const { orgUnits } = ouData; const domain = domainData.domains[0]; const lists = groupBy( sortBy(data.aliases, (alias) => alias.source), (alias) => alias.source ); + + const listPrefixes = selectedOrgUnit && orgUnits.find(({ id }) => id === selectedOrgUnit).prefixesRegex; + const listRegex = listPrefixes && new RegExp(listPrefixes); + return (
- {/*
*/}
- {Object.entries(lists).map(([list, aliases]) => ( - - ))} + {Object.entries(lists).map(([list, aliases]) => { + // When searching only render lists with query matches + const queryMatchInList = aliases.some((alias) => alias.destination.includes(query)); + if (query && !queryMatchInList) { + return null; + } + // Only render lists which matches the org units prefixes + if (listRegex && !listRegex.test(list)) { + return null; // FIXME: use styles to show/hide ? + } + return ; + })}
); diff --git a/mailadmin/static/mailadmin/src/components/OrgUnitList.js b/mailadmin/static/mailadmin/src/components/OrgUnitList.js index 936adfe..2fccf57 100644 --- a/mailadmin/static/mailadmin/src/components/OrgUnitList.js +++ b/mailadmin/static/mailadmin/src/components/OrgUnitList.js @@ -1,9 +1,7 @@ -import React, { useState, useCallback } from 'react'; -import { useQuery } from '@apollo/react-hooks'; +import React, { useCallback } from 'react'; import ctx from 'classnames'; import { setQueryString } from '../utils'; -import { GET_ORG_UNITS } from '../queries'; const Search = ({ query, setQuery }) => { return ( @@ -25,11 +23,7 @@ const OrgUnit = ({ id, name, selected, onClick }) => ( ); -const OrgUnitList = () => { - const [query, setQuery] = useState(new URLSearchParams(window.location.search).get('q') || ''); - const [selected, setSelected] = useState(null); - const { data, loading, error } = useQuery(GET_ORG_UNITS); - +const OrgUnitList = ({ query, setQuery, orgUnits, selectedOrgUnit, setOrgUnit }) => { const setSearchQuery = useCallback( (e) => { e.preventDefault(); @@ -40,42 +34,36 @@ const OrgUnitList = () => { [setQuery] ); - if (loading || error) { - return null; - } - const orgUnits = data.orgUnits.map((ou) => { - const prefixes = ou.prefixes.map((prefix) => { - return `^${prefix}-|^${prefix}@`; - }); - return { prefixesRegex: prefixes.join('|'), ...ou }; - }); + const onClearOrgUnit = useCallback( + (e) => { + e.preventDefault(); + setOrgUnit(null); + setQueryString(); + setQuery(''); + }, + [setOrgUnit, setQuery] + ); return (
Foreninger/Utvalg