diff --git a/public/index.html b/public/index.html index 12856fa..79a121e 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,8 @@ + openrank-frontend diff --git a/src/components/DataDetails.vue b/src/components/DataDetails.vue new file mode 100644 index 0000000..05e63c4 --- /dev/null +++ b/src/components/DataDetails.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/src/components/DataFilter.vue b/src/components/DataFilter.vue new file mode 100644 index 0000000..1d09f05 --- /dev/null +++ b/src/components/DataFilter.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/components/DataListContainer.vue b/src/components/DataListContainer.vue new file mode 100644 index 0000000..c9c1c62 --- /dev/null +++ b/src/components/DataListContainer.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/src/components/ORFilterSection.vue b/src/components/ORFilterSection.vue new file mode 100644 index 0000000..d3fd648 --- /dev/null +++ b/src/components/ORFilterSection.vue @@ -0,0 +1,128 @@ + + + + + diff --git a/src/components/ORFilterSectionsContainer.vue b/src/components/ORFilterSectionsContainer.vue new file mode 100644 index 0000000..8ad402f --- /dev/null +++ b/src/components/ORFilterSectionsContainer.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/components/QuestionListItem.vue b/src/components/QuestionListItem.vue new file mode 100644 index 0000000..c759aae --- /dev/null +++ b/src/components/QuestionListItem.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/components/common/ThreeSectionContainer.vue b/src/components/common/ThreeSectionContainer.vue new file mode 100644 index 0000000..73dc1f9 --- /dev/null +++ b/src/components/common/ThreeSectionContainer.vue @@ -0,0 +1,115 @@ + + + + + diff --git a/src/components/common/index.js b/src/components/common/index.js new file mode 100644 index 0000000..eebb643 --- /dev/null +++ b/src/components/common/index.js @@ -0,0 +1,3 @@ +import ThreeSectionContainer from './ThreeSectionContainer'; + +export default ThreeSectionContainer; diff --git a/src/components/index.js b/src/components/index.js index 35990f2..330e34d 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -4,3 +4,9 @@ export { default as FormAlerts } from './FormAlerts'; export { default as FormFields } from './FormFields'; export { default as FormButtons } from './FormButtons'; export { default as CustomForm } from './CustomForm'; +export { default as DataListContainer } from './DataListContainer'; +export { default as DataFilter } from './DataFilter'; +export { default as DataDetails } from './DataDetails'; +export { default as QuestionListItem } from './QuestionListItem'; +export { default as ORFilterSectionsContainer } from './ORFilterSectionsContainer'; +export { default as ORFilterSection } from './ORFilterSection'; diff --git a/src/router/index.js b/src/router/index.js index 09c0baa..9e9e95d 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,6 +6,7 @@ import { Register, Login, Profile, + Dashboard, } from '../views'; Vue.use(Router); @@ -39,5 +40,10 @@ export default new Router({ name: 'profile', component: Profile, }, + { + path: '/dashboard', + name: 'dashboard', + component: Dashboard, + }, ], }); diff --git a/src/store/index.js b/src/store/index.js index 849f684..7e64768 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -4,6 +4,7 @@ import Vue from 'vue'; import Vuex from 'vuex'; import authentication from './modules/authentication'; +import data from './modules/data'; import { Loading } from './plugins'; Vue.use(Vuex); @@ -33,6 +34,7 @@ export default new Vuex.Store({ }, modules: { authentication, + data, }, getters: { isLoading(state) { diff --git a/src/store/modules/data/dashboard.js b/src/store/modules/data/dashboard.js new file mode 100644 index 0000000..a5c13fd --- /dev/null +++ b/src/store/modules/data/dashboard.js @@ -0,0 +1,211 @@ +import HTTP from '../../../http'; +import filterSection from './filterSection'; +import store from '../..'; + +import { + QuestionListItem, +} from '../../../components'; + +export default { + namespaced: true, + strict: true, + state: { + entity: null, + childComponent: QuestionListItem, + items: [], + itemsPerPage: 5, + showFilter: false, + filters: {}, + search: '', + sections: '', + successMsg: '', + errorMsg: null, + }, + getters: { + getItemsPerPage({ itemsPerPage }) { + return itemsPerPage; + }, + getSearch({ search }) { + return search; + } + }, + mutations: { + setEntity(state, entity) { + state.entity = entity; + }, + setItems(state, items) { + state.items = items; + }, + setItemsPerPage(state, itemsPerPage) { + state.itemsPerPage = itemsPerPage; + }, + setSearch(state, search) { + state.search = search; + }, + setShowFilter(state, showFilter) { + state.showFilter = showFilter; + }, + setSections(state, sections) { + state.sections = sections; + }, + setFilters(state, { key, val }) { + state.filters[key] = val; + }, + setSuccessMsg(state, message) { + state.successMsg = message; + }, + setErrorMsg(state, message) { + state.errorMsg = message; + }, + }, + actions: { + async fetchFilteredData({ + commit, + rootGetters, + state: { + entity, + search, + filters, + }, + }) { + if (entity === null) { + return []; + } + + await HTTP().get(`/${entity}`, { + search, + filters, + }).then((items) => { + commit('setItems', items); + setTimeout(() => commit('setSuccessMsg', null), 2000); + }).catch(({ response }) => { + commit('setErrorMsg', rootGetters.getErrorMessage(response)); + setTimeout(() => commit('setErrorMsg', null), 2000); + }); + }, + async fetchDummyData({ + commit, + }) { + const dummyData = [ + { + props: { + title: 'Other than Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + props: { + title: 'Other than Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + props: { + title: 'Other than Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + props: { + title: 'Other than Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + subCategory: 'Some categ', + }, + }, + { + + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + subCategory: 'Some categ', + }, + }, + { + + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + subCategory: 'Some categ', + }, + }, + { + + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + }, + }, + { + + props: { + title: 'Frozen Yogurt', + category: 'Coding', + tags: ['some', 'random', 'tag'], + subCategory: 'Some categ', + }, + }, + ]; + commit('setItems', dummyData); + }, + async fetchSectionsData({ commit }) { + const dummySections = [ + { + name: 'Section 1', + items: [['Management', 'management'], + ['Settings', 'settings']], + enableSearch: true, + }, + { + name: 'Section 2', + items: [['Management', 'management'], + ['Settings', 'settings']], + enableSearch: true, + }, + { + name: 'Section 3', + items: [['Management', 'management'], + ['Settings', 'settings']], + }, + ]; + commit('setSections', dummySections); + const { state: scopedState, getters, mutations } = filterSection; + dummySections.forEach(({ name }) => { + store.registerModule(`filterSection-${name}`, { + state: scopedState, + getters, + mutations, + namespaced: true, + }); + }); + }, + }, +}; diff --git a/src/store/modules/data/filterSection.js b/src/store/modules/data/filterSection.js new file mode 100644 index 0000000..fa7f9c5 --- /dev/null +++ b/src/store/modules/data/filterSection.js @@ -0,0 +1,26 @@ +const state = () => ( + { + model: [], + search: '', + } +); + +const getters = { + getSearch: state => state.search, + getModel: state => state.model, +}; + +const mutations = { + setSearch: (state, search) => { + state.search = search; + }, + setModel: (state, model) => { + state.model = model; + }, +}; + +export default { + state, + getters, + mutations, +}; diff --git a/src/store/modules/data/index.js b/src/store/modules/data/index.js new file mode 100644 index 0000000..6ed3a2f --- /dev/null +++ b/src/store/modules/data/index.js @@ -0,0 +1,17 @@ +import dashboard from './dashboard'; + +export default { + namespaced: true, + strict: true, + state: { + }, + mutations: { + }, + actions: { + }, + getters: { + }, + modules: { + dashboard, + }, +}; diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue new file mode 100644 index 0000000..6e328b3 --- /dev/null +++ b/src/views/Dashboard.vue @@ -0,0 +1,94 @@ + + + diff --git a/src/views/index.js b/src/views/index.js index c514584..b26da58 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -3,3 +3,4 @@ export { default as About } from './About'; export { default as Login } from './Login'; export { default as Register } from './Register'; export { default as Profile } from './Profile'; +export { default as Dashboard } from './Dashboard';