Ocelot-Social/webapp/components/Group/GroupList.vue

<template>
  <div>
    
    <ds-container class="group-card">
      <ds-space>
    <div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div>
    <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
  </ds-space>
      <ds-flex v-for="item in items" :key="item.id" class="border-bottom" 
      :ref="item.myRole === null ? 'null' : item.myRole">
      <ds-flex-item width="90%" centered>
        {{item.myRole}}
        <ds-space margin="large">
          <nuxt-link :to="`/group/${item.id}`">
            <ds-text size="x-large">{{ item.name }}</ds-text>
          </nuxt-link>
          
          <ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
            <ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
            <ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
            <ds-chip v-if="item.myRole === 'owner'" color="inverse">{{item.myRole}}</ds-chip>
          <ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">{{item.myRole}}</ds-chip>
             
          <div>
            <ds-space margin-top="small">
              {{ item.about }}
            </ds-space>
          </div>
          <ds-space margin-top="small">
            <ds-chip v-for="category in item.categories" :key="category.name">
              <ds-icon :name="category.icon"></ds-icon> 
              {{category.name}}
            </ds-chip>
          </ds-space>
        </ds-space>
      </ds-flex-item>
      <ds-flex-item width="10%" centered>
        <group-menu
            resource-type="group"
            :resource="item"
            :isOwner="item.myRole"
          />
      </ds-flex-item>
    </ds-flex>
    </ds-container>
  </div>
</template>
<script>
import GroupMenu from '~/components/Group/GroupMenu'

export default {
  name: 'GroupList',
  components: {
    GroupMenu,
  },
  props: {
    items: { type: Array, default: () => [] },
  },
  methods: {
    removePending() {
      alert('removePending group')
    },
    editGroup(item) {
      this.$router.push({ path: `/group/edit/${item.id}` })
    },
    deleteGroup() {
      alert('delete group')
    },
    unfollowGroup() {
      alert('unfollow group')
    },
    addMemeberToGroup() {
      alert('addMemeberToGroup group')
    },
    onlyOwnerGroups(bool){
      console.log('bool', bool)
      console.log('this.$refs.usual', this.$refs.usual)
      console.log('this.$refs.pending', this.$refs.pending)
      console.log('this.$refs.null', this.$refs.null)
      
        this.$refs.myGruops.hidden = bool
        this.$refs.allGruops.hidden = !bool
     

      if (this.$refs.usual) {
        this.$refs.usual.forEach(element => {
         element.$el.hidden = bool})
        }

          
         if (this.$refs.null) {
          this.$refs.null.forEach(element => {
          element.$el.hidden = bool})
         }

         if (this.$refs.pending) {
          this.$refs.pending.forEach(element => {
          element.$el.hidden = bool})
         }
      
    }
  },
}
</script>
<style scoped>
.border-bottom {
  border-bottom: 1px solid #17b53f;
  background-color: rgb(255, 255, 255);
  padding-left: 20px;
}
</style>