Yangman - bugfixes and improvements
[dlux.git] / modules / yangman-resources / src / main / resources / yangman / views / leftpanel / collections-tab.tpl.html
index 572ae5e9171b1e1e7cb5d6e18165ce1909df39a3..870f43d3984ffb3d2913d1a3c793673e734bb78e 100644 (file)
@@ -1,3 +1,237 @@
-<p>
-    collections tab
-    </p>
+<md-list class="yangmanModule__requests-list__collections-list"
+         ng-cloak
+         ng-controller="RequestsListCtrl as reqList"
+         ng-init="reqList.init('collections')">
+
+    <md-content class="searchBox yangmanModule__left-panel__search" layout="row">
+
+        <!-- searching -->
+        <md-input-container layout="row" md-no-float class="modules-list-search" flex>
+            <!-- search icon, form, clear button -->
+            <md-icon class="material-icons">search</md-icon>
+            <input class="ng-pristine ng-valid ng-touched"
+                   type="text"
+                   id="search-collections"
+                   flex
+                   placeholder="{{'YANGMAN_SEARCH' | translate}}"
+                   ng-model="reqList.search"
+                   aria-invalid="false" />
+            <md-button aria-label="{{'YANGMAN_CLEAR_SEARCH'| translate}}" flex="none"
+                       ng-click="reqList.clearFilter()"
+                       id="search-collections-clear"
+                       ng-if="reqList.search">
+                <md-icon class="material-icons clickable">
+                    close
+                </md-icon>
+                <md-tooltip md-direction="bottom">{{'YANGMAN_CLEAR_SEARCH'| translate}}</md-tooltip>
+            </md-button>
+            <!-- /search icon, form, clear button -->
+        </md-input-container>
+
+        <!-- sorting -->
+        <span class="collection-button-container">
+            <md-button  ng-click="reqList.toggleCollectionsSort()"
+                        id="sort-collections"
+                        ng-disabled="reqList.collectionList.collections.length <= 1">
+                <md-icon class="material-icons clickable" > sort</md-icon>
+            </md-button>
+            <md-tooltip md-direction="bottom">
+                {{ ( reqList.collectionsSortAsc ? 'YANGMAN_SORT_COLLECTIONS_DESC' : 'YANGMAN_SORT_COLLECTIONS_ASC' )| translate}}
+            </md-tooltip>
+        </span>
+        <!-- /sorting -->
+
+        <!-- save -->
+        <span class="collection-button-container">
+            <md-button  ng-click="reqList.showDgSaveReq($event)"
+                        id="collections-save-selected"
+                        ng-disabled="reqList.mainList.getSelectedItems(reqList.filterCollReq).length === 0">
+                <md-icon class="material-icons clickable">
+                    save
+                </md-icon>
+            </md-button>
+            <md-tooltip md-direction="bottom">{{'YANGMAN_REQS_SAVE_TO_COL'| translate}}</md-tooltip>
+        </span>
+        <!-- /save -->
+
+        <!-- importing -->
+        <span class="collection-button-container">
+            <input type="file" accept=".json" id="importCollection" on-read-file="reqList.readCollectionFromFile($fileContent)">
+            <md-button id="import-collection-button">
+                <label for="importCollection">
+                    <md-icon class="material-icons clickable" >
+                        file_upload
+                    </md-icon>
+                </label>
+            </md-button>
+            <md-tooltip md-direction="bottom">{{'YANGMAN_IMPORT_COLLECTION'| translate}}</md-tooltip>
+        </span>
+        <!-- /importing -->
+
+        <md-menu layout-align="center start">
+            <md-button ng-disabled="!reqList.mainList.list.length" aria-label="menu" id="collections-delete-menu" ng-click="$mdOpenMenu()">
+                <md-icon class="material-icons clickable"> delete</md-icon>
+                <md-tooltip md-direction="bottom">{{'YANGMAN_DELETE_OPTIONS' | translate}}</md-tooltip>
+            </md-button>
+            <md-menu-content>
+                <!-- delete selected -->
+                <md-menu-item>
+                    <md-button aria-label="{{'YANGMAN_REQS_DELETE'| translate}}"
+                               id="collections-delete-selected"
+                               ng-click="reqList.showDgDeleteRequests($event)"
+                               ng-disabled="reqList.mainList.getSelectedItems(reqList.filterCollReq).length === 0">
+                        <md-icon class="material-icons clickable">
+                            delete
+                        </md-icon>
+                        {{'YANGMAN_REQS_DELETE'| translate}}
+                    </md-button>
+                </md-menu-item>
+                <!-- / delete selected -->
+                <!-- clear collections -->
+                <md-menu-item>
+                    <md-button aria-label="{{'YANGMAN_DELETE_COLLECTIONS' | translate}}"
+                               id="collections-delete-all"
+                               ng-click="reqList.clearCollectionList($event)">
+                        <md-icon class="material-icons clickable">
+                            delete_forever
+                        </md-icon>
+                        {{'YANGMAN_DELETE_COLLECTIONS' | translate}}
+                    </md-button>
+                </md-menu-item>
+                <!-- / clear history -->
+            </md-menu-content>
+        </md-menu>
+        <!-- / menu for deleting and clearing -->
+
+        <!-- menu for selecting and deselecting-->
+        <md-menu layout-align="center start">
+            <md-button ng-disabled="( !reqList.mainList.list.length)" aria-label="menu" id="collections-select-menu" ng-click="$mdOpenMenu()">
+                <md-icon class="material-icons clickable">
+                    playlist_add_check
+                </md-icon>
+                <md-tooltip md-direction="bottom">{{'YANGMAN_SELECT_OPTIONS' | translate}}</md-tooltip>
+            </md-button>
+            <md-menu-content>
+                <!-- select all -->
+                <md-menu-item>
+                    <md-button aria-label="{{'YANGMAN_SELECT_ALL' | translate}}"
+                               id="collections-select-all"
+                               ng-click="reqList.selectAllFilteredRequests()">
+                        <md-icon class="material-icons clickable">
+                            done
+                        </md-icon>
+                        {{'YANGMAN_SELECT_ALL' | translate}}
+                    </md-button>
+                </md-menu-item>
+                <!-- /select all -->
+                <!-- deselect all -->
+                <md-menu-item>
+                    <md-button aria-label="{{'YANGMAN_DESELECT_ALL' | translate}}"
+                               ng-click="reqList.deselectAllFilteredRequests()"
+                               id="collections-deselect-all"
+                               ng-disabled="reqList.mainList.getSelectedItems(reqList.filterCollReq).length === 0">
+                        <md-icon class="material-icons clickable">
+                            close
+                        </md-icon>
+                        {{'YANGMAN_DESELECT_ALL' | translate}}
+                    </md-button>
+                </md-menu-item>
+                <!-- / deselect all -->
+            </md-menu-content>
+        </md-menu>
+        <!-- / menu for selecting and deselecting -->
+    </md-content>
+
+    <md-divider></md-divider>
+
+    <!-- collection list -->
+    <md-content class="scrollableY">
+
+        <div ng-repeat="collection in reqList.mainList.collections | filter: reqList.filterCol | orderBy: (reqList.collectionsSortAsc ? '' : '-')+'name' track by $index" ng-init="collectionIndex = $index">
+
+            <div layout="row">
+
+                <md-list-item class="yangmanModule__requests-list__collection"
+                              flex
+                              id="collection-{{$index}}"
+                              ng-class="{'expanded' : collection.expanded, 'selected': collection.expanded}"
+                              ng-click="collection.toggleExpanded()">
+
+                    <div layout="row">
+                        <md-icon md-font-set="material-icons" class="top-icon">
+                            folder_open
+                        </md-icon>
+                        <div layout="column">
+
+                            <p flex>
+                            <span md-highlight-text="reqList.search" id="collection-{{$index}}-name" md-highlight-flags="i">
+                                {{collection.name}}
+                            </span><br />
+                            <span class="desc">
+                                <span class="desc" ng-if="reqList.search && !reqList.filterColName(collection)">{{'YANGMAN_MATCHING'| translate}} {{reqList.colMatchingReqsCount(collection)}} / </span>
+                                {{collection.data.length}} {{(collection.data.length>1 ? 'YANGMAN_COLLECTION_REQUESTS' : 'YANGMAN_COLLECTION_REQUEST')| translate}}
+                            </span>
+                            </p>
+                        </div>
+                    </div>
+
+                </md-list-item>
+                <md-menu class="yangmanModule__requests-list__group__collectionMenu"
+                         id="collection-menu-{{$index}}"
+                         md-offset="35 15"
+                         layout-align="center start">
+                    <md-button aria-label="menu" class="md-primary" ng-click="$mdOpenMenu()">
+                        <i class="material-icons">menu</i>
+                    </md-button>
+                    <md-menu-content class="reqMenu">
+                        <md-menu-item>
+                            <md-button aria-label="Edit collection"
+                                       id="collection-menu-{{$index}}-edit"
+                                       ng-click="reqList.showDgEditCollection($event, collection, false)">
+                                <i class="material-icons">mode_edit</i>
+                                {{'YANGMAN_COLLECTION_EDIT'| translate}}
+                            </md-button>
+                        </md-menu-item>
+                        <md-menu-item>
+                            <md-button aria-label="{{'YANGMAN_COLLECTION_DUPLICATE'| translate}}"
+                                       id="collection-menu-{{$index}}-duplicate"
+                                       ng-click="reqList.showDgEditCollection($event, collection, true)">
+                                <i class="material-icons">control_point_duplicate</i>
+                                {{'YANGMAN_COLLECTION_DUPLICATE'| translate}}
+                            </md-button>
+                        </md-menu-item>
+                        <md-menu-item>
+                            <md-button aria-label="{{'YANGMAN_COLLECTION_DOWNLOAD'| translate}}"
+                                       id="collection-menu-{{$index}}-download"
+                                       ng-click="reqList.downloadCollection(collection)">
+                                <i class="material-icons">file_download</i>
+                                {{'YANGMAN_COLLECTION_DOWNLOAD'| translate}}
+                            </md-button>
+                        </md-menu-item>
+                        <md-menu-item>
+                            <md-button aria-label="{{'YANGMAN_COLLECTION_DELETE'| translate}}"
+                                       id="collection-menu-{{$index}}-delete"
+                                       ng-click="reqList.showDgDeleteCollection($event, collection)">
+                                <i class="material-icons">delete</i>
+                                {{'YANGMAN_COLLECTION_DELETE'| translate}}
+                            </md-button>
+                        </md-menu-item>
+                    </md-menu-content>
+                </md-menu>
+            </div>
+
+
+            <md-list ng-show="collection.expanded" class="yangmanModule__requests-list__collection__requests">
+                <div ng-repeat="request in collection.data | filter: reqList.filterReq track by $index"
+                     layout="row"
+                     ng-init="itemId='collection-request-'+collectionIndex+'-'+$index"
+                     class="yangmanModule__requests-list__item-container"
+                     ng-include src="globalViewPath + 'leftpanel/request-item.tpl.html'">
+                </div>
+            </md-list>
+            <md-divider></md-divider>
+
+        </div>
+    </md-content>
+
+</md-list>