feat: add visibility filter

This commit is contained in:
Steven
2023-07-10 23:19:03 +08:00
parent 0cceed51f8
commit 00c7abc38d
5 changed files with 32 additions and 9 deletions

View File

@@ -85,7 +85,7 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
<thead>
<tr>
<th scope="col" className="py-2 px-2 text-left text-sm font-semibold text-gray-500">
Devices
Operating system
</th>
<th scope="col" className="py-2 pr-2 text-right text-sm font-semibold text-gray-500">
Visitors

View File

@@ -1,10 +1,13 @@
import useViewStore from "../stores/v1/filter";
import { useTranslation } from "react-i18next";
import useViewStore from "../stores/v1/view";
import Icon from "./Icon";
import VisibilityIcon from "./VisibilityIcon";
const FilterView = () => {
const { t } = useTranslation();
const viewStore = useViewStore();
const filter = viewStore.filter;
const shouldShowFilters = filter.tag !== undefined;
const shouldShowFilters = filter.tag !== undefined || filter.visibility !== undefined;
if (!shouldShowFilters) {
return <></>;
@@ -15,10 +18,21 @@ const FilterView = () => {
<span className="text-gray-400">Filters:</span>
{filter.tag && (
<button
className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-200 rounded-full text-gray-500 text-sm hover:line-through"
className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
onClick={() => viewStore.setFilter({ tag: undefined })}
>
<Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
<Icon.X className="w-4 h-auto ml-1" />
</button>
)}
{filter.visibility && (
<button
className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
onClick={() => viewStore.setFilter({ visibility: undefined })}
>
<VisibilityIcon className="w-4 h-auto mr-1" visibility={filter.visibility} />
{t(`shortcut.visibility.${filter.visibility.toLowerCase()}.self`)}
<Icon.X className="w-4 h-auto ml-1" />
</button>
)}
</div>

View File

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
import toast from "react-hot-toast";
import { shortcutService } from "../services";
import useFaviconStore from "../stores/v1/favicon";
import useViewStore from "../stores/v1/filter";
import useViewStore from "../stores/v1/view";
import useUserStore from "../stores/v1/user";
import { absolutifyLink } from "../helpers/utils";
import { showCommonDialog } from "./Alert";
@@ -143,14 +143,17 @@ const ShortcutView = (props: Props) => {
</div>
</Tooltip>
<Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
<div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
<div
className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
onClick={() => viewStore.setFilter({ visibility: shortcut.visibility })}
>
<VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
{t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
</div>
</Tooltip>
<Tooltip title="View count" variant="solid" placement="top" arrow>
<div
className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm"
className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full cursor-pointer text-gray-500 text-sm"
onClick={() => setShowAnalyticsDialog(true)}
>
<Icon.BarChart2 className="w-4 h-auto mr-1" />