Add tags to dashboard

app.py

@@ -38,6 +38,7 @@ def dashboard():
 
     exercises = db.get_exercises()
     people = db.get_people()
+    tags = db.get_tags_for_dashboard()
 
     selected_person_ids = [int(i)
                            for i in request.args.getlist('person_id')]
@@ -59,8 +60,8 @@ def dashboard():
 
     if htmx:
         return render_template('partials/page/dashboard.html',
-                               model=people_and_exercise_rep_maxes, people=people, exercises=exercises, min_date=min_date, max_date=max_date, selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids), 200, {"HX-Trigger": "updatedPeople"}
+                               model=people_and_exercise_rep_maxes, people=people, exercises=exercises, min_date=min_date, max_date=max_date, selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids, tags=tags), 200, {"HX-Trigger": "updatedPeople"}
-    return render_template('dashboard.html', model=people_and_exercise_rep_maxes, people=people, exercises=exercises, min_date=min_date, max_date=max_date, selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids)
+    return render_template('dashboard.html', model=people_and_exercise_rep_maxes, people=people, exercises=exercises, min_date=min_date, max_date=max_date, selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids, tags=tags)
 
 
 @ app.route("/person/list", methods=['GET'])
@@ -314,28 +315,36 @@ def settings():
     return render_template('settings.html', people=people, exercises=exercises)
 
 
-@ app.route("/person/<int:person_id>/tag/redirect", methods=['GET'])
+@ app.route("/tag/redirect", methods=['GET'])
-@ validate_person
+def goto_tag():
-def goto_tag(person_id):
+    person_id = request.args.get("person_id")
     tag_filter = request.args.get('filter')
-    return redirect(url_for('get_person', person_id=person_id) + tag_filter)
+    if person_id:
+        return redirect(url_for('get_person', person_id=int(person_id)) + tag_filter)
+    return redirect(url_for('dashboard') + tag_filter)
 
 
-@ app.route("/person/<int:person_id>/tag/add", methods=['GET'])
+@ app.route("/tag/add", methods=['GET'])
-@ validate_person
+def add_tag():
-def add_tag(person_id):
+    person_id = request.args.get("person_id")
     tag = request.args.get('tag')
     tag_filter = request.args.get('filter')
-    db.add_tag_for_person(person_id, tag, tag_filter)
+    if person_id:
+        db.add_tag_for_person(person_id, tag, tag_filter)
+    else:
+        db.add_tag_for_dashboard(tag, tag_filter)
     return ""
 
 
-@ app.route("/person/<int:person_id>/tag/<int:tag_id>/delete", methods=['GET'])
+@ app.route("/tag/<int:tag_id>/delete", methods=['GET'])
-@ validate_person
+def delete_tag(tag_id):
-def delete_tag(person_id, tag_id):
+    person_id = request.args.get("person_id")
     tag_filter = request.args.get("filter")
-    db.delete_tag_for_person(person_id=person_id, tag_id=tag_id)
+    if person_id:
-    return redirect(url_for('get_person', person_id=person_id) + tag_filter)
+        db.delete_tag_for_person(person_id=person_id, tag_id=tag_id)
+        return redirect(url_for('get_person', person_id=person_id) + tag_filter)
+    db.delete_tag_for_dashboard(tag_id)
+    return redirect(url_for('dashboard') + tag_filter)
 
 
 @ app.context_processor

db.py

@@ -275,3 +275,24 @@ class DataBase():
     def delete_tag_for_person(self, person_id, tag_id):
         self.execute('DELETE FROM Tag WHERE person_id=%s AND tag_id=%s', [
             person_id, tag_id], commit=True)
+
+    def get_tags_for_dashboard(self):
+        return self.execute("""
+            SELECT
+                T.tag_id AS "TagId",
+                T.person_id AS "PersonId",
+                T.name AS "TagName",
+                T.filter AS "TagFilter"
+            FROM
+                Tag T
+            WHERE
+                T.person_id IS NULL
+            ORDER BY
+                T.name""", [])
+
+    def add_tag_for_dashboard(self, tag_name, tag_filter):
+        self.execute('INSERT INTO Tag (name, filter) VALUES (%s, %s)', [
+                     tag_name, tag_filter], commit=True)
+
+    def delete_tag_for_dashboard(self, tag_id):
+        self.execute('DELETE FROM Tag WHERE tag_id=%s', [tag_id], commit=True)

templates/dashboard.html

@@ -4,6 +4,6 @@
 
 {{ render_partial('partials/page/dashboard.html',
 model=model, people=people, exercises=exercises, min_date=min_date, max_date=max_date,
-selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids) }}
+selected_person_ids=selected_person_ids, selected_exercise_ids=selected_exercise_ids, tags=tags) }}
 
 {% endblock %}

templates/partials/page/dashboard.html

@@ -1,85 +1,92 @@
-<div class="bg-white shadow rounded-lg p-4 w-full mb-4 flex flex-wrap">
+<div class="bg-white shadow rounded-lg p-4 w-full mb-4">
-    <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
+    <div class="flex flex-wrap">
-        <div class="flex flex-wrap -mx-3">
+        <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
-            <div class="w-full px-3">
+            <div class="flex flex-wrap -mx-3">
-                <div class="mb-3 w-full"><label
+                <div class="w-full px-3">
-                        class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                    <div class="mb-3 w-full"><label
-                        for="grid-city">People</label>
+                            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-                    <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
+                            for="grid-city">People</label>
-                        data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
+                        <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
-                        hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
+                            data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
-                        hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
+                            hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
-                        {% for p in people %}
+                            hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
-                        <option value="{{ p['PersonId'] }}">{{
+                            {% for p in people %}
-                            p['Name']
+                            <option value="{{ p['PersonId'] }}">{{
-                            }}</option>
+                                p['Name']
-                        {% endfor %}
+                                }}</option>
-                    </select>
+                            {% endfor %}
+                        </select>
+                    </div>
                 </div>
+                <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ list_to_string(selected_person_ids) | safe}})</script>
             </div>
-            <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ list_to_string(selected_person_ids) | safe}})</script>
         </div>
-    </div>
+        <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
-    <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
+            <div class="flex flex-wrap -mx-3">
-        <div class="flex flex-wrap -mx-3">
+                <div class="w-full px-3">
-            <div class="w-full px-3">
+                    <div class="mb-3 w-full"><label
-                <div class="mb-3 w-full"><label
+                            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
-                        class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                            for="grid-city">Exercises</label>
-                        for="grid-city">Exercises</label>
+                        <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
-                    <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
+                            data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
-                        data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
+                            hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
-                        hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
+                            hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
-                        hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
+                            {% for e in exercises %}
-                        {% for e in exercises %}
+                            <option value="{{ e['ExerciseId'] }}">{{
-                        <option value="{{ e['ExerciseId'] }}">{{
+                                e['Name']
-                            e['Name']
+                                }}</option>
-                            }}</option>
+                            {% endfor %}
-                        {% endfor %}
+                        </select>
-                    </select>
+                    </div>
                 </div>
+                <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ list_to_string(selected_exercise_ids) | safe}})</script>
+            </div>
+        </div>
+        <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
+                class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">Min
+                date</label>
+            <div class="relative">
+                <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"><svg
+                        class="w-5 h-5 text-gray-500 dark:text-gray-400" viewBox="0 0 20 20" aria-hidden="true"
+                        fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
+                        style="--darkreader-inline-fill:currentColor;">
+                        <path
+                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                            clip-rule="evenodd" fill-rule="evenodd"></path>
+                    </svg></div><input
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
+                    hx-get="{{ url_for('dashboard') }}"
+                    hx-include="[name='min_date'],[name='max_date'],[name='person_id'],[name='exercise_id']"
+                    hx-push-url="true" hx-target="#container" hx-trigger="change" name="min_date" type="date"
+                    value="{{ min_date }}">
+            </div>
+        </div>
+        <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
+                class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">Max
+                date</label>
+            <div class="relative">
+                <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"><svg
+                        class="w-5 h-5 text-gray-500 dark:text-gray-400" viewBox="0 0 20 20" aria-hidden="true"
+                        fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
+                        style="--darkreader-inline-fill:currentColor;">
+                        <path
+                            d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                            clip-rule="evenodd" fill-rule="evenodd"></path>
+                    </svg></div><input
+                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
+                    hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container" hx-trigger="change"
+                    name="max_date" type="date" value="{{ max_date }}">
             </div>
-            <script>te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ list_to_string(selected_exercise_ids) | safe}})</script>
-        </div>
-    </div>
-    <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
-            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">Min
-            date</label>
-        <div class="relative">
-            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"><svg
-                    class="w-5 h-5 text-gray-500 dark:text-gray-400" viewBox="0 0 20 20" aria-hidden="true"
-                    fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
-                    style="--darkreader-inline-fill:currentColor;">
-                    <path
-                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                        clip-rule="evenodd" fill-rule="evenodd"></path>
-                </svg></div><input
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
-                hx-get="{{ url_for('dashboard') }}"
-                hx-include="[name='min_date'],[name='max_date'],[name='person_id'],[name='exercise_id']"
-                hx-push-url="true" hx-target="#container" hx-trigger="change" name="min_date" type="date"
-                value="{{ min_date }}">
-        </div>
-    </div>
-    <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
-            class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">Max
-            date</label>
-        <div class="relative">
-            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"><svg
-                    class="w-5 h-5 text-gray-500 dark:text-gray-400" viewBox="0 0 20 20" aria-hidden="true"
-                    fill="currentColor" xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
-                    style="--darkreader-inline-fill:currentColor;">
-                    <path
-                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
-                        clip-rule="evenodd" fill-rule="evenodd"></path>
-                </svg></div><input
-                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
-                hx-get="{{ url_for('dashboard') }}" hx-push-url="true" hx-target="#container" hx-trigger="change"
-                name="max_date" type="date" value="{{ max_date }}">
         </div>
     </div>
+    {% with person_id=None, tags=tags %}
+    {% include 'partials/tags.html' %}
+    {% endwith %}
 </div>
 
 
+
+
 <div class="w-full grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
     {% for p in model['People'] %}
     <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">

templates/partials/page/person.html

@@ -99,81 +99,9 @@
             </div>
         </div>
 
-        <div class="flex w-full flex-wrap justify-center">
+        {% with person_id=person['PersonId'], tags=tags %}
-
+        {% include 'partials/tags.html' %}
-            {% for t in tags %}
+        {% endwith %}
-            <div data-te-chip-init data-te-ripple-init
-                class="[word-wrap: break-word] my-[5px] mr-4 flex h-[32px] cursor-pointer items-center justify-between rounded-[16px] border border-[#9fa6b2] bg-[#eceff1] bg-[transparent] py-0 px-[12px] text-[13px] font-normal normal-case leading-loose text-[#4f4f4f] shadow-none transition-[opacity] duration-300 ease-linear hover:border-[#9fa6b2] hover:!shadow-none dark:text-neutral-200"
-                data-te-ripple-color="dark">
-                <span hx-get="{{ url_for('goto_tag', person_id=person['PersonId']) }}"
-                    hx-vals='{"filter": "{{ t["TagFilter"] }}"}' hx-target="#container" hx-push-url="true">{{
-                    t['TagName'] }}</span>
-
-
-                <span
-                    class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100"
-                    hx-get="{{ url_for('delete_tag', person_id=person['PersonId'], tag_id=t['TagId']) }}"
-                    hx-vals='{"filter": "{{ t["TagFilter"] }}"}' hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest)
-             halt the event
-             call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
-             if result.isConfirmed issueRequest()">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                        stroke="currentColor" class="h-3 w-3">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                    </svg>
-                </span>
-            </div>
-            {% endfor %}
-
-            <div class="flex justify-center space-x-2">
-                <div>
-                    <button type="button" data-te-ripple-init data-te-ripple-color="light"
-                        class="inline-block rounded-full bg-primary p-2 uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
-                        id="add-tag">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                            stroke="currentColor" class="w-5 h-5">
-                            <path stroke-linecap="round" stroke-linejoin="round"
-                                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
-                        </svg>
-
-                    </button>
-                </div>
-            </div>
-        </div>
-        <script>
-            document.querySelector('#add-tag').addEventListener('click', function () {
-                Swal.fire({
-                    title: 'Create a tag',
-                    input: 'text',
-                    inputAttributes: {
-                        autocapitalize: 'off'
-                    },
-                    showCancelButton: true,
-                    confirmButtonText: 'Add',
-                    showLoaderOnConfirm: true,
-                    preConfirm: (tag) => {
-                        return fetch(`{{ url_for('add_tag', person_id=person['PersonId']) }}?tag=${encodeURIComponent(tag)}&filter=${encodeURIComponent(window.location.search)}`)
-                            .then(response => {
-                                if (!response.ok) {
-                                    throw new Error(response.statusText)
-                                }
-                                return response.text()
-                            })
-                            .catch(error => {
-                                Swal.showValidationMessage(
-                                    `Request failed: ${error}`
-                                )
-                            })
-                    },
-                    allowOutsideClick: () => !Swal.isLoading()
-                }).then((result) => {
-                    if (result.isConfirmed) {
-                        htmx.ajax('GET', `{{ url_for('get_person', person_id=person['PersonId']) + '?' + request.query_string.decode() }}`, '#container')
-                    }
-                })
-
-            })
-        </script>
 
         <div class="flex flex-col mt-3">
             <div class="overflow-x-auto rounded-lg">

templates/partials/tags.html

@@ -0,0 +1,77 @@
+<div class="flex w-full flex-wrap justify-center">
+
+    {% for t in tags %}
+    <div data-te-chip-init data-te-ripple-init
+        class="[word-wrap: break-word] my-[5px] mr-4 flex h-[32px] cursor-pointer items-center justify-between rounded-[16px] border border-[#9fa6b2] bg-[#eceff1] bg-[transparent] py-0 px-[12px] text-[13px] font-normal normal-case leading-loose text-[#4f4f4f] shadow-none transition-[opacity] duration-300 ease-linear hover:border-[#9fa6b2] hover:!shadow-none dark:text-neutral-200"
+        data-te-ripple-color="dark">
+        <span hx-get="{{ url_for('goto_tag') }}" {% if person_id %}
+            hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %}
+            hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true">{{
+            t['TagName'] }}</span>
+
+
+        <span
+            class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100"
+            hx-get="{{ url_for('delete_tag', tag_id=t['TagId']) }}" {% if person_id %}
+            hx-vals='{"filter": "{{ t["TagFilter"] }}", "person_id": "{{ person_id }}"}' {% else %}
+            hx-vals='{"filter": "{{ t["TagFilter"] }}"}' {% endif%} hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest)
+     halt the event
+     call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
+     if result.isConfirmed issueRequest()">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="h-3 w-3">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </span>
+    </div>
+    {% endfor %}
+
+    <div class="flex justify-center space-x-2">
+        <div>
+            <button type="button" data-te-ripple-init data-te-ripple-color="light"
+                class="inline-block rounded-full bg-primary p-2 uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+                id="add-tag">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5 h-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                </svg>
+
+            </button>
+        </div>
+    </div>
+</div>
+<script>
+    document.querySelector('#add-tag').addEventListener('click', function () {
+        Swal.fire({
+            title: 'Create a tag',
+            input: 'text',
+            inputAttributes: {
+                autocapitalize: 'off'
+            },
+            showCancelButton: true,
+            confirmButtonText: 'Add',
+            showLoaderOnConfirm: true,
+            preConfirm: (tag) => {
+                return fetch(`{{ url_for('add_tag') }}?tag=${encodeURIComponent(tag)}&filter=${encodeURIComponent(window.location.search)}{{ '&person_id='+person_id if person_id else '' }}`)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error(response.statusText)
+                        }
+                        return response.text()
+                    })
+                    .catch(error => {
+                        Swal.showValidationMessage(
+                            `Request failed: ${error}`
+                        )
+                    })
+            },
+            allowOutsideClick: () => !Swal.isLoading()
+        }).then((result) => {
+            if (result.isConfirmed) {
+                htmx.ajax('GET', `{{ (url_for('get_person', person_id=person_id) if person_id else url_for('dashboard'))  + '?' + request.query_string.decode() }}`, '#container')
+            }
+        })
+
+    })
+</script>