wip

src/Components/SubscriptionList/SubscriptionList.less

@@ -1,8 +1,37 @@
+@import '~styles/variables.less';
+
 .items-container {
     margin: 0 -10px;
 }
 
 .items {
     border-collapse: collapse;
     width: 100%;
+}
+
+.header {
+    color: #666;
+    font-style: italic;
+    margin-bottom: 5px;
+    border-bottom: 1px solid #eee;
+
+    td {
+        padding: 5px;
+    }
+}
+
+.sorting-button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: none;
+    color: #666;
+    font: inherit;
+    cursor: pointer;
+}
+
+@media screen and (max-width: @breakpoint) {
+    .sort-tags {
+        margin-left: 26px;
+    }
 }

src/Components/SubscriptionList/SubscriptionList.tsx

@@ -2,10 +2,13 @@ import React from "react";
 import { Contact } from "../../Domain/Contact";
 import { Subscription } from "../../Domain/Subscription";
 import { SubscriptionRow } from "./SubscriptionRow/SubscriptionRow";
+import ArrowBoldDownIcon from "@skbkontur/react-icons/ArrowBoldDown";
+import ArrowBoldUpIcon from "@skbkontur/react-icons/ArrowBoldUp";
 
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionList.less";
+import { useSortData } from "../../hooks/useSortData";
 
 const cn = classNames.bind(styles);
 
@@ -22,11 +25,35 @@ export const SubscriptionList: React.FC<Props> = ({
     contacts,
     handleEditSubscription,
 }) => {
+    const { sortedData, sortConfig, handleSort } = useSortData(subscriptions, "contacts");
+
+    const SortingIcon =
+        sortConfig.direction === "descending" ? <ArrowBoldDownIcon /> : <ArrowBoldUpIcon />;
     return (
         <div className={cn("items-container")}>
             <table ref={tableRef} className={cn("items")}>
+                <tr className={cn("header")}>
+                    <td colSpan={2}>
+                        <button
+                            onClick={() => handleSort("tags")}
+                            type="button"
+                            className={cn("sorting-button", "sort-tags")}
+                        >
+                            Tags {sortConfig.sortingColumn === "tags" && SortingIcon}
+                        </button>
+                    </td>
+                    <td>
+                        <button
+                            onClick={() => handleSort("contacts")}
+                            type="button"
+                            className={cn("sorting-button")}
+                        >
+                            Contacts {sortConfig.sortingColumn === "contacts" && SortingIcon}
+                        </button>
+                    </td>
+                </tr>
                 <tbody>
-                    {subscriptions.map((subscription) => (
+                    {sortedData.map((subscription) => (
                         <SubscriptionRow
                             key={subscription.id}
                             subscription={subscription}

src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Button } from "@skbkontur/react-ui/components/Button";
 import AddIcon from "@skbkontur/react-icons/Add";
+import { Filter } from "@skbkontur/react-icons";
 import { Subscription } from "../../Domain/Subscription";
 import { createSchedule, WholeWeek } from "../../Domain/Schedule";
 import { Contact } from "../../Domain/Contact";
@@ -14,6 +15,9 @@ import { AddSubscriptionMessage } from "../../Components/AddSubscribtionMessage/
 import { ModalType } from "../../Domain/Global";
 import { ConfigState } from "../../store/selectors";
 import { useAppSelector } from "../../store/hooks";
+import { Checkbox, DropdownMenu, MenuItem, ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
+import ContactTypeIcon from "../../Components/ContactTypeIcon/ContactTypeIcon";
+import { ArrowChevronDown } from "@skbkontur/react-icons";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionListContainer.less";
@@ -67,8 +71,18 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
     const [newSubscription, setNewSubscription] = useState<SubscriptionInfo | null>(null);
     const [subscriptionToEdit, setSubscriptionToEdit] = useState<Subscription | null>(null);
     const [filterTags, setFilterTags] = useState<string[]>([]);
-    const { filteredSubscriptions, availableTags } = filterSubscriptions(subscriptions, filterTags);
+    const [filterContactIDs, setFilterContactIDs] = useState<string[]>([]);
+
+    const { filteredSubscriptions, availableTags, availableContactIDs } = filterSubscriptions(
+        subscriptions,
+        filterTags,
+        filterContactIDs
+    );
     const { config } = useAppSelector(ConfigState);
+
+    const availableContacts = contacts.filter((contact) =>
+        availableContactIDs?.includes(contact.id)
+    );
     const isPlottingDefaultOn = !!config?.featureFlags.isPlottingDefaultOn;
 
     const handleCloseModal = (modal: ModalType) => {
@@ -166,6 +180,19 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
         }
     };
 
+    const renderFilterByContactCaption = ({ openMenu }: { openMenu: () => void }) => {
+        return (
+            <Button
+                width={180}
+                icon={filterContactIDs.length ? <Filter /> : <ArrowChevronDown />}
+                use="default"
+                onClick={openMenu}
+            >
+                Filter by contact
+            </Button>
+        );
+    };
+
     return (
         <>
             {subscriptions.length > 0 ? (
@@ -181,12 +208,55 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
                             >
                                 Add subscription
                             </Button>
+                            <DropdownMenu
+                                menuMaxHeight={300}
+                                caption={renderFilterByContactCaption}
+                            >
+                                {availableContacts.map((contact) => (
+                                    <ThemeContext.Provider
+                                        key={contact.id}
+                                        value={ThemeFactory.create({
+                                            menuItemHoverBg: "initial",
+                                        })}
+                                    >
+                                        <MenuItem>
+                                            <Checkbox
+                                                checked={filterContactIDs.includes(contact.id)}
+                                                style={{
+                                                    alignItems: "center",
+                                                }}
+                                                onValueChange={() => {
+                                                    const contactIndex = filterContactIDs.indexOf(
+                                                        contact.id
+                                                    );
+                                                    if (contactIndex === -1) {
+                                                        setFilterContactIDs((prev) => [
+                                                            ...prev,
+                                                            contact.id,
+                                                        ]);
+                                                    } else {
+                                                        setFilterContactIDs((prev) =>
+                                                            prev.filter((id) => {
+                                                                return id !== contact.id;
+                                                            })
+                                                        );
+                                                    }
+                                                }}
+                                            >
+                                                <ContactTypeIcon type={contact.type} />
+                                                &nbsp;
+                                                {contact.value}
+                                            </Checkbox>
+                                        </MenuItem>
+                                    </ThemeContext.Provider>
+                                ))}
+                            </DropdownMenu>
                             <TagDropdownSelect
                                 width={180}
                                 value={filterTags}
                                 availableTags={availableTags}
                                 onChange={handleFilterTagsChange}
-                                placeholder="Filter subscriptions by Tag"
+                                placeholder="Filter by tag"
                             />
                         </div>
                     </div>

src/Domain/FilterSubscriptions.ts

@@ -2,19 +2,30 @@ import { Subscription } from "./Subscription";
 
 export const filterSubscriptions = (
     subscriptions: Subscription[],
-    filterTags: string[]
+    filterTags: string[],
+    contactIDs: string[]
 ): {
     filteredSubscriptions: Subscription[];
     availableTags: string[];
+    availableContactIDs: string[];
 } => {
-    const filteredSubscriptions = subscriptions.filter((subscription) =>
-        filterTags.every((x) => subscription.tags.includes(x))
-    );
+    const filteredSubscriptions = subscriptions.filter((subscription) => {
+        return (
+            filterTags.every((tag) => subscription.tags.includes(tag)) &&
+            contactIDs.every((id) => subscription.contacts.includes(id))
+        );
+    });
 
-    const availableTags = [...new Set(filteredSubscriptions.flatMap((i) => i.tags))];
+    const availableTags = [
+        ...new Set(filteredSubscriptions.flatMap((subscription) => subscription.tags)),
+    ];
+    const availableContactIDs = [
+        ...new Set(filteredSubscriptions.flatMap((subscription) => subscription.contacts)),
+    ];
 
     return {
         filteredSubscriptions,
         availableTags,
+        availableContactIDs,
     };
 };