other-emerald•13mo ago

display sub resource as list inside show of parent item.

Hi, I am building a real estate bidding cms system. I have a resource called building and it has a many sub resources called bids who are unique to that building. How can I show a list with bids inside the single show building page and allow crud actions on the bids

8 Replies

kapa.ai•13mo ago

Hi @blackbearftw. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To display a sub-resource as a list inside the show page of a parent item, you can use the Show component from Refine. This component provides layout views based on the resource information automatically. You can create a Show page for the building resource and inside this page, you can embed a List view for the bids sub-resource. This List view can include CRUD actions for each bid. Here is a basic example of how you can structure this:

import { Show, List, useTable, Space, EditButton, DeleteButton } from "@pankod/refine";

export const BuildingShow: React.FC = () => {
    // Fetch the building data...

    return (
        <Show>
            {/* Display building data... */}
            
            <List>
                <Table {...tableProps} rowKey="id">
                    {/* Define columns for bids data... */}
                    
                    <Table.Column
                        title="Actions"
                        dataIndex="actions"
                        render={(_text, record: BidType): React.ReactNode => {
                            return (
                                <Space>
                                    <EditButton size="small" recordItemId={record.id} hideText />
                                    <DeleteButton size="small" recordItemId={record.id} hideText />
                                </Space>
                            );
                        }}
                    />
                </Table>
            </List>
        </Show>
    );
};

import { Show, List, useTable, Space, EditButton, DeleteButton } from "@pankod/refine";

export const BuildingShow: React.FC = () => {
    // Fetch the building data...

    return (
        <Show>
            {/* Display building data... */}
            
            <List>
                <Table {...tableProps} rowKey="id">
                    {/* Define columns for bids data... */}
                    
                    <Table.Column
                        title="Actions"
                        dataIndex="actions"
                        render={(_text, record: BidType): React.ReactNode => {
                            return (
                                <Space>
                                    <EditButton size="small" recordItemId={record.id} hideText />
                                    <DeleteButton size="small" recordItemId={record.id} hideText />
                                </Space>
                            );
                        }}
                    />
                </Table>
            </List>
        </Show>
    );
};

In this example, EditButton and DeleteButton are used to provide CRUD actions for each bid. You can customize this as per your requirements. Please note that this is a simplified example and you would need to fetch the data for the building and bids, handle routing, and so on. You can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog) for more detailed guides and tutorials. For more complex parent-child resource relationships, you can also check out these examples: - Strapi v4 Multi-tenancy (https://refine.dev/docs/advanced-tutorials/multi-tenancy/strapi-v4/#what-is-multitenancy) - Appwrite Multi-tenancy (https://refine.dev/docs/advanced-tutorials/multi-tenancy/appwrite/#what-is-multitenancy) - Multi-level Menu (https://refine.dev/docs/advanced-tutorials/multi-level-menu/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

other-emeraldOP•13mo ago

@kapa.ai alright and for the parent (building) I would like to have 3 fields that are kinda unusual: 1. A gallery field, that allows multiple images to be uploaded. 2. A field that allows the uploading of multiple files 3. A google maps field that allows the selection for coordinates on a map

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To implement these fields in your building resource, you can use the following components provided by Refine: 1. Gallery Field: Refine doesn't provide a built-in gallery field, but you can create a custom field that allows multiple images to be uploaded. You can use the FileField component as a base and extend it to support multiple files. You can refer to the FileField documentation (https://refine.dev/docs/ui-integrations/ant-design/components/fields/file-field/) for more details. 2. Multiple Files Upload Field: You can use the FileField component for this purpose. This component is built on top of the Ant Design's Upload component and provides the logic for file uploading. You can set the multiple prop to true to allow multiple files to be uploaded. Here is the FileField documentation (https://refine.dev/docs/ui-integrations/ant-design/components/fields/file-field/). 3. Google Maps Field: Refine doesn't provide a built-in Google Maps field. However, you can create a custom field using a Google Maps React library such as react-google-maps or @react-google-maps/api. These libraries provide components that you can use to display a Google Map and select coordinates. Please note that these are advanced customizations and you might need to have a good understanding of React and Refine to implement them. You can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog) for more detailed guides and tutorials. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

other-emeraldOP•13mo ago

@kapa.ai what is the best place to create and store this custom google maps input field?

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The best place to create and store your custom Google Maps input field would be within your project's src directory, in a dedicated components or inputs folder. This way, you can easily import and use it across different parts of your application. Here's a basic directory structure:

/my-app
├── src
│   ├── components
│   │   ├── GoogleMapsInput.tsx
│   ├── resources
│   │   ├── building
│   │   │   ├── index.tsx
│   │   │   ├── [id].tsx
│   │   │   ├── new.tsx
│   │   │   ├── edit.tsx

/my-app
├── src
│   ├── components
│   │   ├── GoogleMapsInput.tsx
│   ├── resources
│   │   ├── building
│   │   │   ├── index.tsx
│   │   │   ├── [id].tsx
│   │   │   ├── new.tsx
│   │   │   ├── edit.tsx

In this structure, GoogleMapsInput.tsx is your custom Google Maps input component. You can then import this component in your resource files (like new.tsx or edit.tsx for the building resource) like so:

import GoogleMapsInput from '../components/GoogleMapsInput';

import GoogleMapsInput from '../components/GoogleMapsInput';

Remember to export your GoogleMapsInput component from the file:

// GoogleMapsInput.tsx
import React from 'react';
// import necessary libraries or components

const GoogleMapsInput = () => {
  // component logic here
  return (
    // component JSX here
  );
};

export default GoogleMapsInput;

// GoogleMapsInput.tsx
import React from 'react';
// import necessary libraries or components

const GoogleMapsInput = () => {
  // component logic here
  return (
    // component JSX here
  );
};

export default GoogleMapsInput;

This approach helps in maintaining clean code structure and promotes reusability of components. For more information on how to structure your project, you can refer to the Refine documentation (https://refine.dev/docs) and blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@490961337896402944> kapa.ai is still learning and improving, please let us know how it did by reacting below

display sub resource as list inside show of parent item.

Did you find this page helpful?