<template>
  <v-flex lg10>
    <v-card class="elevation-12">
      <v-alert v-if="message"
       :value="true"
       :type="typeMessage"
      >
        {{message}}
      </v-alert>
      <v-toolbar dark color="primary">
        <v-toolbar-title>User Edit</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <v-container grid-list-lg>
          <v-layout row wrap>
            <v-flex md5 offset-md1>
              <v-text-field prepend-icon="person"
              v-model="user.firstname" label="First Name"
              ></v-text-field>
            </v-flex>
            <v-flex md5>
              <v-text-field
              v-model="user.lastname" label="Last Name"
              ></v-text-field>
            </v-flex>
            <v-flex md6 offset-md1>
              <v-text-field prepend-icon="email"
              v-model="user.email" label="Email"
              ></v-text-field>
            </v-flex>
            <v-flex md4>
              <v-text-field prepend-icon="phone" mask="(###)-##-####"
              v-model="user.phone" label="Phone"
              ></v-text-field>
            </v-flex>
            <v-flex md5 offset-md1>
              <v-text-field prepend-icon="person"
              v-model="user.username" label="Username"
              ></v-text-field>
            </v-flex>
            <v-flex md5 offset-1>
              <v-text-field prepend-icon="lock"
              label="Password" hint="At least 8 characters"
              :append-icon="e1 ? 'visibility' : 'visibility_off'"
              @click:append="() => (e1 = !e1)"
              :type="e1 ? 'password' : 'text'"
              v-model="user.password"
              counter
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-btn @click="resetForm">Cancel</v-btn>
        <v-spacer v-if="showList"></v-spacer>
        <v-btn v-if="showList" @click="goView('list')">Go List Users</v-btn>
        <v-spacer></v-spacer>
        <v-btn @click="updateUser" color="primary">Update Info</v-btn>
      </v-card-actions>
    </v-card>
  </v-flex>
</template>

<script>

import { mapState, mapGetters } from 'vuex';
import _ from 'lodash';

export default {
  data() {
    return {
      e1: true,
      showList: false,
    };
  },
  computed: {
    ...mapState({
      user: state => _.cloneDeep(state.userManagement.userSelected),
    }),
    ...mapGetters({
      typeMessage: 'getTypeMessage',
      message: 'getMessage',
    }),
  },
  methods: {
    resetForm() {
      this.$store.dispatch('cancelUpdateUser', this.user.ID);
    },
    updateUser() {
      // this.$store.dispatch('updateUser', this.user);
      if (localStorage.getItem('accessToken') !== undefined && localStorage.getItem('accessToken') !== null) {
        this.$store.dispatch('updateUser', this.user)
          .then(() => {
            this.resetForm();
          })
          .catch(() => {
            // eslint-disable-next-line
            console.log('Error');
          });
      } else {
        this.$router.push({ name: 'Login', params: { successAlert: true } });
      }
    },
    goView(item) {
      this.$store.dispatch('updateTypeMessage', 'info');
      this.$store.dispatch('updateMessage', '');
      this.$store.dispatch('openSelectedView', item);
    },
  },
  created() {
    if (localStorage.getItem('accessToken') !== undefined && localStorage.getItem('accessToken') !== null) {
      this.showList = true;
    }
  },
};
</script>

import _ from 'lodash';
import manejadorservicio from '@/services/manejadorservicio';

export default {
  state: {
    currentComponent: 'list',
    users: [],
    userSelected: {
      firstname: '',
      lastname: '',
      email: '',
      phone: '',
      username: '',
      password: '',
    },
    typeMessage: 'info',
    message: '',
  },
  getters: {
    getUsers(state) {
      return state.users;
    },
    getUserSelected(state) {
      return state.userSelected;
    },
    getTypeMessage(state) {
      return state.typeMessage;
    },
    getMessage(state) {
      return state.message;
    },
  },
  mutations: {
    updateUsers(state, payload) {
      state.users = payload;
    },
    updateUserSelected(state, payload) {
      state.userSelected = payload;
    },
    updateCurrentComponent(state, { componentName }) {
      state.currentComponent = componentName;
    },
    updateTypeMessage(state, payload) {
      state.typeMessage = payload;
    },
    updateMessage(state, payload) {
      state.message = payload;
    },
    cancelUpdateUser(state, payload) {
      // eslint-disable-next-line
      console.log('clonado: ',state.userSelected,' clon ',_.cloneDeep(state.users.filter(m => m.ID === (payload))[0]), ' id',payload);
      // state.userSelected = _.cloneDeep(state.users.filter(m => m.ID === (payload))[0]);
      state.userSelected = _.cloneDeep(state.userSelected);
    },
  },
  actions: {
    clearUpdateUser({ commit }) {
      commit('clearUpdateUser');
    },
    cancelUpdateUser({ commit }, payload) {
      commit('cancelUpdateUser', payload);
    },
    fetchUserSelected({ commit }, payload) {
      manejadorservicio.FetchUserSelected(payload.ID)
        .then((resp) => {
          commit('updateCurrentComponent', { componentName: 'edit' });
          commit('updateUserSelected', resp.body);
        })
        .catch(() => {
          // eslint-disable-next-line
          console.log('Error');
        });
    },
    fetchAllUsers({ commit }) {
      manejadorservicio.FetchAllUsers()
        .then((resp) => {
          commit('updateUsers', resp.body);
        })
        .catch(() => {
          // eslint-disable-next-line
          console.log('Error');
        });
    },
  },
};