Remove old frontend
Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
190
apps/console/src/components/measures/LinkedMeasuresCard.tsx
Normal file
190
apps/console/src/components/measures/LinkedMeasuresCard.tsx
Normal file
@@ -0,0 +1,190 @@
|
||||
import { graphql } from "relay-runtime";
|
||||
import {
|
||||
Card,
|
||||
IconPlusLarge,
|
||||
Button,
|
||||
Tr,
|
||||
Td,
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Th,
|
||||
IconChevronDown,
|
||||
MeasureBadge,
|
||||
IconTrashCan,
|
||||
TrButton,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import type { LinkedMeasuresCardFragment$key } from "./__generated__/LinkedMeasuresCardFragment.graphql";
|
||||
import { useFragment } from "react-relay";
|
||||
import { useMemo, useState } from "react";
|
||||
import { sprintf } from "@probo/helpers";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { LinkedMeasureDialog } from "./LinkedMeasuresDialog.tsx";
|
||||
import clsx from "clsx";
|
||||
|
||||
const linkedMeasureFragment = graphql`
|
||||
fragment LinkedMeasuresCardFragment on Measure {
|
||||
id
|
||||
name
|
||||
state
|
||||
}
|
||||
`;
|
||||
|
||||
type Mutation<Params> = (p: {
|
||||
variables: {
|
||||
input: {
|
||||
measureId: string;
|
||||
} & Params;
|
||||
connections: string[];
|
||||
};
|
||||
}) => void;
|
||||
|
||||
type Props<Params> = {
|
||||
// Measures linked to the element
|
||||
measures: (LinkedMeasuresCardFragment$key & { id: string })[];
|
||||
// Extra params to send to the mutation
|
||||
params: Params;
|
||||
// Disable (action when loading for instance)
|
||||
disabled?: boolean;
|
||||
// ID of the connection to update
|
||||
connectionId: string;
|
||||
// Mutation to attach a measure (will receive {measureId, ...params})
|
||||
onAttach: Mutation<Params>;
|
||||
// Mutation to detach a measure (will receive {measureId, ...params})
|
||||
onDetach: Mutation<Params>;
|
||||
variant?: "card" | "table";
|
||||
};
|
||||
|
||||
/**
|
||||
* Reusable component that displays a list of linked measures
|
||||
*/
|
||||
export function LinkedMeasuresCard<Params>(props: Props<Params>) {
|
||||
const { __ } = useTranslate();
|
||||
const [limit, setLimit] = useState<number | null>(
|
||||
props.variant === "card" ? 4 : null
|
||||
);
|
||||
const measures = useMemo(() => {
|
||||
return limit ? props.measures.slice(0, limit) : props.measures;
|
||||
}, [props.measures, limit]);
|
||||
const showMoreButton = limit !== null && props.measures.length > limit;
|
||||
const variant = props.variant ?? "table";
|
||||
|
||||
const onAttach = (measureId: string) => {
|
||||
props.onAttach({
|
||||
variables: {
|
||||
input: {
|
||||
measureId,
|
||||
...props.params,
|
||||
},
|
||||
connections: [props.connectionId],
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onDetach = (measureId: string) => {
|
||||
props.onDetach({
|
||||
variables: {
|
||||
input: {
|
||||
measureId,
|
||||
...props.params,
|
||||
},
|
||||
connections: [props.connectionId],
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const Wrapper = variant === "card" ? Card : "div";
|
||||
|
||||
return (
|
||||
<Wrapper padded className="space-y-[10px]">
|
||||
{variant === "card" && (
|
||||
<div className="flex justify-between">
|
||||
<div className="text-lg font-semibold">{__("Measures")}</div>
|
||||
<LinkedMeasureDialog
|
||||
connectionId={props.connectionId}
|
||||
disabled={props.disabled}
|
||||
linkedMeasures={props.measures}
|
||||
onLink={onAttach}
|
||||
onUnlink={onDetach}
|
||||
>
|
||||
<Button variant="tertiary" icon={IconPlusLarge}>
|
||||
{__("Link measure")}
|
||||
</Button>
|
||||
</LinkedMeasureDialog>
|
||||
</div>
|
||||
)}
|
||||
<Table className={clsx(variant === "card" && "bg-invert")}>
|
||||
<Thead>
|
||||
<Tr>
|
||||
<Th>{__("Name")}</Th>
|
||||
<Th>{__("State")}</Th>
|
||||
<Th></Th>
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{measures.length === 0 && (
|
||||
<Tr>
|
||||
<Td colSpan={3} className="text-center text-txt-secondary">
|
||||
{__("No measures linked")}
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
{measures.map((measure) => (
|
||||
<MeasureRow key={measure.id} measure={measure} onClick={onDetach} />
|
||||
))}
|
||||
{variant === "table" && (
|
||||
<LinkedMeasureDialog
|
||||
connectionId={props.connectionId}
|
||||
disabled={props.disabled}
|
||||
linkedMeasures={props.measures}
|
||||
onLink={onAttach}
|
||||
onUnlink={onDetach}
|
||||
>
|
||||
<TrButton colspan={3} icon={IconPlusLarge}>
|
||||
{__("Link measure")}
|
||||
</TrButton>
|
||||
</LinkedMeasureDialog>
|
||||
)}
|
||||
</Tbody>
|
||||
</Table>
|
||||
{showMoreButton && (
|
||||
<Button
|
||||
variant="tertiary"
|
||||
onClick={() => setLimit(null)}
|
||||
className="mt-3 mx-auto"
|
||||
icon={IconChevronDown}
|
||||
>
|
||||
{sprintf(__("Show %s more"), props.measures.length - limit)}
|
||||
</Button>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
function MeasureRow(props: {
|
||||
measure: LinkedMeasuresCardFragment$key & { id: string };
|
||||
onClick: (measureId: string) => void;
|
||||
}) {
|
||||
const measure = useFragment(linkedMeasureFragment, props.measure);
|
||||
const organizationId = useOrganizationId();
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (
|
||||
<Tr to={`/organizations/${organizationId}/measures/${measure.id}`}>
|
||||
<Td>{measure.name}</Td>
|
||||
<Td>
|
||||
<MeasureBadge state={measure.state} />
|
||||
</Td>
|
||||
<Td noLink width={50} className="text-end">
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => props.onClick(measure.id)}
|
||||
icon={IconTrashCan}
|
||||
>
|
||||
{__("Unlink")}
|
||||
</Button>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
148
apps/console/src/components/measures/LinkedMeasuresDialog.tsx
Normal file
148
apps/console/src/components/measures/LinkedMeasuresDialog.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
import {
|
||||
Badge,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
IconMagnifyingGlass,
|
||||
IconPlusLarge,
|
||||
IconTrashCan,
|
||||
InfiniteScrollTrigger,
|
||||
Input,
|
||||
Option,
|
||||
Select,
|
||||
Spinner,
|
||||
} from "@probo/ui";
|
||||
import { useTranslate } from "@probo/i18n";
|
||||
import { Suspense, useMemo, useState, type ReactNode } from "react";
|
||||
import { useOrganizationId } from "/hooks/useOrganizationId";
|
||||
import { usePaginatedMeasures } from "/hooks/graph/usePaginatedMeasures";
|
||||
|
||||
type Props = {
|
||||
children: ReactNode;
|
||||
connectionId: string;
|
||||
disabled?: boolean;
|
||||
linkedMeasures?: { id: string }[];
|
||||
onLink: (measureId: string) => void;
|
||||
onUnlink: (measureId: string) => void;
|
||||
};
|
||||
|
||||
export function LinkedMeasureDialog({ children, ...props }: Props) {
|
||||
const { __ } = useTranslate();
|
||||
|
||||
return (
|
||||
<Dialog trigger={children} title={__("Link measures")}>
|
||||
<DialogContent>
|
||||
<Suspense fallback={<Spinner centered />}>
|
||||
<LinkedMeasuresDialogContent {...props} />
|
||||
</Suspense>
|
||||
</DialogContent>
|
||||
<DialogFooter exitLabel={__("Close")} />
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkedMeasuresDialogContent(props: Omit<Props, "children">) {
|
||||
const organizationId = useOrganizationId();
|
||||
const { data, loadNext, hasNext, isLoadingNext } =
|
||||
usePaginatedMeasures(organizationId);
|
||||
const { __ } = useTranslate();
|
||||
const [search, setSearch] = useState("");
|
||||
const [category, setCategory] = useState<string | null>(null);
|
||||
const measures = data.measures?.edges?.map((edge) => edge.node) ?? [];
|
||||
const linkedIds = useMemo(() => {
|
||||
return new Set(props.linkedMeasures?.map((m) => m.id) ?? []);
|
||||
}, [props.linkedMeasures]);
|
||||
|
||||
const filteredMeasures = useMemo(() => {
|
||||
return measures.filter(
|
||||
(measure) =>
|
||||
(category === null || measure.category === category) &&
|
||||
(measure.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
measure.description?.toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
}, [measures, search, category]);
|
||||
|
||||
const categories = useMemo(
|
||||
() => Array.from(new Set(measures.map((m) => m.category))),
|
||||
[measures]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center gap-2 sticky top-0 relative py-4 bg-linear-to-b from-50% from-level-2 to-level-2/0 px-6">
|
||||
<Input
|
||||
icon={IconMagnifyingGlass}
|
||||
placeholder={__("Search measures...")}
|
||||
onValueChange={setSearch}
|
||||
/>
|
||||
<Select
|
||||
value={category ?? ""}
|
||||
placeholder={__("All categories")}
|
||||
onValueChange={setCategory}
|
||||
className="max-w-[180px]"
|
||||
>
|
||||
{categories.map((category) => (
|
||||
<Option key={category} value={category}>
|
||||
{category}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
<div className="divide-y divide-border-low">
|
||||
{filteredMeasures.map((measure) => (
|
||||
<MeasureRow
|
||||
key={measure.id}
|
||||
measure={measure}
|
||||
linkedMeasures={linkedIds}
|
||||
onLink={props.onLink}
|
||||
onUnlink={props.onUnlink}
|
||||
disabled={props.disabled}
|
||||
/>
|
||||
))}
|
||||
{hasNext && (
|
||||
<InfiniteScrollTrigger
|
||||
loading={isLoadingNext}
|
||||
onView={() => loadNext(20)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
type RowProps = {
|
||||
measure: { name: string; category: string; id: string };
|
||||
linkedMeasures: Set<string>;
|
||||
disabled?: boolean;
|
||||
onLink: (measureId: string) => void;
|
||||
onUnlink: (measureId: string) => void;
|
||||
};
|
||||
|
||||
function MeasureRow(props: RowProps) {
|
||||
const { __ } = useTranslate();
|
||||
|
||||
const isLinked = props.linkedMeasures.has(props.measure.id);
|
||||
const onClick = isLinked ? props.onUnlink : props.onLink;
|
||||
const IconComponent = isLinked ? IconTrashCan : IconPlusLarge;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="py-4 flex items-center gap-4 hover:bg-subtle cursor-pointer px-6 w-full"
|
||||
onClick={() => onClick(props.measure.id)}
|
||||
>
|
||||
{props.measure.name}
|
||||
<Badge variant="neutral">{props.measure.category}</Badge>
|
||||
<Button
|
||||
disabled={props.disabled}
|
||||
className="ml-auto"
|
||||
variant={isLinked ? "secondary" : "primary"}
|
||||
asChild
|
||||
>
|
||||
<span>
|
||||
<IconComponent size={16} /> {isLinked ? __("Unlink") : __("Link")}
|
||||
</span>
|
||||
</Button>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
59
apps/console/src/components/measures/__generated__/LinkedMeasuresCardFragment.graphql.ts
generated
Normal file
59
apps/console/src/components/measures/__generated__/LinkedMeasuresCardFragment.graphql.ts
generated
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @generated SignedSource<<b7482b43ce0f4dfab470c35e806acf50>>
|
||||
* @lightSyntaxTransform
|
||||
* @nogrep
|
||||
*/
|
||||
|
||||
/* tslint:disable */
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck
|
||||
|
||||
import { ReaderFragment } from 'relay-runtime';
|
||||
export type MeasureState = "IMPLEMENTED" | "IN_PROGRESS" | "NOT_APPLICABLE" | "NOT_STARTED";
|
||||
import { FragmentRefs } from "relay-runtime";
|
||||
export type LinkedMeasuresCardFragment$data = {
|
||||
readonly id: string;
|
||||
readonly name: string;
|
||||
readonly state: MeasureState;
|
||||
readonly " $fragmentType": "LinkedMeasuresCardFragment";
|
||||
};
|
||||
export type LinkedMeasuresCardFragment$key = {
|
||||
readonly " $data"?: LinkedMeasuresCardFragment$data;
|
||||
readonly " $fragmentSpreads": FragmentRefs<"LinkedMeasuresCardFragment">;
|
||||
};
|
||||
|
||||
const node: ReaderFragment = {
|
||||
"argumentDefinitions": [],
|
||||
"kind": "Fragment",
|
||||
"metadata": null,
|
||||
"name": "LinkedMeasuresCardFragment",
|
||||
"selections": [
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "id",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "name",
|
||||
"storageKey": null
|
||||
},
|
||||
{
|
||||
"alias": null,
|
||||
"args": null,
|
||||
"kind": "ScalarField",
|
||||
"name": "state",
|
||||
"storageKey": null
|
||||
}
|
||||
],
|
||||
"type": "Measure",
|
||||
"abstractKey": null
|
||||
};
|
||||
|
||||
(node as any).hash = "741a216c02732c1ff97b265ac8dbf39b";
|
||||
|
||||
export default node;
|
||||
Reference in New Issue
Block a user