@hcd-bsas/list-documents-adapter 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hcd-bsas/list-documents-adapter",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -9,7 +9,7 @@
   "license": "MIT",
   "devDependencies": {
     "@hcd-bsas/bootstrap5": "^0.0.2",
-    "@hcd-bsas/list-documents-plugin": "^0.0.4",
+    "@hcd-bsas/list-documents-plugin": "^0.0.5",
     "babel-loader": "^8.2.5",
     "browserify": "^17.0.0",
     "css-loader": "^6.7.1",
@@ -31,6 +31,7 @@
   },
   "dependencies": {},
   "scripts": {
-    "build": "webpack"
+    "serve": "webpack --mode=development",
+    "build": "webpack --mode=production"
   }
 }

package/readme.md

@@ -1,3 +1,116 @@
-Para crear una nueva distribución se debe correr el comando:
 
-yarn webpack build
+# js-plugin
+
+## Estructura del proyecto
+
+Genera una librería javascript que funciona como "adapter" del plugin generado con vue-cli-plugin, la cual permite que se lo pueda utilizar desde cualquier entorno javascript sin necesidad de que el proyecto sea Vue 3.
+
+Internamente la librería exporta una app de Vue 3 que usa el Plugin **list-documents-plugin**.
+
+## Pre-requisitos
+
+### Es necesario tener instalado
+
+* [Node Js LTS](https://nodejs.org/en/) La versión utilizada para el primer desarrollo fue 16.14.0 LTS.
+* [yarn](https://yarnpkg.com/) 
+
+    ~~~ 
+    npm install -g yarn
+    ~~~
+
+### Recomendaciones opcionales para instalar
+
+* [Visual Studio Code](https://code.visualstudio.com/)
+* [CMDER](https://github.com/cmderdev/cmder) es una consola de comandos sencilla con algunas sintaxis linux
+
+## Instalación
+
+El proyecto javascript esta armado con [webpack](https://webpack.js.org/concepts/) y algunas librerías adicionales. 
+
+Su instalación es sencilla ejecutando en la raíz del directorio el comando **install** que agregara todas las dependencias necesarias:
+
+~~~
+    yarn install
+~~~
+
+## Compilación desarrollo
+
+El comando **serve** compila el proyecto y se lu puede probar desde el test_javascript.html:
+
+~~~
+    yarn serve
+~~~
+
+## Compilación productiva y publicación en NPM
+
+### Compilación producción
+
+El comando **build** compila el proyecto comprimido para luego poder ser distribuido.
+
+~~~
+    yarn build
+~~~
+
+### Publicación NPM
+
+Posteriormente para poder publicar la librería en [NPM](https://www.npmjs.com/) se debe:
+
+1) Tener un usuario registrado. [Ir al registro...](https://www.npmjs.com/signup)
+
+2) Acceder a la cuenta de NPM de la HDC desde el navegador y agregar como administrador al usuario registrado en la organización **@hcd-bsas**. Credenciales: 
+
+    > Usuario: desarrollohcd
+
+    > Contraseña:  "la misma que se utiliza en el correo hcddesarrolladoras@gmail.com"
+
+3) Autenticar con el usuario registrado en el paso 1 desde la linea de comandos
+
+~~~
+    yarn login
+~~~
+
+4) Asegurase de previamente haber compilado la librería en modo producción (comando **build**).
+
+5) Publicar librería con el comando **publish**, el cual preguntara cual es el nuevo número de versión. En donde "version": *.*.* --> El primer número corresponde a cambios grandes, el segundo nuevas funcionalidades y el tercero corrección de errores o cambios menores.
+
+~~~
+    yarn publish
+~~~
+
+Nota: En ocasiones da el error "You cannot publish over the previously published versions" al no poder cambiar la versión de la librería desde la linea de comandos. Para ello se debe aumentar el número de versión en la opción **version** del package.json
+
+### Como hacer uso de la librería con NPM
+
+Pero para poder instalar la librería en cualquier otro proyecto se debe correr el comando en el directorio donde el proyecto contenga las librerías javascript.
+
+~~~
+    yarn add @hcd-bsas/list-documents-adapter
+~~~
+
+Luego se debe indicar en el constructor la url base donde se encuentran los endpoint para obtener la información a visualizar.
+
+~~~
+    var list = new ImagesList({
+        base_url: "http://localhost/admin",
+    });
+~~~
+
+A partir de la instancia creada se puede invocar al método **open** que recibe 2 parámetros, las opciones de configuración de la app y los parámetros a pasar al endpoint que recupera el listado. 
+
+Por otro lado el método **open** retorna una promesa que indica cuando el plugin finalizo y esta visible.
+
+~~~
+    list.open({
+        title: "Listado de imágenes escaneadas en Rhys"
+    },{
+        id_tabla: ****,
+        id_tabla_reg: ****,
+        id_dependen_responsable: ****,
+        id_pers_reso: ****,
+        campo_escan: ****
+    }).then((response) => {
+        console.log(response)
+    });
+~~~
+
+Nota: Se puede ver un ejemplo funcional completo en el archivo test_javascript.html

package/src/App.vue

@@ -1,21 +1,21 @@
-<template>
-  <list-files ref="list"></list-files>
-</template>
-
-<script>
-  export default {
-    name: "App",
-    props: {},
-    data() {
-      return {
-      };
-    },
-    created() {
-    },
-    methods: {
-      showModal(app_config, params) {
-        return this.$refs['list'].show(app_config, params);
-      }
-    }
-  };
+<template>
+  <list-files ref="list"></list-files>
+</template>
+
+<script>
+  export default {
+    name: "App",
+    props: {},
+    data() {
+      return {
+      };
+    },
+    created() {
+    },
+    methods: {
+      showModal(app_config, params) {
+        return this.$refs['list'].show(app_config, params);
+      }
+    }
+  };
 </script>

package/src/index.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import hcdListPlugin from '@hcd-bsas/list-documents-plugin'
+import VueSweetalert2 from 'vue-sweetalert2';
 
 export default class ImagesList {
     
@@ -10,12 +11,12 @@ export default class ImagesList {
 
     constructor(config) {
         try {
+            config['sweetalert'] = VueSweetalert2;
             this.#render();
             this.#app = createApp(App);
             this.#app.use(hcdListPlugin, config)
             this.#root = this.#app.mount("#"+this.#imagesListId);
         } catch (error) {
-            // console.log(error);
             throw error;
         }
     }

package/{exampleJavascript.html → test_javascript.html}

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TEST</title>
     <link rel="stylesheet" href="node_modules/@hcd-bsas/bootstrap5/dist/hcd-bootstrap.min.css">
+    <link rel="stylesheet" href="node_modules/sweetalert2/dist/sweetalert2.min.css">
 </head>
 <body>
     
@@ -23,12 +24,12 @@
 
         function prueba(){
             list.open({
-                title: "Listado de imagenes escaneadas en Rhys"
+                title: "Listado de imágenes escaneadas en Rhys"
             },{
                 id_tabla: 1,
-                id_tabla_reg: 22264,
+                id_tabla_reg: 3922,
                 id_dependen_responsable: 54,
-                id_pers_reso: 23956,
+                id_pers_reso: 386,
                 campo_escan: "INASISTE"
             })
             .then((response) => {

package/webpack.config.js

@@ -1,54 +1,52 @@
-const path = require('path');
-const Webpack = require('webpack');
-const { VueLoaderPlugin } = require('vue-loader');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-module.exports = {
-    mode: 'production',
-    // mode: 'development',
-    entry: './src/index.js',
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'ListDocuments.min.js',
-        library: {
-            name: 'ImagesList',
-            type: 'umd',
-            export: 'default'
-        },
-    },
-    module: {
-        rules: [
-            {
-                test: /\.vue$/,
-                loader: 'vue-loader',
-            },
-            {
-                test: /\.css$/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    'postcss-loader',
-                    'sass-loader'
-                ]
-            }
-        ],
-    },
-    optimization: {
-        minimizer: [
-            new UglifyJsPlugin({
-                cache: true,
-                parallel: true,
-                sourceMap: true
-            })
-        ]
-    },
-    plugins: [
-        // make sure to include the plugin!
-        new VueLoaderPlugin(),
-        new MiniCssExtractPlugin({
-            filename: 'hcd-bootstrap.min.css'
-        }),
-        new Webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false }), // to remove warn in browser console: runtime-core.esm-bundler.js:3607 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined...
-    ]
+const path = require('path');
+const Webpack = require('webpack');
+const { VueLoaderPlugin } = require('vue-loader');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+
+module.exports = {
+    entry: './src/index.js',
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'ListDocuments.min.js',
+        library: {
+            name: 'ImagesList',
+            type: 'umd',
+            export: 'default'
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.vue$/,
+                loader: 'vue-loader',
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    'css-loader',
+                    'postcss-loader',
+                    'sass-loader'
+                ]
+            }
+        ],
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+                sourceMap: true
+            })
+        ]
+    },
+    plugins: [
+        // make sure to include the plugin!
+        new VueLoaderPlugin(),
+        new MiniCssExtractPlugin({
+            filename: 'hcd-bootstrap.min.css'
+        }),
+        new Webpack.DefinePlugin({ __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false }), // to remove warn in browser console: runtime-core.esm-bundler.js:3607 Feature flags __VUE_OPTIONS_API__, __VUE_PROD_DEVTOOLS__ are not explicitly defined...
+    ]
 };

package/exampleVue2.html

@@ -1,40 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="node_modules/hcd-list/dist/list-files.css">
-    <title>TEST</title>
-</head>
-<body>
-    
-    <div id="test-list-plugin-vue2"></div>
-
-    <script src="./dist/vue.js"></script>
-    <script src="./node_modules/hcd-list/dist/list-files.umd.js"></script>
-    <script>
-        Vue.use(list-files);
-        var vue = new Vue({
-            el: '#test-list-plugin-vue2', // <-- Id del componente padre que incluye la aplicacion vue para que se instancie
-            data: {
-                nombre_atributo: { 
-                    // valores
-                }
-            },
-            computed: {},
-            created() {
-                // Se ejecuta al crear la instancia vue
-            },
-            methods: {
-                metodo_de_ejemplo() {}
-            },
-            watch: {
-
-            }
-        });
-
-        
-    </script>
-</body>
-</html>