<repo_name>Timurgorez/iCraft<file_sep>/src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import product from './product/index'
import payment from './payment/index'
import shoppingBag from './shoppingBag/index'

export default new Vuex.Store({
  modules: {
    product: product,
    payment: payment,
    shoppingBag: shoppingBag,
  }
})
<file_sep>/src/directives/index.js
import Vue from "vue";
Vue.directive("onMobileShow", {
  bind(el) {
    function modify() {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        ) ||
        window.innerWidth < 992
      ) {
        el.style.display = "flex";
      } else {
        el.style.display = "none";
      }
    }
    modify();
    window.addEventListener("resize", modify, { passive: true });
  }
});

Vue.directive("onDesctopShow", {
  bind(el) {
    function modify() {
      if (
        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
          navigator.userAgent
        ) ||
        window.innerWidth < 992
      ) {
        el.style.display = "none";
      } else {
        el.style.display = "flex";
      }
    }
    modify();
    window.addEventListener("resize", modify, { passive: true });
  }
});

Vue.directive("splitTitle", {
  bind(el) {
    
    console.log(el.clientWidth);
    function modify() {
      // if(el.clientWidth > 0){
      //   const countOfSymbols = Math.floor((el.clientWidth - 20) / 20 * 2);
      //   if(el.innerText.length > countOfSymbols){
      //     el.innerText =  el.innerText.substring(0, 53) + '...';
      //   }
      // }
    }
    setTimeout(() => {modify();}, 0)
    
    window.addEventListener("resize", modify, { passive: true });
  }
});
<file_sep>/src/store/shoppingBag/index.js
export default {
  state: {
    productInBag: [],
    selectedAddress: {},
    shoppingType: {},
    insurance: {},
    shippingAdresses: [
      {
        id: 1,
        name: "<NAME>",
        country: "Ukraine",
        state: "Kharkiv",
        zip_code: "Ukraine",
        city: "Kharkiv",
        address: "per. Pushkina 12",
        default: false
      },
      {
        id: 2,
        name: "<NAME>",
        country: "Canada",
        state: "Quebec",
        zip_code: "134234",
        city: "Ottawa",
        address: "ave. Lenina 12",
        default: false
      },
      {
        id: 3,
        name: "<NAME>",
        country: "USA",
        state: "Texas",
        zip_code: "34523",
        city: "Miniapalis",
        address: "ave. Lenina 12",
        default: false
      }
    ]
  },
  mutations: {
    addToBag(state, payload) {
      state.productInBag.push(payload);
    },
    addToSelectedAddress(state, payload) {
      state.selectedAddress[payload.sellerId] = payload.address.id;
    },
    initialiseUserBag(state) {
      if (localStorage.getItem("userBag")) {
        state.productInBag = JSON.parse(localStorage.getItem("userBag"));
      }
      if (localStorage.getItem("selectedAddress")) {
        state.selectedAddress = JSON.parse(
          localStorage.getItem("selectedAddress")
        );
      }
    },
    modifyFieldInBag(state, obj) {
      state.productInBag.forEach(prodInBag => {
        if (prodInBag.id == obj.id) {
          prodInBag[obj.name] = obj.value;
        }
      });
      localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    },
    removeProductFromBag(state, id) {
      console.log(id);
      state.productInBag.forEach((prodInBag, index) => {
        if (prodInBag.id == id) {
          state.productInBag.splice(index, 1);
        }
      });
      localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    },
    modifyInsurance(state, { sellerId, value }) {
      state.insurance[sellerId] = value;
    },
    modifyShoppingType(state, { sellerId, value }) {
      state.shoppingType[sellerId] = value;
    },
    initialiseShoppingType(state) {
      state.productInBag.forEach(el => {
        state.shoppingType[el.sellerId] = null;
        state.insurance[el.sellerId] = false;
      });
    },
    modifyShippingAddress(state, obj) {
      state.shippingAdresses.forEach(address => {
        if (address.id == obj.newModel.id) {
          address = obj.newModel;
        }
      });
      if (state.selectedAddress) {
        for (let sellerId in state.selectedAddress) {
          console.log(sellerId);
          if (state.selectedAddress[sellerId].id == obj.newModel.id) {
            state.selectedAddress[sellerId] = obj.newModel;
          }
        }
      }
    },
    addNewShippingAddress(state, address) {
      address.id = (~~(Math.random() * 1e8)).toString(16);
      state.shippingAdresses.push(address);
    }
    // addNewFieldToBag(state, id, fieldName, value){
    //   console.log(id, fieldName, value);
    //   state.productInBag.forEach((prodInBag) => {
    //     if (prodInBag.id == id) {
    //       prodInBag[fieldName] = value;
    //     }
    //   });
    //   localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    // }
  },
  actions: {
    addProductToBag({ commit, state }, product) {
      commit("addToBag", product);
      localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    },
    addAddressToSelectedAddress({ commit, state }, shipping) {
      commit("addToSelectedAddress", shipping);
      localStorage.setItem(
        "selectedAddress",
        JSON.stringify(state.selectedAddress)
      );
    }
  },
  getters: {
    getProductsInBag(state) {
      return state.productInBag;
    },
    countProductsInBag(state) {
      return state.productInBag.length;
    },
    isSelectedAddress(state) {
      return sellerId => {
        return !!state.selectedAddress && !!state.selectedAddress[sellerId];
      };
    },
    getSelectedAddress(state) {
      return state.selectedAddress;
    },
    getSelectedAddressBySellerId(state) {
      return sellerId => {
        return state.shippingAdresses.find(address => {
          return address.id == state.selectedAddress[sellerId];
        });
      };
    },
    getDefaultAddress(state) {
      return state.shippingAdresses.find(address => {
        return address.default;
      });
    },
    getShippingAdresses(state) {
      return state.shippingAdresses;
    },
    getInsurance(state) {
      return state.insurance;
    },
    getShoppingType(state) {
      return state.shoppingType;
    },
    getOneShippingAdresses(state) {
      return addressId => {
        return state.shippingAdresses.find(address => {
          return address.id == addressId;
        });
      };
    }
  }
};
<file_sep>/src/router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
import CollectionPage from "@/views/CollectionPage";
import ProductItem from "@/views/ProductItem";
import BagPage from "@/views/BagPage";
import CheckoutPage from "@/views/CheckoutPage";
import Purchase from "@/views/Purchase";
import CollectionPageNew from "@/views/CollectionPageNew";
import HomePage from "@/views/HomePage";
import Community from "@/views/Community";

Vue.use(VueRouter);

export default new VueRouter({
  // mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "HomePage",
      props: true,
      component: HomePage
    },
    {
      path: "/new",
      name: "CollectionPageNew",
      component: CollectionPageNew
    },
    {
      path: "/old",
      name: "CollectionPage",
      props: true,
      component: CollectionPage
    },
    {
      path: "/product/:id",
      name: "ProductPage",
      props: true,
      component: ProductItem
    },
    {
      path: "/shopping-bag",
      name: "ShoppingBag",
      component: BagPage
    },
    {
      path: "/checkout",
      name: "CheckoutPage",
      component: CheckoutPage
    },
    {
      path: "/purchase",
      name: "Purchase",
      component: Purchase
    },
    {
      path: "/community",
      name: "Community",
      component: Community
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
});
<file_sep>/src/store/seller/index.js
export default {
  state: {
    sellers: [
      {
        id: "1",
        name: "<NAME>",
        description:
          "I am a crochet and jewelry designer. | share my inner self with the world by creating things for people with love, care and attention to detail. My hope is for everyone to have at least one piece of unique handmade apparel that they can treasure, knowing it was made by someone who put their heart into it.",
        location: {
          country: "Russia",
          city: "Moscow",
          street: "per. Pushkina 12",
          zip: "12456"
        },
        rating: {
          count: 18,
          stars: 4.56
        }
      },
      {
        id: "2",
        name: "<NAME>",
        description:
          "I am a crochet and jewelry designer. | share my inner self with the world by creating things for people with love, care and attention to detail. My hope is for everyone to have at least one piece of unique handmade apparel that they can treasure, knowing it was made by someone who put their heart into it.",
        location: {
          country: "Canada",
          city: "Ottava",
          street: "per. Pushkina 12",
          zip: "12456"
        },
        rating: {
          count: 17,
          stars: 1.83
        }
      },
      {
        id: "3",
        name: "<NAME>",
        description:
          "I am a crochet and jewelry designer. | share my inner self with the world by creating things for people with love, care and attention to detail. My hope is for everyone to have at least one piece of unique handmade apparel that they can treasure, knowing it was made by someone who put their heart into it.",
        location: {
          country: "Ukraine",
          city: "Kharkiv",
          street: "per. Pushkina 12",
          zip: "12456"
        },
        rating: {
          count: 34,
          stars: 2.34
        }
      },
      {
        id: "4",
        name: "<NAME>",
        description:
          "I am a crochet and jewelry designer. | share my inner self with the world by creating things for people with love, care and attention to detail. My hope is for everyone to have at least one piece of unique handmade apparel that they can treasure, knowing it was made by someone who put their heart into it.",
        location: {
          country: "Italy",
          city: "Milan",
          street: "per. Pushkina 12",
          zip: "12456"
        },
        rating: {
          count: 9,
          stars: 4.86
        }
      }
    ]
  },
  mutations: {
    // addNewFieldToBag(state, id, fieldName, value){
    //   console.log(id, fieldName, value);
    //   state.productInBag.forEach((prodInBag) => {
    //     if (prodInBag.id == id) {
    //       prodInBag[fieldName] = value;
    //     }
    //   });
    //   localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    // }
  },
  actions: {
    // addProductToBag({ commit, state }, product) {
    //   commit("addToBag", product);
    //   localStorage.setItem("userBag", JSON.stringify(state.productInBag));
    // }
  },
  getters: {
    getSellers(state) {
      return state.sellers;
    },
    getSeller(state) {
      return sellerId => {
        return state.sellers.find(seller => {
          return seller.id == sellerId;
        });
      };
    }
  }
};
<file_sep>/src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import VueAwesomeSwiper from "vue-awesome-swiper";
import VueCardFormat from "vue-credit-card-validation";

import Notifications from "vue-notification";

import SwiperCore, { Autoplay, EffectFade } from 'swiper';

// Import Swiper styles
import 'swiper/swiper.scss';
import 'swiper/components/navigation/navigation.scss';
import 'swiper/components/pagination/pagination.scss';
import 'swiper/components/scrollbar/scrollbar.scss';
import "swiper/swiper-bundle.css";

// install Swiper components
SwiperCore.use([Autoplay, EffectFade]);

import "./directives/index.js";

Vue.use(BootstrapVue);
Vue.use(VueAwesomeSwiper);
Vue.use(IconsPlugin);
Vue.use(VueCardFormat);

Vue.use(Notifications);

// Import Bootstrap and Bootstrap-Vue css
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";



Vue.config.productionTip = false;

new Vue({
  router,
  store,
  beforeCreate() {
    this.$store.commit("initialiseUserBag");
    this.$store.commit("initialiseShoppingType");
  },
  render: h => h(App),
  created() {
    this.$store.dispatch("loadProducts");
  }
}).$mount("#app");
