tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds popup list to allow open item on new tab and other actions for items list on admin. Ref. #212

This commit is contained in:
Mateus Machado Luna 2019-03-14 11:42:50 -03:00
parent 5b79a6b1a2
commit 1f69554548
3 changed files with 120 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/admin/components/lists/items-list.vue
View File

@ -73,6 +73,48 @@
<div class="table-wrapper"> <div class="table-wrapper">
<!-- Context menu for right click selection -->
<div
v-if="cursorPosY > 0 && cursorPosX > 0"
class="context-menu">
<!-- Backdrop for escaping context menu -->
<div
@click.left="clearContextMenu()"
@click.right="clearContextMenu()"
class="context-menu-backdrop" />
<b-dropdown
inline
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }">
<b-dropdown-item
@click="openItem()"
v-if="!isOnTrash">
{{ $i18n.get('label_open_item') }}
</b-dropdown-item>
<b-dropdown-item
@click="openItemOnNewTab()"
v-if="!isOnTrash">
{{ $i18n.get('label_open_item_new_tab') }}
</b-dropdown-item>
<b-dropdown-item
@click="selectItem()"
v-if="contextMenuIndex != null">
{{ !selectedItems[contextMenuIndex] ? $i18n.get('label_select_item') : $i18n.get('label_unselect_item') }}
</b-dropdown-item>
<b-dropdown-item
@click="goToItemEditPage(contextMenuItem)"
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit">
{{ $i18n.get('title_edit_item') }}
</b-dropdown-item>
<b-dropdown-item
@click="deleteOneItem(contextMenuItem.id)"
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit">
{{ $i18n.get('label_delete_item') }}
</b-dropdown-item>
</b-dropdown>
</div>
<!-- GRID (THUMBNAILS) VIEW MODE --> <!-- GRID (THUMBNAILS) VIEW MODE -->
<div <div
role="list" role="list"
@ -114,7 +156,8 @@
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
@click="onClickItem($event, item, index)"> @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)">
{{ item.title != undefined ? item.title : '' }} {{ item.title != undefined ? item.title : '' }}
</p> </p>
</div> </div>
@ -122,7 +165,8 @@
<!-- Thumbnail --> <!-- Thumbnail -->
<a <a
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
@click="onClickItem($event, item, index)" @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)"
class="grid-item-thumbnail" class="grid-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"> :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }">
<img <img
@ -213,7 +257,8 @@
<!-- Thumbnail --> <!-- Thumbnail -->
<div <div
@click="onClickItem($event, item, index)" @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }"> :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium-full'] ? item['thumbnail']['tainacan-medium-full'][0] : (item['thumbnail'].medium_large ? item['thumbnail'].medium_large[0] : thumbPlaceholderPath)) + ')' }">
@ -297,7 +342,8 @@
autoHide: false, autoHide: false,
placement: 'auto-start' placement: 'auto-start'
}" }"
@click="onClickItem($event, item, index)"> @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)">
{{ item.title != undefined ? item.title : '' }} {{ item.title != undefined ? item.title : '' }}
</p> </p>
</div> </div>
@ -339,7 +385,8 @@
<!-- Remaining metadata --> <!-- Remaining metadata -->
<div <div
class="media" class="media"
@click="onClickItem($event, item, index)"> @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)">
<div <div
:style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }" :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
class="card-thumbnail"> class="card-thumbnail">
@ -449,7 +496,8 @@
v-for="(column, columnIndex) in tableMetadata" v-for="(column, columnIndex) in tableMetadata"
:key="columnIndex" :key="columnIndex"
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click="onClickItem($event, item, index)" @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)"
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" /> v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
<p <p
v-tooltip="{ v-tooltip="{
@ -465,7 +513,8 @@
v-for="(column, columnIndex) in tableMetadata" v-for="(column, columnIndex) in tableMetadata"
:key="columnIndex" :key="columnIndex"
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')" v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
@click="onClickItem($event, item, index)" @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)"
v-html="item.title != undefined ? item.title : ''" /> v-html="item.title != undefined ? item.title : ''" />
</div> </div>
<!-- Actions --> <!-- Actions -->
@ -506,7 +555,8 @@
<!-- Remaining metadata --> <!-- Remaining metadata -->
<div <div
class="media" class="media"
@click="onClickItem($event, item, index)"> @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)">
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<div class="tainacan-record-thumbnail"> <div class="tainacan-record-thumbnail">
<img <img
@ -611,7 +661,8 @@
column.metadata_type_object.primitive_type == 'compound') : false, column.metadata_type_object.primitive_type == 'compound') : false,
'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false, 'column-large-width' : column.metadata_type_object != undefined ? (column.metadata_type_object.primitive_type == 'long_string' || column.metadata_type_object.related_mapped_prop == 'description') : false,
}" }"
@click="onClickItem($event, item, index)"> @click.left="onClickItem($event, item, index)"
@click.right="onRightClickItem($event, item, index)">
<p <p
v-tooltip="{ v-tooltip="{
@ -745,6 +796,10 @@ export default {
selectedItemsIDs: [], selectedItemsIDs: [],
queryAllItemsSelected: {}, queryAllItemsSelected: {},
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png', thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
cursorPosX: -1,
cursorPosY: -1,
contextMenuIndex: null,
contextMenuItem: null
} }
}, },
props: { props: {
@ -958,6 +1013,25 @@ export default {
} }
}); });
}, },
openItem() {
if (this.contextMenuItem != null) {
this.$router.push(this.$routerHelper.getItemPath(this.contextMenuItem.collection_id, this.contextMenuItem.id));
}
this.clearContextMenu();
},
openItemOnNewTab() {
if (this.contextMenuItem != null) {
let routeData = this.$router.resolve(this.$routerHelper.getItemPath(this.contextMenuItem.collection_id, this.contextMenuItem.id));
window.open(routeData.href, '_blank');
}
this.clearContextMenu();
},
selectItem() {
if (this.contextMenuIndex != null) {
this.$set(this.selectedItems, this.contextMenuIndex, !this.selectedItems[this.contextMenuIndex]);
}
this.clearContextMenu();
},
onClickItem($event, item, index) { onClickItem($event, item, index) {
if ($event.ctrlKey || $event.shiftKey) { if ($event.ctrlKey || $event.shiftKey) {
this.$set(this.selectedItems, index, !this.selectedItems[index]); this.$set(this.selectedItems, index, !this.selectedItems[index]);
@ -974,6 +1048,20 @@ export default {
} }
} }
}, },
onRightClickItem($event, item, index) {
$event.preventDefault();
this.cursorPosX = $event.clientX;
this.cursorPosY = $event.clientY;
this.contextMenuItem = item;
this.contextMenuIndex = index;
},
clearContextMenu() {
this.cursorPosX = -1;
this.cursorPosY = -1;
this.contextMenuItem = null;
this.contextMenuIndex = null;
},
goToItemEditPage(item) { goToItemEditPage(item) {
this.$router.push(this.$routerHelper.getItemEditPath(item.collection_id, item.id)); this.$router.push(this.$routerHelper.getItemEditPath(item.collection_id, item.id));
}, },
@ -1024,6 +1112,23 @@ export default {
} }
} }
.context-menu {
.dropdown {
position: fixed;
z-index: 99999999999;
}
.context-menu-backdrop {
position: fixed;
top: 0;
right: 0;
left: 0;
border: 0;
width: 100%;
height: 100vh;
z-index: 9999999;
}
}
</style> </style>

5
src/admin/tainacan-admin-i18n.php
View File

@ -369,6 +369,11 @@ return apply_filters( 'tainacan-admin-i18n', [
'label_tainacan_api' => __( 'Tainacan API', 'tainacan' ), 'label_tainacan_api' => __( 'Tainacan API', 'tainacan' ),
'label_filter_type_preview' => __( 'Filter type preview', 'tainacan' ), 'label_filter_type_preview' => __( 'Filter type preview', 'tainacan' ),
'label_metadatum_type_preview' => __( 'Metadatum type preview', 'tainacan' ), 'label_metadatum_type_preview' => __( 'Metadatum type preview', 'tainacan' ),
'label_open_item' => __( 'Open item', 'tainacan' ),
'label_open_item_new_tab' => __( 'Open item on new tab', 'tainacan' ),
'label_select_item' => __( 'Select item', 'tainacan' ),
'label_unselect_item' => __( 'Unselect item', 'tainacan' ),
'label_delete_item' => __( 'Delete item', 'tainacan' ),
// Instructions. More complex sentences to guide user and placeholders // Instructions. More complex sentences to guide user and placeholders
'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ), 'instruction_delete_selected_collections' => __( 'Delete selected collections', 'tainacan' ),

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

File diff suppressed because one or more lines are too long