MxCrudPanel

Componente para crear una dinámica CRUD con componentes de @angular/material. Permite agregar un template para Create, Enlistar un array para Read, un template para Update y un botón para Delete

Primerso pasos

| ❗ IMPORTANTE ❗ | |-----------------------------------------| | Esta librería está construida con @angular/material |

Instalación

Como dependencia Node

1. Inicia sesión en https://marxa.jfrog.io/. En el menú de navegación ve a Set me up. y sigue las instrucciones para ingresar tus contraseñas.
2. Si usas VSCode, en la terminal corre el comando code ~/.npmrc, si no, navega a ~/.npmrc en tu explorador de archivos y ábrelo.
3. Pega el código resultante de las instrucciones, asegurándote que la URL del artifact tenga el prefijo @marxa: en cada uno de los registros. Ejemplo:

_auth = <PASSWORD> (converted to base 64)
email = [email protected]
always-auth = true
@marxa:registry = https://marxa.jfrog.io/artifactory/api/npm/mx-library-npm/

3. Importa la dependencia

npm i -s @marxa/crud-panel

Como submódulo

1. Asegúrate de que tienes permisos para copiar el repositorio
2. Abre la terminal en la raíz de tu proyecto
3. Corre los comandos

   git submodule init
   git submodule add -b develop https://github.com/Marxa-Digital/mx-crud-panel libs/marxa/crud-panel

4. Configura el archivo angular.json incluyendo este bloque de códgio dentro de projects

   {
     "projects":{
       "@marxa/mail": {
         "projectType": "library",
         "root": "projects/marxa/crud-panel",
         "sourceRoot": "projects/marxa/crud-panel/src",
         "prefix": "mx",
         "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:ng-packagr",
             "options": {
               "project": "projects/marxa/crud-panel/ng-package.json"
             },
             "configurations": {
               "production": {
                 "tsConfig": "projects/marxa/crud-panel/tsconfig.lib.prod.json"
               },
               "development": {
                 "tsConfig": "projects/marxa/crud-panel/tsconfig.lib.json"
               }
             },
             "defaultConfiguration": "production"
           },
           "test": {
             "builder": "@angular-devkit/build-angular:karma",
             "options": {
               "main": "projects/marxa/crud-panel/src/test.ts",
               "tsConfig": "projects/marxa/crud-panel/tsconfig.spec.json",
               "karmaConfig": "projects/marxa/crud-panel/karma.conf.js"
             }
           }
         }
       }
     }
   }

5. Configura el archivo tsconfig.json incluyendo este bloque de códgio dentro de paths

   { 
     "compilerOptions": {
       ...
       "paths":{
         "@marxa/crud-panel": [
           "dist/marxa/crud-panel/marxa-crud-panel",
           "dist/marxa/crud-panel"
         ],
       }
     }
   }

6. Corre el siguiente comando

   cd libs/marxa/crud-panel && start cmd /k ng build @marxa/crud-panel --watch

7. Instala la lib de manera manual con el siguiente comando

   npm i "./dist/marxa/crud-panel"

Importa el módulo

import { MxCrudPanelModule } from "@marxa/crud-panel";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MxCrudPanelModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Importa los estilos en tu styles.scss o stlyes.css

@import '~@marxa/crud-panel/styles/mx-crud-panel.scss';

Modo de uso

El método para usar es anidar componentes en este componente. Pondremos el ejemplo con un componente para crear post de blog

En el comonente crea tu formulario y un EventEmitter que se encargará de cerrar el panel

interface Post {
  title: string,
  extract:string,
  releasedImage: string,
  content: string
}

@Component({
  selector: 'app-post',
  templateUrl: './app-post.component.html',
  styleUrls: ['./app-post.component.scss']
})
export class AppPostComponent {

  @Input() post: Post
  @Output() onSaved: EventEmitter<any> = new EventEmitter()

  constructor(){}

  onSubmit(){
    // do the submit action
    this.onSaved.emit()
  }

}

Agrega el panel de la siguiente manera:

<mx-crud-panel
listName="Entradas de blog"
[selectTemplate]="select"
[addTemplate]="add"
[list]="posts"
[height_vh]="90"
[width_vw]="80"
itemSelector="nombre"
#crudPanel
>
  <!-- Agrega un componente para agregar como #add o el nombre que tú quieras-->
  <ng-template #add>
    <app-post (onSave)="crudPanel.closePanel()"></app-post>
  </ng-template>

  <!-- Agrega otro componente para editar como #select o el nombre que quieras -->
  <!-- Designa una variable para el item seleccionado importarlo en tu formulario de edición -->
  <ng-template #select let-slide="item" >
    <app-post (onUpdate)="crudPanel.closePanel()" [post]="post"></app-post>
  </ng-template>
</mx-crud-panel>

Parámentros

| Parámetro | Descripción | |-----------|-------------| | @Input() list: any[] | La lista de items | | @Input() listName: string | El título encabezado del panel | | @Input() selectTemplate | El template que será incrustado en el panel de selección | | @Input() addTemplate | El template que será incrustado en el panel de adición | | @Input() addBtnConfig: MxCrudCreateConfig | Configuración del botón de creación | | @Input() height_vh: number | Cantidad ViewHeigth del panel | | @Input() width_vw: number | Cantidad ViewWidth del panel | | @Input() panelPosition: MatDrawer.position | Posisión del panel, 'start' del lado izquierdo, 'end' del lado derecho | | @Input() itemSelector: string | El selector del item que aparecerá en el listado | | @Input() columns: string[] or MxCrudPanelColumns[] | Lista de las columnas que aparecerán en la tabla de lectura llamando cada nombre como de columna como el parámetro de cada item | | @Input() backdrop: boolean | Controla si se verá el fondo transparente al abrir addTemplate o selectTemplate | | @Output() onDelete: EventEmitter<any> | Emite un evento del tipo del item que se convoca para eliminar desde el botón en la lista | | @Output() onAdd: EventEmitter<void> | Emite un evento vacío cuando se convoca el botón para crear un item en la lista | | @Output() onClose: EventEmitter<void> | Emite un evento vacío cuando se cierra alguno de los páneles | | @Output() onSelect: EventEmitter<void> | Emite un evento del tipado del objeto seleccionado cuando se da click en él |

Modelos

MxCrudPanelColumns

Controla como se verán las columnas en el panel del lectura de la lista

| Parámetro | Descripción | |-----------|-------------| |id: string| Nombre con el cuál se identifica el campo en el el objeto de cada item de la lista | |displayName: string| Como se desea que aparezca el nombre de la columna en el encabezado |

MxCrudCreateConfig

Controla la vista del botón de crear

| Parámetro | Descripción | |-----------|-------------| |label: string| El mensaje que aparecerá dentro del botón | |color: ThemePalette| string reservado para de la paleta Angular Material: 'primary' | 'accent' | 'warn' | |icon: string| Nombre del ícono de la lista de Google Icons | |enableIcon: boolean| Habilitar la creación de nuevos items para la lista |

Métodos

openAddPanel()

| DESCRIPCIÓN | |------------------| | Abre el panel para agregar items | | RETORNA void |

closeAddPanel()

| DESCRIPCIÓN | |------------------| | Cierra el panel para agregar items | | RETORNA void |

closeSelectedPanel()

| DESCRIPCIÓN | |------------------| | Cierra el panel para agregar items | | RETORNA void |

closeAll()

| DESCRIPCIÓN | |------------------| | Forza a cerrar todos los páneles abiertos | | RETORNA void |

Importando

Puedes acceder al componente con @ViewChild

@Component({
  selector: 'app-posts-list',
  templateUrl: './app-post-list.component.html',
  styleUrls: ['./app-post-list.component.scss']
})
export class AppPostListComponent {

  @ViewChild('crudPanel') private crudPanel!: MxCrudPanel

  constructor(){}

}

This library was generated with Angular CLI version 12.