From 2d6c3ed2d761c437533ffa41c142f0c9b3d66a8e Mon Sep 17 00:00:00 2001 From: Aadarsh Date: Wed, 10 Sep 2025 18:55:13 +0530 Subject: [PATCH 1/2] refactor: removed vuetify from collection input and validation --- .../views/ChannelSet/ChannelSetModal.vue | 87 ++++++++++--------- 1 file changed, 48 insertions(+), 39 deletions(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue index d96cb99bfd..680adcb432 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/ChannelSetModal.vue @@ -38,17 +38,17 @@ lg10 xl8 > - - + - +

{{ $tr('tokenPrompt') }}

@@ -213,13 +213,20 @@ import ChannelItem from './ChannelItem'; import ChannelSelectionList from './ChannelSelectionList'; import { ChannelListTypes, ErrorTypes } from 'shared/constants'; - import { constantsTranslationMixin, routerMixin } from 'shared/mixins'; + import { generateFormMixin, constantsTranslationMixin, routerMixin } from 'shared/mixins'; import CopyToken from 'shared/views/CopyToken'; import MessageDialog from 'shared/views/MessageDialog'; import FullscreenModal from 'shared/views/FullscreenModal'; import Tabs from 'shared/views/Tabs'; import LoadingText from 'shared/views/LoadingText'; + const formMixin = generateFormMixin({ + name: { + required: true, + validator: v => v && v.trim().length > 0, + }, + }); + export default { name: 'ChannelSetModal', components: { @@ -231,7 +238,7 @@ Tabs, LoadingText, }, - mixins: [constantsTranslationMixin, routerMixin], + mixins: [formMixin, constantsTranslationMixin, routerMixin], props: { channelSetId: { type: String, @@ -255,9 +262,6 @@ isNew() { return this.$route.path === '/collections/new'; }, - nameRules() { - return [name => (name && name.trim().length ? true : this.$tr('titleRequiredText'))]; - }, name: { get() { return Object.prototype.hasOwnProperty.call(this.diffTracker, 'name') @@ -384,44 +388,49 @@ this.saving = true; this.showUnsavedDialog = false; - if (this.$refs.channelsetform.validate()) { - let promise; + const formData = this.clean(); + if (!this.validate(formData)) { + this.saving = false; + this.$store.dispatch('showSnackbarSimple', this.errorText()); + return; + } - if (this.isNew) { - const channelSetData = { ...this.diffTracker }; - promise = this.commitChannelSet(channelSetData) - .then(newCollection => { - if (!newCollection || !newCollection.id) { - this.saving = false; - return; - } + let promise; - const newCollectionId = newCollection.id; + if (this.isNew) { + const channelSetData = { ...this.diffTracker, ...formData }; + promise = this.commitChannelSet(channelSetData) + .then(newCollection => { + if (!newCollection || !newCollection.id) { + this.saving = false; + return; + } - this.$router.replace({ - name: 'CHANNEL_SET_DETAILS', - params: { channelSetId: newCollectionId }, - }); + const newCollectionId = newCollection.id; - return newCollection; - }) - .catch(() => { - this.saving = false; + this.$router.replace({ + name: 'CHANNEL_SET_DETAILS', + params: { channelSetId: newCollectionId }, }); - } else { - promise = this.saveChannels().then(() => { - return this.updateChannelSet({ id: this.channelSetId, ...this.diffTracker }); - }); - } - promise - .then(() => { - this.close(); + return newCollection; }) - .finally(() => { + .catch(() => { this.saving = false; }); + } else { + promise = this.saveChannels().then(() => { + return this.updateChannelSet({ id: this.channelSetId, ...this.diffTracker }); + }); } + + promise + .then(() => { + this.close(); + }) + .finally(() => { + this.saving = false; + }); }, cancelChanges() { From 23458e0498f27851708e2427bb5f5eb42b89cc44 Mon Sep 17 00:00:00 2001 From: Aadarsh Date: Thu, 25 Sep 2025 15:44:16 +0530 Subject: [PATCH 2/2] test(channelSetModal): updated failing workflows --- .../views/ChannelSet/__tests__/channelSetModal.spec.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js index 959b677c5e..3f50b79cc9 100644 --- a/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js +++ b/contentcuration/contentcuration/frontend/channelList/views/ChannelSet/__tests__/channelSetModal.spec.js @@ -219,7 +219,7 @@ describe('ChannelSetModal', () => { it('should prompt user if there are unsaved changes', async () => { expect(getUnsavedDialog(wrapper).attributes('data-test-visible')).toBeFalsy(); - await getCollectionNameInput(wrapper).setValue('My collection'); + await wrapper.setData({ name: 'My collection' }); await getCloseButton(wrapper).trigger('click'); expect(getUnsavedDialog(wrapper).attributes('data-test-visible')).toBeTruthy(); @@ -228,7 +228,7 @@ describe('ChannelSetModal', () => { describe('clicking save button', () => { it("shouldn't update a channel set when a collection name is missing", async () => { - await getCollectionNameInput(wrapper).setValue(''); + await wrapper.setData({ name: '' }); await getSaveButton(wrapper).trigger('click'); await flushPromises(); @@ -236,7 +236,7 @@ describe('ChannelSetModal', () => { }); it("shouldn't update a channel set when a collection name is made of empty characters", async () => { - await getCollectionNameInput(wrapper).setValue(' '); + await wrapper.setData({ name: ' ' }); await getSaveButton(wrapper).trigger('click'); await flushPromises(); @@ -244,7 +244,7 @@ describe('ChannelSetModal', () => { }); it('should update a channel set when a collection name is valid', async () => { - await getCollectionNameInput(wrapper).setValue('My collection'); + await wrapper.setData({ name: 'My collection' }); await getSaveButton(wrapper).trigger('click'); await flushPromises();