You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
46 lines
1.7 KiB
JavaScript
46 lines
1.7 KiB
JavaScript
4 years ago
|
import React, {useState} from 'react'
|
||
|
|
import router from 'next/router'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import axios from 'axios'
|
||
|
|
|
||
|
|
import {Button} from '@rmwc/button'
|
||
|
|
import ActionBar from '~/components/admin/actionBar'
|
||
|
|
import Table from '~/components/table'
|
||
|
|
|
||
|
|
CategoryList.getInitialProps = async ({ctx}) => {
|
||
|
|
const {data: categories} = await ctx.axios.get('/api/categories')
|
||
|
|
return {categories}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function CategoryList({categories}) {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ActionBar title="Categories">
|
||
|
|
<Button outlined onClick={()=>router.push('/admin/categories/new')}>Create New category</Button>
|
||
|
|
</ActionBar>
|
||
|
|
<Table
|
||
|
|
columns={[
|
||
|
|
{name: 'Name', extractor: category => category.name},
|
||
|
|
{name: 'Items', extractor: category => category.items?.length || '0'},
|
||
|
|
{name: 'URL Slug', extractor: category => <Link href={`/store/category/${category.urlslug}`}><a>{category.urlslug}</a></Link> },
|
||
|
|
{name: 'Parent', extractor: category => category.parent?.name || '(none)'},
|
||
|
|
{name: 'Description', extractor: category => <div style={{maxWidth: 150, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{category.description}</div>},
|
||
|
|
{name: 'Actions', extractor: category => (
|
||
|
|
<span>
|
||
|
|
<Link href={`/admin/categories/${category.urlslug}`}><a>Edit</a></Link>
|
||
|
|
{/* Delete not available in API yet */}
|
||
|
|
{/* <button onClick={remove(category)} type="button" className="buttonLink">Delete</button> */}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
]}
|
||
|
|
// Map in an id property so the table can use array.map
|
||
|
|
rows={categories}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
async function remove(category){
|
||
|
|
// Placeholder for when we have delete in the API
|
||
|
|
}
|