From 66fc7bfaf2fa43d29634c72ca4ec0a66b465703f Mon Sep 17 00:00:00 2001
From: Evgenii Sopov <mrseakg@gmail.com>
Date: Fri, 26 Jun 2020 23:12:49 +0700
Subject: [PATCH 1/5] Implemented add/delete tag for useful_links in admin

---
 fhq-server/CMakeLists.txt                     |   2 +
 .../src/cmd/cmd_handlers_useful_links.cpp     | 116 +++++++++++++-
 .../updates/update_722kt134lq_6c8d4zm6u2.cpp  |  18 +++
 .../updates/update_722kt134lq_6c8d4zm6u2.h    |  11 ++
 web-admin/index.css                           |  25 +++
 web-admin/js/fhq.admin.useful_links.js        | 151 ++++++++++++++----
 web-admin/js/fhq.ws.admin.js                  |  12 ++
 7 files changed, 298 insertions(+), 37 deletions(-)
 create mode 100644 fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.cpp
 create mode 100644 fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.h

diff --git a/fhq-server/CMakeLists.txt b/fhq-server/CMakeLists.txt
index 7ff4c38b..a10d6fa3 100644
--- a/fhq-server/CMakeLists.txt
+++ b/fhq-server/CMakeLists.txt
@@ -201,6 +201,8 @@ list (APPEND WSJCPP_SOURCES "src/storages/updates/update_snwxenqco0_csww6lwcrp.h
 list (APPEND WSJCPP_SOURCES "src/storages/updates/update_snwxenqco0_csww6lwcrp.cpp")
 list (APPEND WSJCPP_SOURCES "src/storages/updates/update_csww6lwcrp_722kt134lq.h")
 list (APPEND WSJCPP_SOURCES "src/storages/updates/update_csww6lwcrp_722kt134lq.cpp")
+list (APPEND WSJCPP_SOURCES "src/storages/updates/update_722kt134lq_6c8d4zm6u2.h")
+list (APPEND WSJCPP_SOURCES "src/storages/updates/update_722kt134lq_6c8d4zm6u2.cpp")
 list (APPEND WSJCPP_SOURCES "src/storages/updates/update0101.h")
 list (APPEND WSJCPP_SOURCES "src/storages/updates/update0101.cpp")
 
diff --git a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
index 8ffc3398..33ce96d5 100644
--- a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
+++ b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
@@ -173,7 +173,7 @@ CmdHandlerUsefulLinksRetrieve::CmdHandlerUsefulLinksRetrieve()
 
     setActivatedFromVersion("0.2.28");
 
-    setAccessUnauthorized(false);
+    setAccessUnauthorized(true);
     setAccessUser(true);
     setAccessAdmin(true);
 
@@ -224,6 +224,23 @@ void CmdHandlerUsefulLinksRetrieve::handle(ModelRequest *pRequest) {
         }
     }
     
+    // tags
+    query.prepare("SELECT * FROM useful_links_tags WHERE usefullinkid = :useful_link_id");
+    query.bindValue(":useful_link_id", nUsefulLinkId);
+
+    if (!query.exec()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+        return;
+    }
+
+    nlohmann::json jsonLinkTags = nlohmann::json::array();
+    while (query.next()) {
+         QSqlRecord record = query.record();
+         std::string sTag = record.value("tagvalue").toString().toHtmlEscaped().toStdString();
+         jsonLinkTags.push_back(sTag);
+    }
+    jsonLink["tags"] = jsonLinkTags;
+
     nlohmann::json jsonResponse;
     jsonResponse["data"] = jsonLink;
     pRequest->sendMessageSuccess(cmd(), jsonResponse);
@@ -264,10 +281,11 @@ void CmdHandlerUsefulLinksAdd::handle(ModelRequest *pRequest) {
     QSqlDatabase db = *(pDatabase->database());
     QSqlQuery query(db);
     // TODO uuid
-    query.prepare("INSERT INTO useful_links(url,description,author,stars,dt) VALUES(:url, :description, :author, 0, NOW())");
+    query.prepare("INSERT INTO useful_links(url,description,author,tags,dt) VALUES(:url, :description, :author, :tags, NOW())");
     query.bindValue(":url", QString::fromStdString(sUrl));
     query.bindValue(":description", QString::fromStdString(sDescription));
     query.bindValue(":author", QString::fromStdString(sAuthor));
+    query.bindValue(":tags", QString::fromStdString(""));
 
     if (!query.exec()) {
         pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
@@ -669,6 +687,8 @@ void CmdHandlerUsefulLinksCommentList::handle(ModelRequest *pRequest) {
 // ---------------------------------------------------------------------
 // Useful Links add comment
 
+REGISTRY_CMD(CmdHandlerUsefulLinksCommentAdd)
+
 CmdHandlerUsefulLinksCommentAdd::CmdHandlerUsefulLinksCommentAdd()
     : CmdHandlerBase("useful_links_comment_add", "Useful Links add comment") {
     
@@ -692,6 +712,8 @@ void CmdHandlerUsefulLinksCommentAdd::handle(ModelRequest *pRequest) {
 // ---------------------------------------------------------------------
 // Useful Links remove comment
 
+REGISTRY_CMD(CmdHandlerUsefulLinksCommentDelete)
+
 CmdHandlerUsefulLinksCommentDelete::CmdHandlerUsefulLinksCommentDelete()
     : CmdHandlerBase("useful_links_comment_delete", "Useful Links remove comment") {
     
@@ -715,6 +737,8 @@ void CmdHandlerUsefulLinksCommentDelete::handle(ModelRequest *pRequest) {
 // ---------------------------------------------------------------------
 // Useful Links List of tags
 
+REGISTRY_CMD(CmdHandlerUsefulLinksTagList)
+
 CmdHandlerUsefulLinksTagList::CmdHandlerUsefulLinksTagList()
     : CmdHandlerBase("useful_links_tag_list", "Useful Links - List of tags") {
     
@@ -735,6 +759,8 @@ void CmdHandlerUsefulLinksTagList::handle(ModelRequest *pRequest) {
 // ---------------------------------------------------------------------
 // Useful Links add tag
 
+REGISTRY_CMD(CmdHandlerUsefulLinksTagAdd)
+
 CmdHandlerUsefulLinksTagAdd::CmdHandlerUsefulLinksTagAdd()
     : CmdHandlerBase("useful_links_tag_add", "Useful Links add tag") {
     
@@ -745,18 +771,56 @@ CmdHandlerUsefulLinksTagAdd::CmdHandlerUsefulLinksTagAdd()
     setAccessAdmin(true);
 
     requireIntegerParam("useful_link_id", "Id of useful link");
-    requireStringParam("tagname", "tag name");
+    requireStringParam("tag", "Tag Value");
 }
 
 // ---------------------------------------------------------------------
 
 void CmdHandlerUsefulLinksTagAdd::handle(ModelRequest *pRequest) {
-    pRequest->sendMessageError(cmd(), WsjcppError(501, "Not Implemented Yet"));
+    int nUsefulLinkId = pRequest->getInputInteger("useful_link_id", 0);
+    std::string sTagValue = pRequest->getInputString("tag", "");
+    sTagValue = WsjcppCore::trim(sTagValue);
+    if (sTagValue == "") {
+        pRequest->sendMessageError(cmd(), WsjcppError(400, "tag could not be empty"));
+        return;
+    }
+
+    EmployDatabase *pDatabase = findWsjcppEmploy<EmployDatabase>();
+
+    QSqlDatabase db = *(pDatabase->database());
+    QSqlQuery query(db);
+
+    // TODO get from employ
+    query.prepare("SELECT * FROM useful_links_tags WHERE usefullinkid = :useful_link_id AND tagvalue = :tagvalue");
+    query.bindValue(":useful_link_id", nUsefulLinkId);
+    query.bindValue(":tagvalue", QString::fromStdString(sTagValue));
+
+    if (!query.exec()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+        return;
+    }
+
+    if (query.next()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(400, "TAG_ALREADY_EXISTS"));
+        return;
+    } else {
+        query.prepare("INSERT INTO useful_links_tags(usefullinkid, tagvalue) VALUES(:useful_link_id, :tagvalue)");
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        query.bindValue(":tagvalue", QString::fromStdString(sTagValue));
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
+    }
+    nlohmann::json jsonResponse;
+    pRequest->sendMessageSuccess(cmd(), jsonResponse);
 }
 
 // ---------------------------------------------------------------------
 // Useful Links remove tag
 
+REGISTRY_CMD(CmdHandlerUsefulLinksTagDelete)
+
 CmdHandlerUsefulLinksTagDelete::CmdHandlerUsefulLinksTagDelete()
     : CmdHandlerBase("useful_links_tag_delete", "Useful Links remove tag") {
     
@@ -765,19 +829,55 @@ CmdHandlerUsefulLinksTagDelete::CmdHandlerUsefulLinksTagDelete()
     setAccessUnauthorized(false);
     setAccessUser(false);
     setAccessAdmin(true);
-
-    requireIntegerParam("useful_link_tag_id", "Tag Id for useful link");
+    
+    requireIntegerParam("useful_link_id", "Useful Link Id");
+    requireStringParam("tag", "Tag Value");
 }
 
 // ---------------------------------------------------------------------
 
 void CmdHandlerUsefulLinksTagDelete::handle(ModelRequest *pRequest) {
-    pRequest->sendMessageError(cmd(), WsjcppError(501, "Not Implemented Yet"));
+    int nUsefulLinkId = pRequest->getInputInteger("useful_link_id", 0);
+    std::string sTagValue = pRequest->getInputString("tag", "");
+    sTagValue = WsjcppCore::trim(sTagValue);
+    if (sTagValue == "") {
+        pRequest->sendMessageError(cmd(), WsjcppError(400, "tag could not be empty"));
+        return;
+    }
+
+    EmployDatabase *pDatabase = findWsjcppEmploy<EmployDatabase>();
+
+    QSqlDatabase db = *(pDatabase->database());
+    QSqlQuery query(db);
+
+    // TODO get from employ
+    query.prepare("SELECT * FROM useful_links_tags WHERE usefullinkid = :useful_link_id AND tagvalue = :tagvalue");
+    query.bindValue(":useful_link_id", nUsefulLinkId);
+    query.bindValue(":tagvalue", QString::fromStdString(sTagValue));
+
+    if (!query.exec()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+        return;
+    }
+
+    if (query.next()) {
+        query.prepare("DELETE FROM useful_links_tags WHERE usefullinkid = :useful_link_id AND tagvalue = :tagvalue");
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        query.bindValue(":tagvalue", QString::fromStdString(sTagValue));
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
+    }
+    nlohmann::json jsonResponse;
+    pRequest->sendMessageSuccess(cmd(), jsonResponse);
 }
 
 // ---------------------------------------------------------------------
 // Useful Links propose link by user
 
+REGISTRY_CMD(CmdHandlerUsefulLinksUserPropose)
+
 CmdHandlerUsefulLinksUserPropose::CmdHandlerUsefulLinksUserPropose()
     : CmdHandlerBase("useful_links_user_propose", "Useful Links propose link by user") {
     
@@ -801,6 +901,8 @@ void CmdHandlerUsefulLinksUserPropose::handle(ModelRequest *pRequest) {
 // ---------------------------------------------------------------------
 // Useful Links propose link by user
 
+REGISTRY_CMD(CmdHandlerUsefulLinksUserProposeApprove)
+
 CmdHandlerUsefulLinksUserProposeApprove::CmdHandlerUsefulLinksUserProposeApprove()
     : CmdHandlerBase("useful_links_user_propose_approve", "Useful Links Approve propose link by admin") {
     
diff --git a/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.cpp b/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.cpp
new file mode 100644
index 00000000..4f5d4830
--- /dev/null
+++ b/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.cpp
@@ -0,0 +1,18 @@
+#include "update_722kt134lq_6c8d4zm6u2.h"
+
+REGISTRY_WSJCPP_STORAGE_UPDATE(Update_722kt134lq_6c8d4zm6u2)
+
+Update_722kt134lq_6c8d4zm6u2::Update_722kt134lq_6c8d4zm6u2()
+    : WsjcppStorageUpdateBase("722kt134lq", "6c8d4zm6u2", "TODO") {
+    
+    WsjcppStorageModifyTable *useful_links_tags = modifyTable("useful_links_tags");
+    useful_links_tags->dropColumn("tags");
+    useful_links_tags->dropColumn("counter");
+
+    WsjcppStorageModifyTable *useful_links = modifyTable("useful_links");
+    useful_links->addColumn("tags").string(1024).notNull().defaultValue("");
+    useful_links->dropColumn("stars");
+
+    // fill the array with struct changes
+}
+
diff --git a/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.h b/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.h
new file mode 100644
index 00000000..b0375a1d
--- /dev/null
+++ b/fhq-server/src/storages/updates/update_722kt134lq_6c8d4zm6u2.h
@@ -0,0 +1,11 @@
+#ifndef UPDATE_722KT134LQ_6C8D4ZM6U2_H
+#define UPDATE_722KT134LQ_6C8D4ZM6U2_H
+
+#include <wsjcpp_storages.h>
+
+class Update_722kt134lq_6c8d4zm6u2 : public WsjcppStorageUpdateBase {
+    public:
+        Update_722kt134lq_6c8d4zm6u2();
+};
+
+#endif // UPDATE_722KT134LQ_6C8D4ZM6U2_H
diff --git a/web-admin/index.css b/web-admin/index.css
index 75c18139..0341aee5 100644
--- a/web-admin/index.css
+++ b/web-admin/index.css
@@ -27,3 +27,28 @@ pre {
     cursor: pointer;
 }
 
+.tag-item {
+    display: inline-block;
+    padding: 10px;
+    background-color: #000;
+    color: #fff;
+    border-radius: 20px;
+    padding-left: 20px;
+    margin-right: 10px;
+}
+
+.tag-item-remove {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background-color: red;
+    color: #000;
+    border-radius: 20px;
+    text-align: center;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+.fhq-card {
+
+}
\ No newline at end of file
diff --git a/web-admin/js/fhq.admin.useful_links.js b/web-admin/js/fhq.admin.useful_links.js
index b12d8d98..40d6fdb2 100644
--- a/web-admin/js/fhq.admin.useful_links.js
+++ b/web-admin/js/fhq.admin.useful_links.js
@@ -120,7 +120,7 @@ fhq.usefulLinkDelete = function(el)  {
     })
 };
 
-fhq.usefulLinksAdd = function()  {
+fhq.usefulLinksCreateAndNew = function()  {
     fhq.showLoader();
     $('#error_info').hide();
     var data = {};
@@ -130,7 +130,27 @@ fhq.usefulLinksAdd = function()  {
 
     fhq.ws.useful_links_add(data).done(function(r){
         fhq.hideLoader();
-        fhq.pages['useful_links']();
+        fhq.pages['useful_links_add']();
+    }).fail(function(err){
+        fhq.hideLoader();
+        console.error(err);
+        $('#error_info').show();
+        $('#error_info .alert').html('ERROR: ' + err.error);
+    })
+};
+
+fhq.usefulLinksCreateAndEdit = function()  {
+    fhq.showLoader();
+    $('#error_info').hide();
+    var data = {};
+    data["url"] = $("#useful_link_url").val();
+    data["description"] = $("#useful_link_description").val();
+    data["author"] = '';
+
+    fhq.ws.useful_links_add(data).done(function(r){
+        console.log(r);
+        fhq.hideLoader();
+        fhq.pages['useful_links_edit'](parseInt(r.data.id));
     }).fail(function(err){
         fhq.hideLoader();
         console.error(err);
@@ -163,7 +183,8 @@ fhq.pages['useful_links_add'] = function(){
         + '            <div class="form-group row">'
         + '                <label class="col-sm-2 col-form-label"></label>'
         + '             <div class="col-sm-10">'
-        + '                    <div class="btn btn-secondary" onclick="fhq.usefulLinksAdd();">Create</div>'
+        + '                    <div class="btn btn-secondary" onclick="fhq.usefulLinksCreateAndNew();">Create && New</div>'
+        + '                    <div class="btn btn-secondary" onclick="fhq.usefulLinksCreateAndEdit();">Create && Edit</div>'
         + '                </div>'
         + '            </div>'
         + '            <div class="form-group row" id="error_info" style="display: none">'
@@ -187,6 +208,27 @@ fhq.usefulLinksUpdate = function(useful_link_id)  {
     data["description"] = $("#useful_link_description").val();
     data["author"] = '';
 
+    fhq.ws.useful_links_update(data).done(function(r){
+        fhq.hideLoader();
+        fhq.pages['useful_links_edit'](useful_link_id);
+    }).fail(function(err){
+        fhq.hideLoader();
+        console.error(err);
+        $('#error_info').show();
+        $('#error_info .alert').html('ERROR: ' + err.error);
+    })
+};
+
+
+fhq.usefulLinksUpdateAndClose = function(useful_link_id)  {
+    fhq.showLoader();
+    $('#error_info').hide();
+    var data = {};
+    data["useful_link_id"] = useful_link_id;
+    data["url"] = $("#useful_link_url").val();
+    data["description"] = $("#useful_link_description").val();
+    data["author"] = '';
+
     fhq.ws.useful_links_update(data).done(function(r){
         fhq.hideLoader();
         fhq.pages['useful_links']();
@@ -211,42 +253,91 @@ fhq.pages['useful_links_edit'] = function(useful_link_id){
     fhq.hideLoader();
     el.html(''
         + '<div class="card">'
-        + '        <div class="card-header">Update useful link</div>'
-        + '        <div class="card-body">'
-        + '            <div class="form-group row">'
-        + '                <label for="mail_to" class="col-sm-2 col-form-label">Link</label>'
-        + '             <div class="col-sm-10">'
-        + '                    <input type="email" class="form-control" value="" id="useful_link_url">'
-        + '                </div>'
-        + '            </div>'
-        + '            <div class="form-group row">'
-        + '                <label for="mail_body" class="col-sm-2 col-form-label">Description</label>'
-        + '             <div class="col-sm-10">'
-        + '                    <textarea class="form-control" style="height: 220px;" id="useful_link_description"></textarea>'
-        + '                </div>'
-        + '            </div>'
-        + '            <div class="form-group row">'
-        + '                <label class="col-sm-2 col-form-label"></label>'
-        + '             <div class="col-sm-10">'
-        + '                    <div class="btn btn-secondary" onclick="fhq.usefulLinksUpdate(' + useful_link_id + ');">Update</div>'
-        + '                </div>'
-        + '            </div>'
-        + '            <div class="form-group row" id="error_info" style="display: none">'
-        + '                <label class="col-sm-2 col-form-label"></label>'
-        + '             <div class="col-sm-10">'
-        + '                    <div class="alert alert-danger"></div>'
-        + '                </div>'
-        + '            </div>'
-        + '        </div>'
+        + '     <div class="card-header">Update useful link</div>'
+        + '     <div class="card-body">'
+        + '         <div class="form-group row">'
+        + '             <label for="mail_to" class="col-sm-2 col-form-label">Link</label>'
+        + '          <div class="col-sm-10">'
+        + '                 <input type="email" class="form-control" value="" id="useful_link_url">'
+        + '             </div>'
+        + '         </div>'
+        + '         <div class="form-group row">'
+        + '             <label for="mail_body" class="col-sm-2 col-form-label">Description</label>'
+        + '          <div class="col-sm-10">'
+        + '                 <textarea class="form-control" style="height: 220px;" id="useful_link_description"></textarea>'
+        + '             </div>'
+        + '         </div>'
+        + '         <div class="form-group row">'
+        + '             <label class="col-sm-2 col-form-label"></label>'
+        + '          <div class="col-sm-10">'
+        + '                 <div class="btn btn-secondary" onclick="fhq.usefulLinksUpdate(' + useful_link_id + ');">Update</div>'
+        + '                 <div class="btn btn-secondary" onclick="fhq.usefulLinksUpdateAndClose(' + useful_link_id + ');">Update && Close</div>'
+        + '             </div>'
+        + '         </div>'
+        + '         <div class="form-group row" id="error_info" style="display: none">'
+        + '             <label class="col-sm-2 col-form-label"></label>'
+        + '          <div class="col-sm-10">'
+        + '                 <div class="alert alert-danger"></div>'
+        + '             </div>'
+        + '         </div>'
+        + '     </div>'
         + '</div>'
+        + '<hr>'
+        + '<h2>TAGS:</h2><br>'
+        + '<div id="useful_links_tags"></div><br><br>'
+        + '<input id="useful_links_addtag_value" type="text" value=""/>'
+        + '<button class="btn btn-default" id="useful_links_addtag_btn">Add</button>'
+        + '<div class="alert alert-danger" style="display: none" id="useful_links_addtag_error"></div>'
+        + '<hr>'
     );
 
+    $('#useful_links_addtag_btn').unbind().bind('click', function() {
+        $('#useful_links_addtag_error').hide();
+        fhq.ws.useful_links_tag_add({
+            "useful_link_id": useful_link_id,
+            "tag": $('#useful_links_addtag_value').val(),
+        }).done(function(r){
+            console.log(r)
+            $('#useful_links_addtag_value').val("")
+            fhq.pages['useful_links_edit'](useful_link_id);
+        }).fail(function(err) {
+            console.log(err)
+            $('#useful_links_addtag_error').html(err.error);
+            $('#useful_links_addtag_error').show();
+        })
+    })
+
+    function useful_link_tag_remove(e) {
+        var tagval = $(this).attr('tagval');
+        fhq.ws.useful_links_tag_delete({
+            "useful_link_id": useful_link_id,
+            "tag": tagval,
+        }).done(function(r){
+            console.log(r)
+            fhq.pages['useful_links_edit'](useful_link_id);
+        }).fail(function(err) {
+            console.log(err)
+            $('#useful_links_addtag_error').html(err.error);
+            $('#useful_links_addtag_error').show();
+        })
+    }
+
     fhq.ws.useful_links_retrieve({
         "useful_link_id": useful_link_id
     }).done(function(r){
         console.log(r)
         $('#useful_link_url').val(r.data.url)
         $('#useful_link_description').html(r.data.description)
+        $('#useful_links_tags').html('');
+        for (var i in r.data.tags) {
+            $('#useful_links_tags').append(''
+                + '<div class="tag-item">' + r.data.tags[i] + ' '
+                + '<div class="tag-item-remove tag-remove" tagval="' + r.data.tags[i] + '">-</div>'
+                + '</div>'
+            );
+        }
+
+        $('.tag-remove').unbind().bind('click', useful_link_tag_remove)
 
     }).fail(function(err) {
         console.log(err)
diff --git a/web-admin/js/fhq.ws.admin.js b/web-admin/js/fhq.ws.admin.js
index 40eccf21..011a53e7 100644
--- a/web-admin/js/fhq.ws.admin.js
+++ b/web-admin/js/fhq.ws.admin.js
@@ -622,4 +622,16 @@ fhq.ws.useful_links_update = function(data){
     data = data || {};
     data.cmd = 'useful_links_update';
     return fhq.ws.send(data);
+}
+
+fhq.ws.useful_links_tag_add = function(data){
+    data = data || {};
+    data.cmd = 'useful_links_tag_add';
+    return fhq.ws.send(data);
+}
+
+fhq.ws.useful_links_tag_delete = function(data){
+    data = data || {};
+    data.cmd = 'useful_links_tag_delete';
+    return fhq.ws.send(data);
 }
\ No newline at end of file

From 8276340977113c1c4827fbbb022b83661b76ff4a Mon Sep 17 00:00:00 2001
From: Evgenii Sopov <mrseakg@gmail.com>
Date: Fri, 26 Jun 2020 23:15:19 +0700
Subject: [PATCH 2/5] Updated version to v0.2.30

---
 fhq-server/src.wsjcpp/CMakeLists.txt        | 2 +-
 fhq-server/unit-tests.wsjcpp/CMakeLists.txt | 4 ++--
 fhq-server/wsjcpp.yml                       | 2 +-
 fhq-web-user/package.json                   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/fhq-server/src.wsjcpp/CMakeLists.txt b/fhq-server/src.wsjcpp/CMakeLists.txt
index ae1977b4..f1867971 100644
--- a/fhq-server/src.wsjcpp/CMakeLists.txt
+++ b/fhq-server/src.wsjcpp/CMakeLists.txt
@@ -1,7 +1,7 @@
 # Automaticly generated by wsjcpp@v0.1.5
 cmake_minimum_required(VERSION 3.0)
 
-add_definitions(-DWSJCPP_APP_VERSION="v0.2.29")
+add_definitions(-DWSJCPP_APP_VERSION="v0.2.30")
 add_definitions(-DWSJCPP_APP_NAME="fhq-server")
 
 if (${CMAKE_SYSTEM_NAME} MATCHES "Darwin")
diff --git a/fhq-server/unit-tests.wsjcpp/CMakeLists.txt b/fhq-server/unit-tests.wsjcpp/CMakeLists.txt
index 9a4c8e65..1f258a8e 100644
--- a/fhq-server/unit-tests.wsjcpp/CMakeLists.txt
+++ b/fhq-server/unit-tests.wsjcpp/CMakeLists.txt
@@ -2,7 +2,7 @@
 cmake_minimum_required(VERSION 3.0)
 
 project(unit-tests C CXX)
-add_definitions(-DWSJCPP_APP_VERSION="ut-v0.2.29")
+add_definitions(-DWSJCPP_APP_VERSION="ut-v0.2.30")
 add_definitions(-DWSJCPP_APP_NAME="unit-tests-fhq-server")
 
 if (${CMAKE_SYSTEM_NAME} MATCHES "Darwin")
@@ -95,7 +95,7 @@ list (APPEND WSJCPP_INCLUDE_DIRS "../src.wsjcpp/wsjcpp_parse_conf/")
 list (APPEND WSJCPP_SOURCES "../src.wsjcpp/wsjcpp_parse_conf/wsjcpp_parse_conf.cpp")
 list (APPEND WSJCPP_SOURCES "../src.wsjcpp/wsjcpp_parse_conf/wsjcpp_parse_conf.h")
 
-# fhq-server:v0.2.29
+# fhq-server:v0.2.30
 list (APPEND WSJCPP_INCLUDE_DIRS "../src")
 list (APPEND WSJCPP_SOURCES "../src/core/fallen.cpp")
 list (APPEND WSJCPP_SOURCES "../src/core/fallen.h")
diff --git a/fhq-server/wsjcpp.yml b/fhq-server/wsjcpp.yml
index 46d7a0d7..316080fc 100644
--- a/fhq-server/wsjcpp.yml
+++ b/fhq-server/wsjcpp.yml
@@ -3,7 +3,7 @@ cmake_minimum_required: 3.0
 cmake_cxx_standard: 11
 
 name: "fhq-server"
-version: "v0.2.29"
+version: "v0.2.30"
 description: "This is an open source platform for competitions of computer security."
 issues: "https://github.com/freehackquest/fhq-server/issues"
 
diff --git a/fhq-web-user/package.json b/fhq-web-user/package.json
index 2379678e..b4757f8b 100644
--- a/fhq-web-user/package.json
+++ b/fhq-web-user/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fhq-web-user",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

From 59678e2c324bd9ba6aa48956881a700af1609f31 Mon Sep 17 00:00:00 2001
From: Evgenii Sopov <mrseakg@gmail.com>
Date: Fri, 26 Jun 2020 23:49:15 +0700
Subject: [PATCH 3/5] Renamed and update client library

---
 README.md                      |  2 +-
 fhq-web-user/angular.json      |  2 +-
 fhq-web-user/package-lock.json | 12 ++++++------
 fhq-web-user/package.json      |  2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index ece6c6d2..23654ad8 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,7 @@ Backend && Frontend for FreeHackQuest on Qt and WebSockets
 | -------------- | ------------- |
 | fhq-server     | [ubuntu/ppa](https://launchpad.net/~freehackquest/+archive/ubuntu/fhq-server)  |
 | fhq-server     | [![Docker Pulls](https://img.shields.io/docker/pulls/freehackquest/fhq-server.svg)](https://hub.docker.com/r/freehackquest/fhq-server/)  |
-| client library | [![npm version](https://badge.fury.io/js/libfhqcli-web-js.svg)](https://badge.fury.io/js/libfhqcli-web-js) |
+| client library | [![npm version](https://badge.fury.io/js/freehackquest-libclient-js.svg)](https://badge.fury.io/js/freehackquest-libclient-web-js) |
 | client library | [![PyPI version](https://badge.fury.io/py/libfreehackquestclient.svg)](https://badge.fury.io/py/libfreehackquestclient) |
 | frontend       | [github/web](https://github.com/freehackquest/frontend) |
 
diff --git a/fhq-web-user/angular.json b/fhq-web-user/angular.json
index 4e9a0b3a..c1c78ac7 100644
--- a/fhq-web-user/angular.json
+++ b/fhq-web-user/angular.json
@@ -31,7 +31,7 @@
               "node_modules/highlight.js/styles/dark.css"
             ],
             "scripts": [
-              "node_modules/libfhqcli-web-js/dist/libfhqcli-web-js.js",
+              "node_modules/freehackquest-libclient-web-js/dist/freehackquest-libclient-web-js.js",
               "node_modules/jquery/dist/jquery.slim.min.js",
               "node_modules/popper.js/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.bundle.js",
diff --git a/fhq-web-user/package-lock.json b/fhq-web-user/package-lock.json
index 48051e98..b625bd1a 100644
--- a/fhq-web-user/package-lock.json
+++ b/fhq-web-user/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fhq-web-user",
-  "version": "0.2.29",
+  "version": "0.2.30",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4049,6 +4049,11 @@
         "map-cache": "^0.2.2"
       }
     },
+    "freehackquest-libclient-web-js": {
+      "version": "0.2.30",
+      "resolved": "https://registry.npmjs.org/freehackquest-libclient-web-js/-/freehackquest-libclient-web-js-0.2.30.tgz",
+      "integrity": "sha512-5XaY7eByxnuhFWgnLlaqomoVAliKnih0bJ47fEx4q18sXSEmeL4GuOnbpAv1VrVXJyl5dUkPHTxYNTrQAT0/Mw=="
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -6255,11 +6260,6 @@
         }
       }
     },
-    "libfhqcli-web-js": {
-      "version": "0.2.29",
-      "resolved": "https://registry.npmjs.org/libfhqcli-web-js/-/libfhqcli-web-js-0.2.29.tgz",
-      "integrity": "sha512-VO26NbmVgvAqD4MUkbEJ/JgMd4ftaV3WImKLy0fX9VdPezB4/xEOX1ha3b1U/QNOuynz8Q60RG6BpCLX8hOtgQ=="
-    },
     "license-webpack-plugin": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/license-webpack-plugin/-/license-webpack-plugin-2.1.1.tgz",
diff --git a/fhq-web-user/package.json b/fhq-web-user/package.json
index b4757f8b..015797cc 100644
--- a/fhq-web-user/package.json
+++ b/fhq-web-user/package.json
@@ -29,10 +29,10 @@
     "bootstrap": "~4.5.0",
     "core-js": "^3.4.8",
     "font-awesome": "^4.7.0",
+    "freehackquest-libclient-web-js": "^0.2.30",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.16.2",
     "jquery": "^3.5.0",
-    "libfhqcli-web-js": "^0.2.29",
     "marked": "^0.7.0",
     "ng2-simplemde": "^2.1.0",
     "ngx-ace-wrapper": "^8.0.0",

From d9d0f448a703355e65efa4ce964429e388db7fd6 Mon Sep 17 00:00:00 2001
From: Evgenii Sopov <mrseakg@gmail.com>
Date: Sat, 27 Jun 2020 00:59:17 +0700
Subject: [PATCH 4/5] Prepared tag filter for user

---
 .../src/cmd/cmd_handlers_useful_links.cpp     | 31 ++++++++++-
 fhq-web-user/src/app/app.module.ts            |  2 +
 .../useful-links/useful-links.component.html  | 23 ++++----
 .../useful-links/useful-links.component.ts    | 53 +++++++++++++++++--
 web-admin/js/fhq.admin.useful_links.js        |  1 -
 5 files changed, 92 insertions(+), 18 deletions(-)

diff --git a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
index 33ce96d5..3b2ed2b4 100644
--- a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
+++ b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
@@ -21,6 +21,7 @@ CmdHandlerUsefulLinksList::CmdHandlerUsefulLinksList()
     setAccessAdmin(true);
 
     optionalStringParam("filter", "Filter by word");
+    optionalStringParam("filter_by_tag", "Filter by tag");
     optionalIntegerParam("page_index", "Page Index");
     optionalIntegerParam("page_size", "Page Size (default 10)");
     
@@ -87,6 +88,7 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
     bool bIsAdmin = pRequest->isAdmin();
 
     std::string sFilter = pRequest->getInputString("filter", "");
+    std::string sFilterByTag = pRequest->getInputString("filter_by_tag", "");
     int nPageIndex = pRequest->getInputInteger("page_index", 0);
     int nPageSize = pRequest->getInputInteger("page_size", 10);
     int nLength = 0;
@@ -96,6 +98,9 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
     if (sFilter != "") {
         queryFilters.like({"url", "description"}, sFilter);
     }
+    if (sFilterByTag != "") {
+        WsjcppLog::info(TAG, "sFilterByTag = " + sFilterByTag);
+    }
     QString sWhere = "";
 
     EmployDatabase *pDatabase = findWsjcppEmploy<EmployDatabase>();
@@ -753,7 +758,31 @@ CmdHandlerUsefulLinksTagList::CmdHandlerUsefulLinksTagList()
 // ---------------------------------------------------------------------
 
 void CmdHandlerUsefulLinksTagList::handle(ModelRequest *pRequest) {
-    pRequest->sendMessageError(cmd(), WsjcppError(501, "Not Implemented Yet"));
+
+    EmployDatabase *pDatabase = findWsjcppEmploy<EmployDatabase>();
+
+    QSqlDatabase db = *(pDatabase->database());
+    QSqlQuery query(db);
+
+    // TODO get from employ
+    query.prepare("SELECT tagvalue, COUNT(*) AS cnt FROM `useful_links_tags` GROUP BY tagvalue");
+
+    if (!query.exec()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+        return;
+    }
+
+    nlohmann::json jsonData = nlohmann::json::array();
+    while (query.next()) {
+        QSqlRecord record = query.record();
+        nlohmann::json jsonTagInfo;
+        jsonTagInfo["tag"] = record.value("tagvalue").toString().toHtmlEscaped().toStdString();
+        jsonTagInfo["counter"] = record.value("cnt").toInt();
+        jsonData.push_back(jsonTagInfo);
+    }
+    nlohmann::json jsonResponse;
+    jsonResponse["data"] = jsonData;
+    pRequest->sendMessageSuccess(cmd(), jsonResponse);
 }
 
 // ---------------------------------------------------------------------
diff --git a/fhq-web-user/src/app/app.module.ts b/fhq-web-user/src/app/app.module.ts
index a54304c1..34c2f671 100644
--- a/fhq-web-user/src/app/app.module.ts
+++ b/fhq-web-user/src/app/app.module.ts
@@ -14,6 +14,7 @@ import {
   MatProgressBarModule,
   MatSnackBarModule,
   MatBadgeModule,
+  MatChipsModule,
   MatRippleModule
 } from '@angular/material';
 
@@ -173,6 +174,7 @@ const l10nConfig: L10nConfig = {
     MatProgressBarModule,
     MatSnackBarModule,
     MatBadgeModule,
+    MatChipsModule,
     MatRippleModule
   ],
   exports: [
diff --git a/fhq-web-user/src/app/pages/useful-links/useful-links.component.html b/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
index 7816cd3e..ad6d56e5 100644
--- a/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
+++ b/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
@@ -1,5 +1,15 @@
 <h1 l10nTranslate>usefulLinks</h1>
 
+<mat-chip-list>
+  <mat-chip 
+    *ngFor="let tag of tagList" 
+    (click)="applyFilterByTag(tag.name)"
+    [selected]="tag.name == filterByTag"
+  >
+    {{ tag.name }} ({{ tag.counter }})
+  </mat-chip>
+</mat-chip-list>
+
 <mat-form-field class="usefullinks-search-form-field">
   <input
     matInput
@@ -30,19 +40,10 @@ <h1 l10nTranslate>usefulLinks</h1>
   </mat-drawer>
   <mat-drawer-content>
     <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 useful-links-table">
-
-      <ng-container matColumnDef="idUsefulLink">
-        <th mat-header-cell *matHeaderCellDef>#</th>
-        <td mat-cell *matCellDef="let element"> 
-          {{ element.id }}
-        </td>
-      </ng-container>
-
       <ng-container matColumnDef="usefulLinkData">
         <th mat-header-cell *matHeaderCellDef l10nTranslate>usefulLinks</th>
         <td mat-cell *matCellDef="let element">
-          
-
+          <small>[usefullink#{{ element.id }}]</small> <br>
           <button mat-stroked-button disabled *ngIf="element.userClicks > 0">
             <mat-icon aria-hidden="false">mouse</mat-icon>
             {{ element.userClicksLabel }}
@@ -57,8 +58,6 @@ <h1 l10nTranslate>usefulLinks</h1>
             target="_blank"
           >{{ element.link }}</a> 
 
-          
-
           <button mat-stroked-button class="useful-links-left-btn" *ngIf="!element.favorite && _fhq.isAuthorized" (click)="addToFavorite(element.id)">
             <mat-icon aria-hidden="false">star</mat-icon>
             Favorite ({{ element.userFavorites }})
diff --git a/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts b/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
index 05b813fe..2213e84e 100644
--- a/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
+++ b/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
@@ -20,6 +20,11 @@ export interface UsefulLinkElement {
   tags: Array<string>;
 }
 
+export interface UsefulLinkTag {
+  name: string;
+  counter: number;
+}
+
 @Component({
   selector: 'app-useful-links',
   templateUrl: './useful-links.component.html',
@@ -33,6 +38,10 @@ export class UsefulLinksComponent implements OnInit {
   pageSize: number = 5;
   length: number = 0;
   pageSizeOptions = [5, 10, 25, 50];
+
+  tagList: UsefulLinkTag[] = [];
+  filterByTag: string = "";
+
   errorMessage: string = null;
 
   searchValue: String = '';
@@ -40,7 +49,7 @@ export class UsefulLinksComponent implements OnInit {
   formCtrlSub: Subscription;
 
   dataSource = new MatTableDataSource<UsefulLinkElement>();
-  displayedColumns: string[] = ['idUsefulLink', 'usefulLinkData'];
+  displayedColumns: string[] = ['usefulLinkData'];
 
   constructor(
     private _spinner: SpinnerService,
@@ -128,10 +137,12 @@ export class UsefulLinksComponent implements OnInit {
 
   updatePage() {
     this._spinner.show();
+    this.loadListOftags();
     this._fhq.api().useful_links_list({
       "page_index": this.pageIndex,
       "page_size": this.pageSize,
       "filter": this.searchValue,
+      "filter_by_tag": this.filterByTag,
     })
       .done((r: any) => this.successUsefulLinksList(r))
       .fail((err: any) => this.errorUsefulLinksList(err));
@@ -147,9 +158,9 @@ export class UsefulLinksComponent implements OnInit {
   }
 
   prepareUserClicksLabel(n: number) {
-    console.log("prepareUserClicksLabel", n)
+    // console.log("prepareUserClicksLabel", n)
     if (n >= 1000 && n < 1000000) {
-      console.log("prepareUserClicksLabel > 999 ", n)
+      // console.log("prepareUserClicksLabel > 999 ", n)
       return Math.floor(n / 1000) + "k";
     } else if (n >= 1000000) {
       return Math.floor(n / 1000000) + "M";
@@ -246,11 +257,45 @@ export class UsefulLinksComponent implements OnInit {
   }
 
   linkClicked(id: number) {
-    console.log("linkClicked", id );
+    // console.log("linkClicked", id );
     this._fhq.api().useful_links_clicked({
       "useful_link_id": id
     })
       .done((r: any) => this.successUsefulLinkClicked(r))
       .fail((err: any) => this.errorUsefulLinkClicked(err));
   }
+
+  successLoadListOftags(r: any) {
+    // console.log("successLoadListOftags", r);
+    this.tagList = [];
+    r.data.forEach(el => {
+      this.tagList.push({
+        name: el.tag,
+        counter: el.counter,
+      })
+    });
+    this._cdr.detectChanges();
+  }
+
+  errorLoadListOftags(err: any) {
+    console.error("errorLoadListOftags", err);
+    // this._spinner.hide();
+  }
+
+  loadListOftags() {
+    this._fhq.api().useful_links_tag_list({
+      // nothing yet
+    })
+      .done((r: any) => this.successLoadListOftags(r))
+      .fail((err: any) => this.errorLoadListOftags(err));
+  }
+
+  applyFilterByTag(tag: string) {
+    if (this.filterByTag == tag) {
+      this.filterByTag = "";
+    } else {
+      this.filterByTag = tag;
+    }
+    this.updatePage();
+  }
 }
diff --git a/web-admin/js/fhq.admin.useful_links.js b/web-admin/js/fhq.admin.useful_links.js
index 40d6fdb2..aa32540e 100644
--- a/web-admin/js/fhq.admin.useful_links.js
+++ b/web-admin/js/fhq.admin.useful_links.js
@@ -219,7 +219,6 @@ fhq.usefulLinksUpdate = function(useful_link_id)  {
     })
 };
 
-
 fhq.usefulLinksUpdateAndClose = function(useful_link_id)  {
     fhq.showLoader();
     $('#error_info').hide();

From ffe07ba0bc025036aa72cd633161aa4410b7d869 Mon Sep 17 00:00:00 2001
From: Evgenii Sopov <mrseakg@gmail.com>
Date: Sat, 27 Jun 2020 01:29:36 +0700
Subject: [PATCH 5/5] Fixed #267 useful_links - filter by tags

---
 .../src/cmd/cmd_handlers_useful_links.cpp     | 78 ++++++++++++++++++-
 .../useful-links/useful-links.component.html  | 11 ++-
 .../useful-links/useful-links.component.ts    | 11 ++-
 3 files changed, 95 insertions(+), 5 deletions(-)

diff --git a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
index 3b2ed2b4..a00b9cec 100644
--- a/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
+++ b/fhq-server/src/cmd/cmd_handlers_useful_links.cpp
@@ -52,6 +52,19 @@ struct QueryFilters {
         sWhere += ")";
         vCompiledWhere.push_back(sWhere);
     };
+
+    void equal(std::string sField, std::string sValue) {
+        std::string sWhere = "(";
+        QueryFilter f;
+        f.sColumnName = sField;
+        f.sFilterName = ":" + sField;
+        f.sValue = sValue;
+        vFilters.push_back(f);
+        sWhere +=  f.sColumnName + " = " + f.sFilterName;
+        sWhere += ")";
+        vCompiledWhere.push_back(sWhere);
+    };
+
     std::string compileWhere() {
         if (vCompiledWhere.size() == 0) {
             return "";
@@ -98,8 +111,11 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
     if (sFilter != "") {
         queryFilters.like({"url", "description"}, sFilter);
     }
+
+    std::string sInnerJoinTags = "";
     if (sFilterByTag != "") {
-        WsjcppLog::info(TAG, "sFilterByTag = " + sFilterByTag);
+        sInnerJoinTags = " INNER JOIN useful_links_tags t2 ON t0.id = t2.usefullinkid ";
+        queryFilters.equal("tagvalue", sFilterByTag);
     }
     QString sWhere = "";
 
@@ -110,6 +126,7 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
     // count
     query.prepare("SELECT COUNT(*) AS cnt FROM useful_links t0 "
         " LEFT JOIN useful_links_user_favorites t1 ON t1.usefullinkid = t0.id AND t1.userid = :userid "
+        + QString::fromStdString(sInnerJoinTags)
         + QString::fromStdString(queryFilters.compileWhere())
     );
     query.bindValue(":userid", nUserId);
@@ -130,6 +147,7 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
 
     query.prepare("SELECT t0.*, t1.userid FROM useful_links t0 "
         " LEFT JOIN useful_links_user_favorites t1 ON t1.usefullinkid = t0.id AND t1.userid = :userid "
+        + QString::fromStdString(sInnerJoinTags)
         + QString::fromStdString(queryFilters.compileWhere()) +
         " ORDER BY user_favorites DESC, user_clicks DESC, dt DESC "
         " LIMIT " + QString::number(nPageIndex*nPageSize) + "," + QString::number(nPageSize)
@@ -158,6 +176,8 @@ void CmdHandlerUsefulLinksList::handle(ModelRequest *pRequest) {
         } else {
             jsonLink["favorite"] = false;
         }
+        std::string sTags = record.value("tags").toString().toStdString();
+        jsonLink["tags"] = WsjcppCore::split(sTags, ",");
         jsonItems.push_back(jsonLink);
     }
     jsonData["items"] = jsonItems;
@@ -359,6 +379,14 @@ void CmdHandlerUsefulLinksDelete::handle(ModelRequest *pRequest) {
         return;
     }
 
+    query.prepare("DELETE FROM useful_links_tags WHERE usefullinkid = :useful_link_id");
+    query.bindValue(":useful_link_id", nUsefulLinkId);
+    
+    if (!query.exec()) {
+        pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+        return;
+    }
+
     nlohmann::json jsonResponse;
     pRequest->sendMessageSuccess(cmd(), jsonResponse);
 }
@@ -840,6 +868,30 @@ void CmdHandlerUsefulLinksTagAdd::handle(ModelRequest *pRequest) {
             pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
             return;
         }
+        
+        // update field useful_links.tags
+        query.prepare("SELECT * FROM useful_links_tags WHERE usefullinkid = :useful_link_id");
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
+
+        std::string sTags = "";
+        while (query.next()) {
+            QSqlRecord record = query.record();
+            std::string sTag = record.value("tagvalue").toString().toHtmlEscaped().toStdString();
+            sTags += sTags.length() == 0 ? "": ",";
+            sTags += sTag;
+        }
+
+        query.prepare("UPDATE useful_links SET tags = :tags WHERE id = :useful_link_id");
+        query.bindValue(":tags", QString::fromStdString(sTags));
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
     }
     nlohmann::json jsonResponse;
     pRequest->sendMessageSuccess(cmd(), jsonResponse);
@@ -897,6 +949,30 @@ void CmdHandlerUsefulLinksTagDelete::handle(ModelRequest *pRequest) {
             pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
             return;
         }
+
+        // update field useful_links.tags
+        query.prepare("SELECT * FROM useful_links_tags WHERE usefullinkid = :useful_link_id");
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
+
+        std::string sTags = "";
+        while (query.next()) {
+            QSqlRecord record = query.record();
+            std::string sTag = record.value("tagvalue").toString().toHtmlEscaped().toStdString();
+            sTags += sTags.length() == 0 ? "": ",";
+            sTags += sTag;
+        }
+
+        query.prepare("UPDATE useful_links SET tags = :tags WHERE id = :useful_link_id");
+        query.bindValue(":tags", QString::fromStdString(sTags));
+        query.bindValue(":useful_link_id", nUsefulLinkId);
+        if (!query.exec()) {
+            pRequest->sendMessageError(cmd(), WsjcppError(500, query.lastError().text().toStdString()));
+            return;
+        }
     }
     nlohmann::json jsonResponse;
     pRequest->sendMessageSuccess(cmd(), jsonResponse);
diff --git a/fhq-web-user/src/app/pages/useful-links/useful-links.component.html b/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
index ad6d56e5..dfde2e6a 100644
--- a/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
+++ b/fhq-web-user/src/app/pages/useful-links/useful-links.component.html
@@ -69,8 +69,15 @@ <h1 l10nTranslate>usefulLinks</h1>
           <br><br>
           <strong>{{element.description}}</strong><br>
           <div *ngIf="element.tags.length > 0"> 
-            <small>Tags({{ element.tags.length }}):</small>
-            <button mat-stroked-button class="usefulLinks-tag" *ngFor="let tag of element.tags;">{{ tag }}</button>
+            <mat-chip-list>
+              <mat-chip 
+                *ngFor="let tag of element.tags;" 
+                (click)="applyFilterByTag(tag)"
+                [selected]="tag == filterByTag"
+              >
+                {{ tag }}
+              </mat-chip>
+            </mat-chip-list>
           </div>
           <!-- hr/>
           <button mat-stroked-button>
diff --git a/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts b/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
index 2213e84e..cdfbbcdd 100644
--- a/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
+++ b/fhq-web-user/src/app/pages/useful-links/useful-links.component.ts
@@ -66,6 +66,10 @@ export class UsefulLinksComponent implements OnInit {
         this.searchValue = params["search"];
       }
 
+      if (params["tag"]) {
+        this.filterByTag = params["tag"];
+      }
+
       if (params["page_index"]) {
         this.pageIndex = parseInt(params["page_index"],0);
       }
@@ -93,6 +97,9 @@ export class UsefulLinksComponent implements OnInit {
     if (this.searchValue != "") {
       newQueryParams["search"] = this.searchValue;
     }
+    if (this.filterByTag != "") {
+      newQueryParams["tag"] = this.filterByTag;
+    }
     if (this.pageIndex != 0) {
       newQueryParams["page_index"] = this.pageIndex;
     }
@@ -122,7 +129,7 @@ export class UsefulLinksComponent implements OnInit {
         userClicksLabel: userClicksLabel,
         favorite: usefulLink['favorite'],
         rating: 0,
-        tags: [],
+        tags: usefulLink['tags'],
       })
     }
     this.dataSource = new MatTableDataSource<UsefulLinkElement>(this.usefullLinksData);
@@ -136,7 +143,7 @@ export class UsefulLinksComponent implements OnInit {
   }
 
   updatePage() {
-    this._spinner.show();
+    // this._spinner.show();
     this.loadListOftags();
     this._fhq.api().useful_links_list({
       "page_index": this.pageIndex,