Se ha definido una estructura de pantalla que deberán seguir los servicios implementados en Mi campus. Sin embargo, en lugar de modificar el componente fwjsPageWithMenu, se ha optado por crear un nuevo componente que facilite la tarea de organizar las pantallas de los distintos servicios ofrecidos en Mi campus siguiendo la estructura definida por la diseñadora en Zepplin.
En esencia, el diseño de la página será algo como lo siguiente:
import fwjsSimplePagefrom '@/app/shared/components/fwjsServicePage.vue'; |
<fwjs-service-page
mainServiceId="20601_16600"
:mainServiceName="$t('mis_tramites_titulo')"
:serviceName="$t('tramites_activos_titulo')"
:breadcrumbs="breadcrumbs"
:loading="loading"
subicon="fad fa-list-ul"
>
<template v-slot:menu>
<!-- Contenido del menú lateral-->
</template>
<template v-slot:service-name>
<!-- Si se indica, podrá personalizarse el h1 mostrado en el título -->
</template>
<template v-slot:service-description>
<!-- Descripción de la página -->
</template>
<template v-slot:service-content>
<!-- Contenido de la página -->
</template>
</fwjs-service-page> |
| Propiedad | Tipo | Default | Descripción | |
|---|---|---|---|---|
| mainServiceName | String | Nombre del servicio principal. | ||
| serviceName | String | Nombre del servicio. | ||
| loading | Boolean | false | Boolean que indica si se está esperando a que se complete la carga inicial de la pantalla. | |
| breadcrumbs | Array | Migas de pan del servicio.
| ||
| icon | String | Icono del servicio. | ||
| subicon | String | Subicono del servicio. | ||
| category | Number | 0 | Identificador de la categoría del servicio. | |
| categoryName | String | Nombre de la categoría del servicio. | ||
| mainServiceId | String | Identificador del servicio principal. Si se indica, se recuperará de la API el icono, subicono y nombre de categoría. |
Este componente únicamente tiene los siguientes slots: menu, service-name, service-description y service-content.
Este componente no emite eventos.
Si el servicio que vamos a integrar formase parte de un grupo de servicios, se tendría que establecer el nombre del servicio principal en la propiedad "mainServiceName".
El servicio de "Mis trámites" está compuesto por dos subservicios: la consulta de trámites activos y nuevo trámite. Si vamos a integrar este componente en la pantalla de consulta de trámites activos, en la propiedad "mainServiceName" estableceríamos "Mis trámites" y en la propiedad "serviceName" estableceríamos "Trámites activos". |
El valor de la propiedad "mainServiceName" se utilizará en los puntos identificados con un 1 en la imagen anterior. Se usará también en el punto 2 cuando no se establezca la propiedad "serviceName".
Si el servicio que vamos a integrar formase parte de un grupo de servicios, se tendría que establecer el nombre del servicio concreto en la propiedad "serviceName".
El servicio de "Mis trámites" está compuesto por dos subservicios: la consulta de trámites activos y nuevo trámite. Si vamos a integrar este componente en la pantalla de consulta de trámites activos, en la propiedad "mainServiceName" estableceríamos "Mis trámites" y en la propiedad "serviceName" estableceríamos "Trámites activos". |
El valor de la propiedad "serviceName" se utilizará en los puntos identificados con un 2 en la imagen anterior. También se establecerá en el header de la página para evitar problemas de accesibilidad.
Hay dos maneras de pintar el icono en la pantalla del servicio que queramos integrar:
Si el servicio que vamos a integrar formase parte de un grupo de servicios, tendríamos que establecer un icono que resumiese el servicio concreto en la propiedad "subicon".
El servicio de "Mis trámites" está compuesto por dos subservicios: la consulta de trámites activos y nuevo trámite. Si vamos a integrar este componente en la pantalla de consulta de trámites activos, en la propiedad "subicon" estableceríamos "fad fa-list-ul". |
El valor de la propiedad "subicon" se utilizará en los puntos identificados con un 4 en la imagen anterior.
Para establecer las migas de pan, habrá que pasárselas al componente haciendo uso de la propiedad "breadcrumbs". La miga inicial no es necesario añadirla, ya que se establece automáticamente. Mientras que la última miga no necesita que se establezca la propiedad "path", ya que no será navegable.
En la pantalla de consulta de trámites activos, se le pasará el siguiente objeto con las migas de pan:
|
El valor de la propiedad "breadcrumbs" se utilizará en los puntos identificados con un 5 en la imagen anterior.
En el slot "menu", se establecerán los enlaces a los elementos del menú lateral del servicio. Si no se indican, no se muestra.
En el slot "service-description", se establecerá una pequeña descripción del servicio que se va a integrar (2 o 3 líneas).
En el slot "service-content", se establecerá el contenido del servicio que se va a integrar.