Feature/subscription sortings

src/Components/SubscriptionList/SubscriptionList.less

@@ -1,8 +1,41 @@
+@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;
+}
+
+.fold-button-gap {
+    display: none;
+}
+
+@media screen and (max-width: @breakpoint) {
+    .fold-button-gap {
+        display: table-cell;
+    }
 }

src/Components/SubscriptionList/SubscriptionList.tsx

@@ -2,7 +2,9 @@ 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 { useSortData } from "../../hooks/useSortData";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionList.less";
@@ -22,11 +24,38 @@ 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")}>
+                <thead>
+                    <tr className={cn("header")}>
+                        <td className={cn("fold-button-gap")} />
+                        <td colSpan={2}>
+                            <button
+                                onClick={() => handleSort("tags")}
+                                type="button"
+                                className={cn("sorting-button")}
+                            >
+                                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>
+                </thead>
                 <tbody>
-                    {subscriptions.map((subscription) => (
+                    {sortedData.map((subscription) => (
                         <SubscriptionRow
                             key={subscription.id}
                             subscription={subscription}

src/Containers/SubscriptionListContainer/Components/FilterSubscriptionButtons.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { Button } from "@skbkontur/react-ui/components/Button";
+import { Filter } from "@skbkontur/react-icons";
+import { Contact } from "../../../Domain/Contact";
+import { Checkbox, DropdownMenu, MenuItem, ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
+import ContactTypeIcon from "../../../Components/ContactTypeIcon/ContactTypeIcon";
+import { ArrowChevronDown } from "@skbkontur/react-icons";
+import TagDropdownSelect from "../../../Components/TagDropdownSelect/TagDropdownSelect";
+import { filterSubscriptions } from "../../../Domain/FilterSubscriptions";
+import { Subscription } from "../../../Domain/Subscription";
+
+interface IFilterSubscriptionButtons {
+    contacts: Contact[];
+    subscriptions: Subscription[];
+}
+
+export const FilterSubscriptionButtons = ({
+    contacts,
+    subscriptions,
+}: IFilterSubscriptionButtons) => {
+    const [filterContactIDs, setFilterContactIDs] = useState<string[]>([]);
+    const [filterTags, setFilterTags] = useState<string[]>([]);
+
+    const { filteredSubscriptions, availableTags, availableContactIDs } = filterSubscriptions(
+        subscriptions,
+        filterTags,
+        filterContactIDs
+    );
+
+    const renderFilterByContactCaption = ({ openMenu }: { openMenu: () => void }) => {
+        return (
+            <Button
+                width={180}
+                icon={filterContactIDs.length ? <Filter /> : <ArrowChevronDown />}
+                use="default"
+                onClick={openMenu}
+            >
+                Filter by contact
+            </Button>
+        );
+    };
+
+    const availableContacts = contacts.filter((contact) =>
+        availableContactIDs?.includes(contact.id)
+    );
+
+    const handleFilterTagsChange = (tags: string[]) => {
+        setFilterTags(tags);
+    };
+
+    const handleSetCheckbox = (contactID: string) => {
+        const contactIndex = filterContactIDs.indexOf(contactID);
+        if (contactIndex === -1) {
+            setFilterContactIDs((prev) => [...prev, contactID]);
+        } else {
+            setFilterContactIDs((prev) =>
+                prev.filter((id) => {
+                    return id !== contactID;
+                })
+            );
+        }
+    };
+
+    const FilterButtons = (
+        <>
+            <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",
+                                    padding: "0",
+                                }}
+                                onValueChange={() => handleSetCheckbox(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 by tag"
+            />
+        </>
+    );
+
+    return { FilterButtons, filteredSubscriptions };
+};

src/Containers/SubscriptionListContainer/SubscriptionListContainer.tsx

@@ -7,13 +7,12 @@ import { Contact } from "../../Domain/Contact";
 import SubscriptionEditModal from "../../Components/SubscriptionEditModal/SubscriptionEditModal";
 import CreateSubscriptionModal from "../../Components/CreateSubscriptionModal/CreateSubscriptionModal";
 import type { SubscriptionInfo } from "../../Components/SubscriptionEditor/SubscriptionEditor";
-import TagDropdownSelect from "../../Components/TagDropdownSelect/TagDropdownSelect";
 import { SubscriptionList } from "../../Components/SubscriptionList/SubscriptionList";
-import { filterSubscriptions } from "../../Domain/FilterSubscriptions";
 import { AddSubscriptionMessage } from "../../Components/AddSubscribtionMessage/AddSubscribtionMessage";
 import { ModalType } from "../../Domain/Global";
 import { ConfigState } from "../../store/selectors";
 import { useAppSelector } from "../../store/hooks";
+import { FilterSubscriptionButtons } from "./Components/FilterSubscriptionButtons";
 import classNames from "classnames/bind";
 
 import styles from "./SubscriptionListContainer.less";
@@ -66,9 +65,14 @@ 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 { FilterButtons, filteredSubscriptions } = FilterSubscriptionButtons({
+        contacts,
+        subscriptions,
+    });
+
     const { config } = useAppSelector(ConfigState);
+
     const isPlottingDefaultOn = !!config?.featureFlags.isPlottingDefaultOn;
 
     const handleCloseModal = (modal: ModalType) => {
@@ -83,10 +87,6 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
         }
     };
 
-    const handleFilterTagsChange = (tags: string[]): void => {
-        setFilterTags(tags);
-    };
-
     const handleEditSubscription = (subscription: Subscription): void => {
         openModal(ModalType.subscriptionEditModal);
         setSubscriptionToEdit(subscription);
@@ -181,13 +181,7 @@ export const SubscriptionListContainer: React.FC<Props> = (props) => {
                             >
                                 Add subscription
                             </Button>
-                            <TagDropdownSelect
-                                width={180}
-                                value={filterTags}
-                                availableTags={availableTags}
-                                onChange={handleFilterTagsChange}
-                                placeholder="Filter subscriptions by Tag"
-                            />
+                            {FilterButtons}
                         </div>
                     </div>
                     <SubscriptionList

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,
     };
 };