robodev 0.10.0 → 0.12.0

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

@@ -0,0 +1,89 @@
+import { IconButton, Link, Typography } from "@povio/ui";
+import { Pencil } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import { useAuth } from "@/hooks/useAuth";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+import { DateUtils } from "@/utils/date.utils";
+import { getFallbackImageUrl } from "@/utils/image-fallback";
+
+interface PlanetCardProps {
+  planet: PlanetModels.PlanetsGetResponseDto;
+}
+
+export function PlanetCard({ planet }: PlanetCardProps) {
+  const { t } = useTranslation();
+  const { user } = useAuth();
+
+  const imageSrc = planet.image?.url ?? getFallbackImageUrl({ width: 400, height: 300 });
+  const createdDate = DateUtils.formatDate(new Date(planet.createdAt));
+  const creatorName = planet.creatorName ?? t(($) => $.planets.card.unknownCreator);
+  // Match the details/edit pages: show owner-only edit affordances, but keep backend authorization authoritative.
+  const canEdit = user?.id === planet.userId;
+
+  return (
+    <div className="relative overflow-hidden rounded-m border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-sm transition-all hover:border-elevation-outline-default-2 hover:bg-elevation-fill-default-2">
+      {canEdit && (
+        <div className="absolute right-2 top-2 z-10">
+          <IconButton
+            size="xs"
+            variant="subtle"
+            label={t(($) => $.planets.actions.edit)}
+            icon={Pencil}
+            color="secondary"
+            link={{ to: "/planets/$id/edit", params: { id: planet.id } }}
+          />
+        </div>
+      )}
+
+      <Link
+        to="/planets/$id"
+        params={{ id: planet.id }}
+        className="flex flex-col no-underline! outline-none focus-visible:ring-2 focus-visible:ring-interactive-outline-primary-idle"
+      >
+        <div className="aspect-video w-full bg-elevation-fill-default-2">
+          <img
+            src={imageSrc}
+            alt=""
+            className="h-full w-full object-cover"
+          />
+        </div>
+
+        <div className="flex flex-col gap-2 p-4">
+          <Typography
+            size="title-5"
+            variant="prominent-1"
+            as="h3"
+            className="min-w-0 flex-1 text-text-default-1"
+          >
+            {planet.name}
+          </Typography>
+          {planet.description && (
+            <Typography
+              size="body-3"
+              className="line-clamp-2 w-full text-text-default-2"
+            >
+              {planet.description}
+            </Typography>
+          )}
+
+          <Typography
+            size="label-3"
+            className="pt-2 text-text-default-2"
+          >
+            {t(($) => $.planets.card.createdBy, { name: creatorName, date: createdDate })}
+          </Typography>
+
+          {planet.alienName && (
+            <Typography
+              size="label-3"
+              className="text-text-default-2"
+            >
+              {t(($) => $.planets.card.alien, { name: planet.alienName })}
+            </Typography>
+          )}
+        </div>
+      </Link>
+    </div>
+  );
+}

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

@@ -0,0 +1,179 @@
+import {
+  Button,
+  DatePicker,
+  FileUpload,
+  Modal,
+  QueryAutocomplete,
+  TextArea,
+  TextInput,
+  Typography,
+  useForm,
+  useToast,
+} from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { RowInputWrapper } from "@/components/shared/forms/RowInputWrapper";
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import { MediaModels } from "@/openapi/media/media.models";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+import { useMediaUploadHandler } from "@/utils/media-upload";
+
+interface PlanetCreateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const useAlienLabelsQuery = AlienQueries.useGetLabels as never;
+
+export function PlanetCreateModal({ isOpen, onClose }: PlanetCreateModalProps) {
+  const { t } = useTranslation();
+  const createPlanet = PlanetQueries.useCreate();
+  const { successToast, errorToast } = useToast();
+  // Generated schemas drive form typing and validation; do not import backend types in frontend code.
+  const form = useForm({
+    zodSchema: PlanetModels.PlanetsCreateRequestDtoSchema,
+    defaultValues: {
+      name: "",
+      alienId: undefined,
+      discoveryDate: undefined,
+      description: "",
+      image: undefined,
+    },
+  });
+
+  const handleImageUpload = useMediaUploadHandler({
+    resourceName: MediaModels.MediaResourceName["planet-image"],
+    onUploaded: (media) => form.setFieldValue("image", { id: media.id }),
+  });
+
+  const handleImageChange = (file: File | null) => {
+    if (!file) {
+      form.setFieldValue("image", undefined);
+    }
+  };
+
+  const onSubmit = async (data: PlanetModels.PlanetsCreateRequestDto) => {
+    try {
+      await createPlanet.mutateAsync({ data });
+      successToast({ text: t(($) => $.planets.create.success) });
+      form.reset();
+      onClose();
+    } catch {
+      errorToast({ text: t(($) => $.planets.create.error) });
+    }
+  };
+
+  const handleClose = () => {
+    form.reset();
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      aside="right"
+      showCloseIcon
+      modalClassName="h-full min-w-0 overflow-y-auto"
+    >
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex w-full min-w-0 flex-col gap-4"
+      >
+        <Typography
+          size="title-5"
+          variant="prominent-1"
+          as="h2"
+          className="mb-2 text-text-default-1"
+        >
+          {t(($) => $.planets.create.title)}
+        </Typography>
+
+        <RowInputWrapper
+          label={t(($) => $.planets.create.name)}
+          isRequired
+        >
+          <TextInput
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "name" }}
+            label={t(($) => $.planets.create.name)}
+            placeholder={t(($) => $.planets.create.namePlaceholder)}
+            hideLabel
+            isRequired
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.alien)}>
+          <QueryAutocomplete
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "alienId" }}
+            query={useAlienLabelsQuery}
+            label={t(($) => $.planets.create.alien)}
+            placeholder={t(($) => $.planets.create.alienPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.discoveryDate)}>
+          <DatePicker
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "discoveryDate" }}
+            label={t(($) => $.planets.create.discoveryDate)}
+            placeholder={t(($) => $.planets.create.discoveryDatePlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <RowInputWrapper label={t(($) => $.planets.create.description)}>
+          <TextArea
+            variant="filled"
+            size="extra-small"
+            field={{ form, name: "description" }}
+            label={t(($) => $.planets.create.description)}
+            placeholder={t(($) => $.planets.create.descriptionPlaceholder)}
+            hideLabel
+          />
+        </RowInputWrapper>
+
+        <FileUpload
+          label={t(($) => $.planets.create.image)}
+          emptyText={t(($) => $.planets.create.imageEmptyText)}
+          uploadText={t(($) => $.planets.create.imageUploadText)}
+          browseText={t(($) => $.planets.create.imageBrowseText)}
+          acceptedFileTypes={["image/jpeg", "image/png", "image/webp"]}
+          onChange={handleImageChange}
+          fileUpload={handleImageUpload}
+        />
+
+        <div className="mt-6 flex items-center justify-end gap-2 self-end">
+          <Button
+            type="button"
+            variant="outlined"
+            size="xs"
+            color="secondary"
+            width="hug"
+            onPress={handleClose}
+          >
+            {t(($) => $.planets.create.cancel)}
+          </Button>
+
+          <Button
+            type="submit"
+            variant="contained"
+            size="xs"
+            color="primary"
+            width="hug"
+            isDisabled={createPlanet.isPending}
+            isLoading={createPlanet.isPending}
+          >
+            {t(($) => $.planets.create.submit)}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/templates/space/apps/fe/src/components/features/planets/list/PlanetsFilters.css

@@ -0,0 +1,3 @@
+.planets-filters__control-without-label label {
+  display: none !important;
+}

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

@@ -0,0 +1,73 @@
+import { Button, DateRangePicker, QueryAutocomplete } from "@povio/ui/tanstack";
+import type { FilterStore } from "@povio/ui/tanstack";
+import { useTranslation } from "react-i18next";
+
+import { AlienQueries } from "@/openapi/alien/alien.queries";
+import type { PlanetModels } from "@/openapi/planet/planet.models";
+
+import "./PlanetsFilters.css";
+
+export type PlanetsFiltersValue = NonNullable<PlanetModels.PlanetPaginateFilterParam>;
+
+interface PlanetsFiltersProps {
+  filters: FilterStore<PlanetsFiltersValue>;
+}
+
+function getDateRangeValue(value: PlanetsFiltersValue["discoveryDate"]) {
+  if (!value) {
+    return null;
+  }
+
+  return {
+    start: value.start ?? null,
+    end: value.end ?? null,
+  };
+}
+
+export function PlanetsFilters({ filters }: PlanetsFiltersProps) {
+  const { t } = useTranslation();
+  const handleClearAllFilters = () => filters.clearAllFilters();
+
+  return (
+    <div className="flex flex-wrap items-end gap-1 *:w-fit!">
+      {/* QueryAutocomplete works well with lightweight label endpoints instead of loading full related records. */}
+      <div className="planets-filters__control-without-label">
+        <QueryAutocomplete
+          value={filters.filterData.alienId ?? null}
+          onChange={(alienId) => filters.setFilterValue({ alienId: alienId ? String(alienId) : undefined })}
+          query={AlienQueries.useGetLabels}
+          label={t(($) => $.planets.filters.alien)}
+          placeholder={t(($) => $.planets.filters.alienPlaceholder)}
+          isClearable
+          as="filter"
+          size="extra-small"
+          variant="filled"
+        />
+      </div>
+
+      <div className="planets-filters__control-without-label">
+        <DateRangePicker
+          value={getDateRangeValue(filters.filterData.discoveryDate)}
+          onChange={(discoveryDate) => filters.setFilterValue({ discoveryDate: discoveryDate ?? undefined })}
+          label={t(($) => $.planets.filters.discoveryDate)}
+          placeholder={t(($) => $.planets.filters.discoveryDatePlaceholder)}
+          isClearable
+          // fullIso matches the backend z.iso.datetime schema and avoids local date parsing ambiguity.
+          fullIso
+          as="filter"
+          size="extra-small"
+          variant="filled"
+        />
+      </div>
+
+      <Button
+        variant="subtle"
+        color="secondary"
+        size="xs"
+        onPress={handleClearAllFilters}
+      >
+        {t(($) => $.planets.filters.clearAll)}
+      </Button>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { Typography, useFilters } from "@povio/ui";
+import { useTranslation } from "react-i18next";
+
+import { LoadingState } from "@/components/shared/layout/LoadingState";
+import { PlanetModels } from "@/openapi/planet/planet.models";
+import { PlanetQueries } from "@/openapi/planet/planet.queries";
+
+import { PlanetCard } from "./PlanetCard";
+import { PlanetsFilters, type PlanetsFiltersValue } from "./PlanetsFilters";
+
+export function PlanetsGridPage() {
+  const { t } = useTranslation();
+  const filters = useFilters<PlanetsFiltersValue>({}, "", PlanetModels.PlanetPaginateFilterParamSchema);
+
+  const { data, isLoading } = PlanetQueries.usePaginate({
+    page: 1,
+    cursor: undefined,
+    limit: 20,
+    filter: filters.filterData,
+    order: "-discoveryDate",
+  });
+  const planets = data?.items ?? [];
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PlanetsFilters filters={filters} />
+
+      {isLoading ? (
+        <LoadingState />
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+          {planets.map((planet) => (
+            <PlanetCard
+              key={planet.id}
+              planet={planet}
+            />
+          ))}
+        </div>
+      )}
+
+      {!isLoading && planets.length === 0 && (
+        <Typography
+          size="body-3"
+          className="text-text-default-2"
+        >
+          {t(($) => $.planets.page.empty)}
+        </Typography>
+      )}
+    </div>
+  );
+}

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>
+  );
+}