github.com/benoitkugler/goacve@v0.0.0-20201217100549-151ce6e55dc8/server/frontend/bv/src/pages/espace_perso/App.vue (about)

     1  <template>
     2    <base-app
     3      title="Espace personnel de suivi"
     4      :subTitle="subTitle"
     5      hideFooter
     6      hideLogo
     7    >
     8      <success
     9        v-if="output"
    10        :output="output"
    11        :position="succesPosition"
    12      ></success>
    13      <error v-if="output" :output="output"></error>
    14  
    15      <b-modal
    16        v-model="isFirstVisit"
    17        hide-footer
    18        hide-header
    19        size="xl"
    20        body-bg-variant="secondary"
    21        body-class="rounded"
    22      >
    23        <presentation></presentation>
    24      </b-modal>
    25  
    26      <b-container class="my-2 mb-1" fluid>
    27        <b-row>
    28          <transition
    29            name="fade"
    30            mode="out-in"
    31            :duration="{ enter: 400, leave: 0 }"
    32          >
    33            <b-col lg="2" md="3" sm="4" v-show="showNavbar">
    34              <b-row class="mb-2"
    35                ><b-col class="text-center"> <logo /> </b-col
    36              ></b-row>
    37              <b-nav vertical pills>
    38                <b-nav-item
    39                  v-for="route in routes"
    40                  :key="route.name"
    41                  :to="{ name: route.name, params: $route.params }"
    42                  exact
    43                  exact-active-class="active"
    44                  v-b-tooltip.hover.right
    45                  :title="route.meta.tooltip"
    46                  >{{ route.meta.title }}</b-nav-item
    47                >
    48              </b-nav>
    49            </b-col>
    50          </transition>
    51          <b-col
    52            :lg="showNavbar ? 10 : 12"
    53            :md="showNavbar ? 9 : 12"
    54            :sm="showNavbar ? 8 : 12"
    55            class="align-self-center"
    56          >
    57            <transition name="fade" mode="out-in" duration="300">
    58              <b-container v-if="initialLoading">
    59                <b-row>
    60                  <b-col>
    61                    <b-progress
    62                      :value="100"
    63                      variant="secondary"
    64                      animated
    65                      class="mt-3"
    66                    ></b-progress>
    67                  </b-col>
    68                </b-row>
    69              </b-container>
    70              <keep-alive v-else>
    71                <router-view @toggleNavbar="toggleNavbar"></router-view>
    72              </keep-alive>
    73            </transition>
    74          </b-col>
    75        </b-row>
    76      </b-container>
    77    </base-app>
    78  </template>
    79  
    80  <script lang="ts">
    81  import Vue from "vue";
    82  import Component from "vue-class-component";
    83  import BaseApp from "@/BaseApp.vue";
    84  import Success from "@/shared/notifications/Success.vue";
    85  import Error from "@/shared/notifications/Error.vue";
    86  import { C } from "./logic/controller";
    87  import router, { routes, RouteType } from "./router/index";
    88  import { SuccesPosition } from "@/shared/utils";
    89  import Presentation from "./components/accueil/Presentation.vue";
    90  import Logo from "@/shared/Logo.vue";
    91  import { RouteFicheSanitaires, RouteDocuments } from "./router/routes";
    92  
    93  @Component({
    94    components: { BaseApp, Success, Error, Presentation, Logo }
    95  })
    96  export default class App extends Vue {
    97    initialLoading = true;
    98    output = C.notifications;
    99    content = C.data; // besoin d'une référence pour la réactivité
   100    succesPosition = SuccesPosition.BottomLeft;
   101  
   102    showNavbar = true;
   103  
   104    isFirstVisit = false;
   105  
   106    get subTitle() {
   107      const route = this.$route as RouteType;
   108      return "- " + route.meta.title;
   109    }
   110  
   111    /** restreint l'accès aux fiches sanitaires pour les directeurs */
   112    get routes() {
   113      if (router.currentRoute.query["directeur"]) {
   114        return routes.filter(r => r.name == RouteFicheSanitaires);
   115      }
   116      return routes;
   117    }
   118  
   119    // on charge les données de la page
   120    async mounted() {
   121      // on redirige vers les onglets
   122      if (router.currentRoute.hash.startsWith("#fiche-sanitaire")) {
   123        router.push({ name: RouteFicheSanitaires });
   124      } else if (router.currentRoute.hash.startsWith("#documents")) {
   125        router.push({ name: RouteDocuments });
   126      }
   127  
   128      this.content.key = router.currentRoute.params["key"];
   129  
   130      // on lance le chargement des infos non essentielles en tâche de fond
   131      this.content.loadMetas();
   132      this.content.loadJoomeoInfos();
   133  
   134      await this.content.loadData();
   135      this.initialLoading = false;
   136      document.title = C.pageTitle();
   137  
   138      this.isFirstVisit = !!this.$route.query["show-hint"];
   139    }
   140  
   141    toggleNavbar(show: boolean) {
   142      this.showNavbar = show;
   143    }
   144  }
   145  </script>
   146  
   147  <style></style>