CRUD Pages

CRUD pages are essentially normal Vue.js pages with additional functionality to handle data operations. These operations are streamlined through the <CLoader cpn="Crud"> component. Before creating a CRUD page, please familiarize yourself with the basics of page creation.

Creating a CRUD Page for 'Projects'

Page Structure

Follow the general structure for Vue.js pages as outlined in the pages documentation, but include specific elements for CRUD operations.

Example: 'Projects' CRUD Page

<template>
	<div class="project-crud-page-class">
    <!-- Breadcrumb and Icons -->
    <CLoader cpn="Breadcrumb" title="Projects" :items="breadcrumb" class="mb-7 mt-3">
			<template v-slot:homeIcon>
				<img src="/images/store.png" style="width: 17px;margin-bottom: -1px;" />
			</template>
      <template v-slot:titleIcon>
          <!-- Material Design Icon (MDI) That have a similar meaning to the page -->
					<v-icon
					color="#8f8f8f" 
					size="50"
					style="margin-right: 10px; margin-top: -30px; top: 10px; position: relative">mdi-folder-star-multiple-outline</v-icon>
			</template>
    </CLoader>

    <!-- CRUD Component -->
    <CLoader
      cpn="Crud"
      ref="crud"
      shaped
      dialogType="dialog"
      addSheetWidth="500"
      editSheetWidth="500"
      noTitle
      :loading="loading"
      singleName="project"
      pluralName="projects"
      :structure="structure"
      :items="projects"
      browseCustomView
      @browseViewClick="viewProject"
      browseRowClickable
      emptyOnNewItem
      :additionalHeaderSize="300"
      @insertRequest="insertRequest"
      @updateRequest="updateRequest"
      @deleteRequest="deleteRequest"
      searchable
    >
      <!-- Additional custom content and slots for CRUD -->

			<template v-slot:browse.item.icon="{ item }"> <!-- This is only for image attributes -->
				<img :src="item.icon ? item.icon.path : '/images/placeholder.png'" class="project-thumbnail" />
			</template>

    </CLoader>
  </div>
</template>

<script>

export default {
	data(){
		return {
			loading: false,
			projects: [],
		};
	},
	computed: {
		breadcrumb(){
			return [
				{
					text: "Projects",
					to: "/projects",
					disabled: false,
				},
			];
		},
		structure(){
			return [
				{ // Required
					text: "Id",
					value: "id",
					type: "hidden",
				},

        // Model attributes here
        {
					text: "Title",
					value: "title",
					type: "text"
				},
				{
					text: "Description",
					value: "description",
					type: "textarea",
					hideBrowse: true,
				},
				{
					text: "Icon",
					value: "icon",
					type: "image",
					hideBrowse: false,
				},

				{ // Required
					text: this.$t('common.actions'),
					value: "actions",
					type: "actions",
				},
			];
		},
	},
	mounted(){
		this.loadProjects();
	},
	methods: { // To create a simple CRUD, Keep the methods as they are just replace "project" with the name of the model, or add more methods if needed
		loadProjects(){
			this.loading = true;
			this.$dataCaller("get", "/api/pr/projects").then((data) => { // `/api/pr/` is the prefix for all the API routes for a specific model resources
				this.projects = data;
				this.loading = false;
			});
		},
		viewProject(item){
			this.$refs.crud.cp.browse.openUpdatePanel(item);
		},
		insertRequest(data){
			this.$dataCaller("post", "/api/pr/projects", data).then((_) => {
				this.loading = false;
				this.loadProjects();
			});
		},
		updateRequest(data){
			this.$dataCaller("put", "/api/pr/projects/"+data.id, data).then((_) => {
				this.loading = false;
				this.loadProjects();
			});
		},
		deleteRequest(data){
			this.$dataCaller("delete", "/api/pr/projects/"+data.id).then((_) => {
				this.loading = false;
				this.loadProjects();
			});
		},
	},
}
</script>

<style>
  .project-crud-page-class .project-thumbnail{
    width: 100px;
    height: 70px;
    border: 1px solid #c1c1c1;
    border-radius: 4px;
    object-fit: cover;
    background-color: white;
    padding: 1px;
    margin-top: 5px;
  }
  /* Add other styles as needed */
</style>

Key Elements to Focus On

1. CRUD Component (<CLoader cpn="Crud">):

   • This component is the core of your CRUD page. Configure it to handle the operations for your specific model (e.g., Projects).
   • Specify properties like singleName, pluralName, and structure to define how your data will be displayed and managed.

2. Data Loading and Management:

   • Implement methods to handle the loading (loadProjects), insertion (insertRequest), updating (updateRequest), and deletion (deleteRequest) of data.
   • Utilize these methods in the CRUD component to interact with your API or data source.

3. Breadcrumb and Navigation:

   • Include a breadcrumb component for better navigation.
   • Customize it according to your page hierarchy.

4. Custom Styling:

   • Use scoped CSS to style your CRUD page, ensuring that the styles are specific to this page and do not affect other components.