import Vue from 'vue' import { mapActions } from 'vuex' import FtLoader from '../../components/ft-loader/ft-loader.vue' import FtCard from '../../components/ft-card/ft-card.vue' import FtPrompt from '../../components/ft-prompt/ft-prompt.vue' import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue' import FtInput from '../../components/ft-input/ft-input.vue' import FtButton from '../../components/ft-button/ft-button.vue' export default Vue.extend({ name: 'ProfileEdit', components: { 'ft-loader': FtLoader, 'ft-card': FtCard, 'ft-prompt': FtPrompt, 'ft-flex-box': FtFlexBox, 'ft-input': FtInput, 'ft-button': FtButton }, data: function () { return { isLoading: false, showDeletePrompt: false, deletePromptLabel: '', isNew: false, profileId: '', profileName: '', profileBgColor: '', profileTextColor: '', profileSubscriptions: [], deletePromptValues: [ 'yes', 'no' ] } }, computed: { colorValues: function () { return this.$store.getters.getColorValues }, profileInitial: function () { return this.profileName.slice(0, 1).toUpperCase() }, activeProfile: function () { return this.$store.getters.getActiveProfile }, defaultProfile: function () { return this.$store.getters.getDefaultProfile }, deletePromptNames: function () { return [ this.$t('Yes'), this.$t('No') ] } }, watch: { profileBgColor: async function (val) { this.profileTextColor = await this.calculateColorLuminance(val) } }, mounted: async function () { this.isLoading = true const profileType = this.$route.name this.deletePromptLabel = `${this.$t('Profile.Are you sure you want to delete this profile?')} ${this.$t('Profile["All subscriptions will also be deleted."]')}` if (profileType === 'newProfile') { this.isNew = true this.profileBgColor = await this.getRandomColor() this.isLoading = false } else { this.isNew = false this.profileId = this.$route.params.id console.log(this.profileId) console.log(this.$route.name) this.grabProfileInfo(this.profileId).then((profile) => { if (profile === null) { this.showToast({ message: this.$t('Profile.Profile could not be found') }) this.$router.push({ path: '/settings/profile/' }) } this.profileName = profile.name this.profileBgColor = profile.bgColor this.profileTextColor = profile.textColor this.profileSubscriptions = profile.subscriptions this.isLoading = false }) } }, methods: { openDeletePrompt: function () { this.showDeletePrompt = true }, handleDeletePrompt: function (response) { if (response === 'yes') { this.deleteProfile() } else { this.showDeletePrompt = false } }, saveProfile: function () { if (this.profileName === '') { this.showToast({ message: this.$t('Profile.Your profile name cannot be empty') }) return } const profile = { name: this.profileName, bgColor: this.profileBgColor, textColor: this.profileTextColor, subscriptions: this.profileSubscriptions } if (!this.isNew) { profile._id = this.profileId } console.log(profile) this.updateProfile(profile) if (this.isNew) { this.showToast({ message: this.$t('Profile.Profile has been created') }) this.$router.push({ path: '/settings/profile/' }) } else { this.showToast({ message: this.$t('Profile.Profile has been updated') }) } }, setDefaultProfile: function () { this.updateDefaultProfile(this.profileId) const message = this.$t('Profile.Your default profile has been set to $').replace('$', this.profileName) this.showToast({ message: message }) }, deleteProfile: function () { this.removeProfile(this.profileId) const message = this.$t('Profile.Removed $ from your profiles').replace('$', this.profileName) this.showToast({ message: message }) if (this.defaultProfile === this.profileId) { this.updateDefaultProfile('allChannels') this.showToast({ message: this.$t('Profile.Your default profile has been changed to your primary profile') }) } if (this.activeProfile._id === this.profileId) { this.updateActiveProfile('allChannels') } this.$router.push({ path: '/settings/profile/' }) }, ...mapActions([ 'showToast', 'grabProfileInfo', 'updateProfile', 'removeProfile', 'updateDefaultProfile', 'updateActiveProfile', 'calculateColorLuminance', 'getRandomColor' ]) } })