Skip to content

Commit

Permalink
Added Area specific Descrition and skill level
Browse files Browse the repository at this point in the history
  • Loading branch information
anoopkarnik committed Aug 19, 2024
1 parent 9d35c33 commit 4708d1d
Show file tree
Hide file tree
Showing 8 changed files with 204 additions and 13 deletions.
9 changes: 8 additions & 1 deletion apps/dashboard-app/actions/notion/notion.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use server'
import { getConnectionsByUserAndType, updateNotionDb} from "@repo/prisma-db/repo/connection";
import { createNotionPage, getNotionDatabaseProperties, modifyNotionPage, queryAllNotionDatabase, queryNotionDatabase } from '@repo/notion/notion-client'
import { createNotionPage, getNotionDatabaseProperties, modifyNotionPage, queryAllNotionDatabase, queryNotionDatabase,
getNotionPage
} from '@repo/notion/notion-client'
import { deletePage } from "../../../../packages/notion/src";

export const getDatabases = async (token: string) => {
Expand Down Expand Up @@ -91,4 +93,9 @@ export const createNotionPageAction = async ({apiToken, dbId, properties}:any) =
export const modifyNotionPageAction = async ({apiToken, pageId, properties}:any) => {
const response = await modifyNotionPage({apiToken, page_id:pageId, properties})
return response;
}

export const queryNotionPageAction = async ({apiToken, pageId}:any) => {
const response = await getNotionPage({apiToken, page_id:pageId})
return response;
}
31 changes: 31 additions & 0 deletions apps/dashboard-app/app/(dashboard)/skill-trees/_action/summary.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
'use server'
export const calculateTotalLength = async (skillTree:any, skillTrees:any) => {
let totalNotes = skillTree["Self"]
let totalAttachments = skillTree["Others"]
let totalVideos = skillTree["Videos"]
let totalProjects = skillTree["Projects"]
let children = skillTree["Sub-tasks"]
while (children.length > 0) {
const childId = children.pop()
const child = skillTrees.find((item:any) => item.id === childId)
totalNotes.push(...child["Self"])
totalAttachments.push(...child["Others"])
totalVideos.push(...child["Videos"])
totalProjects.push(...child["Projects"])
children.push(...child["Sub-tasks"])
}
return {totalNotes, totalAttachments, totalVideos, totalProjects}
}

export const calculateTotalLengthPerType = async (skillTrees:any, skillTreeItems:any) => {
let notes:any = []
let attachments:any = []
let videos:any = []
for (let skillTree of skillTrees){
const {totalNotes, totalAttachments, totalVideos, totalProjects: projects} = await calculateTotalLength(skillTree, skillTreeItems)
notes.push(...totalNotes)
attachments.push(...totalAttachments)
videos.push(...totalVideos)
}
return {notes, attachments, videos}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
'use client'
import React from 'react'
import DbSelection from '../../../../components/DbSelection'

const Settings = () => {

return (
<div className='my-4 flex flex-col w-[95%] mx-[2.5%] '>
<h1 className='text-2xl font-medium my-4 text-center'>Create or Attach your Knowledge Base Notion DBs</h1>
<div className='flex flex-wrap'>
<DbSelection title='Areas Notion Db' name='Areas' fieldName="areasDb"/>
<DbSelection title='Skill Treees Notion Db' name='Skill Trees' fieldName="skillTreesDb"/>
</div>
</div>
)
}

export default Settings
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/molecules/shadcn/Card'
import React from 'react'
import React, { use, useEffect, useState } from 'react'
import SkillTreeDialog from './SkillTreeDialog'
import { calculateTotalLength } from '../_action/summary';

const SkillTreeCard = ({skillTree}:any) => {
const SkillTreeCard = ({skillTree, skillTrees}:any) => {
const [totalNotes, setTotalNotes] = useState([]);
const [totalAttachments, setTotalAttachments] = useState([]);
const [totalVideos, setTotalVideos] = useState([]);
const [totalProjects, setTotalProjects] = useState([]);

useEffect(() => {
const fetchTotal = async () => {
const {totalNotes, totalAttachments, totalVideos, totalProjects} = await calculateTotalLength(skillTree, skillTrees)
setTotalNotes(totalNotes)
setTotalAttachments(totalAttachments)
setTotalVideos(totalVideos)
setTotalProjects(totalProjects)
}
fetchTotal()
},[])
return (
<Card className="flex flex-col items-center justify-between ">
<CardHeader className="flex flex-col items-center justify-center gap-2 ">
Expand All @@ -10,26 +27,32 @@ const SkillTreeCard = ({skillTree}:any) => {
<CardContent className='flex flex-col gap-4 w-full'>
<div className='flex flex-col '>
<div className='flex items-center justify-between '>
<CardDescription className='text-center'>Total Children</CardDescription>
<CardDescription className='text-center'>Direct Children</CardDescription>
<CardDescription className='text-center'>{skillTree["Subchild Total"]}</CardDescription>
</div>
<div className='flex items-center justify-between '>
<CardDescription className='text-center'>Total Notes</CardDescription>
<CardDescription className='text-center'>{skillTree["Self"].length}</CardDescription>
<CardDescription className='text-center'>{totalNotes.length}</CardDescription>
</div>
<div className='flex items-center justify-between '>
<CardDescription className='text-center'>Total Attachments</CardDescription>
<CardDescription className='text-center'>{skillTree["Areas"].length}</CardDescription>
<CardDescription className='text-center'>{totalAttachments.length}</CardDescription>
</div>
<div className='flex items-center justify-between '>
<CardDescription className='text-center'>Total Videos</CardDescription>
<CardDescription className='text-center'>{skillTree["Videos"].length}</CardDescription>
<CardDescription className='text-center'>{totalVideos.length}</CardDescription>
</div>
<div className='flex items-center justify-between '>
<CardDescription className='text-center'>Total Projects</CardDescription>
<CardDescription className='text-center'>{skillTree["Projects"].length}</CardDescription>
<CardDescription className='text-center'>{totalProjects.length}</CardDescription>
</div>
</div>
<div className='flex items-center justify-center gap-4 flex-wrap w-full '>
<SkillTreeDialog title="Notes" content={totalNotes} />
<SkillTreeDialog title="Attachments" content={totalAttachments} />
<SkillTreeDialog title="Videos" content={totalVideos} />
<SkillTreeDialog title="Projects" content={totalProjects} />
</div>
</CardContent>
</Card>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
'use client'
import React, { useContext, useState } from 'react';
import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@repo/ui/molecules/shadcn/Dialog';
import { Button } from '@repo/ui/molecules/shadcn/Button';
import { queryNotionPageAction } from '../../../../actions/notion/notion';
import { ConnectionsContext } from '../../../../providers/connections-provider';
import { format } from 'date-fns';


const SkillTreeDialog = ({ title, content }: any) => {

const [pages, setPages] = useState<any>([]);
const connectionsContext = useContext(ConnectionsContext);
const apiToken = connectionsContext?.notionNode?.accessToken
const [selectedPageId, setSelectedPageId] = useState<string | null>(null); // State to track selected page ID

const handleClick = (event: React.MouseEvent) => {
event.stopPropagation();
const fetchPages = async () => {
console.log(content, apiToken)
if (!content || !apiToken) return;
for (let page of content) {
const data = await queryNotionPageAction({apiToken, pageId: page });
console.log(data)
setPages((pages: any) => [...pages, data]);
}
}
setPages([]);
fetchPages();
event.stopPropagation(); // Prevent the event from bubbling up to the Card
};

const handlePageClick = (page: any) => {
let id = page.Name.replaceAll(' ','-').replaceAll('/','-') + '-'+ page.id.replaceAll('-','');
console.log(id)
const url = `https://www.notion.so/${id}`; // Replace with your desired URL
window.open(url, '_blank');
};


return (
<Dialog>
<DialogTrigger asChild>
<Button variant='outline' onClick={handleClick}>{title}</Button>
</DialogTrigger>
<DialogContent className='h-[90vh] min-w-[80%] flex flex-col'>
<DialogHeader>
<DialogTitle className='text-center mb-4'>{title}</DialogTitle>
</DialogHeader>
<div className='flex-1 overflow-y-auto'>
{pages && pages.length > 0 ? (
<div className='flex flex-col'>
{pages.map((page: any, index: number) => (
<div key={index} className='cursor-pointer hover:bg-gray-800 p-4' onClick={() => handlePageClick(page)}>
<div className='flex items-center justify-start gap-2'>
{page.Name}
<DialogDescription>{page['Review Date'] ? format(page['Review Date'], "dd MMMyy") : ''} | </DialogDescription>
<DialogDescription>{page?.['Self Grade Name']}</DialogDescription>
</div>
<DialogDescription>{page.Description ? page.Description : 'No Description Available'}</DialogDescription>
</div>
))}
</div>
) : (
<p>No {title.toLowerCase()} available.</p>
)}
</div>
<DialogFooter>
</DialogFooter>
</DialogContent>
</Dialog>
);
};

export default SkillTreeDialog;
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'
import SkillTreeCard from './SkillTreeCard'
import { useRouter, useSearchParams } from 'next/navigation'
import BreadCrumb from './BreadCrumb'
import { calculateTotalLength, calculateTotalLengthPerType } from '../_action/summary'

const SkillTrees = ({skillTreeItems}:any) => {

Expand All @@ -15,6 +16,7 @@ const SkillTrees = ({skillTreeItems}:any) => {
const fetchSkillTrees = async () => {
const parentId = searchParams.get('parentId')
const type = searchParams.get('type')

let skillTrees;
if (!type) return;
if (!parentId){
Expand All @@ -24,6 +26,7 @@ const SkillTrees = ({skillTreeItems}:any) => {
else{
skillTrees = skillTreeItems.filter((item:any) => item.Type === type).filter((item:any) => item['Parent-task'].includes(parentId))
const selectedParent = skillTreeItems.find((item: any) => item.id === parentId)

if (selectedParent) {
setParents(prev => [...prev, selectedParent])
}
Expand All @@ -33,6 +36,20 @@ const SkillTrees = ({skillTreeItems}:any) => {
fetchSkillTrees()
},[skillTreeItems,searchParams])

const [totalNotes, setTotalNotes] = useState([]);
const [totalAttachments, setTotalAttachments] = useState([]);
const [totalVideos, setTotalVideos] = useState([]);

useEffect(() => {
const fetchTotal = async () => {
const {notes, attachments, videos} = await calculateTotalLengthPerType(skillTrees, skillTreeItems)
setTotalNotes(notes)
setTotalAttachments(attachments)
setTotalVideos(videos)
}
fetchTotal()
},[skillTreeItems,skillTrees])

const selectParentId = (parentId:any) =>{
const params = new URLSearchParams(searchParams.toString())
params.set('parentId', parentId)
Expand All @@ -51,10 +68,18 @@ const SkillTrees = ({skillTreeItems}:any) => {
return (
<div>
<BreadCrumb parents={parents} onBreadcrumbClick={handleBreadcrumbClick}/>
<div className='grid grid-cols-3 gap-4 mx-4 my-4'>

<div className='flex items-center justify-between gap-4 mx-4 my-4'>
<div className='flex items-center justify-between gap-4'>
<div className='text-lg'>Total Notes: {totalNotes.length}</div>
<div className='text-lg'>Total Attachments: {totalAttachments.length}</div>
<div className='text-lg'>Total Videos: {totalVideos.length}</div>
</div>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mx-4 my-4'>
{skillTrees.map((item:any) =>(
<div key={item.id} className='cursor-pointer' onClick={()=> selectParentId(item.id)}>
<SkillTreeCard skillTree={item}/>
<SkillTreeCard skillTree={item} skillTrees={skillTreeItems} />
</div>
))}

Expand Down
14 changes: 13 additions & 1 deletion apps/dashboard-app/app/(dashboard)/skill-trees/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Tabs, TabsList, TabsTrigger } from '@repo/ui/molecules/shadcn/Tabs'
import { queryAllNotionDatabaseAction } from '../../../actions/notion/notion'
import SkillTrees from './_components/SkillTrees'
import { useRouter, useSearchParams } from 'next/navigation'
import { SettingsIcon } from 'lucide-react'
import Settings from './_components/Settings'

const SkillTreePage = () => {
const [skillTreeType , setSkillTreeType] = useState('')
Expand All @@ -34,6 +36,7 @@ const SkillTreePage = () => {
},[skillTreesDbId, apiToken])

const selectType = (type:any) =>{
setSkillTreeType(type)
const params = new URLSearchParams(searchParams.toString())
params.set('type', type)
params.set('parentId', '')
Expand Down Expand Up @@ -71,8 +74,17 @@ const SkillTreePage = () => {
<div>{type.title}</div>
</TabsTrigger>
))}
<TabsTrigger onClick={()=>selectType('Settings')} value='Settings' className='flex gap-1 border-b-2 shadow-md shadow-border/10 hover:bg-accent ' >
<SettingsIcon/>
<div>Settings</div>
</TabsTrigger>
</TabsList>
<SkillTrees skillTreeItems={skillTrees}/>

{
skillTreeType==='Settings' ?
<Settings/> :
<SkillTrees skillTreeItems={skillTrees}/>
}
</Tabs>
)
}
Expand Down
4 changes: 2 additions & 2 deletions packages/notion/src/modify.ts
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ async function deletePageBlocks(page_id:any) {
return { message: 'Deleted the children' };
}

async function getNotionPage(page_id:any) {
const response = await getPage(page_id);
export const getNotionPage = async ({apiToken,page_id}:any) => {
const response = await getPage({apiToken,page_id});
return modifyResult(response);
}

0 comments on commit 4708d1d

Please sign in to comment.