Commit f143b35a authored by Kevin Robert's avatar Kevin Robert
Browse files

Mise en place du fonctionnement des onglets pour la navigation front.

parent aea32060
......@@ -53,8 +53,26 @@ export default class Admin extends Vue {
public asideComponent: String = null;
public tabs: Object = {
'workspace': [
{"title": "Paramétrage", "path": "/settings"},
{"title": "Questionnaires", "path": "/view"}
],
"form": [
{"title": "Paramétrage", "path": "/settings"},
{"title": "Edition", "path": "/view"}
]
};
public currentTabs: Object[] = [
{"title": "Paramétrage", "path": "/settings"},
{"title": "Questionnaires", "path": "/view"}
];
beforeRouteEnter(to, from, next) {
next(vm => vm.setAsideComponent(to.meta.panel));
next(vm => {
vm.setAsideComponent(to.meta.panel)
});
}
public setAsideComponent(asideComponent: string) {
......
......@@ -3,7 +3,7 @@
'h-screen antialiased text-gray-700 bg-gray-100',
(asideComponent ? 'app' : ''),
]">
<oa-header></oa-header>
<oa-header :tabs.sync="currentTabs"></oa-header>
<component :is="loadAsideComponent" v-if="asideComponent"></component>
<router-view></router-view>
</div>
......
<template>
<li>
<router-link :to="{name: link}"
<router-link :to="link"
:class="[
(!state ? ['block md:px-2 md:py-2 hover:text-blue-600 focus:text-blue-600'] : []),
(state === 'current' ? ['block text-blue-600 border-b border-blue-500 md:px-2 md:py-2'] : []),
......
......@@ -4,6 +4,7 @@ import Component from 'vue-class-component';
import Login from '@/components/header/login/login.vue';
import NavItem from '@/components/header/nav/nav-item/nav-item.vue';
import TabItem from '@/components/header/nav/tab-item/tab-item.vue';
import {Prop} from "vue-property-decorator";
@Component({
components: {
......@@ -13,4 +14,8 @@ import TabItem from '@/components/header/nav/tab-item/tab-item.vue';
}
})
export default class OaHeader extends Vue {
public tabs() {
return this.$store.getters.tabs;
}
}
......@@ -9,9 +9,7 @@
</ol>
<!-- Tabs-->
<ul class="px-4 py-2 border-b md:flex md:justify-center md:text-center md:py-0">
<tab-item title="Onglet 1" link="#"/>
<tab-item title="Onglet actif" link="#" state="current"/>
<tab-item title="Onglet inactif" link="#" state="inactive"/>
<tab-item v-for="tab in tabs()" :title="tab.title" :link="tab.link" :state="tab.isCurrent ? 'current' : ''"/>
</ul>
</nav>
<login username="Bob"/>
......
......@@ -12,6 +12,7 @@ import AlertService from '@/shared/alert/alert.service';
import TranslationService from '@/locale/translation.service';
import FrontFormService from '@/front/services/front-form.service';
import { ROUTES } from '@/router/routes-constants';
import HeaderService from "@/shared/service/header-service";
/* tslint:enable */
Vue.config.productionTip = false;
......@@ -24,6 +25,7 @@ const store = config.initVueXStore(Vue);
const alertService = new AlertService(store);
const translationService = new TranslationService(store, i18n);
const accountService = new AccountService(store, translationService, router);
const headerService = new HeaderService(store);
const frontFormService = new FrontFormService(store, router, alertService, translationService, i18n);
router.beforeEach((to, from, next) => {
......@@ -73,6 +75,7 @@ new Vue({
translationService: () => translationService,
accountService: () => accountService,
frontFormService: () => frontFormService,
headerService: () => headerService
},
i18n,
store,
......
......@@ -3,6 +3,7 @@ import { Authority } from '@/shared/security/authority';
const WorkspaceCreationComponent = () => import('@/views/workspace/workspace-creation.vue');
const WorkspaceSettingsComponent = () => import('@/views/workspace/workspace-settings.vue');
const WorkspaceListComponent = () => import('@/views/workspace/workspace-list.vue');
const WorkspaceViewComponent = () => import('@/views/workspace/workspace-view.vue');
export default [
{
......@@ -23,4 +24,10 @@ export default [
component: WorkspaceListComponent,
meta: { authorities: [Authority.ADMIN] },
},
{
path: '/admin/workspace/:idWorkspace/view',
name: 'WorkspaceViewComponent',
component: WorkspaceViewComponent,
meta: { authorities: [Authority.ADMIN] },
},
];
......@@ -10,6 +10,7 @@ import { accountStore } from '@/shared/config/store/account-store';
import { alertStore } from '@/shared/config/store/alert-store';
import { translationStore } from '@/shared/config/store/translation-store';
import { formStore } from '@/shared/config/store/form.store';
import { headerStore } from '@/shared/config/store/header-store';
const dateTimeFormats = {
fr: {
......@@ -88,6 +89,7 @@ export function initVueXStore(vue) {
alertStore,
translationStore,
formStore,
headerStore
},
});
}
import { Module } from 'vuex';
export const headerStore: Module<any, any> = {
state: {
tabs: [],
},
getters: {
tabs: state => state.tabs,
},
mutations: {
tabs(state, newTabs) {
state.tabs = newTabs;
localStorage.setItem('tabs', newTabs);
},
},
};
import {Store} from "vuex";
export default class HeaderService {
constructor(private store: Store<any>) {
}
public updateTabsForWorkspaceId(workspaceId: number, currentKey: String): void {
let tabs: Object[] = [
{
'title': 'Paramétrage',
'link': `/admin/workspace/${workspaceId}/settings`,
'isCurrent': currentKey === 'settings'
},
{
'title': 'Questionnaires',
'link': `/admin/workspace/${workspaceId}/view`,
'isCurrent': currentKey === 'view'}
];
this.store.commit('tabs', tabs);
}
public updateTabsForFormId(workspaceId: number, formId: number, currentKey: String): void {
let tabs: Object[] = [
{
'title': 'Paramétrage',
'link': `/admin/workspace/${workspaceId}/form/${formId}/settings`,
'isCurrent': currentKey === 'settings'
},
{
'title': 'Édition',
'link': `/admin/workspace/${workspaceId}/form/${formId}/view`,
'isCurrent': currentKey === 'view'}
];
this.store.commit('tabs', tabs);
}
public updateTabsForAdmin(currentTab: String): void {
let tabs: Object[] = [
{
'title': 'Espaces de travail',
'link': '/admin/workspace/list',
'isCurrent': currentTab === 'workspaces'
},
{
'title': 'Utilisateurs',
'link': '/admin/user/list',
'isCurrent': currentTab === 'users'}
];
this.store.commit('tabs', tabs);
}
public cleanTabs(): void {
this.store.commit('tabs', []);
}
}
......@@ -6,6 +6,7 @@ import OaTextarea from "@/components/forms/textarea/oa-textarea.vue";
import OaButton from "@/components/button/oa-button.vue";
import {Form} from "@/shared/model/form.model";
import FormService from "@/entities/form/form.service";
import HeaderService from "@/shared/service/header-service";
@Component({
......@@ -23,6 +24,9 @@ export default class FormCreation extends Vue {
@Inject('formService')
private formService: () => FormService;
@Inject('headerService')
private headerService: () => HeaderService;
private isSaving = false;
public name: String;
public reference: String;
......@@ -31,6 +35,7 @@ export default class FormCreation extends Vue {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.headerService().cleanTabs();
vm.retrieveParameters(to.params.idWorkspace);
});
}
......
......@@ -6,6 +6,7 @@ import FormService from '@/entities/form/form.service';
import OaInput from '@/components/forms/input/oa-input.vue';
import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
import OaButton from '@/components/button/oa-button.vue';
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -19,6 +20,9 @@ export default class FormSettings extends Vue {
@Inject('formService')
private formService: () => FormService;
@Inject('headerService')
private headerService: () => HeaderService;
public form: IForm = new Form();
private isSaving: boolean = false;
......@@ -28,6 +32,7 @@ export default class FormSettings extends Vue {
beforeRouteEnter(to, from, next) {
next(vm => {
if (to.params.idForm) {
vm.headerService().updateTabsForFormId(to.params.idWorkspace, to.params.idForm, 'settings');
vm.retrieveForm(to.params.idForm);
vm.retrieveAuthorizedUsers(to.params.idForm);
}
......
......@@ -5,6 +5,7 @@ import {Inject} from "vue-property-decorator";
import UserManagementService from '@/admin/user-management/user-management.service';
import {IUser, User} from "@/shared/model/user.model";
import OaButton from '@/components/button/oa-button.vue';
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -16,6 +17,9 @@ export default class UserEdit extends Vue {
@Inject('userService')
private userManagementService: () => UserManagementService;
@Inject('headerService')
private headerService: () => HeaderService;
public userAccount: IUser;
private isSaving: boolean = false;
public idUserParam: String = '';
......@@ -27,6 +31,7 @@ export default class UserEdit extends Vue {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.headerService().cleanTabs();
if (to.params.idUser) {
vm.idUserParam = to.params.idUser;
vm.userManagementService()
......
......@@ -3,6 +3,7 @@ import Component from 'vue-class-component';
import Toolbar from '@/components/toolbar/toolbar.vue';
import {Inject} from "vue-property-decorator";
import UserManagementService from "@/admin/user-management/user-management.service";
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -14,8 +15,20 @@ export default class UserList extends Vue {
@Inject('userService')
private userManagementService: () => UserManagementService;
/**
* Service du header.
*/
@Inject('headerService')
private headerService: () => HeaderService;
public users: any[] = [];
beforeRouteEnter(to, from, next) {
next(vm => {
vm.headerService().updateTabsForAdmin('users');
});
}
public mounted(): void {
this.loadAll();
}
......
......@@ -6,6 +6,7 @@ import {Inject} from "vue-property-decorator";
import WorkspaceService from "@/entities/workspace/workspace.service";
import Workspace from "@/shared/model/workspace.model";
import OaButton from '@/components/button/oa-button.vue';
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -22,10 +23,19 @@ export default class WorkspaceCreation extends Vue {
@Inject('workspaceService')
private workspaceService: () => WorkspaceService;
@Inject('headerService')
private headerService: () => HeaderService;
private isSaving = false;
public name: String;
public description: String;
beforeRouteEnter(to, from, next) {
next(vm => {
vm.headerService().cleanTabs();
});
}
public save(): void {
let workspace = new Workspace();
......
......@@ -3,6 +3,7 @@ import Component from 'vue-class-component';
import WorkspaceService from '@/entities/workspace/workspace.service';
import Card from '@/components/card/card.vue';
import Toolbar from '@/components/toolbar/toolbar.vue';
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -18,6 +19,12 @@ export default class WorkspaceList extends Vue {
@Inject('workspaceService')
private workspaceService: () => WorkspaceService;
/**
* Service du header.
*/
@Inject('headerService')
private headerService: () => HeaderService;
/**
* Liste des workspaces.
*/
......@@ -29,6 +36,7 @@ export default class WorkspaceList extends Vue {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.retrieveWorkspace();
vm.headerService().updateTabsForAdmin('workspaces');
});
}
......
......@@ -6,6 +6,7 @@ import {IWorkspace, Workspace} from '@/shared/model/workspace.model';
import OaInput from '@/components/forms/input/oa-input.vue';
import OaTextarea from '@/components/forms/textarea/oa-textarea.vue';
import OaButton from '@/components/button/oa-button.vue';
import HeaderService from "@/shared/service/header-service";
@Component({
components: {
......@@ -19,6 +20,9 @@ export default class WorkspaceSettings extends Vue {
@Inject('workspaceService')
private workspaceService: () => WorkspaceService;
@Inject('headerService')
private headerService: () => HeaderService;
public workspace: IWorkspace = new Workspace();
public authorizedUsers: Object[] = [];
......@@ -30,6 +34,7 @@ export default class WorkspaceSettings extends Vue {
if (to.params.idWorkspace) {
vm.retrieveWorkspace(to.params.idWorkspace);
vm.retrieveAuthorizedUsers(to.params.idWorkspace);
vm.headerService().updateTabsForWorkspaceId(to.params.idWorkspace, 'settings');
}
});
}
......
import Vue from 'vue';
import Component from 'vue-class-component';
import {Inject} from "vue-property-decorator";
import Card from "@/components/card/card.vue";
import Toolbar from "@/components/toolbar/toolbar.vue";
import FormService from "@/entities/form/form.service";
import {Inject} from 'vue-property-decorator';
import Card from '@/components/card/card.vue';
import Toolbar from '@/components/toolbar/toolbar.vue';
import FormService from '@/entities/form/form.service';
import HeaderService from '@/shared/service/header-service';
@Component({
components: {
......@@ -14,11 +15,17 @@ import FormService from "@/entities/form/form.service";
export default class WorkspaceView extends Vue {
/**
* Service des workspaces.
* Service des formulaires.
*/
@Inject('formService')
private formService: () => FormService;
/**
* Service des workspaces.
*/
@Inject('headerService')
private headerService: () => HeaderService;
/**
* Liste des workspaces.
*/
......@@ -32,6 +39,7 @@ export default class WorkspaceView extends Vue {
beforeRouteEnter(to, from, next) {
next(vm => {
vm.retrieveWorkspace(to.params.idWorkspace);
vm.headerService().updateTabsForWorkspaceId(to.params.idWorkspace, 'view');
});
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment