added tags to ui

Author: Mole1424

events/api.py

@@ -7,10 +7,12 @@
     create_repeat_event,
     delete_event,
     edit_event,
+    get_all_tags,
     get_datetime_from_string,
     get_event_by_id,
     get_event_by_slug,
     get_events_by_time,
+    get_tags_by_string,
     get_timedelta_from_string,
 )
 from schema import Event, Tag, Week
@@ -573,13 +575,16 @@ def delete_event_api(event_id: int) -> tuple[Response, int]:
     return jsonify({"message": "Event deleted successfully"}), 200
 
 
-# TODO: might want to refactor getting tags to utils
-
-
 @events_api_bp.route("/tags", methods=["GET"])
 def get_tags() -> tuple[Response, int]:
     """Get all tags
     ---
+    parameters:
+      - name: query
+        in: query
+        type: string
+        required: false
+        description: A query string to filter tags by name.
     security: []
     responses:
         200:
@@ -591,7 +596,10 @@ def get_tags() -> tuple[Response, int]:
         404:
             description: No tags found.
     """
-    tags = Tag.query.order_by(Tag.name).all()
+    query_string = request.args.get("query", "")
+    tags = (
+        get_tags_by_string(query_string, limit=-1) if query_string else get_all_tags()
+    )
     if not tags:
         return jsonify({"error": "No tags found"}), 404
     return jsonify([tag.to_dict() for tag in tags]), 200

events/ui.py

@@ -5,6 +5,7 @@
 from config import colours, icons
 from events.utils import (
     create_event,
+    get_all_tags,
     get_datetime_from_string,
     get_event_by_slug,
     get_timedelta_from_string,
@@ -19,6 +20,8 @@
 def create(error: str | None = None) -> str | Response:  # noqa: PLR0911
     """Create a new event."""
 
+    tags = [tag.name for tag in get_all_tags()]
+
     # if getting, return the ui for creating an event
     if request.method == "GET":
         return render_template(
@@ -29,6 +32,7 @@ def create(error: str | None = None) -> str | Response:  # noqa: PLR0911
             event=None,
             icons=icons,
             colours=colours,
+            tags=tags,
         )
 
     # if posting, create the event
@@ -74,11 +78,8 @@ def create(error: str | None = None) -> str | Response:  # noqa: PLR0911
         return redirect(url_for("events_ui.create"))
 
     # parse tags
-    tags = (
-        [tag.strip() for tag in request.form["tags"].split(",")]
-        if request.form["tags"]
-        else []
-    )
+    tags = request.form.getlist("tags[]")
+    tags = [tag.strip().lower() for tag in tags if tag.strip()] if tags else []
 
     # attempt to create the event
     event = create_event(

events/utils.py

@@ -92,6 +92,9 @@ def create_event(  # noqa: PLR0913
         db.session.rollback()
         return "Unable to find or create a week for the event date"
 
+    # add the event to db to allow tags
+    db.session.add(event)
+
     # attach tags to the event
     # check all tags exist, create if not
     for tag in tags:
@@ -101,8 +104,6 @@ def create_event(  # noqa: PLR0913
             db.session.add(tag_obj)
         event.tags.append(tag_obj)
 
-    # add the event to the session and commit
-    db.session.add(event)
     db.session.commit()
 
     return event
@@ -402,3 +403,16 @@ def get_name_from_hex(hex_colour: str) -> str | None:
         if hex_code.lower() == hex_colour.lower():
             return name
     return None
+
+
+def get_all_tags() -> list[Tag]:
+    """Get all tags from the database"""
+    return Tag.query.order_by(Tag.name).all()
+
+
+def get_tags_by_string(search: str, limit: int = 10) -> list[Tag]:
+    """get tags by a string query"""
+    search = search.lower()
+    query = Tag.query.filter(Tag.name.ilike(f"%{search}%")).order_by(Tag.name)  # type: ignore
+
+    return query.limit(limit).all() if limit != -1 else query.all()

static/js/tags.min.js

@@ -0,0 +1,45 @@
+// All from https://github.com/lekoala/bootstrap5-tags/blob/master/_tags.scss
+
+// Add pseudo focus support
+.form-control-focus {
+    color: var(--bs-body-color, $input-focus-color);
+    background-color: var(--bs-form-control-bg, var(--bs-body-bg, $input-focus-bg));
+    border-color: $input-focus-border-color;
+    outline: 0;
+
+    @if $enable-shadows {
+        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    }
+
+    @else {
+        // Avoid using mixin so we can pass custom focus shadow properly
+        box-shadow: $input-focus-box-shadow;
+    }
+}
+
+@each $state, $data in $form-validation-states {
+    .was-validated :#{$state}+.form-control-focus {
+        border-color: map-get($data, "color");
+        box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba(map-get($data, "color"), $input-btn-focus-color-opacity);
+    }
+}
+
+// Add pseudo placeholder support
+.form-floating .form-control.form-placeholder-shown:not(.form-control-focus)~label {
+    opacity: unset;
+    transform: unset;
+}
+
+// Add pseudo disabled support
+.form-control-disabled {
+    background-color: var(--bs-form-control-disabled-bg, var(--bs-secondary-bg, $input-disabled-bg));
+    opacity: 1;
+}
+
+// mark support
+.tags-menu mark {
+    text-decoration: underline;
+    background: none;
+    color: currentColor;
+    padding: 0;
+}

static/sass/custom/_tags.scss

@@ -4,6 +4,10 @@
 
 {% block header %}
 <script src="{{ url_for('static', filename='js/event-management.js') }}"></script>
+<script type="module">
+    import Tags from "{{ url_for('static', filename='js/tags.min.js') }}";
+    Tags.init();
+</script>
 {% endblock %}
 
 {% block content %}
@@ -177,15 +181,15 @@ <h1>Create Event</h1>
             </div>
 
             <!-- tags -->
-            <!-- badge and created tags? -->
+            <!-- tags from https://github.com/lekoala/bootstrap5-tags -->
             <div class="form-floating col-md-8 offset-md-2">
-                <input type="text" name="tags" id="tags" class="form-control no-validate" placeholder="tag1,tag2,tag3">
-                <label for="tags">Tags</label>
-                <datalist id="tags-list">
+                <select class="form-select" id="tags" name="tags[]" multiple data-allow-new="true" data-allow-clear="true" data-separator=" |,|  ">
+                    <option value="" disabled selected>Select tags</option>
                     {% for tag in tags %}
-                        <option value="{{ tag }}">
+                        <option value="{{ tag }}">{{ tag }}</option>
                     {% endfor %}
-                </datalist>
+                </select> 
+                <label for="tags">Tags</label>
             </div>
 
             <!-- submit -->