Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

🚀 Member Event-Based Task System (Permission-Controlled)

未关闭
#24 5 条评论 0 个 reaction 已指派 1 人 在 GitHub 查看

@vivek0028 已经在做这个了。

开始于 2026年5月6日。

评估

这个 Issue 还没有评估数据。

描述

level3 NSoC'26

This project is a production-grade Member Task System where members operate with organizer-level capabilities, controlled via a permission-based system.

✨ Features
  • Event-based task management
  • Permission-driven UI & actions
  • Full task lifecycle:
Create → Assign → Submit → Review → Update
  • Shared UI across roles (Organizer & Member)

🧠 Core Philosophy

Same UI for everyone → Different capabilities via permissions

  • ❌ No restricted/limited UI for members
  • ✅ One powerful system controlled via permissions

🧠 Architecture

Sidebar → Event → Tasks → Submissions → Review → Progress

🔐 Permission System

Default Permissions (All Members)
  • View assigned tasks
  • View task details
  • Submit work
  • Comment

Advanced Permissions (Organizer-Controlled)
Permission Description
CREATE_TASK Create new tasks
ASSIGN_TASK Assign tasks to others
UPDATE_STATUS Update task status
EDIT_TASK Edit tasks
DELETE_TASK Delete tasks
MULTIPLE_SUBMISSION Allow multiple submissions
LATE_SUBMISSION Allow late submissions
VIEW_ALL_TASKS View all event tasks

🧭 Feature Flow

  1. Select Event
  2. View tasks (assigned OR all based on permission)
  3. Create task (if allowed)
  4. Assign task (if allowed)
  5. Submit work
  6. Review tasks (if allowed)
  7. Edit / delete tasks (if allowed)

🧱 Layout Structure


<MainLayout>
  <SideBar />
  <Content />
</MainLayout>

📂 Sidebar

Default Routes

SideBar.tsx

/member/dashboard
/member/tasks
Permission-Based Rendering
if (permissions.includes("CREATE_TASK")) {
  show("Create Task");
}

if (permissions.includes("VIEW_ALL_TASKS")) {
  show("All Tasks");
}

Requirements
  • Active route highlighting

  • Responsive (mobile drawer)

  • Collapsible

  • Permission-aware UI


📄 Pages & Features

📋 Task List Page

Route: /member/tasks

Behavior
if (permissions.includes("VIEW_ALL_TASKS")) {
fetchAllTasks();
} else {
fetchAssignedTasks();
}
Filters
  • Status (Todo / In Progress / Completed)

  • Time (Upcoming / Past)

  • Priority

  • Member (if allowed)

  • Search (debounced)

Actions

Action Permission
View Default
Edit EDIT_TASK
Delete DELETE_TASK

🔍 Task Detail Page

Route: /member/tasks/:taskId

Submission Rules
if (!permissions.includes("MULTIPLE_SUBMISSION")) {
  restrictSingleSubmission();
}

if (deadlinePassed && !permissions.includes("LATE_SUBMISSION")) {
disableSubmission();
}

Sections
  • Task Info

  • Submission Panel

  • Submission History

  • Status Update (if allowed)

  • Comments

  • Review Panel (if allowed)


➕ Create Task

Route: /member/tasks/create

if (!permissions.includes("CREATE_TASK")) {
redirect("/member/tasks");
}

✏️ Edit Task
if (!permissions.includes("EDIT_TASK")) {
blockAccess();
}

🗑️ Delete Task
if (!permissions.includes("DELETE_TASK")) {
blockAction();
}

🧱 Component Structure

components/
layout/
SideBar.tsx
MainLayout.tsx

event/
EventDropdown.jsx

task/
TaskTable.jsx
TaskDetail.jsx
TaskForm.jsx
SubmissionForm.jsx
CommentSection.jsx

common/
StatusBadge.jsx
PriorityBadge.jsx
ConfirmModal.jsx
SkeletonLoader.jsx


🔄 State Management

Library: React Query (TanStack Query)

State
  • selectedEventId

  • tasks

  • taskDetails

  • submissions

  • permissions


🌐 API

GET /api/tasks?eventId=&assignedTo=me
POST /api/tasks
PATCH /api/tasks/:id
DELETE /api/tasks/:id

POST /api/tasks/:id/submissions
POST /api/tasks/:id/comments


🎨 UI/UX Guidelines

  • Same UI as organizer

  • Only actions differ

  • Hide restricted features

  • Highlight urgent tasks


⚠️ Edge Cases

  • No event selected

  • No tasks available

  • Deadline passed

  • Permission changes dynamically

  • Direct URL access without permission


⚡ Performance

  • Cache tasks per event

  • Debounced search

  • Lazy loading


🔐 Security

  • Validate permissions on frontend

  • Backend must enforce RBAC


🧪 Testing Checklist

Permissions
  • Actions visible only if allowed

  • Create/Edit/Delete protected

Functional
  • Task CRUD works

  • Submission flow works

  • Filters work

UI
  • Responsive design

  • Loading states

  • Error handling


🚀 Implementation Plan

  • Phase 1: Layout + Sidebar

  • Phase 2: Task List + Filters

  • Phase 3: Task Detail + Submission

  • Phase 4: Permission System

  • Phase 5: Create/Edit/Delete

  • Phase 6: Final Polish


✅ Acceptance Criteria

  • Shared UI across roles

  • Permissions fully enforced

  • No unauthorized access

  • Clean, responsive UX


🏁 Final Note

This is a role-flexible system design:

  • Organizer → Full control

  • Member → Controlled power

Both operate on the same UI, enabling scalability and consistency.


If this still breaks when you paste somewhere, tell me where (VS Code, GitHub, Notion, etc.)—the fix depends on the tool.

主要语言
TypeScript
星标
7
派生
17
PR 合并指标
30 天内没有已合并 PR

环境准备

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

NexGenStudioDev/CommDesk 的其他 Issue

查看 NexGenStudioDev/CommDesk 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。