Skip to content

[lists] Make Name, Descriptions and rest of fields o nAssets list sortable #2126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ivancea wants to merge 9 commits into
base: main
Choose a base branch
from
Open

[lists] Make Name, Descriptions and rest of fields o nAssets list sortable #2126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e8055f
[assets] Add field sort to asset list
ivancea Jul 8, 2026
a16edd6
[assets] Show field sort controls
ivancea Jul 8, 2026
76f122a
[assets] Align field sort controls
ivancea Jul 8, 2026
518f714
[assets] Reserve space for field sort controls
ivancea Jul 8, 2026
862c9e7
[assets] Close asset header menus
ivancea Jul 8, 2026
290633d
[assets] Sort ready for column
ivancea Jul 8, 2026
32f03b9
[assets] Sort remaining asset info columns
ivancea Jul 8, 2026
e69f32e
[lists] Sort static entity fields
ivancea Jul 8, 2026
ff2b630
[lists] Reuse sortable field header
ivancea Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1730,6 +1730,33 @@ tbody:last-child .empty-line:last-child {
}
}

.datatable th .field-header {
padding-right: 20px;
position: relative;
}

.datatable th .field-header .flexrow-item:first-child {
flex: 1;
}

.datatable th .asset-field-menu-button {
align-items: center;
background: var(--background-alt);
border-radius: 50%;
display: inline-flex;
flex: 0 0 16px;
height: 16px;
justify-content: center;
padding: 1px;
position: absolute;
right: 0;
width: 16px;
}

.datatable th .add-metadata-button {
margin-left: 0.3em;
}

// width: 0 + flex: 1 forces the link to size from flex space (not content), so the column can be resized smaller than the longest name.
// :not(.thumbnail-wrapper, .avatar) excludes the EntityThumbnail anchor and PeopleAvatar which are also direct children of .flexrow.
.datatable th.name .flexrow > a:not(.thumbnail-wrapper, .avatar),
Expand Down
109 changes: 82 additions & 27 deletions src/components/lists/AssetList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@
@toggle-stick="metadataStickColumnClicked($event)"
/>

<table-metadata-header-menu
ref="headerFieldMenu"
:is-edit-allowed="false"
:show-stick="false"
@sort-by-clicked="onSortByFieldClicked()"
/>

<table
class="datatable multi-section"
:class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
Expand All @@ -40,21 +47,24 @@
}"
scope="col"
>
<div class="flexrow">
<span class="flexrow-item">
{{ $t('assets.fields.name') }}
</span>
<button-simple
class="is-small flexrow-item"
icon="plus"
:text="''"
@click="onAddMetadataClicked"
v-if="
(isCurrentUserManager || isCurrentUserSupervisor) &&
!isLoading
"
/>
</div>
<sortable-field-header
field-name="name"
:label="$t('assets.fields.name')"
@show-menu="showFieldHeaderMenu"
>
<template #actions>
<button-simple
class="is-small flexrow-item add-metadata-button"
icon="plus"
:text="''"
@click="onAddMetadataClicked"
v-if="
(isCurrentUserManager || isCurrentUserSupervisor) &&
!isLoading
"
/>
</template>
</sortable-field-header>
</th>

<th
Expand All @@ -64,7 +74,11 @@
:style="{ left: `${nameWidth}px` }"
v-if="hasStickyEpisode"
>
{{ $t('assets.fields.episode') }}
<sortable-field-header
field-name="episode_id"
:label="$t('assets.fields.episode')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<metadata-header
Expand Down Expand Up @@ -116,7 +130,11 @@
metadataDisplayHeaders.readyFor
"
>
{{ $t('assets.fields.ready_for') }}
<sortable-field-header
field-name="ready_for"
:label="$t('assets.fields.ready_for')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<th
Expand All @@ -129,7 +147,11 @@
isAssetDescription
"
>
{{ $t('assets.fields.description') }}
<sortable-field-header
field-name="description"
:label="$t('assets.fields.description')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<th
Expand All @@ -143,7 +165,11 @@
metadataDisplayHeaders.timeSpent
"
>
{{ $t('assets.fields.time_spent') }}
<sortable-field-header
field-name="timeSpent"
:label="$t('assets.fields.time_spent')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<th
Expand All @@ -158,7 +184,11 @@
metadataDisplayHeaders.estimation
"
>
{{ $t('main.estimation_short') }}
<sortable-field-header
field-name="estimation"
:label="$t('main.estimation_short')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<th
Expand All @@ -170,7 +200,11 @@
metadataDisplayHeaders.resolution
"
>
{{ $t('shots.fields.resolution') }}
<sortable-field-header
field-name="resolution"
:label="$t('shots.fields.resolution')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<template v-if="displaySettings.showInfos">
Expand Down Expand Up @@ -592,20 +626,21 @@ import preferences from '@/lib/preferences'
import { sortTaskTypes } from '@/lib/sorting'
import { range } from '@/lib/time'

import AssetListNumbers from '@/components/widgets/AssetListNumbers.vue'
import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
import DescriptionCell from '@/components/cells/DescriptionCell.vue'
import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
import MetadataHeader from '@/components/cells/MetadataHeader.vue'
import MetadataInput from '@/components/cells/MetadataInput.vue'
import RowActionsCell from '@/components/cells/RowActionsCell.vue'
import ValidationCell from '@/components/cells/ValidationCell.vue'
import ValidationHeader from '@/components/cells/ValidationHeader.vue'
import AssetListNumbers from '@/components/widgets/AssetListNumbers.vue'
import ButtonSimple from '@/components/widgets/ButtonSimple.vue'
import ComboboxTaskType from '@/components/widgets/ComboboxTaskType.vue'
import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
import TableInfo from '@/components/widgets/TableInfo.vue'
import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
import ValidationCell from '@/components/cells/ValidationCell.vue'
import ValidationHeader from '@/components/cells/ValidationHeader.vue'

import assetStore from '@/store/modules/assets'
import assetTypeStore from '@/store/modules/assettypes'
Expand All @@ -632,6 +667,7 @@ export default {
MetadataInput,
MetadataHeader,
RowActionsCell,
SortableFieldHeader,
TableInfo,
TableHeaderMenu,
TableMetadataHeaderMenu,
Expand Down Expand Up @@ -674,6 +710,7 @@ export default {
emits: [
'asset-changed',
'asset-type-clicked',
'change-sort',
'create-tasks',
'delete-clicked',
'edit-clicked',
Expand All @@ -690,6 +727,7 @@ export default {
hiddenColumns: {},
isSelectableMap: {},
lastSelection: null,
lastFieldHeaderMenuDisplayed: null,
lastHeaderMenuDisplayed: null,
lastMetadataHeaderMenuDisplayed: null,
lastHeaderMenuDisplayedIndexInGrid: null,
Expand Down Expand Up @@ -1058,6 +1096,23 @@ export default {
this.showHeaderMenu()
},

onSortByFieldClicked() {
const fieldName = this.lastFieldHeaderMenuDisplayed
const fieldLabels = {
episode_id: this.$t('assets.fields.episode'),
estimation: this.$t('main.estimation_short'),
ready_for: this.$t('assets.fields.ready_for'),
resolution: this.$t('shots.fields.resolution'),
timeSpent: this.$t('assets.fields.time_spent')
}
this.$emit('change-sort', {
type: 'field',
column: fieldName,
name: fieldLabels[fieldName] || this.$t(`assets.fields.${fieldName}`)
})
this.showFieldHeaderMenu(fieldName)
},

metadataStickColumnClicked(event) {
this.toggleStickedColumns(this.lastMetadataHeaderMenuDisplayed)
this.showMetadataHeaderMenu(this.lastMetadataHeaderMenuDisplayed, event)
Expand Down
49 changes: 33 additions & 16 deletions src/components/lists/EpisodeList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,13 @@
@toggle-stick="metadataStickColumnClicked($event)"
/>

<table-metadata-header-menu
ref="headerFieldMenu"
:is-edit-allowed="false"
:show-stick="false"
@sort-by-clicked="onSortByFieldClicked()"
/>

<table
class="datatable"
:class="{ 'expand-task-types': displaySettings.fullTaskTypeNames }"
Expand All @@ -40,21 +47,24 @@
class="name episode-name datatable-row-header"
ref="th-episode"
>
<div class="flexrow">
<span class="flexrow-item">
{{ $t('episodes.fields.name') }}
</span>
<button-simple
class="is-small flexrow-item"
icon="plus"
:text="''"
@click="onAddMetadataClicked"
v-if="
(isCurrentUserManager || isCurrentUserSupervisor) &&
!isLoading
"
/>
</div>
<sortable-field-header
field-name="name"
:label="$t('episodes.fields.name')"
@show-menu="showFieldHeaderMenu"
>
<template #actions>
<button-simple
class="is-small flexrow-item"
icon="plus"
:text="''"
@click="onAddMetadataClicked"
v-if="
(isCurrentUserManager || isCurrentUserSupervisor) &&
!isLoading
"
/>
</template>
</sortable-field-header>
</th>

<template v-if="displaySettings.showInfos">
Expand Down Expand Up @@ -104,7 +114,11 @@
isEpisodeDescription
"
>
{{ $t('episodes.fields.description') }}
<sortable-field-header
field-name="description"
:label="$t('episodes.fields.description')"
@show-menu="showFieldHeaderMenu"
/>
</th>

<template v-if="displaySettings.showInfos">
Expand Down Expand Up @@ -546,6 +560,7 @@ import EntityThumbnail from '@/components/widgets/EntityThumbnail.vue'
import MetadataHeader from '@/components/cells/MetadataHeader.vue'
import MetadataInput from '@/components/cells/MetadataInput.vue'
import RowActionsCell from '@/components/cells/RowActionsCell.vue'
import SortableFieldHeader from '@/components/widgets/SortableFieldHeader.vue'
import TableMetadataHeaderMenu from '@/components/widgets/TableMetadataHeaderMenu.vue'
import TableMetadataSelectorMenu from '@/components/widgets/TableMetadataSelectorMenu.vue'
import TableHeaderMenu from '@/components/widgets/TableHeaderMenu.vue'
Expand Down Expand Up @@ -607,6 +622,7 @@ export default {
return {
type: 'episode',
hiddenColumns: {},
lastFieldHeaderMenuDisplayed: null,
lastHeaderMenuDisplayed: null,
lastMetadataHeaderMenuDisplayed: null,
lastHeaderMenuDisplayedIndexInGrid: null,
Expand Down Expand Up @@ -635,6 +651,7 @@ export default {
MetadataHeader,
MetadataInput,
RowActionsCell,
SortableFieldHeader,
TableHeaderMenu,
TableMetadataHeaderMenu,
TableMetadataSelectorMenu,
Expand Down
Loading