Changes the interaction and listing strategy on the map view mode. #692.
This commit is contained in:
mateuswetah
parent
c8df17500f
commit
9a720991aa
|
|
@ -1349,7 +1349,7 @@
|
||||||
<l-map
|
<l-map
|
||||||
:id="'tainacan-admin-view-mode-map'"
|
:id="'tainacan-admin-view-mode-map'"
|
||||||
:ref="'tainacan-admin-view-mode-map'"
|
:ref="'tainacan-admin-view-mode-map'"
|
||||||
style="height: 60vh; width: 75%;"
|
style="height: 60vh; width: calc(100% - 300px);"
|
||||||
:zoom="5"
|
:zoom="5"
|
||||||
:center="[-14.4086569, -51.31668]"
|
:center="[-14.4086569, -51.31668]"
|
||||||
:zoom-animation="true"
|
:zoom-animation="true"
|
||||||
|
|
@ -1382,7 +1382,10 @@
|
||||||
</l-tooltip>
|
</l-tooltip>
|
||||||
</l-marker>
|
</l-marker>
|
||||||
<l-control-zoom position="bottomright" />
|
<l-control-zoom position="bottomright" />
|
||||||
<l-control position="topleft">
|
<l-control
|
||||||
|
:disable-scroll-propagation="false"
|
||||||
|
:disable-click-propagation="false"
|
||||||
|
position="topleft">
|
||||||
<div class="geocoordinate-panel">
|
<div class="geocoordinate-panel">
|
||||||
<div
|
<div
|
||||||
v-if="geocoordinateMetadata.length"
|
v-if="geocoordinateMetadata.length"
|
||||||
|
|
@ -1423,29 +1426,263 @@
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</l-control>
|
</l-control>
|
||||||
|
<l-control
|
||||||
|
:disable-scroll-propagation="false"
|
||||||
|
:disable-click-propagation="false"
|
||||||
|
v-if="selectedMarkerIndexes.length"
|
||||||
|
position="topleft"
|
||||||
|
class="tainacan-records-container tainacan-records-container--map">
|
||||||
|
<transition-group
|
||||||
|
tag="ul"
|
||||||
|
name="item-appear">
|
||||||
|
<li
|
||||||
|
:key="item.id"
|
||||||
|
:data-tainacan-item-id="item.id"
|
||||||
|
v-for="item of items.filter(anItem => selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex] && itemsLocations[aSelectedMarkerIndex].item.id == anItem.id))">
|
||||||
|
<div
|
||||||
|
:class="{
|
||||||
|
'selected-record': getSelectedItemChecked(item.id) == true,
|
||||||
|
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
||||||
|
}"
|
||||||
|
class="tainacan-record">
|
||||||
|
<!-- Checkbox -->
|
||||||
|
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||||
|
<div
|
||||||
|
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||||
|
:class="{ 'is-selecting': isSelectingItems }"
|
||||||
|
class="record-checkbox">
|
||||||
|
<label
|
||||||
|
tabindex="0"
|
||||||
|
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||||
|
<input
|
||||||
|
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||||
|
type="checkbox"
|
||||||
|
:checked="getSelectedItemChecked(item.id)"
|
||||||
|
@input="setSelectedItemChecked(item.id)">
|
||||||
|
<input
|
||||||
|
v-else
|
||||||
|
type="radio"
|
||||||
|
name="item-single-selection"
|
||||||
|
:value="item.id"
|
||||||
|
v-model="singleItemSelection">
|
||||||
|
<span class="check" />
|
||||||
|
<span class="control-label" />
|
||||||
|
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Title -->
|
||||||
|
<div
|
||||||
|
class="metadata-title"
|
||||||
|
:style="{
|
||||||
|
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
||||||
|
}">
|
||||||
|
<span
|
||||||
|
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||||
|
class="icon has-text-gray"
|
||||||
|
v-tooltip="{
|
||||||
|
content: $i18n.get('status_' + item.status),
|
||||||
|
autoHide: true,
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||||
|
placement: 'auto-start'
|
||||||
|
}">
|
||||||
|
<i
|
||||||
|
class="tainacan-icon tainacan-icon-1em"
|
||||||
|
:class="$statusHelper.getIcon(item.status)"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
<p
|
||||||
|
v-tooltip="{
|
||||||
|
delay: {
|
||||||
|
shown: 500,
|
||||||
|
hide: 300,
|
||||||
|
},
|
||||||
|
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
|
||||||
|
html: true,
|
||||||
|
autoHide: false,
|
||||||
|
placement: 'auto-start',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
v-for="(column, columnIndex) in displayedMetadata"
|
||||||
|
:key="columnIndex"
|
||||||
|
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||||
|
@click.left="onClickItem($event, item)"
|
||||||
|
@click.right="onRightClickItem($event, item)"
|
||||||
|
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||||
|
<p
|
||||||
|
v-tooltip="{
|
||||||
|
delay: {
|
||||||
|
shown: 500,
|
||||||
|
hide: 300,
|
||||||
|
},
|
||||||
|
content: item.title != undefined ? item.title : '',
|
||||||
|
html: true,
|
||||||
|
autoHide: false,
|
||||||
|
placement: 'auto-start',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
v-for="(column, columnIndex) in displayedMetadata"
|
||||||
|
:key="columnIndex"
|
||||||
|
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||||
|
@click.left="onClickItem($event, item)"
|
||||||
|
@click.right="onRightClickItem($event, item)"
|
||||||
|
v-html="item.title != undefined ? item.title : ''" />
|
||||||
|
</div>
|
||||||
|
<!-- Actions -->
|
||||||
|
<div
|
||||||
|
v-if="!$adminOptions.hideItemsListActionAreas"
|
||||||
|
class="actions-area"
|
||||||
|
:label="$i18n.get('label_actions')">
|
||||||
|
<a
|
||||||
|
id="button-show-location"
|
||||||
|
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)"
|
||||||
|
:aria-label="$i18n.get('label_show_item_location_on_map')"
|
||||||
|
@click.prevent.stop="showLocationsByItem(item)">
|
||||||
|
<span
|
||||||
|
v-if="selectedGeocoordinateMetadatum.slug"
|
||||||
|
v-tooltip="{
|
||||||
|
content: $i18n.get('label_show_item_location_on_map'),
|
||||||
|
autoHide: true,
|
||||||
|
placement: 'auto',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
class="icon">
|
||||||
|
<svg
|
||||||
|
style="width:24px;height:24px"
|
||||||
|
viewBox="0 0 24 24">
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
v-if="!isOnTrash && item.current_user_can_edit"
|
||||||
|
id="button-edit"
|
||||||
|
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||||
|
@click.prevent.stop="goToItemEditPage(item)">
|
||||||
|
<span
|
||||||
|
v-tooltip="{
|
||||||
|
content: $i18n.get('edit'),
|
||||||
|
autoHide: true,
|
||||||
|
placement: 'auto',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
class="icon">
|
||||||
|
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||||
|
@click.prevent.stop="untrashOneItem(item.id)"
|
||||||
|
v-if="isOnTrash && item.current_user_can_edit">
|
||||||
|
<span
|
||||||
|
v-tooltip="{
|
||||||
|
content: $i18n.get('label_recover_from_trash'),
|
||||||
|
autoHide: true,
|
||||||
|
placement: 'auto',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
class="icon">
|
||||||
|
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
v-if="item.current_user_can_delete && item.current_user_can_edit"
|
||||||
|
id="button-delete"
|
||||||
|
:aria-label="$i18n.get('label_button_delete')"
|
||||||
|
@click.prevent.stop="deleteOneItem(item.id)">
|
||||||
|
<span
|
||||||
|
v-tooltip="{
|
||||||
|
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'),
|
||||||
|
autoHide: true,
|
||||||
|
placement: 'auto',
|
||||||
|
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||||
|
}"
|
||||||
|
class="icon">
|
||||||
|
<i
|
||||||
|
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
|
||||||
|
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Remaining metadata -->
|
||||||
|
<div
|
||||||
|
class="media"
|
||||||
|
@click.left="onClickItem($event, item)"
|
||||||
|
@click.right="onRightClickItem($event, item)">
|
||||||
|
<div class="list-metadata media-body">
|
||||||
|
<div class="tainacan-record-thumbnail">
|
||||||
|
<blur-hash-image
|
||||||
|
@click.left="onClickItem($event, item)"
|
||||||
|
@click.right="onRightClickItem($event, item)"
|
||||||
|
v-if="item.thumbnail != undefined"
|
||||||
|
class="tainacan-record-item-thumbnail"
|
||||||
|
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||||
|
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||||
|
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||||
|
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||||
|
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||||
|
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||||
|
:transition-duration="500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||||
|
:key="metadatumIndex"
|
||||||
|
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||||
|
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
||||||
|
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||||
|
<p
|
||||||
|
v-html="item.description != undefined ? item.description : ''"
|
||||||
|
class="metadata-value"/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||||
|
:key="metadatumIndex"
|
||||||
|
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||||
|
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||||
|
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||||
|
<p
|
||||||
|
v-html="renderMetadata(item.metadata, column)"
|
||||||
|
class="metadata-value"/>
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||||
|
:key="metadatumIndex"
|
||||||
|
v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
|
||||||
|
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||||
|
<p
|
||||||
|
v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
|
||||||
|
class="metadata-value"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</l-control>
|
||||||
</l-map>
|
</l-map>
|
||||||
<transition-group
|
<ul
|
||||||
tag="ul"
|
|
||||||
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
|
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
|
||||||
class="tainacan-records-container tainacan-records-container--map"
|
class="tainacan-map-cards-container">
|
||||||
name="item-appear">
|
|
||||||
<li
|
<li
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
:data-tainacan-item-id="item.id"
|
:data-tainacan-item-id="item.id"
|
||||||
v-for="item of items"
|
v-for="item of items">
|
||||||
v-show="!selectedMarkerIndexes.length || selectedMarkerIndexes.some((aSelectedMarkerIndex) => itemsLocations[aSelectedMarkerIndex].item.id == item.id)">
|
|
||||||
<div
|
<div
|
||||||
:class="{
|
:class="{
|
||||||
'selected-record': getSelectedItemChecked(item.id) == true,
|
'selected-map-card': getSelectedItemChecked(item.id) == true,
|
||||||
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
'non-located-item': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)
|
||||||
}"
|
}"
|
||||||
class="tainacan-record">
|
class="tainacan-map-card">
|
||||||
<!-- Checkbox -->
|
<!-- Checkbox -->
|
||||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||||
<div
|
<div
|
||||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||||
:class="{ 'is-selecting': isSelectingItems }"
|
:class="{ 'is-selecting': isSelectingItems }"
|
||||||
class="record-checkbox">
|
class="map-card-checkbox">
|
||||||
<label
|
<label
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||||
|
|
@ -1470,8 +1707,11 @@
|
||||||
<div
|
<div
|
||||||
class="metadata-title"
|
class="metadata-title"
|
||||||
:style="{
|
:style="{
|
||||||
|
'cursor': !itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id) ? 'auto' : 'pointer',
|
||||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
||||||
}">
|
}"
|
||||||
|
@click.prevent.stop.left="showLocationsByItem(item)"
|
||||||
|
@click.right="onRightClickItem($event, item)">
|
||||||
<span
|
<span
|
||||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||||
class="icon has-text-gray"
|
class="icon has-text-gray"
|
||||||
|
|
@ -1501,8 +1741,6 @@
|
||||||
v-for="(column, columnIndex) in displayedMetadata"
|
v-for="(column, columnIndex) in displayedMetadata"
|
||||||
: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.left="onClickItem($event, item)"
|
|
||||||
@click.right="onRightClickItem($event, item)"
|
|
||||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||||
<p
|
<p
|
||||||
v-tooltip="{
|
v-tooltip="{
|
||||||
|
|
@ -1519,38 +1757,26 @@
|
||||||
v-for="(column, columnIndex) in displayedMetadata"
|
v-for="(column, columnIndex) in displayedMetadata"
|
||||||
: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.left="onClickItem($event, item)"
|
|
||||||
@click.right="onRightClickItem($event, item)"
|
|
||||||
v-html="item.title != undefined ? item.title : ''" />
|
v-html="item.title != undefined ? item.title : ''" />
|
||||||
|
<div class="tainacan-map-card-thumbnail">
|
||||||
|
<blur-hash-image
|
||||||
|
v-if="item.thumbnail != undefined"
|
||||||
|
class="tainacan-map-card-item-thumbnail"
|
||||||
|
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-small', 40)"
|
||||||
|
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-small', 40)"
|
||||||
|
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-small')"
|
||||||
|
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)"
|
||||||
|
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-small', item.document_mimetype)"
|
||||||
|
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||||
|
:transition-duration="500"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Actions -->
|
<!-- Actions -->
|
||||||
<div
|
<div
|
||||||
v-if="!$adminOptions.hideItemsListActionAreas"
|
v-if="!$adminOptions.hideItemsListActionAreas"
|
||||||
class="actions-area"
|
class="actions-area"
|
||||||
:label="$i18n.get('label_actions')">
|
:label="$i18n.get('label_actions')">
|
||||||
<a
|
|
||||||
id="button-show-location"
|
|
||||||
v-if="itemsLocations.some(anItemLocation => anItemLocation.item.id == item.id)"
|
|
||||||
:aria-label="$i18n.get('label_show_item_location_on_map')"
|
|
||||||
@click.prevent.stop="showLocationsByItem(item)">
|
|
||||||
<span
|
|
||||||
v-if="selectedGeocoordinateMetadatum.slug"
|
|
||||||
v-tooltip="{
|
|
||||||
content: $i18n.get('label_show_item_location_on_map'),
|
|
||||||
autoHide: true,
|
|
||||||
placement: 'auto',
|
|
||||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
|
||||||
}"
|
|
||||||
class="icon">
|
|
||||||
<svg
|
|
||||||
style="width:24px;height:24px"
|
|
||||||
viewBox="0 0 24 24">
|
|
||||||
<path
|
|
||||||
fill="currentColor"
|
|
||||||
d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M3.05,13H1V11H3.05C3.5,6.83 6.83,3.5 11,3.05V1H13V3.05C17.17,3.5 20.5,6.83 20.95,11H23V13H20.95C20.5,17.17 17.17,20.5 13,20.95V23H11V20.95C6.83,20.5 3.5,17.17 3.05,13M12,5A7,7 0 0,0 5,12A7,7 0 0,0 12,19A7,7 0 0,0 19,12A7,7 0 0,0 12,5Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
<a
|
||||||
v-if="!isOnTrash && item.current_user_can_edit"
|
v-if="!isOnTrash && item.current_user_can_edit"
|
||||||
id="button-edit"
|
id="button-edit"
|
||||||
|
|
@ -1601,62 +1827,9 @@
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Remaining metadata -->
|
|
||||||
<div
|
|
||||||
class="media"
|
|
||||||
@click.left="onClickItem($event, item)"
|
|
||||||
@click.right="onRightClickItem($event, item)">
|
|
||||||
<div class="list-metadata media-body">
|
|
||||||
<div class="tainacan-record-thumbnail">
|
|
||||||
<blur-hash-image
|
|
||||||
@click.left="onClickItem($event, item)"
|
|
||||||
@click.right="onRightClickItem($event, item)"
|
|
||||||
v-if="item.thumbnail != undefined"
|
|
||||||
class="tainacan-record-item-thumbnail"
|
|
||||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
|
||||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
|
||||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
|
||||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
|
||||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
|
||||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
|
||||||
:transition-duration="500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<span
|
|
||||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
|
||||||
:key="metadatumIndex"
|
|
||||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
|
||||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
|
||||||
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
|
||||||
<p
|
|
||||||
v-html="item.description != undefined ? item.description : ''"
|
|
||||||
class="metadata-value"/>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
|
||||||
:key="metadatumIndex"
|
|
||||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
|
||||||
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
|
||||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
|
||||||
<p
|
|
||||||
v-html="renderMetadata(item.metadata, column)"
|
|
||||||
class="metadata-value"/>
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
|
||||||
:key="metadatumIndex"
|
|
||||||
v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
|
|
||||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
|
||||||
<p
|
|
||||||
v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
|
|
||||||
class="metadata-value"/>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</transition-group>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1829,12 +2002,7 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
return locations;
|
||||||
let selectedItemId = false;
|
|
||||||
if ( this.selectedMarkerIndexes.length > 0 )
|
|
||||||
selectedItemId = locations[this.selectedMarkerIndexes[0]].item.id;
|
|
||||||
|
|
||||||
return selectedItemId ? locations.filter((aLocation) => aLocation.item.id == selectedItemId) : locations;
|
|
||||||
},
|
},
|
||||||
geocoordinateMetadata() {
|
geocoordinateMetadata() {
|
||||||
let geocoordinateMetadata = [];
|
let geocoordinateMetadata = [];
|
||||||
|
|
@ -1902,9 +2070,9 @@ export default {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
||||||
if (this.itemsLocations.length == 1)
|
if (this.itemsLocations.length == 1)
|
||||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||||
else
|
else
|
||||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||||
}
|
}
|
||||||
}, 500)
|
}, 500)
|
||||||
},
|
},
|
||||||
|
|
@ -2281,16 +2449,16 @@ export default {
|
||||||
this.selectedMarkerIndexes = [];
|
this.selectedMarkerIndexes = [];
|
||||||
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
||||||
if (this.itemsLocations.length == 1)
|
if (this.itemsLocations.length == 1)
|
||||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||||
else
|
else
|
||||||
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds(this.itemsLocations.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 0] });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showItemByLocation(index) {
|
showItemByLocation(index) {
|
||||||
this.selectedMarkerIndexes = [];
|
this.selectedMarkerIndexes = [];
|
||||||
this.selectedMarkerIndexes.push(index);
|
this.selectedMarkerIndexes.push(index);
|
||||||
// if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
|
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject )
|
||||||
// this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( [ this.itemsLocations[index].location ], { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
|
||||||
},
|
},
|
||||||
showLocationsByItem(item) {
|
showLocationsByItem(item) {
|
||||||
this.selectedMarkerIndexes = [];
|
this.selectedMarkerIndexes = [];
|
||||||
|
|
@ -2299,12 +2467,21 @@ export default {
|
||||||
this.selectedMarkerIndexes.push(index);
|
this.selectedMarkerIndexes.push(index);
|
||||||
return anItemLocation.item.id == item.id;
|
return anItemLocation.item.id == item.id;
|
||||||
})
|
})
|
||||||
// if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
|
||||||
// if (selectedLocationsByItem.length > 1)
|
if ( selectedLocationsByItem.length) {
|
||||||
// this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
if ( this.itemsLocations.length && this.$refs['tainacan-admin-view-mode-map'] && this.$refs['tainacan-admin-view-mode-map'].mapObject ) {
|
||||||
// else
|
if (selectedLocationsByItem.length > 1)
|
||||||
// this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12 });
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.flyToBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
|
||||||
// }
|
else
|
||||||
|
this.$refs['tainacan-admin-view-mode-map'].mapObject.panInsideBounds( selectedLocationsByItem.map((anItemLocation) => anItemLocation.location), { animate: true, maxZoom: 12, paddingTopLeft: [0, 300] });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$buefy.snackbar.open({
|
||||||
|
message: this.$i18n.get('info_non_located_item'),
|
||||||
|
type: 'is-warning',
|
||||||
|
duration: 3000
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -47,24 +47,31 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.tainacan-records-container--map {
|
.tainacan-records-container--map {
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
width: 25%;
|
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
width: 300px;
|
||||||
&>li {
|
float: none;
|
||||||
|
position: initial;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding-top: 10px;
|
||||||
|
|
||||||
|
&>li,
|
||||||
|
&>ul>li {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.tainacan-record {
|
.tainacan-record {
|
||||||
margin-bottom: 0.125rem;
|
margin-bottom: 0.125rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
box-shadow: 0px 0px 12px -10px #000;
|
||||||
|
border: 2px solid rgba(0,0,0,0.2);
|
||||||
opacity: 1.0;
|
opacity: 1.0;
|
||||||
transition: 1.0;
|
transition: 1.0;
|
||||||
|
|
||||||
|
&:not(.is-selecting) {
|
||||||
|
background-color: var(--tainacan-background-color);
|
||||||
|
}
|
||||||
|
|
||||||
&.non-located-item {
|
&.non-located-item {
|
||||||
opacity: 0.35;
|
opacity: 0.35;
|
||||||
|
|
||||||
|
|
@ -82,6 +89,153 @@
|
||||||
.media .list-metadata {
|
.media .list-metadata {
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.actions-area {
|
||||||
|
margin-bottom: -32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tainacan-map-cards-container {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 300px;
|
||||||
|
height: 60vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
&>li {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.tainacan-map-card {
|
||||||
|
max-width: 100%;
|
||||||
|
opacity: 1.0;
|
||||||
|
transition: filter;
|
||||||
|
|
||||||
|
&.non-located-item {
|
||||||
|
opacity: 0.45;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tainacan-map-card-item-thumbnail,
|
||||||
|
img {
|
||||||
|
max-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected-map-card {
|
||||||
|
background-color: var(--tainacan-turquoise1);
|
||||||
|
.metadata-title {
|
||||||
|
background-color: var(--tainacan-turquoise2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-card-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 1.0em;
|
||||||
|
margin-top: 12px;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
.actions-area {
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
top: calc(-1 * var(--tainacan-container-padding));
|
||||||
|
bottom: 0;
|
||||||
|
padding-right: 12px;
|
||||||
|
//width: 80px;
|
||||||
|
margin-bottom: -25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
transition: visibility 0.2s, opacity 0.3s ease, top 0.2s ease;
|
||||||
|
|
||||||
|
a {
|
||||||
|
margin-left: 12px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .actions-area {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1.0;
|
||||||
|
top: calc(-1 * 1.5em - var(--tainacan-container-padding));
|
||||||
|
|
||||||
|
a {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tainacan-map-card-thumbnail {
|
||||||
|
max-width: 40px;
|
||||||
|
margin-top: -0.5em;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
.tainacan-map-card-item-thumbnail,
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 0px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.metadata-title {
|
||||||
|
flex-shrink: 0;
|
||||||
|
padding: 0.75em 1.125em;
|
||||||
|
font-size: 1.0em !important;
|
||||||
|
min-height: 40px;
|
||||||
|
position: relative;
|
||||||
|
white-space: wrap;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
color: var(--tainacan-heading-color);
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.5em;
|
||||||
|
font-size: 0.875em !important;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
.slideshow-icon {
|
||||||
|
color: var(--tainacan-info-color);
|
||||||
|
position: absolute;
|
||||||
|
right: 7px;
|
||||||
|
top: 7px;
|
||||||
|
transform: scale(0.0);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
.icon:not(.slideshow-icon) {
|
||||||
|
float: left;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
.tainacan-map-card-item-thumbnail {
|
||||||
|
opacity: 0.0;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.metadata-title {
|
||||||
|
background-color: var(---tainacan-item-heading-hover-background-color) !important;
|
||||||
|
p { text-decoration: none !important; }
|
||||||
|
.slideshow-icon {
|
||||||
|
transform: scale(1.0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
<l-map
|
<l-map
|
||||||
:id="'tainacan-view-mode-map'"
|
:id="'tainacan-view-mode-map'"
|
||||||
:ref="'tainacan-view-mode-map'"
|
:ref="'tainacan-view-mode-map'"
|
||||||
style="height: 60vh; width: 75%;"
|
style="height: 60vh; width: calc(100% - 300px);"
|
||||||
:zoom="5"
|
:zoom="5"
|
||||||
:center="[-14.4086569, -51.31668]"
|
:center="[-14.4086569, -51.31668]"
|
||||||
:zoom-animation="true"
|
:zoom-animation="true"
|
||||||
|
|
@ -54,7 +54,10 @@
|
||||||
</l-tooltip>
|
</l-tooltip>
|
||||||
</l-marker>
|
</l-marker>
|
||||||
<l-control-zoom position="bottomright" />
|
<l-control-zoom position="bottomright" />
|
||||||
<l-control position="topleft">
|
<l-control
|
||||||
|
:disable-scroll-propagation="false"
|
||||||
|
:disable-click-propagation="false"
|
||||||
|
position="topleft">
|
||||||
<div class="geocoordinate-panel">
|
<div class="geocoordinate-panel">
|
||||||
<div
|
<div
|
||||||
v-if="geocoordinateMetadata.length"
|
v-if="geocoordinateMetadata.length"
|
||||||
|
|
|
||||||
|
|
@ -1002,7 +1002,8 @@ return apply_filters( 'tainacan-i18n', [
|
||||||
'info_try_disabling_search_by_word' => __( 'Try disabling the search by words, to search for the complete phrase.', 'tainacan' ),
|
'info_try_disabling_search_by_word' => __( 'Try disabling the search by words, to search for the complete phrase.', 'tainacan' ),
|
||||||
'info_details_about_search_by_word' => __( 'They may be located on different metadata and order, but you will still be able to use quotes to group them.', 'tainacan' ),
|
'info_details_about_search_by_word' => __( 'They may be located on different metadata and order, but you will still be able to use quotes to group them.', 'tainacan' ),
|
||||||
'info_empty_geocoordinate_metadata_list' => __( 'No geocoordinate metadata was found. Try enabling it in the "displayed metadata" dropdown.', 'tainacan' ),
|
'info_empty_geocoordinate_metadata_list' => __( 'No geocoordinate metadata was found. Try enabling it in the "displayed metadata" dropdown.', 'tainacan' ),
|
||||||
|
'info_non_located_item' => __( 'This item does not have any location based on this metadata.', 'tainacan' ),
|
||||||
|
|
||||||
/* Activity actions */
|
/* Activity actions */
|
||||||
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),
|
'action_update-metadata-value' => __( 'Item Metadata Value Updates', 'tainacan'),
|
||||||
'action_update' => __( 'General Updates', 'tainacan'),
|
'action_update' => __( 'General Updates', 'tainacan'),
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue