Skip to content

Instantly share code, notes, and snippets.

View dohomi's full-sized avatar
🎯
Focusing

Dominic Garms dohomi

🎯
Focusing
View GitHub Profile
@dohomi
dohomi / data-loader.js
Last active June 8, 2018 06:23
data-loader
export default{
name:"data-loader",
extends:ApolloQuery,
render(h){
if(isLoading){
return h('v-spinner')
}else if(hasError){
return h('v-alert',{},error)
}else{
// same logic as in ApolloQuery
@dohomi
dohomi / component.vue
Last active February 23, 2021 10:16
combine Nuxt asyncData with vue-apollo and watchQuery for client search
<script>
import allTravelsGql from '../../GQL/travel/allTravels.gql'
import {pagination, getSkipFirst} from '../../../generated-cms/util/pagination'
import {getTravelQuery, setCategoryOnQuery} from '../../util/getTravelQuery'
const buildQuery = variables => {
return {
query: allTravelsGql,
variables,
manual: true,
@dohomi
dohomi / FileContainer.vue
Last active January 13, 2019 09:23
File container for vuetify and graph.cool. It lists files provided by a prop with link to the public url. Below it shows a file upload field
<template>
<div>
<h3 class="subheading" v-if="!hideLabel">{{label}}</h3>
<v-list v-if="mediaList">
<v-list-tile v-for="(item,i) in mediaList" :key="i">
<v-list-tile-avatar @click="onItemClick(item.url)">
<img :src="item.url" :alt="item.name" :title="item.name"/>
</v-list-tile-avatar>
<v-list-tile-content @click="onItemClick(item.url)">
<v-list-tile-title>{{item.contentType}}</v-list-tile-title>
@dohomi
dohomi / InViewport.js
Last active September 7, 2017 03:47
In-Viewport component based on Vuetify v-scroll
import throttle from 'lodash.throttle'
export default {
name: 'in-viewport',
props: {
value: Boolean,
offset: {
type: Number,
default: 124 // might depends on the toolbar fixed...
}
<template>
<v-form ref="form" v-model="valid">
<slot></slot>
</v-form>
</template>
<script>
export default {
props: {
customElements: {
type: Array,
@dohomi
dohomi / async_select_vuetify.vue
Created August 10, 2017 01:01
simple autocomplete with debounce async search
<template>
<v-select
v-model="state"
label="Select"
:items="states"
@input.native="loadStates"
autocomplete
></v-select>
</template>
@dohomi
dohomi / apollo-mixin.js
Last active October 13, 2017 00:01
whitelabled store for VueJs + Vuex + apollo-client based on https://github.com/PierBover/vuex-apollo-example-project
export default {
methods: {
/**
*
* @returns {Promise.<void>}
*/
async onFormSubmit (model) {
if (model.id) {
await this.mutateApollo(this.gql.updateMutation, model, 'UPDATED')
} else {
@dohomi
dohomi / app.vue
Last active August 21, 2021 19:55
Small file input element based on vuetify
<template>
<file-input v-model="filename" @formData="formData">
<v-btn @click.native="uploadFiles">
</template>
<script>
import fileInput from './file-input.vue'
export default{
components:{fileInput}
@dohomi
dohomi / events.html
Last active May 6, 2016 08:37
angular-meteor with ui-calendar init
<div id="eventCalendar" ui-calendar="eventCtrl.calendarConfig" ng-model="eventCtrl.eventSources" calendar="eventCalendar"></div>
@dohomi
dohomi / button.tpl.html
Last active August 29, 2015 14:17
Include ng-mfb in combination with ngMaterial
<li>
<a href="" data-mfb-label="{{label}}" class=" md-button md-default-theme md-fab mfb-component__button--child"
ng-include="customContent">
<script type="text/ng-template" id="NGMFB_child-icon-template">
<i class="mfb-component__child-icon {{icon}}"></i>
</script>
</a>
</li>