Skip to content

Commit ccbdab4

Browse files
obulatobulat
committed
Setup vuex store
Signed-off-by: Olga Bulat <obulat@gmail.com>
1 parent 4791603 commit ccbdab4

File tree

4 files changed

+288
-1
lines changed

4 files changed

+288
-1
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@
3030
"core-js": "^3.6.1",
3131
"vue": "^2.6.10",
3232
"vue-analytics": "^5.22.1",
33-
"vue-i18n": "^8.15.3"
33+
"vue-i18n": "^8.15.3",
34+
"vuex": "^3.1.2"
3435
},
3536
"devDependencies": {
3637
"@vue/cli-plugin-babel": "^4.1.0",

‎src/main.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import Buefy from 'buefy'
33
import i18n from './i18n'
44
import VueAnalytics from 'vue-analytics'
55
import App from './App.vue'
6+
import store from '../store'
7+
68
import { library } from '@fortawesome/fontawesome-svg-core'
79
// internal icons
810
import {
@@ -34,6 +36,7 @@ if (process.env.NODE_ENV === 'production') {
3436
Vue.use(LicenseUtilities)
3537

3638
new Vue({
39+
store,
3740
i18n,
3841
render: h => h(App)
3942
}).$mount('#app')

‎store/index.js‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
import Vue from 'vue'
2+
import Vuex from 'vuex'
3+
4+
Vue.use(Vuex)
5+
6+
const CC0Attributes = { BY: false, NC: false, ND: false, SA: false }
7+
const CCBYAttributes = { BY: true, NC: false, ND: false, SA: false }
8+
const visibleSetters = {
9+
FS: {
10+
true: ['FS', 'DD', 'AD'],
11+
false: ['FS', 'BY', 'NC', 'ND', 'SA', 'AD']
12+
},
13+
BY: {
14+
// Decide if NC/ND/SA should be disabled or removed on CC0
15+
true: ['FS', 'BY', 'NC', 'ND', 'SA', 'AD'],
16+
false: ['FS', 'BY', 'CW', 'NC', 'ND', 'SA', 'AD']
17+
},
18+
ND: {
19+
true: ['FS', 'BY', 'NC', 'ND', 'AD']
20+
}
21+
}
22+
const disabledSetters = {
23+
// Steps that should be disabled if other steps are selected/not selected
24+
BY: {
25+
false: ['NC', 'ND', 'SA']
26+
},
27+
ND: {
28+
false: ['SA']
29+
}
30+
}
31+
32+
export default new Vuex.Store({
33+
state: {
34+
currentLicenseAttributes: { ...CCBYAttributes },
35+
// FS: First step, checks if user knows the license (and we need to open the dropdown)
36+
// CW: Copyright waiver step for CC0
37+
// DD: Dropdown step if user knows the license
38+
// AD: Attribution Details step with the form
39+
steps: [
40+
// VISIBLE: Steps are shown only if visible is set to true
41+
// eg. When we choose BY, Copyright Waiver is not shown
42+
// ENABLED: Steps are shown but disabled when they cannot be chosen
43+
// eg. When we choose ND, SA is disabled
44+
{ id: 0, name: 'FS', visible: true, enabled: true, status: 'current' },
45+
{ id: 1, name: 'BY', visible: true, enabled: true, status: 'inactive' },
46+
{ id: 2, name: 'NC', visible: true, enabled: true, status: 'inactive' },
47+
{ id: 3, name: 'ND', visible: true, enabled: true, status: 'inactive' },
48+
{ id: 4, name: 'SA', visible: true, enabled: true, status: 'inactive' },
49+
{ id: 5, name: 'CW', visible: false, enabled: true, status: 'inactive' },
50+
{ id: 6, name: 'DD', visible: false, enabled: true, status: 'inactive' },
51+
{ id: 7, name: 'AD', visible: true, enabled: true, status: 'inactive' }
52+
],
53+
attributionDetails: {
54+
creatorName: '',
55+
creatorProfileUrl: '',
56+
workTitle: '',
57+
workUrl: ''
58+
},
59+
knowLicense: false,
60+
currentStepId: 0
61+
},
62+
getters: {
63+
shortName: state => {
64+
let shortLicenseName = 'CC'
65+
if (state.currentLicenseAttributes.BY) {
66+
shortLicenseName = ` BY${state.currentLicenseAttributes.NC ? '-NC' : ''}`
67+
if (state.currentLicenseAttributes.SA && !state.currentLicenseAttributes.ND) {
68+
shortLicenseName += '-SA'
69+
} else if (state.currentLicenseAttributes.ND) {
70+
shortLicenseName += '-ND'
71+
}
72+
shortLicenseName += ' 4.0'
73+
} else {
74+
shortLicenseName += '0 1.0'
75+
}
76+
return shortLicenseName
77+
},
78+
fullName: state => {
79+
let fullLicenseName = ''
80+
if (state.currentLicenseAttributes.BY) {
81+
fullLicenseName = `Attribution${state.currentLicenseAttributes.NC ? '-NonCommercial' : ''}`
82+
if (state.currentLicenseAttributes.SA && !state.currentLicenseAttributes.ND) {
83+
fullLicenseName += '-ShareAlike'
84+
} else if (state.currentLicenseAttributes.ND) {
85+
fullLicenseName += '-NoDerivatives'
86+
}
87+
fullLicenseName += ' 4.0'
88+
return fullLicenseName
89+
} else {
90+
return 'CC0 1.0 Universal'
91+
}
92+
},
93+
licenseUrl: state => {
94+
if (!state.currentLicenseAttributes.BY) {
95+
return 'https://creativecommons.org/publicdomain/zero/1.0/?ref=ccchooser'
96+
} else {
97+
const license = `by${state.currentLicenseAttributes.NC ? '-nc' : ''}${state.currentLicenseAttributes.ND ? '-nd' : ''}${state.currentLicenseAttributes.SA ? '-sa' : ''}`
98+
return 'https://creativecommons.org/licenses/' + license + '/4.0/?ref=ccchooser'
99+
}
100+
},
101+
iconsList: state => {
102+
const iconsArray = []
103+
for (const key in state.currentLicenseAttributes) {
104+
if (state.currentLicenseAttributes[key]) {
105+
iconsArray.push(key.toLowerCase())
106+
}
107+
}
108+
return iconsArray
109+
},
110+
isStepSelected: state => (stepName) => {
111+
return stepName === 'FS'
112+
? state.knowLicense
113+
: state.currentLicenseAttributes[stepName]
114+
},
115+
enabledAndVisibleSteps: state => {
116+
return state.steps.filter(step => {
117+
return step.visible && step.enabled
118+
})
119+
},
120+
getStepById: (state, getters) => (id) => {
121+
return state.steps.find(step => step.id === id)
122+
},
123+
getStepByName: (state, getters) => (name) => {
124+
return state.steps.find(step => step.name === name)
125+
}
126+
},
127+
mutations: {
128+
toggleSelected(state, stepName) {
129+
// Called when a radio button is clicked, either FirstStep or VerticalStep
130+
if (['BY', 'NC', 'ND', 'SA'].indexOf(stepName) > -1) {
131+
state.currentLicenseAttributes = {
132+
...state.currentLicenseAttributes,
133+
[stepName]: !state.currentLicenseAttributes[stepName]
134+
}
135+
} else {
136+
state.knowLicense = !state.knowLicense
137+
}
138+
},
139+
updateAttributesFromShort(state, shortName) {
140+
if (shortName.includes('CC0')) {
141+
state.currentLicenseAttributes = { ...CC0Attributes }
142+
} else {
143+
state.currentLicenseAttributes.NC = !!shortName.includes('NC')
144+
state.currentLicenseAttributes.ND = !!shortName.includes('ND')
145+
state.currentLicenseAttributes.SA = !!shortName.includes('SA')
146+
}
147+
},
148+
updateStepStatus(state, stepName) {
149+
// when transitioning, set currentStep's status to 'previous' and nextStep's status to 'current'
150+
const stepId = state.steps.find(step => step.name === stepName).id
151+
const nextStep = state.steps.slice(stepId + 1).find(step => step.visible && step.enabled).id
152+
Vue.set(state.steps, nextStep, { ...state.steps[nextStep], status: 'current' })
153+
Vue.set(state.steps, stepId, { ...state.steps[stepId], status: 'previous' })
154+
state.currentStepId = nextStep
155+
},
156+
goToPrevious(state, stepName) {
157+
// when transitioning, set currentStep's (and steps between current and next) status to 'inactive' and
158+
// nextStep's status to 'current'
159+
const stepId = state.steps.find(step => step.name === stepName).id
160+
let previousStep = stepId
161+
for (let i = stepId - 1; i >= 0; i--) {
162+
const thisStep = state.steps[i]
163+
if (thisStep.visible && thisStep.enabled) {
164+
previousStep = state.steps[i].id
165+
break
166+
}
167+
}
168+
Vue.set(state.steps, previousStep, { ...state.steps[previousStep], status: 'current' })
169+
Vue.set(state.steps, stepId, { ...state.steps[stepId], status: 'inactive' })
170+
state.currentStepId = previousStep
171+
},
172+
updateDisabledSteps(state, stepsToSetDisabled) {
173+
console.log('Update disabled steps: ', stepsToSetDisabled)
174+
// Set disabled steps in the stepsToSetDisabled array
175+
for (const step of state.steps) {
176+
if (stepsToSetDisabled.indexOf(step.name) > -1 && !step.enabled) {
177+
Vue.set(state.steps, step.id, { ...step, enabled: false })
178+
} else if (stepsToSetDisabled.indexOf(step.name) === -1 && step.enabled) {
179+
Vue.set(state.steps, step.id, { ...step, enabled: true })
180+
}
181+
}
182+
},
183+
updateVisibleSteps(state, stepsToSetVisible) {
184+
// stepsToSetVisible is an array of stepNames to set Visible
185+
let visibleCounter = 0
186+
for (const step of state.steps) {
187+
if (stepsToSetVisible.indexOf(step.name) > -1 && !step.visible) {
188+
Vue.set(state.steps, step.id, { ...step, visible: true, currentId: visibleCounter })
189+
visibleCounter += 1
190+
} else if (stepsToSetVisible.indexOf(step.name) === -1 && step.visible) {
191+
Vue.set(state.steps, step.id, { ...step, visible: false, currentId: -1 })
192+
} else if (!step.visible && step.currentId !== -1) {
193+
Vue.set(state.steps, step.id, { ...step, currentId: -1 })
194+
} else if (step.visible && step.currentId === -1) {
195+
Vue.set(state.steps, step.id, { ...step, currentId: visibleCounter })
196+
visibleCounter += 1
197+
}
198+
}
199+
},
200+
setCreatorName(state, newName) {
201+
state.attributionDetails.creatorName = newName
202+
},
203+
setCreatorProfileUrl(state, newName) {
204+
state.attributionDetails.ProfileUrl = newName
205+
},
206+
setWorkTitle(state, newName) {
207+
state.attributionDetails.workTitle = newName
208+
},
209+
setWorkUrl(state, newName) {
210+
state.attributionDetails.workUrl = newName
211+
}
212+
},
213+
actions: {
214+
updateDisabledAndVisibleSteps(context, payload) {
215+
const [stepName, isStepSelected] = payload
216+
if (stepName in visibleSetters) {
217+
const visible = visibleSetters[stepName][isStepSelected]
218+
console.log(visible, visibleSetters[stepName])
219+
if (visible !== undefined) {
220+
console.log('Will set ', visible.toString(), ' visible')
221+
context.commit('updateVisibleSteps', visible)
222+
}
223+
}
224+
if (stepName in disabledSetters) {
225+
const disabled = disabledSetters[stepName][isStepSelected]
226+
if (disabled !== undefined) {
227+
console.log('Will set ', disabled, ' disabled because ', stepName, ' is selected? ', isStepSelected)
228+
context.commit('updateDisabledSteps', disabled)
229+
}
230+
}
231+
},
232+
handleNext: (context, payload) => {
233+
const currentStepName = payload
234+
const isCurrentStepSelected = context.getters.isStepSelected(payload)
235+
context.dispatch('updateDisabledAndVisibleSteps', [currentStepName, isCurrentStepSelected])
236+
context.commit('updateStepStatus', currentStepName)
237+
},
238+
handlePrevious: (context, payload) => {
239+
console.log('Handle previous: ', payload)
240+
const currentStepName = payload
241+
const isCurrentStepSelected = context.getters.isStepSelected(payload)
242+
context.dispatch('updateDisabledAndVisibleSteps', [currentStepName, isCurrentStepSelected])
243+
context.commit('goToPrevious', currentStepName)
244+
},
245+
updateSelected: (context, payload) => {
246+
// On radio button click, Step's Selected parameter is toggled and Disabled/Visible
247+
// steps are updated
248+
const [currentStepName, isCurrentStepSelected] = payload
249+
console.log('Updating selected, current step: ', currentStepName, ', selected: ', isCurrentStepSelected)
250+
console.log('Steps before toggling: ', context.state.steps[1])
251+
context.commit('toggleSelected', currentStepName)
252+
console.log('Steps after toggling: ', context.state.steps[1], context.state.currentLicenseAttributes)
253+
context.dispatch('updateDisabledAndVisibleSteps', [currentStepName, !isCurrentStepSelected])
254+
},
255+
setActiveStep: (context, payload) => {
256+
const nextStep = context.getters.getStepByName(payload)
257+
if (context.state.currentStepId < nextStep.id) {
258+
for (let i = context.state.currentStepId; i < nextStep.id; i++) {
259+
Vue.set(context.state.steps, i,
260+
{ ...context.state.steps[i], status: 'previous' })
261+
}
262+
Vue.set(context.state.steps,
263+
nextStep.id,
264+
{ ...context.state.steps[nextStep.id], status: 'current' })
265+
} else {
266+
for (let i = context.state.currentStepId; i > nextStep.id; i--) {
267+
Vue.set(context.state.steps, i,
268+
{ ...context.state.steps[i], status: 'inactive' })
269+
}
270+
Vue.set(context.state.steps,
271+
nextStep.id,
272+
{ ...context.state.steps[nextStep.id], status: 'current' })
273+
}
274+
context.state.currentStepId = nextStep.id
275+
}
276+
}
277+
})
278+
// TODO: I'm calculating current Step Name in many places, sending a stepName parameter can be faster

0 commit comments

Comments
 (0)