@marxa/crud-panel v12.2210.2

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

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 = youremail@email.com
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

Modelos

MxCrudPanelColumns

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

MxCrudCreateConfig

Controla la vista del botón de crear

Métodos

openAddPanel()

closeAddPanel()

closeSelectedPanel()

closeAll()

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.