thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

Merge branch 'develop' of github.com:makeplane/plane into dev/upgrade-workspace

Browse Source
This commit is contained in:
sriram veeraghanta 2023-10-30 16:15:32 +05:30
commit 912851659c
41 changed files with 2235 additions and 1357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
apiserver/plane/api/serializers/issue.py
View File

@ -75,13 +75,13 @@ class IssueCreateSerializer(BaseSerializer):
project_detail = ProjectLiteSerializer(read_only=True, source="project")
workspace_detail = WorkspaceLiteSerializer(read_only=True, source="workspace")
assignees_list = serializers.ListField(
assignees = serializers.ListField(
child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
write_only=True,
required=False,
)
labels_list = serializers.ListField(
labels = serializers.ListField(
child=serializers.PrimaryKeyRelatedField(queryset=Label.objects.all()),
write_only=True,
required=False,
@ -99,6 +99,12 @@ class IssueCreateSerializer(BaseSerializer):
"updated_at",
]
def to_representation(self, instance):
data = super().to_representation(instance)
data['assignees'] = [str(assignee.id) for assignee in instance.assignees.all()]
data['labels'] = [str(label.id) for label in instance.labels.all()]
return data
def validate(self, data):
if (
data.get("start_date", None) is not None
@ -109,8 +115,8 @@ class IssueCreateSerializer(BaseSerializer):
return data
def create(self, validated_data):
assignees = validated_data.pop("assignees_list", None)
labels = validated_data.pop("labels_list", None)
assignees = validated_data.pop("assignees", None)
labels = validated_data.pop("labels", None)
project_id = self.context["project_id"]
workspace_id = self.context["workspace_id"]
@ -168,8 +174,8 @@ class IssueCreateSerializer(BaseSerializer):
return issue
def update(self, instance, validated_data):
assignees = validated_data.pop("assignees_list", None)
labels = validated_data.pop("labels_list", None)
assignees = validated_data.pop("assignees", None)
labels = validated_data.pop("labels", None)
# Related models
project_id = instance.project_id

27
apiserver/plane/api/urls/issue.py
View File

@ -17,7 +17,7 @@ from plane.api.views import (
IssueSubscriberViewSet,
IssueReactionViewSet,
CommentReactionViewSet,
IssuePropertyViewSet,
IssueUserDisplayPropertyEndpoint,
IssueArchiveViewSet,
IssueRelationViewSet,
IssueDraftViewSet,
@ -235,28 +235,11 @@ urlpatterns = [
## End Comment Reactions
## IssueProperty
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
IssuePropertyViewSet.as_view(
{
"get": "list",
"post": "create",
}
),
name="project-issue-roadmap",
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
IssueUserDisplayPropertyEndpoint.as_view(),
name="project-issue-display-properties",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
IssuePropertyViewSet.as_view(
{
"get": "retrieve",
"put": "update",
"patch": "partial_update",
"delete": "destroy",
}
),
name="project-issue-roadmap",
),
## IssueProperty Ebd
## IssueProperty End
## Issue Archives
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/archived-issues/",

25
apiserver/plane/api/urls_deprecated.py
View File

@ -82,7 +82,7 @@ from plane.api.views import (
BulkDeleteIssuesEndpoint,
BulkImportIssuesEndpoint,
ProjectUserViewsEndpoint,
IssuePropertyViewSet,
IssueUserDisplayPropertyEndpoint,
LabelViewSet,
SubIssuesEndpoint,
IssueLinkViewSet,
@ -1008,26 +1008,9 @@ urlpatterns = [
## End Comment Reactions
## IssueProperty
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/",
IssuePropertyViewSet.as_view(
{
"get": "list",
"post": "create",
}
),
name="project-issue-roadmap",
),
path(
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-properties/<uuid:pk>/",
IssuePropertyViewSet.as_view(
{
"get": "retrieve",
"put": "update",
"patch": "partial_update",
"delete": "destroy",
}
),
name="project-issue-roadmap",
"workspaces/<str:slug>/projects/<uuid:project_id>/issue-display-properties/",
IssueUserDisplayPropertyEndpoint.as_view(),
name="project-issue-display-properties",
),
## IssueProperty Ebd
## Issue Archives

2
apiserver/plane/api/views/__init__.py
View File

@ -71,7 +71,7 @@ from .issue import (
WorkSpaceIssuesEndpoint,
IssueActivityEndpoint,
IssueCommentViewSet,
IssuePropertyViewSet,
IssueUserDisplayPropertyEndpoint,
LabelViewSet,
BulkDeleteIssuesEndpoint,
UserWorkSpaceIssues,

2
apiserver/plane/api/views/base.py
View File

@ -84,6 +84,7 @@ class BaseViewSet(TimezoneMixin, ModelViewSet, BasePaginator):
capture_exception(e)
return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
print(e) if settings.DEBUG else print("Server Error")
capture_exception(e)
return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
@ -161,6 +162,7 @@ class BaseAPIView(TimezoneMixin, APIView, BasePaginator):
if isinstance(e, KeyError):
return Response({"error": f"key {e} does not exist"}, status=status.HTTP_400_BAD_REQUEST)
print(e) if settings.DEBUG else print("Server Error")
capture_exception(e)
return Response({"error": "Something went wrong please try again later"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

6
apiserver/plane/api/views/cycle.py
View File

@ -588,14 +588,14 @@ class CycleIssueViewSet(BaseViewSet):
)
if group_by:
grouped_results = group_results(issues_data, group_by, sub_group_by)
return Response(
group_results(issues_data, group_by, sub_group_by),
grouped_results,
status=status.HTTP_200_OK,
)
return Response(
issues_data,
status=status.HTTP_200_OK,
issues_data, status=status.HTTP_200_OK
)
def create(self, request, slug, project_id, cycle_id):

82
apiserver/plane/api/views/issue.py
View File

@ -130,7 +130,7 @@ class IssueViewSet(BaseViewSet):
queryset=IssueReaction.objects.select_related("actor"),
)
)
)
).distinct()
@method_decorator(gzip_page)
def list(self, request, slug, project_id):
@ -229,12 +229,16 @@ class IssueViewSet(BaseViewSet):
)
if group_by:
grouped_results = group_results(issues, group_by, sub_group_by)
return Response(
group_results(issues, group_by, sub_group_by),
grouped_results,
status=status.HTTP_200_OK,
)
return Response(issues, status=status.HTTP_200_OK)
return Response(
issues, status=status.HTTP_200_OK
)
def create(self, request, slug, project_id):
project = Project.objects.get(pk=project_id)
@ -433,12 +437,15 @@ class UserWorkSpaceIssues(BaseAPIView):
)
if group_by:
grouped_results = group_results(issues, group_by, sub_group_by)
return Response(
group_results(issues, group_by, sub_group_by),
grouped_results,
status=status.HTTP_200_OK,
)
return Response(issues, status=status.HTTP_200_OK)
return Response(
issues, status=status.HTTP_200_OK
)
class WorkSpaceIssuesEndpoint(BaseAPIView):
@ -597,41 +604,12 @@ class IssueCommentViewSet(BaseViewSet):
return Response(status=status.HTTP_204_NO_CONTENT)
class IssuePropertyViewSet(BaseViewSet):
serializer_class = IssuePropertySerializer
model = IssueProperty
class IssueUserDisplayPropertyEndpoint(BaseAPIView):
permission_classes = [
ProjectEntityPermission,
ProjectLitePermission,
]
filterset_fields = []
def perform_create(self, serializer):
serializer.save(
project_id=self.kwargs.get("project_id"), user=self.request.user
)
def get_queryset(self):
return self.filter_queryset(
super()
.get_queryset()
.filter(workspace__slug=self.kwargs.get("slug"))
.filter(project_id=self.kwargs.get("project_id"))
.filter(user=self.request.user)
.filter(project__project_projectmember__member=self.request.user)
.select_related("project")
.select_related("workspace")
)
def list(self, request, slug, project_id):
queryset = self.get_queryset()
serializer = IssuePropertySerializer(queryset, many=True)
return Response(
serializer.data[0] if len(serializer.data) > 0 else [],
status=status.HTTP_200_OK,
)
def create(self, request, slug, project_id):
def post(self, request, slug, project_id):
issue_property, created = IssueProperty.objects.get_or_create(
user=request.user,
project_id=project_id,
@ -640,16 +618,20 @@ class IssuePropertyViewSet(BaseViewSet):
if not created:
issue_property.properties = request.data.get("properties", {})
issue_property.save()
serializer = IssuePropertySerializer(issue_property)
return Response(serializer.data, status=status.HTTP_200_OK)
issue_property.properties = request.data.get("properties", {})
issue_property.save()
serializer = IssuePropertySerializer(issue_property)
return Response(serializer.data, status=status.HTTP_201_CREATED)
def get(self, request, slug, project_id):
issue_property, _ = IssueProperty.objects.get_or_create(
user=request.user, project_id=project_id
)
serializer = IssuePropertySerializer(issue_property)
return Response(serializer.data, status=status.HTTP_200_OK)
class LabelViewSet(BaseViewSet):
serializer_class = LabelSerializer
model = Label
@ -963,8 +945,8 @@ class IssueAttachmentEndpoint(BaseAPIView):
issue_attachments = IssueAttachment.objects.filter(
issue_id=issue_id, workspace__slug=slug, project_id=project_id
)
serilaizer = IssueAttachmentSerializer(issue_attachments, many=True)
return Response(serilaizer.data, status=status.HTTP_200_OK)
serializer = IssueAttachmentSerializer(issue_attachments, many=True)
return Response(serializer.data, status=status.HTTP_200_OK)
class IssueArchiveViewSet(BaseViewSet):
@ -1165,9 +1147,7 @@ class IssueSubscriberViewSet(BaseViewSet):
def list(self, request, slug, project_id, issue_id):
members = (
ProjectMember.objects.filter(
workspace__slug=slug, project_id=project_id
)
ProjectMember.objects.filter(workspace__slug=slug, project_id=project_id)
.annotate(
is_subscribed=Exists(
IssueSubscriber.objects.filter(
@ -2174,9 +2154,15 @@ class IssueDraftViewSet(BaseViewSet):
## Grouping the results
group_by = request.GET.get("group_by", False)
if group_by:
return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
grouped_results = group_results(issues, group_by)
return Response(
grouped_results,
status=status.HTTP_200_OK,
)
return Response(issues, status=status.HTTP_200_OK)
return Response(
issues, status=status.HTTP_200_OK
)
def create(self, request, slug, project_id):
project = Project.objects.get(pk=project_id)

10
apiserver/plane/api/views/module.py
View File

@ -149,6 +149,9 @@ class ModuleViewSet(BaseViewSet):
if serializer.is_valid():
serializer.save()
module = Module.objects.get(pk=serializer.data["id"])
serializer = ModuleSerializer(module)
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@ -361,7 +364,6 @@ class ModuleIssueViewSet(BaseViewSet):
.values("count")
)
)
issues_data = IssueStateSerializer(issues, many=True).data
if sub_group_by and sub_group_by == group_by:
@ -371,14 +373,14 @@ class ModuleIssueViewSet(BaseViewSet):
)
if group_by:
grouped_results = group_results(issues_data, group_by, sub_group_by)
return Response(
group_results(issues_data, group_by, sub_group_by),
grouped_results,
status=status.HTTP_200_OK,
)
return Response(
issues_data,
status=status.HTTP_200_OK,
issues_data, status=status.HTTP_200_OK
)
def create(self, request, slug, project_id, module_id):

78
apiserver/plane/api/views/project.py
View File

@ -69,6 +69,7 @@ from plane.db.models import (
ModuleMember,
Inbox,
ProjectDeployBoard,
IssueProperty,
)
from plane.bgtasks.project_invitation_task import project_invitation
@ -201,6 +202,11 @@ class ProjectViewSet(BaseViewSet):
project_member = ProjectMember.objects.create(
project_id=serializer.data["id"], member=request.user, role=20
)
# Also create the issue property for the user
_ = IssueProperty.objects.create(
project_id=serializer.data["id"],
user=request.user,
)
if serializer.data["project_lead"] is not None and str(
serializer.data["project_lead"]
@ -210,6 +216,11 @@ class ProjectViewSet(BaseViewSet):
member_id=serializer.data["project_lead"],
role=20,
)
# Also create the issue property for the user
IssueProperty.objects.create(
project_id=serializer.data["id"],
user_id=serializer.data["project_lead"],
)
# Default states
states = [
@ -262,12 +273,9 @@ class ProjectViewSet(BaseViewSet):
]
)
data = serializer.data
# Additional fields of the member
data["sort_order"] = project_member.sort_order
data["member_role"] = project_member.role
data["is_member"] = True
return Response(data, status=status.HTTP_201_CREATED)
project = self.get_queryset().filter(pk=serializer.data["id"]).first()
serializer = ProjectListSerializer(project)
return Response(serializer.data, status=status.HTTP_201_CREATED)
return Response(
serializer.errors,
status=status.HTTP_400_BAD_REQUEST,
@ -317,6 +325,8 @@ class ProjectViewSet(BaseViewSet):
color="#ff7700",
)
project = self.get_queryset().filter(pk=serializer.data["id"]).first()
serializer = ProjectListSerializer(project)
return Response(serializer.data, status=status.HTTP_200_OK)
return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
@ -393,6 +403,8 @@ class InviteProjectEndpoint(BaseAPIView):
member=user, project_id=project_id, role=role
)
_ = IssueProperty.objects.create(user=user, project_id=project_id)
return Response(
ProjectMemberSerializer(project_member).data, status=status.HTTP_200_OK
)
@ -428,6 +440,18 @@ class UserProjectInvitationsViewset(BaseViewSet):
]
)
IssueProperty.objects.bulk_create(
[
ProjectMember(
project=invitation.project,
workspace=invitation.project.workspace,
user=request.user,
created_by=request.user,
)
for invitation in project_invitations
]
)
# Delete joined project invites
project_invitations.delete()
@ -560,6 +584,7 @@ class AddMemberToProjectEndpoint(BaseAPIView):
status=status.HTTP_400_BAD_REQUEST,
)
bulk_project_members = []
bulk_issue_props = []
project_members = (
ProjectMember.objects.filter(
@ -574,7 +599,8 @@ class AddMemberToProjectEndpoint(BaseAPIView):
sort_order = [
project_member.get("sort_order")
for project_member in project_members
if str(project_member.get("member_id")) == str(member.get("member_id"))
if str(project_member.get("member_id"))
== str(member.get("member_id"))
]
bulk_project_members.append(
ProjectMember(
@ -585,6 +611,13 @@ class AddMemberToProjectEndpoint(BaseAPIView):
sort_order=sort_order[0] - 10000 if len(sort_order) else 65535,
)
)
bulk_issue_props.append(
IssueProperty(
user_id=member.get("member_id"),
project_id=project_id,
workspace_id=project.workspace_id,
)
)
project_members = ProjectMember.objects.bulk_create(
bulk_project_members,
@ -592,7 +625,12 @@ class AddMemberToProjectEndpoint(BaseAPIView):
ignore_conflicts=True,
)
_ = IssueProperty.objects.bulk_create(
bulk_issue_props, batch_size=10, ignore_conflicts=True
)
serializer = ProjectMemberSerializer(project_members, many=True)
return Response(serializer.data, status=status.HTTP_201_CREATED)
@ -614,6 +652,7 @@ class AddTeamToProjectEndpoint(BaseAPIView):
workspace = Workspace.objects.get(slug=slug)
project_members = []
issue_props = []
for member in team_members:
project_members.append(
ProjectMember(
@ -623,11 +662,23 @@ class AddTeamToProjectEndpoint(BaseAPIView):
created_by=request.user,
)
)
issue_props.append(
IssueProperty(
project_id=project_id,
user_id=member,
workspace=workspace,
created_by=request.user,
)
)
ProjectMember.objects.bulk_create(
project_members, batch_size=10, ignore_conflicts=True
)
_ = IssueProperty.objects.bulk_create(
issue_props, batch_size=10, ignore_conflicts=True
)
serializer = ProjectMemberSerializer(project_members, many=True)
return Response(serializer.data, status=status.HTTP_201_CREATED)
@ -743,6 +794,19 @@ class ProjectJoinEndpoint(BaseAPIView):
ignore_conflicts=True,
)
IssueProperty.objects.bulk_create(
[
IssueProperty(
project_id=project_id,
user=request.user,
workspace=workspace,
created_by=request.user,
)
for project_id in project_ids
],
ignore_conflicts=True,
)
return Response(
{"message": "Projects joined successfully"},
status=status.HTTP_201_CREATED,

16
apiserver/plane/api/views/view.py
View File

@ -93,7 +93,6 @@ class GlobalViewIssuesViewSet(BaseViewSet):
)
)
@method_decorator(gzip_page)
def list(self, request, slug):
filters = issue_filters(request.query_params, "GET")
@ -117,9 +116,7 @@ class GlobalViewIssuesViewSet(BaseViewSet):
.values("count")
)
.annotate(
attachment_count=IssueAttachment.objects.filter(
issue=OuterRef("id")
)
attachment_count=IssueAttachment.objects.filter(issue=OuterRef("id"))
.order_by()
.annotate(count=Func(F("id"), function="Count"))
.values("count")
@ -129,9 +126,7 @@ class GlobalViewIssuesViewSet(BaseViewSet):
# Priority Ordering
if order_by_param == "priority" or order_by_param == "-priority":
priority_order = (
priority_order
if order_by_param == "priority"
else priority_order[::-1]
priority_order if order_by_param == "priority" else priority_order[::-1]
)
issue_queryset = issue_queryset.annotate(
priority_order=Case(
@ -183,7 +178,6 @@ class GlobalViewIssuesViewSet(BaseViewSet):
)
else:
issue_queryset = issue_queryset.order_by(order_by_param)
issues = IssueLiteSerializer(issue_queryset, many=True).data
## Grouping the results
@ -194,10 +188,12 @@ class GlobalViewIssuesViewSet(BaseViewSet):
{"error": "Group by and sub group by cannot be same"},
status=status.HTTP_400_BAD_REQUEST,
)
if group_by:
grouped_results = group_results(issues, group_by, sub_group_by)
return Response(
group_results(issues, group_by, sub_group_by), status=status.HTTP_200_OK
grouped_results,
status=status.HTTP_200_OK,
)
return Response(issues, status=status.HTTP_200_OK)

10
apiserver/plane/api/views/workspace.py
View File

@ -1228,9 +1228,15 @@ class WorkspaceUserProfileIssuesEndpoint(BaseAPIView):
## Grouping the results
group_by = request.GET.get("group_by", False)
if group_by:
return Response(group_results(issues, group_by), status=status.HTTP_200_OK)
grouped_results = group_results(issues, group_by)
return Response(
grouped_results,
status=status.HTTP_200_OK,
)
return Response(issues, status=status.HTTP_200_OK)
return Response(
issues, status=status.HTTP_200_OK
)
class WorkspaceLabelsEndpoint(BaseAPIView):

15
apiserver/plane/bgtasks/importer_task.py
View File

@ -25,6 +25,7 @@ from plane.db.models import (
WorkspaceIntegration,
Label,
User,
IssueProperty,
)
from .workspace_invitation_task import workspace_invitation
from plane.bgtasks.user_welcome_task import send_welcome_slack
@ -103,6 +104,20 @@ def service_importer(service, importer_id):
ignore_conflicts=True,
)
IssueProperty.objects.bulk_create(
[
IssueProperty(
project_id=importer.project_id,
workspace_id=importer.workspace_id,
user=user,
created_by=importer.created_by,
)
for user in workspace_users
],
batch_size=100,
ignore_conflicts=True,
)
# Check if sync config is on for github importers
if service == "github" and importer.config.get("sync", False):
name = importer.metadata.get("name", False)

1242
apiserver/plane/bgtasks/issue_activites_task.py
View File

File diff suppressed because it is too large Load Diff

102
apiserver/plane/bgtasks/notification_task.py Normal file
View File

@ -0,0 +1,102 @@
# Python imports
import json
# Django imports
from django.utils import timezone
# Module imports
from plane.db.models import IssueSubscriber, Project, IssueAssignee, Issue, Notification
# Third Party imports
from celery import shared_task
@shared_task
def notifications(type, issue_id, project_id, actor_id, subscriber, issue_activities_created):
issue_activities_created = (
json.loads(issue_activities_created) if issue_activities_created is not None else None
)
if type not in [
"cycle.activity.created",
"cycle.activity.deleted",
"module.activity.created",
"module.activity.deleted",
"issue_reaction.activity.created",
"issue_reaction.activity.deleted",
"comment_reaction.activity.created",
"comment_reaction.activity.deleted",
"issue_vote.activity.created",
"issue_vote.activity.deleted",
"issue_draft.activity.created",
"issue_draft.activity.updated",
"issue_draft.activity.deleted",
]:
# Create Notifications
bulk_notifications = []
issue_subscribers = list(
IssueSubscriber.objects.filter(project_id=project_id, issue_id=issue_id)
.exclude(subscriber_id=actor_id)
.values_list("subscriber", flat=True)
)
issue_assignees = list(
IssueAssignee.objects.filter(project_id=project_id, issue_id=issue_id)
.exclude(assignee_id=actor_id)
.values_list("assignee", flat=True)
)
issue_subscribers = issue_subscribers + issue_assignees
issue = Issue.objects.filter(pk=issue_id).first()
if subscriber:
# add the user to issue subscriber
try:
_ = IssueSubscriber.objects.get_or_create(
issue_id=issue_id, subscriber_id=actor_id
)
except Exception as e:
pass
project = Project.objects.get(pk=project_id)
for subscriber in list(set(issue_subscribers)):
for issue_activity in issue_activities_created:
bulk_notifications.append(
Notification(
workspace=project.workspace,
sender="in_app:issue_activities",
triggered_by_id=actor_id,
receiver_id=subscriber,
entity_identifier=issue_id,
entity_name="issue",
project=project,
title=issue_activity.get("comment"),
data={
"issue": {
"id": str(issue_id),
"name": str(issue.name),
"identifier": str(issue.project.identifier),
"sequence_id": issue.sequence_id,
"state_name": issue.state.name,
"state_group": issue.state.group,
},
"issue_activity": {
"id": str(issue_activity.get("id")),
"verb": str(issue_activity.get("verb")),
"field": str(issue_activity.get("field")),
"actor": str(issue_activity.get("actor_id")),
"new_value": str(issue_activity.get("new_value")),
"old_value": str(issue_activity.get("old_value")),
"issue_comment": str(
issue_activity.get("issue_comment").comment_stripped
if issue_activity.get("issue_comment") is not None
else ""
),
},
},
)
)
# Bulk create notifications
Notification.objects.bulk_create(bulk_notifications, batch_size=100)

21
apiserver/plane/db/migrations/0046_alter_analyticview_created_by_and_more.py Normal file
View File

@ -0,0 +1,21 @@
# Generated by Django 4.2.5 on 2023-10-18 12:04
from django.conf import settings
from django.db import migrations, models
import django.db.models.deletion
import plane.db.models.issue
class Migration(migrations.Migration):
dependencies = [
('db', '0045_issueactivity_epoch_workspacemember_issue_props_and_more'),
]
operations = [
migrations.AlterField(
model_name='issueproperty',
name='properties',
field=models.JSONField(default=plane.db.models.issue.get_default_properties),
),
]

35
apiserver/plane/db/models/issue.py
View File

@ -16,6 +16,24 @@ from . import ProjectBaseModel
from plane.utils.html_processor import strip_tags
def get_default_properties():
return {
"assignee": True,
"start_date": True,
"due_date": True,
"labels": True,
"key": True,
"priority": True,
"state": True,
"sub_issue_count": True,
"link": True,
"attachment_count": True,
"estimate": True,
"created_on": True,
"updated_on": True,
}
# TODO: Handle identifiers for Bulk Inserts - nk
class IssueManager(models.Manager):
def get_queryset(self):
@ -39,7 +57,7 @@ class Issue(ProjectBaseModel):
("high", "High"),
("medium", "Medium"),
("low", "Low"),
("none", "None")
("none", "None"),
)
parent = models.ForeignKey(
"self",
@ -186,7 +204,7 @@ class IssueRelation(ProjectBaseModel):
("relates_to", "Relates To"),
("blocked_by", "Blocked By"),
)
issue = models.ForeignKey(
Issue, related_name="issue_relation", on_delete=models.CASCADE
)
@ -208,7 +226,7 @@ class IssueRelation(ProjectBaseModel):
ordering = ("-created_at",)
def __str__(self):
return f"{self.issue.name} {self.related_issue.name}"
return f"{self.issue.name} {self.related_issue.name}"
class IssueAssignee(ProjectBaseModel):
@ -327,7 +345,9 @@ class IssueComment(ProjectBaseModel):
comment_json = models.JSONField(blank=True, default=dict)
comment_html = models.TextField(blank=True, default="<p></p>")
attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
issue = models.ForeignKey(
Issue, on_delete=models.CASCADE, related_name="issue_comments"
)
# System can also create comment
actor = models.ForeignKey(
settings.AUTH_USER_MODEL,
@ -367,7 +387,7 @@ class IssueProperty(ProjectBaseModel):
on_delete=models.CASCADE,
related_name="issue_property_user",
)
properties = models.JSONField(default=dict)
properties = models.JSONField(default=get_default_properties)
class Meta:
verbose_name = "Issue Property"
@ -515,7 +535,10 @@ class IssueVote(ProjectBaseModel):
)
class Meta:
unique_together = ["issue", "actor",]
unique_together = [
"issue",
"actor",
]
verbose_name = "Issue Vote"
verbose_name_plural = "Issue Votes"
db_table = "issue_votes"

23
apiserver/plane/settings/production.py
View File

@ -14,19 +14,21 @@ from .common import * # noqa
# Database
DEBUG = int(os.environ.get("DEBUG", 0)) == 1
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql",
"NAME": "plane",
"USER": os.environ.get("PGUSER", ""),
"PASSWORD": os.environ.get("PGPASSWORD", ""),
"HOST": os.environ.get("PGHOST", ""),
if bool(os.environ.get("DATABASE_URL")):
# Parse database configuration from $DATABASE_URL
DATABASES["default"] = dj_database_url.config()
else:
DATABASES = {
"default": {
"ENGINE": "django.db.backends.postgresql",
"NAME": os.environ.get("POSTGRES_DB"),
"USER": os.environ.get("POSTGRES_USER"),
"PASSWORD": os.environ.get("POSTGRES_PASSWORD"),
"HOST": os.environ.get("POSTGRES_HOST"),
}
}
}
# Parse database configuration from $DATABASE_URL
DATABASES["default"] = dj_database_url.config()
SITE_ID = 1
# Set the variable true if running in docker environment
@ -278,4 +280,3 @@ SCOUT_NAME = "Plane"
# Unsplash Access key
UNSPLASH_ACCESS_KEY = os.environ.get("UNSPLASH_ACCESS_KEY")

73
apiserver/plane/utils/issue_filters.py
View File

@ -1,10 +1,24 @@
import re
import uuid
from datetime import timedelta
from django.utils import timezone
# The date from pattern
pattern = re.compile(r"\d+_(weeks|months)$")
# check the valid uuids
def filter_valid_uuids(uuid_list):
valid_uuids = []
for uuid_str in uuid_list:
try:
uuid_obj = uuid.UUID(uuid_str)
valid_uuids.append(uuid_obj)
except ValueError:
# ignore the invalid uuids
pass
return valid_uuids
# Get the 2_weeks, 3_months
def string_date_filter(filter, duration, subsequent, term, date_filter, offset):
@ -61,40 +75,41 @@ def date_filter(filter, date_term, queries):
def filter_state(params, filter, method):
if method == "GET":
states = params.get("state").split(",")
states = [item for item in params.get("state").split(",") if item != 'null']
states = filter_valid_uuids(states)
if len(states) and "" not in states:
filter["state__in"] = states
else:
if params.get("state", None) and len(params.get("state")):
if params.get("state", None) and len(params.get("state")) and params.get("state") != 'null':
filter["state__in"] = params.get("state")
return filter
def filter_state_group(params, filter, method):
if method == "GET":
state_group = params.get("state_group").split(",")
state_group = [item for item in params.get("state_group").split(",") if item != 'null']
if len(state_group) and "" not in state_group:
filter["state__group__in"] = state_group
else:
if params.get("state_group", None) and len(params.get("state_group")):
if params.get("state_group", None) and len(params.get("state_group")) and params.get("state_group") != 'null':
filter["state__group__in"] = params.get("state_group")
return filter
def filter_estimate_point(params, filter, method):
if method == "GET":
estimate_points = params.get("estimate_point").split(",")
estimate_points = [item for item in params.get("estimate_point").split(",") if item != 'null']
if len(estimate_points) and "" not in estimate_points:
filter["estimate_point__in"] = estimate_points
else:
if params.get("estimate_point", None) and len(params.get("estimate_point")):
if params.get("estimate_point", None) and len(params.get("estimate_point")) and params.get("estimate_point") != 'null':
filter["estimate_point__in"] = params.get("estimate_point")
return filter
def filter_priority(params, filter, method):
if method == "GET":
priorities = params.get("priority").split(",")
priorities = [item for item in params.get("priority").split(",") if item != 'null']
if len(priorities) and "" not in priorities:
filter["priority__in"] = priorities
return filter
@ -102,44 +117,48 @@ def filter_priority(params, filter, method):
def filter_parent(params, filter, method):
if method == "GET":
parents = params.get("parent").split(",")
parents = [item for item in params.get("parent").split(",") if item != 'null']
parents = filter_valid_uuids(parents)
if len(parents) and "" not in parents:
filter["parent__in"] = parents
else:
if params.get("parent", None) and len(params.get("parent")):
if params.get("parent", None) and len(params.get("parent")) and params.get("parent") != 'null':
filter["parent__in"] = params.get("parent")
return filter
def filter_labels(params, filter, method):
if method == "GET":
labels = params.get("labels").split(",")
labels = [item for item in params.get("labels").split(",") if item != 'null']
labels = filter_valid_uuids(labels)
if len(labels) and "" not in labels:
filter["labels__in"] = labels
else:
if params.get("labels", None) and len(params.get("labels")):
if params.get("labels", None) and len(params.get("labels")) and params.get("labels") != 'null':
filter["labels__in"] = params.get("labels")
return filter
def filter_assignees(params, filter, method):
if method == "GET":
assignees = params.get("assignees").split(",")
assignees = [item for item in params.get("assignees").split(",") if item != 'null']
assignees = filter_valid_uuids(assignees)
if len(assignees) and "" not in assignees:
filter["assignees__in"] = assignees
else:
if params.get("assignees", None) and len(params.get("assignees")):
if params.get("assignees", None) and len(params.get("assignees")) and params.get("assignees") != 'null':
filter["assignees__in"] = params.get("assignees")
return filter
def filter_created_by(params, filter, method):
if method == "GET":
created_bys = params.get("created_by").split(",")
created_bys = [item for item in params.get("created_by").split(",") if item != 'null']
created_bys = filter_valid_uuids(created_bys)
if len(created_bys) and "" not in created_bys:
filter["created_by__in"] = created_bys
else:
if params.get("created_by", None) and len(params.get("created_by")):
if params.get("created_by", None) and len(params.get("created_by")) and params.get("created_by") != 'null':
filter["created_by__in"] = params.get("created_by")
return filter
@ -219,44 +238,47 @@ def filter_issue_state_type(params, filter, method):
def filter_project(params, filter, method):
if method == "GET":
projects = params.get("project").split(",")
projects = [item for item in params.get("project").split(",") if item != 'null']
projects = filter_valid_uuids(projects)
if len(projects) and "" not in projects:
filter["project__in"] = projects
else:
if params.get("project", None) and len(params.get("project")):
if params.get("project", None) and len(params.get("project")) and params.get("project") != 'null':
filter["project__in"] = params.get("project")
return filter
def filter_cycle(params, filter, method):
if method == "GET":
cycles = params.get("cycle").split(",")
cycles = [item for item in params.get("cycle").split(",") if item != 'null']
cycles = filter_valid_uuids(cycles)
if len(cycles) and "" not in cycles:
filter["issue_cycle__cycle_id__in"] = cycles
else:
if params.get("cycle", None) and len(params.get("cycle")):
if params.get("cycle", None) and len(params.get("cycle")) and params.get("cycle") != 'null':
filter["issue_cycle__cycle_id__in"] = params.get("cycle")
return filter
def filter_module(params, filter, method):
if method == "GET":
modules = params.get("module").split(",")
modules = [item for item in params.get("module").split(",") if item != 'null']
modules = filter_valid_uuids(modules)
if len(modules) and "" not in modules:
filter["issue_module__module_id__in"] = modules
else:
if params.get("module", None) and len(params.get("module")):
if params.get("module", None) and len(params.get("module")) and params.get("module") != 'null':
filter["issue_module__module_id__in"] = params.get("module")
return filter
def filter_inbox_status(params, filter, method):
if method == "GET":
status = params.get("inbox_status").split(",")
status = [item for item in params.get("inbox_status").split(",") if item != 'null']
if len(status) and "" not in status:
filter["issue_inbox__status__in"] = status
else:
if params.get("inbox_status", None) and len(params.get("inbox_status")):
if params.get("inbox_status", None) and len(params.get("inbox_status")) and params.get("inbox_status") != 'null':
filter["issue_inbox__status__in"] = params.get("inbox_status")
return filter
@ -275,11 +297,12 @@ def filter_sub_issue_toggle(params, filter, method):
def filter_subscribed_issues(params, filter, method):
if method == "GET":
subscribers = params.get("subscriber").split(",")
subscribers = [item for item in params.get("subscriber").split(",") if item != 'null']
subscribers = filter_valid_uuids(subscribers)
if len(subscribers) and "" not in subscribers:
filter["issue_subscribers__subscriber_id__in"] = subscribers
else:
if params.get("subscriber", None) and len(params.get("subscriber")):
if params.get("subscriber", None) and len(params.get("subscriber")) and params.get("subscriber") != 'null':
filter["issue_subscribers__subscriber_id__in"] = params.get("subscriber")
return filter

4
packages/tailwind-config-custom/tailwind.config.js
View File

@ -213,7 +213,9 @@ module.exports = {
},
},
}),
screens: {
"3xl": "1792px",
},
// scale down font sizes to 90% of default
fontSize: {
xs: "0.675rem",

102
packages/ui/src/progress/circular-progress-indicator.tsx Normal file
View File

@ -0,0 +1,102 @@
import React, { Children } from "react";
interface ICircularProgressIndicator {
size: number;
percentage: number;
strokeWidth?: number;
strokeColor?: string;
children?: React.ReactNode;
}
export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
props
) => {
const { size = 40, percentage = 25, strokeWidth = 6, children } = props;
const sqSize = size;
const radius = (size - strokeWidth) / 2;
const viewBox = `0 0 ${sqSize} ${sqSize}`;
const dashArray = radius * Math.PI * 2;
const dashOffset = dashArray - (dashArray * percentage) / 100;
return (
<div className="relative">
<svg width={size} height={size} viewBox={viewBox} fill="none">
<circle
className="fill-none stroke-custom-background-80"
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
style={{ filter: "url(#filter0_bi_377_19141)" }}
/>
<defs>
<filter
id="filter0_bi_377_19141"
x="-3.57544"
y="-3.57422"
width="45.2227"
height="45.2227"
filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB"
>
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feGaussianBlur in="BackgroundImageFix" stdDeviation="2" />
<feComposite
in2="SourceAlpha"
operator="in"
result="effect1_backgroundBlur_377_19141"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_backgroundBlur_377_19141"
result="shape"
/>
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset dx="1" dy="1" />
<feGaussianBlur stdDeviation="2" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.63125 0 0 0 0 0.6625 0 0 0 0 0.75 0 0 0 0.35 0"
/>
<feBlend
mode="normal"
in2="shape"
result="effect2_innerShadow_377_19141"
/>
</filter>
</defs>
<circle
className="stroke-custom-primary-100 fill-none "
cx={size / 2}
cy={size / 2}
r={radius}
strokeWidth={`${strokeWidth}px`}
transform={`rotate(-90 ${size / 2} ${size / 2})`}
style={{
strokeDasharray: dashArray,
strokeDashoffset: dashOffset,
}}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<div
className="absolute"
style={{
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
}}
>
{children}
</div>
</div>
);
};

1
packages/ui/src/progress/index.tsx
View File

@ -1,3 +1,4 @@
export * from "./radial-progress";
export * from "./progress-bar";
export * from "./linear-progress-indicator";
export * from "./circular-progress-indicator";

101
web/components/core/sidebar/links-list.tsx
View File

@ -15,58 +15,63 @@ type Props = {
export const LinksList: React.FC<Props> = ({ links, handleDeleteLink, handleEditLink, userAuth }) => {
const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return (
<>
{links.map((link) => (
<div key={link.id} className="relative">
{!isNotAllowed && (
<div className="absolute top-1.5 right-1.5 z-[1] flex items-center gap-1">
<button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
onClick={() => handleEditLink(link)}
>
<Pencil className="text-custom-text-200" />
</button>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 outline-none hover:bg-custom-background-80"
>
<ExternalLinkIcon className="h-4 w-4 text-custom-text-200" />
</a>
<button
type="button"
className="grid h-7 w-7 place-items-center rounded bg-custom-background-90 p-1 text-red-500 outline-none duration-300 hover:bg-red-500/20"
onClick={() => handleDeleteLink(link.id)}
>
<Trash2 className="h-4 w-4" />
</button>
<div key={link.id} className="relative flex flex-col rounded-md bg-custom-background-90 p-2.5">
<div className="flex items-start justify-between gap-2 w-full">
<div className="flex items-start gap-2">
<span className="py-1">
<LinkIcon className="h-3 w-3 flex-shrink-0" />
</span>
<span className="text-xs break-all">{link.title && link.title !== "" ? link.title : link.url}</span>
</div>
)}
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="relative flex gap-2 rounded-md bg-custom-background-90 p-2"
>
<div className="mt-0.5">
<LinkIcon className="h-3.5 w-3.5" />
</div>
<div>
<h5 className="w-4/5 break-words">{link.title ?? link.url}</h5>
<p className="mt-0.5 text-custom-text-200">
Added {timeAgo(link.created_at)}
<br />
by{" "}
{link.created_by_detail.is_bot
? link.created_by_detail.first_name + " Bot"
: link.created_by_detail.display_name}
</p>
</div>
</a>
{!isNotAllowed && (
<div className="flex items-center gap-2 flex-shrink-0 z-[1]">
<button
type="button"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleEditLink(link);
}}
>
<Pencil className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
</button>
<a
href={link.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
>
<ExternalLinkIcon className="h-3 w-3 text-custom-text-200 stroke-[1.5]" />
</a>
<button
type="button"
className="flex items-center justify-center p-1 hover:bg-custom-background-80"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleDeleteLink(link.id);
}}
>
<Trash2 className="h-3 w-3" />
</button>
</div>
)}
</div>
<div className="px-5">
<p className="text-xs mt-0.5 text-custom-text-300 stroke-[1.5]">
Added {timeAgo(link.created_at)}
<br />
by{" "}
{link.created_by_detail.is_bot
? link.created_by_detail.first_name + " Bot"
: link.created_by_detail.display_name}
</p>
</div>
</div>
))}
</>

224
web/components/core/sidebar/sidebar-progress-stats.tsx
View File

@ -1,11 +1,16 @@
import React from "react";
import Image from "next/image";
// headless ui
import { Tab } from "@headlessui/react";
// hooks
import useLocalStorage from "hooks/use-local-storage";
import useIssuesView from "hooks/use-issues-view";
// images
import emptyLabel from "public/empty-state/empty_label.svg";
import emptyMembers from "public/empty-state/empty_members.svg";
// components
import { StateGroupIcon } from "@plane/ui";
import { SingleProgressStats } from "components/core";
// ui
import { Avatar } from "components/ui";
@ -17,9 +22,7 @@ import {
TLabelsDistribution,
TStateGroups,
} from "types";
// constants
import { STATE_GROUP_COLORS } from "constants/state";
// types
type Props = {
distribution: {
assignees: TAssigneesDistribution[];
@ -33,6 +36,7 @@ type Props = {
module?: IModule;
roundedTab?: boolean;
noBackground?: boolean;
isPeekModuleDetails?: boolean;
};
export const SidebarProgressStats: React.FC<Props> = ({
@ -42,6 +46,7 @@ export const SidebarProgressStats: React.FC<Props> = ({
module,
roundedTab,
noBackground,
isPeekModuleDetails = false,
}) => {
const { filters, setFilters } = useIssuesView();
@ -55,7 +60,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
return 1;
case "States":
return 2;
default:
return 0;
}
@ -72,7 +76,6 @@ export const SidebarProgressStats: React.FC<Props> = ({
return setTab("Labels");
case 2:
return setTab("States");
default:
return setTab("Assignees");
}
@ -82,15 +85,17 @@ export const SidebarProgressStats: React.FC<Props> = ({
as="div"
className={`flex w-full items-center gap-2 justify-between rounded-md ${
noBackground ? "" : "bg-custom-background-90"
} px-1 py-1.5
${module ? "text-xs" : "text-sm"} `}
} p-0.5
${module ? "text-xs" : "text-sm"}`}
>
<Tab
className={({ selected }) =>
`w-full ${
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
} px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
selected
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
: "text-custom-text-400 hover:text-custom-text-300"
}`
}
>
@ -101,7 +106,9 @@ export const SidebarProgressStats: React.FC<Props> = ({
`w-full ${
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
} px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
selected
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
: "text-custom-text-400 hover:text-custom-text-300"
}`
}
>
@ -112,113 +119,128 @@ export const SidebarProgressStats: React.FC<Props> = ({
`w-full ${
roundedTab ? "rounded-3xl border border-custom-border-200" : "rounded"
} px-3 py-1 text-custom-text-100 ${
selected ? " bg-custom-primary text-white" : " hover:bg-custom-background-80"
selected
? "bg-custom-background-100 text-custom-text-300 shadow-custom-shadow-2xs"
: "text-custom-text-400 hover:text-custom-text-300"
}`
}
>
States
</Tab>
</Tab.List>
<Tab.Panels className="flex w-full items-center justify-between pt-1 text-custom-text-200">
<Tab.Panel as="div" className="w-full space-y-1">
{distribution.assignees.map((assignee, index) => {
if (assignee.assignee_id)
return (
<SingleProgressStats
key={assignee.assignee_id}
title={
<div className="flex items-center gap-2">
<Avatar
user={{
id: assignee.assignee_id,
avatar: assignee.avatar ?? "",
first_name: assignee.first_name ?? "",
last_name: assignee.last_name ?? "",
display_name: assignee.display_name ?? "",
}}
/>
<span>{assignee.display_name}</span>
</div>
}
completed={assignee.completed_issues}
total={assignee.total_issues}
onClick={() => {
if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
setFilters({
assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
});
else
setFilters({
assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
});
}}
selected={filters?.assignees?.includes(assignee.assignee_id ?? "")}
/>
);
else
return (
<SingleProgressStats
key={`unassigned-${index}`}
title={
<div className="flex items-center gap-2">
<div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
<img
src="/user.png"
height="100%"
width="100%"
className="rounded-full"
alt="User"
<Tab.Panels className="flex w-full items-center justify-between text-custom-text-200">
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
{distribution.assignees.length > 0 ? (
distribution.assignees.map((assignee, index) => {
if (assignee.assignee_id)
return (
<SingleProgressStats
key={assignee.assignee_id}
title={
<div className="flex items-center gap-2">
<Avatar
user={{
id: assignee.assignee_id,
avatar: assignee.avatar ?? "",
first_name: assignee.first_name ?? "",
last_name: assignee.last_name ?? "",
display_name: assignee.display_name ?? "",
}}
height="18px"
width="18px"
/>
<span>{assignee.display_name}</span>
</div>
<span>No assignee</span>
</div>
}
completed={assignee.completed_issues}
total={assignee.total_issues}
/>
);
})}
</Tab.Panel>
<Tab.Panel as="div" className="w-full space-y-1">
{distribution.labels.map((label, index) => (
<SingleProgressStats
key={label.label_id ?? `no-label-${index}`}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full"
style={{
backgroundColor: label.color ?? "transparent",
}}
}
completed={assignee.completed_issues}
total={assignee.total_issues}
{...(!isPeekModuleDetails && {
onClick: () => {
if (filters?.assignees?.includes(assignee.assignee_id ?? ""))
setFilters({
assignees: filters?.assignees?.filter((a) => a !== assignee.assignee_id),
});
else
setFilters({
assignees: [...(filters?.assignees ?? []), assignee.assignee_id ?? ""],
});
},
selected: filters?.assignees?.includes(assignee.assignee_id ?? ""),
})}
/>
<span className="text-xs">{label.label_name ?? "No labels"}</span>
</div>
}
completed={label.completed_issues}
total={label.total_issues}
onClick={() => {
if (filters.labels?.includes(label.label_id ?? ""))
setFilters({
labels: filters?.labels?.filter((l) => l !== label.label_id),
});
else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
}}
selected={filters?.labels?.includes(label.label_id ?? "")}
/>
))}
);
else
return (
<SingleProgressStats
key={`unassigned-${index}`}
title={
<div className="flex items-center gap-2">
<div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
<img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
</div>
<span>No assignee</span>
</div>
}
completed={assignee.completed_issues}
total={assignee.total_issues}
/>
);
})
) : (
<div className="flex flex-col items-center justify-center gap-2 h-full">
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
<Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
</div>
<h6 className="text-base text-custom-text-300">No assignees yet</h6>
</div>
)}
</Tab.Panel>
<Tab.Panel as="div" className="w-full space-y-1">
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
{distribution.labels.length > 0 ? (
distribution.labels.map((label, index) => (
<SingleProgressStats
key={label.label_id ?? `no-label-${index}`}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full"
style={{
backgroundColor: label.color ?? "transparent",
}}
/>
<span className="text-xs">{label.label_name ?? "No labels"}</span>
</div>
}
completed={label.completed_issues}
total={label.total_issues}
{...(!isPeekModuleDetails && {
onClick: () => {
if (filters.labels?.includes(label.label_id ?? ""))
setFilters({
labels: filters?.labels?.filter((l) => l !== label.label_id),
});
else setFilters({ labels: [...(filters?.labels ?? []), label.label_id ?? ""] });
},
selected: filters?.labels?.includes(label.label_id ?? ""),
})}
/>
))
) : (
<div className="flex flex-col items-center justify-center gap-2 h-full">
<div className="flex items-center justify-center h-20 w-20 bg-custom-background-80 rounded-full">
<Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
</div>
<h6 className="text-base text-custom-text-300">No labels yet</h6>
</div>
)}
</Tab.Panel>
<Tab.Panel as="div" className="flex flex-col gap-1.5 pt-3.5 w-full h-44 overflow-y-auto">
{Object.keys(groupedIssues).map((group, index) => (
<SingleProgressStats
key={index}
title={
<div className="flex items-center gap-2">
<span
className="block h-3 w-3 rounded-full "
style={{
backgroundColor: STATE_GROUP_COLORS[group as TStateGroups],
}}
/>
<StateGroupIcon stateGroup={group as TStateGroups} />
<span className="text-xs capitalize">{group}</span>
</div>
}

4
web/components/core/sidebar/single-progress-stats.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { ProgressBar } from "@plane/ui";
import { CircularProgressIndicator } from "@plane/ui";
type TSingleProgressStatsProps = {
title: any;
@ -27,7 +27,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
<div className="flex w-1/2 items-center justify-end gap-1 px-2">
<div className="flex h-5 items-center justify-center gap-1">
<span className="h-4 w-4">
<ProgressBar value={completed} maxValue={total} />
<CircularProgressIndicator percentage={(completed / total) * 100} size={14} strokeWidth={2} />
</span>
<span className="w-8 text-right">
{isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%

17
web/components/headers/modules-list.tsx
View File

@ -1,25 +1,28 @@
import { useRouter } from "next/router";
import Link from "next/link";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
import { GanttChart, LayoutGrid, List, Plus } from "lucide-react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// ui
import { Breadcrumbs, BreadcrumbItem, Button, Tooltip } from "@plane/ui";
import { Icon } from "components/ui";
// helper
import { replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
const moduleViewOptions: { type: "grid" | "gantt_chart"; icon: any }[] = [
const moduleViewOptions: { type: "list" | "grid" | "gantt_chart"; icon: any }[] = [
{
type: "gantt_chart",
icon: "view_timeline",
type: "list",
icon: List,
},
{
type: "grid",
icon: "table_rows",
icon: LayoutGrid,
},
{
type: "gantt_chart",
icon: GanttChart,
},
];
@ -67,7 +70,7 @@ export const ModulesListHeader: React.FC = observer(() => {
}`}
onClick={() => setModulesView(option.type)}
>
<Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
<option.icon className="h-3.5 w-3.5" />
</button>
</Tooltip>
))}

2
web/components/modules/index.ts
View File

@ -7,3 +7,5 @@ export * from "./modal";
export * from "./modules-list-view";
export * from "./sidebar";
export * from "./module-card-item";
export * from "./module-list-item";
export * from "./module-peek-overview";

221
web/components/modules/module-card-item.tsx
View File

@ -10,14 +10,16 @@ import useToast from "hooks/use-toast";
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
// ui
import { AssigneesList } from "components/ui";
import { CustomMenu, Tooltip } from "@plane/ui";
import { CustomMenu, LayersIcon, Tooltip } from "@plane/ui";
// icons
import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
import { Info, LinkIcon, Pencil, Star, Trash2 } from "lucide-react";
// helpers
import { copyUrlToClipboard, truncateText } from "helpers/string.helper";
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { copyUrlToClipboard } from "helpers/string.helper";
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
// types
import { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/module";
type Props = {
module: IModule;
@ -72,9 +74,32 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
});
};
const openModuleOverview = () => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekModule: module.id },
});
};
const endDate = new Date(module.target_date ?? "");
const startDate = new Date(module.start_date ?? "");
const lastUpdated = new Date(module.updated_at ?? "");
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
const issueCount =
module.completed_issues && module.total_issues
? module.total_issues === 0
? "0 Issue"
: module.total_issues === module.completed_issues
? module.total_issues > 1
? `${module.total_issues} Issues`
: `${module.total_issues} Issue`
: `${module.completed_issues}/${module.total_issues} Issues`
: "0 Issue";
return (
<>
@ -88,96 +113,142 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
/>
)}
<DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
<div className="flex flex-col divide-y divide-custom-border-200 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 text-xs">
<div className="p-4">
<div className="flex w-full flex-col gap-5">
<div className="flex items-start justify-between gap-2">
<Tooltip tooltipContent={module.name} position="top-left">
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="w-auto max-w-[calc(100%-9rem)]">
<h3 className="truncate break-words text-lg font-semibold text-custom-text-100">
{truncateText(module.name, 75)}
</h3>
</a>
</Link>
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="flex flex-col justify-between p-4 h-44 w-full min-w-[250px] text-sm rounded bg-custom-background-100 border border-custom-border-100 hover:shadow-md">
<div>
<div className="flex items-center justify-between gap-2">
<Tooltip tooltipContent={module.name} position="auto">
<span className="text-base font-medium truncate">{module.name}</span>
</Tooltip>
<div className="flex items-center gap-2">
{moduleStatus && (
<span
className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
>
{moduleStatus.label}
</span>
)}
<button
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
openModuleOverview();
}}
>
<Info className="h-4 w-4 text-custom-text-400" />
</button>
</div>
</div>
</div>
<div className="flex items-center gap-1">
<div className="mr-2 flex whitespace-nowrap rounded bg-custom-background-90 px-2.5 py-2 text-custom-text-200">
<span className="capitalize">{module?.status?.replace("-", " ")}</span>
<div className="flex flex-col gap-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5 text-custom-text-200">
<LayersIcon className="h-4 w-4 text-custom-text-300" />
<span className="text-xs text-custom-text-300">{issueCount}</span>
</div>
{module.members_detail.length > 0 && (
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
<div className="flex items-center gap-1 cursor-default">
<AssigneesList users={module.members_detail} length={3} />
</div>
</Tooltip>
)}
</div>
<Tooltip
tooltipContent={isNaN(completionPercentage) ? "0" : `${completionPercentage.toFixed(0)}%`}
position="top-left"
>
<div className="flex items-center w-full">
<div
className="bar relative h-1.5 w-full rounded bg-custom-background-90"
style={{
boxShadow: "1px 1px 4px 0px rgba(161, 169, 191, 0.35) inset",
}}
>
<div
className="absolute top-0 left-0 h-1.5 rounded bg-blue-600 duration-300"
style={{
width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
}}
/>
</div>
</div>
</Tooltip>
<div className="flex items-center justify-between">
<span className="text-xs text-custom-text-300">
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</span>
<div className="flex items-center gap-1.5 z-10">
{module.is_favorite ? (
<button type="button" onClick={handleRemoveFromFavorites}>
<Star className="h-4 w-4 text-orange-400" fill="#f6ad55" />
<button
type="button"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleRemoveFromFavorites();
}}
>
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
</button>
) : (
<button type="button" onClick={handleAddToFavorites}>
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
<button
type="button"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleAddToFavorites();
}}
>
<Star className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
<CustomMenu width="auto" verticalEllipsis placement="bottom-end">
<CustomMenu.MenuItem onClick={handleCopyText}>
<CustomMenu width="auto" ellipsis className="z-10">
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setEditModuleModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-3 w-3" strokeWidth={2} />
<span>Copy link</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setEditModuleModal(true)}>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" strokeWidth={2} />
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setModuleDeleteModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" strokeWidth={2} />
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopyText();
}}
>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-3 w-3" />
<span>Copy module link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-2 text-custom-text-200">
<div className="flex items-start gap-1">
<CalendarDays className="h-4 w-4" />
<span>Start:</span>
<span>{renderShortDateWithYearFormat(startDate, "Not set")}</span>
</div>
<div className="flex items-start gap-1">
<Target className="h-4 w-4" />
<span>End:</span>
<span>{renderShortDateWithYearFormat(endDate, "Not set")}</span>
</div>
</div>
</div>
</div>
<div className="flex h-20 flex-col items-end bg-custom-background-80">
<div className="flex w-full items-center justify-between gap-2 justify-self-end p-4 text-custom-text-200">
<span>Progress</span>
<div className="bar relative h-1 w-full rounded bg-custom-background-90">
<div
className="absolute top-0 left-0 h-1 rounded bg-green-500 duration-300"
style={{
width: `${isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%`,
}}
/>
</div>
<span>{isNaN(completionPercentage) ? 0 : completionPercentage.toFixed(0)}%</span>
</div>
<div className="item-center flex h-full w-full justify-between px-4 pb-4 text-custom-text-200">
<p>
Last updated:
<span className="font-medium">{renderShortDateWithYearFormat(lastUpdated)}</span>
</p>
{module.members_detail.length > 0 && (
<div className="flex items-center gap-1">
<AssigneesList users={module.members_detail} length={4} />
</div>
)}
</div>
</div>
</div>
</a>
</Link>
</>
);
});

242
web/components/modules/module-list-item.tsx Normal file
View File

@ -0,0 +1,242 @@
import React, { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useToast from "hooks/use-toast";
// components
import { CreateUpdateModuleModal, DeleteModuleModal } from "components/modules";
// ui
import { AssigneesList } from "components/ui";
import { CircularProgressIndicator, CustomMenu, Tooltip } from "@plane/ui";
// icons
import { Check, Info, LinkIcon, Pencil, Star, Trash2, User2 } from "lucide-react";
// helpers
import { copyUrlToClipboard } from "helpers/string.helper";
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
// types
import { IModule } from "types";
// constants
import { MODULE_STATUS } from "constants/module";
type Props = {
module: IModule;
};
export const ModuleListItem: React.FC<Props> = observer((props) => {
const { module } = props;
const [editModuleModal, setEditModuleModal] = useState(false);
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { setToastAlert } = useToast();
const { module: moduleStore } = useMobxStore();
const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
const handleAddToFavorites = () => {
if (!workspaceSlug || !projectId) return;
moduleStore.addModuleToFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't add the module to favorites. Please try again.",
});
});
};
const handleRemoveFromFavorites = () => {
if (!workspaceSlug || !projectId) return;
moduleStore.removeModuleFromFavorites(workspaceSlug.toString(), projectId.toString(), module.id).catch(() => {
setToastAlert({
type: "error",
title: "Error!",
message: "Couldn't remove the module from favorites. Please try again.",
});
});
};
const handleCopyText = () => {
copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
setToastAlert({
type: "success",
title: "Link Copied!",
message: "Module link copied to clipboard.",
});
});
};
const endDate = new Date(module.target_date ?? "");
const startDate = new Date(module.start_date ?? "");
const renderDate = module.start_date || module.target_date;
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
const moduleStatus = MODULE_STATUS.find((status) => status.value === module.status);
const progress = isNaN(completionPercentage) ? 0 : Math.floor(completionPercentage);
const completedModuleCheck = module.status === "completed" && module.total_issues - module.completed_issues;
const openModuleOverview = () => {
const { query } = router;
router.push({
pathname: router.pathname,
query: { ...query, peekModule: module.id },
});
};
return (
<>
{workspaceSlug && projectId && (
<CreateUpdateModuleModal
isOpen={editModuleModal}
onClose={() => setEditModuleModal(false)}
data={module}
projectId={projectId.toString()}
workspaceSlug={workspaceSlug.toString()}
/>
)}
<DeleteModuleModal data={module} isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} />
<Link href={`/${workspaceSlug}/projects/${module.project}/modules/${module.id}`}>
<a className="group flex items-center justify-between gap-5 px-10 py-6 h-16 w-full text-sm bg-custom-background-100 border-b border-custom-border-100 hover:bg-custom-background-90">
<div className="flex items-center gap-3 w-full truncate">
<div className="flex items-center gap-4 truncate">
<span className="flex-shrink-0">
<CircularProgressIndicator size={38} percentage={progress}>
{completedModuleCheck ? (
<span className="text-sm text-custom-primary-100">{`!`}</span>
) : progress === 100 ? (
<Check className="h-3 w-3 text-custom-primary-100 stroke-[2]" />
) : (
<span className="text-xs text-custom-text-300">{`${progress}%`}</span>
)}
</CircularProgressIndicator>
</span>
<Tooltip tooltipContent={module.name} position="auto">
<span className="text-base font-medium truncate">{module.name}</span>
</Tooltip>
</div>
<button
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
openModuleOverview();
}}
className="flex-shrink-0 hidden group-hover:flex z-10"
>
<Info className="h-4 w-4 text-custom-text-400" />
</button>
</div>
<div className="flex items-center gap-2.5 justify-end w-full md:w-auto md:flex-shrink-0 ">
<div className="flex items-center justify-center">
{moduleStatus && (
<span
className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
>
{moduleStatus.label}
</span>
)}
</div>
{renderDate && (
<span className="flex items-center justify-center gap-2 w-28 text-xs text-custom-text-300">
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")}
{" - "}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</span>
)}
<Tooltip tooltipContent={`${module.members_detail.length} Members`}>
<div className="flex items-center justify-center gap-1 cursor-default w-16">
{module.members_detail.length > 0 ? (
<AssigneesList users={module.members_detail} length={2} />
) : (
<span className="flex items-end justify-center h-5 w-5 bg-custom-background-80 rounded-full border border-dashed border-custom-text-400">
<User2 className="h-4 w-4 text-custom-text-400" />
</span>
)}
</div>
</Tooltip>
{module.is_favorite ? (
<button
type="button"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleRemoveFromFavorites();
}}
className="z-[1]"
>
<Star className="h-3.5 w-3.5 text-amber-500 fill-current" />
</button>
) : (
<button
type="button"
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
handleAddToFavorites();
}}
className="z-[1]"
>
<Star className="h-3.5 w-3.5 text-custom-text-300" />
</button>
)}
<CustomMenu width="auto" verticalEllipsis buttonClassName="z-[1]">
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setEditModuleModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<Pencil className="h-3 w-3" />
<span>Edit module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setModuleDeleteModal(true);
}}
>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-3 w-3" />
<span>Delete module</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleCopyText();
}}
>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-3 w-3" />
<span>Copy module link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</a>
</Link>
</>
);
});

55
web/components/modules/module-peek-overview.tsx Normal file
View File

@ -0,0 +1,55 @@
import React, { useEffect } from "react";
import { useRouter } from "next/router";
// mobx
import { observer } from "mobx-react-lite";
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { ModuleDetailsSidebar } from "./sidebar";
type Props = {
projectId: string;
workspaceSlug: string;
};
export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug }) => {
const router = useRouter();
const { peekModule } = router.query;
const ref = React.useRef(null);
const { module: moduleStore } = useMobxStore();
const { fetchModuleDetails } = moduleStore;
const handleClose = () => {
delete router.query.peekModule;
router.push({
pathname: router.pathname,
query: { ...router.query },
});
};
useEffect(() => {
if (!peekModule) return;
fetchModuleDetails(workspaceSlug, projectId, peekModule.toString());
}, [fetchModuleDetails, peekModule, projectId, workspaceSlug]);
return (
<>
{peekModule && (
<div
ref={ref}
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
<ModuleDetailsSidebar moduleId={peekModule?.toString() ?? ""} handleClose={handleClose} />
</div>
)}
</>
);
});

55
web/components/modules/modules-list-view.tsx
View File

@ -1,3 +1,4 @@
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Plus } from "lucide-react";
// mobx store
@ -5,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// hooks
import useLocalStorage from "hooks/use-local-storage";
// components
import { ModuleCardItem, ModulesListGanttChartView } from "components/modules";
import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "components/modules";
import { EmptyState } from "components/common";
// ui
import { Loader } from "@plane/ui";
@ -13,6 +14,9 @@ import { Loader } from "@plane/ui";
import emptyModule from "public/empty-state/module.svg";
export const ModulesListView: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, projectId, peekModule } = router.query;
const { module: moduleStore } = useMobxStore();
const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
@ -22,12 +26,12 @@ export const ModulesListView: React.FC = observer(() => {
if (!modulesList)
return (
<Loader className="grid grid-cols-3 gap-4 p-8">
<Loader.Item height="100px" />
<Loader.Item height="100px" />
<Loader.Item height="100px" />
<Loader.Item height="100px" />
<Loader.Item height="100px" />
<Loader.Item height="100px" />
<Loader.Item height="176px" />
<Loader.Item height="176px" />
<Loader.Item height="176px" />
<Loader.Item height="176px" />
<Loader.Item height="176px" />
<Loader.Item height="176px" />
</Loader>
);
@ -35,12 +39,39 @@ export const ModulesListView: React.FC = observer(() => {
<>
{modulesList.length > 0 ? (
<>
{modulesView === "list" && (
<div className="h-full overflow-y-auto">
<div className="flex justify-between h-full w-full">
<div className="flex flex-col h-full w-full overflow-y-auto">
{modulesList.map((module) => (
<ModuleListItem key={module.id} module={module} />
))}
</div>
<ModulePeekOverview
projectId={projectId?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
/>
</div>
</div>
)}
{modulesView === "grid" && (
<div className="h-full overflow-y-auto p-8">
<div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
{modulesList.map((module) => (
<ModuleCardItem key={module.id} module={module} />
))}
<div className="h-full w-full">
<div className="flex justify-between h-full w-full">
<div
className={`grid grid-cols-1 gap-6 p-8 h-full w-full overflow-y-auto ${
peekModule
? "lg:grid-cols-1 xl:grid-cols-2 3xl:grid-cols-3"
: "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
} auto-rows-max transition-all `}
>
{modulesList.map((module) => (
<ModuleCardItem key={module.id} module={module} />
))}
</div>
<ModulePeekOverview
projectId={projectId?.toString() ?? ""}
workspaceSlug={workspaceSlug?.toString() ?? ""}
/>
</div>
</div>
)}

31
web/components/modules/sidebar-select/select-lead.tsx
View File

@ -7,7 +7,7 @@ import { ProjectService } from "services/project";
import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icons
import { UserCircle2 } from "lucide-react";
import { ChevronDown, UserCircle2 } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -36,7 +36,7 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar user={member.member} height="18px" width="18px" />
{member.member.display_name}
</div>
),
@ -46,18 +46,27 @@ export const SidebarLeadSelect: FC<Props> = (props) => {
return (
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<UserCircle2 className="h-5 w-5" />
<span>Lead</span>
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<UserCircle2 className="h-4 w-4" />
<span className="text-base">Lead</span>
</div>
<div className="sm:basis-1/2">
<div className="flex items-center w-1/2 rounded-sm">
<CustomSearchSelect
className="w-full rounded-sm"
value={value}
label={
<div className="flex items-center gap-2">
{selectedOption && <Avatar user={selectedOption} />}
{selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">No lead</span>}
</div>
customButtonClassName="rounded-sm"
customButton={
selectedOption ? (
<div className="flex items-center justify-start gap-2 p-0.5 w-full">
<Avatar user={selectedOption} />
<span className="text-sm text-custom-text-200">{selectedOption?.display_name}</span>
</div>
) : (
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
<span>No lead</span>
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
</div>
)
}
options={options}
maxHeight="md"

35
web/components/modules/sidebar-select/select-members.tsx
View File

@ -10,6 +10,7 @@ import { ProjectService } from "services/project";
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// icons
import { ChevronDown } from "lucide-react";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -37,7 +38,7 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
query: member.member.display_name,
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
<Avatar user={member.member} height="18px" width="18px" />
{member.member.display_name}
</div>
),
@ -45,24 +46,26 @@ export const SidebarMembersSelect: React.FC<Props> = ({ value, onChange }) => {
return (
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<UserGroupIcon className="h-5 w-5" />
<span>Members</span>
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<UserGroupIcon className="h-4 w-4" />
<span className="text-base">Members</span>
</div>
<div className="sm:basis-1/2">
<div className="flex items-center w-1/2 rounded-sm ">
<CustomSearchSelect
className="w-full rounded-sm"
value={value ?? []}
label={
<div className="flex items-center gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} />
<span className="text-custom-text-200">{value.length} Assignees</span>
</div>
) : (
"No members"
)}
</div>
customButtonClassName="rounded-sm"
customButton={
value && value.length > 0 && Array.isArray(value) ? (
<div className="flex items-center gap-2 p-0.5 w-full">
<AssigneesList userIds={value} length={2} />
</div>
) : (
<div className="group flex items-center justify-between gap-2 p-1 text-sm text-custom-text-400 w-full">
<span>No members</span>
<ChevronDown className="h-3.5 w-3.5 hidden group-hover:flex" />
</div>
)
}
options={options}
onChange={onChange}

574
web/components/modules/sidebar.tsx
View File

@ -3,8 +3,7 @@ import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { mutate } from "swr";
import { Controller, useForm } from "react-hook-form";
import { Disclosure, Popover, Transition } from "@headlessui/react";
import DatePicker from "react-datepicker";
import { Disclosure, Transition } from "@headlessui/react";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// services
@ -18,22 +17,12 @@ import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
// ui
import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
import { CustomMenu, Loader, LayersIcon } from "@plane/ui";
// icon
import {
AlertCircle,
CalendarDays,
ChevronDown,
File,
LinkIcon,
MoveRight,
PieChart,
Plus,
Trash2,
} from "lucide-react";
import { AlertCircle, ChevronDown, ChevronRight, Info, LinkIcon, Plus, Trash2 } from "lucide-react";
// helpers
import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
import { capitalizeFirstLetter, copyUrlToClipboard } from "helpers/string.helper";
import { renderShortDate, renderShortMonthDate } from "helpers/date-time.helper";
import { copyUrlToClipboard } from "helpers/string.helper";
// types
import { linkDetails, IModule, ModuleLink } from "types";
// fetch-keys
@ -50,8 +39,8 @@ const defaultValues: Partial<IModule> = {
};
type Props = {
isOpen: boolean;
moduleId: string;
handleClose: () => void;
};
// services
@ -59,14 +48,14 @@ const moduleService = new ModuleService();
// TODO: refactor this component
export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const { isOpen, moduleId } = props;
const { moduleId, handleClose } = props;
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [moduleLinkModal, setModuleLinkModal] = useState(false);
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<linkDetails | null>(null);
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
const { workspaceSlug, projectId, peekModule } = router.query;
const { module: moduleStore, user: userStore } = useMobxStore();
@ -77,7 +66,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
const { reset, watch, control } = useForm({
const { reset, control } = useForm({
defaultValues,
});
@ -209,12 +198,29 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
: null;
const handleEditLink = (link: linkDetails) => {
console.log("link", link);
setSelectedLinkToUpdate(link);
setModuleLinkModal(true);
};
if (!moduleDetails) return null;
const startDate = new Date(moduleDetails.start_date ?? "");
const endDate = new Date(moduleDetails.target_date ?? "");
const areYearsEqual = startDate.getFullYear() === endDate.getFullYear();
const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
const issueCount =
moduleDetails.total_issues === 0
? "0 Issue"
: moduleDetails.total_issues === moduleDetails.completed_issues
? moduleDetails.total_issues > 1
? `${moduleDetails.total_issues}`
: `${moduleDetails.total_issues}`
: `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
return (
<>
<LinkModal
@ -229,308 +235,160 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
updateIssueLink={handleUpdateLink}
/>
<DeleteModuleModal isOpen={moduleDeleteModal} onClose={() => setModuleDeleteModal(false)} data={moduleDetails} />
<div
className={`fixed top-[66px] ${
isOpen ? "right-0" : "-right-[24rem]"
} h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
>
{module ? (
<>
<div className="flex flex-col items-start justify-center">
<div className="flex gap-2.5 px-5 text-sm">
<div className="flex items-center ">
<Controller
control={control}
name="status"
render={({ field: { value } }) => (
<CustomSelect
customButton={
<span className="flex cursor-pointer items-center rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-center text-xs capitalize">
{capitalizeFirstLetter(`${watch("status")}`)}
</span>
}
value={value}
onChange={(value: any) => {
submitChanges({ status: value });
}}
>
{MODULE_STATUS.map((option) => (
<CustomSelect.Option key={option.value} value={option.value}>
<span className="text-xs">{option.label}</span>
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
<div className="relative flex h-full w-52 items-center gap-2 text-sm">
<Popover className="flex h-full items-center justify-center rounded-lg">
{({}) => (
<>
<Popover.Button
className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
moduleDetails.start_date ? "" : "text-custom-text-200"
}`}
>
<CalendarDays className="h-3 w-3" />
<span>
{renderShortDateWithYearFormat(new Date(`${moduleDetails.start_date}`), "Start date")}
</span>
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
<DatePicker
selected={watch("start_date") ? new Date(`${watch("start_date")}`) : new Date()}
onChange={(date) => {
submitChanges({
start_date: renderDateFormat(date),
});
}}
selectsStart
startDate={new Date(`${watch("start_date")}`)}
endDate={new Date(`${watch("target_date")}`)}
maxDate={new Date(`${watch("target_date")}`)}
shouldCloseOnSelect
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<span>
<MoveRight className="h-3 w-3 text-custom-text-200" />
{module ? (
<>
<div className="flex items-center justify-between w-full">
<div>
{peekModule && (
<button
className="flex items-center justify-center h-5 w-5 rounded-full bg-custom-border-300"
onClick={() => handleClose()}
>
<ChevronRight className="h-3 w-3 text-white stroke-2" />
</button>
)}
</div>
<div className="flex items-center gap-3.5">
<button onClick={handleCopyText}>
<LinkIcon className="h-3 w-3 text-custom-text-300" />
</button>
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" />
<span>Delete</span>
</span>
<Popover className="flex h-full items-center justify-center rounded-lg">
{({}) => (
<>
<Popover.Button
className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
moduleDetails.target_date ? "" : "text-custom-text-200"
}`}
>
<CalendarDays className="h-3 w-3 " />
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<span>
{renderShortDateWithYearFormat(new Date(`${moduleDetails?.target_date}`), "End date")}
</span>
</Popover.Button>
<div className="flex flex-col gap-3">
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{moduleDetails.name}</h4>
<div className="flex items-center gap-5">
{moduleStatus && (
<span
className={`flex items-center cursor-default justify-center text-sm h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
>
{moduleStatus.label}
</span>
)}
<span className="text-sm text-custom-text-300 font-mediu cursor-default">
{areYearsEqual ? renderShortDate(startDate, "_ _") : renderShortMonthDate(startDate, "_ _")} -{" "}
{areYearsEqual ? renderShortDate(endDate, "_ _") : renderShortMonthDate(endDate, "_ _")}
</span>
</div>
</div>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute top-10 -right-5 z-20 transform overflow-hidden">
<DatePicker
selected={watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()}
onChange={(date) => {
submitChanges({
target_date: renderDateFormat(date),
});
}}
selectsEnd
startDate={new Date(`${watch("start_date")}`)}
endDate={new Date(`${watch("target_date")}`)}
minDate={new Date(`${watch("start_date")}`)}
shouldCloseOnSelect
inline
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
{moduleDetails.description && (
<span className="whitespace-normal text-sm leading-5 py-2.5 text-custom-text-200 break-words w-full">
{moduleDetails.description}
</span>
)}
<div className="flex flex-col gap-5 pt-2.5 pb-6">
<Controller
control={control}
name="lead"
render={({ field: { value } }) => (
<SidebarLeadSelect
value={value}
onChange={(val: string) => {
submitChanges({ lead: val });
}}
/>
)}
/>
<Controller
control={control}
name="members_list"
render={({ field: { value } }) => (
<SidebarMembersSelect
value={value}
onChange={(val: string[]) => {
submitChanges({ members_list: val });
}}
/>
)}
/>
<div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<LayersIcon className="h-4 w-4" />
<span className="text-base">Issues</span>
</div>
<div className="flex w-full flex-col gap-6 px-6 py-6">
<div className="flex w-full flex-col items-start justify-start gap-2">
<div className="flex w-full items-start justify-between gap-2 ">
<div className="max-w-[300px]">
<h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
{moduleDetails.name}
</h4>
</div>
<CustomMenu width="lg" ellipsis>
<CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
<span className="flex items-center justify-start gap-2">
<Trash2 className="h-4 w-4" />
<span>Delete</span>
</span>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleCopyText}>
<span className="flex items-center justify-start gap-2">
<LinkIcon className="h-4 w-4" />
<span>Copy link</span>
</span>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
<span className="whitespace-normal text-sm leading-5 text-custom-text-200 break-words w-full">
{moduleDetails.description}
</span>
</div>
<div className="flex flex-col gap-4 text-sm">
<Controller
control={control}
name="lead"
render={({ field: { value } }) => (
<SidebarLeadSelect
value={value}
onChange={(val: string) => {
submitChanges({ lead: val });
}}
/>
)}
/>
<Controller
control={control}
name="members_list"
render={({ field: { value } }) => (
<SidebarMembersSelect
value={value}
onChange={(val: string[]) => {
submitChanges({ members_list: val });
}}
/>
)}
/>
<div className="flex items-center justify-start gap-1">
<div className="flex w-40 items-center justify-start gap-2 text-custom-text-200">
<PieChart className="h-5 w-5" />
<span>Progress</span>
</div>
<div className="flex items-center gap-2.5 text-custom-text-200">
<span className="h-4 w-4">
<ProgressBar value={moduleDetails.completed_issues} maxValue={moduleDetails.total_issues} />
</span>
{moduleDetails.completed_issues}/{moduleDetails.total_issues}
</div>
</div>
</div>
<div className="flex items-center w-1/2">
<span className="text-sm text-custom-text-300 px-1.5">{issueCount}</span>
</div>
</div>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
<Disclosure defaultOpen>
<div className="flex flex-col">
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
<Disclosure>
{({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2 ">
<div className="flex w-full items-center justify-between gap-2">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Progress</span>
{!open && progressPercentage ? (
<span className="rounded bg-[#09A953]/10 px-1.5 py-0.5 text-xs text-[#09A953]">
</div>
<div className="flex items-center gap-2.5">
{progressPercentage ? (
<span className="flex items-center justify-center h-5 w-9 rounded text-xs font-medium text-amber-500 bg-amber-50">
{progressPercentage ? `${progressPercentage}%` : ""}
</span>
) : (
""
)}
</div>
{isStartValid && isEndValid ? (
<Disclosure.Button className="p-1">
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<AlertCircle height={14} width={14} className="text-custom-text-200" />
<span className="text-xs italic text-custom-text-200">
Invalid date. Please enter valid date.
</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>
{isStartValid && isEndValid ? (
<div className=" h-full w-full py-4">
<div className="flex items-start justify-between gap-4 py-2 text-xs">
<div className="flex items-center gap-1">
<span>
<File className="h-3 w-3 text-custom-text-200" />
</span>
<span>
Pending Issues -{" "}
{moduleDetails.total_issues -
(moduleDetails.completed_issues + moduleDetails.cancelled_issues)}{" "}
</span>
</div>
<div className="flex items-center gap-3 text-custom-text-100">
<div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
<span>Ideal</span>
</div>
<div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
<span>Current</span>
</div>
</div>
</div>
<div className="relative h-40 w-80">
<ProgressChart
distribution={moduleDetails.distribution.completion_chart}
startDate={moduleDetails.start_date ?? ""}
endDate={moduleDetails.target_date ?? ""}
totalIssues={moduleDetails.total_issues}
/>
</div>
</div>
<Disclosure.Button className="p-1.5">
<ChevronDown
className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
) : (
""
<div className="flex items-center gap-1">
<AlertCircle height={14} width={14} className="text-custom-text-200" />
<span className="text-xs italic text-custom-text-200">
Invalid date. Please enter valid date.
</span>
</div>
)}
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
<Disclosure defaultOpen>
{({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2 ">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Other Information</span>
</div>
{moduleDetails.total_issues > 0 ? (
<Disclosure.Button className="p-1">
<ChevronDown className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
</Disclosure.Button>
) : (
<div className="flex items-center gap-1">
<AlertCircle height={14} width={14} className="text-custom-text-200" />
<span className="text-xs italic text-custom-text-200">
No issues found. Please add issue.
</span>
</div>
)}
</div>
<Transition show={open}>
<Disclosure.Panel>
{moduleDetails.total_issues > 0 ? (
<>
<div className=" h-full w-full py-4">
<div className="flex flex-col gap-3">
{isStartValid && isEndValid ? (
<div className=" h-full w-full pt-4">
<div className="flex items-start gap-4 py-2 text-xs">
<div className="flex items-center gap-3 text-custom-text-100">
<div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
<span>Ideal</span>
</div>
<div className="flex items-center justify-center gap-1">
<span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
<span>Current</span>
</div>
</div>
</div>
<div className="relative h-40 w-80">
<ProgressChart
distribution={moduleDetails.distribution.completion_chart}
startDate={moduleDetails.start_date ?? ""}
endDate={moduleDetails.target_date ?? ""}
totalIssues={moduleDetails.total_issues}
/>
</div>
</div>
) : (
""
)}
{moduleDetails.total_issues > 0 && (
<div className="h-full w-full pt-5 border-t border-custom-border-200">
<SidebarProgressStats
distribution={moduleDetails.distribution}
groupedIssues={{
@ -542,12 +400,11 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
}}
totalIssues={moduleDetails.total_issues}
module={moduleDetails}
isPeekModuleDetails={Boolean(peekModule)}
/>
</div>
</>
) : (
""
)}
)}
</div>
</Disclosure.Panel>
</Transition>
</div>
@ -555,42 +412,83 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</Disclosure>
</div>
<div className="flex w-full flex-col border-t border-custom-border-200 px-6 pt-6 pb-10 text-xs">
<div className="flex w-full items-center justify-between">
<h4 className="text-sm font-medium text-custom-text-200">Links</h4>
<button
className="grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-4 w-4" />
</button>
</div>
<div className="mt-2 space-y-2 hover:bg-custom-background-80">
{memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
<LinksList
links={moduleDetails.link_module}
handleEditLink={handleEditLink}
handleDeleteLink={handleDeleteLink}
userAuth={memberRole}
/>
) : null}
</div>
<div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 py-5 px-1.5">
<Disclosure>
{({ open }) => (
<div className={`relative flex h-full w-full flex-col ${open ? "" : "flex-row"}`}>
<div className="flex w-full items-center justify-between gap-2">
<div className="flex items-center justify-start gap-2 text-sm">
<span className="font-medium text-custom-text-200">Links</span>
</div>
<div className="flex items-center gap-2.5">
<Disclosure.Button className="p-1.5">
<ChevronDown
className={`h-3.5 w-3.5 ${open ? "rotate-180 transform" : ""}`}
aria-hidden="true"
/>
</Disclosure.Button>
</div>
</div>
<Transition show={open}>
<Disclosure.Panel>
<div className="flex flex-col w-full mt-2 space-y-3 h-72 overflow-y-auto">
{memberRole && moduleDetails.link_module && moduleDetails.link_module.length > 0 ? (
<>
<div className="flex items-center justify-end w-full">
<button
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
Add link
</button>
</div>
<LinksList
links={moduleDetails.link_module}
handleEditLink={handleEditLink}
handleDeleteLink={handleDeleteLink}
userAuth={memberRole}
/>
</>
) : (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">
<Info className="h-3.5 w-3.5 text-custom-text-300 stroke-[1.5]" />
<span className="text-xs text-custom-text-300 p-0.5">No links added yet</span>
</div>
<button
className="flex items-center gap-1.5 text-sm font-medium text-custom-primary-100"
onClick={() => setModuleLinkModal(true)}
>
<Plus className="h-3 w-3" />
Add link
</button>
</div>
)}
</div>
</Disclosure.Panel>
</Transition>
</div>
)}
</Disclosure>
</div>
</>
) : (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
)}
</div>
</div>
</>
) : (
<Loader className="px-5">
<div className="space-y-2">
<Loader.Item height="15px" width="50%" />
<Loader.Item height="15px" width="30%" />
</div>
<div className="mt-8 space-y-3">
<Loader.Item height="30px" />
<Loader.Item height="30px" />
<Loader.Item height="30px" />
</div>
</Loader>
)}
</>
);
});

8
web/components/notifications/notification-card.tsx
View File

@ -11,7 +11,7 @@ import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
// helper
import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
import { replaceUnderscoreIfSnakeCase, truncateText, stripAndTruncateHTML } from "helpers/string.helper";
import {
formatDateDistance,
render12HourFormatTime,
@ -115,10 +115,10 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
renderShortDateWithYearFormat(notification.data.issue_activity.new_value)
) : notification.data.issue_activity.field === "attachment" ? (
"the issue"
) : stripHTML(notification.data.issue_activity.new_value).length > 55 ? (
stripHTML(notification.data.issue_activity.new_value).slice(0, 50) + "..."
) : notification.data.issue_activity.field === "description" ? (
stripAndTruncateHTML(notification.data.issue_activity.new_value, 55)
) : (
stripHTML(notification.data.issue_activity.new_value)
notification.data.issue_activity.new_value
)
) : (
<span>

15
web/components/ui/avatar.tsx
View File

@ -76,11 +76,20 @@ export const Avatar: React.FC<AvatarProps> = ({
type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[];
height?: string;
width?: string;
length?: number;
showLength?: boolean;
};
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 3, showLength = true }) => {
export const AssigneesList: React.FC<AsigneesListProps> = ({
users,
userIds,
height = "24px",
width = "24px",
length = 3,
showLength = true,
}) => {
const router = useRouter();
const { workspaceSlug } = router.query;
@ -101,7 +110,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
{users && (
<>
{users.slice(0, length).map((user, index) => (
<Avatar key={user?.id} user={user} index={index} />
<Avatar key={user?.id} user={user} index={index} height={height} width={width} />
))}
{users.length > length ? (
<div className="-ml-3.5 relative h-6 w-6 rounded">
@ -118,7 +127,7 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
{userIds.slice(0, length).map((userId, index) => {
const user = people?.find((p) => p.member.id === userId)?.member;
return <Avatar key={userId} user={user} index={index} />;
return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
})}
{showLength ? (
userIds.length > length ? (

50
web/constants/module.ts
View File

@ -5,11 +5,49 @@ export const MODULE_STATUS: {
label: string;
value: TModuleStatus;
color: string;
textColor: string;
bgColor: string;
}[] = [
{ label: "Backlog", value: "backlog", color: "#a3a3a2" },
{ label: "Planned", value: "planned", color: "#3f76ff" },
{ label: "In Progress", value: "in-progress", color: "#f39e1f" },
{ label: "Paused", value: "paused", color: "#525252" },
{ label: "Completed", value: "completed", color: "#16a34a" },
{ label: "Cancelled", value: "cancelled", color: "#ef4444" },
{
label: "Backlog",
value: "backlog",
color: "#a3a3a2",
textColor: "text-custom-text-400",
bgColor: "bg-custom-background-80",
},
{
label: "Planned",
value: "planned",
color: "#3f76ff",
textColor: "text-blue-500",
bgColor: "bg-indigo-50",
},
{
label: "In Progress",
value: "in-progress",
color: "#f39e1f",
textColor: "text-amber-500",
bgColor: "bg-amber-50",
},
{
label: "Paused",
value: "paused",
color: "#525252",
textColor: "text-custom-text-300",
bgColor: "bg-custom-background-90",
},
{
label: "Completed",
value: "completed",
color: "#16a34a",
textColor: "text-green-600",
bgColor: "bg-green-100",
},
{
label: "Cancelled",
value: "cancelled",
color: "#ef4444",
textColor: "text-red-500",
bgColor: "bg-red-50",
},
];

12
web/helpers/date-time.helper.ts
View File

@ -172,6 +172,18 @@ export const renderShortDate = (date: string | Date, placeholder?: string) => {
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${day} ${month}`;
};
export const renderShortMonthDate = (date: string | Date, placeholder?: string) => {
if (!date || date === "") return null;
date = new Date(date);
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const month = months[date.getMonth()];
const year = date.getFullYear();
return isNaN(date.getTime()) ? placeholder ?? "N/A" : `${month} ${year}`;
};
export const render12HourFormatTime = (date: string | Date): string => {
if (!date || date === "") return "";

15
web/helpers/string.helper.ts
View File

@ -111,11 +111,20 @@ export const getFirstCharacters = (str: string) => {
*/
export const stripHTML = (html: string) => {
const tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
const strippedText = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, ""); // Remove script tags
return strippedText.replace(/<[^>]*>/g, ""); // Remove all other HTML tags
};
/**
*
* @example:
* const html = "<p>Some text</p>";
* const text = stripAndTruncateHTML(html);
* console.log(text); // Some text
*/
export const stripAndTruncateHTML = (html: string, length: number = 55) => truncateText(stripHTML(html), length);
/**
* @description: This function return number count in string if number is more than 100 then it will return 99+
* @param {number} number

20
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -27,7 +27,7 @@ const ModuleIssuesPage: NextPage = () => {
const { module: moduleStore } = useMobxStore();
const { storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");
const isSidebarCollapsed = storedValue ? (storedValue === "true" ? true : false) : false;
const { error } = useSWR(
@ -60,6 +60,10 @@ const ModuleIssuesPage: NextPage = () => {
// setModuleIssuesListModal(true);
// };
const toggleSidebar = () => {
setValue(`${!isSidebarCollapsed}`);
};
return (
<>
<AppLayout header={<ModuleIssuesHeader />} withProjectWrapper>
@ -82,10 +86,20 @@ const ModuleIssuesPage: NextPage = () => {
/>
) : (
<div className="flex h-full w-full">
<div className={`h-full w-full ${isSidebarCollapsed ? "" : "mr-[24rem]"} duration-300`}>
<div className="h-full w-full">
<ModuleLayoutRoot />
</div>
{moduleId && <ModuleDetailsSidebar isOpen={!isSidebarCollapsed} moduleId={moduleId.toString()} />}
{moduleId && !isSidebarCollapsed && (
<div
className="flex flex-col gap-3.5 h-full w-[24rem] z-10 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-6 py-3.5 duration-300 flex-shrink-0"
style={{
boxShadow:
"0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
}}
>
<ModuleDetailsSidebar moduleId={moduleId.toString()} handleClose={toggleSidebar} />
</div>
)}
</div>
)}
</AppLayout>

4
web/public/empty-state/empty_label.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 3.33203H3.33331V19.9987L18.8166 35.482C20.3833 37.0487 22.95 37.0487 24.5166 35.482L35.4833 24.5154C37.05 22.9487 37.05 20.382 35.4833 18.8154L20 3.33203Z" fill="#CED4DA" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.6667 11.668H11.6834" stroke="#E9ECEF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 487 B

13
web/public/empty-state/empty_members.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_656_27784)">
<path d="M24.8113 22.6226C30.23 22.6226 34.6226 18.23 34.6226 12.8113C34.6226 7.39268 30.23 3 24.8113 3C19.3927 3 15 7.39268 15 12.8113C15 18.23 19.3927 22.6226 24.8113 22.6226Z" fill="#E9ECEF"/>
<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833" fill="#CED4DA"/>
<path d="M41.6604 39.4833C41.6604 35.3986 39.5722 31.4813 36.4863 28.593C33.4005 25.7047 29.2152 24.082 24.8511 24.082C20.4871 24.082 16.3018 25.7047 13.2159 28.593C10.1301 31.4813 8.39648 35.3986 8.39648 39.4833C10.5708 47.729 38.3358 49.5686 41.6604 39.4833Z" stroke="#CED4DA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41.4427 37.888C41.9639 39.9507 39.7091 42.6049 36.6233 44.3074C33.5374 46.0099 29.8569 46.6995 25.4928 46.6995C21.1288 46.6995 16.9435 45.743 13.8576 44.0405C10.6678 42.8396 7.44345 39.8189 9.03816 37.6211L25.4928 37.6211L41.4427 37.888Z" fill="#CED4DA"/>
</g>
<defs>
<clipPath id="clip0_656_27784">
<rect width="47.0943" height="47.0943" fill="white" transform="translate(0.452881 0.820312)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB