Cluster Problems - WEB Development

Question

I am learning and developing a web report that should be grouped in order of production, but I have the field "Resource Consumed" that prevents me this grouping and repeats the production orders:

[

I have available the framework Angularjs in which I am also learning, maybe it would help me. So how can I group by Production Order without repeating because of the Resource Consumed field?

Sources:

with vwConsumido as (
  select sml.PlannedOrderID IDOrdemProducao, 
         sml.MaterialID IDRecursoConsumido,
         sum(sml.Quantity) QuantidadeConsumida
  from stockmovementlogs SML
  where
  (
    MovementTypeString = 'Consumption'
    or MovementTypeString = 'Leftover'
    or MovementTypeString = 'Loss'
    or MovementTypeString = 'Entrance'
  )
  group by sml.PlannedOrderID, sml.MaterialID
)

select OP.PlannedOrderID as OP,
       CONCAT(M.MaterialId, ' - ', M.MaterialName) as Produto,
       MC.MaterialName   as RecursoConsumido,
       MC.MaterialId     as CodigoRecursoConsumido, 
       OP.Quantity       as QtdItensOrdem,
       round((POM.Quantity/OP.Quantity),4) as QtdReceita,
       POM.Quantity      as QuantidadePrevista,

       COALESCE(PCS.QuantidadeConsumida, 0) QtadeConsumida
from PlannedOrders OP

inner join Materials M on M.MaterialID = OP.MaterialID 
inner join PlannedOrderMaterialBOMs POM on POM.PlannedOrderID = OP.PlannedOrderID
inner join Materials MC on MC.MaterialID = POM.ComponentMaterialID   
left  join vwConsumido  PCS on PCS.IDordemProducao = OP.PlannedOrderId and PCS.IDRecursoConsumido = POM.ComponentMaterialID

function ControllerFormato($scope) {
  
  $scope.prefs = {           
    sortByCol: null,
    canAdd: false,
    canEdit: false,
    canDelete: false,
  };

  $scope.columns = [  
    { name: 'OP', display: 'Ordem de Produção', filterOptions: [], editable: false, width:50},
    { name: 'RecursoProduzido', display: 'Recurso Produzido', filterOptions: [], editable: false, width:50},
    { name: 'QtadeConsumida', display: 'Quantidade Consumida', filterOptions: [], editable: false, width:50},
    { name: 'RecursoConsumido', display: 'Recurso Consumido', filterOptions: [], editable: false, width:50},
    { name: 'QuantidadePrevista', display: 'Quantidade Prevista', filterOptions: [], editable: false, width:50},
    { name: 'CodigoRecursoConsumido', display: 'Código Recurso Consumido', filterOptions: [], editable: false, width:50},
  ];  */
} 

/*Labels*/
.lbl-Previsto {
position: absolute;
	right: 60%;
}

.lbl-RecursoConsumido{
position: absolute;
left: 4%
}

.lbl-RecursoProduzido{
position: absolute;
left: 4%
}

.lbl-Real {
 position: absolute;
  right: 55%;  
}
.lbl-Ordem {
position: absolute;
left: 2% 
}
.lbl-produto{
position: absolute;
right: 60%
}
/*Campos*/
.imp-Previsto{
 position: absolute;
 right: 60.3%;
}

.imp-CodConsumido {
 position:absolute;
 left: 4%
}

.imp-consumido{
position: absolute;
left : 10%
}

.imp-Real {
position: absolute;
right: 55.3%
}

.imp-RecPro {
position: absolute;
left: 4%  
}

.imp-Ordem{
position: absolute;
left: 6%
}

.imp-produto {
position: absolute;
right: 36%
}







  

<div>
  <span style="font-weight: bold;float:left;">Análise dos Consumos Injetados</span>
  <br />
  <span style="font-weight: bold;float:left;" >Maral Indústria e Comércio de Brinquedos Ltda</span>  
  <br />
  <hr  class="linha" width = “2” size = “100”>
</div>

 <div ng-controller="ControllerFormato" ng-repeat="comp in items ">
  <span style="font-weight: bold;" class="lbl-Ordem"> Ordem: </span>
   <span class="imp-Ordem">{{comp.OP}}</span> 
   <span style="font-weight: bold;" class="lbl-produto">Produto: </span>
   <span  class="imp-produto">{{comp.Produto}}</span>  
   <br />
  <div>
   <br />
   <span  style="font-weight: bold;" class="lbl-RecursoConsumido" >Recurso Consumido</span> 
   <span style= "font-weight: bold;" class="lbl-Previsto"> Previsto </span>
   <span  style="font-weight: bold;" class="lbl-Real"> Real </span>
   <br />
    <span class="imp-CodConsumido"> {{comp.CodigoRecursoConsumido}} </span>
    <span class="imp-consumido"> {{comp.RecursoConsumido}} </span> 
    <span class="imp-Previsto"> {{comp.QuantidadePrevista}} </span> 
    <span class="imp-Real"> {{comp.QtadeConsumida}} </span>    
  </div>
   <div>
    <br />
   <label style="font-weight: bold;"  class="lbl-RecursoProduzido">Recurso Produzido</label>
   <br />
   <span class="imp-RecPro"> Código/Recurso Produzido </span>  
    <br />
    <br />
    <hr  class="linha" width = “2” size = “100”> 
  </div>
  </div>

 

Answer 1

Solved via the following line of code:

    <div  ng-repeat="(op, itemsOP) in items |  filter: {OP: filterField} | groupBy:'OP'">