<template>
<div>
<!--.........if folder already exist...........-->
<div class="dropdown-menu dropdown-menu-right feeder_no_cursor_pointer">
<template v-if="getFeederGroupList.length > 0 && !is_create_new_group">
<li class="heading">Select Group</li>
<ul class="inner">
<template v-for="group in getSortedFeederGroupList">
<li class="list_item ">
<span class="feeder-group-item--name">{{limitTextLength(group.name, 18)}}</span>
<template v-if="isAddedToFolderAlready(group)">
<span class="feeder-group-item--remove" @click="removeFeedFromGroup(group)"
:class="{'disable_click feeder_disable_click': group.is_remove}">
<span class="text-center">
<i class="fa fa-times"></i> <template
v-if="group.is_remove && state_of_loader==='removing'">Removing</template><template
v-else>Remove</template>
</span>
<span class="feeder-group-inline-block ml-2"
v-if="group.is_remove && state_of_loader==='removing'">
<clip-loader :color="'#ea7070'" :size="'14px'"></clip-loader>
</span>
</span>
</template>
<template v-else>
<span class="feeder-group-item--add feeder-group-inline-block"
:class="{'disable_click feeder_disable_click': group.is_add}"
@click="addFeedToGroup(group)">
<span class="text-center">
<i class="fa fa-plus"></i> <template
v-if="group.is_add && state_of_loader==='adding'">Adding</template><template
v-else>Add</template>
</span>
<span class="feeder-group-inline-block ml-2"
v-if="group.is_add && state_of_loader==='adding'">
<clip-loader :color="'#1ecb7b'" :size="'14px'"></clip-loader>
</span>
</span>
</template>
<!--<img @click.prevent="removeFolder(folder._id,folder.name, index)" class="remove close_this" src="../../assets/article/delete_icon.svg" alt="remove topic">-->
</li>
</template>
</ul>
</template>
<div class="dd_footer close_this " v-if="!is_create_new_group && this.getFeederGroupList.length > 0">
<button class="btn light_gray" @click.prevent="isCreateNewGroup()">
<i class="far fa-plus mr-2"></i>
Create New Group
</button>
</div>
<template v-if="is_create_new_group || this.getFeederGroupList.length === 0">
<li class="heading new_folder">Create New Group</li>
<div class="dd_footer close_this ">
<div class="create_input">
<input type="text" v-model="getFeederGroupStore.name"
@keyup.enter="validateAndStoreGroupFromDropdown()"
placeholder="Enter Group Name e.g SEO, Marketing">
<p class="error_message_about_group pt-1" v-if="state ==='group_exists'">A group with that name
already exists</p>
<div class="input_icon">
<i v-if="getFeederGroupStore.name && getFeederGroupStore.name.length >= 1"
class="remove far fa-times" @click="clearFeederGroupText()"></i>
<!--<img class="remove" src="../../assets/article/delete_icon.svg" alt="remove topic">-->
</div>
</div>
<div class="create_group_input_buttons mt-3">
<button :disabled="!getFeederGroupStore.name || loaders.folder_create"
@click="validateAndStoreGroupFromDropdown()"
class="btn gradient_btn btn_loader loader_right create_action_button mr-2"
:class="{'input-field-error': getFeederGroupValidations.fields.name}">
<span>Create</span>
<clip-loader :color="'#ffffff'" :size="'12px'"
v-if="loaders.folder_create"></clip-loader>
</button>
<button class="btn btn_loader loader_right cancel_action_button"
@click="is_create_new_group = false" v-if="this.getFeederGroupList.length > 0">
<span>Cancel</span>
</button>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import sortBy from 'lodash.sortby'
export default {
props: {
feed_id: {},
removeFromFollowedList: {},
addToFollowedList: {}
},
data () {
return {
addFolderStatus: true,
folderName: null,
state: '',
is_create_new_group: false,
state_of_loader: '',
loaders: {
folder_create: false
}
}
},
computed: {
...mapGetters(['getFeederGroupStore', 'getFeederGroupList', 'getFeederGroupValidations']),
getSortedFeederGroupList () {
return sortBy(this.getFeederGroupList, ['name'], ['asc'])
}
},
methods: {
// ...mapActions([''])
isCreateNewGroup () {
this.clearFeederGroupText()
this.is_create_new_group = true
},
clearFeederGroupText () {
this.$set(this.getFeederGroupStore, 'name', '')
},
async validateAndStoreGroupFromDropdown () {
{
let validationFields = this.getFeederGroupValidations.fields
this.$set(validationFields, 'name', this.requiredCheck(this.getFeederGroupStore.name))
let result = Object.keys(validationFields).every(k => validationFields[k] === false)
if (result) {
this.loaders.folder_create = true
let res = await this.$store.dispatch('storeFeederGroup')
this.loaders.folder_create = false
console.log(res)
if (res && res.data) {
if (!res.data.status) {
this.state = res.data.state
} else {
let groupId = res.data.data.uuid
let groupItem = this.getFeederGroupList.find(item => item.uuid === res.data.data.uuid)
this.is_create_new_group = false
this.$set(groupItem, 'is_add', true)
this.state_of_loader = 'adding'
let feedResponse = await this.$store.dispatch('storeUserFeed', {
feedId: this.feed_id,
groupId: groupId
})
console.log(feedResponse)
if (feedResponse && feedResponse.data && feedResponse.data.data) {
this.$store.dispatch('addUserFeedToGroup', feedResponse.data.data)
this.addToFollowedList(this.feed_id)
this.clearFeederGroupText()
}
this.$set(groupItem, 'is_add', false)
this.state_of_loader = ''
}
}
}
}
},
isAddedToFolderAlready (group) {
if (group.user_feed_details) {
let item = group.user_feed_details.find(item => item.feed_id === this.feed_id)
return !!(item)
}
return false
},
async removeFeedFromGroup (group) {
this.state_of_loader = 'removing'
this.$set(group, 'is_remove', true)
let feedResponse = await this.$store.dispatch('deleteUserFeed', {
feedId: this.feed_id,
groupId: group.uuid
})
if (feedResponse && feedResponse.data && feedResponse.data.status) {
await this.$store.dispatch('removeUserFeedFromGroup', { feed_id: this.feed_id, group_id: group.uuid })
this.removeFromFollowedList(this.feed_id)
}
console.log(feedResponse)
this.$set(group, 'is_remove', false)
this.state_of_loader = ''
},
async addFeedToGroup (group) {
this.state_of_loader = 'adding'
this.$set(group, 'is_add', true)
console.log('add feed to group')
let feedResponse = await this.$store.dispatch('storeUserFeed', {
feedId: this.feed_id,
groupId: group.uuid
})
console.log(feedResponse)
if (feedResponse && feedResponse.data && feedResponse.data.data) {
await this.$store.dispatch('addUserFeedToGroup', feedResponse.data.data)
this.addToFollowedList(this.feed_id)
}
this.$set(group, 'is_add', false)
this.state_of_loader = ''
}
},
watch: {
'getFeederGroupStore.name.length' (value) {
if (this.state === 'group_exists') this.state = ''
}
}
}
</script>
<style scoped lang="less">
.create_group_input_buttons {
.create_action_button {
span {
color: #fff !important;
}
}
.cancel_action_button {
span {
color: #4a4a4a !important
}
background: #dddddd !important;
}
}
.error_message_about_group {
color: #f44336 !important;
font-size: 12px;
}
.input_icon {
i {
color: #989eb5 !important
}
}
.feeder-group-item--name {
display: inline-block !important;
padding: 4px 0;
}
.feeder-group-item--add {
cursor: pointer !important;
width: 125px;
border-radius: 2px;
padding: 4px 10px;
display: inline-block;
float: right;
color: #1ecb7b;
border: 1px solid #1ecb7b;
text-align: center;
i {
padding-right: 5px;
}
}
.feeder-group-item--add:hover {
color: #00c489;
border: 1px solid #00af7a;
}
.feeder-group-item--remove {
cursor: pointer !important;
width: 125px;
text-align: center;
border-radius: 2px;
padding: 4px 10px;
display: inline-block;
float: right;
color: #ea7070;
border: 1px solid #ea7070;
i {
padding-right: 5px;
}
}
.feeder-group-item--red:hover {
color: #db5353;
border: 1px solid #c84d4d;
.v-spinner {
display: inline-block !important;
}
}
.feeder-group-item-spinner, .feeder-group-inline-block {
display: inline-block;
}
.follow_feeds_dropdown .dropdown-menu li.list_item span {
display: inline-block;
}
.feeder_no_cursor_pointer {
cursor: auto !important;
}
.feeder_disable_click {
opacity: 0.5 !important;
}
</style>