Remove exist tile #11 backs...

[jrogatis]

I realize that for some reason this issue was back... I use splice on a model and the delete perform at the model but the enpty space remains...

import angular from 'angular';
const ngRoute = require('angular-route');
import routing from './pint.routes';
import _Auth from '../../components/auth/auth.module';
import ngMaterial from 'angular-material';
import ModalService from '../../components/modal/modal.service';
import _ from 'lodash';
import ngMessages from 'angular-messages';
import angularGrid from 'angulargrid';
import jsonpatch from 'fast-json-patch';


export class PintController {
  /*@ngInject*/
  constructor($scope, $http, Auth, $window, $routeParams, Modal, angularGridInstance, socket) {
    this.$http = $http;
    this.$scope = $scope;
    this.Auth = Auth;
    this.$window = $window;
    this.$scope.searching = false;
    this.CurUser = this.Auth.getCurrentUserSync();
    this.$routeParams = $routeParams;
    this.Modal = Modal;
    this.allPints = [];
    this.angularGridInstance = angularGridInstance;
    this.socket = socket;
    this.allPintsRetainner = [];

     $scope.$on('$destroy', function() {
      socket.unsyncUpdates('pints');
    });
  }

  $onInit() {
   this.loadImages();
  }

  loadSocket() {
    this.socket.unsyncUpdates('pint');
    this.socket.syncUpdates('pint', this.allPints, (event, item) => {
      console.log('sockrt')
      switch (event) {
      case 'deleted':
          break;
        case 'created':
         this.loadUserInfoOnPint(item)
          break;
        case 'updated':
          this.loadUserInfoOnPint(item)  
          break;  
        default:
          console.log('no default', event);
          break;  
      }
    });
    return true;
  }

  loadUserInfoOnPint(item){
        const indexToAdd = _.findIndex(this.allPints,  pint => {
            return pint._id.toString() === item._id
          })
        this.$http.get(`/api/users/userInfo/${item.ownerId}`)
          .then(result => {
           const info = result.data
            if (info.provider === 'twitter') {
              this.allPints[indexToAdd].userImage = info.twitter.profile_image_url_https;
              this.allPints[indexToAdd].userName = info.name;
            }
          //this.angularGridInstance.gallery.refresh()
        })


  }


  loadImages() {
     this.$http.get('/api/pint/')
      .then(results => {
        this.allPints =  results.data;
        this.loadSocket();
        this.allPints.map( (pint, index) =>{
          this.$http.get(`/api/users/userInfo/${pint.ownerId}`)
            .then(result => {
             const info = result.data
              if (info.provider === 'twitter') {
                pint.userImage = info.twitter.profile_image_url_https;
                pint.userName = info.name;
              }
          })
        })

      });
  }


  filterForUser(id) { 
    return el => {
         return el.ownerId === id
    }
  }

  toggleAllImages () {
    if (this.allPintsRetainner) {
        this.allPints = this.allPintsRetainner;
        //this.angularGridInstance.gallery.refresh(); 
       this.allPintsRetainner = [];
    }
  }

 filterByActualUser() {
   this.allPintsRetainner = this.allPints
   this.allPints = this.allPints.filter(this.filterForUser(this.Auth.getCurrentUserSync()._id));
 }

  isLoggedIn() {
    return this.Auth.isLoggedInSync() ? true : false;
  }

  addPicture() {
    const picToAdd = {
      ownerId: this.Auth.getCurrentUserSync()._id,
      imgUrl: this.UrlToAdd,
      desc: this.DescToAdd
    };
    this.$http.post('api/pint', picToAdd);
 }



  isOwner(index) {
   return this.isLoggedIn() && this.allPints[index].ownerId ===  this.Auth.getCurrentUserSync()._id.toString();
  }

  vote(index) {
    if (this.Auth.isLoggedInSync()) {
      //fist check if the user alredy vote for this
      const curUserVotesIndex = _.findIndex(this.allPints[index].likes, likes => {
        return likes.userId === this.Auth.getCurrentUserSync()._id
      })
       const observer = jsonpatch.observe(this.allPints[index]);
      if(curUserVotesIndex === -1 ) {
        this.allPints[index].likes.push({
          userId: this.Auth.getCurrentUserSync()._id
        });
      } else {
        this.allPints[index].likes.splice(curUserVotesIndex,1);
      }
      var patches = jsonpatch.generate(observer);
      this.$http.patch(`/api/pint/${this.allPints[index]._id}`, patches);
    } else {
      this.Modal.needLogin();
    }
  }

  deletePint(index) {
      this.$http.delete(`/api/pint/${this.allPints[index]._id}`)
      }
}


export default angular.module('camperFullStackProjectsApp.pint', [ngRoute, _Auth, ngMessages, angularGrid])
  .config(routing)
  .component('pint', {
    template: require('./pint.main.pug'),
    controller: PintController
  })
  .name

[s-yadav]

Can you also share the template code where you have used angulargrid. It will also be great if you set a fiddle, or can pass a link, so I can debug easily for your usecase.

[jrogatis]

Better than this! Because this was a challenge from Free Code Camp thats the public git for the app https://github.com/jrogatis/camper-full-stack-projects

[cid:[email protected]] Jean Philip de Rogatis |CIO [email protected]

De: Sudhanshu Yadav [email protected] Responder para: s-yadav/angulargrid [email protected] Data: quinta-feira, 13 de outubro de 2016 1:13 AM Para: s-yadav/angulargrid [email protected] Cc: Jean Philip de Rogatis [email protected], Author [email protected] Assunto: Re: [s-yadav/angulargrid] Remove exist tile #11 backs... (#86)

Can you also share the template code where you have used angulargrid. It will also be great if you set a fiddle, or can pass a link, so I can debug easily for your usecase.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/s-yadav/angulargrid/issues/86#issuecomment-253409924, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AQmXTrKPsOQbHIDqwwgM-ndiLNyOTzfgks5qzbACgaJpZM4KSNiZ.

[s-yadav]

So you are looping on different model and passing different model to angulargrid ?

 ul.dynamic-grid(angular-grid="$ctrl.allPints", ag-grid-width="200", ag-gutter-size="10", ag-id="gallery" ag-refresh-on-img-load="false")
          li.grid(data-ng-repeat="pint in $ctrl.allPintsToShow")

allPints vs allPintsToShow . This will not work as angulargrid will not be notified when allPintsToShow changes.

Also you have turned of refresh-on-image-load, so you have to make sure you have defined heights for grid items and height will not change once images are loaded within the grid item.

[jrogatis]

I make a new push with the your sugestions and the issue remains .... On time, really tanks for your time! To both, developed this library and to help me !

[jeevasusej]

Please check the pull request.

If we listen the element removed, then refreshing the grid works.

#96