Merge pull request #124 from BuildFire/update-font-family

fix(users table): add empty state to the table

control/content/assets/css/bf_base.css

@@ -697,6 +697,9 @@ color: var(--c-info);
 .align-items-center{
   align-items: center;
 }
+.justify-content-center{
+  justify-content: center;
+}
 
 /* Search Bar */
 .search-bar-container{

control/settings/assets/css/style.css

@@ -316,3 +316,121 @@ tags-input > div > div > input {
 .label2 {
   margin-bottom: 1.25rem !important;
 }
+
+.add-user-container-btn {
+  text-align: end;
+}
+
+#loading, #emptyTableContainer {
+  margin-top: 40px !important;
+}
+
+.add-new-item {
+  background-color: var(--c-primary) !important;
+}
+
+.tdImageSize .imgStyle {
+  width: 40px;
+  height: 40px;
+}
+
+/* tooltip */
+.tooltip-container {
+  display: flex;
+  align-items: center;
+  margin-right: 13px !important;
+  gap: 0.25rem;
+  width: 38%;
+  padding-right: 0 !important;
+  padding-bottom: 1.25rem !important;
+}
+.tooltip-container .nowrap {
+    white-space: nowrap;
+
+}
+.tooltip-container .btn-info-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 8px;
+  min-width: 16px;
+  min-height: 16px;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  color: #fff;
+  position: relative;
+}
+.tooltip-container .btn-info-icon:after {
+  content: 'i';
+  font-weight: 400;
+  font-size: 12px;
+  font-style: normal;
+  left: 0;
+  top: auto !important;
+  height: 100%;
+}
+.tooltip-container .btn-info-icon .cp-tooltip {
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, .80);
+  color: #fff;
+  padding: 8px;
+  border-radius: 4px;
+  position: absolute;
+  left: calc(100% + 12px);
+  cursor: auto;
+  font-size: 12px;
+  text-align: left;
+  width: 200px;
+  opacity: 0;
+  transform: scale(.1);
+  transition: opacity ease .1s, transform ease .1s;
+  transform-origin: left;
+  z-index: 100;
+  font-weight: 400;
+  line-height: 18px;
+  -webkit-text-stroke: 0;
+}
+.tooltip-container.bottom {
+  display: flex;
+}
+
+.tooltip-container.bottom .btn-info-icon .cp-tooltip {
+  left: -100px;
+  top: 30px;
+}
+
+.top-cp-tooltip {
+  top: 0;
+}
+.bottom-cp-tooltip {
+  bottom: 0;
+}
+.tooltip-container .btn-info-icon .cp-tooltip::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: -5px;
+  transform: rotate(90deg) translate(-50%);
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, .80) transparent transparent transparent;
+}
+
+.tooltip-container.bottom .btn-info-icon .cp-tooltip::before {
+  top: -10px;
+  left: 50%;
+  transform: rotate(180deg) translate(-50%);
+}
+.top-cp-tooltip::before {
+  top: 10px !important;
+}
+.bottom-cp-tooltip::before {
+  bottom: 0 !important;
+  top: unset !important;
+}
+.tooltip-container .btn-info-icon:hover .cp-tooltip {
+  opacity: 1;
+  transform: scale(1);
+}

control/settings/controllers/mainSettingsCtrl.js

@@ -162,7 +162,8 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
             "searchResults",
             searchTableConfig,
             "loading",
-            "headTable"
+            "headTable",
+            "emptyTableContainer",
         );
         $scope.searchTableHelper.search();
     }
@@ -178,19 +179,33 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
     }
 
     var verifyUsers = function (result) {
+        let nonSubscribedUsersLength = 0;
         result.userIds.forEach((userId, index) => {
             $scope.getById(userId, (err, res) => {
-                console.log(res)
                 if (res) {
                     res.data.userDetails.hasAllowChat = true;
                     $scope.update(res.id, res.data, (err, res2) => {
-                        console.log(res2)
-                        if (index == result.userIds.length - 1)
+                        if (index === result.userIds.length - 1) {
+                            if (nonSubscribedUsersLength > 0) {
+                                buildfire.dialog.toast({
+                                    message: "Only subscribed users can be added.",
+                                    type: 'danger'
+                                });
+                            }
                             $scope.searchTableHelper.search();
+                            }
                     });
                 } else {
-                    if (index == result.userIds.length - 1)
+                    nonSubscribedUsersLength++;
+                    if (index === result.userIds.length - 1) {
+                        if (nonSubscribedUsersLength > 0) {
+                            buildfire.dialog.toast({
+                                message: "Only subscribed users can be added.",
+                                type: 'danger'
+                            });
+                        }
                         $scope.searchTableHelper.search();
+                    }
                 }
             })
         });
@@ -223,4 +238,4 @@ app.controller('MainSettingsCtrl', ['$scope', function ($scope) {
             }
         })
     }
-}]);
+}]);

control/settings/controllers/search-table-helper.js

@@ -1,11 +1,13 @@
 class SearchTableHelper {
 
-  constructor(tableId, config, loading, headTable) {
+  constructor(tableId, config, loading, headTable, emptyTable) {
     if (!config) throw "No config provided";
     if (!tableId) throw "No tableId provided";
     this.table = document.getElementById(tableId);
     if (!this.table) throw "Cant find table with ID that was provided";
 
+    if (!emptyTable) throw "No empty container provided";
+    this.emptyTable = document.getElementById(emptyTable);
     if (!loading) throw "No loading provided";
     this.loading = document.getElementById(loading);
     if (!this.loading)
@@ -84,13 +86,14 @@ class SearchTableHelper {
     };
   }
 
-  search(filter) {
+  async search(filter) {
     this.tbody.innerHTML = "";
     this.table.classList.add("hidden");
-    this.headTable.classList.remove("hidden");
+    this.headTable.classList.add("hidden");
+    this.emptyTable.classList.add("hidden");
     this.loading.classList.remove("hidden");
     this.filter = filter;
-    this._fetchPageOfData(this.filter, 0);
+    await this._fetchPageOfData(this.filter, 0);
   }
 
   _fetchNextPage() {
@@ -102,53 +105,57 @@ class SearchTableHelper {
     });
   }
 
-  _fetchPageOfData(filter, pageIndex, callback) {
-    if (pageIndex > 0 && this.endReached) return;
-    let pageSize = 50;
-    this.pageIndex = pageIndex;
-
-    let searchFilter = {
-      $and: [{
-          "_buildfire.index.string1": ""
-        },
-        {
-          "$json.userDetails.hasAllowChat": true,
-        }
-      ]
-    }
+  _fetchPageOfData(filter, pageIndex) {
+    return new Promise((resolve, reject) => {
+      if (pageIndex > 0 && this.endReached) return resolve();
+      let pageSize = 50;
+      this.pageIndex = pageIndex;
 
-    if (filter) {
-      searchFilter = filter;
-    }
+      let searchFilter = {
+        $and: [
+          { "_buildfire.index.string1": "" },
+          { "$json.userDetails.hasAllowChat": true }
+        ]
+      };
 
-    let options = {
-      filter: searchFilter,
-      page: pageIndex,
-      pageSize: pageSize,
-    };
+      if (filter) {
+        searchFilter = filter;
+      }
 
+      let options = {
+        filter: searchFilter,
+        page: pageIndex,
+        pageSize: pageSize,
+      };
 
-    this.searchOptions = options;
+      this.searchOptions = options;
 
-    let t = this;
-    window.buildfire.publicData.search(this.searchOptions, 'subscribedUsersData', function (err, data) {
-      if (err) console.error(err);
-      else if (data && data.length > 0) {
-        t.productsLength = data.length;
-        t.loading.classList.add("hidden");
-        t.table.classList.remove("hidden");
-        t.headTable.classList.remove("hidden");
-        t.tbody.innerHTML = "";
-        data.forEach((p) => t.renderRow(p));
-        t.endReached = data.length < pageSize;
-      } else {
-        t.tbody.innerHTML = "";
-        t.loading.classList.add("hidden");
-        t.headTable.classList.add("hidden");
-      }
-    })
+      let t = this;
+      window.buildfire.publicData.search(this.searchOptions, 'subscribedUsersData', function (err, data) {
+        if (err) {
+          console.error(err);
+          return reject(err);
+        } else if (data && data.length > 0) {
+          t.productsLength = data.length;
+          t.loading.classList.add("hidden");
+          t.emptyTable.classList.add("hidden");
+          t.table.classList.remove("hidden");
+          t.headTable.classList.remove("hidden");
+          t.tbody.innerHTML = "";
+          data.forEach((p) => t.renderRow(p));
+          t.endReached = data.length < pageSize;
+          return resolve();
+        } else {
+          console.log(t,'t');
+          t.tbody.innerHTML = "";
+          t.loading.classList.add("hidden");
+          t.headTable.classList.add("hidden");
+          t.emptyTable.classList.remove("hidden");
+          return resolve();
+        }
+      });
+    });
   }
-
   _onCommand(obj, tr, command) {
     if (this.commands[command]) {
       this.commands[command](obj, tr);
@@ -262,7 +269,7 @@ class SearchTableHelper {
               message: "Are you sure you want to remove chat availability for " + (obj.data.userDetails.displayName ? obj.data.userDetails.displayName : (obj.data.userDetails.firstName + ' ' + obj.data.userDetails.lastName)) + " ?",
               confirmButton: {
                 text: "Remove User",
-                type: "warning",
+                type: "danger",
               },
             },
             (err, isConfirmed) => {
@@ -271,6 +278,8 @@ class SearchTableHelper {
               if (isConfirmed) {
                 //Go back
                 tr.classList.add("hidden");
+                this.loading.classList.remove("hidden");
+
                 obj.data.userDetails.hasAllowChat = false;
                 window.buildfire.publicData.update(obj.id, obj.data, 'subscribedUsersData', function (err, res2) {
                   if (err) tr.classList.remove("hidden");
@@ -314,10 +323,12 @@ class SearchTableHelper {
   }
 
   onRowDeleted(obj, tr) {
+    this.loading.classList.add("hidden");
     this.productsLength -= 1;
     if (this.productsLength == 0) {
       this.table.classList.add("hidden");
       this.headTable.classList.add("hidden");
+      this.emptyTable.classList.remove("hidden");
     }
   }
-}
+}