Skip to content

Commit

Permalink
feat: add table layout for storages
Browse files Browse the repository at this point in the history
  • Loading branch information
@xhofe
xhofe committed Sep 10, 2023
1 parent fd540f4 commit f288c01
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 117 deletions.
3 changes: 2 additions & 1 deletion src/lang/en/storages.json
View file
Expand Up @@ -38,6 +38,7 @@
"other": {
"start_load_success": "Start loading",
"load_all": "Reload All",
"filter_by_driver": "Filter by driver"
"filter_by_driver": "Filter by driver",
"table_layout": "Table layout"
}
}
91 changes: 60 additions & 31 deletions src/pages/manage/storages/Storage.tsx
View file
Expand Up @@ -3,7 +3,9 @@ import {
Box,
Button,
HStack,
Td,
Text,
Tr,
useColorModeValue,
VStack,
} from "@hope-ui/solid"
Expand All @@ -18,7 +20,7 @@ interface StorageProps {
refresh: () => void
}

export const StorageC = (props: StorageProps) => {
function StorageOp(props: StorageProps) {
const t = useT()
const { to } = useRouter()
const [deleteLoading, deleteStorage] = useFetch(
Expand All @@ -32,6 +34,44 @@ export const StorageC = (props: StorageProps) => {
}`,
),
)
return (
<>
<Button
onClick={() => {
to(`/@manage/storages/edit/${props.storage.id}`)
}}
>
{t("global.edit")}
</Button>
<Button
loading={enableOrDisableLoading()}
colorScheme={props.storage.disabled ? "success" : "warning"}
onClick={async () => {
const resp = await enableOrDisable()
handleRespWithNotifySuccess(resp, () => {
props.refresh()
})
}}
>
{t(`global.${props.storage.disabled ? "enable" : "disable"}`)}
</Button>
<DeletePopover
name={props.storage.mount_path}
loading={deleteLoading()}
onClick={async () => {
const resp = await deleteStorage()
handleResp(resp, () => {
notify.success(t("global.delete_success"))
props.refresh()
})
}}
/>
</>
)
}

export function StorageGridItem(props: StorageProps) {
const t = useT()
return (
<VStack
w="$full"
Expand Down Expand Up @@ -68,37 +108,26 @@ export const StorageC = (props: StorageProps) => {
</HStack>
<Text css={{ wordBreak: "break-all" }}>{props.storage.remark}</Text>
<HStack spacing="$2">
<Button
onClick={() => {
to(`/@manage/storages/edit/${props.storage.id}`)
}}
>
{t("global.edit")}
</Button>
<Button
loading={enableOrDisableLoading()}
colorScheme={props.storage.disabled ? "success" : "warning"}
onClick={async () => {
const resp = await enableOrDisable()
handleRespWithNotifySuccess(resp, () => {
props.refresh()
})
}}
>
{t(`global.${props.storage.disabled ? "enable" : "disable"}`)}
</Button>
<DeletePopover
name={props.storage.mount_path}
loading={deleteLoading()}
onClick={async () => {
const resp = await deleteStorage()
handleResp(resp, () => {
notify.success(t("global.delete_success"))
props.refresh()
})
}}
/>
<StorageOp {...props} />
</HStack>
</VStack>
)
}

export function StorageListItem(props: StorageProps) {
const t = useT()
return (
<Tr>
<Td>{props.storage.mount_path}</Td>
<Td>{t(`drivers.drivers.${props.storage.driver}`)}</Td>
<Td>{props.storage.order}</Td>
<Td>{props.storage.status}</Td>
<Td>{props.storage.remark}</Td>
<Td>
<HStack spacing="$2">
<StorageOp {...props} />
</HStack>
</Td>
</Tr>
)
}
145 changes: 60 additions & 85 deletions src/pages/manage/storages/Storages.tsx
View file
@@ -1,4 +1,5 @@
import {
Box,
Button,
Grid,
HStack,
Expand All @@ -12,13 +13,20 @@ import {
SelectPlaceholder,
SelectTrigger,
SelectValue,
Table,
Tbody,
Th,
Thead,
Tr,
VStack,
Switch as HopeSwitch,
} from "@hope-ui/solid"
import { createMemo, createSignal, For, Show } from "solid-js"
import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js"
import { useFetch, useManageTitle, useRouter, useT } from "~/hooks"
import { handleResp, notify, r } from "~/utils"
import { EmptyResp, PageResp, Resp, Storage } from "~/types"
import { StorageC } from "./Storage"
import { StorageGridItem, StorageListItem } from "./Storage"
import { createStorageSignal } from "@solid-primitives/storage"

const Storages = () => {
const t = useT()
Expand Down Expand Up @@ -54,18 +62,10 @@ const Storages = () => {
return selectedDrivers().includes(storage.driver)
})
})

// const [deleting, deleteStorage] = useListFetch(
// (id: number): Promise<EmptyResp> => r.post(`/admin/storage/delete?id=${id}`)
// )
// const [enableOrDisableLoading, enableOrDisable] = useListFetch(
// (id: number, storage?: Storage): Promise<EmptyResp> =>
// r.post(
// `/admin/storage/${storage?.disabled ? "enable" : "disable"}?id=${
// storage?.id
// }`
// )
// )
const [layout, setLayout] = createStorageSignal(
"storages-layout",
"grid" as "grid" | "table",
)
return (
<VStack spacing="$3" alignItems="start" w="$full">
<HStack
Expand Down Expand Up @@ -128,81 +128,56 @@ const Storages = () => {
</SelectContent>
</Select>
</Show>
<HopeSwitch
checked={layout() === "table"}
onChange={(e) => {
setLayout(e.currentTarget.checked ? "table" : "grid")
}}
>
{t("storages.other.table_layout")}
</HopeSwitch>
</HStack>
<Grid
w="$full"
gap="$2_5"
templateColumns={{
"@initial": "1fr",
"@lg": "repeat(auto-fill, minmax(324px, 1fr))",
}}
>
<For each={shownStorages()}>
{(storage) => <StorageC storage={storage} refresh={refresh} />}
</For>
</Grid>
{/* <Box w="$full" overflowX="auto">
<Table highlightOnHover dense>
<Thead>
<Tr>
<For each={["mount_path", "driver", "order", "status", "remark"]}>
{(title) => <Th>{t(`storages.common.${title}`)}</Th>}
</For>
<Th>{t("global.operations")}</Th>
</Tr>
</Thead>
<Tbody>
<For each={storages()}>
<Switch>
<Match when={layout() === "grid"}>
<Grid
w="$full"
gap="$2_5"
templateColumns={{
"@initial": "1fr",
"@lg": "repeat(auto-fill, minmax(324px, 1fr))",
}}
>
<For each={shownStorages()}>
{(storage) => (
<Tr>
<Td>{storage.mount_path}</Td>
<Td>{t(`drivers.drivers.${storage.driver}`)}</Td>
<Td>{storage.order}</Td>
<Td>{storage.status}</Td>
<Td>{storage.remark}</Td>
<Td>
<HStack spacing="$2">
<Button
onClick={() => {
to(`/@manage/storages/edit/${storage.id}`)
}}
>
{t("global.edit")}
</Button>
<Button
loading={enableOrDisableLoading() === storage.id}
colorScheme="warning"
onClick={async () => {
const resp = await enableOrDisable(
storage.id,
storage
)
handleRespWithNotifySuccess(resp, () => {
refresh()
})
}}
>
{t(`global.${storage.disabled ? "enable" : "disable"}`)}
</Button>
<DeletePopover
name={storage.mount_path}
loading={deleting() === storage.id}
onClick={async () => {
const resp = await deleteStorage(storage.id)
handleResp(resp, () => {
notify.success(t("global.delete_success"))
refresh()
})
}}
/>
</HStack>
</Td>
</Tr>
<StorageGridItem storage={storage} refresh={refresh} />
)}
</For>
</Tbody>
</Table>
</Box> */}
</Grid>
</Match>
<Match when={layout() === "table"}>
<Box w="$full" overflowX="auto">
<Table highlightOnHover dense>
<Thead>
<Tr>
<For
each={["mount_path", "driver", "order", "status", "remark"]}
>
{(title) => <Th>{t(`storages.common.${title}`)}</Th>}
</For>
<Th>{t("global.operations")}</Th>
</Tr>
</Thead>
<Tbody>
<For each={storages()}>
{(storage) => (
<StorageListItem storage={storage} refresh={refresh} />
)}
</For>
</Tbody>
</Table>
</Box>
</Match>
</Switch>
</VStack>
)
}
Expand Down

0 comments on commit f288c01

Please sign in to comment.