# w23#11 Personalización - colores y logos

### Dudas producto
- Al cambiar colores y logos se guarda automáticamente. Cuándo persiste esto en la aplicación? Al recrgar o sintantáneamente a cada cambio? => nos responderá producto, lo están pensando
- es raro que se cambie todo en caliente, se pueden mandar muchas peticiones si se arrastra el color picker, por ejemplo, se podria meter un boton para guardar estas configuraciones? => debounce
- Desde midgard, de dónde vienen los colores de intranet? Vendrán de la sesion o haremos una llamada nueva? => llamada nueva
- Cuando activamos Usar paleta de color de intranet, qué comportamiento tiene Interfaz Intranet? Se queda en gris? Desaparece? => nada, esto va a ser un botón que copie el color actual
- En el selector de empresas del componente de logotipos, seteamos por defecto la seleccionada o ninguna. En el caso de ninguna, dejaríamos de mostrar los componentes de subida de fichero => Seteamos por defecto la empresa actual
- Orden en el menú de la nueva sección de Personalización
- La pestaña de personalización solo cuando tenga subdominio y no sso
- ¿El checkbox 'Usar paleta de color...' se debe almacenar? => no, es un botón que copia

### BBDD
- Ruta menú sidebar => Personalización (/company/theme-customization) (2h)
- Migration para añadir la nueva opción de menu con los permisos para la opcion de menu. (CONFPER)
- Seccion (Nivel 1) Configuración (CONFIGU)
- Ejemplo migration menu: database/migrations/unmodelled/2018_12_20_093427_add_homologacion_documentos_menu.php
- Los roles a los que hay que añadir son SUPERUS y ADMINIS
- En el caso de que no sea la última opción habrá que añadir al orden de las que vayan después de la posición en la que se inserte uno más. => pendiente de producto

- Añadir columnas en la tabla jos_6c_cliente_configuración 2h 30m
- Columnas:
- color_10 ... color_70 (string/not nullable) => por defecto los existentes
- color_intranet_10 ... color_intranet_70 (string/not nullable) => por defecto los existentes
- logotipo_cabecera (string/nullable)
- logotipo_cabecera_intranet (string/nullable)
- Los colores tendrán un valor por defecto => Rellenar de lo que tenemos en front
- Ampliar mysql_tables y repositorio con estas nuevas columnas

- Añadir columna en la tabla jos_6c_empresas (2h 30m)
- Columnas:
- logo_informe (string/nullable)
- logo_informe (jos_6c_empresas) rellenar con el valor de logo_original
- Ampliar mysql_tables, queryManager y repositorio con esta nueva columna
- Añadir la columna reportLogo a la vista del proceso GetCompanyProcess

- Añadir columnas en la tabla jos_6c_cliente_configuracion_dominio 1h 30m
- Columna:
- fondo_pagina_login (string/nullable)
- Ampliar mysql_tables y repositorio con esta nueva columna

- ¿Migracion para importar los colores, logos, fondos, etc existentes en las nuevas columnas? (1h 30m)
- Colores migracion (Migrar solo los diferente a los Default)
- Se necesita los idCliente y colores
- Crear migracion para cada uno de esos clientes con sus respectivos colores.

### Heimdall
- Modificar el proceso GetSessionViewProcess y añadir nuevo parametro si tiene configuracion de dominio (a nivel cliente) => (2h)
- tabla jos_6c_cliente_configuracion_dominio
- Usar id cliente de la sesión
- Solo si la tabla tiene un registro con el id del cliente de la sesion de volvemos true
- nuevo parametro hasSubdomain => bool

- Crear PUT clientConfig cliente configuracion que guarde los colores y eslogan de la tabla de configuracion en la tabla jos_6c_cliente_configuracion (5h)
- Nota: guardar los logotipos en la ruta del cliente o empresa segun el caso
- Comprobar permiso WRITE de la sección
- Si no existe configuración para ese cliente habrá que crearla no solo editarla usar función save del repositorio para la tabla jos_6c_cliente_configuración
- Para la tabla jos_6c_configuracion_dominio si debería ser un update no creación. Si no existe y llega el campo slogan se devuelve un error
- /client-config
- Añadir los nuevos campos de la vista
- colors {color10: '#123456', ..., color70: '#123456'} => jos_6c_cliente_configuración
- colorsIntranet {color10: '#123456', ..., color70: '#123456'} => jos_6c_cliente_configuración
- slogan => jos_6c_cliente_configuracion_dominio (campo bbdd texto_pagina_login)

- Modificar GET clientConfig servicio cliente configuracion => ClientConfigController que devuelva los colores de la tabla jos_6c_cliente_configuracion y los logotipos (5h)
- Si el select te devuelve vacío crear una nueva fila en la tabla jos_6c_cliente_configuracion con el id del cliente
- Crear proceso y no usar los repos en el servicio como está ahora
- Si no hay fila para el cliente jos_6c_cliente_configuracion_dominio se devuelve a null el slogan
- Añadir los nuevos campos de la vista
- colors {color10: '#123456', ..., color70: '#123456'} => jos_6c_cliente_configuración
- colorsIntranet {color10: '#123456', ..., color70: '#123456'} => jos_6c_cliente_configuración
- slogan => jos_6c_cliente_configuracion_dominio

- AbstractReportManager -> Metodo: getCompanyLogo (cabecera) (1h)
- Modificar de donde se coge la imagen de la empresa en los informes para que coja el nuevo campo

- Portadas que modificar (2h)
- Modificar de donde se coge la imagen de la empresa en los informes para que coja el nuevo campo
- ErlGlobalReportManager.php
- OhspGlobalReportManager.php
- TinMemoryReportManager.php

- CreateEvaluationReportCustomProcess.php (8h)
- Modificar de donde se coge la imagen de la empresa en los informes para que coja el nuevo campo
- cabecera
- revisar todos los procesos que cuelgan de este

- Emails (confirmar con producto cuáles son) (1h)
- Revisar si se coge del servicio: $this->companyService->getCompanyLogoLink($companyId)
- Modificar de donde se coge la imagen de la empresa en los informes para que coja el nuevo campo

- Middelware para publicCompany y publicClient; (3h)
- usar la semilla: 'Nj5BAULXL1koyAAfBJo43' => pasarla a constante
- llegará la semilla + id empresa en base64
- comprobar que exista la empresa
- Fijarse en PublicUserAuthMiddleware que hace cosas parecidas
- Tiene que obtener el id del cliente a partir del id de la empresa
- Para setearlo se puede hacer: $request->query->set(REQUEST_SESSION_CLIENT_ID, $companyEntity->getClientId());
- Añadir controlador abstracto fijarse en AbstractPublicUserController añadir funcion responseAttachment para descargar imagen

- Servicios por cada uno de los logos GET/POST/DELETEe
- Cliente (todo por id cliente de la sesión)
- client-config/header-logo (11h)
- POST client-config/header-logo
- Comprobar permiso WRITE de la sección
- Nota: guardar los logotipos en la ruta del cliente
- Usar la funcion creada en la clase abstracta de getFileToRequest para obtener el fichero
- jos_6c_cliente_configuracion (logotipo_cabecera)
- Devuelve el id
- GET client-config/header-logo
- Comprobar permiso READ de la sección
- Usar la funcion responseAttachment de la clase abstracta del controlador para devolver la imagen
- notIncludeDefault (dependemos de pruebas de front)
- DELETE client-config/header-logo
- Comprobar permiso DELETE de la sección
- Eliminar la ruta de la tabla jos_6c_cliente_configuracion (logotipo_cabecera)
- Borrar el fichero físico
- GET publicClient/header-logo?token={$token}
- notIncludeDefault (dependemos de pruebas de front)

- client-config/header-logo-intranet (V2 GET/POST/DELETE) (3h)
- GET versión para la parte pública también publicClient/header-logo-intranet?token=snfdskjdfksfksfk
- Nota: guardar los logotipos en la ruta del cliente o empresa segun el caso
- notIncludeDefault (dependemos de pruebas de front)
- client-config/login-background (V2 GET/POST/DELETE) (11h)
- GET versión para la parte pública también publicClient/login-background?token=snfdskjdfksfksfk? => depende de joomla
- Nota: guardar los logotipos en la ruta del cliente o empresa segun el caso
- notIncludeDefault
- client-config/login-logo (V2 GET/POST/DELETE) (3h)
- GET versión para la parte pública también publicClient/login-logo?token=snfdskjdfksfksfk? => depende de joomla
- Nota: guardar los logotipos en la ruta del cliente o empresa segun el caso
- notIncludeDefault
- Empresa
- POST company/{COMPANY_ID}/report-logo (11h)
- Usar la funcion creada en la clase abstracta de getFileToRequest para obtener el fichero
- Nota: guardar los logotipos en la ruta de la empresa
- GET company/{COMPANY_ID}/report-logo
notIncludeDefault (dependemos de pruebas de front)
- DELETE company/{COMPANY_ID}/report-logo

- POST company/{COMPANY_ID}/logo (3h)
- Nota: guardar los logotipos en la ruta de la empresa
- GET company/{COMPANY_ID}/logo
notIncludeDefault (dependemos de pruebas de front)
- DELETE company/{COMPANY_ID}/logo
- GET publicCompany/logo?token={$token}

### Hellheim
- Incluir en el admin la info de si el cliente tiene: (3h)
- Subdominio (no editable)
- SSO
- Tipo (no editable)
- Permite crear usuarios (editable)
- Activar link de mails (editable)
-
- Quitar de la ficha de datos de empresa el campo de logo. (30m)
- Subir a mano los ficheros de
- Logo de clientes con personalizacion actual
- Imagen de fondo de empresas con pagina de login personalizada
- Aplicar colores en Joomla ¿?¿??¿? (5h)
- Aplicar logos en los informes (2h)
- Aplicar nuevo estilo en la pagina de login de subdominio (1d)
- Aplicar fondo en la pagina de login del subdominio
- Mirar si se usa la url de descargar imagen de empresa en Joomla (30m)

- Crear entidad, mapper de client-config (ready)
- entidad y mapper de colors
- añadir colors ({color10: '#123456', ..., color70: '#123456'}), colorsIntranet, slogan (string)

### Odin (4h 30m)
- Meter en un helper la generación de token para estas imágenes públicas y quitar la palabra JOOMLA (como lo que hay en asgard)
- Al helper deberá recibir el id de company y devolveremos el src
- Coger de referencia: questionnaire-header.component.ts, donde se crea un token dentro del ngOnInit
- Logo: Si viene a null pintar el logo que está en assets del proyecto
- Probar para el menu, mirar sc-image-grid <img [src]="image.thumbnailSafeUrl" #image (error)="image.thumbnailSafeUrl = ruta_predeterminada.jpg" />
- cambiar imagenes de selector de empresas de urlJoomlaCompanyLogo por laravel, publicCompany/{COMPANY_ID}/logo?token=snfdskjdfksfksfk => para el navbar (copiar de asgard)
- Poner comportamiento por defecto de (error) en la imagen también
- Para imagen por defecto mirar el logo por defecto que pinta en Joomla (el de 6conecta nuevo)
- cabecera de navbar publicClient/header-logo?token=snfdskjdfksfksfk o publicClient/header-logo-intranet?token=snfdskjdfksfksfk
- si viene headerLogo pintamos esto y si no llamamos a publicCompany/{COMPANY_ID}/logo?token=snfdskjdfksfksfk
- Poner comportamiento por defecto de (error) en la imagen también
- Para el token acordarse de usar el helper de la tarea de arriba
- ThemeEntity
- Limpiar themeConstants dejar contratas (CONTRACTOR) e accesibilidad
- Quitar color05 de la entidad y del seteo de css --color-05

### Freya (1h)
- actualizar odin con lo nuevo y frija con esto

### Asgard (1h 30m)
- cambiar el logo de header de joomla a laravel, en cada uno de sus modulos, llamaremos al helper de odin pasandole el id de company y recibiremos el src

### Nidavellir (4h)
- Crear servicio de client-config
- crear apiRouteClientConfig: 'client-config'
- guardar la config de los colores en el servicio
- En el servicio sessionService, llamaremos a la función setTheme solo en caso de que this.session?.user?.accessibility sea a false. Añadir esta lógica como filtro y si no llamar al client-config
- setear los colores de la llamada client-config
- No setear en el ThemeEntity el logo (por ver qué hacemos)
- Generar un themeEntity con los nuevos colores y pasarsela al setActiveTheme

### Midgard

- Botón de aplicar cambios en pestaña de colores (4h)
- Cambiar la funcionalidad de copiar colores, con el nuevo botón “Copiar colores a la intranet”
- Nuevo botón “Aplicar cambios”. No persistir colores hasta que se pulse. Por defecto deshabilitado hasta que se haga algún cambio. El botón irá en la parte de abajo de la pestaña de colores.
- Nuevos botones para aplicar colores por defecto, tener en cuenta que debemos persistir todos los colores de midgard e intranet. color10, colorIntranet10, etc
- El boton de aplicar cambios debe estar deshabilitado a menos que haya algun cambio. Tener en cuenta el estado de reseteo debe deshabilitar
- Al mover colores, si te cambias de pestaña se pierde el color

- Configuracion de rutas y session (2h)
- Añadir nueva ruta al dpm
- local/web/
- pre/web
- revisar TODO de company.routes para añadir el nombre de la section => guardar en SconectaConstants => menuSectionConfigCompanyCustomization: 'CONFPER'
- añadir hasSubdomain a la entidad y mapper de la session

- servicio client-config y funcionalidad (3h) => bloqueante por nidavellir para saber como se ha hecho
- crear servicio client-config
- crear apiRouteClientConfig: 'client-config'
- guardar en un subject la info => clientConfig
- al llamar a la session, hacer llamada a client-config para traer los colores, para evitar la llamada si es contrata mirar el campo clientCompany a true
- Usar de referencia la tarea de Nidavellir donde se hace lo mismo pero dependientes de otra variable
- sustituir esto por lo actual de mirar el clientCode y setear un tema
- dejar el tema de contrata(clientCompany a true)

- Componente pestaña de colores (theme-customization-colors.component) (3h)
- Obtener el subject clientConfig para obtener los colores de midgard e intranet
- Put de client-config pasándole colors y colorsIntranet (crear putClientConfig en el servicio)
- setear el tema con TODO para revisar con producto la fantasia

- Componente pestaña de logotipos (theme-customization-logos.component) (6h 30m)
- Para la subida de logotipos por cada una de las secciones (gestion, intranet, empresa, informes) crear 4 llamadas con la url de cada una
- quitar bytes de la pildora y nos inventamos el nombre para la pildora (añadir ngif en el componente de odin-file-upload en el span para que si no trae bytes no pinte esto)
- Usar clientConfig service. No va a tener configurado getUrl, putUrl, deleteUrl por defecto para evitar un mal uso. Solo tendrá serviceUrl
- getHeaderLogo()
- getHeaderLogoIntranet()
- put, delete etc...
- GET/PUT/DELETE client-config/header-logo
- GET/PUT/DELETE client-config/header-logo-intranet
- el informe tambien va por empresa, como el de la izquierda (cuando cambiemos tenemos que hacer otra llamada a company_id)
- Usar company service.
- GET/PUT/DELETE company/{COMPANY_ID}/report-logo
- GET/PUT/DELETE company/{COMPANY_ID}/logo
- getCompanyReportLogo(id: number)
- getCompanyLogo(id: number)
- put, delete etc...
- Componente pestaña de login de acceso (theme-customization-login.component) (3h)
- para la pestaña de login acceso, el ngIf será con el hasSubdomain y !isSso (que tenga subdominio y no sso) => en el componente padre
- Obtener el subject clientConfig para pintar el eslogan
- GET/PUT/DELETE client-config/login-background
- GET/PUT/DELETE client-config/login-logo
- put client-config para el slogan (usar el put de componente de colores)

#### Tareas sin funcionalidad (hechas)
- Crear generador de paleta de colores theme-generate-colors.component (4h) => luis
- probar en testing de nidavellir y a la hora del mr moverlo a la carpeta modules/company/components/company-theme-customization de midgard
- Debajo del color picker hay que crear la barra que aparece en figma donde crearemos una paleta en base a la decisión del usuario
- Habrá que ajustar el hexadecimal escogido por el usuario sumando y restando para crear los colores (7 en total). Hacer tests con ese resultado con las constantes de colores actuales para ver si se asemeja o no y hacer ajustes.
- El color que elige el usuario siempre será el central de los 7 colores que aparecen en "Paleta de color"
- Revisar theme.constants para coger ideas de cómo se gestionan los colores 10~70.
- Recibirá el color del color-picker de Odin por un Input
- Output con un array con los 7 colores [HEX]

- Crear componente padre de personalización del aspecto (3h 30m) => bea
- Estructura:
- Habría que crear carpeta en [modules/company/components/company-theme-customization] con ruta [/company/theme-customization]
- El nombre del componente padre => [theme-customization.component.ts...etc]
- El nombre del componente hijo para los colores => [theme-customization-colors.component.ts...etc]
- El nombre del componente hijo para los logotipos => [theme-customization-logos.component.ts...etc]
- El nombre del componente hijo para el Login Acceso => [theme-customization-login.component.ts...etc]
- Tiene que tener dentro tres pestañas: Colores, Logotipos y Login Acceso
- En esta tarea se van a dejar dichas pestañas vacías con tres componentes vacíos
- INFO: Comunicar con back la ruta para que nos traiga de vuelta la configruación y que se pinte en el menú
- INFO: Este componente no va aparecer en el menú hasta que en el back no lo haga
- Setear la sesion y pasásrela a los componentes hijos por Input
- La pestaña de login acceso, apareacerá o no si tenemos subdominio, por el momento añadiremos un TODO para que cuando nos venga de back, añadir un ngIf. Vendrá del servicio una propiedad hasSubdomain, por el servicio de la sesión'
- TODO: De donde viene si puede visitar Login de acceso? (si tiene SSO y si tiene subdominio)
- isSSO existe en la sesion
- Añadir boolean hasSubdomain en la entidad Session
- Mostrar Login de acceso si tiene hasSubdomain y isSSO = false

- Añadir funcionalidad de la pestaña Colores theme-customization-colors.component (5h) => Willy
- Tendrá que tener un subtitulo "Color" y su respectiva descripción que consta en figma
- Añadir el componente odin-color-picker para interfaz de gestión
- Tendrá Input que contiene la sesión (hecho)
- Añadir un debounce(~~500~~200) para cada cambio de color (para que no esté lanzando múltiples eventos)
- Añadir el componente odin-color-picker para interfaz intranet, pero este solo será visibile si nos viene el campo hasIntranet = true
- Añadir el check de "Usar paleta de color en la Intranet" si nos viene el campo hasIntranet = true (coger hasIntranet general no el del usuario: session.hasIntranet)
- Cuando activamos "Usar paleta de colores de Intranet", debemos replicar a tiempo real los colores en Interfaz Intranet a la espera de producto de saber qué hacemos con ese componente en ese estado y aplicar un estado disabled en el componente OdincolorPicker
- TODO: Crear un get y post para obtener y persistir el checkbox de "Usar paleta de colores de Intranet"
- TODO: Añadir por ahora un TODO con la paleta de colores generada recibida por theme-generate-colors.component, a la espera de poder persistirla con los ajustes de Back. Creando su servicio entidad, mapper, etc.
- TODO: Persistir en themesService el color recibido de odin-color-picker.component

- Añadir funcionalidad de la pestaña logotipos theme-customization-logos.component (1d)
- ejemplo en asgard => QuestionnaireAttachmentComponent
- Tendrá Input que contiene la sesión (hecho)
- Tendrá que tener un subtitulo "Logotipo" y su respectiva descripción que consta en figma
- Tenemos 3 o 4 componentes de OdinFileUpload. Si nos viene de la sesión hasIntranet a true (coger hasIntranet general no el del usuario: session.hasIntranet) pintaremos el de la intranet => hasIntranet.
- Cuatro divs con "texto" + OdinFileUpload
- Versión rectangular depende del selector de empresas, las empresas vienen de la sesión (companies) por el Input. Copiarlo de /user/profile (empresa por defecto)
- Comprobar con producto la duda: (seteamos por defecto el de la session)
- Setear por interface las extensiones permitidas: .jpg .png, y el total atatchment a 1. Y máximo de peso 512.
- Añadir el thumbnail debajo de mensaje de error o el chip
- TODO: Get de imágenes para cada cambio de empresa. Crear entidad, mappers, servicio. Cada vez que cambiemos el selector de empresas tendremos que cambiar los logos nuevamente con lo que nos llegue del back.
- Para borrar la imagen se pasará un null para borrar
- TODO: setear ficheros a nueva ruta de back. Crear un mapper un servicio con las nuevas rutas de personalización y subida de logo

- Añadir funcionalidad de la pestaña login de acceso theme-customization-login.component (5h 30m)
- Tendrá Input que contiene la sesión (hecho)
- Tenemos 2 componentes de OdinFileUpload con textos fijos
- Tiene un textarea:
- this.esloganFormField = new FormFieldTextareaModel()
.setLabel('') -> no se setea porque va fuera
.setPlaceholder(Escribe tu frase personalizada. [Máximo 100 caracteres])
.setMaxLength(100) (constante)
.setValue(valueOfBack)
.setRows(3);
<app-sc-textarea [field]="esloganFormField" (typed$)="onType()"> </app-sc-textarea>
- El hr separador del final no se hace
- TODO: Entidad, servicio, Mapper dependiente del back para persistir cada cambio

### Nidavellir
- Si la imagen viene vacía hay que poner la imagen por defecto de los assets del proyecto
-
### Odin

- Crear componente de odin con color picker de devExtreme (5h) => willy
- Nombre => [odin-color-picker.component.ts...etc]
- Info: https://js.devexpress.com/Demos/WidgetsGallery/Demo/ColorBox/Overview/Angular/Light/
- Gestionar desde su inputData si nos hace falta que tenga transparencia
- No hay que tomar el figma como referencia, ya que no hemos trabajado aún con este picker
- Tendrá un output para lanzar un event con ~~RGB~~ (Dx no devuelve un rgb) y HEX a cada cambio de color
- Adaptar el colorpicker de devextreme para que no se muestre el inputField de entrada. Debe mostrarse directamente como está en figma
- Crear componente en odin-demo
- El cuenta gotas no está en el componente
- añadir defaultColor en la interface

<dx-color-box
label="Pick a color"
value="#000000"
[editAlphaChannel]="true"
applyButtonText="Show notification"
[showClearButton]="true"
(onValueChanged)="onValueChanged($event)"
>
</dx-color-box>