# Übersichtsseite

```tsx
import {
  ActionGroup,
  Avatar,
  Button,
  Content,
  ContextMenu,
  ContextMenuTrigger,
  Flex,
  Heading,
  IconChevronDown,
  IconDomain,
  IconHome,
  IconInfo,
  IconMove,
  IconSubdomain,
  IconVhost,
  LayoutCard,
  ListItemView,
  MenuItem,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const DomainList = typedList<{
    id: string;
    domain: string;
    type: string;
    target?: string;
  }>();

  return (
    <Flex direction="column" gap="m">
      <Heading level={1} color="dark">
        Domains
      </Heading>
      <LayoutCard>
        <DomainList.List
          aria-label="Domains"
          loadingItemsCount={3}
          getItemId={(domain) => domain.id}
        >
          <DomainList.StaticData
            data={[
              {
                id: "1",
                domain: "my-domain.de",
                type: "Domain",
                target: "Mein Blog",
              },
              {
                id: "2",
                domain: "www.my-domain.de",
                type: "Subdomain",
                target: "Mein Blog",
              },
              {
                id: "3",
                domain: "one-more-domain.com",
                type: "Domain",
                target: "Mein Shop",
              },
            ]}
          />
          <DomainList.Search />
          <DomainList.Filter name="Typ" property="type" />
          <DomainList.Item
            textValue={(domain) => domain.domain}
          >
            {(domain) => (
              <ListItemView>
                <Avatar
                  color={
                    domain.type === "Projekt-Domain"
                      ? "violet"
                      : domain.type === "Subdomain"
                        ? "green"
                        : domain.type === "Domain"
                          ? "blue"
                          : "teal"
                  }
                >
                  {domain.type === "Projekt-Domain" ? (
                    <IconHome />
                  ) : domain.type === "Subdomain" ? (
                    <IconSubdomain />
                  ) : domain.type === "Domain" ? (
                    <IconDomain />
                  ) : (
                    <IconVhost />
                  )}
                </Avatar>
                <Heading>{domain.domain}</Heading>
                <Text>{domain.type}</Text>
                <Content>
                  <small>
                    {domain.target
                      ? domain.target
                      : "Kein Ziel"}
                  </small>
                </Content>
                <ContextMenu>
                  <MenuItem>
                    <IconInfo />
                    <Text>Details anzeigen</Text>
                  </MenuItem>
                </ContextMenu>
              </ListItemView>
            )}
          </DomainList.Item>
          <ActionGroup>
            <ContextMenuTrigger>
              <Button>
                <Text>Hinzufügen</Text>
                <IconChevronDown />
              </Button>
              <ContextMenu>
                <MenuItem>
                  <IconDomain />
                  <Text>Domain bestellen</Text>
                </MenuItem>
                <MenuItem>
                  <IconMove />
                  <Text>Domain umziehen</Text>
                </MenuItem>
                <MenuItem>
                  <IconVhost />
                  <Text>vHost einrichten</Text>
                </MenuItem>
                <MenuItem>
                  <IconSubdomain />
                  <Text>Subdomain anlegen</Text>
                </MenuItem>
              </ContextMenu>
            </ContextMenuTrigger>
          </ActionGroup>
        </DomainList.List>
      </LayoutCard>
    </Flex>
  );
}
```

---

# Verwendung

Verwende die Übersichtsseite, wenn Nutzer aus **vielen gleichartigen Objekten**
das passende auswählen und anschließend im Detail bearbeiten sollen. Die Tiefe
eines einzelnen Objekts gehört auf seine
[Detailseite](https://flow.mittwald.de/templates/seiten/detailseite); ist die Liste nur ein Abschnitt
neben anderen Inhalten, gehört sie in ein
[Dashboard](https://flow.mittwald.de/templates/seiten/dashboard).

---

# Aufbau

- **Content Header** – Eine [Heading](https://flow.mittwald.de/components/content/heading) als H1
  benennt den Objekttyp, den die Seite auflistet.
- **Content** – Eine [LayoutCard](https://flow.mittwald.de/components/structure/layout-card) umschließt
  die [List](https://flow.mittwald.de/components/list/list), die das Hauptelement der Seite ist.
- **List** – Die [List](https://flow.mittwald.de/components/list/list) bringt Suche, Filter und
  Sortierung bereits mit. Je nach Inhalt lässt sich ihre Ansicht als Liste,
  Raster oder Tabelle wählen.
- **Eintrag** – Ein [List-Item](https://flow.mittwald.de/components/list/list-item-view) je Objekt
  verlinkt in seine [Detailseite](https://flow.mittwald.de/templates/seiten/detailseite) und trägt
  häufige Aktionen direkt am Objekt, etwa über ein
  [ContextMenu](https://flow.mittwald.de/components/actions/context-menu).
- **Anlege-Aktion** – Sie liegt in der
  [ActionGroup](https://flow.mittwald.de/components/actions/action-group) der List und bleibt so am
  Objekttyp, auch wenn die Liste später an anderer Stelle auftaucht.
- **Leerzustand** – Die List bringt automatisch eine
  [Empty View](https://flow.mittwald.de/components/list/list#lade-und-leeransichten-empty-view) mit;
  passe sie an das anzulegende Objekt an, denn der erste Kontakt mit einem
  Objekttyp ist fast immer die leere Liste.

---

# Varianten und Abwandlung

## Als Kachelansicht

In der Kachelansicht steht ein großes Vorschaubild im Vordergrund. So erkennen
Nutzer das passende Objekt auf einen Blick. Struktur und Ausstattung der Seite
bleiben gleich. Es ändern sich nur `defaultViewMode` und die Anzeigeform des
Eintrags.

```tsx
import {
  ActionGroup,
  Avatar,
  Button,
  ContextMenu,
  Flex,
  Heading,
  IconApp,
  LayoutCard,
  MenuItem,
  Text,
  typedList,
} from "@mittwald/flow-react-components";

export default () => {
  const AppList = typedList<{
    id: string;
    name: string;
    type: string;
    domain: string;
  }>();

  return (
    <Flex direction="column" gap="m">
      <Heading level={1} color="dark">
        Apps
      </Heading>
      <LayoutCard>
        <AppList.List
          aria-label="Apps"
          getItemId={(app) => app.id}
          defaultViewMode="tiles"
        >
          <ActionGroup>
            <Button>App installieren</Button>
          </ActionGroup>

          <AppList.StaticData
            data={[
              {
                id: "1",
                name: "Mein Blog",
                type: "WordPress",
                domain: "mustermann.de",
              },
              {
                id: "2",
                name: "Shop",
                type: "Shopware",
                domain: "shop.mustermann.de",
              },
              {
                id: "3",
                name: "Redaktion",
                type: "TYPO3",
                domain: "redaktion.mustermann.de",
              },
            ]}
          />
          <AppList.Search />

          <AppList.Item
            showTiles
            showList={false}
            href={() => "#"}
            textValue={(app) => app.name}
          >
            {(app) => (
              <AppList.ItemView>
                <Avatar color="violet">
                  <IconApp />
                </Avatar>
                <Heading>{app.name}</Heading>
                <Text>{app.type}</Text>
                <ContextMenu>
                  <MenuItem>Details anzeigen</MenuItem>
                  <MenuItem>Löschen</MenuItem>
                </ContextMenu>
              </AppList.ItemView>
            )}
          </AppList.Item>
        </AppList.List>
      </LayoutCard>
    </Flex>
  );
}
```

## Tabs über mehreren Übersichtsseiten

Manchmal gehören mehrere Objekttypen fachlich zusammen, etwa E-Mail-Adressen,
Weiterleitungen und Delivery-Boxen. Eine
[TabNavigation](https://flow.mittwald.de/components/navigation/tab-navigation) fasst sie zusammen. Jeder
Tab ist für sich eine Übersichtsseite.