2 lines
6.1 KiB
JavaScript
2 lines
6.1 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{FyVx:function(e,t,n){"use strict";n.r(t),n.d(t,"_frontmatter",(function(){return l})),n.d(t,"default",(function(){return s}));n("5hJT"),n("W1QL"),n("K/PF"),n("t91x"),n("75LO"),n("PJhk"),n("mXGw");var i=n("/FXl"),a=n("TjRS");n("aD51");function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}var l={};void 0!==l&&l&&l===Object(l)&&Object.isExtensible(l)&&!l.hasOwnProperty("__filemeta")&&Object.defineProperty(l,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"screen/drawer/drawerScreen.mdx"}});var c={_frontmatter:l},o=a.a;function s(e){var t=e.components,n=function(e,t){if(null==e)return{};var n,i,a={},r=Object.keys(e);for(i=0;i<r.length;i++)n=r[i],t.indexOf(n)>=0||(a[n]=e[n]);return a}(e,["components"]);return Object(i.b)(o,r({},c,n,{components:t,mdxType:"MDXLayout"}),Object(i.b)("h1",{id:"drawerlateral"},"DrawerLateral"),Object(i.b)("p",null,"Le menu latéral de l'application ou encore Drawer est matérialiser par le fichier ",Object(i.b)("a",r({parentName:"p"},{href:"https://dev.ilink-app.com/administrateur/iLink-Wolrd/src/branch/master/screens/optionMenu/OptionsMenu.js"}),"OptionsMenu.js"),".\nElle contient l'ensemble des options de menu disponibles au sein de l'application iLink World."),Object(i.b)("br",null),Object(i.b)("p",null,"Elle distingue notamment les types d'utilisateurs, et affiche un menu en fonciton du type de comtpe de l'utilisateur connecté."),Object(i.b)("p",null,"⚠️ Des composants plus récents existent"),Object(i.b)("p",null,"Il des composants plus récents, pour plus d'ergonomie et de flexibilité notamment ",Object(i.b)("a",r({parentName:"p"},{href:"https://reactnavigation.org/docs/drawer-based-navigation/"}),"Drawer-Navigation")),Object(i.b)("h2",{id:"initialisation"},"Initialisation"),Object(i.b)("p",null,"Après l'étape de connexion de l'utilisateur, une interface lui ai affiché en fonction du type de son compte."),Object(i.b)("br",null),Object(i.b)("h2",{id:"menu-utilisateur"},"Menu Utilisateur"),Object(i.b)("hr",null),Object(i.b)("p",null,"Dans le cas d'un compte de type 'Utilisateur', le menu par défaut lui affiché ceci par la fonction suivante:"),Object(i.b)("pre",null,Object(i.b)("code",r({parentName:"pre"},{className:"language-javascript"})," getUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }\n")),Object(i.b)("p",null,"qui renvoie les quatres principaux menus dédiés à un utilisateur. Les clés 'icon' et 'active' permettent respectivement d'afficher l'icône associé au menu et de le rendre actif si l'on est bien positionné sur lui."),Object(i.b)("p",null,"⚠️ NB: la fonction I18n permet d'effectuer la traduction du texte en se basant sur une clé auquel correspond un texte. Celà est abordé plus en détail dans la vue ",Object(i.b)("a",r({parentName:"p"},{href:"/ilink-world/screen/configuration-screen#la-biblioth%C3%A8que-react-native-i18n"}),"ConfigurationScreen"),"."),Object(i.b)("h2",{id:"menu-utilisateur-géolocalisé-superviseur-et-hyperviseur"},"Menu Utilisateur Géolocalisé, Superviseur et Hyperviseur"),Object(i.b)("hr",null),Object(i.b)("p",null,"Dans le cas d'un compte de type 'Utilisateur Géolocalisé', 'Superviseur' et 'Hyperviseur', des options supplémentaires sont affichés ainsi qu'il suit:"),Object(i.b)("pre",null,Object(i.b)("code",r({parentName:"pre"},{className:"language-javascript"})," getGeolocatedUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false }\n , { title: I18n.t('ADD_NETWORK'), id: 11, key: 11, icon: 'md-people', active: false }\n , { title: I18n.t('CHANGE_INFORMATION'), id: 13, key: 13, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }\n")),Object(i.b)("hr",null),Object(i.b)("h2",{id:"déconnexion-de-lutilisateur"},"Déconnexion de l'utilisateur"),Object(i.b)("p",null,"Le menu Déconnexion permet à un utilisateur connecté de déconnecter son compte et par la même occasion d'être redigiré vers l'interface de connexion de l'application.\nCeci se fait premièrement par l'affichage d'une boîte de dialogue demandant à l'utilisateur de confirmer sa déconnexion, une fois que celà est fait un évenement est dispatché au sein de l'application ce qui permet au fonction qui écoute cette évenement de se déclencher."),Object(i.b)("pre",null,Object(i.b)("code",r({parentName:"pre"},{className:"language-javascript"}),' disconnect() {\n IlinkEmitter.emit("userdisconnect");\n Navigation.setStackRoot(route.stackRoot, {\n component: {\n name: route.login,\n animated: true\n }\n })\n })\n')),Object(i.b)("p",null,"⚠️ Cette manière de procéder est obsolète"),Object(i.b)("p",null,Object(i.b)("em",{parentName:"p"},"Aujourd'hui la bibliothèque ",Object(i.b)("a",r({parentName:"em"},{href:"https://redux.js.org/"}),"redux")," permet une meilleur gestion du state global de l'application.")))}s&&s===Object(s)&&Object.isExtensible(s)&&!s.hasOwnProperty("__filemeta")&&Object.defineProperty(s,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"screen/drawer/drawerScreen.mdx"}}),s.isMDXComponent=!0}}]);
|
|
//# sourceMappingURL=component---screen-drawer-drawer-screen-mdx-aeebaf37c41b9ba07919.js.map
|