chore(ui): manage sort tags use firebot-list

Author: zunderscore

src/gui/app/directives/modals/misc/manage-sort-tags.js

@@ -7,28 +7,22 @@
         .component("manageSortTagsModal", {
             template: `
             <div class="modal-header">
-                <button type="button" class="close" ng-click="$ctrl.dismiss()"><span>&times;</span></button>
+                <button type="button" class="close" aria-label="Close" ng-click="$ctrl.dismiss()"><span aria-hidden="true">&times;</span></button>
                 <h4 class="modal-title">Edit Tags</h4>
             </div>
             <div class="modal-body">
-                <div ui-sortable="$ctrl.sortableOptions" ng-model="$ctrl.tags">
-                    <div ng-repeat="tag in $ctrl.tags track by tag.id" class="list-item selectable" style="padding: 1px 15px;border-radius: 7px;" ng-click="$ctrl.openAddOrEditTagModal(tag)" aria-label="{{item + ' (Click to edit)'}}">
-                        <span class="dragHandle" ng-click="$event.stopPropagation();" style="height: 38px; width: 15px; align-items: center; justify-content: center; display: flex">
-                            <i class="fal fa-bars" aria-hidden="true"></i>
-                        </span>
-                        <span>{{tag.name}}</span>
-                        <span class="clickable" style="color: #fb7373;" ng-click="$ctrl.removeTag(tag.id);$event.stopPropagation();">
-                            <i class="fad fa-trash-alt" aria-hidden="true"></i>
-                        </span>
-                    </div>
-                </div>
-                <div ng-show="$ctrl.tags.length < 1" class="muted" style="margin: 10px 0;">No tags created yet.</div>
-                <div style="margin: 10px 0 5px 0px;">
-                    <button class="btn btn-default" ng-click="$ctrl.openAddOrEditTagModal()"><i class="far fa-plus-circle"></i> Add Tag</button>
-                </div>
+                <firebot-list
+                    ng-model="$ctrl.tags"
+                    name="tags"
+                    id="tags"
+                    settings="$ctrl.tagListSettings"
+                    on-add-new-clicked="$ctrl.addNewTag()"
+                    on-edit-clicked="$ctrl.editTag(index)"
+                    on-delete-clicked="$ctrl.deleteTag(index)"
+                ></firebot-list>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-link" ng-click="$ctrl.dismiss()">Cancel</button>
+                <button type="button" class="btn btn-default" ng-click="$ctrl.dismiss()">Cancel</button>
                 <button type="button" class="btn btn-primary" ng-click="$ctrl.save()">Save</button>
             </div>
             `,
@@ -38,21 +32,21 @@
                 dismiss: "&",
                 modalInstance: "<"
             },
-            controller: function($scope, utilityService) {
+            controller: function(utilityService) {
                 const $ctrl = this;
 
-                $ctrl.sortableOptions = {
-                    handle: ".dragHandle",
-                    stop: () => {}
+                $ctrl.tagListSettings = {
+                    sortable: true,
+                    nameProperty: 'name',
+                    connectItems: false,
+                    showIndex: false,
+                    addLabel: 'Add Tag',
+                    noneAddedText: 'No tags added yet.'
                 };
 
                 $ctrl.tags = [];
 
-                $ctrl.removeTag = (tagId) => {
-                    $ctrl.tags = $ctrl.tags.filter(t => t.id !== tagId);
-                };
-
-                $ctrl.openAddOrEditTagModal = (tag) => {
+                const openAddOrEditTagModal = (tag) => {
                     utilityService.openGetInputModal(
                         {
                             model: tag ? tag.name : "",
@@ -81,6 +75,18 @@
                         });
                 };
 
+                $ctrl.addNewTag = () => {
+                    openAddOrEditTagModal();
+                };
+
+                $ctrl.editTag = (index) => {
+                    openAddOrEditTagModal($ctrl.tags[index]);
+                };
+
+                $ctrl.deleteTag = (index) => {
+                    $ctrl.tags.splice(index, 1);
+                };
+
                 $ctrl.$onInit = () => {
                     if ($ctrl.resolve.tags != null) {
                         $ctrl.tags = JSON.parse(angular.toJson($ctrl.resolve.tags));
@@ -94,4 +100,4 @@
                 };
             }
         });
-}());
+}());