vendor/uvdesk/support-center-bundle/Resources/views/Staff/Folders/listFolders.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}
  4.     {{ 'Folders'|trans }}
  5. {% endblock %}
  7. {% block pageContent %}
  8.     <style>
  9.         .uv-folders input[type='radio'] {
  10.             display: none;
  11.         }
  12.         .uv-inner-section .folder-list .uv-app-list-brick .uv-app-list-brick-lt{
  13.             //background: none;
  14.         }
  15.         .uv-inner-section .folder-list .uv-app-list-brick .uv-app-list-brick-lt img{
  16.             height: 90px;
  17.             width: 100%;
  18.         }
  19.         .uv-inner-section .folder-list .uv-app-list-brick .uv-app-list-brick-lt.uv-without-img{
  20.             background-image: linear-gradient(to right, #7c70f4 0%, #ba81f1 100%);
  21.         }
  22.         .uv-folders .uv-aside-brick div {
  23.             margin-top: 15px;
  24.         }
  25.         .uv-folders p {
  26.             margin: 3px 0px 3px 0px;
  27.         }
  28.         .uv-app-list-brick-lt.uv-without-img div {
  29.             width: 90px;
  30.             height: 90px;
  31.             background-image: url(../../../bundles/webkuldefault/images/uvdesk-kb-sprite.svg);
  32.             background-position: 0px 0px;
  33.             display: inline-block;
  34.             vertical-align: middle;
  35.             overflow: hidden;
  36.         }
  37.         .uv-app-list-brick-lt.uv-without-img div{
  38.             background-position: -90px 0px;
  39.         }
  40.         div.uv-manage-gap{
  42.         }
  43.         .uv-app-list-brick-rt{
  44.             word-break: break-word;
  45.         }
  46.     </style>
  48.     <div class="uv-inner-section">
  49.         {# Append Panel Aside #}
  50.         {% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
  51.         {% set asideSidebarReference = 'Webkul\\UVDesk\\SupportCenterBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Knowledgebase' %}
  53.         {{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
  55.         <div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
  56.             <h1>
  57.                 {{ 'Folders'|trans }}
  58.             </h1>
  59.             <div class="uv-action-bar">
  60.                 <div class="uv-action-bar-col-lt">
  61.                     <!--Sort by-->
  62.                     <div class="uv-dropdown sort">
  63.                         <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
  64.                             {{ 'Sort By:'|trans }} {{ 'Created At'|trans }}
  65.                         </div>
  66.                         <div class="uv-dropdown-list uv-bottom-left">
  67.                             <div class="uv-dropdown-container">
  68.                                 <label>{{ 'Sort By'|trans }}</label>
  69.                                 <ul>
  70.                                 </ul>
  71.                             </div>
  72.                         </div>
  73.                     </div>
  74.                     <!--Sort by-->
  76.                     <!--Filter By Status-->
  77.                     <div class="uv-dropdown filter-by-status">
  78.                         <div class="uv-dropdown-btn uv-vertical-align uv-margin-right-5">
  79.                             {{ 'Status:'|trans }} {{ 'All'|trans }}
  80.                         </div>
  81.                         <div class="uv-dropdown-list uv-bottom-left">
  82.                             <div class="uv-dropdown-container">
  83.                                 <label>{{ 'Status'|trans }}</label>
  84.                                 <ul>
  85.                                     <li class="uv-drop-list-active"><a href="#">{{ 'All'|trans }}</a></li>
  86.                                     <li><a href="#" data-id="1">{{ 'Published'|trans }}</a></li>
  87.                                     <li><a href="#" data-id="0">{{ 'Draft'|trans }}</a></li>
  88.                                 </ul>
  89.                             </div>
  90.                         </div>
  91.                     </div>
  92.                     <!--//Filter By Status-->
  93.                 </div>
  94.                 <div class="uv-action-bar-col-rt">
  95.                     <input type="text" class="uv-search-inline uv-vertical-align uv-margin-right-15" placeholder="{{ 'Search'|trans }}">
  96.                     <!-- Add Button -->
  97.                     
  98.                     <a href="{{ path('helpdesk_member_knowledgebase_create_folder') }}" type="button" class="uv-btn-action" id="uv-add-folder">
  99.                         <span class="uv-icon-add"></span>
  100.                         {{ "New Folder"|trans }}
  101.                     </a>
  102.                     <!--// Add Button -->
  103.                 </div>
  104.             </div>
  105.      
  106.             <div class="uv-table uv-list-view">
  107.                 <div class="uv-app-screen">
  108.                     <div class="folder-list uv-app-list-channels">
  109.                     </div>
  110.                 </div>
  111.                 <div class="navigation"></div>
  112.             </div>
  113.         </div>
  114.     </div>
  115. {% endblock %}
  117. {% block footer %}
  118.     {{ parent() }}
  120.     <!-- Sorting Template -->
  121.     <script id="entity_list_sorting_tmp" type="text/template">
  122.         <li class="<% if(sort == 'a.dateAdded') { %>uv-drop-list-active<% } %>">
  123.             <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/a.dateAdded/<% if(sort == 'a.dateAdded') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.dateAdded">
  124.                 {% trans %}Created At{% endtrans %}
  125.                 <% if(sort == 'a.dateAdded') { %>
  126.                     <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
  127.                 <% } %>
  128.             </a>
  129.         </li>
  131.         <li class="<% if(sort == 'a.name') { %>uv-drop-list-active<% } %>">
  132.             <a href="#<% if(queryString != '') { %><%- queryString %>/<% } %><% if(page) { %>page/<%- page %><% } else { %>page/1<% } %>/sort/a.name/<% if(sort == 'a.name') { %><% if(direction) { %>direction/<%- direction %><% } else { %>direction/desc<% } %><% } else { %>direction/asc<% } %>" data-field="a.name">
  133.                 {% trans %}Name{% endtrans %}
  134.                 <% if(sort == 'a.name') { %>
  135.                     <span class="uv-sorting <% if(direction == 'asc') { %> descend <% } else { %> ascend <% } %>"></span>
  136.                 <% } %>
  137.             </a>
  138.         </li>
  139.     </script>
  140.     <!-- //Sorting Template -->
  142.     <!-- Folder list item template -->
  143.     <script id="entity_list_item_tmp" type="text/template">
  144.         <a href="<%- path.replace('replaceId', id) %>">
  145.             <% if(solutionImage) { %>
  146.                 <div class="uv-app-list-brick-lt">
  147.                     <img src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}<%= solutionImage %>"/>                    
  148.                 </div>
  149.             <% }else{ %>
  150.                 <div class="uv-app-list-brick-lt uv-without-img"><div></div></div>
  151.             <% } %>
  152.         </a>
  153.         <div class="uv-app-list-brick-rt">
  154.             <p><a href="<%- path.replace('replaceId', id) %>" data-target="uv-task-view" <% if(name.length > 20){ %> data-toggle="tooltip" data-placement="top" title="<%- app.appView.sanitize(name) %>" <% } %> ><%- name %></a></p>
  155.             <p>
  156.             <% if(parseInt(categoriesCount)){ %><a href="<%- pathCategory.replace('replaceId', id) %>">
  157.             <%- categoriesCount %> {{ 'Categories'|trans }}</a> <% }else{ %> <a href="<%- pathCategory.replace('replaceId', id) %>">
  158.             <%- categoriesCount %> {{ 'Categories'|trans }}</a><% } %> </p>
  159.             <p>
  160.                 <% if(parseInt(articleCount)){ %><a href="<%- pathArticle.replace('replaceId', id) %>"><%- articleCount %> {{ 'Articles'|trans }}</a> <% }else{ %>
  161.                 <span class="uv-text-danger uv-cursor delete-folder uv-pull-right" data-id="<%- id %>">{{ 'delete'|trans }}</span>
  162.                 <a href="<%- pathArticle.replace('replaceId', id) %>"><%- articleCount %> {{ 'Articles'|trans }}</a><% } %>
  163.             </p>
  164.         </div>
  165.     </script>
  166.     <!-- //Folder list item template -->
  168.     <script id="no_result_tmp" type="text/template">
  169.         <div class="uv-app-screen">
  170.             <div class="uv-app-splash" style="text-align: center;">
  171.                 <img class="uv-app-splash-image" src="{{ asset('bundles/uvdesksupportcenter/images/splash/knowledgebase-splash.png') }}" alt="Folders">
  172.                 <% if(!window.location.hash) { %>
  173.                     <h2 class="uv-margin-top-10">{{"Create Knowledgebase Folder"|trans}}</h2>
  174.                     <p>{{"You didn't add any folder to your Knowledgebase yet, Create your first Folder and start adding Categories/Articles to make your customers help themselves."|trans}}</p>
  175.                 <% } else { %>
  176.                     <p>
  177.                         {{ "You didn't have any folder for current filter(s)."|trans }}
  178.                         <a href="#">{{ 'Clear Filters'|trans }}</a>
  179.                     </p>
  180.                 <% } %>
  181.             </div>
  182.         </div>
  183.     </script>
  185.     <script type="text/javascript">
  186.         var path = "{{ path('helpdesk_member_knowledgebase_update_folder', {'folderId': 'replaceId' }) }}";
  187.         var pathCategory = "{{ path('helpdesk_member_knowledgebase_folder_categories_collection', {'solution': 'replaceId' }) }}";
  188.         var pathArticle = "{{ path('helpdesk_member_knowledgebase_folder_articles_collection', {'solution': 'replaceId' }) }}";
  189.         var pathLayout = "{{ path('helpdesk_member_knowledgebase_update_theme_xhr') }}";
  190.         $(function () {
  191.             var globalMessageResponse = "";
  193.             var FolderModel = Backbone.Model.extend({
  194.                 idAttribute : "id"
  195.             });
  197.             var FolderCollection = AppCollection.extend({
  198.                 model : FolderModel,
  199.                 url : "{{ path('helpdesk_member_knowledgebase_folders_collection_xhr') }}",
  200.                 filterParameters : {
  201.                     "isActive" : "",
  202.                     "search" : ""
  203.                 },
  204.                 parseRecords: function (resp, options) {
  205.                     return resp.results;
  206.                 },
  207.                 syncData : function() {
  208.                     app.appView.showLoader();
  209.                     this.fetch({
  210.                         data : this.getValidParameters(),
  211.                         reset: true,
  212.                         success: function(model, response) {
  213.                             app.appView.hideLoader();
  214.                             var folderListView = new FolderList();
  215.                             app.pager.paginationData = response.pagination_data;
  217.                             var url = app.pager.paginationData.url;
  218.                             if(folderCollection.length == 0 && app.pager.paginationData.current != "0")
  219.                                 router.navigate(url.replace('replacePage', app.pager.paginationData.last),{trigger: true});
  220.                             else {
  221.                                 app.pager.render();
  222.                             }
  223.                             if(globalMessageResponse)
  224.                                 app.appView.renderResponseAlert(globalMessageResponse);
  225.                             globalMessageResponse = null;
  226.                         },
  227.                         error: function (model, xhr, options) {
  228.                             if(url = xhr.getResponseHeader('Location'))
  229.                                 window.location = url;
  230.                         }
  231.                     });
  232.                 }
  233.             });
  235.             var FolderItem = Backbone.View.extend({
  236.                 tagName : "div",
  237.                 className : "uv-app-list-brick",
  238.                 template : _.template($("#entity_list_item_tmp").html()),
  239.                 events : {
  240.                     'click .delete-folder' : "confirmRemove",
  241.                 },
  242.                 render : function() {
  243.                     console.log(this.model.toJSON());
  244.                     this.$el.html(this.template(this.model.toJSON()));
  245.                     return this;
  246.                 },
  247.                 unrender : function(response) {
  248.                     if(response.alertMessage != undefined) {
  249.                         folderCollection.syncData();
  250.                         app.appView.renderResponseAlert(response)
  251.                     }
  252.                 },
  253.                 confirmRemove: function(e) {
  254.                     e.preventDefault();
  255.                     app.appView.openConfirmModal(this)
  256.                 },
  257.                 removeItem : function (e) {
  258.                     app.appView.showLoader();
  259.                     self = this;
  260.                     this.model.destroy({
  261.                         url : "{{ path('helpdesk_member_knowledgebase_update_folder_xhr') }}/"+this.model.get('id'),
  262.                         method:"delete",
  263.                         success : function (model, response, options) {
  264.                             app.appView.hideLoader();
  265.                             app.appView.renderResponseAlert(response);
  266.                             folderCollection.syncData();
  267.                             if(typeof(response.allowedToAdd) != 'undefined' && response.allowedToAdd) {
  268.                                 $('#upgrade-plan-message').hide();
  269.                                 $('#uv-add-folder').show();
  270.                             }
  271.                         },
  272.                         error: function (model, xhr, options) {
  273.                             if(url = xhr.getResponseHeader('Location'))
  274.                                 window.location = url;
  275.                             var response = warningResponse;
  276.                             if(xhr.responseJSON)
  277.                                 response = xhr.responseJSON;
  278.                             app.appView.hideLoader();
  279.                             app.appView.renderResponseAlert(response);
  280.                         }
  281.                     });
  282.                 }
  283.             });
  285.             var FolderList = Backbone.View.extend({
  286.                 el : $(".uv-list-view div.folder-list"),
  287.                 noResultTemplate : _.template($("#no_result_tmp").html()),
  288.                 initialize : function() {
  289.                     this.render();
  290.                 },
  291.                 render : function () {
  292.                     this.$el.html('');
  293.                     this.$el.find(".uv-app-list-brick").remove();
  294.                     var isEmptyFlag = 0;
  295.                     if(folderCollection.length) {
  296.                         isEmptyFlag++;
  297.                         _.each(folderCollection.models, function (item) {
  298.                             this.renderFolder(item);
  299.                         }, this);
  300.                     }
  302.                     if(!isEmptyFlag) {
  303.                         this.$el.append(this.noResultTemplate())
  304.                     }
  305.                 },
  306.                 renderFolder : function (item) {
  307.                     var folderItem = new FolderItem({
  308.                         model: item
  309.                     });
  310.                     this.$el.append(folderItem.render().el);
  311.                 }
  312.             });
  314.             var Filter = app.Filter.extend({
  315.                 defaultSortIndex: 'a.dateAdded',
  316.                 sortText: "{% trans %}Sort By:{% endtrans %} ",
  317.                 defaultSortText: "{% trans %}Sort By:{% endtrans %} {% trans %}Created At{% endtrans %}",
  318.                 template : _.template($("#entity_list_sorting_tmp").html())
  319.             })
  321.             var folderCollection = new FolderCollection();
  323.             var filter = new Filter({
  324.                 collection : folderCollection
  325.             });
  327.             var PageView = Backbone.View.extend({
  328.                 el: '.uv-folders',
  329.                 events : {
  330.                     "change input[type='radio']": 'layoutChanged'
  331.                 },
  332.                 layoutChanged: function(e) {
  333.                     var currentElement = Backbone.$(e.currentTarget);
  334.                     $('.uv-layout-icon').removeClass('uv-layout-icon-active');
  336.                     $("label[for='" + currentElement.attr('id') + "']").addClass('uv-layout-icon-active');
  338.                     app.appView.showLoader();
  340.                     $.ajax({
  341.                         url : pathLayout,
  342.                         type : 'POST',
  343.                         data: {"layout" : Backbone.$(e.currentTarget).val(), "actionType": 'layoutUpdate'},
  344.                         dataType : 'json',
  345.                         success: function (response) {
  346.                             app.appView.hideLoader();
  347.                             app.appView.renderResponseAlert(response);
  348.                         },
  349.                         error: function (model, xhr, options) {
  350.                             if(url = xhr.getResponseHeader('Location'))
  351.                                 window.location = url;
  352.                             var response = warningResponse;
  353.                             if(xhr.responseJSON)
  354.                                 response = xhr.responseJSON;
  355.                             app.appView.hideLoader();
  356.                             app.appView.renderResponseAlert(response);
  357.                         }
  358.                     });
  359.                 },
  360.             });
  362.             var pageView = new PageView();
  364.             Router = Backbone.Router.extend({
  365.                 routes: {
  366.                     'page/:number(/sort/:sortField)(/direction/:order)' : 'paginate',
  367.                     'isActive/:status(/search/:query)(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterFolderByStatus',
  368.                     'search/:query(/page/:number)(/sort/:sortField)(/direction/:order)' : 'filterByQuery',
  369.                     '' : 'initializeList'
  370.                 },
  371.                 initializeList : function() {
  372.                     this.resetParams('', '');
  373.                     folderCollection.state.currentPage = null;
  374.                     filter.sortCollection();
  375.                     folderCollection.syncData();
  376.                 },
  377.                 paginate : function(number,sortField,order) {
  378.                     this.resetParams('', '');
  379.                     folderCollection.state.currentPage = number;
  380.                     filter.sortCollection(sortField,order);
  381.                     folderCollection.syncData();
  382.                 },
  383.                 filterFolderByStatus: function(status,query,number,sortField,order) {
  384.                     this.resetParams(status,query);
  385.                     folderCollection.state.currentPage = number;
  386.                     filter.sortCollection(sortField,order);
  387.                     folderCollection.syncData();
  388.                 },
  389.                 filterByQuery : function(query,number,sortField,order) {
  390.                     this.resetParams('',query);
  391.                     folderCollection.state.currentPage = number;
  392.                     filter.sortCollection(sortField,order);
  393.                     folderCollection.syncData();
  394.                 },
  395.                 resetParams : function(status, query) {
  396.                     if(query != null)
  397.                         query = query.replace(/\+/g,' ');
  398.                     folderCollection.filterParameters.isActive = status;
  399.                     var statusText = status ? $(".filter-by-status a[data-id='" + status + "']").text() : "{% trans %}All{% endtrans %}";
  400.                     $(".filter-by-status .uv-dropdown-btn").text("{% trans %}Status:{% endtrans %} " + statusText);
  401.                     folderCollection.filterParameters.search = query;
  402.                     $(".uv-search-inline").val(query);
  403.                 }
  404.             });
  406.             router = new Router();
  407.             Backbone.history.start({push_state:true});
  408.         });
  409.     </script>
  410. {% endblock %}