I'd like to change the layout for my resources, so that the page /resource-name shows a card with the tabs "List", "Create", "Edit". I managed to make it "list" under the List tab using dataProvider(), but I can't figure out how to render the Create & Edit components under the relevant tabs. Any advice?
For what I understood you want to have a component with a <TabbedShowLayout> with tabs for list, create and edit on the route /resource? The route /resource is the one RA assumes when a component is provider in the list prop of <Resource>, so if you create a component with a <TabbedShowLayout> an in <Tab> list, put a <List> component, on create and Create component, and for edit an Edit component it might work for what you desire, I have not tested it. However see if is not ideal to use the props create, edit, and list of Resource, with them you can present data and have actions linking to one another.
Maybe your problem is in routing, since create in RA defaults to /resource/create, could you clarify your problem?
Related
This is the component:
https://marmelab.com/react-admin/SimpleFormIterator.html
I want the first item to be required, and the user shouldn't be able to delete it.
As far as I understand, there is no built-in way for this component to do this, at this point.
I am wondering if there is a way to create a custom wrapper for this component, that can do this. Maybe render the first item separately within this custom wrapper?
To show the first item by default, you can set the default value to an empty array of objects.
<ArrayInput
source="address"
label="address"
defaultValue={[{}]}
></ArrayInput>
this is a question about best practices, in short: what is the best way to implement this function
I used the vue cli to create a project to train on. And so the normal template it provided me with was a side header thing with the content on the side, and so I made some modifications:
the issue is visualized down if the text explaination wasn't clear
and so what I had in mind was to add a slot in the header "the left side" to add the adding button, and the button wouldn't need to be visible in the other tabs, like the help tab.
App.vue
<template lang="pug">
TheHeader
routerView( v-slot="{ Component }" )
transition( name='slide-fade' mode='out-in' )
component( :is="Component" )
</template>
but here comes the issue, as you can see the tabs are in router views and the router view is beside the header component. the solution I had in mind was to:
add a list of strings in the App.vue with ["help", "course", ...] in the script section
the strings are linked to what router is being used (not very sure how to do this but I guess I could do a v-model to the v-slot being used)
pass the string to the header component
include a v-if statement with every tab's little widget
but I felt like this alone will jank the code a lot and thought if maybe there was an easier way to pass an entire component from one child to another it would be great. if there isn't I'd just like to know if it's the best practice I could do and proceed with this solution
issue visualization:
wanted behavior mock-up:
the solution was to use the Built In <Teleport> Vue component. this way I just type <Teleport to="..."> and it will go where I want
Basically I have a component (profile comments) which has child components (friends, followers, Posts).
Initially I am loading the profile and passing the data through the props and fetching the data in their individual components.
I want to have a suggestion since I have a post component which has many posts as a v-for loop and i wanted to open its individual single post by its id (pk). Since the Post component is a child component of the profile component how can I replace the component with the Single post or should I dynamically render the component on the basic of the param?
This question is a bit open ended on how you would proceed with it so you might get flagged.
However, here is a potential solution:
So your profile route might look something like this:
/profile/:id
<template>
<Posts :posts="posts" />
<Friends :friends="friends" />
<Followers :followers="follower" />
</template>
As the posts get rendered out, you can click on one to show the post.
At which point you can probably add a new route in your router/index.js that takes the user to a whole new component that doesn't have the child/parent relationship.
{
path: '/post/:id'
component: () => import('../views/Post');
}
And once that route loads, you can fetch all of the post related data if you need it.
Alternatively, you can use child routes under your /profile/:id route, which in my opinion would be the more elegant solution.
Comment below if this didn't answer your question and I'll try to refine.
I have one VuesJS view with two components in it that have a main-detail relationship. The user can click on an item in the main component (the item gets highlighted) and the details component will show the related detail items.
products.vue
<main></main>
<details>></details>
The user can edit a detail item and I want that to take place using a separate view containing the necessary components to edit the detail item.
I want the user to be able to navigate back to the products.vue view (say after finishing the editing process) with its state as it was when the initiated the editing operation.
I tried wrapping each of main and details in <keep-alive></keep-alive> but that did not seem to do the trick.
I have also read a few posts where <keep-alive></keep-alive> is used with the include property around the <router-view></router-view> but I'm not sure what to include in the include in my case.
Any thoughts on whether this is possible or what I'm doing wrong?
thanks
To persist state beyond route changes the state needs to either be stored:
in a component that is a parent to the <router-view> (such as <App>)
in a new vue instance with shared state that you import into the required components
in the official state management library Vuex (recommended)
I would like to ask when do you use dynamic components instead of vue router? Is it good to use dynamic components instead of vue router? I'm referring more to child routes. Let's say we have an app and we have several nav elements. For instance 'About', 'Cases', 'Services', 'Contact' and if we go to each of them there are a few more options displayed. Let's say if we go to 'About' then we have 'Team', 'What we do', 'Our mission' something like that displayed in that page. Other ones have extra links inside as well. So these could be used as child nav or could be loaded as a dynamic component. What would be advantages and disadvantages to use one over another?
With routing you can link to pages easily and refresh them. As dynamic components linking to them would be more difficult and refreshing would revert the component to default state.
In your case I would use routing but you have to weigh the usefulness case by case. Would someone want to link to yourpage/about/team? You can also consider fitting them all to single page and using anchors yourpage/about#team. I imagine crawlers won't be able to access views behind button clicks either, only links.