codecannon Documentation

Appearance

List View ​

Frontend List Views are Vue components generated for every module to display a paginated table of entities. These views integrate with module-specific state management to fetch data from your API and provide built-in functionality such as search, inline actions, and row navigation.

Let's look at an example of a generated List View for the Chat module:

vue
<template>
	<Header
		:list-state="listState"
		search
		title="Chats" />
	<Container>
		<ApiTable
			:list-state="listState"
			@row-click="openDetails">
			<Column
				field="chat_content"
				header="Chat Content" />
			<Column
				field="timestamp"
				header="Timestamp" />
			<Column
				field="session_id"
				header="Session Id" />
			<Column
				:style="{ maxWidth: '72px', width: '72px' }"
				header="">
				<template #body="slotProps">
					<ApiTableRemoveButton :item="slotProps.data" />
				</template>
			</Column>
		</ApiTable>
	</Container>
</template>

<script setup lang="ts">
import Header from './components/Header.vue'
import { onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import ApiTable from '@/components/Table/ApiTable.vue'
import Column from 'primevue/column'
import Container from '@/components/Container.vue'
import type { Chat } from '@/models/Chat/Model'
import { useChatListState } from '@/models/Chat/States'
import ApiTableRemoveButton from '@/components/Table/ApiTableRemoveButton.vue'

const listState = useChatListState()
const router = useRouter()

onBeforeMount(() => {
	listState.getList()
})

function openDetails(item: { data: Chat }) {
	router.push({ name: 'chats-edit', params: { id: item.data.id } })
}
</script>

The List View component is built using a collection of reusable pieces, which you can customize as needed.

Data Fetching ​

The view leverages the module-specific state (in this case, useChatListState) to manage its data. The call to listState.getList() is executed during the onBeforeMount lifecycle hook to ensure data is loaded as soon as the component is about to render:

typescript
onBeforeMount(() => {
	listState.getList()
})

Table Rendering & Interaction ​

The ApiTable component is at the heart of the List View. It receives the listState prop—containing data, loading, and pagination details—and handles the rendering of rows and columns. The table emits a row-click event, which is handled by the openDetails method.

The openDetails function is responsible for navigating the user to the edit view of the selected entity. It uses Vue Router’s push method to move to the chats-edit route, passing the id of the clicked chat:

typescript
function openDetails(item: { data: Chat }) {
	router.push({ name: 'chats-edit', params: { id: item.data.id } })
}

Reusable Components ​

The List View utilizes several shared components that standardize the UI across all modules:

  • Header Displays the module title and includes a search input. The listState is passed in so that filtering and other state-dependent behaviors can be handled uniformly.

  • Container Provides layout structure and spacing to ensure consistency between different views.

  • ApiTable Renders a table using the data provided by the listState and emits events like row-click for further interactions.

  • ApiTableRemoveButton Offers an inline action (typically for deletion) within the table. Its configuration is dynamic based on module-specific needs.

Note: The column configuration in the ApiTable is generated based on your module’s settings. As such, individual columns (and their headers/fields) may vary depending on the module configuration.

Summary ​

This generated List View file is designed to provide an out-of-the-box solution for displaying entity lists in your application. With built-in data fetching, navigation, and reusable components, you can quickly iterate on your app's functionality while maintaining a consistent UI.