# 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:
```bash
_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
```bash
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 
    ```bash
    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`
    ```json
    {
      "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`
    ```json
    { 
      "compilerOptions": {
        ...
        "paths":{
          "@marxa/crud-panel": [
            "dist/marxa/crud-panel/marxa-crud-panel",
            "dist/marxa/crud-panel"
          ],
        }
      }
    }
    ```
6. Corre el siguiente comando
    ```bash
    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
    ```bash
    npm i "./dist/marxa/crud-panel"
    ```

------------------


Importa el módulo
```ts
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`
```scss
@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

```ts
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:
```html
<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](https://material.angular.io/components/button/api): `'primary' | 'accent' | 'warn'` |
|`icon: string`| Nombre del ícono de la lista de [Google Icons](https://fonts.google.com/icons?icon.set=Material+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`
```ts
@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](https://github.com/angular/angular-cli) version 12.