@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/filters/filter-condition.tsx

@@ -1,151 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { X } from "lucide-react";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
-import { FILTER_FIELD_CONFIGS, OPERATOR_LABELS, type FilterCondition, type BugFilterKey, type FilterOperator } from "./filter-types";
-import { FilterValueInput } from "./filter-value-input";
-import type { UserBrief } from "@/components/story/types";
-import { m } from "@/paraglide/messages.js";
-
-function getFilterConfig(key: BugFilterKey) {
-  return FILTER_FIELD_CONFIGS.find((c) => c.key === key) ?? FILTER_FIELD_CONFIGS[0];
-}
-
-interface FilterConditionRowProps {
-  condition: FilterCondition;
-  onChangeProperty: (property: BugFilterKey) => void;
-  onChangeOperator: (operator: FilterOperator) => void;
-  onChangeValue: (value: string) => void;
-  onRemove: () => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
-
-export function FilterConditionRow({ condition, onChangeProperty, onChangeOperator, onChangeValue, onRemove, users, labels }: FilterConditionRowProps) {
-  const config = getFilterConfig(condition.property);
-  if (!config) return null;
-
-  const Icon = config.icon;
-  const availableProperties = FILTER_FIELD_CONFIGS;
-
-  return (
-    <div className="inline-flex h-7 items-center rounded-sm border border-border bg-muted/30 text-xs">
-      <PropertySelect
-        current={condition.property}
-        options={availableProperties}
-        onChange={onChangeProperty}
-      />
-
-      <div className="h-4 w-px bg-border" />
-
-      <OperatorSelect
-        current={condition.operator}
-        operators={config.operators}
-        onChange={onChangeOperator}
-      />
-
-      {condition.operator !== "is_empty" && condition.operator !== "is_not_empty" && (
-        <>
-          <div className="h-4 w-px bg-border" />
-          <div className="px-1.5">
-            <FilterValueInput
-              property={condition.property}
-              operator={condition.operator}
-              value={condition.value}
-              onChange={onChangeValue}
-              users={users}
-              labels={labels}
-            />
-          </div>
-        </>
-      )}
-
-      <button
-        type="button"
-        onClick={onRemove}
-        className="flex size-7 shrink-0 items-center justify-center rounded-r-sm text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
-      >
-        <X className="size-3.5" />
-      </button>
-    </div>
-  );
-}
-
-function PropertySelect({ current, options, onChange }: { current: BugFilterKey; options: typeof FILTER_FIELD_CONFIGS; onChange: (key: BugFilterKey) => void }) {
-  const CurrentIcon = options.find((o) => o.key === current)?.icon;
-  return (
-    <Popover>
-      <PopoverTrigger render={<button className="flex h-full items-center gap-1 rounded-l-sm px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
-          {CurrentIcon && <CurrentIcon className="size-3.5 shrink-0" />}
-          <span className="pr-1">{options.find((o) => o.key === current)?.label() ?? current}</span>
-      </PopoverTrigger>
-      <PopoverContent className="w-40 p-1" align="start">
-        {options.map((opt) => {
-          const OptIcon = opt.icon;
-          const active = opt.key === current;
-          return (
-            <button
-              key={opt.key}
-              type="button"
-              onClick={() => onChange(opt.key)}
-              className={cn("flex w-full items-center gap-2 rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
-            >
-              <OptIcon className="size-4 text-muted-foreground" />
-              <span>{opt.label()}</span>
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function OperatorSelect({ current, operators, onChange }: { current: FilterOperator; operators: FilterOperator[]; onChange: (op: FilterOperator) => void }) {
-  const isSingle = (op: FilterOperator) => op === "is" || op === "is_not";
-  const isMulti = (op: FilterOperator) => op === "is_any_of" || op === "is_not_any_of";
-
-  return (
-    <Popover>
-      <PopoverTrigger render={<button className="flex h-full items-center px-2 text-muted-foreground hover:bg-muted transition-colors whitespace-nowrap" />}>
-          {OPERATOR_LABELS[current]()}
-        </PopoverTrigger>
-      <PopoverContent className="w-40 p-1" align="start">
-        {operators.map((op) => {
-          const active = op === current;
-          return (
-            <button
-              key={op}
-              type="button"
-              onClick={() => onChange(op)}
-              className={cn("flex w-full items-center justify-between rounded px-2 text-sm transition-colors", active ? "bg-accent font-medium py-0.5" : "hover:bg-muted py-1.5")}
-            >
-              <span>{OPERATOR_LABELS[op]()}</span>
-              {isSingle(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.bug_filter_single()}</span>
-              )}
-              {isMulti(op) && (
-                <span className="rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{m.bug_filter_multi()}</span>
-              )}
-            </button>
-          );
-        })}
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/components/bug/filters/filter-row.tsx

@@ -1,104 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useCallback } from "react";
-import { BrushCleaning, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { AddFilterDropdown } from "./add-filter-dropdown";
-import { FilterConditionRow } from "./filter-condition";
-import { createDefaultCondition, type FilterCondition, type BugFilterKey, type FilterOperator } from "./filter-types";
-import type { UserBrief } from "@/components/story/types";
-import { m } from "@/paraglide/messages.js";
-
-interface BugFilterRowProps {
-  conditions: FilterCondition[];
-  onChange: (conditions: FilterCondition[]) => void;
-  onClearAll: () => void;
-  onCancel?: () => void;
-  users?: UserBrief[];
-  labels?: { id: string; name: string; color: string }[];
-}
-
-export function BugFilterRow({ conditions, onChange, onClearAll, onCancel, users, labels }: BugFilterRowProps) {
-  const handleAdd = useCallback((property: BugFilterKey) => {
-    onChange([...conditions, createDefaultCondition(property)]);
-  }, [conditions, onChange]);
-
-  const handleRemove = useCallback((id: string) => {
-    onChange(conditions.filter((c) => c.id !== id));
-  }, [conditions, onChange]);
-
-  const handleChangeProperty = useCallback((id: string, property: BugFilterKey) => {
-    const defaultOp = createDefaultCondition(property);
-    onChange(conditions.map((c) => c.id === id ? { ...c, property, operator: defaultOp.operator, value: defaultOp.value } : c));
-  }, [conditions, onChange]);
-
-  const handleChangeOperator = useCallback((id: string, operator: FilterOperator) => {
-    onChange(conditions.map((c) => c.id === id ? { ...c, operator, value: operator === "is_empty" || operator === "is_not_empty" ? "" : c.value } : c));
-  }, [conditions, onChange]);
-
-  const handleChangeValue = useCallback((id: string, value: string) => {
-    onChange(conditions.map((c) => c.id === id ? { ...c, value } : c));
-  }, [conditions, onChange]);
-
-  return (
-    <div className="flex w-full items-start gap-2 rounded-lg bg-muted/50 px-3 py-2">
-      <div className="flex flex-1 flex-wrap items-center gap-1.5">
-        {conditions.length > 0 ? (
-          conditions.map((condition) => (
-            <FilterConditionRow
-              key={condition.id}
-              condition={condition}
-              onChangeProperty={(p) => handleChangeProperty(condition.id, p)}
-              onChangeOperator={(o) => handleChangeOperator(condition.id, o)}
-              onChangeValue={(v) => handleChangeValue(condition.id, v)}
-              onRemove={() => handleRemove(condition.id)}
-              users={users}
-              labels={labels}
-            />
-          ))
-        ) : (
-          <span className="px-1 text-xs text-muted-foreground">{m.bug_filter_label()}</span>
-        )}
-        <AddFilterDropdown conditions={conditions} onAdd={handleAdd} />
-      </div>
-      <div className="flex shrink-0 items-center gap-2 border-l border-border pl-3">
-        {conditions.length > 0 ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClearAll}
-            className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <BrushCleaning className="size-3.5" />
-            {m.bug_filter_clear()}
-          </Button>
-        ) : onCancel ? (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onCancel}
-            className="h-7 rounded-sm px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            <X className="size-3.5" />
-            {m.bug_filter_cancel()}
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/components/bug/filters/filter-toggle.tsx

@@ -1,61 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { ListFilter, ListFilterPlus } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import type { FilterCondition } from "./filter-types";
-import { m } from "@/paraglide/messages.js";
-
-interface BugFilterToggleProps {
-  visible: boolean;
-  conditions: FilterCondition[];
-  onToggle: () => void;
-}
-
-export function BugFilterToggle({ visible, conditions, onToggle }: BugFilterToggleProps) {
-  const activeCount = conditions.length;
-  const hasActive = activeCount > 0;
-  const isOpen = visible || hasActive;
-
-  return (
-    <Tooltip>
-      <TooltipTrigger render={
-        <Button
-          variant="outline"
-          size="sm"
-          aria-label={m.bug_filter_toggle()}
-          onClick={onToggle}
-          className={cn(
-            "h-8 gap-1.5 px-2.5 text-sm font-normal relative",
-            hasActive && "border-primary/50 bg-primary/5 text-primary",
-            !hasActive && "text-muted-foreground",
-          )}
-        />
-      }>
-          {isOpen ? <ListFilterPlus className="size-4" /> : <ListFilter className="size-4" />}
-          {activeCount > 0 && (
-            <span className="flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-              {activeCount}
-            </span>
-          )}
-      </TooltipTrigger>
-      <TooltipContent>{isOpen ? m.bug_filter_cancel() : m.bug_filter_toggle_open()}</TooltipContent>
-    </Tooltip>
-  );
-}

package/src/components/bug/filters/filter-types.ts

@@ -1,146 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-// BUG 筛选字段与操作符（照 story/filters/filter-types.ts 同构裁剪）。
-// property 恰为规格 §5.2 字段集，与 serverFn bug-list-query.ts 的翻译分支一一对应。
-import { m } from '@/paraglide/messages.js';
-import {
-  Calendar,
-  CalendarClock,
-  CircleDot,
-  CircleUser,
-  Flag,
-  Inbox,
-  Monitor,
-  Tag,
-  Type,
-  type LucideIcon,
-} from "lucide-react";
-
-export type BugFilterKey =
-  | "title"
-  | "state"
-  | "severity"
-  | "assigneeId"
-  | "labelId"
-  | "source"
-  | "env"
-  | "createdDate"
-  | "lastOccurAt";
-
-export type FilterOperator =
-  | "is" | "is_not" | "is_any_of" | "is_not_any_of" | "is_empty" | "is_not_empty"
-  | "before" | "after" | "on_or_before" | "on_or_after" | "between"
-  | "contains" | "not_contains";
-
-export interface FilterCondition {
-  id: string;
-  property: BugFilterKey;
-  operator: FilterOperator;
-  value: string;
-}
-
-export type FilterFieldType = "select" | "multi_select" | "user" | "date" | "text";
-
-export interface FilterFieldConfig {
-  key: BugFilterKey;
-  label: () => string;
-  icon: LucideIcon;
-  fieldType: FilterFieldType;
-  operators: FilterOperator[];
-  defaultOperator: FilterOperator;
-  defaultValue?: string;
-}
-
-const SELECT_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
-const USER_OPERATORS: FilterOperator[] = ["is", "is_not", "is_any_of", "is_not_any_of", "is_empty", "is_not_empty"];
-const DATE_OPERATORS: FilterOperator[] = ["is", "is_not", "before", "after", "on_or_before", "on_or_after", "between", "is_empty", "is_not_empty"];
-const TITLE_OPERATORS: FilterOperator[] = ["contains", "not_contains", "is_empty", "is_not_empty"];
-// env 与 serverFn 翻译分支对齐：值语义为精确 in/notIn（无 contains 翻译），故不提供 contains
-const ENV_OPERATORS: FilterOperator[] = ["is", "is_not", "is_empty", "is_not_empty"];
-
-export const FILTER_FIELD_CONFIGS: FilterFieldConfig[] = [
-  { key: "title", label: m.bug_filter_field_title, icon: Type, fieldType: "text", operators: TITLE_OPERATORS, defaultOperator: "contains" },
-  { key: "state", label: m.bug_filter_field_state, icon: CircleDot, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "open" },
-  { key: "severity", label: m.bug_filter_field_severity, icon: Flag, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "medium" },
-  { key: "assigneeId", label: m.bug_filter_field_assignee, icon: CircleUser, fieldType: "user", operators: USER_OPERATORS, defaultOperator: "is", defaultValue: "__none__" },
-  { key: "labelId", label: m.bug_filter_field_label, icon: Tag, fieldType: "multi_select", operators: SELECT_OPERATORS, defaultOperator: "is_any_of" },
-  { key: "source", label: m.bug_filter_field_source, icon: Inbox, fieldType: "select", operators: SELECT_OPERATORS, defaultOperator: "is", defaultValue: "manual" },
-  { key: "env", label: m.bug_filter_field_env, icon: Monitor, fieldType: "text", operators: ENV_OPERATORS, defaultOperator: "is" },
-  { key: "createdDate", label: m.bug_filter_field_createdDate, icon: Calendar, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
-  { key: "lastOccurAt", label: m.bug_filter_field_lastOccurAt, icon: CalendarClock, fieldType: "date", operators: DATE_OPERATORS, defaultOperator: "is" },
-];
-
-export const OPERATOR_LABELS: Record<FilterOperator, () => string> = {
-  is: m.bug_filter_operator_is,
-  is_not: m.bug_filter_operator_is_not,
-  is_any_of: m.bug_filter_operator_is_any_of,
-  is_not_any_of: m.bug_filter_operator_is_not_any_of,
-  is_empty: m.bug_filter_operator_is_empty,
-  is_not_empty: m.bug_filter_operator_is_not_empty,
-
-  before: m.bug_filter_operator_before,
-  after: m.bug_filter_operator_after,
-  on_or_before: m.bug_filter_operator_on_or_before,
-  on_or_after: m.bug_filter_operator_on_or_after,
-  between: m.bug_filter_operator_between,
-  contains: m.bug_filter_operator_contains,
-  not_contains: m.bug_filter_operator_not_contains,
-};
-
-export function getFilterConfig(key: BugFilterKey): FilterFieldConfig {
-  return FILTER_FIELD_CONFIGS.find((f) => f.key === key) ?? FILTER_FIELD_CONFIGS[0];
-}
-
-export function getFilterLabel(key: BugFilterKey): () => string {
-  return getFilterConfig(key).label;
-}
-
-export function getFilterIcon(key: BugFilterKey): LucideIcon {
-  return getFilterConfig(key).icon;
-}
-
-let _idCounter = 0;
-export function generateConditionId(): string {
-  _idCounter++;
-  return `bfc_${Date.now()}_${_idCounter}`;
-}
-
-export function createDefaultCondition(property: BugFilterKey): FilterCondition {
-  const config = getFilterConfig(property);
-  return {
-    id: generateConditionId(),
-    property,
-    operator: config.defaultOperator,
-    value: config.defaultValue ?? "",
-  };
-}
-
-export function serializeFilters(conditions: FilterCondition[]): string | undefined {
-  if (conditions.length === 0) return undefined;
-  return JSON.stringify(conditions.map(({ id, property, operator, value }) => ({ id, property, operator, value })));
-}
-
-export function deserializeFilters(json: string | undefined): FilterCondition[] {
-  if (!json) return [];
-  try {
-    const parsed = JSON.parse(json) as FilterCondition[];
-    return Array.isArray(parsed) ? parsed.filter((c) => c.property && c.operator) : [];
-  } catch {
-    return [];
-  }
-}