From 9ca8d4ba46f778c92a583d6b4089aba2c406914b Mon Sep 17 00:00:00 2001 From: Hugo Zigha Date: Tue, 4 Apr 2023 17:09:14 +0200 Subject: [PATCH] MT#56989 Soundset page general UI improvements Change-Id: I8ccde7784564eae85fd96379d25f99bfeaeb970c --- src/api/pbx-soundsets.js | 14 + src/components/CscListItem.vue | 9 + .../pages/PbxConfiguration/CscPbxSoundSet.vue | 276 +------------ .../PbxConfiguration/CscPbxSoundSetSound.vue | 82 ++-- src/i18n/en.json | 3 + src/pages/CscPagePbxSoundSetDetails.vue | 382 ++++++++++++++++++ src/pages/CscPagePbxSoundSets.vue | 72 +--- src/router/routes.js | 13 + src/store/pbx-soundsets.js | 128 +++--- 9 files changed, 583 insertions(+), 396 deletions(-) create mode 100644 src/pages/CscPagePbxSoundSetDetails.vue diff --git a/src/api/pbx-soundsets.js b/src/api/pbx-soundsets.js index 4486a493..4785dd76 100644 --- a/src/api/pbx-soundsets.js +++ b/src/api/pbx-soundsets.js @@ -277,3 +277,17 @@ export function setUseParent (options) { }) }) } + +export function removeSoundFile (soundFileId) { + return new Promise((resolve, reject) => { + Vue.http.delete('api/soundfiles/' + soundFileId).then(() => { + resolve() + }).catch((err) => { + if (err.status >= 400) { + reject(new Error(err.body.message)) + } else { + reject(err) + } + }) + }) +} diff --git a/src/components/CscListItem.vue b/src/components/CscListItem.vue index 7ee4dd11..5c387d01 100644 --- a/src/components/CscListItem.vue +++ b/src/components/CscListItem.vue @@ -31,6 +31,7 @@ />
+
-
+ + diff --git a/src/pages/CscPagePbxSoundSets.vue b/src/pages/CscPagePbxSoundSets.vue index d8c25604..32840b04 100644 --- a/src/pages/CscPagePbxSoundSets.vue +++ b/src/pages/CscPagePbxSoundSets.vue @@ -4,7 +4,7 @@ class="q-pa-lg" > +
- - +
{ return { @@ -257,6 +258,18 @@ export default function routes (app) { profileAttribute: PROFILE_ATTRIBUTE_MAP.soundSet } }, + { + path: 'pbx-configuration/sound-sets/:id', + component: CscPagePbxSoundSetDetails, + meta: { + get title () { + return i18n.t('PBX Configuration') + }, + get subtitle () { + return i18n.t('Sound Sets') + } + } + }, { path: 'pbx-configuration/ms-configs', component: CscPagePbxMsConfigs, diff --git a/src/store/pbx-soundsets.js b/src/store/pbx-soundsets.js index 75a1cefb..dfaeb6bd 100644 --- a/src/store/pbx-soundsets.js +++ b/src/store/pbx-soundsets.js @@ -17,7 +17,7 @@ import { getAllSoundFilesBySoundSetId, getSoundFile, uploadSoundFile, - setLoopPlay, unsetAsDefault, setUseParent + setLoopPlay, unsetAsDefault, setUseParent, removeSoundFile } from '../api/pbx-soundsets' import _ from 'lodash' import { @@ -53,7 +53,7 @@ export default { soundSetUpdating: null, soundSetUpdatingField: null, soundSetSelected: null, - soundHandleList: [], + soundHandleList: {}, soundHandleListState: RequestState.initiated, soundFileMap: {}, soundFileUrlMap: {}, @@ -61,7 +61,9 @@ export default { soundFileState: {}, soundFileUploadState: {}, soundFileUploadProgress: {}, - soundFileUpdateState: {} + soundFileUpdateState: {}, + soundFileRemoveState: {}, + soundHandleGroups: [] }, getters: { isSoundSetListEmpty (state) { @@ -97,11 +99,6 @@ export default { state.soundSetUpdating !== null && state.soundSetUpdating.id === id) } }, - isSoundSetExpanded (state) { - return (id) => { - return state.soundSetSelected !== null && state.soundSetSelected.id === id - } - }, getSoundSetRemoveDialogMessage (state) { if (state.soundSetRemoving !== null) { const id = _.get(state, 'soundSetRemoving.id', null) @@ -147,6 +144,9 @@ export default { return state.soundFileListStates[soundSetId] && state.soundFileListStates[soundSetId] === RequestState.requesting } + }, + isSoundFileRemoving (state) { + return state.soundFileRemoveState === RequestState.requesting } }, mutations: { @@ -184,8 +184,14 @@ export default { state.soundSetUpdating = state.soundSetMap[options.soundSetId] state.soundSetUpdatingField = options.field }, - soundSetUpdateSucceeded (state) { + soundSetUpdateSucceeded (state, soundSet) { state.soundSetUpdateState = RequestState.succeeded + const index = state.soundSetList.findIndex((soundSetItem) => soundSetItem.id === soundSet.id) + Vue.set(state.soundSetMap, soundSet.id, soundSet) + state.soundSetList[index] = soundSet + if (state.soundSetSelected.id === soundSet.id) { + state.soundSetSelected = soundSet + } }, soundSetUpdateFailed (state, err) { state.soundSetUpdateState = RequestState.failed @@ -201,8 +207,11 @@ export default { state.soundSetRemovalState = RequestState.initiated state.soundSetRemoving = null }, - soundSetRemovalSucceeded (state) { + soundSetRemovalSucceeded (state, soundSetId) { state.soundSetRemovalState = RequestState.succeeded + const index = state.soundSetList.findIndex((soundSetItem) => soundSetItem.id === soundSetId) + Vue.delete(state.soundSetMap, soundSetId) + state.soundSetList.splice(index, 1) }, soundSetRemovalFailed (state, err) { state.soundSetRemovalState = RequestState.failed @@ -214,18 +223,20 @@ export default { disableSoundSetAddForm (state) { state.soundSetCreationState = CreationState.initiated }, - expandSoundSet (state, soundSetId) { - state.soundSetSelected = state.soundSetMap[soundSetId] - }, - collapseSoundSet (state) { - state.soundSetSelected = null - }, soundHandlesRequesting (state) { state.soundHandleListState = RequestState.requesting }, soundHandlesSucceeded (state, soundHandles) { state.soundHandleListState = RequestState.succeeded - state.soundHandleList = _.get(soundHandles, 'items', []) + const soundHandleList = _.get(soundHandles, 'items', []) + soundHandleList.map((soundHandle) => { + if (!state.soundHandleGroups.includes(soundHandle.group)) { + state.soundHandleGroups.push(soundHandle.group) + } + }) + state.soundHandleGroups.map((group) => { + Vue.set(state.soundHandleList, group, soundHandleList.filter((soundHandle) => group === soundHandle.group)) + }) }, soundFilesRequesting (state, soundSetId) { Vue.delete(state.soundFileListStates, soundSetId) @@ -310,6 +321,37 @@ export default { }) Vue.delete(state.soundFileUpdateState, soundFileIntId) Vue.set(state.soundFileUpdateState, soundFileIntId, RequestState.failed) + }, + soundFileRemoveRequesting (state, options) { + const soundFileIntId = toFileId({ + soundSetId: options.soundSetId, + soundHandle: options.soundHandle + }) + Vue.delete(state.soundFileRemoveState, soundFileIntId) + Vue.set(state.soundFileRemoveState, soundFileIntId, RequestState.requesting) + }, + soundFileRemoveSucceeded (state, soundFile) { + const soundFileIntId = toFileId({ + soundSetId: soundFile.soundSetId, + soundHandle: soundFile.soundHandle + }) + Vue.delete(state.soundFileRemoveState, soundFileIntId) + Vue.set(state.soundFileRemoveState, soundFileIntId, RequestState.succeeded) + Vue.delete(state.soundFileMap, soundFileIntId) + }, + soundFileRemoveFailed (state, options) { + const soundFileIntId = toFileId({ + soundSetId: options.soundSetId, + soundHandle: options.soundHandle + }) + Vue.delete(state.soundFileRemoveState, soundFileIntId) + Vue.set(state.soundFileRemoveState, soundFileIntId, RequestState.failed) + }, + selectSoundSet (state, soundSetId) { + state.soundSetSelected = state.soundSetMap[soundSetId] + }, + resetSelectedSoundSet (state) { + state.soundSetSelected = null } }, actions: { @@ -354,12 +396,7 @@ export default { removeSoundSet (context) { context.commit('soundSetRemovalRequesting') removeSoundSet(context.state.soundSetRemoving.id).then(() => { - return context.dispatch('loadSoundSetList', { - listVisible: true, - page: context.state.soundSetListCurrentPage - }) - }).then(() => { - context.commit('soundSetRemovalSucceeded') + context.commit('soundSetRemovalSucceeded', context.state.soundSetRemoving.id) }).catch((err) => { context.commit('soundSetRemovalFailed', err.message) }) @@ -373,13 +410,8 @@ export default { if (options.contractDefault !== true) { func = unsetAsDefault } - func(options.soundSetId).then(() => { - return context.dispatch('loadSoundSetList', { - listVisible: true, - page: context.state.soundSetListCurrentPage - }) - }).then(() => { - context.commit('soundSetUpdateSucceeded') + func(options.soundSetId).then((soundSet) => { + context.commit('soundSetUpdateSucceeded', soundSet) }).catch((err) => { context.commit('soundSetUpdateFailed', err.message) }) @@ -389,13 +421,8 @@ export default { soundSetId: options.soundSetId, field: i18n.t('name') }) - setSoundSetName(options.soundSetId, options.name).then(() => { - return context.dispatch('loadSoundSetList', { - listVisible: true, - page: context.state.soundSetListCurrentPage - }) - }).then(() => { - context.commit('soundSetUpdateSucceeded') + setSoundSetName(options.soundSetId, options.name).then((soundSet) => { + context.commit('soundSetUpdateSucceeded', soundSet) }).catch((err) => { context.commit('soundSetUpdateFailed', err.message) }) @@ -405,13 +432,8 @@ export default { soundSetId: options.soundSetId, field: i18n.t('description') }) - setSoundSetDescription(options.soundSetId, options.description).then(() => { - return context.dispatch('loadSoundSetList', { - listVisible: true, - page: context.state.soundSetListCurrentPage - }) - }).then(() => { - context.commit('soundSetUpdateSucceeded') + setSoundSetDescription(options.soundSetId, options.description).then((soundSet) => { + context.commit('soundSetUpdateSucceeded', soundSet) }).catch((err) => { context.commit('soundSetUpdateFailed', err.message) }) @@ -421,13 +443,8 @@ export default { soundSetId: options.soundSetId, field: i18n.t('parent') }) - setSoundSetParent(options.soundSetId, options.parent_id).then(() => { - return context.dispatch('loadSoundSetList', { - listVisible: true, - page: context.state.soundSetListCurrentPage - }) - }).then(() => { - context.commit('soundSetUpdateSucceeded') + setSoundSetParent(options.soundSetId, options.parent_id).then((soundSet) => { + context.commit('soundSetUpdateSucceeded', soundSet) }).catch((err) => { context.commit('soundSetUpdateFailed', err.message) }) @@ -533,6 +550,15 @@ export default { console.debug(err) context.commit('soundFileUpdateFailed', options) }) + }, + removeSoundFile (context, options) { + context.commit('soundFileRemoveRequesting', options) + removeSoundFile(options.soundFileId).then(() => { + context.commit('soundFileRemoveSucceeded', options) + }).catch((err) => { + console.debug(err) + context.commit('soundFileRemoveFailed', options) + }) } } }