From 7aacc42cdf67f432fb055bcf47e2d700d0e862fd Mon Sep 17 00:00:00 2001 From: ladeniva2 <122989825+ladeniva2@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:37:44 +0300 Subject: [PATCH 1/2] added selection dropdown for sectors --- .../landing/LandingInitiativesTable.vue | 127 +++++++++++++++++- frontend/store/phasesStagesBoard.js | 45 +++++++ 2 files changed, 165 insertions(+), 7 deletions(-) create mode 100644 frontend/store/phasesStagesBoard.js diff --git a/frontend/components/landing/LandingInitiativesTable.vue b/frontend/components/landing/LandingInitiativesTable.vue index ceab7d5e..67791389 100644 --- a/frontend/components/landing/LandingInitiativesTable.vue +++ b/frontend/components/landing/LandingInitiativesTable.vue @@ -2,6 +2,7 @@
+ + + + + +
+
    +
  • + + {{ c.name }} +
    • +
+
+ + + + Cancel + + + + + Deselect all + + + + + Select all + + + + + Update + + + +
+
+
!phaseIdsOmit.some((phaseId) => phaseId === project.current_phase) ) }, - sortedSectors() { - return this.sectors.sort((a, b) => a.name.localeCompare(b.name)) + sortedSelectedSectors() { + return this.getShownSectors.sort((a, b) => a.name.localeCompare(b.name)).filter((sector) => sector.selected) }, initiativesTableData() { return this.boardType ? this.initiativesPhasesTableData : this.initiativesStagesTableData @@ -138,7 +226,7 @@ export default { initiativesStagesTableData() { let tableData = [] /* Creates each table row per sector**/ - this.sortedSectors.map((sector) => { + this.sortedSelectedSectors.map((sector) => { const dataObj = {} dataObj['sector'] = { sector_name: sector.name } this.phasesStages.map((stage) => { @@ -177,7 +265,7 @@ export default { const omPhases = this.phases.filter((phase) => !this.phasesOmit.some((omphase) => omphase === phase.name)) /* Creates each table row per sector**/ - this.sortedSectors.map((sector) => { + this.sortedSelectedSectors.map((sector) => { const dataObj = {} dataObj['sector'] = { sector_name: sector.name } omPhases.map((phase) => { @@ -211,6 +299,19 @@ export default { }, }, methods: { + deselectAllSectors() { + this.$store.dispatch('phasesStagesBoard/deselectAll') + }, + selectAllSectors() { + this.$store.dispatch('phasesStagesBoard/selectAll') + }, + updateSectors() { + this.$store.dispatch('phasesStagesBoard/updateSectors') + this.columnSelectorOpen = false + }, + invertSelectSector(sectorId) { + this.$store.dispatch('phasesStagesBoard/invertSelectSector', sectorId) + }, getStage(phase) { return this.phasesStages.find((stage) => stage.phases.some((stphase) => stphase.phase_number === phase)) .stage_number @@ -275,10 +376,18 @@ export default { width: 100%; height: 30px; display: flex; - justify-content: space-around; + justify-content: end; .Switch { - padding-top: 4px; + padding: 5px 18px 0; + } + + .cogIcon { + padding: unset; + .fa-cog { + padding: 4px 24px 0 12px; + font-size: 22px; + } } } @@ -418,6 +527,10 @@ export default { } } } +.popoverAlign { + transform: translate(-5px, 0px); +} + .caption { width: 420px; display: inline-flex; diff --git a/frontend/store/phasesStagesBoard.js b/frontend/store/phasesStagesBoard.js new file mode 100644 index 00000000..7fc08ebf --- /dev/null +++ b/frontend/store/phasesStagesBoard.js @@ -0,0 +1,45 @@ +export const state = () => ({ + sectorsSelected: [], + sectorsShown: [], +}) + +export const getters = { + getSelectedSectors: (state) => state.sectorsSelected, + getShownSectors: (state) => state.sectorsShown, +} + +export const actions = { + initSectors({ commit, rootGetters }) { + const sectors = rootGetters['projects/getSectors'] + const sectorsAllSelected = sectors.map((sector) => ({ ...sector, selected: true })) + commit('SET_SECTORS_SELECTED', sectorsAllSelected) + commit('SET_SECTORS_SHOWN', sectorsAllSelected) + }, + updateSectors({ commit, getters }) { + commit('SET_SECTORS_SHOWN', getters.getSelectedSectors) + }, + invertSelectSector({ commit, getters }, sectorId) { + const updatedSelectors = getters.getSelectedSectors.map((sector) => + sector.id === sectorId ? { ...sector, selected: !sector.selected } : sector + ) + commit('SET_SECTORS_SELECTED', updatedSelectors) + }, + + deselectAll({ commit, getters }) { + const deselectedSectors = getters.getSelectedSectors.map((sector) => ({ ...sector, selected: false })) + commit('SET_SECTORS_SELECTED', deselectedSectors) + }, + selectAll({ commit, getters }) { + const deselectedSectors = getters.getSelectedSectors.map((sector) => ({ ...sector, selected: true })) + commit('SET_SECTORS_SELECTED', deselectedSectors) + }, +} + +export const mutations = { + SET_SECTORS_SELECTED(state, sectors) { + state.sectorsSelected = sectors + }, + SET_SECTORS_SHOWN(state, sectors) { + state.sectorsShown = sectors + }, +} From 132225d37fc66bdd28ed43191e8c7780f94f11da Mon Sep 17 00:00:00 2001 From: ladeniva2 <122989825+ladeniva2@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:47:23 +0300 Subject: [PATCH 2/2] dropdown count fix --- .../components/landing/LandingInitiativesTable.vue | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/components/landing/LandingInitiativesTable.vue b/frontend/components/landing/LandingInitiativesTable.vue index 67791389..0bb15add 100644 --- a/frontend/components/landing/LandingInitiativesTable.vue +++ b/frontend/components/landing/LandingInitiativesTable.vue @@ -183,9 +183,9 @@ export default { getShownSectors: 'phasesStagesBoard/getShownSectors', }), settingsTitle() { - return `${this.$gettext('selected sectors')} (${this.sortedSelectedSectors.length}/${ - this.getSelectedSectors.length - })` + return `${this.$gettext('selected sectors')} (${ + this.getSelectedSectors.filter((sector) => sector.selected === true).length + }/${this.getSelectedSectors.length})` }, setMaxHeight() { return this.stdHeight ? { 'max-height': 580 } : { 'max-height': false } @@ -218,7 +218,9 @@ export default { ) }, sortedSelectedSectors() { - return this.getShownSectors.sort((a, b) => a.name.localeCompare(b.name)).filter((sector) => sector.selected) + return this.getShownSectors + .sort((a, b) => a.name.localeCompare(b.name)) + .filter((sector) => sector.selected === true) }, initiativesTableData() { return this.boardType ? this.initiativesPhasesTableData : this.initiativesStagesTableData