shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update modal implementation across multiple views (#150)

Browse Source 
* fix: filter out null users from workspace members in board filters

* refactor: update modal implementation across multiple views
This commit is contained in:
Ridham Khandar
2025-08-18 17:11:44 +05:30
committed by GitHub
parent 4f57fc45a7
commit c7f7531b11
5 changed files with 159 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/src/views/board/index.tsx
View File

@@ -375,7 +375,7 @@ export default function BoardPage() {
/> />
<Filters <Filters
labels={boardData?.labels ?? []} labels={boardData?.labels ?? []}
members={boardData?.workspace.members ?? []} members={boardData?.workspace.members?.filter(member => member.user !== null) ?? []}
position="left" position="left"
isLoading={!boardData} isLoading={!boardData}
/> />

37
apps/web/src/views/boards/index.tsx
View File

@@ -13,7 +13,7 @@ import { ImportBoardsForm } from "./components/ImportBoardsForm";
import { NewBoardForm } from "./components/NewBoardForm"; import { NewBoardForm } from "./components/NewBoardForm";
export default function BoardsPage() { export default function BoardsPage() {
const { openModal, modalContentType } = useModal(); const { openModal, modalContentType, isOpen } = useModal();
const { workspace, hasLoaded } = useWorkspace(); const { workspace, hasLoaded } = useWorkspace();
if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE"); if (hasLoaded && !workspace.publicId) openModal("NEW_WORKSPACE");
@@ -50,12 +50,35 @@ export default function BoardsPage() {
</div> </div>
</div> </div>
<Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}> <>
{modalContentType === "NEW_FEEDBACK" && <FeedbackModal />} <Modal
{modalContentType === "NEW_BOARD" && <NewBoardForm />} modalSize="md"
{modalContentType === "IMPORT_BOARDS" && <ImportBoardsForm />} isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />} >
</Modal> <FeedbackModal />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_BOARD"}
>
<NewBoardForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "IMPORT_BOARDS"}
>
<ImportBoardsForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
>
<NewWorkspaceForm />
</Modal>
</>
<div className="flex h-full flex-row"> <div className="flex h-full flex-row">
<BoardsList /> <BoardsList />

76
apps/web/src/views/card/index.tsx
View File

@@ -142,6 +142,7 @@ export default function CardPage() {
openModal, openModal,
getModalState, getModalState,
clearModalState, clearModalState,
isOpen,
} = useModal(); } = useModal();
const { showPopup } = usePopup(); const { showPopup } = usePopup();
const { workspace } = useWorkspace(); const { workspace } = useWorkspace();
@@ -305,47 +306,86 @@ export default function CardPage() {
</div> </div>
</div> </div>
<Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}> <>
{modalContentType === "NEW_FEEDBACK" && <FeedbackModal />} <Modal
{modalContentType === "NEW_LABEL" && ( modalSize="md"
isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
>
<FeedbackModal />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_LABEL"}
>
<LabelForm boardPublicId={boardId ?? ""} refetch={refetchCard} /> <LabelForm boardPublicId={boardId ?? ""} refetch={refetchCard} />
)} </Modal>
{modalContentType === "EDIT_LABEL" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "EDIT_LABEL"}
>
<LabelForm <LabelForm
boardPublicId={boardId ?? ""} boardPublicId={boardId ?? ""}
refetch={refetchCard} refetch={refetchCard}
isEdit isEdit
/> />
)} </Modal>
{modalContentType === "DELETE_LABEL" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_LABEL"}
>
<DeleteLabelConfirmation <DeleteLabelConfirmation
refetch={refetchCard} refetch={refetchCard}
labelPublicId={entityId} labelPublicId={entityId}
/> />
)} </Modal>
{modalContentType === "DELETE_CARD" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_CARD"}
>
<DeleteCardConfirmation <DeleteCardConfirmation
boardPublicId={boardId ?? ""} boardPublicId={boardId ?? ""}
cardPublicId={cardId} cardPublicId={cardId}
/> />
)} </Modal>
{modalContentType === "DELETE_COMMENT" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_COMMENT"}
>
<DeleteCommentConfirmation <DeleteCommentConfirmation
cardPublicId={cardId} cardPublicId={cardId}
commentPublicId={entityId} commentPublicId={entityId}
/> />
)} </Modal>
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
{modalContentType === "ADD_CHECKLIST" && ( <Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
>
<NewWorkspaceForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "ADD_CHECKLIST"}
>
<NewChecklistForm cardPublicId={cardId} /> <NewChecklistForm cardPublicId={cardId} />
)} </Modal>
{modalContentType === "DELETE_CHECKLIST" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_CHECKLIST"}
>
<DeleteChecklistConfirmation <DeleteChecklistConfirmation
cardPublicId={cardId} cardPublicId={cardId}
checklistPublicId={entityId} checklistPublicId={entityId}
/> />
)} </Modal>
</Modal> </>
</div> </div>
</> </>
); );

37
apps/web/src/views/members/index.tsx
View File

@@ -19,7 +19,7 @@ import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation"
import { InviteMemberForm } from "./components/InviteMemberForm"; import { InviteMemberForm } from "./components/InviteMemberForm";
export default function MembersPage() { export default function MembersPage() {
const { modalContentType, openModal } = useModal(); const { modalContentType, openModal, isOpen } = useModal();
const { workspace } = useWorkspace(); const { workspace } = useWorkspace();
const { data, isLoading } = api.workspace.byId.useQuery( const { data, isLoading } = api.workspace.byId.useQuery(
@@ -222,12 +222,35 @@ export default function MembersPage() {
</div> </div>
</div> </div>
<Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}> <>
{modalContentType === "NEW_FEEDBACK" && <FeedbackModal />} <Modal
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />} modalSize="md"
{modalContentType === "INVITE_MEMBER" && <InviteMemberForm />} isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
{modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />} >
</Modal> <FeedbackModal />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
>
<NewWorkspaceForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "INVITE_MEMBER"}
>
<InviteMemberForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "REMOVE_MEMBER"}
>
<DeleteMemberConfirmation />
</Modal>
</>
</div> </div>
</> </>
); );

53
apps/web/src/views/settings/index.tsx
View File

@@ -26,7 +26,7 @@ import UpdateWorkspaceNameForm from "./components/UpdateWorkspaceNameForm";
import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm"; import UpdateWorkspaceUrlForm from "./components/UpdateWorkspaceUrlForm";
export default function SettingsPage() { export default function SettingsPage() {
const { modalContentType, openModal } = useModal(); const { modalContentType, openModal, isOpen } = useModal();
const { workspace } = useWorkspace(); const { workspace } = useWorkspace();
const utils = api.useUtils(); const utils = api.useUtils();
const { showPopup } = usePopup(); const { showPopup } = usePopup();
@@ -322,22 +322,49 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
<Modal modalSize={modalContentType === "NEW_FEEDBACK" ? "md" : "sm"}> <>
{modalContentType === "NEW_FEEDBACK" && <FeedbackModal />} <Modal
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />} modalSize="md"
{modalContentType === "DELETE_WORKSPACE" && ( isVisible={isOpen && modalContentType === "NEW_FEEDBACK"}
>
<FeedbackModal />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "NEW_WORKSPACE"}
>
<NewWorkspaceForm />
</Modal>
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_WORKSPACE"}
>
<DeleteWorkspaceConfirmation /> <DeleteWorkspaceConfirmation />
)} </Modal>
{modalContentType === "UPDATE_WORKSPACE_URL" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "UPDATE_WORKSPACE_URL"}
>
<CustomURLConfirmation workspacePublicId={workspace.publicId} /> <CustomURLConfirmation workspacePublicId={workspace.publicId} />
)} </Modal>
{modalContentType === "DELETE_ACCOUNT" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "DELETE_ACCOUNT"}
>
<DeleteAccountConfirmation /> <DeleteAccountConfirmation />
)} </Modal>
{modalContentType === "CHANGE_PASSWORD" && (
<Modal
modalSize="sm"
isVisible={isOpen && modalContentType === "CHANGE_PASSWORD"}
>
<ChangePasswordFormConfirmation /> <ChangePasswordFormConfirmation />
)} </Modal>
</Modal> </>
</div> </div>
</div> </div>
</> </>