base_ui/layouts/jahat/layout/Dashboard.vue

<template>
    <div>
      <div class="jahat__sidebar scroll-needed">
        <ul class="sidebar-menu sidebar-menu--simple">
          <li>
            <router-link :to="{name:'issues'}" class="text__14">مسائل جدید</router-link>
          </li>
          <li>
            <router-link :to="{name:'issues'}" class="text__14">مسائل مرتبط</router-link>
          </li>
          <li>
            <router-link :to="{name:'issues'}" class="text__14">مسائل پیشنهادی</router-link>
          </li>
          <li>
            <router-link :to="{name:'issues'}" class="text__14">مسائل کلان</router-link>
          </li>
          <li>
            <router-link :to="{name:'issues'}" class="text__14">ایده ها</router-link>
          </li>
          <li>
            <router-link :to="{name:'issues'}" class="text__14">مسائل حل شده</router-link>
          </li>
        </ul>
      </div>
      <div class="jahat__content-container">
        <div class="jahat__content">
          <div class="dashboard">
            <div class="my-profile__container" style="position: relative">
              <div class="my-profile">
                <div class="my-profile__form">
                  <form action="">
                    <div class="form-row">
                      <label for="">نام</label>
                      <input type="text" placeholder="کاظم" />
                    </div>
                    <div class="form-row">
                      <label for="">نام خانوادگی</label>
                      <input type="text" placeholder="رحیمی" />
                    </div>
                    <div class="form-row">
                      <label for="">تلفن همراه</label>
                      <input type="text" placeholder="۰۹۱۹۲۵۱۳۰۱۱" />
                    </div>
                    <div class="form-row">
                      <label for="">نام کاربری</label>
                      <input type="text" placeholder="@rahim_arbab" />
                    </div>
                    <div class="form-row">
                      <label for="">پست الکترونیک</label>
                      <input type="text" placeholder="rahimearbab@gmail.com" />
                    </div>
                    <div class="border"></div>
                    <div class="text text__gray">اطلاعات بیشتر <span>( موارد را با ویرگول «،» جدا کنید )</span></div>
                    <div class="form-row form-row--text-area">
                      <label for="">تخصص ها</label>
                      <!-- <textarea v-model="user_properties.skills.value" cols="30" rows="10" placeholder="مهارتها و تخصصهای علمی"></textarea> -->
                      <!-- <textarea v-model="userInfo.skills.value" cols="30" rows="10" placeholder="مهارتها و تخصصهای علمی"></textarea> -->
                      <vue-select dir="rtl" multiple taggable  v-model="userInfo.skills.value"  :options="skills"></vue-select>
                    </div>
                    <div class="form-row form-row--text-area">
                      <label for="">علاقمندی ها</label>
                      <vue-select dir="rtl" multiple taggable  v-model="userInfo.favorites.value" :options="favorites" ></vue-select>
                      <!-- <textarea v-model="userInfo.favorites.value" cols="30" rows="10" placeholder="موضوعات مورد علاقه ( دغدغه شما )"></textarea> -->
                    </div>

                    <div class="popUp-tab__buttons px-0">
                      <a href="javascript:void(0)" class="popUp-tab__submit" @click="saveUserInfo()">ثبت</a>
                    </div>

                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>

import { mapActions, mapState } from 'vuex';
import {GET_PERSONAL_INFO} from "../../../store/modules/profile.module";
export default {
  name: "Dashboard",

  data(){
    return{
      user_properties:{
        skills:{
          id: 2,
          value: '',

        },
        favorites:{
          id: 1,
          value: ''
        }
      },
      errors: {},

      skills: [],
      favorites: []
      
    }
  },

  computed: {
    ...mapState(['currentUserPersonalInfo']),

    userInfo(){
      let userInfo = this.currentUserPersonalInfo;
      let user_properties = this.user_properties;

      if(userInfo && userInfo.properties && Object.keys(userInfo.properties).length > 0){
        let skills = [];
        let favorites = [];

        if(userInfo.properties.skills.length > 0){
          userInfo.properties.skills.forEach((skill) => {
            skills.push({id: skill.values.id, label: skill.values.title});
          });
        }
        if(userInfo.properties.favorites.length > 0){
          userInfo.properties.favorites.forEach((favorite) => {
            favorites.push({id: favorite.values.id, label: favorite.values.title});
          });
        }

        user_properties.skills.value = skills;
        user_properties.favorites.value = favorites;
      }
      return user_properties;
    }
  },

  methods: {
    ...mapActions([ 'checkPermissions', 'SAVE_USER_PROPERTIES', 'GET_PERSONAL_INFO']),
    saveUserInfo(){
      let data = {...this.user_properties};
      let self = this;

      this.SAVE_USER_PROPERTIES(data).then(response => {
      }).catch(errors => {
        self.errors = errors.data.errors;
      });
    },

    getProfileData(){
      let self = this;
      ApiService.get(
          null,
          "profile/skills-favorites",
          function(response) {
              response.data.favorites.forEach(item => {
                let data = {
                  id: item.id,
                  label: item.title
                }
                self.favorites.push(data);
              });
              response.data.skills.forEach(item => {
                let data = {
                  id: item.id,
                  label: item.title
                }
                self.skills.push(data);
              });
          },
          function() {
          }
      );
    }
  },

  mounted(){
    this.GET_PERSONAL_INFO();
    this.getProfileData();
    // this.checkPermissions({ permission: "", _this: this })

  }
};
</script>