mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-27 02:04:33 +08:00
Add front-end part
This commit is contained in:
aignatov-bio
parent
f36e1cb8f4
commit
485597a9ef
7 changed files with 151 additions and 0 deletions
|
|
@ -45,6 +45,7 @@
|
|||
//= require marvinjslauncher
|
||||
//= require_tree ./repositories/renderers
|
||||
//= require_directory ./repositories/validators
|
||||
//= require_directory ./dashboard
|
||||
//= require_directory ./sitewide
|
||||
//= require turbolinks
|
||||
|
||||
|
|
|
|||
43
app/assets/javascripts/dashboard/current_tasks.js
Normal file
43
app/assets/javascripts/dashboard/current_tasks.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/* global dropdownSelector */
|
||||
|
||||
var DasboardCurrentTasksWidget = (function() {
|
||||
function initFilters() {
|
||||
dropdownSelector.init('.curent-tasks-filters .sort-filter', {
|
||||
noEmptyOption: true,
|
||||
singleSelect: true,
|
||||
closeOnSelect: true,
|
||||
selectAppearance: 'simple'
|
||||
});
|
||||
|
||||
dropdownSelector.init('.curent-tasks-filters .view-filter', {
|
||||
noEmptyOption: true,
|
||||
singleSelect: true,
|
||||
closeOnSelect: true,
|
||||
selectAppearance: 'simple'
|
||||
});
|
||||
|
||||
dropdownSelector.init('.curent-tasks-filters .project-filter');
|
||||
dropdownSelector.init('.curent-tasks-filters .experiment-filter');
|
||||
|
||||
$('.curent-tasks-filters').click((e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
dropdownSelector.closeDropdown('.curent-tasks-filters .sort-filter');
|
||||
dropdownSelector.closeDropdown('.curent-tasks-filters .view-filter');
|
||||
dropdownSelector.closeDropdown('.curent-tasks-filters .project-filter');
|
||||
dropdownSelector.closeDropdown('.curent-tasks-filters .experiment-filter');
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init: () => {
|
||||
if ($('.current-tasks-widget').length) {
|
||||
initFilters();
|
||||
}
|
||||
}
|
||||
};
|
||||
}());
|
||||
|
||||
$(document).on('turbolinks:load', function() {
|
||||
DasboardCurrentTasksWidget.init();
|
||||
});
|
||||
|
|
@ -1,6 +1,65 @@
|
|||
.dashboard-container .current-tasks-widget {
|
||||
grid-column: 1 / span 9;
|
||||
grid-row: 1 / span 6;
|
||||
|
||||
.filter-container {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
|
||||
.fa-filter {
|
||||
cursor: pointer;
|
||||
font-size: $font-size-h2;
|
||||
}
|
||||
|
||||
.curent-tasks-filters {
|
||||
padding: 0;
|
||||
width: 230px;
|
||||
|
||||
.header {
|
||||
align-items: center;
|
||||
border-bottom: $border-default;
|
||||
display: flex;
|
||||
height: 44px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 5px 0 16px;
|
||||
|
||||
.title {
|
||||
@include font-h2;
|
||||
flex-grow: 1;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.select-block {
|
||||
display: inline-block;
|
||||
padding: 0 16px 16px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
label {
|
||||
@include font-small;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: center;
|
||||
border-top: $border-default;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 68px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@
|
|||
}
|
||||
|
||||
.search-field {
|
||||
@include font-button;
|
||||
border: 0;
|
||||
flex-basis: 0;
|
||||
flex-grow: 2000;
|
||||
|
|
@ -108,6 +109,7 @@
|
|||
}
|
||||
|
||||
.dropdown-container {
|
||||
@include font-button;
|
||||
background: $color-white;
|
||||
border: 1px solid $color-alto;
|
||||
border-radius: 0 0 4px 4px;
|
||||
|
|
|
|||
8
app/controllers/dashboard/current_tasks_controller.rb
Normal file
8
app/controllers/dashboard/current_tasks_controller.rb
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# frozen_string_literal: true
|
||||
|
||||
module Dashboard
|
||||
class CurrentTasksController < ApplicationController
|
||||
def show
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
@ -1,2 +1,38 @@
|
|||
<div class="current-tasks-widget basic-widget">
|
||||
<div class="filter-container dropdown">
|
||||
<span data-toggle="dropdown" class="fas fa-filter"></span>
|
||||
<div class="dropdown-menu curent-tasks-filters" role="menu">
|
||||
<div class="header">
|
||||
<div class="title">Filters</div>
|
||||
<div class="btn btn-light"><i class="fas fa-times-circle"></i>Clear</div>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label>Sort by</label>
|
||||
<select class="sort-filter">
|
||||
<option value="date_asc" >Due Date Ascending</option>
|
||||
<option value="date_desc" >Due Date Descending</option>
|
||||
<option value="atoz" >From A to Z</option>
|
||||
<option value="ztoa" >From Z to A</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label>Display</label>
|
||||
<select class="view-filter">
|
||||
<option value="active" >Only active tasks</option>
|
||||
<option value="completed" >Only completed and locked tasks</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label>Project</label>
|
||||
<select class="project-filter"></select>
|
||||
</div>
|
||||
<div class="select-block">
|
||||
<label>Experiment</label>
|
||||
<select class="experiment-filter"></select>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="btn btn-primary">Apply</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -241,6 +241,8 @@ Rails.application.routes.draw do
|
|||
post 'reports/destroy', to: 'reports#destroy'
|
||||
|
||||
resource :dashboard, only: :show do
|
||||
resource :current_tasks, module: 'dashboard', only: :show do
|
||||
end
|
||||
end
|
||||
|
||||
resources :projects, except: [:new, :destroy] do
|
||||
|
|
|
|||
Loading…
Reference in a new issue