-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
212 additions
and
313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,48 @@ | ||
| <template> | ||
| <section v-if="!$apollo.loading" class="fixed top-0 right-0 h-screen p-12 bg-white shadow-lg w-96"> | ||
| <CloseCart /> | ||
| <pre class="text-xs" v-if="cart">{{ cart }}</pre> | ||
| <pre class="text-xs" v-if="viewer">{{ viewer }}</pre> | ||
| <button @click="getUser">Get User</button> | ||
| </section> | ||
| <section v-if="!$apollo.loading" class="fixed top-0 right-0 h-screen p-12 bg-white shadow-lg w-96"> | ||
| <CloseCart /> | ||
| <pre class="text-xs" v-if="cart">{{ cart }}</pre> | ||
| <pre class="text-xs" v-if="viewer">{{ viewer }}</pre> | ||
| <button @click="getUser">Get User</button> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| import { gql } from "nuxt-graphql-request"; | ||
| import getCart from "~/gql/queries/getCart"; | ||
| import { gql } from 'nuxt-graphql-request' | ||
| import getCart from '~/gql/queries/getCart' | ||
| const requestHeaders = { | ||
| "Content-Type": "application/json", | ||
| Accept: "application/json", | ||
| }; | ||
| 'Content-Type': 'application/json', | ||
| Accept: 'application/json' | ||
| } | ||
| export default { | ||
| data() { | ||
| return { | ||
| cart: null, | ||
| viewer: null, | ||
| }; | ||
| }, | ||
| async fetch() { | ||
| const cart = await this.$graphql.default.request(getCart); | ||
| this.cart = cart; | ||
| }, | ||
| methods: { | ||
| async getUser() { | ||
| const query = gql` | ||
| query { | ||
| viewer { | ||
| firstName | ||
| } | ||
| } | ||
| `; | ||
| data() { | ||
| return { | ||
| cart: null, | ||
| viewer: null | ||
| } | ||
| }, | ||
| async fetch() { | ||
| const cart = await this.$graphql.default.request(getCart) | ||
| this.cart = cart | ||
| }, | ||
| methods: { | ||
| async getUser() { | ||
| const query = gql` | ||
| query { | ||
| viewer { | ||
| firstName | ||
| } | ||
| } | ||
| ` | ||
| const data = await this.$graphql.default.rawRequest(query); | ||
| const cart = await this.$graphql.default.request(getCart); | ||
| this.cart = cart; | ||
| this.viewer = data.data.viewer; | ||
| console.log(data); | ||
| }, | ||
| }, | ||
| }; | ||
| const data = await this.$graphql.default.rawRequest(query) | ||
| const cart = await this.$graphql.default.request(getCart) | ||
| this.cart = cart | ||
| this.viewer = data.data.viewer | ||
| console.log(data) | ||
| } | ||
| } | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,66 +1,76 @@ | ||
| <template> | ||
| <div> | ||
| <div class="text-xs text-white bg-gray-600"> | ||
| <div class="container flex justify-between py-1.5"> | ||
| <div>NEXT DAY DELIVERY</div> | ||
| <nuxt-link to="/login" v-if="!this.$auth.loggedIn"> LOGIN / SIGN UP </nuxt-link> | ||
| <div @click="logOut" v-else>LOGOUT</div> | ||
| </div> | ||
| </div> | ||
| <Header /> | ||
| <transition name="slide"> | ||
| <Cart v-if="showCart" class="z-50" /> | ||
| </transition> | ||
| <transition name="page" mode="out-in"> | ||
| <Nuxt /> | ||
| </transition> | ||
| <transition name="page"> | ||
| <div v-if="showCart" class="fixed inset-0 bg-black opacity-25" @click="closeCart"></div> | ||
| </transition> | ||
| <Footer /> | ||
| </div> | ||
| <div> | ||
| <div class="text-xs text-white bg-gray-600"> | ||
| <div class="container flex justify-between py-1.5"> | ||
| <div>NEXT DAY DELIVERY</div> | ||
| <nuxt-link to="/login" v-if="!this.$auth.loggedIn"> LOGIN / SIGN UP </nuxt-link> | ||
| <div @click="logOut" v-else>LOGOUT</div> | ||
| </div> | ||
| </div> | ||
| <Header /> | ||
| <transition name="slide"> | ||
| <Cart v-if="showCart" class="z-50" /> | ||
| </transition> | ||
| <transition name="page" mode="out-in"> | ||
| <Nuxt /> | ||
| </transition> | ||
| <transition name="page"> | ||
| <div v-if="showCart" class="fixed inset-0 bg-black opacity-25" @click="closeCart"></div> | ||
| </transition> | ||
| <Footer /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| computed: { | ||
| showCart() { | ||
| return this.$store.state.showCart; | ||
| }, | ||
| }, | ||
| methods: { | ||
| closeCart() { | ||
| this.$store.commit("toggleCart", false); | ||
| }, | ||
| async logOut() { | ||
| const data = await this.$auth.logout(); | ||
| console.log(data); | ||
| }, | ||
| }, | ||
| }; | ||
| computed: { | ||
| showCart() { | ||
| return this.$store.state.showCart | ||
| } | ||
| }, | ||
| methods: { | ||
| closeCart() { | ||
| this.$store.commit('toggleCart', false) | ||
| }, | ||
| async logOut() { | ||
| const data = await this.$auth.logout() | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="postcss"> | ||
| .page-enter-active, | ||
| .page-leave-active { | ||
| transition: opacity 300ms ease-in-out; | ||
| transition: opacity 300ms ease-in-out; | ||
| } | ||
| .page-enter, | ||
| .page-leave-active { | ||
| opacity: 0; | ||
| opacity: 0; | ||
| } | ||
| body { | ||
| @apply bg-gray-50; | ||
| @apply bg-gray-50; | ||
| } | ||
| /* Enter and leave animations can use different */ | ||
| /* durations and timing functions. */ | ||
| .slide-leave-active, | ||
| .slide-enter-active { | ||
| transition: transform 400ms ease-in-out; | ||
| transition: transform 400ms ease-in-out; | ||
| } | ||
| .slide-enter, | ||
| .slide-leave-to { | ||
| transform: translateX(500px); | ||
| transform: translateX(500px); | ||
| } | ||
| .big-button { | ||
| @apply rounded inline-flex justify-center items-center text-sm leading-tight uppercase py-3 font-semibold; | ||
| box-shadow: 0 2px 0 #025e47, inset 0 0 8px rgb(255 210 0 / 10%), inset 0 1px 0 #37ff91, inset 0 -1px 0 #06c465; | ||
| background: linear-gradient(to bottom, #37ff91 0%, #06c465 100%) no-repeat 0, linear-gradient(to bottom, #37ff91 0%, #06c465 100%) no-repeat 100%, | ||
| #06994f linear-gradient(to bottom, #25ca85 0%, #057a40 100%) no-repeat; | ||
| background-size: 1px 100%, 1px 100%, cover; | ||
| color: #f9f5e1; | ||
| text-shadow: 0 -1px rgb(0 71 0 / 30%); | ||
| min-width: 200px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.