[UPDT] BASE: Changed comment view from modal to activity sidebar

base/context_processors.py

@@ -5,6 +5,7 @@ This module is used to register context processor`
 """
 from django.urls import path
 from django.http import HttpResponse
+from attendance.models import AttendanceGeneralSetting
 from base.models import Company
 from base.urls import urlpatterns
 from offboarding.models import OffboardingGeneralSetting
@@ -102,3 +103,14 @@ def resignation_request_enabled(request):
     if first:
         enabled_resignation_request = first.resignation_request
     return {"enabled_resignation_request": enabled_resignation_request}
+
+
+def timerunner_enabled(request):
+    """
+    Check weather resignation_request enabled of not in offboarding
+    """
+    first = AttendanceGeneralSetting.objects.first()
+    enabled_timerunner = True
+    if first:
+        enabled_timerunner = first.time_runner
+    return {"enabled_timerunner": enabled_timerunner}

base/forms.py

@@ -24,6 +24,7 @@ from base.models import (
     AnnouncementComment,
     AnnouncementExpire,
     Attachment,
+    BaserequestFile,
     Company,
     Department,
     DynamicEmailConfiguration,
@@ -50,6 +51,8 @@ from base.methods import reload_queryset
 from horilla_audit.models import AuditTag
 from horilla_widgets.widgets.horilla_multi_select_field import HorillaMultiSelectField
 from horilla_widgets.widgets.select_widgets import HorillaMultiSelectWidget
+from employee.forms import MultipleFileField
+
 
 # your form here
 
@@ -1550,6 +1553,48 @@ class ShiftrequestcommentForm(ModelForm):
 
         model = ShiftrequestComment
         fields = ('comment',)
+        
+
+class shiftCommentForm(ModelForm):
+    """
+    Shift request comment model form
+    """
+
+    verbose_name = "Add Comment"
+
+    class Meta:
+        model = ShiftrequestComment
+        fields = "__all__"
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.fields["files"] = MultipleFileField(label="files")
+        self.fields["files"].required = False
+
+    def as_p(self):
+        """
+        Render the form fields as HTML table rows with Bootstrap styling.
+        """
+        context = {"form": self}
+        table_html = render_to_string("common_form.html", context)
+        return table_html
+
+    def save(self, commit: bool = ...) -> Any:
+        multiple_files_ids = []
+        files = None
+        if self.files.getlist("files"):
+            files = self.files.getlist("files")
+            self.instance.attachemnt = files[0]
+            multiple_files_ids = []
+            for attachemnt in files:
+                file_instance = BaserequestFile()
+                file_instance.file = attachemnt
+                file_instance.save()
+                multiple_files_ids.append(file_instance.pk)
+        instance = super().save(commit)
+        if commit:
+            instance.files.add(*multiple_files_ids)
+        return instance, files
 
 
 class WorktyperequestcommentForm(ModelForm):

base/templates/base/general_settings.html

@@ -3,5 +3,6 @@
 
 {% include "announcement/expiry_day.html" %}
 {% include "offboarding/settings/settings.html" %}
+{% include "attendance/settings/settings.html" %}
 
 {% endblock settings %}

base/templates/shift_request/htmx/requests.html

@@ -97,8 +97,8 @@ style="cursor: pointer;"
                     <ion-icon name="newspaper-outline" role="img" class="md hydrated" aria-label="newspaper outline"></ion-icon>
                   </button>
 
-                  <button type="button" hx-get="{% url 'shift-request-view-comment' shift_request.id %}" hx-target="#shiftRequestDetailTarget" data-toggle='oh-modal-toggle' 
-                          data-target = '#shiftRequestDetailModal' title="View Comment"  class="oh-btn oh-btn--light" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;">
+                  <button type="button" hx-get="{% url 'view-shift-comment' shift_request.id %}" hx-target="#commentContainer"
+                          data-target = '#activitySidebar' title="View Comment"  class="oh-btn oh-btn--light oh-activity-sidebar__open" style="flex: 1 0 auto; width:20px;height: 40.68px; padding: 0;" onclick="event.stopPropagation()">
                     <ion-icon name="eye-outline" role="img" class="md hydrated" aria-label="eye outline"></ion-icon>
                   </button>
                </div>

base/templates/shift_request/htmx/shift_comment.html

@@ -0,0 +1,113 @@
+{% load i18n static %}
+<style>
+    #enlargeImageContainer {
+        position: absolute;
+        left: -300px;
+        top: 100px;
+        height: 200px;
+        width: 200px;
+    }
+</style>
+<a
+    hx-get="{% url 'shift-request-add-comment' request_id %}"
+    style="width: 165px; position: sticky; top: 0"
+    hx-target="#shiftRequestCommentForm"
+    data-toggle="oh-modal-toggle"
+    data-target="#shiftcommentModal"
+    class="mb-3 oh-btn oh-btn--secondary"
+>
+    <ion-icon
+        name="add-outline"
+        role="img"
+        class="md hydrated"
+        aria-label="add outline"
+    ></ion-icon>
+    {% trans 'Add comment' %}
+</a>
+{% if comments %}
+	<ol class="oh-activity-sidebar__qa-list" role="list">
+		{% for comment in comments %}
+			<li class="oh-activity-sidebar__qa-item">
+				<span class="oh-activity-sidebar__q">{{ comment.comment }}</span>
+
+				<div class="d-flex mt-2 mb-2">
+					{% for file in comment.files.all %}
+					<a
+						href="{{ file.file.url }}"
+						rel="noopener noreferrer"
+						target="_blank"
+						><span
+							class="oh-file-icon oh-file-icon--pdf"
+							onmouseover="enlargeImage('{{ file.file.url }}',$(this))"
+							style="width: 40px; height: 40px"
+							><img
+								src="{% static 'images/ui/minus-icon.png' %}"
+								style="display: block; width: 50%; height: 50%"
+								hx-get="{% url 'delete-comment-file' %}?ids={{ file.id }}&shift_id={{ request_id }}"
+								hx-target="#commentContainer"
+								onclick="event.stopPropagation();event.preventDefault()" /></span
+					></a>
+					{% endfor %}
+
+					<form
+						hx-post="{% url 'view-shift-comment' comment.request_id.id %}?comment_id={{ comment.id }}"
+						hx-target="#commentContainer"
+						class="add-files-form"
+						hx-encoding="multipart/form-data"
+					>
+						{% csrf_token %}
+						<label for="addFile_{{comment.id}}" title="Add Files"
+							><ion-icon
+								name="add-outline"
+								style="font-size: 24px"
+								role="img"
+								class="md hydrated"
+								aria-label="add outline"
+							></ion-icon
+						></label>
+						<input
+							type="file"
+							name="files"
+							class="d-none"
+							multiple="true"
+							id="addFile_{{comment.id}}"
+							onchange="submitForm(this)"
+						/>
+						<input
+							type="submit"
+							class="d-none add_more_submit"
+							value="save"
+						/>
+					</form>
+				</div>
+				<span class="oh-activity-sidebar__a">
+					{% trans 'by' %}
+					<img
+						src="{{ note.note_by.get_avatar }}"
+						style="width: 1.5em; border-radius: 100%"
+					/>
+					{{ comment.employee_id.get_full_name }} @ {{comment.request_id.employee_id.get_full_name }}
+					{% trans "'s shift request" %}
+				</span>
+				<div style="width: 50%">
+					<div id="enlargeImageContainer" class="enlargeImageContainer"></div>
+				</div>
+			</li>
+		{% endfor %}
+	</ol>
+{% else %}
+	<div class="oh-timeoff-modal__profile-content">
+		<div class="oh-404">
+			<div class="">
+				<span class="oh-timeoff-title fw-bold" style="display: block"
+					>{% trans "There are no comments to show." %}</span
+				>
+				<img
+					style="display: block; width: 100px; margin: 20px auto"
+					src="/static/images/ui/comment.png"
+					class=""
+				/>
+			</div>
+		</div>
+	</div>
+{% endif %}

base/templates/shift_request/shift_request_view.html

@@ -64,5 +64,61 @@
   </div>
 </div>
 
+<div class="oh-activity-sidebar" id="activitySidebar">
+  <div class="oh-activity-sidebar__header">
+    <a
+    style="cursor: pointer;"
+    onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
+      <ion-icon
+      name="chevron-back-outline"
+      class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
+      data-target="#activitySidebar"
+      ></ion-icon>
+    </a>
+    <span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
+  </div>
+  <div class="oh-activity-sidebar__body" id="commentContainer">
+  </div>
+</div>
+
+
+<script>
+  // This lines is used to set default selected stage for exits lines
+
+  function enlargeImage(src,$element) {
+      $(".enlargeImageContainer").empty()
+      var enlargeImageContainer = $element.parents().closest("li").find(".enlargeImageContainer")
+      enlargeImageContainer.empty()
+      style = 'width:100%; height:90%; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); background:white'
+      var enlargedImage = $('<iframe>').attr({ src: src, style: style })
+      var name = $('<span>').text(src.split('/').pop().replace(/_/g, ' '))
+      enlargeImageContainer.append(enlargedImage)
+      enlargeImageContainer.append(name)
+      setTimeout(function () {
+          enlargeImageContainer.show()
+
+          const iframe = document.querySelector('iframe').contentWindow
+          var iframe_document = iframe.document
+          iframe_image = iframe_document.getElementsByTagName('img')[0]
+          $(iframe_image).attr('style', 'width:100%; height:100%;')
+      }, 100)
+  }
+
+  function hideEnlargeImage() {
+      var enlargeImageContainer = $('.enlargeImageContainer')
+      enlargeImageContainer.empty()
+  }
+
+  $(document).on('click', function (event) {
+      if (!$(event.target).closest('#enlargeImageContainer').length) {
+          hideEnlargeImage()
+      }
+  })  
+  function submitForm(elem) {
+    $(elem).siblings(".add_more_submit").click();
+}
+</script>
+
+
 
 {% endblock content %}

base/urls.py

@@ -647,6 +647,17 @@ urlpatterns = [
         views.view_shiftrequest_comment,
         name="shift-request-view-comment",
     ),
+    
+    path(
+        "view-shift-comment/<int:shift_id>/",
+        views.view_shift_comment,
+        name="view-shift-comment",
+    ),
+    path(
+        "delete-comment-file/",
+        views.delete_comment_file,
+        name="delete-comment-file",
+    ),
     path(
         "shift-request-delete-comment/<int:comment_id>/",
         views.delete_shiftrequest_comment,