diff --git a/app/assets/images/checkbox/checked.svg b/app/assets/images/checkbox/checked.svg new file mode 100644 index 000000000..548f6ae2f --- /dev/null +++ b/app/assets/images/checkbox/checked.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/checkbox/default.svg b/app/assets/images/checkbox/default.svg new file mode 100644 index 000000000..c5bd26848 --- /dev/null +++ b/app/assets/images/checkbox/default.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/checkbox/disabled.svg b/app/assets/images/checkbox/disabled.svg new file mode 100644 index 000000000..903558dbd --- /dev/null +++ b/app/assets/images/checkbox/disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/checkbox/indeterminate.svg b/app/assets/images/checkbox/indeterminate.svg new file mode 100644 index 000000000..b1f9adf3e --- /dev/null +++ b/app/assets/images/checkbox/indeterminate.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/javascripts/label_templates/label_templates_datatable.js b/app/assets/javascripts/label_templates/label_templates_datatable.js deleted file mode 100644 index fb9696a0b..000000000 --- a/app/assets/javascripts/label_templates/label_templates_datatable.js +++ /dev/null @@ -1,306 +0,0 @@ -/* global I18n DataTableHelpers HelperModule */ -/* eslint-disable no-use-before-define no-param-reassign */ - -(function() { - 'use strict'; - - var LABEL_TEMPLATE_TABLE; - var rowsSelected = []; - - function rowsSelectedIDs() { - return rowsSelected.map(i => i.id); - } - - function renderCheckboxHTML(data) { - return `
- - -
`; - } - - function renderDefaultTemplateHTML(data) { - return data ? '' : ''; - } - - function renderNameHTML(data, type, row) { - return `
${data.icon_image_tag}${data.name}
`; - } - - function addAttributesToRow(row, data) { - $(row).addClass('label-template-row') - .attr('data-id', data['0']); - } - - function initNameClick() { - $('.label-info-link', '.dataTables_scrollBody').on('click', function() { - window.location.href = this.href; - return false; - }); - } - - function initToggleAllCheckboxes() { - $('input[name="select_all"]').change(function() { - if ($(this).is(':checked')) { - $("[data-action='toggle']").prop('checked', true); - $('.label-template-row').addClass('selected'); - $('.label-template-row [data-action="toggle"]').change(); - } else { - $("[data-action='toggle']").prop('checked', false); - $('.label-template-row').removeClass('selected'); - $('.label-template-row [data-action="toggle"]').change(); - } - }); - } - - function initCreateButton() { - $('#newLabelTemplate').on('click', function() { - $.post(this.dataset.url); - }); - } - - function initSetDefaultButton() { - $(document).on('click', '#setZplDefaultLabelTemplate, #setFluicsDefaultLabelTemplate', function(e) { - e.preventDefault(); - e.stopPropagation(); - - if (rowsSelected.length === 1) { - $.post(rowsSelected[0].setDefaultUrl, function(response) { - reloadTable(); - HelperModule.flashAlertMsg(response.message, 'success'); - }).fail((response) => { - HelperModule.flashAlertMsg(response.responseJSON.error, 'danger'); - }); - } - }); - } - - function initEditButton() { - $('#editTemplate').on('click', function() { - if (rowsSelected.length === 1) { - window.location.href = rowsSelected[0].editUrl; - } - }); - } - - function initDuplicateButton() { - $(document).on('click', '#duplicateLabelTemplate', function(e) { - e.preventDefault(); - e.stopPropagation(); - - if (rowsSelected.length > 0) { - $.post(this.dataset.url, { selected_ids: rowsSelectedIDs() }, function(response) { - reloadTable(); - HelperModule.flashAlertMsg(response.message, 'success'); - }).fail((response) => { - HelperModule.flashAlertMsg(response.responseJSON.error, 'danger'); - }); - } - }); - } - - function initDeleteModal() { - $(document).on('click', '#deleteLabelTemplate', function(e) { - e.preventDefault(); - e.stopPropagation(); - - $('#deleteLabelTemplatesModal').modal('show'); - }); - } - - function initDeleteButton() { - $('#confirmLabeleDeletion').on('click', function() { - if (rowsSelected.length > 0) { - $.post(this.dataset.url, { selected_ids: rowsSelectedIDs() }, function(response) { - reloadTable(); - HelperModule.flashAlertMsg(response.message, 'success'); - $('#deleteLabelTemplatesModal').modal('hide'); - }).fail((response) => { - HelperModule.flashAlertMsg(response.responseJSON.error, 'danger'); - $('#deleteLabelTemplatesModal').modal('hide'); - }); - } - }); - } - - function initRefreshFluicsButton() { - $('#syncFluicsTemplates').on('click', function() { - $.post(this.dataset.url, function(response) { - reloadTable(); - HelperModule.flashAlertMsg(response.message, 'success'); - }).fail((response) => { - HelperModule.flashAlertMsg(response.responseJSON.error, 'danger'); - }); - }); - } - - function tableDrawCallback() { - initToggleAllCheckboxes(); - initRowSelection(); - initNameClick(); - } - - function updateButtons() { - if (window.actionToolbarComponent) { - window.actionToolbarComponent.fetchActions({ label_template_ids: rowsSelectedIDs() }); - $('.dataTables_scrollBody').css('padding-bottom', `${rowsSelectedIDs().length > 0 ? 68 : 0}px`); - } - } - - function reloadTable() { - LABEL_TEMPLATE_TABLE.ajax.reload(null, false); - rowsSelected = []; - updateButtons(); - } - - function updateDataTableSelectAllCtrl() { - var $table = LABEL_TEMPLATE_TABLE.table().node(); - var $header = LABEL_TEMPLATE_TABLE.table().header(); - var $chkboxAll = $('.label-row-checkbox', $table); - var $chkboxChecked = $('.label-row-checkbox:checked', $table); - var chkboxSelectAll = $('input[name="select_all"]', $header).get(0); - - // If none of the checkboxes are checked - if ($chkboxChecked.length === 0) { - chkboxSelectAll.checked = false; - if ('indeterminate' in chkboxSelectAll) { - chkboxSelectAll.indeterminate = false; - } - - // If all of the checkboxes are checked - } else if ($chkboxChecked.length === $chkboxAll.length) { - chkboxSelectAll.checked = true; - if ('indeterminate' in chkboxSelectAll) { - chkboxSelectAll.indeterminate = false; - } - - // If some of the checkboxes are checked - } else { - chkboxSelectAll.checked = true; - if ('indeterminate' in chkboxSelectAll) { - chkboxSelectAll.indeterminate = true; - } - } - } - - function initRowSelection() { - // Handle clicks on checkbox - $('#label-templates-table').on('change', '.label-row-checkbox', function(ev) { - var rowId; - var index; - var row; - - rowId = this.dataset.labelTemplateId; - row = $(this).closest('tr')[0]; - - // Determine whether row ID is in the list of selected row IDs - index = rowsSelected.findIndex(v => v.id === rowId); - - // If checkbox is checked and row ID is not in list of selected row IDs - if (this.checked && index === -1) { - rowsSelected.push({ - id: rowId, - default: row.dataset.default, - editUrl: row.dataset.editUrl, - setDefaultUrl: row.dataset.setDefaultUrl, - format: row.dataset.format - }); - // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs - } else if (!this.checked && index !== -1) { - rowsSelected.splice(index, 1); - } - - if (this.checked) { - $(this).closest('.label-template-row').addClass('selected'); - } else { - $(this).closest('.label-template-row').removeClass('selected'); - } - - updateDataTableSelectAllCtrl(); - - ev.stopPropagation(); - updateButtons(); - }); - } - // INIT - - function initDatatable() { - var $table = $('#label-templates-table'); - LABEL_TEMPLATE_TABLE = $table.DataTable({ - dom: "R<'label-toolbar'<'label-buttons-container'><'label-search-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>", - order: [[2, 'desc']], - stateSave: true, - sScrollX: '100%', - sScrollXInner: '100%', - processing: true, - serverSide: true, - ajax: $table.data('source'), - pagingType: 'simple_numbers', - colReorder: { - fixedColumnsLeft: 1000000 // Disable reordering - }, - columnDefs: [{ - targets: 0, - searchable: false, - orderable: false, - className: 'dt-body-center', - sWidth: '1%', - render: renderCheckboxHTML - }, { - targets: 1, - searchable: false, - orderable: true, - width: '1.5rem', - render: renderDefaultTemplateHTML - }, { - targets: 2, - className: 'label-template-name', - render: renderNameHTML - }, { - targets: 4, - className: 'whitespace-break-spaces', - render: data => `${data}` - }], - oLanguage: { - sSearch: I18n.t('general.filter') - }, - fnDrawCallback: tableDrawCallback, - createdRow: addAttributesToRow, - fnInitComplete: function() { - DataTableHelpers.initLengthAppearance($table.closest('.dataTables_wrapper')); - DataTableHelpers.initSearchField( - $table.closest('.dataTables_wrapper'), - I18n.t('label_templates.index.search_templates') - ); - $('.pagination-row').removeClass('hidden'); - - let toolBar = $($('#labelTemplatesToolbar').html()); - $('.label-buttons-container').html(toolBar); - - initCreateButton(); - initEditButton(); - initSetDefaultButton(); - initDuplicateButton(); - initDeleteModal(); - initRefreshFluicsButton(); - window.initActionToolbar(); - window.actionToolbarComponent.setBottomOffset(68); - }, - stateLoadParams: function(_, state) { - state.search.search = ''; - } - }); - } - - $('#wrapper').on('sideBar::shown sideBar::hidden', function() { - if (LABEL_TEMPLATE_TABLE) { - LABEL_TEMPLATE_TABLE.columns.adjust(); - } - }); - - initDatatable(); - initDeleteButton(); -}()); diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss index cd047333f..f7ac29dd3 100644 --- a/app/assets/stylesheets/application.sass.scss +++ b/app/assets/stylesheets/application.sass.scss @@ -81,6 +81,7 @@ @import "shared/action_toolbar"; @import "shared/assets"; @import "shared/avatar"; +@import "shared/ag_table"; @import "shared/cards"; @import "shared/comments_sidebar"; @import "shared/comments"; @@ -111,6 +112,7 @@ @import "themes/repositories"; @import "themes/scinote"; + @import "navigation/general"; @import "navigation/breadcrumbs"; @import "navigation/left_menu"; diff --git a/app/assets/stylesheets/experiments.scss b/app/assets/stylesheets/experiments.scss index ae8746971..ba504315b 100644 --- a/app/assets/stylesheets/experiments.scss +++ b/app/assets/stylesheets/experiments.scss @@ -22,6 +22,7 @@ } .projects-show { + --content-header-size: 9em; .content-header { height: var(--content-header-size); } diff --git a/app/assets/stylesheets/projects.scss b/app/assets/stylesheets/projects.scss index 1bfd259c6..60a1c18bb 100644 --- a/app/assets/stylesheets/projects.scss +++ b/app/assets/stylesheets/projects.scss @@ -568,6 +568,7 @@ li.module-hover { // New projects page .projects-index { + --content-header-size: 9em; .content-header { height: var(--content-header-size); } diff --git a/app/assets/stylesheets/shared/ag_table.scss b/app/assets/stylesheets/shared/ag_table.scss new file mode 100644 index 000000000..22cae419f --- /dev/null +++ b/app/assets/stylesheets/shared/ag_table.scss @@ -0,0 +1,33 @@ +.ag-root-wrapper { + --agg-row-border-color: var(--sn-light-grey); + --ag-odd-row-background-color: var(--sn-super-light-grey); + --ag-header-background-color: var(--sn-light-grey); + --ag-selected-row-background-color: var(--sn-super-light-blue); + --ag-range-selection-border: var(--sn-science-blue); + --ag-grid-size: .5rem; + --ag-cell-horizontal-padding: calc(var(--ag-grid-size) * 2); + --ag-row-hover-color: var(--sn-super-light-grey); + --ag-header-column-resize-handle-height: 100%; + --ag-header-column-resize-handle-color: var(--sn-sleepy-grey); + --ag-header-column-resize-handle-width: 1px; + --ag-row-border-width: 0px; + --ag-icon-font-code-checkbox-unchecked: asset-url("checkbox/default.svg"); + --ag-icon-font-code-checkbox-checked: asset-url("checkbox/checked.svg"); + --ag-icon-font-code-checkbox-indeterminate: asset-url("checkbox/indeterminate.svg"); + --ag-input-focus-box-shadow: none; + + border: 0; + + .ag-header { + border-bottom: 0; + } + + .ag-input-field-input { + cursor: pointer; + } + + .ag-input-field-input:focus { + outline: none !important; + outline-offset: 0 !important; + } +} diff --git a/app/assets/stylesheets/shared/cards.scss b/app/assets/stylesheets/shared/cards.scss index d0da8331e..7dfc8d614 100644 --- a/app/assets/stylesheets/shared/cards.scss +++ b/app/assets/stylesheets/shared/cards.scss @@ -3,6 +3,7 @@ // scss-lint:disable SelectorFormat .cards-wrapper { + --content-header-size: 9em; --card-min-width: 200px; --list-columns-number: 5; align-items: center; diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss index c72fe6a68..ce83ad7ff 100644 --- a/app/assets/stylesheets/shared/content_pane.scss +++ b/app/assets/stylesheets/shared/content_pane.scss @@ -2,7 +2,7 @@ // scss-lint:disable NestingDepth QualifyingElement .content-pane { - --content-header-size: 9.5em; + --content-header-size: 4em; background-color: var(--sn-white); margin: 20px 0; @@ -14,6 +14,11 @@ margin: 0; } + .fixed-content-body { + height: calc(100vh - var(--content-header-size) - var(--navbar-height)); + width: 100%; + } + .content-header { &.sticky-header { background-color: inherit; diff --git a/app/assets/stylesheets/shared/select.scss b/app/assets/stylesheets/shared/select.scss index 0ccf4fe3c..0748fc248 100644 --- a/app/assets/stylesheets/shared/select.scss +++ b/app/assets/stylesheets/shared/select.scss @@ -76,7 +76,6 @@ left: 0; max-height: 300px; overflow: hidden; - top: 2.5rem; width: 100%; z-index: 9999; } diff --git a/app/assets/stylesheets/tailwind/inputs.css b/app/assets/stylesheets/tailwind/inputs.css index 963aa94bd..a5e40184e 100644 --- a/app/assets/stylesheets/tailwind/inputs.css +++ b/app/assets/stylesheets/tailwind/inputs.css @@ -5,7 +5,7 @@ } .sci-input-container-v2 { - @apply relative h-[2.75rem] flex items-center; + @apply relative h-[2.75rem] flex items-center transition-all; } .sci-input-container-v2.input-sm { diff --git a/app/controllers/label_templates_controller.rb b/app/controllers/label_templates_controller.rb index 3a0d0613b..c9b94a0b4 100644 --- a/app/controllers/label_templates_controller.rb +++ b/app/controllers/label_templates_controller.rb @@ -50,13 +50,11 @@ class LabelTemplatesController < ApplicationController label_template.last_modified_by = current_user label_template.save! log_activity(:label_template_created, label_template) - redirect_to label_template_path(label_template, new_label: true) + render json: { redirect_url: label_template_path(label_template, new_label: true) } end rescue StandardError => e Rails.logger.error(e.message) Rails.logger.error(e.backtrace.join("\n")) - flash[:error] = I18n.t('errors.general') - redirect_to label_templates_path end def update @@ -154,7 +152,7 @@ class LabelTemplatesController < ApplicationController actions: Toolbars::LabelTemplatesService.new( current_user, - label_template_ids: params[:label_template_ids].split(',') + label_template_ids: params[:item_ids].split(',') ).actions } end diff --git a/app/datatables/custom_datatable_v2.rb b/app/datatables/custom_datatable_v2.rb new file mode 100644 index 000000000..6d55810ef --- /dev/null +++ b/app/datatables/custom_datatable_v2.rb @@ -0,0 +1,71 @@ +# frozen_string_literal: true + +class CustomDatatableV2 + attr_reader :params, :options + + def initialize(view, raw_data, options = {}) + @raw_data = raw_data + @params = view.params + @options = options + end + + def as_json(_options = {}) + { + data: data, + pageTotal: records.total_pages + } + end + + def records + @records ||= fetch_records + end + + private + + def order_params + @order_params ||= + params.require(:order).permit(:column, :dir).to_h + end + + def fetch_records + records = get_raw_records + records = sort_records(records) if params[:order].present? + records = paginate_records(records) if params[:page].present? + records = filter_records(records) if params[:search].present? + records + end + + def paginate_records(records) + records.page(params[:page]).per(params[:per_page]) + end + + def sort_direction(order_params) + order_params[:dir] == 'asc' ? 'ASC' : 'DESC' + end + + def sort_records(records) + sort_by = "#{sortable_columns[order_params[:column].to_sym]} #{sort_direction(order_params)}" + records.order(sort_by) + end + + def generate_sortable_displayed_columns + @sortable_displayed_columns = [] + columns_params.each_value do |col| + @sortable_displayed_columns << col[:data] if col[:orderable] == 'true' + end + @sortable_displayed_columns + end + + def formated_date + f_date = I18n.backend.date_format.dup + f_date.gsub!(/%-d/, 'FMDD') + f_date.gsub!(/%d/, 'DD') + f_date.gsub!(/%-m/, 'FMMM') + f_date.gsub!(/%m/, 'MM') + f_date.gsub!(/%b/, 'Mon') + f_date.gsub!(/%B/, 'Month') + f_date.gsub!('%Y', 'YYYY') + f_date += ' HH24:MI' + f_date + end +end diff --git a/app/datatables/label_template_datatable.rb b/app/datatables/label_template_datatable.rb index da9928ce0..83d67cfea 100644 --- a/app/datatables/label_template_datatable.rb +++ b/app/datatables/label_template_datatable.rb @@ -1,24 +1,19 @@ # frozen_string_literal: true -class LabelTemplateDatatable < CustomDatatable +class LabelTemplateDatatable < CustomDatatableV2 include InputSanitizeHelper include Rails.application.routes.url_helpers - TABLE_COLUMNS = %w( - label_templates.default - label_templates.name - label_templates.type - label_templates.description - label_templates.modified_by - label_templates.updated_at - label_templates.created_by_user - label_templates.created_at - ).freeze - - def initialize(view, label_templates) - super(view) - @label_templates = label_templates - end + TABLE_COLUMNS = { + default: 'label_templates.default', + name: 'label_templates.name', + format: 'label_templates.type', + description: 'label_templates.description', + modified_by: 'label_templates.modified_by', + updated_at: 'label_templates.updated_at', + created_by: 'label_templates.created_by_user', + created_at: 'label_templates.created_at' + }.freeze def sortable_columns @sortable_columns ||= TABLE_COLUMNS @@ -30,24 +25,25 @@ class LabelTemplateDatatable < CustomDatatable private + def order_params + @order_params ||= + params.require(:order).permit(:column, :dir).to_h + end + def data records.map do |record| { - '0' => record.id, - '1' => record.default, - '2' => append_format_icon(record), - '3' => escape_input(record.label_format), - '4' => escape_input(record.description), - '5' => escape_input(record.modified_by), - '6' => I18n.l(record.updated_at, format: :full), - '7' => escape_input(record.created_by_user), - '8' => I18n.l(record.created_at, format: :full), - 'recordInfoUrl' => '', - 'DT_RowAttr': { - 'data-edit-url': label_template_path(record), - 'data-set-default-url': set_default_label_template_path(record), - 'data-default': record.default, - 'data-format': record.label_format + id: record.id, + default: record.default, + name: append_format_icon(record), + format: escape_input(record.label_format), + description: escape_input(record.description), + modified_by: escape_input(record.modified_by), + updated_at: I18n.l(record.updated_at, format: :full), + created_by: escape_input(record.created_by_user), + created_at: I18n.l(record.created_at, format: :full), + attributes: { + edit_url: label_template_path(record) } } end @@ -65,7 +61,7 @@ class LabelTemplateDatatable < CustomDatatable end def get_raw_records - res = @label_templates.joins( + res = @raw_data.joins( 'LEFT OUTER JOIN users AS creators ' \ 'ON label_templates.created_by_id = creators.id' ).joins( @@ -85,7 +81,7 @@ class LabelTemplateDatatable < CustomDatatable records.where_attributes_like( ['label_templates.name', 'label_templates.label_format', 'label_templates.description', 'label_templates.modified_by', 'label_templates.created_by_user'], - dt_params.dig(:search, :value) + params[:search] ) end end diff --git a/app/javascript/packs/application.scss b/app/javascript/packs/application.scss index 848cb108a..9180b881a 100644 --- a/app/javascript/packs/application.scss +++ b/app/javascript/packs/application.scss @@ -1 +1,3 @@ -@import "bootstrap-select/sass/bootstrap-select" +@import "bootstrap-select/sass/bootstrap-select"; +@import "ag-grid-community/styles/ag-grid.css"; +@import "ag-grid-community/styles/ag-theme-alpine.css"; diff --git a/app/javascript/packs/vue/label_templates_table.js b/app/javascript/packs/vue/label_templates_table.js new file mode 100644 index 000000000..f9a1d8532 --- /dev/null +++ b/app/javascript/packs/vue/label_templates_table.js @@ -0,0 +1,19 @@ +import TurbolinksAdapter from 'vue-turbolinks'; +import Vue from 'vue/dist/vue.esm'; +import PerfectScrollbar from 'vue2-perfect-scrollbar'; +import LabelTemplatesTable from '../../vue/label_template/table.vue'; + +Vue.use(TurbolinksAdapter); +Vue.use(PerfectScrollbar); +Vue.prototype.i18n = window.I18n; + +window.initLabelTemplatesTableComponent = () => { + new Vue({ + el: '#labelTemplatesTable', + components: { + 'label-templates-table': LabelTemplatesTable, + }, + }); +}; + +initLabelTemplatesTableComponent(); diff --git a/app/javascript/vue/label_template/table.vue b/app/javascript/vue/label_template/table.vue new file mode 100644 index 000000000..275fd8ee6 --- /dev/null +++ b/app/javascript/vue/label_template/table.vue @@ -0,0 +1,154 @@ + + + diff --git a/app/javascript/vue/shared/confirmation_modal.vue b/app/javascript/vue/shared/confirmation_modal.vue new file mode 100644 index 000000000..19b6f6498 --- /dev/null +++ b/app/javascript/vue/shared/confirmation_modal.vue @@ -0,0 +1,76 @@ + + \ No newline at end of file diff --git a/app/javascript/vue/shared/datatable/action_toolbar.vue b/app/javascript/vue/shared/datatable/action_toolbar.vue new file mode 100644 index 000000000..9b916fc0c --- /dev/null +++ b/app/javascript/vue/shared/datatable/action_toolbar.vue @@ -0,0 +1,72 @@ + + + diff --git a/app/javascript/vue/shared/datatable/pagination.vue b/app/javascript/vue/shared/datatable/pagination.vue new file mode 100644 index 000000000..0db05e1a7 --- /dev/null +++ b/app/javascript/vue/shared/datatable/pagination.vue @@ -0,0 +1,57 @@ + + + diff --git a/app/javascript/vue/shared/datatable/table.vue b/app/javascript/vue/shared/datatable/table.vue new file mode 100644 index 000000000..8541e3980 --- /dev/null +++ b/app/javascript/vue/shared/datatable/table.vue @@ -0,0 +1,237 @@ + + + diff --git a/app/javascript/vue/shared/datatable/tableHeader.js b/app/javascript/vue/shared/datatable/tableHeader.js new file mode 100644 index 000000000..602796479 --- /dev/null +++ b/app/javascript/vue/shared/datatable/tableHeader.js @@ -0,0 +1,40 @@ +export default { + template: ` +
+
+
{{ params.displayName }}
+
+ +
+
+ +
+
+ `, + data() { + return { + activeSort: null, + }; + }, + beforeMount() {}, + mounted() { + this.params.column.addEventListener('sortChanged', this.onSortChanged); + this.onSortChanged(); + }, + methods: { + onSortChanged() { + this.activeSort = null; + if (this.params.column.isSortAscending()) { + this.activeSort = 'asc'; + } else if (this.params.column.isSortDescending()) { + this.activeSort = 'desc'; + } + }, + + onSortRequested(order, event) { + if (!this.params.enableSorting) return; + + this.params.setSort(order, event.shiftKey); + }, + }, +}; diff --git a/app/javascript/vue/shared/datatable/toolbar.vue b/app/javascript/vue/shared/datatable/toolbar.vue new file mode 100644 index 000000000..3a50a6bfd --- /dev/null +++ b/app/javascript/vue/shared/datatable/toolbar.vue @@ -0,0 +1,82 @@ + + + diff --git a/app/javascript/vue/shared/select.vue b/app/javascript/vue/shared/select.vue index 2077200ab..824efdd81 100644 --- a/app/javascript/vue/shared/select.vue +++ b/app/javascript/vue/shared/select.vue @@ -116,8 +116,10 @@ updateOptionPosition() { const container = $(this.$refs.container); const rect = container.get(0).getBoundingClientRect(); + const screenHeight = window.innerHeight; let width = rect.width; let top = rect.top + rect.height; + let bottom = screenHeight - rect.bottom + rect.height; let left = rect.left; const modal = container.parents('.modal-content'); @@ -125,10 +127,23 @@ if (modal.length > 0) { const modalRect = modal.get(0).getBoundingClientRect(); top -= modalRect.top; + bottom -= modalRect.bottom; left -= modalRect.left; } - this.optionPositionStyle = `position: fixed; top: ${top}px; left: ${left}px; width: ${width}px` + if (rect.bottom > screenHeight / 2) { + this.optionPositionStyle = ` + position: fixed; + bottom: ${bottom}px; + left: ${left}px; + width: ${width}px` + } else { + this.optionPositionStyle = ` + position: fixed; + top: ${top}px; + left: ${left}px; + width: ${width}px` + } }, setUpBlurHandlers() { setTimeout(() => { diff --git a/app/services/toolbars/label_templates_service.rb b/app/services/toolbars/label_templates_service.rb index 3dae82c71..f0baa4c4a 100644 --- a/app/services/toolbars/label_templates_service.rb +++ b/app/services/toolbars/label_templates_service.rb @@ -56,8 +56,8 @@ module Toolbars name: 'set_as_default', label: I18n.t("label_templates.index.toolbar.set_#{@label_templates.first.type}_default"), icon: 'fas fa-thumbtack', - button_id: 'setZplDefaultLabelTemplate', - type: :legacy + path: set_default_label_template_path(@label_templates.first), + type: :emit } end @@ -70,9 +70,8 @@ module Toolbars name: 'duplicate', label: I18n.t('label_templates.index.toolbar.duplicate'), icon: 'sn-icon sn-icon-duplicate', - button_id: 'duplicateLabelTemplate', path: duplicate_label_templates_path, - type: :legacy + type: :emit } end @@ -87,8 +86,8 @@ module Toolbars name: 'delete', label: I18n.t('label_templates.index.toolbar.delete'), icon: 'sn-icon sn-icon-delete', - button_id: 'deleteLabelTemplate', - type: :legacy + path: delete_label_templates_path, + type: :emit } end end diff --git a/app/views/label_templates/_delete_modal.html.erb b/app/views/label_templates/_delete_modal.html.erb deleted file mode 100644 index 26822227b..000000000 --- a/app/views/label_templates/_delete_modal.html.erb +++ /dev/null @@ -1,20 +0,0 @@ - diff --git a/app/views/label_templates/_index_toolbar.html.erb b/app/views/label_templates/_index_toolbar.html.erb deleted file mode 100644 index 5aa8bc1fa..000000000 --- a/app/views/label_templates/_index_toolbar.html.erb +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/app/views/label_templates/index.html.erb b/app/views/label_templates/index.html.erb index ee499e6c6..29646202b 100644 --- a/app/views/label_templates/index.html.erb +++ b/app/views/label_templates/index.html.erb @@ -1,60 +1,23 @@ <% if current_team %> <% provide(:sidebar_title, t('sidebar.templates.sidebar_title')) %> <% provide(:container_class, "no-second-nav-container") %> - <%= content_for :sidebar do %> - <%= render partial: "/shared/sidebar/templates_sidebar", locals: {active: :label} %> - <% end %> - - <% content_for :head do %> - - <% end %> - - <%= stylesheet_link_tag 'datatables' %> - - -
-
-
-

- <%= t('label_templates.index.head_title') %> -

+
+
+
+

+ <%= t('label_templates.index.head_title') %> +

+
+
+
+
-
-
- - - - - - - - - - - - - - - -
-
- - -
- 		<%= t('label_templates.index.thead_name') %><%= t('label_templates.index.format') %><%= t('label_templates.index.description') %><%= t('label_templates.index.updated_by') %><%= t('label_templates.index.updated_at') %><%= t('label_templates.index.created_by') %><%= t('label_templates.index.created_at') %>
-
- -
- -
-
-
- - <%= render partial: "index_toolbar" %> - <%= render partial: "delete_modal" %> - <%= javascript_include_tag 'label_templates/label_templates_datatable' %> - <%= javascript_include_tag 'vue_components_action_toolbar' %> + <%= javascript_include_tag 'vue_label_templates_table' %> <% end %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index a3eb3711c..46c3ceef4 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -89,7 +89,6 @@ Rails.application.config.assets.precompile += %w(reports/reports_datatable.js) Rails.application.config.assets.precompile += %w(reports/save_pdf_to_inventory.js) Rails.application.config.assets.precompile += %w(reports/content.js) Rails.application.config.assets.precompile += %w(session_end.js) -Rails.application.config.assets.precompile += %w(label_templates/label_templates_datatable.js) Rails.application.config.assets.precompile += %w(users/connected_devices.js) Rails.application.config.assets.precompile += %w(BrowserPrint-3.0.216.min.js) Rails.application.config.assets.precompile += %w(BrowserPrint-Zebra-1.0.216.min.js) diff --git a/config/locales/en.yml b/config/locales/en.yml index 1e094ea7e..53c139dac 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -3583,6 +3583,9 @@ en: secret_key_hint: "(Optional) A secret key that will be included in the Webhook-Secret-Key header, for authentication purposes." # This section contains general words that can be used in any parts of # application. + datatable: + show: 'Show:' + rows: 'rows' tiny_mce: upload_window_title: 'Insert an image from your computer' upload_window_label: 'Choose an image' @@ -3603,6 +3606,7 @@ en: edit: "Edit" delete: "Delete" cancel: "Cancel" + confirm: "Confirm" duplicate: "Duplicate" okay: "Okay" back: "Back" diff --git a/config/routes.rb b/config/routes.rb index 9842565fb..aa4930395 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -58,7 +58,7 @@ Rails.application.routes.draw do end collection do post :duplicate - post :delete + delete :delete get :datatable get :template_tags get :zpl_preview diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js index ca96f71fe..caf4f4900 100644 --- a/config/webpack/webpack.config.js +++ b/config/webpack/webpack.config.js @@ -41,7 +41,8 @@ const entryList = { vue_components_action_toolbar: './app/javascript/packs/vue/action_toolbar.js', vue_components_open_vector_editor: './app/javascript/packs/vue/open_vector_editor.js', vue_navigation_breadcrumbs: './app/javascript/packs/vue/navigation/breadcrumbs.js', - vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js' + vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js', + vue_label_templates_table: './app/javascript/packs/vue/label_templates_table.js' } // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949 @@ -125,7 +126,10 @@ module.exports = { }, resolve: { // Add additional file types - extensions: ['.js', '.jsx', '.scss', '.css', '.vue', '.less'] + extensions: ['.js', '.jsx', '.scss', '.css', '.vue', '.less'], + alias: { + 'vue$': 'vue/dist/vue.esm.js' + } }, plugins: [ new webpack.optimize.LimitChunkCountPlugin({ diff --git a/package.json b/package.json index f89043cc3..671fcfa2f 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ "@fortawesome/fontawesome-free": "^5.2.0", "@joeattardi/emoji-button": "^4.6.2", "@teselagen/ove": "^0.3.15", + "ag-grid-community": "^30.1.0", + "ag-grid-vue": "^30.1.0", "ajv": "6.12.6", "autoprefixer": "10.4.14", "axios": "^1.4.0", @@ -78,6 +80,7 @@ "twemoji": "^12.1.4", "vue": "^2.6.11", "vue-loader": "^15.9.1", + "vue-property-decorator": "^8.0.0", "vue-template-compiler": "^2.6.12", "vue-turbolinks": "^2.2.1", "vue2-perfect-scrollbar": "^1.5.56", diff --git a/yarn.lock b/yarn.lock index 7b400826b..c499e7fd2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1780,6 +1780,16 @@ acorn@^8.2.4, acorn@^8.5.0, acorn@^8.7.1: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a" integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== +ag-grid-community@^30.1.0: + version "30.1.0" + resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-30.1.0.tgz#50c532df2e6cc22596300b801651eca76459a189" + integrity sha512-D69e63CUALxfgLZSu1rXC8Xiyhu6+17zxzTV8cWsyvt5GeSDv2frQ3BKOqGZbUfVoOCLv2SQoHVTTqw8OjxavA== + +ag-grid-vue@^30.1.0: + version "30.1.0" + resolved "https://registry.yarnpkg.com/ag-grid-vue/-/ag-grid-vue-30.1.0.tgz#79d43c5884aefe63c9169f6294f23343d7e8d7b9" + integrity sha512-5ALSbCG5u4g5Lt1nVVYD5fMLA3WhLd3sR92fCTKKGlCCoZrrnNdoqwf9q1wO1/ZbhwBp1t8c+JmfUsnzS3wFcg== + agent-base@6, agent-base@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77" @@ -7302,6 +7312,11 @@ vm-browserify@^1.1.2: resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0" integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ== +vue-class-component@^7.1.0: + version "7.2.6" + resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4" + integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w== + vue-hot-reload-api@^2.3.0: version "2.3.4" resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" @@ -7318,6 +7333,13 @@ vue-loader@^15.9.1: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" +vue-property-decorator@^8.0.0: + version "8.5.1" + resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.5.1.tgz#571a91cf8d2b507f537d79bf8275af3184572fff" + integrity sha512-O6OUN2OMsYTGPvgFtXeBU3jPnX5ffQ9V4I1WfxFQ6dqz6cOUbR3Usou7kgFpfiXDvV7dJQSFcJ5yUPgOtPPm1Q== + dependencies: + vue-class-component "^7.1.0" + vue-style-loader@^4.1.0: version "4.1.3" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz#6d55863a51fa757ab24e89d9371465072aa7bc35"