Skip to content

Commit

Permalink
Dashboard uploads: refactor uploads view
Browse files Browse the repository at this point in the history
* remove empty content.
* create a custom mobile interface.
* fix request_items naming.
* closes: inveniosoftware#1771
  • Loading branch information
Pineirin committed Jul 7, 2022
1 parent d3346f5 commit 451825b
Show file tree
Hide file tree
Showing 8 changed files with 332 additions and 131 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -53,18 +53,18 @@ export const MobileCommunitiesItem = ({ result, index }) => {
</a>
)}
</Item>
<Item.Meta>
<Item.Extra>
<Button
compact
size="small"
floated="right"
href={`/communities/${result.id}/settings`}
className="mt-0 fluid-responsive"
className="fluid-responsive"
>
<Icon name="edit" />
{i18next.t("Edit")}
</Button>
</Item.Meta>
</Item.Extra>
</Item.Content>
</Item>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,7 @@ import {
SearchHelpLinks,
} from "../search/components";
import { timestampToRelativeTime } from "../utils";
import { ComputerTabletRequestsItems } from "./requests_items/ComputerTabletRequestsItems";
import { MobileRequestsItems } from "./requests_items/MobileRequestsItems";
invenio_app_rdm/theme/assets/semantic-ui/js/invenio_app_rdm/user_dashboard/requests.js

export const RequestsResults = ({
sortOptions,
Expand Down Expand Up @@ -190,18 +189,20 @@ export function RequestsResultsItemTemplateDashboard({ result, index }) {
} else if (isCreatorCommunity) {
creatorName = result.expanded?.created_by.metadata?.title || createdBy.community;
}
const ComputerTabletRequestsItemsWithState = withState(ComputerTabletRequestsItems);
const MobileRequestsItemsWithState = withState(MobileRequestsItems);
const ComputerTabletRequestsItemWithState = withState(
ComputerTabletRequestsItem
);
const MobileRequestsItemWithState = withState(MobileRequestsItem);
return (
<>
<ComputerTabletRequestsItemsWithState
<ComputerTabletRequestsItemWithState
result={result}
index={index}
differenceInDays={differenceInDays}
isCreatorCommunity={isCreatorCommunity}
creatorName={creatorName}
/>
<MobileRequestsItemsWithState
<MobileRequestsItemWithState
result={result}
index={index}
differenceInDays={differenceInDays}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Icon, Item } from "semantic-ui-react";
import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
import PropTypes from "prop-types";

export const ComputerTabletRequestsItems = ({
export const ComputerTabletRequestsItem = ({
result,
index,
differenceInDays,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { Icon, Item } from "semantic-ui-react";
import { RightBottomLabel } from "@js/invenio_communities/requests/requests_items/RightBottomLabel";
import PropTypes from "prop-types";

export const MobileRequestsItems = ({
export const MobileRequestsItem = ({
result,
index,
differenceInDays,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,7 @@ import { i18next } from "@translations/invenio_app_rdm/i18next";
import _get from "lodash/get";
import _truncate from "lodash/truncate";
import React from "react";
import {
Button,
Card,
Divider,
Header,
Icon,
Item,
Label,
Segment,
} from "semantic-ui-react";
import { Button, Card, Divider, Header, Segment } from "semantic-ui-react";
import {
RDMBucketAggregationElement,
RDMCountComponent,
Expand All @@ -30,10 +21,11 @@ import {
RDMRecordSearchBarElement,
RDMToggleComponent,
} from "../search/components";
import { axiosWithconfig, SearchItemCreators } from "../utils";
import { axiosWithconfig } from "../utils";
import { DashboardResultView, DashboardSearchLayoutHOC } from "./base";
import { createSearchAppInit } from "@js/invenio_search_ui";
import PropTypes from "prop-types";
import { ComputerTabletUploadsItem } from "./uploads_items/ComputerTabletUploadsItem";
import { MobileUploadsItem } from "./uploads_items/MobileUploadsItem";

const statuses = {
in_review: { color: "yellow", title: i18next.t("In review") },
Expand All @@ -45,38 +37,6 @@ const statuses = {
};

export const RDMRecordResultsListItem = ({ result, index }) => {
const accessStatusId = _get(result, "ui.access_status.id", "open");
const accessStatus = _get(result, "ui.access_status.title_l10n", "Open");
const accessStatusIcon = _get(result, "ui.access_status.icon", "unlock");
const createdDate = _get(
result,
"ui.created_date_l10n_long",
i18next.t("No creation date found.")
);
const creators = _get(result, "ui.creators.creators", []).slice(0, 3);

const descriptionStripped = _get(
result,
"ui.description_stripped",
i18next.t("No description")
);

const publicationDate = _get(
result,
"ui.publication_date_l10n_long",
i18next.t("No publication date found.")
);
const resourceType = _get(
result,
"ui.resource_type.title_l10n",
i18next.t("No resource type")
);
const title = _get(result, "metadata.title", i18next.t("No title"));
const subjects = _get(result, "ui.subjects", []);
const version = _get(result, "ui.version", null);
const isPublished = result.is_published;

// Derivatives
const editRecord = () => {
axiosWithconfig
.post(`/api/records/${result.id}/draft`)
Expand All @@ -88,78 +48,21 @@ export const RDMRecordResultsListItem = ({ result, index }) => {
});
};

const viewLink = isPublished ? `/records/${result.id}` : `/uploads/${result.id}`;
return (
<Item key={index} className="deposits-list-item mb-20">
<div className="status-icon mr-10">
<Item.Content verticalAlign="top">
<Item.Extra>
{isPublished ? (
<Icon name="check" color="green" />
) : (
<Icon name="upload" color="red" />
)}
</Item.Extra>
</Item.Content>
</div>
<Item.Content style={{ cursor: "default" }}>
<Item.Extra className="labels-actions">
{/* For reduced spacing between labels. */}
{result.status in statuses && result.status !== "published" && (
<Label size="tiny" color={statuses[result.status].color}>
{statuses[result.status].title}
</Label>
)}
<Label size="tiny" color="blue">
{publicationDate} ({version})
</Label>
<Label size="tiny" color="grey">
{resourceType}
</Label>
<Label size="tiny" className={`access-status ${accessStatusId}`}>
{accessStatusIcon && <i className={`icon ${accessStatusIcon}`} />}
{accessStatus}
</Label>
<Button compact size="small" floated="right" onClick={() => editRecord()}>
<Icon name="edit" />
{i18next.t("Edit")}
</Button>
{isPublished && (
<Button compact size="small" floated="right" href={viewLink}>
<Icon name="eye" />
{i18next.t("View")}
</Button>
)}
</Item.Extra>
<Item.Header as="h2">
<a href={viewLink}>{title}</a>
</Item.Header>
<Item.Meta>
<div className="creatibutors">
<SearchItemCreators creators={creators} />
</div>
</Item.Meta>
<Item.Description>
{_truncate(descriptionStripped, {
length: 350,
})}
</Item.Description>
<Item.Extra>
{subjects.map((subject, index) => (
<Label key={index} size="tiny">
{subject.title_l10n}
</Label>
))}
{createdDate && (
<div>
<small>
{i18next.t("Uploaded on")} <span>{createdDate}</span>
</small>
</div>
)}
</Item.Extra>
</Item.Content>
</Item>
<>
<ComputerTabletUploadsItem
result={result}
index={index}
editRecord={editRecord}
statuses={statuses}
></ComputerTabletUploadsItem>
<MobileUploadsItem
result={result}
index={index}
editRecord={editRecord}
statuses={statuses}
></MobileUploadsItem>
</>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
// This file is part of InvenioRDM
// Copyright (C) 2022 CERN.
//
// Invenio App RDM is free software; you can redistribute it and/or modify it
// under the terms of the MIT License; see LICENSE file for more details.

import { i18next } from "@translations/invenio_app_rdm/i18next";
import _get from "lodash/get";
import _truncate from "lodash/truncate";
import React from "react";
import { Button, Icon, Item, Label } from "semantic-ui-react";
import { SearchItemCreators } from "../../utils";

export const ComputerTabletUploadsItem = ({
result,
index,
editRecord,
statuses,
}) => {
const access_status_id = _get(
result,
"ui.access_status.id",
i18next.t("open")
);
const access_status = _get(
result,
"ui.access_status.title_l10n",
i18next.t("Open")
);
const access_status_icon = _get(
result,
"ui.access_status.icon",
i18next.t("unlock")
);
const description_stripped = _get(
result,
"ui.description_stripped",
i18next.t("No description")
);
const title = _get(result, "metadata.title", i18next.t("No title"));
const creators = _get(result, "ui.creators.creators", []).slice(0, 3);
const subjects = _get(result, "ui.subjects", []);
const publicationDate = _get(
result,
"ui.publication_date_l10n_long",
i18next.t("No publication date found.")
);
const resource_type = _get(
result,
"ui.resource_type.title_l10n",
i18next.t("No resource type")
);
const createdDate = result.ui?.created_date_l10n_long;
const version = result.ui?.version ?? "";
const is_published = result.is_published;

const viewLink = is_published
? `/records/${result.id}`
: `/uploads/${result.id}`;
const icon = is_published ? (
<Icon name="check" color="green" />
) : (
<Icon name="upload" color="red" />
);

return (
<Item
key={index}
className="deposits-list-item mb-20 computer tablet only flex"
>
<div className="status-icon mr-10">
<Item.Content verticalAlign="top">
<Item.Extra>{icon}</Item.Extra>
</Item.Content>
</div>
<Item.Content style={{ cursor: "default" }}>
<Item.Extra className="labels-actions">
{result.status in statuses && result.status !== "published" && (
<Label size="tiny" color={statuses[result.status].color}>
{statuses[result.status].title}
</Label>
)}
<Label size="tiny" color="blue">
{publicationDate} ({version})
</Label>
<Label size="tiny" color="grey">
{resource_type}
</Label>
<Label size="tiny" className={`access-status ${access_status_id}`}>
<i className={`icon ${access_status_icon}`}></i>
{access_status}
</Label>
<Button
compact
size="small"
floated="right"
onClick={() => editRecord()}
>
<Icon name="edit" />
{i18next.t("Edit")}
</Button>
{is_published && (
<Button compact size="small" floated="right" href={viewLink}>
<Icon name="eye" />
{i18next.t("View")}
</Button>
)}
</Item.Extra>
<Item.Header as="h2">
<a href={viewLink} className="truncate-lines-2">
{title}
</a>
</Item.Header>
<Item.Meta>
<div className="creatibutors">
<SearchItemCreators creators={creators} />
</div>
</Item.Meta>
<Item.Description>
{_truncate(description_stripped, {
length: 350,
})}
</Item.Description>
<Item.Extra>
{subjects.map((subject, index) => (
<Label key={index} size="tiny">
{subject.title_l10n}
</Label>
))}
<div>
{}
<small>
{createdDate ? (
<>
{i18next.t("Uploaded on")} <span>{createdDate}</span>
</>
) : (
i18next.t("No creation date found.")
)}
</small>
</div>
</Item.Extra>
</Item.Content>
</Item>
);
};
Loading

0 comments on commit 451825b

Please sign in to comment.