Skip to content

Commit

Permalink
add final version of visions page
Browse files Browse the repository at this point in the history
  • Loading branch information
@mahmoudmoravej
mahmoudmoravej committed Feb 3, 2024
1 parent 9b55216 commit 34709cd
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 79 deletions.
19 changes: 16 additions & 3 deletions app/@types/graphql/schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -765,7 +765,7 @@ export type Vision = {
content?: Maybe<Scalars['String']['output']>;
cycle?: Maybe<Cycle>;
cycleId?: Maybe<Scalars['Int']['output']>;
date: Scalars['ISO8601DateTime']['output'];
date?: Maybe<Scalars['ISO8601DateTime']['output']>;
description: Scalars['String']['output'];
documentId?: Maybe<Scalars['String']['output']>;
documentUrl?: Maybe<Scalars['String']['output']>;
Expand All @@ -776,6 +776,7 @@ export type Vision = {
organizationId?: Maybe<Scalars['Int']['output']>;
validFrom?: Maybe<Scalars['ISO8601DateTime']['output']>;
validTo?: Maybe<Scalars['ISO8601DateTime']['output']>;
visionType: VisionType;
visionTypeId: Scalars['Int']['output'];
};

Expand All @@ -799,6 +800,12 @@ export type VisionEdge = {
node?: Maybe<Vision>;
};

export type VisionType = {
__typename?: 'VisionType';
id: Scalars['Int']['output'];
title?: Maybe<Scalars['String']['output']>;
};

export type AssignActivitiesMutationVariables = Exact<{
input: AssignMissedCycleActivitiesInput;
}>;
Expand Down Expand Up @@ -931,7 +938,7 @@ export type IndividualVisionsQueryVariables = Exact<{
}>;


export type IndividualVisionsQuery = { __typename?: 'Query', individual: { __typename?: 'Individual', fullname?: string | null }, cycles: { __typename?: 'CycleConnection', nodes?: Array<{ __typename?: 'Cycle', id: number, title: string } | null> | null }, visions: { __typename?: 'VisionConnection', nodes?: Array<{ __typename?: 'Vision', id: number, visionTypeId: number, documentId?: string | null, documentUrl?: string | null, hasContent: boolean, date: any, validFrom?: any | null, validTo?: any | null, description: string, cycleId?: number | null, cycle?: { __typename?: 'Cycle', title: string } | null } | null> | null } };
export type IndividualVisionsQuery = { __typename?: 'Query', individual: { __typename?: 'Individual', fullname?: string | null }, cycles: { __typename?: 'CycleConnection', nodes?: Array<{ __typename?: 'Cycle', id: number, title: string } | null> | null }, visions: { __typename?: 'VisionConnection', nodes?: Array<{ __typename?: 'Vision', id: number, documentId?: string | null, documentUrl?: string | null, hasContent: boolean, date?: any | null, validFrom?: any | null, validTo?: any | null, description: string, cycleId?: number | null, individualId?: number | null, visionType: { __typename?: 'VisionType', id: number, title?: string | null }, cycle?: { __typename?: 'Cycle', title: string, from: any, to: any } | null } | null> | null } };

export type IndividualsQueryVariables = Exact<{
managerId?: InputMaybe<Scalars['ID']['input']>;
Expand Down Expand Up @@ -1665,7 +1672,10 @@ export const IndividualVisionsDocument = gql`
) {
nodes {
id
visionTypeId
visionType {
id
title
}
documentId
documentUrl
hasContent
Expand All @@ -1674,8 +1684,11 @@ export const IndividualVisionsDocument = gql`
validTo
description
cycleId
individualId
cycle {
title
from
to
}
}
}
Expand Down
69 changes: 47 additions & 22 deletions app/components/IndividualForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,28 +139,53 @@ export function IndividualForm<T extends IndividualFormData>({
</div>
<div className="w-1/2">
{id && (
<Card className="mt-6 w-96">
<CardBody>
<Typography variant="h5" color="blue-gray" className="mb-2">
User Activities
</Typography>
<Typography>
you can see all user activities through channls like Github,
Meetings, Slack, etc.
</Typography>
</CardBody>
<CardFooter className="pt-0">
<Link to={`/individuals/${id}/activities`}>
<Button
size="sm"
variant="text"
className="flex items-center gap-2"
>
Show Activities
</Button>
</Link>
</CardFooter>
</Card>
<>
<Card className="mt-6 w-96">
<CardBody>
<Typography variant="h5" color="blue-gray" className="mb-2">
User Visions
</Typography>
<Typography>
you can see all user's visions, like organizational assigned
or personal intended outcomes, job level description, next job
level description, goals, etc.
</Typography>
</CardBody>
<CardFooter className="pt-0">
<Link to={`/individuals/${id}/visions`}>
<Button
size="sm"
variant="text"
className="flex items-center gap-2"
>
Show Visions
</Button>
</Link>
</CardFooter>
</Card>
<Card className="mt-6 w-96">
<CardBody>
<Typography variant="h5" color="blue-gray" className="mb-2">
User Activities
</Typography>
<Typography>
you can see all user activities through channls like Github,
Meetings, Slack, etc.
</Typography>
</CardBody>
<CardFooter className="pt-0">
<Link to={`/individuals/${id}/activities`}>
<Button
size="sm"
variant="text"
className="flex items-center gap-2"
>
Show Activities
</Button>
</Link>
</CardFooter>
</Card>
</>
)}
</div>
</div>
Expand Down
8 changes: 7 additions & 1 deletion app/routes/_dashboard.individuals.($id).visions/graphql/query.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ query individualVisions($individualId: ID!, $cycleId: ID) {
) {
nodes {
id
visionTypeId
visionType {
id
title
}
documentId
documentUrl
hasContent
Expand All @@ -24,8 +27,11 @@ query individualVisions($individualId: ID!, $cycleId: ID) {
validTo
description
cycleId
individualId
cycle {
title
from
to
}
}
}
Expand Down
104 changes: 51 additions & 53 deletions app/routes/_dashboard.individuals.($id).visions/route.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useIndividualVisionsQuery } from "@app-types/graphql";
import {
ArrowTopRightOnSquareIcon,
ArrowDownOnSquareStackIcon,
DocumentChartBarIcon,
} from "@heroicons/react/24/solid";
import {
Card,
Expand All @@ -27,28 +27,27 @@ import { authenticator } from "~/services/auth.server";
import { AnalyzeButton, ImportModal } from "./components";
import { noNull } from "~/utils";

type FilterType = "all" | "analyzed" | "not-analyzed";
type FilterType = "all" | "personal" | "organizational";
const TABS: { label: string; value: FilterType }[] = [
{
label: "All",
value: "all",
},
{
label: "Analyzed",
value: "analyzed",
label: "Personal",
value: "personal",
},
{
label: "Raw",
value: "not-analyzed",
label: "Organizational Assigned",
value: "organizational",
},
];
const TABLE_HEAD = [
"Title",
"Content?",
"Date",
"Cycle",
"Valid From",
"Valid To",
"Personal?",
"Period",
"Content Loaded?",
"Content Url",
];

export let loader: LoaderFunction = async ({ request }) => {
Expand Down Expand Up @@ -89,12 +88,14 @@ export default function Visions() {
const visions = data.visions.nodes.filter(noNull).map((node) => ({
id: node.id,
title: node.description ?? "-",
visionType: node.visionType?.title ?? "-",
url: node.documentUrl,
date: new Date(node.date),
valid_from: new Date(node.validFrom),
valid_to: new Date(node.validTo),
valid_from: new Date(node.cycle ? node.cycle.from : node.validFrom),
valid_to: new Date(node.cycle ? node.cycle.from : node.validTo),
hasContent: node.hasContent,
cycle: node.cycle?.title ?? "-",
cycleTitle: node.cycle?.title ?? "-",
isPersonal: node.individualId != null ? true : false,
}));

const cycles = data.cycles?.nodes?.filter(noNull).map((node) => ({
Expand Down Expand Up @@ -143,28 +144,11 @@ export default function Visions() {
</Typography>
</div>
<div className="flex shrink-0 flex-col gap-2 sm:flex-row">
<Button
className="flex items-center gap-3"
size="sm"
variant="outlined"
onClick={() => setImportDialogOpen(true)}
>
<ArrowDownOnSquareStackIcon
strokeWidth={2}
className="h-4 w-4"
/>
Import recent visions...
</Button>
<Button
className="flex items-center gap-3"
size="sm"
variant="outlined"
>
<ArrowDownOnSquareStackIcon
strokeWidth={2}
className="h-4 w-4"
/>
Analyze remained visions...
<Button className="flex items-center gap-3" size="sm">
<DocumentChartBarIcon strokeWidth={2} className="h-4 w-4" />
<Link to={"individuals/" + individualId + "/visions/new"}>
Add Vision
</Link>
</Button>
</div>
</div>
Expand Down Expand Up @@ -219,7 +203,20 @@ export default function Visions() {
</thead>
<tbody>
{visions.map(
({ title, id, url, hasContent, date, cycle }, index) => {
(
{
title,
visionType,
id,
url,
hasContent,
valid_from,
valid_to,
cycleTitle,
isPersonal,
},
index,
) => {
const isLast = index === visions.length - 1;
const classes = isLast
? "p-4"
Expand Down Expand Up @@ -255,7 +252,7 @@ export default function Visions() {
variant="small"
className="font-normal italic"
>
Pull Request Contribution
{visionType}
</Typography>
</div>
</div>
Expand All @@ -265,8 +262,8 @@ export default function Visions() {
<Chip
variant="ghost"
size="sm"
value={hasContent ? "Yes" : "No"}
color={hasContent ? "green" : "blue-gray"}
value={isPersonal ? "Personal" : "Organizational"}
color={isPersonal ? "blue" : "gray"}
/>
</div>
</td>
Expand All @@ -277,29 +274,30 @@ export default function Visions() {
color="blue-gray"
className="font-normal"
>
{date?.toLocaleString("en-CA", {
{valid_from.toLocaleString("en-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
}) + " - "}
{valid_to.toLocaleString("en-CA", {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "2-digit",
minute: "numeric",
hour12: false,
})}
{cycleTitle ? "(" + cycleTitle + ")" : ""}
</Typography>
</div>
</td>
<td className={classes}>
<div className="flex flex-col">
<Typography
variant="small"
color="blue-gray"
className="font-normal"
>
{cycle}
</Typography>
<div className="w-max">
<Chip
variant="ghost"
size="sm"
value={hasContent ? "Yes" : "No"}
color={hasContent ? "green" : "blue-gray"}
/>
</div>
</td>

<td className={classes}>
<Link to={url!} target="_blank" rel="noreferrer">
<Tooltip content="Show PR">
Expand Down

0 comments on commit 34709cd

Please sign in to comment.