Skip to content

Revamps the review selections page #5253

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

Merged
bjester merged 2 commits into from
Aug 5, 2025
Merged

Revamps the review selections page #5253

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eb0ab30
Revamps the review selections page
akolson Aug 5, 2025
c891e89
Sets max width to 1200px
akolson Aug 5, 2025
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
213 changes: 157 additions & 56 deletions ...on/contentcuration/frontend/channelEdit/views/ImportFromChannels/ReviewSelectionsPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,68 +2,99 @@

<ImportFromChannelsModal fluid>
<template #default="{ preview }">
<h1>{{ $tr('reviewSelectionHeader') }}</h1>
<p v-if="selected.length === 0">
{{ $tr('noResourcesSelected') }}
</p>
<VList>
<template v-for="(node, index) in selected">
<VListTile
:key="index"
class="height-auto py-2"
>
<VLayout
row
align-center
wrap
<KFixedGrid
:numCols="2"
:class="$computedClass(reviewSelectionsStyle)"
>
<!-- Selection header -->
<KFixedGridItem
class="selection-header"
:span="2"
>
<h1>
<KTextTruncator
:text="$tr('reviewSelectionHeader')"
:maxLines="1"
/>
</h1>
</KFixedGridItem>

<!-- Total resources selected -->
<KFixedGridItem :span="2">
<KTextTruncator
:text="resourcesDescription"
:maxLines="2"
/>
</KFixedGridItem>

<!-- Selected items -->
<KFixedGridItem
v-if="selected.length"
:span="2"
>
<template v-for="(node, index) in selected">
<KGrid
:key="index"
class="selected-item"
>
<VFlex
shrink
class="mr-2 px-2"
<!-- File info -->
<KGridItem
:layout12="{ span: 5 }"
:layout4="{ span: 4 }"
class="center-contents resource"
>
<ContentNodeIcon :kind="node.kind" />
</VFlex>
<VFlex
md5
sm12
>
<VListTileContent>
<VListTileTitle>
<ActionLink
class="subheading"
<div class="center-contents file-info">
<ContentNodeIcon :kind="node.kind" />
<div>
<KButton
class="link"
:class="getTitleClass(node)"
:text="getTitle(node)"
appearance="basic-link"
@click="preview(node)"
/>
</VListTileTitle>
<VListTileSubTitle v-if="node.kind === 'topic'">
{{ $tr('resourcesInTopic', { count: numberOfResources(node) }) }}
</VListTileSubTitle>
</VListTileContent>
</VFlex>
<VFlex
md4
sm12
class="notranslate"
<p v-if="node.kind === 'topic'">
{{ $tr('resourcesInTopic', { count: numberOfResources(node) }) }}
</p>
</div>
</div>
</KGridItem>

<!-- Channel name -->
<KGridItem
:layout12="{ span: 5 }"
:layout4="{ span: 4 }"
class="center-contents channel-name"
>
{{ node.original_channel_name }}
</VFlex>
<VFlex
grow
class="text-sm-right"
<KTextTruncator
:text="node.original_channel_name"
:maxLines="2"
class="notranslate"
/>
</KGridItem>

<!-- Remove button -->
<KGridItem
:layout12="{ span: 2 }"
:layout4="{ span: 4 }"
alignment="right"
class="actions center-contents"
>
<VBtn
flat
<KButton
:text="$tr('removeAction')"
appearance="flat-button"
@click="handleClickRemove(node)"
>
{{ $tr('removeAction') }}
</VBtn>
</VFlex>
</VLayout>
</VListTile>
<VDivider :key="'div' + index" />
</template>
</VList>
/>
</KGridItem>
</KGrid>
<Divider
v-if="index !== selected.length - 1"
:key="'div' + index"
margin="0"
/>
</template>
</KFixedGridItem>
</KFixedGrid>
</template>
</ImportFromChannelsModal>

Expand All @@ -72,7 +103,7 @@

<script>

import { mapMutations, mapState } from 'vuex';
import { mapGetters, mapMutations, mapState } from 'vuex';
import ImportFromChannelsModal from './ImportFromChannelsModal';
import ContentNodeIcon from 'shared/views/ContentNodeIcon';
import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
Expand All @@ -86,7 +117,38 @@
},
mixins: [titleMixin, routerMixin],
computed: {
...mapGetters('contentNode', ['getContentNodeAncestors']),
...mapState('importFromChannels', ['selected']),
totalNumberOfResources() {
return this.selected.reduce(
(total, node) =>
total + (node.kind === ContentKindsNames.TOPIC ? node.resource_count : 1),
0,
);
},
reviewSelectionsStyle() {
return {
width: '100%',
padding: '24px',
borderRadius: '4px',
marginTop: '16px',
boxShadow: '0 2px 4px ' + this.$themePalette.grey.v_300,
maxWidth: '1200px',
};
},
resourcesDescription() {
return this.selected.length === 0
? this.$tr('noResourcesSelected')
: this.$tr('addResourcesToFolderLabel', {
count: this.totalNumberOfResources,
folder: this.importDestinationTitle,
});
},
importDestinationTitle() {
const ancestors = this.getContentNodeAncestors(this.$route.params.destNodeId, true);
const folder = ancestors.length ? ancestors[ancestors.length - 1] : null;
return folder?.title || '';
},
},
mounted() {
this.updateTitleForPage();
Expand All @@ -113,6 +175,8 @@
resourcesInTopic: '{count, number} {count, plural, one {resource} other {resources}}',
removeAction: 'Remove',
noResourcesSelected: 'No resources selected',
addResourcesToFolderLabel:
"Add {count, number} {count, plural, one {resource} other {resources}} to '{folder}'",
},
};

Expand All @@ -121,8 +185,45 @@

<style lang="scss" scoped>

.over-app-bar {
z-index: 3;
$spacing-standard: 12px;
$spacing-large: 24px;

.selection-header {
margin-bottom: $spacing-large;
}

.selected-item {
padding: $spacing-standard 0;
}

.center-contents {
display: flex;
align-items: center;
}

.resource {
justify-content: flex-start;
}

.channel-name {
padding: $spacing-standard 0;
}

.actions {
justify-content: flex-end;
}

.file-info {
flex-direction: row;
gap: $spacing-standard;

p {
margin: 0;
}

.link {
margin-bottom: 2px;
}
}

// Because the tiles don't re-adjust in responsive mode
Expand Down