Portfolio - Search page

codershq/search/urls.py

@@ -0,0 +1,8 @@
+from django.urls import path
+
+from . import views
+
+app_name = "search"
+urlpatterns = [
+    path("", views.search, name="search"),
+]

codershq/search/views.py

@@ -0,0 +1,105 @@
+from django.shortcuts import render
+from django.http import HttpRequest, HttpResponse
+from django.db.models import QuerySet
+
+from codershq.users.models import User
+from codershq.events.models import Event
+
+def search(request: HttpRequest) -> HttpResponse:
+    if 'search' in request.GET:
+        # get the search and search category queries
+        search = request.GET.get('search')
+        search_category = request.GET.get('search_select')
+
+        # define the context that will be rendered
+        context = {
+            'search': search,
+            'search_select': search_category,
+            'contributors_queryset': '',
+            'events_queryset': '',
+            'skills': [],
+        }
+
+        #### Contributors Category ####
+        if search_category == "Contributors":
+            '''
+                Find contributors based on name AND username of registered Users.
+                TODO: Filter as per contributor role when integrated with User model.
+            '''
+            print("INFO: CONTRIBUTORS CATEGORY CHOSEN")
+
+            # get skills query
+            skills = request.GET.getlist('skill')
+            print("INFO: skills query list received: ", skills)
+
+            # add skills to context
+            context['skills'] = skills
+
+
+            contributors_qs = filter_contributors(search_query=search)
+            print("INFO: users queryset received: ", contributors_qs)
+
+            # add users queryset to context
+            context['contributors_queryset'] = contributors_qs
+
+
+        #### Events Category ####
+        # elif search_category == "Events":
+        #     print("INFO: EVENTS CATEGORY CHOSEN")
+
+        #     events_qs = filter_events(search_query=search)
+        #     print("INFO: events queryset received: ", events_qs)
+
+        #     # add users queryset to context
+        #     context['events_queryset'] = events_qs
+
+        #### All Category ####
+        else:
+            '''
+                TODO: display suggestions if no results found
+            '''
+            print("INFO: ALL CATEGORY CHOSEN")
+
+           # get filtered querysets based on search query
+            contributors_qs = filter_contributors(search_query=search)
+            # events_qs = filter_events(search_query=search)
+
+            # add all querysets to context
+            context['contributors_queryset'] = contributors_qs
+            # context['events_queryset'] = events_qs
+
+
+        print("INFO: Context sent: ", context)
+        return render(request, 'pages/search.html', context)
+    else:
+        return render(request, 'pages/search.html', {})
+
+
+def filter_contributors(search_query: str) -> QuerySet:
+    # find all registered users
+    users_qs = User.objects.all()
+    print("INFO: USERS FOUND: ", users_qs)
+
+    # filter found users as per name attribute
+    users_qs_name = users_qs.filter(name__icontains=search_query)
+    print("INFO: Users filtered as per name: ", users_qs_name)
+
+    # filter found users as per username attribute
+    users_qs_username = users_qs.filter(username__icontains=search_query)
+    print("INFO: Users filtered as per username: ", users_qs_username)
+
+    # combine the filtered results above
+    users_qs = users_qs_name.union(users_qs_username)
+
+    return users_qs
+
+def filter_events(search_query: str) -> QuerySet:
+    # find all registered events
+    events_qs = Event.objects.all()
+    print("INFO: EVENTS FOUND: ", events_qs)
+
+    # filter found events as per title attribute
+    events_qs = events_qs.filter(title__icontains=search_query)
+    print("INFO: Events filtered as per title: ", events_qs)
+
+    return events_qs

codershq/searchBar/urls.py

@@ -0,0 +1,8 @@
+from django.urls import path
+
+from . import views
+
+app_name = "searchBar"
+urlpatterns = [
+    path("", views.searchBar, name="searchBar"),
+]

codershq/searchBar/views.py

@@ -0,0 +1,4 @@
+from django.shortcuts import render
+
+def searchBar(request):
+    return render(request, 'pages/searchBar.html', {})

codershq/static/sass/project.scss

@@ -4,6 +4,208 @@
 @import "_dashboard";
  // project specific CSS goes here
 
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.myInput:focus {
+  outline: none !important;
+  border-color: gray !important;
+  --tw-ring-color: gray !important;
+
+}
+
+.grid-cols-2-search {
+  grid-template-columns: 12% 88%;
+}
+
+// .grid-cols-6-contributors {
+//   grid-template-columns: 376px 376px 376px 376px 376px 376px;
+// }
+
+.grid-row-2 {
+  grid-template-rows: repeat(2, 185px);
+}
+
+.grid-auto-flow-column {
+  grid-auto-flow: column;
+  grid-auto-columns: min-content;
+
+}
+
+.card {
+  /* Add shadows to create the "card" effect */
+  transition: 0.3s;
+}
+
+/* On mouse-over, add a deeper shadow */
+.card:hover {
+  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+}
+
+.myInput {
+  outline: none;
+}
+
+.lg\:gap-7 {
+  gap: 1.75rem;
+}
+
+/* Dropdown Button */
+.dropbtn {
+  font-size: 16px;
+  cursor: pointer;
+  border: 1px solid #B0B0B0;
+  box-sizing: border-box;
+}
+
+/* Dropdown button on hover & focus */
+.dropbtn:hover {
+  background: #e8fffd;
+  border: 1px solid rgba(44, 185, 187, 0.8);
+  box-sizing: border-box;
+  box-shadow: 0px 0px 4px rgba(92, 205, 206, 0.62);
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  right: 0;
+  margin-top: 4px;
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Dropdown Button */
+.dropbtn2 {
+  font-size: 16px;
+  cursor: pointer;
+  border: 1px solid #B0B0B0;
+  box-sizing: border-box;
+}
+
+/* Dropdown button on hover */
+.dropbtn2:hover {
+  background: #e8fffd;
+  border: 1px solid rgba(44, 185, 187, 0.8);
+  box-sizing: border-box;
+  box-shadow: 0px 0px 4px rgba(92, 205, 206, 0.62);
+}
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown2 {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content2 {
+  left: 0;
+  margin-top: 4px;
+  display: none;
+  position: absolute;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
+.show {display:block;}
+
+.arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+  margin-bottom: 2px;
+  margin-left: 2px;
+}
+
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
+
+/* The container */
+.checkbox-container {
+  display: block;
+  position: relative;
+  padding-left: 30px;
+  margin-top: 12px;
+  cursor: pointer;
+  /* font-size: 22px; */
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* Hide the browser's default checkbox */
+.checkbox-container input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  border-radius: 3px;
+  border: 1px solid #4F4F4F;
+}
+
+/* On mouse-over, add a grey background color */
+.checkbox-container:hover input ~ .checkmark {
+    background: #F5FFFE;
+      border: 1px solid #00AFB1;
+}
+
+/* When the checkbox is checked, add a blue background */
+.checkbox-container input:checked ~ .checkmark {
+    background: #F5FFFE;
+      border: 1px solid #00AFB1;
+}
+
+/* Create the checkmark/indicator (hidden when not checked) */
+.checkmark::after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+/* Show the checkmark when checked */
+.checkbox-container input:checked ~ .checkmark::after {
+  display: block;
+}
+
+/* Style the checkmark/indicator */
+.checkbox-container .checkmark::after {
+  left: 7px;
+  top: 3px;
+  width: 5px;
+  height: 10px;
+  border: solid #00AFB1;
+  border-width: 0 2px 2px 0;
+  -webkit-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
  ////////////////////////////////
  		//Variables//
  ////////////////////////////////