From bd9ac2baee1fe4d0e8d5d3a87d7b27962869a3fd Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Mon, 23 Dec 2024 21:53:39 +0700
Subject: [PATCH] up

---
 tag.html | 171 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 125 insertions(+), 46 deletions(-)
diff --git a/tag.html b/tag.html
index 754ba38..1f651a4 100644
--- a/tag.html
+++ b/tag.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nhập Thẻ</title>
+    <title>Nhập tag</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -13,12 +13,13 @@
         .tags-container {
             display: flex;
             flex-wrap: wrap;
+            align-content: flex-start;
             padding: 5px;
             border: 1px solid #ccc;
             border-radius: 5px;
             width: 100%;
             max-width: 400px;
-            box-sizing: border-box;
+            height: 300px;
             background: #f9f9f9;
         }
 
@@ -26,78 +27,156 @@
             display: flex;
             align-items: center;
             background-color: #e0e0e0;
-            color: #333;
             border-radius: 5px;
-            padding: 0 10px;
             margin: 5px;
-            font-size: 14px;
-            height: 35px;
+            padding: 5px;
+            font-size: 13px;
         }
 
-        .tag .remove-tag {
+        .remove-tag {
             background: none;
             border: none;
             color: gray;
-            font-weight: bold;
+            margin-right: 5px;
             cursor: pointer;
-            padding-left: 0;
+            text-decoration: none;
         }
 
-        .tag .remove-tag:hover {
+        .remove-tag:hover {
             color: #d50000;
         }
+
+        .popup {
+            display: none;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: #fff;
+            padding: 20px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+            z-index: 1000;
+        }
+
+        .popup h3 {
+            margin: 0 0 10px;
+        }
+
+        .close-btn {
+            margin-top: 10px;
+            padding: 5px 10px;
+            background: #007bff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        .close-btn:hover {
+            background: #0056b3;
+        }
     </style>
 </head>
 
 <body>
-    <div class="tags-container" id="tagsContainer">
+    <div class="tags-container" id="tagContainer"></div>
 
+    <div id="categoryPopup" class="popup">
+        <h3>Select Categories</h3>
+        <ul id="categoryList"></ul>
+        <button id="closePopupButton" class="close-btn">Close</button>
     </div>
 
     <script>
-        const tagsContainer = document.getElementById('tagsContainer');
+        function TagManager() {
 
-        // Dữ liệu thẻ
-        let tags = ['Đệm bông ép Olympia', 'Đệm cao su Olympia', 'Đệm foam Olympia', 'Đệm lò xo Olympia', 'Đệm Olympia'];
+            //  tag khởi tạo
+            const initialTags = [
+                { id: 1, name: 'Đệm bông ép Olympia' },
+                { id: 2, name: 'Đệm cao su Olympia' },
+				{ id: 3, name: 'Đệm siêu tốt'},
+				{ id: 4, name: 'Đệm siêu rẻ'},
+            ];
 
-        // Hàm render thẻ
-        function renderTags() {
-            // Xoá các thẻ hiện có
-            tagsContainer.innerHTML = '';
-            tags.forEach((tag, index) => {
-                const tagElement = createTagElement(tag, index);
-                tagsContainer.appendChild(tagElement);
-            });
-        }
+            //  danh sách danh mục
+            const categoryOptions = [
+                { id: 4, name: 'Đệm foam Olympia' },
+                { id: 5, name: 'Đệm lò xo Olympia' },
+                { id: 6, name: 'Đệm Olympia' }
+            ];
 
-        // Hàm tạo phần tử thẻ
-        function createTagElement(tag, index) {
-            const tagElement = document.createElement('div');
-            tagElement.className = 'tag';
-            tagElement.innerHTML = `
-                <button class="remove-tag" data-index="${index}">&times;</button>
-                ${tag}
-            `;
-            return tagElement;
-        }
+            const tagContainer = document.getElementById('tagContainer'); // holder danh sách tag
+            const categoryPopup = document.getElementById('categoryPopup'); // popup hiển thị danh mục
+            const categoryList = document.getElementById('categoryList'); // danh sách các tag trong danh mục
 
-        // Hàm xử lý xóa thẻ
-        function handleRemoveTag(event) {
-            if (event.target.classList.contains('remove-tag')) {
-                const index = event.target.getAttribute('data-index');
-                tags.splice(index, 1);
-                renderTags();
+
+            // hien thị các tag
+            function renderTags(tags) {
+                tagContainer.innerHTML = tags.map(tag => `
+                    <div class="tag">
+                        <a href="javascript:void(0)" class="remove-tag" data-id="${tag.id}">x</a>
+                        ${tag.name}
+                    </div>`).join('');
             }
+
+            //  hiển thị popup
+            function showPopup() {
+                categoryList.innerHTML = categoryOptions.map(cat => `
+                    <li><label><input type="checkbox" value="${cat.id}">${cat.name}</label></li>`).join('');
+                categoryPopup.style.display = 'block';
+            }
+
+            // tất popup và thêm tag vào 
+            function closePopup(tags) {
+                const selectedIds = Array.from(categoryList.querySelectorAll('input:checked'))
+                    .map(input => parseInt(input.value, 10));
+                selectedIds.forEach(id => {
+                    if (!tags.some(tag => tag.id === id)) {
+                        const category = categoryOptions.find(cat => cat.id === id);
+                        if (category) tags.push(category);
+                    }
+                });
+                renderTags(tags);
+                categoryPopup.style.display = 'none';
+            }
+
+            // xóa tag
+            function removeTag(tags, id) {
+                const index = tags.findIndex(tag => tag.id === id);
+                if (index !== -1) tags.splice(index, 1);
+                renderTags(tags);
+            }
+
+            // sự kiện tag
+            function handleTagContainerClick(event) {
+                if (event.target.classList.contains('remove-tag')) {
+                    const id = parseInt(event.target.dataset.id, 10);
+                    removeTag(initialTags, id);
+                } else {
+                    showPopup();
+                }
+            }
+
+            // click vào nút đong tag
+            function handleClosePopupClick() {
+                closePopup(initialTags);
+            }
+
+            // click vào dánh sách tag
+            tagContainer.addEventListener('click', handleTagContainerClick);
+
+            // clik vòa nút đóng tag
+            document.getElementById('closePopupButton').addEventListener('click', handleClosePopupClick);
+
+            // chạy hiển thị danh sách tag
+            renderTags(initialTags);
         }
 
-        // hàm xử lý hiển thị tab và xóa tag
-        function init() {
-            renderTags();
-            tagsContainer.addEventListener('click', handleRemoveTag);
-        }
 
-        // chạy hiển thị tab và xóa tag
-        init();
+        //  chạy
+        TagManager();
     </script>
 </body>
 
