mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-26 01:35:34 +08:00
Improve UI for for exports in inventory with stock enabled [SCI-9225]
This commit is contained in:
wandji20
parent
a1cbfa9736
commit
213c752941
4 changed files with 110 additions and 21 deletions
|
|
@ -1,5 +1,6 @@
|
|||
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
|
||||
// scss-lint:disable NestingDepth ImportantRule
|
||||
// scss-lint:disable IdSelector
|
||||
|
||||
.repository-show {
|
||||
margin: 0;
|
||||
|
|
@ -100,6 +101,41 @@
|
|||
}
|
||||
}
|
||||
|
||||
#actionToolbar {
|
||||
#exportDropdown {
|
||||
background-color: var(--sn-white);
|
||||
color: var(--sn-blue);
|
||||
height: 36px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--sn-blue);
|
||||
color: var(--sn-white);
|
||||
}
|
||||
}
|
||||
|
||||
.sci-dropdown {
|
||||
&.open {
|
||||
[data-toggle="dropdown"] {
|
||||
border-color: transparent;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding: .5rem;
|
||||
|
||||
li > a {
|
||||
color: var(--sn-blue);
|
||||
padding: .375rem .625rem;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-concrete;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -11,22 +11,62 @@
|
|||
{{ i18n.t('action_toolbar.no_actions') }}
|
||||
</div>
|
||||
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action shrink-0">
|
||||
<a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.button_class}`"
|
||||
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
|
||||
:id="action.button_id"
|
||||
:title="action.label"
|
||||
:data-url="action.path"
|
||||
:data-target="action.target"
|
||||
:data-toggle="action.type === 'modal' && 'modal'"
|
||||
:data-object-type="action.item_type"
|
||||
:data-object-id="action.item_id"
|
||||
:data-action="action.type"
|
||||
@click="doAction(action, $event)">
|
||||
<i :class="action.icon"></i>
|
||||
<span class="sn-action-toolbar__button-text">{{ action.label }}</span>
|
||||
</a>
|
||||
<div v-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length > 1" class="export-actions-dropdown sci-dropdown dropup">
|
||||
<button class="btn btn-primary dropdown-toggle single-object-action rounded" type="button" id="exportDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
|
||||
<i class="sn-icon sn-icon-export"></i>
|
||||
<span>{{ action.group_label }}</span>
|
||||
<span class="caret pull-right"></span>
|
||||
</button>
|
||||
<ul class="sci-dropdown dropup dropdown-menu dropdown-menu-right px-2" aria-labelledby="<%= id %>">
|
||||
<li v-for="groupAction in action.actions" class="">
|
||||
<a :class="`flex gap-2 items-center bg-sn-white color-sn-blue no-underline ${action.button_class}`"
|
||||
:href="(['link', 'remote-modal']).includes(groupAction.type) ? groupAction.path : '#'"
|
||||
:id="groupAction.button_id"
|
||||
:title="groupAction.label"
|
||||
:data-url="groupAction.path"
|
||||
:data-target="groupAction.target"
|
||||
:data-toggle="groupAction.type === 'modal' && 'modal'"
|
||||
:data-object-type="groupAction.item_type"
|
||||
:data-object-id="groupAction.item_id"
|
||||
:data-action="groupAction.type"
|
||||
@click="closeExportDropdown($event); doAction(groupAction, $event);">
|
||||
<span class="sn-action-toolbar__button-text">{{ groupAction.label }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.actions[0].button_class}`"
|
||||
v-else-if="action.type === 'group' && Array.isArray(action.actions) && action.actions.length == 1"
|
||||
:href="(['link', 'remote-modal']).includes(action.actions[0].type) ? action.actions[0].path : '#'"
|
||||
:id="action.actions[0].button_id"
|
||||
:title="action.group_label"
|
||||
:data-url="action.actions[0].path"
|
||||
:data-target="action.actions[0].target"
|
||||
:data-toggle="action.actions[0].type === 'modal' && 'modal'"
|
||||
:data-object-type="action.actions[0].item_type"
|
||||
:data-object-id="action.actions[0].item_id"
|
||||
:data-action="action.actions[0].type"
|
||||
@click="doAction(action.actions[0], $event);">
|
||||
<i :class="action.actions[0].icon"></i>
|
||||
<span class="sn-action-toolbar__button-text">{{ action.group_label }}</span>
|
||||
</a>
|
||||
<a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.button_class}`"
|
||||
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
|
||||
:id="action.button_id"
|
||||
:title="action.label"
|
||||
:data-url="action.path"
|
||||
:data-target="action.target"
|
||||
v-else
|
||||
:data-toggle="action.type === 'modal' && 'modal'"
|
||||
:data-object-type="action.item_type"
|
||||
:data-object-id="action.item_id"
|
||||
:data-action="action.type"
|
||||
@click="doAction(action, $event)">
|
||||
<i :class="action.icon"></i>
|
||||
<span class="sn-action-toolbar__button-text">{{ action.label }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -151,6 +191,10 @@
|
|||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
closeExportDropdown(event) {
|
||||
event.preventDefault();
|
||||
$(event.target).closest('.export-actions-dropdown').removeClass('open')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,8 +32,7 @@ module Toolbars
|
|||
edit_action,
|
||||
assign_action,
|
||||
duplicate_action,
|
||||
export_items_action,
|
||||
export_consumption_action,
|
||||
export_actions,
|
||||
print_label_action,
|
||||
archive_action,
|
||||
delete_action
|
||||
|
|
@ -107,7 +106,7 @@ module Toolbars
|
|||
|
||||
{
|
||||
name: 'export_records',
|
||||
label: I18n.t('repositories.export_records'),
|
||||
label: I18n.t('repositories.exports.records'),
|
||||
icon: 'sn-icon sn-icon-export',
|
||||
button_class: 'export-repository-row-btn',
|
||||
button_id: 'exportRepositoryRowsButton',
|
||||
|
|
@ -120,7 +119,7 @@ module Toolbars
|
|||
|
||||
{
|
||||
name: 'export_consumption',
|
||||
label: I18n.t('repositories.export_stock_consumption'),
|
||||
label: I18n.t('repositories.exports.stock_consumption'),
|
||||
icon: 'sn-icon sn-icon-reports',
|
||||
button_class: 'export-repository-stock-consumption-btn',
|
||||
button_id: 'exportStockConsumptionButton',
|
||||
|
|
@ -128,6 +127,14 @@ module Toolbars
|
|||
}
|
||||
end
|
||||
|
||||
def export_actions
|
||||
{
|
||||
type: :group,
|
||||
group_label: I18n.t('repositories.exports.export'),
|
||||
actions: [export_items_action, export_consumption_action].compact
|
||||
}
|
||||
end
|
||||
|
||||
def print_label_action
|
||||
return unless can_read_repository?(@repository)
|
||||
|
||||
|
|
|
|||
|
|
@ -2107,8 +2107,10 @@ en:
|
|||
archive_record: "Archive"
|
||||
restore_record: "Restore"
|
||||
print_label: "Print label"
|
||||
export_records: "Export items"
|
||||
export_stock_consumption: "Export consumption"
|
||||
exports:
|
||||
export: "Export"
|
||||
records: "Items"
|
||||
stock_consumption: "Consumption"
|
||||
save_record: "Save"
|
||||
cancel_save: "Cancel"
|
||||
hide_reminders: "Clear all reminders"
|
||||
|
|
|
|||
Loading…
Reference in a new issue