Skip to content

Commit

Permalink
Completed the flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@WaqasArshad777
WaqasArshad777 committed Oct 19, 2017
1 parent 13238f9 commit 67dabdb
Show file tree
Hide file tree
Showing 16 changed files with 678 additions and 499 deletions.
2 changes: 1 addition & 1 deletion common/paramMapping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ function generateMenuObject (payload, edit = false) {
write_key: config.bucket.write_key,
type_slug: config.object_type,
title: payload.title,
content: payload.title,
content: payload.content,
metafields: [{
required: true,
value: JSON.stringify(payload.metadata.menu),
Expand Down
9 changes: 4 additions & 5 deletions common/request.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@ import async from 'async'
// import _ from 'lodash'
import {generateMenuObject} from './paramMapping'

function getMenus (pagination) {
function getMenus (date) {
return new Promise((resolve, reject) => {
const params = {
type_slug: config.object_type,
limit: pagination.limit,
sort: '-created_at',
skip: (pagination.page - 1) * pagination.limit
metafield_key: 'date',
metafield_value: date
}
Cosmic.getObjectsByType(config, params, (err, res) => {
Cosmic.getObjectsBySearch(config, params, (err, res) => {
if (!err) {
resolve(res)
} else {
Expand Down
169 changes: 102 additions & 67 deletions components/AddCategory.vue
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,87 @@
<template>
<v-layout row justify-center>
<v-dialog v-model="categoryModalOpen" persistent max-width="500px">
<v-card>
<v-card-title>
<span class="headline">{{ edittingCategory ? 'Edit ' : 'Add ' }} Category</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<div>
<div v-if="!edittingCategoryTitle" class="headline">
<span style="text-align:left" class="grey--text" >{{category.title}}</span>
<v-btn @click="editCategory(category)" icon style="height: 25px; width: 30px;">
<v-icon dark >fa-edit</v-icon>
</v-btn>
</div>
<v-flex v-else xs12 sm12 md12>
<v-text-field v-model="category.title" label="Title" :error-messages="errors.collect('title')" v-validate="'required'" data-vv-name="title" required></v-text-field>
<div style="color: red" v-show="categoryStatus.error" >
{{ categoryStatus.error }}
</div>
<small>*indicates required field</small>
<v-btn
color="info"
:loading="categoryStatus.loading"
@click="saveCategory(category)"
:disabled="categoryStatus.loading"
>
Save
<span slot="loader" class="custom-loader">
<v-icon light>fa-refresh</v-icon>
</span>
</v-btn>
</v-flex>
<b-modal :active.sync="categoryModalOpen" max-width="500px">
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ edittingCategory ? 'Edit ' : 'Add ' }} Category</p>
</header>
<section class="modal-card-body menu-modal-body">
<div class="field">
<b-field :message="errors.collect('title')">
<b-input
type="text"
v-model="category.title"
placeholder="Category Title"
v-validate="'required'" data-vv-name="title"
:disabled="!edittingCategoryTitle"
required>
</b-input>
</b-field>
<div v-show="categoryStatus.error" class="field is-danger" >
{{ categoryStatus.error }}
</div>
<v-container grid-list-md>
<label class="ingredients_list_label">Menu Items</label>
<v-flex v-if="category.menuItems" xs12 class="mb-2">
<div class="input-group input-group--dirty">
<ul class="ingredients_list">
<li v-for="(item,index) in category.menuItems" :key="index">
{{item.title}}
<v-btn @click="removeMenuItem(index)" icon style="height: 30px; width: 30px">
<v-icon dark >fa-trash-o</v-icon>
</v-btn>
<v-btn @click="editMenuItem(item, index)" icon style="height: 25px; width: 30px;">
<v-icon dark >fa-edit</v-icon>
</v-btn>
</li>
</ul>
<div class="field">
<p class="control">
<div v-if="!edittingCategoryTitle">
<button class="button is-info" @click="editCategory(category)">
Edit
</button>
</div>
<div v-if="menuItemModal">
<AddMenuItem />
<div v-else>
<button v-if="!categoryStatus.loading" class="button is-info is-medium" @click="saveCategory(category)" >Save</button>
<button v-else class="button is-info is-loading is-medium" @click="saveCategory(category)" disabled>Save</button>
</div>
<v-btn warning fab small dark @click="addMenuItemModal">
<v-icon>fa-plus</v-icon>
</v-btn>
</v-flex>
</v-container>
</v-layout>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" primary dark @click="closeDialog">Done</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</p>
</div>
</div>

<div >
<label class="label is-medium">Menu Items</label>
<div class="box" v-if="category.menuItems" v-for="(item,index) in category.menuItems" :key="index">
<article class="media">
<div class="media-left menu-item-image">
<figure class="image menu-item-image">
<img :src="item.feature_image.url" :alt="item.title" :title="item.title">
</figure>
</div>
<div class="media-content">
<div class="content">
<div class="columns menu-item-info">
<div class="column is-8">
<p>
<strong>{{item.title}}</strong>
<br>
{{item.content}}
</p>
</div>
<div class="column menu-item-price">
<p>${{item.price}}</p>
</div>
<div class="column menu-item-price">
<button class="button is-warning" @click="editMenuItem(item, index)">
Edit
</button>
<button class="button is-danger" @click="removeMenuItem(index)">
Delete
</button>
</div>
</div>
</div>
</div>
</article>
</div>
<div v-if="menuItemModal">
<AddMenuItem />
</div>
<button v-if="!menuItemModal" class="button is-warning" @click="addMenuItemModal">
Add
</button>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-medium" type="button" @click="closeDialog">Close</button>
</footer>
</div>
</b-modal>
</template>

<script>
Expand Down Expand Up @@ -131,4 +145,25 @@ export default {
}
}
}
</script>
</script>
<style lang="css" scoped>
.menu-item-image {
width: 80px;
height: 92px;
}
.menu-item-image img {
height: 100%;
width: auto;
}
.menu-item-info {
min-height: 92px;
justify-content: center;
align-items: center;
}
.menu-item-info .menu-item-price {
text-align: right;
font-weight: bold;
font-family: 'Dancing Script';
color: #1a1a1a;
}
</style>
63 changes: 26 additions & 37 deletions components/AddCategoryTitle.vue
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,30 @@
<template>
<v-layout row justify-center>
<v-dialog v-model="addCategoryTitle" persistent max-width="500px">
<v-card>
<v-card-title>
<span class="headline">{{ edittingCategoryTitle ? 'Edit ' : 'Add ' }} Category</span>
</v-card-title>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="category.title" label="Title" :error-messages="errors.collect('title')" v-validate="'required'" data-vv-name="title" required></v-text-field>
</v-flex>
</v-layout>
</v-container>
<div style="color: red" v-show="categoryStatus.error" >
{{ categoryStatus.error }}
</div>
<small>*indicates required field</small>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="closeDialog">Close</v-btn>
<v-btn
color="info"
:loading="categoryStatus.loading"
@click="saveCategory(category)"
:disabled="categoryStatus.loading"
>
Save
<span slot="loader" class="custom-loader">
<v-icon light>fa-refresh</v-icon>
</span>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
<b-modal :active.sync="addCategoryTitle" max-width="500px">
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">{{ edittingCategoryTitle ? 'Edit ' : 'Add ' }} Category Title</p>
</header>
<section class="modal-card-body menu-modal-body">
<b-field label="Title" :message="errors.collect('title')">
<b-input
type="text"
v-model="category.title"
placeholder="Category Title"
v-validate="'required'" data-vv-name="title"
required>
</b-input>
</b-field>
</section>
<footer class="modal-card-foot">
<div style="color: red" v-show="categoryStatus.error" >
{{ categoryStatus.error }}
</div>
<button class="button is-medium" type="button" @click="closeDialog">Close</button>
<button v-if="!categoryStatus.loading" class="button is-info is-medium" @click="saveCategory(category)" >Save</button>
<button v-else class="button is-info is-loading is-medium" @click="saveCategory(category)" disabled>Save</button>
</footer>
</div>
</b-modal>
</template>
<script>
import {mapGetters} from 'vuex'
Expand Down
Loading

0 comments on commit 67dabdb

Please sign in to comment.