El editor Gitlab consta de un componente web desarrollado en VueJS y de un microservicio backend separado del resto de módulos de la plataforma (forma parte de los módulos del center).
...
Configuración Control Panel
TBD: Propiedad con la url del gitlabmanager
Integración Componente VueJS en HTML de plataformaTBD: Como se integra el componente VueJS en los HTML de plataforma y que necesita recibir desde el controlador
El editor forma parte de los componentes visuales del control center. Podemos encontrar el código fuente en el gitlab del proyecto:
Es necesario compilar la última versión del código fuente situandose en:
control-center/sources/ui/platform-front/src/modules/git-editor
y ejecutando:
npm run library
Lo que generará el directorio dist con el editor
...
Renombramos esta carpeta a git-editor y ya tendriamos el componente exportable
Para integrar el componente en plataforma seleccionamos el control-panel y añadimos la carpeta git-editor en la carpeta de extensiones vendor
...
Con esto ya podemos integrar el componente en cualquier HTML del proyecto. Para ello:
Instanciar Vue
| Code Block |
|---|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> |
...
Importar Componente
Teniendo esto, en el componente elegido se importaría como si fuese otro componente cualquiera. Por la necesidad de meterle el token, actualmente se implementa debajo del script principal o al menos que sus variables estén declaradas antes de su inicialización.
...
Incrustarlo en el HTML
...
Pasarle la configuración del gitlab-manager (backend) que le servirá la información
...
Estas variables se deben incluir en el script por encima de la declaración del editor.
OBLIGATORIAS:
projectId: El id del proyecto (en el caso del center) o del concepto de plataforma del que recuperar la congiuración Gitlab.
baseUrl: Url del gitlab-manager
token: de la sesión.
OPCIONAL:
isFile: (opcional) Modo para mostrar el editor con un un solo archivo (si arbol).
NOTAS:
Actualmente se adapta al ancho de la pantalla, pero hay que darle un height máximo.
Plataforma usa bootstrap y sus estilos, también se instancia una versión antigua de Codemirror.
Si en el componente se instancia Codemirror a parte, hay que ponerlo debajo de la declaración del git-editor, si no absorbe el Codemirror instancia antes.
Codemirror tiene un fallo con bootstrap y algunas clases dentro de plataforma, para solucionarlo:
...