robodev 0.11.0 → 0.12.0

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsInfiniteTablePage.tsx

@@ -0,0 +1,79 @@
+import { Typography, useSorting } from "@povio/ui";
+import type { SortingState } from "@tanstack/react-table";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+import { StringUtils } from "@/utils/string.utils";
+
+import { PlanetsTableInfinite } from "./table/PlanetsTableInfinite";
+import { usePlanetTableFilters } from "./table/usePlanetTableFilters";
+import { PlanetsTableSummary } from "./PlanetsTableSummary";
+
+// Keep the first two pages tall enough for the intersection sentinel to leave and re-enter
+// the viewport on larger collections. With 10-row pages it stayed visible after page two,
+// so the observer never emitted another intersection and the loader remained indefinitely.
+const PAGE_SIZE = 20;
+const DEFAULT_SORTING: SortingState = [{ id: "discoveryDate", desc: true }];
+const getPlanetRowId = (planet: PlanetModels.PlanetsGetResponseDto) => planet.id;
+
+interface PlanetsInfiniteTablePageProps {
+  onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void;
+}
+
+export function PlanetsInfiniteTablePage({ onEdit }: PlanetsInfiniteTablePageProps) {
+  const { t } = useTranslation();
+
+  const { apiFilters, filterControls } = usePlanetTableFilters();
+
+  const { order, setSorting, sorting } = useSorting();
+  const effectiveSorting = sorting.length > 0 ? sorting : DEFAULT_SORTING;
+  const effectiveOrder = order || "-discoveryDate";
+
+  const { data, isLoading, hasNextPage, isFetchingNextPage, fetchNextPage } =
+    PlanetQueries.usePaginateInfinite({
+      cursor: undefined,
+      limit: PAGE_SIZE,
+      filter: apiFilters,
+      order: StringUtils.emptyToUndefined(effectiveOrder),
+    });
+
+  const planets = data?.pages.flatMap((page) => page.items ?? []) ?? [];
+  const totalCount = data?.pages[0]?.totalItems ?? planets.length;
+  const handleFetchNextPage = useCallback(() => void fetchNextPage(), [fetchNextPage]);
+
+  return (
+    <div className="flex flex-col gap-4 pb-12">
+      {filterControls}
+
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <PlanetsTableInfinite
+          className="min-w-[920px]"
+          items={planets}
+          getRowId={getPlanetRowId}
+          onRowClick={onEdit}
+          onEdit={onEdit}
+          setSorting={setSorting}
+          sorting={effectiveSorting}
+          hasNextPage={Boolean(hasNextPage)}
+          isFetchingNextPage={isFetchingNextPage}
+          fetchNextPage={handleFetchNextPage}
+        />
+      )}
+
+      {!isLoading && planets.length === 0 && (
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.planets.page.empty)}
+        </Typography>
+      )}
+
+      {!isLoading ? (
+        <PlanetsTableSummary displayedCount={planets.length} totalCount={totalCount} />
+      ) : null}
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsPage.tsx

@@ -0,0 +1,65 @@
+import { Button } from "@povio/ui";
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { PlanetEditPage } from "@/components/features/planets/details/PlanetEditPage";
+import { PageHeader } from "@/components/shared/page/PageHeader";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { PlanetCreateModal } from "./PlanetCreateModal";
+import { PlanetsGridPage } from "./PlanetsGridPage";
+import { PlanetsInfiniteTablePage } from "./PlanetsInfiniteTablePage";
+import { PlanetsTablePage } from "./PlanetsTablePage";
+import { type PlanetsView, PlanetsViewTabs } from "./PlanetsViewTabs";
+
+export function PlanetsPage() {
+  const { t } = useTranslation();
+  const [view, setView] = useState<PlanetsView>("table");
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingPlanet, setEditingPlanet] = useState<PlanetModels.PlanetsGetResponseDto>();
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PageHeader
+        actions={
+          <Button
+            color="primary"
+            icon={Plus}
+            size="xs"
+            variant="contained"
+            onPress={() => setIsCreateOpen(true)}
+          >
+            {t(($) => $.planets.page.addPlanet)}
+          </Button>
+        }
+        title={t(($) => $.planets.page.title)}
+      />
+
+      <div className="flex w-full justify-between gap-1 border-elevation-outline-default-1 border-b pb-1-5">
+        <PlanetsViewTabs
+          value={view}
+          onChange={setView}
+        />
+      </div>
+
+      {view === "grid" && <PlanetsGridPage />}
+      {view === "table" && <PlanetsTablePage onEdit={setEditingPlanet} />}
+      {view === "infinite" && <PlanetsInfiniteTablePage onEdit={setEditingPlanet} />}
+
+      <PlanetCreateModal
+        isOpen={isCreateOpen}
+        onClose={() => setIsCreateOpen(false)}
+      />
+
+      {editingPlanet ? (
+        <PlanetEditPage
+          planet={editingPlanet}
+          onClose={() => setEditingPlanet(undefined)}
+          onDeleted={() => setEditingPlanet(undefined)}
+          onSaved={() => setEditingPlanet(undefined)}
+        />
+      ) : null}
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsTablePage.tsx

@@ -0,0 +1,72 @@
+import { Typography, useSorting } from "@povio/ui";
+import type { SortingState } from "@tanstack/react-table";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+import { StringUtils } from "@/utils/string.utils";
+
+import { PlanetsTable } from "./table/PlanetsTable";
+import { usePlanetTableFilters } from "./table/usePlanetTableFilters";
+import { PlanetsTableSummary } from "./PlanetsTableSummary";
+
+interface PlanetsTablePageProps {
+  onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void;
+}
+
+const DEFAULT_SORTING: SortingState = [{ id: "discoveryDate", desc: true }];
+const EMPTY_PLANETS: PlanetModels.PlanetsGetResponseDto[] = [];
+const getPlanetRowId = (planet: PlanetModels.PlanetsGetResponseDto) => planet.id;
+
+export function PlanetsTablePage({ onEdit }: PlanetsTablePageProps) {
+  const { t } = useTranslation();
+
+  const { apiFilters, filterControls } = usePlanetTableFilters();
+
+  const { order, setSorting, sorting } = useSorting();
+  const effectiveSorting = sorting.length > 0 ? sorting : DEFAULT_SORTING;
+  const effectiveOrder = order || "-discoveryDate";
+
+  const { data, isLoading } = PlanetQueries.usePaginate({
+    page: 1,
+    cursor: undefined,
+    limit: 20,
+    filter: apiFilters,
+    order: StringUtils.emptyToUndefined(effectiveOrder),
+  });
+  const planets = data?.items ?? EMPTY_PLANETS;
+
+  return (
+    <div className="flex flex-col gap-4 pb-12">
+      {filterControls}
+
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <PlanetsTable
+          className="min-w-[920px]"
+          items={planets}
+          getRowId={getPlanetRowId}
+          onRowClick={onEdit}
+          onEdit={onEdit}
+          setSorting={setSorting}
+          sorting={effectiveSorting}
+        />
+      )}
+
+      {!isLoading && planets.length === 0 && (
+        <Typography size="body-3" className="text-text-default-2">
+          {t(($) => $.planets.page.empty)}
+        </Typography>
+      )}
+
+      {!isLoading ? (
+        <PlanetsTableSummary
+          displayedCount={planets.length}
+          totalCount={data?.totalItems ?? planets.length}
+        />
+      ) : null}
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsTableSummary.tsx

@@ -0,0 +1,29 @@
+import { Typography } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+interface PlanetsTableSummaryProps {
+  displayedCount: number;
+  totalCount: number;
+}
+
+export function PlanetsTableSummary({ displayedCount, totalCount }: PlanetsTableSummaryProps) {
+  const { t } = useTranslation();
+
+  if (totalCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-sticky flex min-h-10 justify-end gap-2 border-elevation-outline-default-1 border-t bg-elevation-fill-default-1 px-2 py-3 shadow-1">
+      {displayedCount >= totalCount ? (
+        <Typography size="label-3">{t(($) => $.planets.table.allLoaded)}</Typography>
+      ) : null}
+      <Typography
+        className="text-text-default-3"
+        size="label-3"
+      >
+        {t(($) => $.planets.table.showing, { displayed: displayedCount, total: totalCount })}
+      </Typography>
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsViewTabs.tsx

@@ -0,0 +1,79 @@
+import { Button, Menu } from "@povio/ui";
+import { ChevronDown } from "lucide-react";
+import { type Key, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export type PlanetsView = "grid" | "table" | "infinite";
+
+interface PlanetsViewTabsProps {
+  value: PlanetsView;
+  onChange: (view: PlanetsView) => void;
+}
+
+export function PlanetsViewTabs({ value, onChange }: PlanetsViewTabsProps) {
+  const { t } = useTranslation();
+  const [isCompact, setIsCompact] = useState(false);
+  const items: { value: PlanetsView; label: string }[] = [
+    { value: "grid", label: t(($) => $.planets.views.grid) },
+    { value: "table", label: t(($) => $.planets.views.table) },
+    { value: "infinite", label: t(($) => $.planets.views.infinite) },
+  ];
+  const activeItem = items.find((item) => item.value === value) ?? items[0];
+
+  useEffect(() => {
+    const update = () => setIsCompact(window.innerWidth < 850);
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  if (isCompact) {
+    return (
+      <Menu
+        items={items.map((item) => ({ id: item.value, label: item.label }))}
+        onAction={(key: Key) => onChange(key as PlanetsView)}
+        trigger={
+          <Button
+            type="button"
+            color="primary"
+            variant="ghost"
+            size="xs"
+            toggle
+            isSelected
+            icon={ChevronDown}
+            iconPosition="right"
+          >
+            {activeItem.label}
+          </Button>
+        }
+      />
+    );
+  }
+
+  return (
+    <div
+      aria-label={t(($) => $.planets.views.label)}
+      className="flex shrink-0 gap-1"
+      role="group"
+    >
+      {items.map((item) => {
+        const isActive = item.value === value;
+
+        return (
+          <Button
+            key={item.value}
+            type="button"
+            color="primary"
+            variant="ghost"
+            size="xs"
+            toggle
+            isSelected={isActive}
+            onPress={() => onChange(item.value)}
+          >
+            {item.label}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTable.tsx

@@ -0,0 +1,30 @@
+import { Table } from "@povio/ui";
+import type { TableWrapperProps } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { getPlanetsTableColumns } from "./planetsTableColumns";
+
+type PlanetTableItem = PlanetModels.PlanetsGetResponseDto;
+interface PlanetsTableProps extends TableWrapperProps<PlanetTableItem> {
+  onEdit: (planet: PlanetTableItem) => void;
+}
+
+export function PlanetsTable({ className, onEdit, onRowClick, showCellBorder = false, ...props }: PlanetsTableProps) {
+  const { t } = useTranslation();
+
+  const columns = getPlanetsTableColumns(t, onEdit);
+
+  return (
+    <div className="-mx-4 overflow-x-auto">
+      <Table
+        {...props}
+        className={className}
+        columns={columns}
+        onRowClick={onRowClick}
+        showCellBorder={showCellBorder}
+      />
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTableActions.tsx

@@ -0,0 +1,64 @@
+import { Confirmation, InlineIconButton, useToast } from "@povio/ui";
+import { Pencil, Trash } from "lucide-react";
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { TableActions } from "@/components/shared/ui/TableActions";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+
+interface PlanetsTableActionsProps {
+  onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void;
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetsTableActions({ onEdit, planet }: PlanetsTableActionsProps) {
+  const { t } = useTranslation();
+
+  const { successToast, errorToast } = useToast();
+  const { confirm } = Confirmation.useConfirmation();
+
+  const deletePlanet = PlanetQueries.useDeleteApiPlanetsById();
+
+  const handleRemove = useCallback(async () => {
+    // Row actions should stop propagation in TableActions so the row click does not also open details.
+    const confirmed = await confirm({
+      heading: t(($) => $.planets.removeConfirm.heading),
+      description: t(($) => $.planets.removeConfirm.description, { name: planet.name }),
+      confirmLabel: t(($) => $.planets.removeConfirm.confirm),
+      cancelLabel: t(($) => $.planets.removeConfirm.cancel),
+      confirmColor: "error",
+      cancelVariant: "subtle",
+      textAlign: "center",
+      buttonSize: "s",
+    });
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await deletePlanet.mutateAsync({ id: planet.id });
+      successToast({ text: t(($) => $.planets.removeConfirm.success) });
+    } catch {
+      errorToast({ text: t(($) => $.planets.removeConfirm.error) });
+    }
+  }, [confirm, deletePlanet, errorToast, planet, successToast, t]);
+
+  return (
+    <TableActions>
+      <InlineIconButton
+        label={t(($) => $.planets.actions.edit)}
+        icon={Pencil}
+        color="secondary"
+        onPress={() => onEdit(planet)}
+      />
+      <InlineIconButton
+        label={t(($) => $.planets.actions.remove)}
+        icon={Trash}
+        color="error"
+        onPress={handleRemove}
+      />
+    </TableActions>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/PlanetsTableInfinite.tsx

@@ -0,0 +1,36 @@
+import { InfiniteTable } from "@povio/ui";
+import type { InfiniteTableWrapperProps } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import { getPlanetsTableColumns } from "./planetsTableColumns";
+
+type PlanetInfiniteTableItem = PlanetModels.PlanetsGetResponseDto;
+interface PlanetsTableInfiniteProps extends InfiniteTableWrapperProps<PlanetInfiniteTableItem> {
+  onEdit: (planet: PlanetInfiniteTableItem) => void;
+}
+
+export function PlanetsTableInfinite({
+  className,
+  onEdit,
+  onRowClick,
+  showCellBorder = false,
+  ...props
+}: PlanetsTableInfiniteProps) {
+  const { t } = useTranslation();
+
+  const columns = getPlanetsTableColumns(t, onEdit);
+
+  return (
+    <div className="-mx-4 overflow-x-auto">
+      <InfiniteTable
+        {...props}
+        className={className}
+        columns={columns}
+        onRowClick={onRowClick}
+        showCellBorder={showCellBorder}
+      />
+    </div>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/planetsTableColumns.tsx

@@ -0,0 +1,72 @@
+import { dynamicColumns } from "@povio/ui";
+import type { TFunction } from "i18next";
+import { z } from "zod";
+
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+
+import { PlanetsTableActions } from "./PlanetsTableActions";
+
+const PLANET_SORTABLE_COLUMN_SCHEMA = z.enum(["name", "discoveryDate"]);
+
+export function getPlanetsTableColumns(t: TFunction, onEdit: (planet: PlanetModels.PlanetsGetResponseDto) => void) {
+  return dynamicColumns({
+    schema: PlanetModels.PlanetsGetResponseDtoSchema,
+    options: {
+      // dynamicColumns keeps table columns aligned with generated OpenAPI models and sortable enum metadata.
+      columns: {
+        name: {
+          header: t(($) => $.planets.table.name),
+          meta: { filterKey: "search" },
+          size: 224,
+          minSize: 180,
+          maxSize: 320,
+        },
+        description: {
+          header: t(($) => $.planets.table.description),
+          size: 360,
+          minSize: 280,
+        },
+        alienName: {
+          header: t(($) => $.planets.table.alien),
+          meta: { filterKey: "alienId" },
+          size: 192,
+          minSize: 160,
+          maxSize: 260,
+        },
+        discoveryDate: {
+          header: t(($) => $.planets.table.discoveryDate),
+          size: 176,
+          minSize: 140,
+          maxSize: 220,
+          cell: ({ value }) => (value ? DateUtils.formatDate(value) : null),
+        },
+        creatorName: {
+          header: t(($) => $.planets.table.creator),
+          size: 160,
+          minSize: 128,
+          maxSize: 220,
+        },
+      },
+      sortable: PLANET_SORTABLE_COLUMN_SCHEMA,
+      customColumns: {
+        // Keep per-row actions as a custom column so generated data columns stay declarative.
+        actions: {
+          header: t(($) => $.planets.table.actions),
+          meta: { filterKey: "clear", headerClass: "[&>*]:ml-auto" },
+          size: 112,
+          minSize: 96,
+          maxSize: 140,
+          cell: ({ row }) => (
+            <PlanetsTableActions
+              planet={row.original}
+              onEdit={onEdit}
+            />
+          ),
+        },
+      },
+      order: ["name", "description", "alienName", "discoveryDate", "creatorName", "actions"],
+      emptyValue: "-",
+    },
+  });
+}

package/templates/space/apps/fe/src/components/features/planets/list/table/usePlanetTableFilters.tsx

@@ -0,0 +1,102 @@
+import { Button, DateRangePicker, QueryAutocomplete, TextInput, useFilters } from "@povio/ui/tanstack";
+import { Search } from "lucide-react";
+import { type Key, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+
+import "../PlanetsFilters.css";
+
+export type PlanetTableFilterValues = NonNullable<PlanetModels.PlanetPaginateFilterParam>;
+
+export function usePlanetTableFilters() {
+  const { t } = useTranslation();
+  const { clearAllFilters, filterData, setFilterValue } = useFilters<PlanetTableFilterValues>(
+    {},
+    "",
+    PlanetModels.PlanetPaginateFilterParamSchema,
+  );
+  const handleSearchChange = useCallback(
+    (search: string) => setFilterValue({ search: search || undefined }),
+    [setFilterValue],
+  );
+  const handleAlienChange = useCallback(
+    (alienId: Key | null) => setFilterValue({ alienId: alienId ? String(alienId) : undefined }),
+    [setFilterValue],
+  );
+  const handleDiscoveryDateChange = useCallback(
+    (discoveryDate: PlanetTableFilterValues["discoveryDate"] | null) =>
+      setFilterValue({ discoveryDate: discoveryDate ?? undefined }),
+    [setFilterValue],
+  );
+  const handleClearAllFilters = useCallback(() => clearAllFilters(), [clearAllFilters]);
+
+  const discoveryDateValue = filterData.discoveryDate
+    ? {
+        start: filterData.discoveryDate.start ?? null,
+        end: filterData.discoveryDate.end ?? null,
+      }
+    : null;
+
+  const filterControls = (
+    <div className="flex flex-wrap items-end gap-1">
+      <div className="min-w-48 flex-1">
+        <TextInput
+          value={filterData.search ?? ""}
+          onChange={handleSearchChange}
+          label={t(($) => $.planets.filters.search)}
+          leadingIcon={Search}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          hideLabel
+          isClearable
+        />
+      </div>
+      <div className="planets-filters__control-without-label min-w-48 flex-1">
+        <QueryAutocomplete
+          key={filterData.alienId ?? "empty"}
+          value={filterData.alienId ?? null}
+          onChange={handleAlienChange}
+          query={AlienQueries.useGetLabels}
+          label={t(($) => $.planets.filters.alien)}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          isClearable
+        />
+      </div>
+      <div className="planets-filters__control-without-label min-w-48 flex-1">
+        <DateRangePicker
+          value={discoveryDateValue}
+          onChange={handleDiscoveryDateChange}
+          label={t(($) => $.planets.filters.discoveryDate)}
+          as="filter"
+          size="extra-small"
+          variant="filled"
+          isClearable
+          fullIso
+        />
+      </div>
+      <Button
+        variant="subtle"
+        color="secondary"
+        size="xs"
+        onPress={handleClearAllFilters}
+      >
+        {t(($) => $.planets.filters.clearAll)}
+      </Button>
+    </div>
+  );
+
+  const apiFilters: PlanetModels.PlanetPaginateFilterParam = {
+    search: filterData.search || undefined,
+    alienId: filterData.alienId || undefined,
+    discoveryDate: filterData.discoveryDate || undefined,
+  };
+  return {
+    apiFilters,
+    filterControls,
+  };
+}