import { RootState } from 'store/store';
import { connect } from 'react-redux';
import { getResource } from 'store/resources/resources';
-import { MultiselectToolbar } from 'components/multiselect-toolbar/MultiselectToolbar';
import { getPropertyChip } from '../resource-properties-form/property-chip';
import { ProjectResource } from 'models/project';
import { ResourceKind } from 'models/resource';
-import { User, UserResource } from 'models/user';
+import { UserResource } from 'models/user';
import { UserResourceAccountStatus } from 'views-components/data-explorer/renderers';
import { FavoriteStar, PublicFavoriteStar } from 'views-components/favorite-star/favorite-star';
import { FreezeIcon } from 'components/icon/icon';
import { resourceUuidToContextMenuKind } from 'store/context-menu/context-menu-actions';
import { openContextMenu } from 'store/context-menu/context-menu-actions';
import { CollectionResource } from 'models/collection';
-import { RichTextEditorLink } from 'components/rich-text-editor-link/rich-text-editor-link';
import { ContextMenuKind } from 'views-components/context-menu/context-menu';
import { Dispatch } from 'redux';
| 'noDescription'
| 'nameContainer'
| 'cardContent'
+ | 'subHeader'
| 'namePlate'
| 'faveIcon'
| 'frozenIcon'
| 'contextMenuSection'
| 'chipSection'
- | 'tag';
+ | 'tag'
+ | 'description';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
paddingTop: '1rem',
marginBottom: 0,
minHeight: '2.5rem',
+ marginRight: '0.8rem',
},
cardContent: {
+ display: 'flex',
+ flexDirection: 'column',
+ },
+ subHeader: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
marginRight: '1rem',
marginTop: '0.5rem',
},
+ description: {
+ marginTop: '1rem',
+ },
});
const mapStateToProps = (state: RootState) => {
const ProjectCard: React.FC<ProjectCardProps> = ({ classes, currentResource, frozenByFullName, handleContextMenu, isAdmin }) => {
const { name, description } = currentResource as ProjectResource;
+ const [showDescription, setShowDescription] = React.useState(false);
+
+ const toggleDescription = (resource: ProjectResource) => {
+ console.log('toggleDescription', resource);
+ setShowDescription(!showDescription);
+ };
return (
<Card className={classes.root}>
}
/>
<CardContent className={classes.cardContent}>
- <section className={classes.chipSection}>
- <Typography component='div'>
- {typeof currentResource.properties === 'object' &&
- Object.keys(currentResource.properties).map((k) =>
- Array.isArray(currentResource.properties[k])
- ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
- : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
- )}
- </Typography>
+ <section className={classes.subHeader}>
+ <section className={classes.chipSection}>
+ <Typography component='div'>
+ {typeof currentResource.properties === 'object' &&
+ Object.keys(currentResource.properties).map((k) =>
+ Array.isArray(currentResource.properties[k])
+ ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
+ : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
+ )}
+ </Typography>
+ </section>
+ <section className={classes.descriptionLabel}>
+ {description ? (
+ <Typography
+ className={classes.showMore}
+ onClick={() => toggleDescription(currentResource)}
+ >
+ Show full description
+ </Typography>
+ ) : (
+ <Typography className={classes.noDescription}>no description available</Typography>
+ )}
+ </section>
</section>
- <section className={classes.descriptionLabel}>
- {description ? (
- <div className={classes.showMore}>
- <RichTextEditorLink
- title={`Description of ${name}`}
- content={description}
- label='Show full description'
- />
- </div>
- ) : (
- <Typography className={classes.noDescription}>no description available</Typography>
- )}
+ <section>
+ {showDescription &&
+ <Typography className={classes.description}>
+ {currentResource.description}
+ </Typography>}
</section>
</CardContent>
</Card>