Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Settings Feature #84

Merged
merged 3 commits into from
Oct 27, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions common/components/DataViz/DatapointsView.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export const DatapointsViewControlsContainer = styled.div`
display: flex;
flex-direction: row;
border-bottom: 1px solid ${palette.highlight.grey9};
border-top: 1px solid ${palette.highlight.grey9};
`;

const DatapointsViewDropdown = styled(Dropdown)`
Expand Down
15 changes: 14 additions & 1 deletion common/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,15 @@ export type MetricDisaggregationDimensionsWithErrors =
error?: string;
};

export type MetricConfigurationSettingsOptions = "Yes" | "No" | "N/A";

export type MetricConfigurationSettings = {
key: string;
label: string;
included: MetricConfigurationSettingsOptions;
default: MetricConfigurationSettingsOptions;
};

export interface Metric {
key: string;
system: AgencySystems;
Expand All @@ -95,6 +104,8 @@ export interface Metric {
contexts: MetricContext[];
disaggregations: MetricDisaggregations[];
enabled?: boolean;
settings?: MetricConfigurationSettings[];
frequency?: ReportFrequency;
}

export interface MetricDefinition {
Expand All @@ -107,7 +118,7 @@ export interface MetricContext {
display_name: string | null | undefined;
reporting_note: string | null | undefined;
required: boolean;
type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE";
type: "TEXT" | "NUMBER" | "MULTIPLE_CHOICE" | "BOOLEAN";
value: string | number | boolean | null | undefined;
multiple_choice_options: string[];
}
Expand All @@ -127,6 +138,8 @@ export interface MetricDisaggregationDimensions {
value: string | number | boolean | null | undefined;
reporting_note: string;
enabled?: boolean;
settings?: MetricConfigurationSettings[];
display_name?: string;
}

export interface CreateReportFormValuesType extends Record<string, unknown> {
Expand Down
8 changes: 4 additions & 4 deletions publisher/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ import { trackNavigation } from "./analytics";
import { DataUpload } from "./components/DataUpload";
import { PageWrapper } from "./components/Forms";
import Header from "./components/Header";
import { MetricsView } from "./components/MetricsView";
import { MetricsView } from "./components/MetricConfiguration/MetricsView";
import CreateReports from "./components/Reports/CreateReport";
import ReportDataEntry from "./components/Reports/ReportDataEntry";
import ReviewMetrics from "./components/ReviewMetrics/ReviewMetrics";
import AccountSettings from "./pages/AccountSettings";
import Reports from "./pages/Reports";
import Settings from "./pages/Settings";

const App: React.FC = (): ReactElement => {
const location = useLocation();
Expand All @@ -43,10 +43,10 @@ const App: React.FC = (): ReactElement => {

<Routes>
<Route path="/" element={<Reports />} />
<Route path="/data" element={<MetricsView />} />
<Route path="/reports/create" element={<CreateReports />} />
<Route path="/reports/:id" element={<ReportDataEntry />} />
<Route path="/settings" element={<AccountSettings />} />
<Route path="/metrics" element={<MetricsView />} />
<Route path="/settings" element={<Settings />} />
<Route path="/upload" element={<DataUpload />} />
<Route path="/review-metrics" element={<ReviewMetrics />} />
</Routes>
Expand Down
6 changes: 3 additions & 3 deletions publisher/src/components/Auth/AuthWall.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ import { Loading } from "../Loading";
import UnauthorizedPage from "./UnauthorizedPage";
import VerificationPage from "./VerificationPage";

const AuthWall: React.FC<React.PropsWithChildren> = ({
children,
}): React.ReactElement | null => {
const AuthWall: React.FC<
React.PropsWithChildren<{ children?: React.ReactNode }>
> = ({ children }): React.ReactElement | null => {
const { authStore } = useStore();

useEffect(
Expand Down
9 changes: 6 additions & 3 deletions publisher/src/components/Badge/Badge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,19 +28,21 @@ export type BadgeProps = {
color: BadgeColors;
disabled?: boolean;
loading?: boolean;
noMargin?: boolean;
};

export const BadgeElement = styled.div<{
color?: BadgeColors;
disabled?: boolean;
noMargin?: boolean;
}>`
height: 24px;
display: flex;
justify-content: center;
align-items: center;
background: ${({ color, disabled }) => {
if (color === "GREY" || disabled) {
return palette.highlight.grey9;
return palette.highlight.grey8;
}
if (color === "RED") {
return palette.solid.red;
Expand All @@ -55,21 +57,22 @@ export const BadgeElement = styled.div<{
}};
color: ${palette.solid.white};
padding: 4px 8px;
margin-left: 10px;
font-size: 0.65rem;
font-weight: 600;
white-space: nowrap;
text-transform: capitalize;
${({ noMargin }) => !noMargin && `margin-left: 10px;`};
`;

export const Badge: React.FC<React.PropsWithChildren<BadgeProps>> = ({
color,
disabled,
loading,
noMargin,
children,
}) => {
return (
<BadgeElement color={color} disabled={disabled}>
<BadgeElement color={color} disabled={disabled} noMargin={noMargin}>
{children}
{loading && <MiniLoader />}
</BadgeElement>
Expand Down
14 changes: 5 additions & 9 deletions publisher/src/components/DataUpload/DataUpload.styles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -517,21 +517,16 @@ export const ConfirmationPageContainer = styled.div`
align-items: center;
`;

export const UploadedFilesContainer = styled.div`
max-height: 50vh;
overflow-y: scroll;
`;
export const UploadedFilesContainer = styled.div``;

export const UploadedFilesWrapper = styled.div`
margin-top: 50px;
position: relative;
overflow-y: scroll;
`;

export const UploadedFilesTable = styled(Table)`
padding: unset;
max-height: 40vh;
overflow-y: scroll;
padding-bottom: 50px;
padding-bottom: 100px;
`;

export const ExtendedTabbedBar = styled(TabbedBar)`
Expand Down Expand Up @@ -629,5 +624,6 @@ export const CheckIcon = styled.img`

export const ExtendedOpacityGradient = styled(OpacityGradient)`
height: 50px;
position: absolute;
position: fixed;
bottom: 0;
`;
54 changes: 33 additions & 21 deletions publisher/src/components/DataUpload/UploadedFiles.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { useStore } from "../../stores";
import { removeSnakeCase } from "../../utils";
import downloadIcon from "../assets/download-icon.png";
import { Badge, BadgeColorMapping, BadgeColors } from "../Badge";
import { Title, TitleWrapper } from "../Forms";
import { Loader } from "../Loading";
import {
ActionButton,
Expand All @@ -33,13 +34,15 @@ import {
ExtendedCell,
ExtendedLabelCell,
ExtendedLabelRow,
ExtendedOpacityGradient,
ExtendedRow,
UploadedFile,
UploadedFilesContainer,
UploadedFilesError,
UploadedFilesLoading,
UploadedFilesTable,
UploadedFileStatus,
UploadedFilesWrapper,
} from ".";

export const UploadedFileRow: React.FC<{
Expand Down Expand Up @@ -315,26 +318,35 @@ export const UploadedFiles: React.FC = observer(() => {
}

return (
<UploadedFilesContainer>
<ExtendedLabelRow>
{dataUploadColumnTitles.map((title) => (
<ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
))}
</ExtendedLabelRow>
<UploadedFilesTable>
{uploadedFiles.map((fileDetails) => {
const fileRowDetails = getFileRowDetails(fileDetails);

return (
<UploadedFileRow
key={fileRowDetails.key}
fileRowDetails={fileRowDetails}
deleteUploadedFile={deleteUploadedFile}
updateUploadedFileStatus={updateUploadedFileStatus}
/>
);
})}
</UploadedFilesTable>
</UploadedFilesContainer>
<UploadedFilesWrapper>
<TitleWrapper>
<Title>Uploaded Files</Title>
</TitleWrapper>

<UploadedFilesContainer>
<ExtendedLabelRow>
{dataUploadColumnTitles.map((title) => (
<ExtendedLabelCell key={title}>{title}</ExtendedLabelCell>
))}
</ExtendedLabelRow>

<UploadedFilesTable>
{uploadedFiles.map((fileDetails) => {
const fileRowDetails = getFileRowDetails(fileDetails);

return (
<UploadedFileRow
key={fileRowDetails.key}
fileRowDetails={fileRowDetails}
deleteUploadedFile={deleteUploadedFile}
updateUploadedFileStatus={updateUploadedFileStatus}
/>
);
})}
</UploadedFilesTable>
</UploadedFilesContainer>

<ExtendedOpacityGradient />
</UploadedFilesWrapper>
);
});
3 changes: 1 addition & 2 deletions publisher/src/components/Forms/BinaryRadioButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,8 @@ export const RadioButtonLabel = styled.label<{
display: flex;
justify-content: center;
align-items: center;
background: ${palette.highlight.grey1};
padding: 16px 24px;
border: 1px solid ${palette.highlight.grey3};
border: 1px solid ${palette.highlight.grey4};
border-radius: 2px;
transition: 0.2s ease;

Expand Down
4 changes: 2 additions & 2 deletions publisher/src/components/Forms/NotReportedIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,8 @@ export const NotReportedIcon: React.FC<{
This has been disabled by an admin because the data is unavailable.{" "}
If you have the data for this, consider changing the configuration
in the{" "}
<MetricsViewLink onClick={() => navigate("/metrics")}>
Metrics View
<MetricsViewLink onClick={() => navigate("/settings")}>
Settings
</MetricsViewLink>
.
</NotReportedIconTooltip>
Expand Down
22 changes: 11 additions & 11 deletions publisher/src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ enum MenuItems {
LearnMore = "LEARN MORE",
Settings = "SETTINGS",
Agencies = "AGENCIES",
Metrics = "METRICS",
Data = "DATA",
}

const Menu = () => {
Expand Down Expand Up @@ -77,8 +77,8 @@ const Menu = () => {
setActiveMenuItem(MenuItems.CreateReport);
} else if (location.pathname === "/settings") {
setActiveMenuItem(MenuItems.Settings);
} else if (location.pathname === "/metrics") {
setActiveMenuItem(MenuItems.Metrics);
} else if (location.pathname === "/data") {
setActiveMenuItem(MenuItems.Data);
} else {
setActiveMenuItem(undefined);
}
Expand All @@ -92,14 +92,6 @@ const Menu = () => {
`Welcome, ${userStore.nameOrEmail} at ${userStore.currentAgency.name}`}
</WelcomeUser>

{/* Metrics View */}
<MenuItem
onClick={() => navigate("/metrics")}
active={activeMenuItem === MenuItems.Metrics}
>
Metrics
</MenuItem>

{/* Reports */}
<MenuItem
onClick={() => navigate("/")}
Expand All @@ -108,6 +100,14 @@ const Menu = () => {
Reports
</MenuItem>

{/* Data (Visualizations) */}
<MenuItem
onClick={() => navigate("/data")}
active={activeMenuItem === MenuItems.Data}
>
Data
</MenuItem>

{/* Learn More */}
<MenuItem active={activeMenuItem === MenuItems.LearnMore}>
<a
Expand Down
Loading