appproject-components 1.0.45 → 1.0.47

package/src/lib/buttons/btn-excluir/btn-excluir.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnExcluirComponent } from './btn-excluir.component';
+
+describe('BtnExcluirComponent', () => {
+  let component: BtnExcluirComponent;
+  let fixture: ComponentFixture<BtnExcluirComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnExcluirComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnExcluirComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/buttons/btn-excluir/btn-excluir.component.ts

@@ -0,0 +1,18 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BaseBtnComponent } from '../baseBtnComponent';
+
+@Component({
+  selector: 'kb-btn-excluir',
+  templateUrl: './btn-excluir.component.html',
+  styleUrls: ['./btn-excluir.component.scss'],
+})
+export class BtnExcluirComponent extends BaseBtnComponent implements OnInit {
+  @Input() override type: string = 'button';
+  @Input() override expand: string = 'inline';
+  @Input() override icon: string = 'trash'; 
+  @Input() override title: string = 'Excluir';  
+  constructor() { 
+    super();
+  }
+  
+}

package/src/lib/buttons/btn-novo/btn-novo.component.html

@@ -0,0 +1,14 @@
+<ion-button color="primary" [type]="type" [disabled]="disabled" [fill]="fill" [expand]="expand" 
+  [size]="size"
+  (click)="onClick()"
+  >  
+  <ion-icon *ngIf="icon || iconSrc" [slot]="title ? 'start' : 'icon-only'" [name]="icon" [src]="iconSrc"></ion-icon>
+    {{ title }}
+  <img *ngIf="imgSrc" [src]="imgSrc" [slot]="title ? 'start' : 'icon-only'"/>
+</ion-button> 
+<!-- 
+<ion-button (click)="novoContato()" fill="outline" style="box-shadow: #4c8dff 0px 3px 3px 0.05px">
+  <ion-icon slot="start" name="person-add"></ion-icon>
+  Novo
+</ion-button>
+-->

package/src/lib/buttons/btn-novo/btn-novo.component.scss

@@ -0,0 +1,8 @@
+ion-button {
+    //width: 100%;
+    box-shadow: #4c8dff 0px 3px 3px 0.05px;
+}
+
+img {
+    width: 24px;margin-right: 6px;
+}

package/src/lib/buttons/btn-novo/btn-novo.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnNovoComponent } from './btn-novo.component';
+
+describe('BtnNovoComponent', () => {
+  let component: BtnNovoComponent;
+  let fixture: ComponentFixture<BtnNovoComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnNovoComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnNovoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/buttons/btn-novo/btn-novo.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { BaseBtnComponent } from '../baseBtnComponent';
+
+@Component({
+  selector: 'kb-btn-novo',
+  templateUrl: './btn-novo.component.html',
+  styleUrls: ['./btn-novo.component.scss'],
+})
+export class BtnNovoComponent extends BaseBtnComponent implements OnInit {
+  @Input() override title: string = 'Novo';
+  @Input() override icon: string = 'person-add';  
+  @Input() override iconSrc: string = '';
+  @Input() override expand: string = 'block';
+  @Input() imgSrc: string = '';
+  constructor() {
+    super();
+    this.type = 'button';    
+   }
+  
+}

package/src/lib/buttons/btn-salvar/btn-salvar.component.html

@@ -0,0 +1,8 @@
+<ion-button color="success" [type]="type" [disabled]="disabled" [fill]="fill" [expand]="expand"  
+  [size]="size"
+  (click)="onClick()"
+  [style.margin]="btnMargin"
+  >  
+  <ion-icon [slot]="title ? 'start' : 'icon-only'" [name]="icon"></ion-icon>
+    {{ title }}
+</ion-button>

package/src/lib/buttons/btn-salvar/btn-salvar.component.scss

@@ -0,0 +1,5 @@
+ion-button {
+    //width: 100%;
+    //margin: 4px;
+    box-shadow: #42d77d 0px 3px 3px 0.05px
+}

package/src/lib/buttons/btn-salvar/btn-salvar.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { BtnSalvarComponent } from './btn-salvar.component';
+
+describe('BtnSalvarComponent', () => {
+  let component: BtnSalvarComponent;
+  let fixture: ComponentFixture<BtnSalvarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BtnSalvarComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BtnSalvarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/buttons/btn-salvar/btn-salvar.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit, Output } from '@angular/core';
+import { EventEmitter } from '@angular/core';
+import { BaseBtnComponent } from '../baseBtnComponent';
+
+@Component({
+  selector: 'kb-btn-salvar',
+  templateUrl: './btn-salvar.component.html',
+  styleUrls: ['./btn-salvar.component.scss'],
+})
+export class BtnSalvarComponent extends BaseBtnComponent implements OnInit {
+  @Input() btnMargin: string = '4px';
+  constructor() { 
+    super();
+  }    
+    
+}

package/src/lib/entity-edit/entity-edit.component.html

@@ -0,0 +1,143 @@
+<form *ngIf="campos && campos.length" [formGroup]="entidadeForm" style="width: 100%;">
+
+
+  <ion-row *ngFor="let linha of campos" [class]="rowClass">
+    <ng-container *ngFor="let campo of linha.Linha">
+      <!-- {{ campo.Nome }} {{ campo.Tipo }} -->
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-text'">
+        <kb-input-text label="{{campo.Label ?? campo.Nome}}" [placeholder]="campo.PlaceHolderVisivel ? (campo.Label ?? campo.Nome + '...') : ''"
+          [form]="entidadeForm" [max]="campo.Tamanho ?? '50'" [validation_messages]="validation_messages[campo.Nome]"
+          [formControlName]="campo.Nome" [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly"          
+          [type]="campo.TipoInput ?? 'text'" 
+          [showSeePassword]="campo.TipoInput == 'password'"
+          [showCustomAction]="campo.InputAction"
+          [customActionIcon]="campo.InputActionIcon ?? 'search-outline'"
+          (customActionClick)="campo.click ? campo.click($event) : emptyHandler()"
+
+          [itemClass]="itemClass">
+        </kb-input-text>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-area'">
+        <kb-input-area label="{{campo.Label ?? campo.Nome}}" [placeholder]="campo.PlaceHolderVisivel ? (campo.Label ?? campo.Nome + '...') : ''"
+          [form]="entidadeForm" [max]="campo.Tamanho ?? '50'" [validation_messages]="validation_messages[campo.Nome]"
+          [formControlName]="campo.Nome" [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly" [linhas]="campo.Linhas ?? 5"
+          [itemClass]="itemClass">
+        </kb-input-area>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-cep'">
+        <kb-input-cep label="{{campo.Label ?? campo.Nome}}" [form]="entidadeForm"
+          [validation_messages]="validation_messages[campo.Nome]" [formControlName]="campo.Nome"
+          [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly"
+          [itemClass]="itemClass"
+          (getResultados)="campo.change ? campo.change($event) : emptyHandler()"
+          >
+        </kb-input-cep>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-valor'">
+        <kb-input-valor label="{{campo.Label ?? campo.Nome}}" [form]="entidadeForm" [max]="campo.Tamanho ?? '50'"
+          [validation_messages]="validation_messages[campo.Nome]" [formControlName]="campo.Nome"
+          [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly"
+          [itemClass]="itemClass">
+        </kb-input-valor>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-format'">
+        <kb-input-format label="{{campo.Label ?? campo.Nome}}" [form]="entidadeForm" [max]="campo.Tamanho ?? '50'"
+          [validation_messages]="validation_messages[campo.Nome]" [formControlName]="campo.Nome"
+          [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly" [formato]="campo.Formato ?? ''"
+          [itemClass]="itemClass">
+        </kb-input-format>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-checkbox'">
+        <kb-input-checkbox label="{{ campo.Label }}" [form]="entidadeForm"
+          [validation_messages]="validation_messages[campo.Nome]" [formControlName]="campo.Nome"
+          [campoFoco]="campo.CampoFoco" [readonly]="campo.ReadOnly" 
+          [itemClass]="itemClass"
+          [labelColor]="campo.BtnColor">
+
+        </kb-input-checkbox>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-select'">
+        <kb-input-select [label]="campo.Label ?? campo.Nome" [placeholder]="'Selecionar...'"
+          [formControlName]="campo.Nome" [form]="entidadeForm" [itens]="campo.Itens" [itemId]="campo.ItemId ?? 'Id'"
+          [itemNome]="campo.ItemNome ?? 'Nome'" [validation_messages]="validation_messages[campo.Nome]"
+          (selectChangeEntity)="campo.change ? campo.change($event) : emptyHandler()" [readonly]="campo.ReadOnly"
+          [itemClass]="itemClass">
+        </kb-input-select>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-radio'">
+        <kb-input-radio [label]="campo.Label ?? campo.Nome" [formControlName]="campo.Nome" [form]="entidadeForm"
+          [itens]="campo.Itens" [itemId]="campo.ItemId" [itemNome]="campo.ItemNome" [readonly]="campo.ReadOnly"
+          [itemClass]="itemClass">
+        </kb-input-radio>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-pesquisa'">
+        <kb-input-pesquisa #pesquisaCentroCustoPai 
+          [label]="campo.Label ?? campo.Nome" 
+          [campoId]="campo.ItemId"
+          [focusField]="campo.focusField"
+          [formControlName]="campo.Nome" 
+          placeholder="Pesquisar..." 
+          [campoDisplay]="campo.ItemNome ?? 'Nome'" 
+          [form]="entidadeForm"
+          [tipo]="campo.TipoPesquisa" 
+          [urlItem]="campo.UrlItem" 
+          [max]="campo.Tamanho ?? '50'" 
+          [url]="campo.UrlPesquisa" 
+          [readonly]="campo.ReadOnly"
+          (pesquisaChange)="campo.change ? campo.change($event) : emptyHandler()"
+          [itemClass]="itemClass">
+        </kb-input-pesquisa>
+      </ion-col>
+
+      <ion-col [sizeMd]="campo.Size" *ngIf="campo.Tipo == 'input-button'">
+        <!-- 
+        <kb-btn-action [title]="campo.Label" [icon]="campo.Icon" [iconSrc]="campo.IconSrc" [color]="campo.BtnColor ?? 'light'" 
+          [expand]="campo.BtnExpand ?? 'block'" style="margin-top: var(--btn-action-margin-top, auto);">
+        </kb-btn-action>
+      -->
+        <ion-button [expand]="campo.BtnExpand ?? 'block'" [color]="campo.BtnColor ?? 'light'"
+          (click)="campo.click ? campo.click($event) : emptyHandler()" [size]="campo.BtnSize ?? 'default'"
+          [disabled]="campo.ReadOnly">
+          <ion-icon *ngIf="campo.Icon || campo.IconSrc" [name]="campo.Icon" [src]="campo.IconSrc"></ion-icon>
+          {{ campo.Label }}
+        </ion-button>
+      </ion-col>
+
+      <ion-col *ngIf="campo.Tipo == 'col'" size-md="1" size-xs="0">
+
+      </ion-col>
+
+      <ion-col *ngIf="campo.Tipo == 'sub-titulo'" size="12">
+        <ion-list lines="none" class="ion-no-padding">
+          <ion-list-header color="primary" [style]="campo.CampoStyle ?? ''"> 
+            <ion-label [style]="campo.LabelStyle ?? ''">{{ campo.Label }}</ion-label>
+          </ion-list-header>
+        </ion-list>
+      </ion-col>
+    </ng-container>
+  </ion-row>
+
+  <!--
+    <ion-col class="select ion-no-margin ion-no-padding">
+      <ion-item lines="none">
+        <ion-label>Totalizador</ion-label>
+        <ion-checkbox slot="start" formControlName="Totalizador"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+    <ion-col class="select ion-no-margin ion-no-padding">
+      <ion-item lines="none">
+        <ion-label>Inativo</ion-label>
+        <ion-checkbox slot="start" formControlName="Inativo"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+    -->
+</form>

package/src/lib/entity-edit/entity-edit.component.scss

@@ -0,0 +1,4 @@
+ion-list-header {
+    text-align: center;
+    font-size: large;
+}

package/src/lib/entity-edit/entity-edit.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntityEditComponent } from './entity-edit.component';
+
+describe('EntityEditComponent', () => {
+  let component: EntityEditComponent;
+  let fixture: ComponentFixture<EntityEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [EntityEditComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(EntityEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/entity-edit/entity-edit.component.ts

@@ -0,0 +1,43 @@
+import { Component, Input, NgZone, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { BaseModel, HtmlRow } from 'appproject-lib';
+
+@Component({
+  selector: 'kb-entity-edit',
+  //standalone: true,
+  templateUrl: './entity-edit.component.html',
+  styleUrl: './entity-edit.component.scss'
+})
+export class EntityEditComponent<T extends BaseModel> implements OnInit {
+  @Input() entidade: T | null;
+  //entidade: any;
+  /**
+   * Vai receber montado do base cadastro
+   */
+  @Input() campos: HtmlRow[];
+  @Input() entidadeForm: FormGroup;
+  @Input() validation_messages: any;
+  @Input() itemClass: string = "";
+  @Input() rowClass: string = "";
+  constructor(private ngZone: NgZone) {
+
+  }
+
+  ngOnInit() {
+    //this.getEntidadeCampos();
+  }
+
+  getEntidadeCampos() {
+    //this.entidade = new this.entidadeTipo();
+
+    // console.log(this.entidade);
+    // this.ngZone.run(() => 
+    //   this.campos = this.entidade.getHtmlForm()
+    // );
+    // console.log(this.campos);
+  }
+
+  emptyHandler() {
+
+  }
+}

package/src/lib/grid-view/grid-view.component.html

@@ -0,0 +1,116 @@
+<div style="font-size: 14px;">
+    <div id="painelExportacao">
+      <ion-row *ngIf="inMemoryPagination">
+        <!--
+        <ion-col size="2">
+          <ion-button *ngIf="tabelaCampos.Selecionar === true" size="small" fill="outline" color="medium"
+            (click)="selecionarTodos()">Selecionar Todos</ion-button>
+        </ion-col>
+        -->
+        <ion-col size="3">
+          <ion-button *ngIf="inMemoryPagination === true" size="small" fill="outline" color="bluetool"
+            (click)="anterior()">
+            <ion-icon name="chevron-back-outline" slot="start"></ion-icon>
+            Anterior
+          </ion-button>
+          <ion-button *ngIf="inMemoryPagination === true" size="small" fill="outline" color="bluetool"
+            (click)="proximo()">
+            Próximo
+            <ion-icon name="chevron-forward-outline" slot="end"></ion-icon>
+          </ion-button>                
+        </ion-col>
+        <ion-col size="2">
+          <span style="display: block; margin-top: 10px;" *ngIf="inMemoryPagination && totalRec > 0">Exibindo {{ start + 1 }} - {{ (start + pageOffset) < totalRec ? (start + pageOffset) : totalRec }} total de {{ totalRec }}        
+          </span>      
+        </ion-col>
+      </ion-row>
+    </div>
+    <div style="width: 100%;" [style.min-height]="minHeight">
+      <table class="grid">
+        <thead>
+          <tr style="background-color: var(--ion-color-bluetool); color: white;">
+            <td *ngIf="tabelaCampos.Selecionar === true" style="width: 3%; text-align: center;">
+              <input type="checkbox" [(ngModel)]="todosSelecionados" (change)="selecionarTodos()">
+            </td>
+            <td *ngFor="let col of tabelaCampos.Colunas" [style.width]="col.Tamanho">
+              <div style="position: relative;">
+                <div style="display: flex; justify-content: space-between; align-items: end;">
+                  <strong>{{ col.Titulo }}</strong>
+                  <div>
+                    <ion-icon *ngIf="col.Ordem" slot="end" (click)="ordenar(col)" style="cursor: pointer;"
+                      [name]="col.OrdemStatus == 0 ? 'swap-vertical' : (col.OrdemStatus == 1 ? 'arrow-up': 'arrow-down')"></ion-icon>
+  
+                    <ion-icon *ngIf="col.Filtrar" name="funnel" (click)="setFiltroOpen(col)" slot="end"></ion-icon>
+                  </div>
+                </div>
+  
+  
+                <div class="caixaGrande" [hidden]="!col.FiltroVisivel" tabindex="-1"
+                  style="color: black; display: block; position: absolute; z-index: 800; width: 210px; right: 0px; opacity: 0.9;">
+                  Filtrar:
+                  <div>
+                    <div style="display: flex; justify-content: space-between; align-items: start;">
+                      <select style="width: 80px;" [(ngModel)]="col.FiltroOperador">
+                        <option>=</option>
+                        <option>&gt;=</option>
+                        <option>&lt;=</option>
+                        <option>tem</option>
+                      </select>
+                      <input style="width: 100px;" type="text" [(ngModel)]="col.FiltroValor">
+                    </div>
+                    <ion-button size="small" color="medium" expand="block" (click)="filtrar(col)">Filtrar</ion-button>
+                    <ion-button size="small" color="light" expand="block" (click)="limpar()">Limpar</ion-button>
+                  </div>
+                  <div *ngIf="col.Valores" class="scroll-container" style="height: 200px; overflow-y: scroll;">
+                    <div *ngFor="let valor of col.Valores">
+                      <input type="checkbox" [(ngModel)]="valor.Selecionado">
+                      <span>{{ valor.Valor }}</span>
+                    </div>
+                  </div>
+                </div>
+  
+              </div>
+            </td>
+            <td *ngIf="tabelaCampos.Excluir === true">
+  
+            </td>
+          </tr>
+        </thead>
+        <tbody>
+          <tr *ngFor="let item of pageDataSet" [class]="item == selectedItem ? 'item-selecionado' : '' ">
+            <td *ngIf="tabelaCampos.Selecionar === true" style="text-align: center; cursor: auto;">
+              <input type="checkbox" [(ngModel)]="item[tabelaCampos.CampoSelecionar]" (change)="selecionadoChecked()">
+            </td>
+            <td class="col" *ngFor="let col of tabelaCampos.Colunas" [style.width]="col.Tamanho"
+              [style.text-align]="col.Tipo == 'number' ? 'right' : (col.Alinhamento ?? 'left')"
+              (click)="col.ClickFunction ? col.ClickFunction(item) : selecionarLinha(item)">
+              <span *ngIf="col.Pipe == 'date'">{{ item[col.Campo] | date: 'dd/MM/yyyy' }}</span>              
+              <span *ngIf="col.Pipe == 'valor'">{{ item[col.Campo] | valorFormat }}</span>
+              <span *ngIf="col.RenderFunction" [innerHtml]="col.RenderFunction(item) | safeHtml"></span>
+              <span *ngIf="!col.Pipe && !col.RenderFunction">{{ item[col.Campo] ?? col.Default }}</span>
+            </td>
+            <td *ngIf="tabelaCampos.Excluir === true" style="padding: 0px; text-align: center;">
+              <ion-button size="small" color="danger" fill="outline" style="transform: scale(0.85);" (click)="excluirLinha(item)">
+                <ion-icon name="trash"></ion-icon>
+              </ion-button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  
+    <ion-modal [isOpen]="isFiltroOpen" (didDismiss)="isFiltroOpen = false;">
+      <ng-template>
+        <ion-content class="ion-padding">
+          <div class="caixaGrande">
+            Filtrar:
+            <div *ngIf="selectedColuna.Valores">
+              <div *ngFor="let valor of selectedColuna.Valores">
+                <span>{{ valor }}</span>
+              </div>
+            </div>
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  </div>

package/src/lib/grid-view/grid-view.component.scss

@@ -0,0 +1,47 @@
+.grid {
+    width: 100%;
+    
+    thead {
+        td {
+            border: 1px solid gray;
+            padding: 4px 4px;
+            color: black !important;
+        }
+    }
+
+    tbody {
+        td {
+            border: 1px solid gray;
+            padding: 2px 4px;
+        }
+
+        tr {
+            cursor: pointer;
+
+            &:hover {
+                background-color: rgb(105, 156, 204, 0.5);
+                transition-duration: .5s;
+            }
+        }
+
+        tr.item-selecionado {
+            background-color: rgb(105, 156, 204, 0.2);
+        }
+    }
+}
+
+[hidden] {
+    display: none !important;
+}
+
+/*
+td {
+    border: 1px solid, lightgray;
+    padding: 2px;
+}
+
+.col {
+    border: 1px solid gray;
+    padding: 2px;
+}
+*/

package/src/lib/grid-view/grid-view.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GridViewComponent } from './grid-view.component';
+
+describe('GridViewComponent', () => {
+  let component: GridViewComponent;
+  let fixture: ComponentFixture<GridViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GridViewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GridViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});