I am new to AOR and redux-sagas and I am currently working on a list view drag-and-drop and upload capability. I want the user to be able to drag and drop files and see current upload progress and status from the List view.
The prototype of the component looks like this:
// ...
<Dropzone onDrop={this.onDrop} onDragLeave={this.onDragLeave} onDragEnter={this.onDragEnter} ref={(node) => {this.dropzoneRef = node;}} disableClick disablePreview style={{}}>
// Dropped files will appear here, with the upload progress
<Card style={{marginBottom: "1em"}}>
<CardTitle>Picture.jpg</CardTitle>
<CardText>
// The progress bar will show the upload progress
<LinearProgress value={50} mode="determinate" />
</CardText>
</Card>
<List {...props} actions={<FileActions onUploadClick={() => {this.dropzoneRef.open()}} />}>
<Datagrid>
<TextField source="name" />
<DateField source="createdAt" />
<EditButton />
</Datagrid>
</List>
</Dropzone>
the onDrop callback receives the dropped files, and that's where the upload needs to be handled. That's where I am bit puzzled about how I should handle the problem.
I understand I have to decorate my REST client in order to be able to upload my files. But how can I plug some functions in order to send the upload progress of each files to my component?
Related
I am making a react web app in which I want some users to have the ability to post newsletters. I am using react quill as the text editor for this.
The issue I am experiencing is how to edit a saved draft or edit an already published newsletter. I want to pass the appropriate newsletter into the editor when i click on the 'edit-button'. But I could not figure out how on my own, neither could I find anything on the subject.
I am using sequelize for my backend and currently the editor is a popup.
<Popup
trigger={<button
class="btn">
Redigera
</button>}>
<React.StrictMode>
<Editor />
</React.StrictMode>
</Popup>
The editor looks like this. I have a text field where the user puts the title of the newsletter and a date picker if they'd like to set a specific date for when it is to be published.
return (
<div class="overlay">
<button id="closeButton">Stäng och spara</button>
<div className="text-editor">
<EditorToolbar />
<TextField
required
id="required"
fullWidth
label="Titel"
onChange={(e) => setTitle(e.target.value)}
/>
<ReactQuill
theme="snow"
value={content}
onChange={setContent}
placeholder={"Skriv ditt nyhetsbrev här..."}
modules={modules}
formats={formats}
/>
<TextField
id="date"
label="Välj dag för publicering"
type="date"
defaultValue={getCurrentDate()}
onChange={(e) => setPublishedAt(e.target.value)}
sx={{ width: 220 }}
InputLabelProps={{
shrink: true,
}}
/>
<button class="rte-button" onClick={publishNow}>Publicera</button>
<div class="buttons">
<button class="rte-button" onClick={onDelete}>Ta bort</button>
<button class="rte-button" onClick={saveNewsletterAsDraft}>Spara utkast</button>
</div>
</div>
</div>
);
};
export default Editor;
I am doing a findAll to retrieve all the existing newsletters from the backend so what I've been thinking of doing is to pass the content and title of the newsletter i want to edit into the editor as a prop. But I would rather not do that as I am not working with classes.
I have a simple form to edit camera
export const CameraEdit: FC<ResourceComponentProps> = (props: ResourceComponentProps) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="name" />
<TextInput source="connection" />
<Button variant="contained" label="Preview"></Button>
</SimpleForm>
</Edit>
);
When I click on Preview button I want to
fetch preview from backend (using GraphQL)
download the image
show it on the right side of form
I don't know how to:
issue additional async query (not related to editing data) as in normal react app I had container and component
download the image (result of query)
add additional div to SimpleForm - I've read it can handle only direct inputs
I have a react-admin based site working nicely.
Though i have an issue with the sidebar menu. If i click one of the items twice it clears all the form inputs. This is a link to an edit form of the resource item (in this case the current user profile):
<MenuItemLink to={"/users/" + user.id} primaryText="Profile" leftIcon={createElement(UserIcon)} onClick={onMenuTap}/>
with resource that looks like:
<Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} icon={UserIcon} />
where UserEdit is
export const UserEdit = (props) => {
<Edit title={<UserEmail />} actions={<UserEditActions />} {...props}>
<SimpleForm validate={validateUserSave}>
<DisabledInput source="email"/>
<TextInput label="First Name" source="firstName" />
<TextInput label="Last Name" source="lastName" />
...
on first click all the inputs are populated from my REST api, but on 2nd tap (menu item selected) - all the form values are cleared...
Any ideas?
It is indeed a bug, I opened an issue on React Admin:
[#2291] Double-click on a Icon from the Menu reset the edition form
[#2322] Fix resetform when navigating to same page
A fix will be published with react-admin#2.3.2!
Thanks for reporting the issue.
I am new using admin-on-rest framework, I need to make nested form working.
I have two models show and song.show() can have multiple songs. I have show edit form it will work as expected.
I need to add a song form inside show edit form, so I can add multiple songs for each show.
I tried all ways but i am not able to get it done.
This is my code:
<Edit title="Edit Show" {...this.props}>
<SimpleField>
<TextInput source="name" style={{ display: 'inline-block' }} />
//here need to add song add form without reloading page
//this is songs grid
<ReferenceManyField reference="songs" target="show_id" label="Set List" perPage={5} >
<Datagrid>
<TextField source="song_name" />
<EditButton />
<DeleteButton />
</Datagrid>
</ReferenceManyField>
//Here need to add song form, so i can add songs
</SimpleField>
</Edit>
How can I achieve this?
Not sure if that answers your question.. if songs pre-exist then you just need to do that:
<Edit title="Edit Show" {...this.props}>
<TextInput source="name" style={{ display: 'inline-block' }} />
<ReferenceArrayInput label="Songs" source="songs_property_on_show" reference="songs" allowEmpty>
<SelectArrayInput optionText="song_name" translate={false}/>
</ReferenceArrayInput>
</Edit>
if you want to create them on the fly while you are creating the show or in other words have a form inside the other this needs to be done in a custom way (using redux-form) as commented under my question: how to create an entity inside another in the same form using admin-on-rest?
I use react native to make app in android. and I use react-native-scrollable-tab-view, when I use two tabbar in the view .one is on top, the other is in bottom.But when I click one only display half screen. I want got the full screen. Thank you for your help!!
currently:enter image description here
I want to get:enter image description here
bellow is my code:
render(){
return (
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
>
<View1 style={styles.navText} tabLabel="菜单1" />
<View2 tabLabel="菜单2" />
<View3 tabLabel="菜单3" />
</ScrollableTabView>
<ScrollableTabView
renderTabBar={() => <DefaultTabBar
backgroundColor='#61b754'
style={styles.top}
/>}
tabBarUnderlineColor='#fbc14a'
tabBarActiveTextColor='#ffffff'
tabBarInactiveTextColor='#ecf0f2'
scrollWithoutAnimation={true}
tabBarTextStyle={styles.navText}
tabBarPosition='bottom'
>
<View5 tabLabel="菜单5" />
<View6 tabLabel="菜单6" />
</ScrollableTabView>
</View>
)
}