Skip to content

Instantly share code, notes, and snippets.

View lkostrowski's full-sized avatar
🇺🇦

Lukasz Ostrowski lkostrowski

🇺🇦
View GitHub Profile
@lkostrowski
lkostrowski / product.vue
Last active April 4, 2017 10:32
product html
<template>
<li class="basket-product">
<img :src="productData.imagePath" class="basket-product__image | image">
<div class="basket-product__info">
<span class="basket-product__brand">{{productData.brand}}</span>
<span class="basket-product__name">{{productData.name}}</span>
<span class="basket-product__product-number">{{productData.itemId}}</span>
<span class="basket-product__color">{{productData.color}}</span>
</div>
<template>
<ul class="products-list">
<slot v-if="!products.length" name="empty-basket"></slot>
<loader v-if="!loaded"></loader>
<basket-product v-else
v-for="(product, index) in products"
:key="index"
:product-data="product"
class="products-list__product">
</basket-product>
import Vue from 'Vue';
const eventBus = new Vue();
export default eventBus;
import eventHub from 'services/_eventBus';
const cartRequestUrl = '/get/basket' // Url to our backend
function getBasket( ) {
eventHub.$emit('basket:loading'); // Emit loading so components can show loaders
// Make api call
axios.get( cartRequestUrl ).then( ( response ) => {
emitBasketUpdate(response.data);
<template>
... template is the same
</template>
<script>
import eventBus from 'services/event-bus'
export default {
name: 'products-list',
data() {
<template>
<li class="basket-product">
<img :src="productData.imagePath" class="basket-product__image | image">
<div class="basket-product__info">
<span class="basket-product__brand">{{productData.brand}}</span>
<span class="basket-product__name">{{productData.name}}</span>
<span class="basket-product__product-number">{{productData.itemId}}</span>
<span class="basket-product__color">{{productData.color}}</span>
</div>
<template>
<ul class="products-list">
<slot v-if="!products.length" name="empty-basket"></slot>
<loader v-if="!loaded"></loader>
<basket-product v-else
v-for="(product, index) in products"
:key="index"
:product-data="product"
class="products-list__product"
@remove="_removeProductHandler">
import eventBus from 'services/eventBus';
const deleteApiUrl = '/delete/product/';
function removeProduct(id) {
axios.delete(deleteApiUrl + id)
.then((response) => {
emitBasketChange();
});
@lkostrowski
lkostrowski / input.vue
Last active April 14, 2017 15:57
Input in vue.js
import createRandomId from 'utilities/helpers/createRandomId';
<template>
<div class="input">
<div class="input__field-container" >
<label
:for="thisId" class="input__label"
:class="required ? 'input__label--required' : '' ">{{label}}</label>
<input
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
"@babel/[email protected]":
version "7.0.0-beta.44"
resolved "http://registry.npmjs.org/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
dependencies:
"@babel/highlight" "7.0.0-beta.44"