summaryrefslogtreecommitdiff
path: root/iridescence/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src/components')
-rw-r--r--iridescence/src/components/BusyBar.vue20
-rw-r--r--iridescence/src/components/CartCheckout.vue38
-rw-r--r--iridescence/src/components/Footer.vue53
-rw-r--r--iridescence/src/components/Navbar.vue114
-rw-r--r--iridescence/src/components/ProductCard.vue74
-rw-r--r--iridescence/src/components/ProductDetail.vue135
-rw-r--r--iridescence/src/components/ProductFilter.vue52
-rw-r--r--iridescence/src/components/ProductList.vue32
-rw-r--r--iridescence/src/components/ProductSearch.vue88
-rw-r--r--iridescence/src/components/admin/NewProduct.vue58
-rw-r--r--iridescence/src/components/admin/ProductEditCard.vue282
-rw-r--r--iridescence/src/components/admin/ProductEditList.vue32
-rw-r--r--iridescence/src/components/cart/CartItem.vue89
-rw-r--r--iridescence/src/components/cart/Totals.vue28
-rw-r--r--iridescence/src/components/checkout/CheckoutForm.vue301
15 files changed, 0 insertions, 1396 deletions
diff --git a/iridescence/src/components/BusyBar.vue b/iridescence/src/components/BusyBar.vue
deleted file mode 100644
index a38cefa..0000000
--- a/iridescence/src/components/BusyBar.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
- <div id="busyBar">
- <progress
- class="progress is-small is-primary"
- max="100"
- v-if="isBusy"
- ></progress>
- </div>
-</template>
-
-<script>
-export default {
- name: "BusyBar",
- computed: {
- isBusy() {
- return this.$store.state.busy;
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/CartCheckout.vue b/iridescence/src/components/CartCheckout.vue
deleted file mode 100644
index 1b327b2..0000000
--- a/iridescence/src/components/CartCheckout.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
- <div id="cartCheckout">
- <div class="buttons has-addons">
- <router-link
- v-if="inCart"
- to="/cart"
- class="button is-success is-rounded"
- >
- <span class="iconify-inline" data-icon="mdi-cart"></span>
- <span>Checkout</span></router-link
- >
- <a v-else class="button is-static is-rounded">
- <span class="iconify-inline" data-icon="mdi-cart"></span>
- </a>
- <button class="button is-static">x{{ inCart }}</button>
- <button class="button is-static is-rounded">
- {{ cartTotal }}
- </button>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "CartCheckout",
- computed: {
- inCart() {
- return Object.values(this.$store.state.cart).reduce(
- (acc, cur) => acc + cur,
- 0
- );
- },
- cartTotal() {
- return this.$store.getters.cartTotal;
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/Footer.vue b/iridescence/src/components/Footer.vue
deleted file mode 100644
index 8210c62..0000000
--- a/iridescence/src/components/Footer.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
- <div id="footer">
- <footer class="footer">
- <nav class="level">
- <div class="level-item has-text-centered">
- <ul>
- <li>
- <a
- class="navbar-item"
- target="_blank"
- href="https://www.facebook.com/glassyladiesart"
- >
- <span class="iconify-inline" data-icon="mdi-facebook"></span>
- <span>Like Us on Facebook</span>
- </a>
- </li>
- <li>
- <a
- class="navbar-item"
- target="_blank"
- href="mailto:liz@theglassyladies.com"
- >
- <span class="iconify-inline" data-icon="mdi-email"></span>
- <span>Write to Us</span>
- </a>
- </li>
- </ul>
- </div>
-
- <div class="level-item has-text-centered">
- <ul>
- <li>&copy; {{ year }} The Glassy Ladies, LLC</li>
- <li>
- Experiencing issues?
- <a href="mailto:webmaster@theglassyladies.com">Let us know.</a>
- </li>
- </ul>
- </div>
- </nav>
- </footer>
- </div>
-</template>
-
-<script>
-export default {
- name: "Footer",
- data() {
- return {
- year: new Date().getFullYear()
- };
- }
-};
-</script>
diff --git a/iridescence/src/components/Navbar.vue b/iridescence/src/components/Navbar.vue
deleted file mode 100644
index 3a3390c..0000000
--- a/iridescence/src/components/Navbar.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<template>
- <div id="navbar">
- <nav class="navbar is-fixed-top is-primary">
- <div class="navbar-brand">
- <router-link to="/" class="navbar-item">
- <img src="@/assets/logo_sm.png" />
- <div class="navbar-item">
- <span style="color: white">
- The Glassy Ladies
- </span>
- </div>
- </router-link>
- <a class="navbar-burger burger" v-on:click="toggleNavMenu">
- <span></span>
- <span></span>
- <span></span>
- </a>
- </div>
- <div :class="navMenu">
- <div class="navbar-start">
- <router-link to="/faq" class="navbar-item">
- F.A.Q.
- </router-link>
- <router-link to="/about" class="navbar-item">
- About Us
- </router-link>
- <router-link to="/care" class="navbar-item">
- Care & Handling
- </router-link>
- <router-link to="/privacy" class="navbar-item">
- Privacy Policy
- </router-link>
- <router-link to="/admin" class="navbar-item">
- Inventory
- </router-link>
- </div>
-
- <transition
- mode="out-in"
- enter-active-class="animate__animated animate__flipInX"
- leave-active-class="animate__animated animate__flipOutX"
- >
- <div
- class="navbar-end"
- v-if="routeName != 'Administration'"
- key="cartCheckout"
- >
- <div
- class="navbar-item has-dropdown is-active"
- v-for="category in categories"
- :key="category"
- >
- <div class="navbar-link">
- {{ category }}
- </div>
- </div>
-
- <div class="navbar-item">
- <CartCheckout></CartCheckout>
- </div>
- </div>
- </transition>
- </div>
- </nav>
- </div>
-</template>
-
-<script>
-import CartCheckout from "@/components/CartCheckout.vue";
-
-export default {
- name: "Navbar",
- components: {
- CartCheckout
- },
- data() {
- return {
- isMenuActive: false
- };
- },
- computed: {
- navMenu() {
- if (this.isMenuActive) {
- return "navbar-menu is-active";
- } else {
- return "navbar-menu";
- }
- },
- categories() {
- //const raw = this.$store.getters.products.map(p => p.category.split("/"));
- //const raw = [
- // [1, 2, 3],
- // [1, 2, 4],
- // [1, 5],
- // [6, 7]
- //];
- return [];
- },
- routeName() {
- return this.$route.name;
- }
- },
- methods: {
- generateCategories() {
- let results = [];
-
- return results;
- },
- toggleNavMenu() {
- this.isMenuActive = !this.isMenuActive;
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/ProductCard.vue b/iridescence/src/components/ProductCard.vue
deleted file mode 100644
index 144dd9e..0000000
--- a/iridescence/src/components/ProductCard.vue
+++ /dev/null
@@ -1,74 +0,0 @@
-<template>
- <div id="productCard">
- <div class="card">
- <div class="card-image">
- <figure class="image is-square">
- <a @click="setDetailId">
- <img :src="thumbnail" :alt="name" title="Click to expand." />
- </a>
- </figure>
- </div>
- <div class="card-content">
- <div class="content">
- <p class="title is-4">
- <a @click="setDetailId">
- {{ name }}
- </a>
- </p>
- <p class="subtitle is-4">
- {{ dollars }}
- </p>
- <p class="subtitle is-6">{{ stock }}</p>
- </div>
-
- <div class="content">
- {{ shortDescription }}
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "ProductCard",
- props: {
- id: Number,
- name: String,
- quantity: Number,
- cents: Number,
- photo_thumbnail: String,
- photo_base: String,
- photo_fullsize: String,
- description: String
- },
- computed: {
- stock() {
- if (this.quantity == 0) {
- return "Made to order";
- } else {
- return [this.quantity, "in stock"].join(" ");
- }
- },
- dollars() {
- return "$ " + (this.cents / 100).toFixed(2);
- },
- thumbnail() {
- return process.env.VUE_APP_IMAGE_ROOT + this.photo_thumbnail;
- },
- shortDescription() {
- let description = this.description.split(" ");
- if (description.length < 10) {
- return this.description;
- } else {
- return description.splice(0, 10).join(" ") + "…";
- }
- }
- },
- methods: {
- setDetailId() {
- this.$store.commit("productDetailId", this.id);
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/ProductDetail.vue b/iridescence/src/components/ProductDetail.vue
deleted file mode 100644
index a67e39f..0000000
--- a/iridescence/src/components/ProductDetail.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
- <div id="productDetail">
- <div v-if="product" class="modal is-active">
- <div @click="clearDetailId" class="modal-background"></div>
- <div class="modal-content">
- <div class="card">
- <div class="card-image">
- <figure class="image ">
- <a target="_blank" :href="fullsize">
- <img
- :src="base"
- :alt="product.name"
- title="Click for fullsize"
- />
- </a>
- </figure>
- </div>
-
- <div class="card-content">
- <div class="columns">
- <div class="column">
- <p class="title">
- {{ product.name }}
- </p>
- <nav class="breadcrumb">
- <ul>
- <li v-for="category in categories" :key="category">
- {{ category }}
- </li>
- </ul>
- </nav>
- <p>
- {{ product.description }}
- </p>
- </div>
- <div class="column is-one-third">
- <p class="subtitle">{{ dollars }}</p>
- <p class="subtitle">{{ stock }}</p>
- <div v-if="inCart" class="field has-addons">
- <p class="control is-expanded">
- <a
- class="button is-static is-fullwidth is-rounded is-medium"
- >
- {{ inCart }} in cart
- </a>
- </p>
- <div class="control">
- <a
- @click="incrementCartQuantity(-1)"
- class="button is-info is-medium"
- >
- <span
- class="iconify-inline"
- data-icon="mdi-cart-minus"
- ></span>
- </a>
- </div>
- <div class="control">
- <a
- @click="incrementCartQuantity(1)"
- class="button is-info is-rounded is-medium"
- >
- <span
- class="iconify-inline"
- data-icon="mdi-cart-plus"
- ></span>
- </a>
- </div>
- </div>
- <button
- v-else
- @click="incrementCartQuantity(1)"
- class="button is-success is-fullwidth is-rounded is-medium"
- >
- <span
- class="iconify-inline"
- data-icon="mdi-cart-arrow-down"
- ></span>
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div @click="clearDetailId" class="modal-close is-large"></div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "ProductDetail",
- computed: {
- inCart() {
- return this.$store.state.cart[this.product.id];
- },
- product() {
- return this.$store.getters.products.find(
- p => p.id == this.$store.state.productDetailId
- );
- },
- stock() {
- if (this.product.quantity == 0) {
- return "Made to order";
- } else {
- return [this.product.quantity, "in stock"].join(" ");
- }
- },
- dollars() {
- return "$ " + (this.product.cents / 100).toFixed(2);
- },
- base() {
- return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_base].join("");
- },
- fullsize() {
- return [process.env.VUE_APP_IMAGE_ROOT, this.product.photo_fullsize].join(
- ""
- );
- },
- categories() {
- let categories = this.product.category.split("/");
- categories.splice(0, 1, "All");
- return categories;
- }
- },
- methods: {
- clearDetailId() {
- this.$store.commit("productDetailId", 0);
- },
- incrementCartQuantity(by) {
- this.$store.commit("cartItem", { id: this.product.id, by });
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/ProductFilter.vue b/iridescence/src/components/ProductFilter.vue
deleted file mode 100644
index 6fdd461..0000000
--- a/iridescence/src/components/ProductFilter.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
- <div id="productFilter">
- <aside class="menu">
- <p class="menu-label">
- Availability
- </p>
- <ul class="menu-list">
- <li>
- <label class="radio">
- <input type="radio" name="availability" />
- In stock
- </label>
- </li>
- <li>
- <label class="radio">
- <input type="radio" name="availability" />
- Made to order
- </label>
- </li>
- </ul>
- <p class="menu-label">
- Category
- </p>
- <ul class="menu-list">
- <li>
- <label class="radio">
- <input type="radio" name="category" />
- Garden
- </label>
- </li>
- <li>
- <label class="radio">
- <input type="radio" name="category" />
- Beach
- </label>
- </li>
- <li>
- <label class="radio">
- <input type="radio" name="category" />
- Pets
- </label>
- </li>
- </ul>
- </aside>
- </div>
-</template>
-
-<script>
-export default {
- name: "ProductFilter"
-};
-</script>
diff --git a/iridescence/src/components/ProductList.vue b/iridescence/src/components/ProductList.vue
deleted file mode 100644
index bed37b3..0000000
--- a/iridescence/src/components/ProductList.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
- <div id="productsList">
- <div class="columns is-multiline is-variable is-7-desktop">
- <div
- class="column is-one-quarter"
- v-for="product in products"
- :key="product.id"
- >
- <ProductCard v-bind="product"></ProductCard>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import ProductCard from "@/components/ProductCard.vue";
-
-export default {
- name: "ProductsList",
- components: {
- ProductCard
- },
- computed: {
- products() {
- return this.$store.getters.products;
- }
- },
- created() {
- this.$store.dispatch("refreshProducts");
- }
-};
-</script>
diff --git a/iridescence/src/components/ProductSearch.vue b/iridescence/src/components/ProductSearch.vue
deleted file mode 100644
index f60931c..0000000
--- a/iridescence/src/components/ProductSearch.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
- <div id="productSearch">
- <div class="field is-grouped is-grouped-multiline">
- <div class="control is-expanded has-icons-left">
- <input
- class="input is-medium is-primary is-rounded"
- type="search"
- placeholder="Find something in particular..."
- v-model.trim="term"
- @input="updateSearch"
- autofocus
- />
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-magnify"></span>
- </span>
- </div>
- <div class="control has-icons-left">
- <div class="select is-medium is-primary is-rounded">
- <select v-model="sortOptionName" @change="updateSort">
- <option v-for="name in sortOptionNames" :key="name" :value="name">
- {{ name }}
- </option>
- </select>
- </div>
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-sort"></span>
- </span>
- </div>
- </div>
- <content class="has-text-centered" v-if="noResults">
- <p>
- Couldn't find what you're looking for?
- <a
- href="mailto:liz@theglassyladies.com?subject=Custom Order Request&body=Please describe what you are looking for and we will be in touch."
- >We do custom orders too!</a
- >
- </p>
- </content>
- </div>
-</template>
-
-<script>
-export default {
- name: "ProductSearch",
- data() {
- return {
- term: "",
- searchTimer: function() {},
- sortOptions: {
- "Featured Items": a => (a.featured ? -1 : 1),
- "In Stock": (a, b) => a.quantity < b.quantity,
- "Made to Order": (a, b) => a.quantity > b.quantity,
- "A to Z": (a, b) => a.name > b.name,
- "Z to A": (a, b) => a.name < b.name,
- "Newest to Oldest": (a, b) => a.id < b.id,
- "Oldest to Newest": (a, b) => a.id > b.id,
- "Price (Low to High)": (a, b) => a.cents > b.cents,
- "Price (High to Low)": (a, b) => a.cents < b.cents
- },
- sortOptionName: String
- };
- },
- created: function() {
- this.sortOptionName = this.sortOptionNames[0];
- },
- computed: {
- sortOptionNames() {
- return Object.keys(this.sortOptions);
- },
- noResults() {
- return !this.$store.getters.products.length && !this.$store.getters.busy;
- }
- },
- methods: {
- updateSearch() {
- clearTimeout(this.searchTimer);
- this.timeout = setTimeout(() => {
- this.$store.commit("searchTerm", this.term);
- }, 1000);
- },
- updateSort() {
- this.$store.commit("compare", this.sortOptions[this.sortOptionName]);
- }
- }
-};
-</script>
-
-
diff --git a/iridescence/src/components/admin/NewProduct.vue b/iridescence/src/components/admin/NewProduct.vue
deleted file mode 100644
index a1d3304..0000000
--- a/iridescence/src/components/admin/NewProduct.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
- <div id="addNewProduct">
- <button class="button is-primary is-medium is-rounded" @click="toggleModal">
- + Add New
- </button>
- <transition
- enter-active-class="animate__animated animate__fadeIn animate__faster"
- leave-active-class="animate__animated animate__fadeOut animate__faster"
- >
- <div class="modal is-active" v-if="modalEnabled">
- <div class="modal-background"></div>
- <div
- class="modal-card animate__animated animate__slideInDown animate__faster"
- >
- <header class="modal-card-head">
- <p class="modal-card-title">Add a new product</p>
- <button class="delete" @click="toggleModal"></button>
- </header>
- <section class="modal-card-body">
- <ProductEditCard v-bind:oldid="-1"></ProductEditCard>
- </section>
- <footer class="modal-card-foot"></footer>
- </div>
- </div>
- </transition>
- </div>
-</template>
-
-<script>
-import ProductEditCard from "@/components/admin/ProductEditCard";
-
-export default {
- name: "NewProduct",
- components: {
- ProductEditCard
- },
- data: function() {
- return {
- modalEnabled: false
- };
- },
- computed: {
- numProducts: function() {
- return this.$store.getters.products.length;
- }
- },
- watch: {
- numProducts: function() {
- this.modalEnabled = false;
- }
- },
- methods: {
- toggleModal() {
- this.modalEnabled = !this.modalEnabled;
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/admin/ProductEditCard.vue b/iridescence/src/components/admin/ProductEditCard.vue
deleted file mode 100644
index 603cb4f..0000000
--- a/iridescence/src/components/admin/ProductEditCard.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<template>
- <div id="productEditCard">
- <div class="card">
- <div class="card-header">
- <p class="card-header-title" v-if="old.id">
- {{ old.id }}: {{ old.name }}
- </p>
- </div>
- <div class="card-image">
- <figure v-if="old.id" class="image is-square">
- <img :src="thumbnail" :alt="name" />
- </figure>
- </div>
- <div class="card-content">
- <div class="field">
- <div class="file has-name is-boxed is-centered is-fullwidth ">
- <label class="file-label">
- <input
- class="file-input"
- type="file"
- name="image"
- accept=".jpg,.jpeg,.JPG,.JPEG"
- @change="changePhotoSet"
- />
- <span class="file-cta">
- <span class="file-label has-text-centered">
- <p v-if="old.photo_thumbnail">
- Replace Photo
- </p>
- <p v-else>
- Upload Photo
- </p>
- </span>
- </span>
- <span v-if="filename" class="file-name">
- {{ filename }}
- </span>
- <span v-else class="file-name">
- {{ old.photo_thumbnail }}
- </span>
- </label>
- </div>
- </div>
- <div class="field">
- <input
- class="input"
- type="text"
- placeholder="(product name)"
- v-model="name"
- />
- </div>
- <div class="field">
- <input
- class="input"
- type="text"
- placeholder="(product category)"
- v-model="category"
- />
- </div>
- <div class="field has-addons">
- <p class="control">
- <a class="button is-static">
- #
- </a>
- </p>
- <p class="control is-expanded">
- <input
- class="input"
- type="text"
- placeholder="inventory (quantity)"
- v-model="quantity"
- />
- </p>
- <div class="control">
- <a
- class="button is-info is-outlined"
- @click="incrementQuantity(-1)"
- >
- ▼
- </a>
- </div>
- <div class="control">
- <a class="button is-info is-outlined" @click="incrementQuantity(1)">
- ▲
- </a>
- </div>
- </div>
- <div class="field has-addons">
- <p class="control">
- <a class="button is-static">
- $
- </a>
- </p>
- <p class="control is-expanded">
- <input
- class="input"
- type="text"
- placeholder="price"
- v-model="price"
- />
- </p>
- </div>
- <div class="field">
- <textarea
- class="textarea"
- type="text"
- placeholder="(product description)"
- v-model="description"
- >
- </textarea>
- </div>
- <div class="field">
- <label class="checkbox">
- <input type="checkbox" v-model="featured" />
- Featured?
- </label>
- </div>
- </div>
- <div class="card-footer" v-if="isValidPost || isValidPatch">
- <div class="card-footer-item">
- <button class="button is-primary is-fullwidth" @click="saveProduct">
- Save
- </button>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "ProductEditCard",
- data: function() {
- return {
- filename: "",
- diff: {}
- };
- },
- props: {
- oldid: {
- type: Number,
- required: true
- }
- },
- created() {
- this.diff = {
- id: (this.old && this.old.id) || null,
- name: null,
- description: null,
- cents: null,
- quantity: (this.old && this.old.quantity) || 0,
- category_path: null,
- featured:
- this.old && typeof this.old.featured === "boolean"
- ? this.old.featured
- : false,
- photo_set: null
- };
- },
- computed: {
- thumbnail: function() {
- return process.env.VUE_APP_IMAGE_ROOT + this.old.photo_thumbnail;
- },
- old: function() {
- return this.$store.getters.products.find(p => p.id == this.oldid) || {};
- },
- id: function() {
- return this.diff.id || this.old.id;
- },
- name: {
- get: function() {
- return this.diff.name || this.old.name;
- },
- set: function(name) {
- this.diff.name = name;
- }
- },
- description: {
- get: function() {
- return this.diff.description || this.old.description;
- },
- set: function(description) {
- this.diff.description = description;
- }
- },
- category: {
- get: function() {
- return this.diff.category_path || this.old.category;
- },
- set: function(category) {
- this.diff.category_path = category;
- }
- },
- featured: {
- get: function() {
- return this.diff.featured;
- },
- set: function(featured) {
- this.diff.featured = featured;
- }
- },
- price: {
- get: function() {
- const cents = this.diff.cents || this.old.cents || 0;
- return (cents / 100).toFixed(0);
- },
- set: function(dollars) {
- const cents = dollars * 100;
- if (isFinite(cents)) {
- this.diff.cents = cents;
- }
- }
- },
- quantity: {
- get: function() {
- return this.diff.quantity || this.old.quantity || 0;
- },
- set: function(quantity) {
- if (Number.isFinite(quantity)) {
- this.diff.quantity = quantity;
- }
- }
- },
- isValidPost: function() {
- return (
- !this.diff.id &&
- this.diff.name &&
- this.diff.description &&
- Number.isFinite(this.diff.cents) &&
- Number.isFinite(this.diff.quantity) &&
- this.diff.photo_set &&
- this.diff.category_path &&
- typeof this.featured === "boolean"
- );
- },
- isValidPatch: function() {
- return (
- this.diff.id &&
- (this.diff.photo_set ||
- (this.diff.name && this.diff.name != this.old.name) ||
- (Number.isFinite(this.diff.cents) &&
- this.diff.cents != this.old.cents) ||
- (this.diff.category_path &&
- this.diff.category_path != this.old.category) ||
- (Number.isFinite(this.diff.quantity) &&
- this.diff.quantity != this.old.quantity) ||
- (this.diff.description &&
- this.diff.description != this.old.description) ||
- this.diff.featured != this.old.featured)
- );
- }
- },
- methods: {
- incrementQuantity(by) {
- if (this.quantity + by >= 0) {
- this.diff.quantity += by;
- }
- },
- saveProduct() {
- if (this.id) {
- // update existing
- this.$store.dispatch("updateProduct", this.diff);
- } else {
- // new product
- this.$store.dispatch("createProduct", this.diff);
- }
-
- this.diff.photo_set = null;
- },
- changePhotoSet(event) {
- const file = event.target.files[0];
- if (!file) {
- return;
- }
- this.$store.dispatch("createPhotoSet", file).then(r => {
- this.filename = file.name;
- this.diff.photo_set = r[0].id;
- });
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/admin/ProductEditList.vue b/iridescence/src/components/admin/ProductEditList.vue
deleted file mode 100644
index 91c0929..0000000
--- a/iridescence/src/components/admin/ProductEditList.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
- <div id="productEditList">
- <div class="columns is-multiline is-variable is-desktop">
- <div
- class="column is-one-third-desktop"
- v-for="product in products"
- :key="product.id"
- >
- <ProductEditCard v-bind:oldid="product.id"></ProductEditCard>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import ProductEditCard from "@/components/admin/ProductEditCard.vue";
-
-export default {
- name: "ProductsList",
- components: {
- ProductEditCard
- },
- computed: {
- products() {
- return this.$store.getters.products;
- }
- },
- created() {
- this.$store.dispatch("refreshProducts");
- }
-};
-</script>
diff --git a/iridescence/src/components/cart/CartItem.vue b/iridescence/src/components/cart/CartItem.vue
deleted file mode 100644
index 20ddec8..0000000
--- a/iridescence/src/components/cart/CartItem.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
- <div>
- <hr />
- <nav class="level">
- <div class="level-left">
- <div class="level-item">
- <p class="image is-64x64">
- <img :src="thumbnail" :title="product.name" />
- </p>
- </div>
- <div class="level-item">
- <div class="content">
- <strong>
- <p>
- {{ product.name }}
- </p>
- </strong>
- </div>
- </div>
- </div>
- <div class="level-right">
- <div class="level-item">Subtotal: {{ dollars }}</div>
- <div class="level-item">
- <div class="field has-addons">
- <p class="control is-expanded">
- <a class="button is-static is-fullwidth is-rounded">
- {{ inCart }} in cart
- </a>
- </p>
- <div class="control">
- <a
- @click="incrementCartQuantity(-1)"
- class="button is-info is-rounded"
- >
- <span class="iconify-inline" data-icon="mdi-cart-minus"></span>
- </a>
- </div>
- <div class="control">
- <a
- @click="incrementCartQuantity(1)"
- class="button is-info is-rounded"
- >
- <span class="iconify-inline" data-icon="mdi-cart-plus"></span>
- </a>
- </div>
- </div>
- </div>
-
- <div class="level-item">
- <button class="button is-danger is-rounded" @click="removeAll">
- <span class="iconify-inline" data-icon="mdi-cart-remove"></span>
- <span>Remove</span>
- </button>
- </div>
- </div>
- </nav>
- </div>
-</template>
-
-<script>
-export default {
- name: "CartItem",
- props: {
- id: Number,
- inCart: Number
- },
- computed: {
- product() {
- return this.$store.state.products.find(p => p.id == this.id);
- },
- dollars() {
- return "$ " + ((this.product.cents * this.inCart) / 100).toFixed(2);
- },
- thumbnail() {
- return (
- process.env.VUE_APP_IMAGE_ROOT + "/" + this.product.photo_thumbnail
- );
- }
- },
- methods: {
- incrementCartQuantity(by) {
- this.$store.commit("cartItem", { id: this.id, by });
- },
- removeAll() {
- this.$store.commit("removeItemFromCart", this.id);
- }
- }
-};
-</script>
diff --git a/iridescence/src/components/cart/Totals.vue b/iridescence/src/components/cart/Totals.vue
deleted file mode 100644
index 36c9e77..0000000
--- a/iridescence/src/components/cart/Totals.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
- <div>
- <h1 class="subtitle has-text-centered">
- Total
- </h1>
- <hr />
-
- <h1 class="title has-text-centered">{{ cartTotal }}</h1>
- <router-link
- to="/checkout"
- class="button is-success is-fullwidth is-rounded is-medium"
- >
- Continue to Checkout
- </router-link>
- </div>
-</template>
-
-<script>
-export default {
- name: "Totals",
- computed: {
- cartTotal() {
- return this.$store.getters.cartTotal;
- }
- },
- methods: {}
-};
-</script>
diff --git a/iridescence/src/components/checkout/CheckoutForm.vue b/iridescence/src/components/checkout/CheckoutForm.vue
deleted file mode 100644
index 482baec..0000000
--- a/iridescence/src/components/checkout/CheckoutForm.vue
+++ /dev/null
@@ -1,301 +0,0 @@
-<template>
- <div class="container">
- <form action="#">
- <section class="section">
- <h1 class="title">Customer Info</h1>
- <hr />
-
- <div class="columns">
- <div class="column">
- <div class="field">
- <label for="firstName" class="label">First Name</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.firstName"
- id="firstName"
- class="input is-rounded"
- type="text"
- required
- />
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-card-account-details"
- ></span>
- </span>
- </div>
- </div>
- <div class="field">
- <label class="label">Last Name</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.lastName"
- class="input is-rounded"
- type="text"
- required
- />
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-card-account-details"
- ></span>
- </span>
- </div>
- </div>
-
- <div class="field">
- <label class="label">Email Address</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.email"
- class="input is-rounded"
- type="email"
- required
- />
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-email"></span>
- </span>
- </div>
- <p class="help">Example: you@example.com</p>
- </div>
-
- <div class="field">
- <label class="label">Phone Number</label>
- <div class="control has-icons-left">
- <input
- v-model="formData.phone"
- class="input is-rounded"
- type="tel"
- pattern="[0-9]{10}"
- required
- />
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-phone-classic"
- ></span>
- </span>
- </div>
- <p class="help">Example: 7571234567</p>
- </div>
-
- <label class="checkbox">
- <input v-model="formData.sms" type="checkbox" />
- <span class="iconify" data-icon="mdi-cellphone-android"></span>
- May we text order updates and questions to this number?
- </label>
- </div>
- <div class="column">
- <label class="label">Location</label>
- <div class="field has-addons">
- <div class="control has-icons-left">
- <div class="select is-rounded">
- <select required>
- <option selected>USA</option>
- </select>
- </div>
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-flag-variant"
- ></span>
- </span>
- </div>
-
- <div class="control has-icons-left">
- <div class="select is-rounded">
- <select v-model="formData.state" required>
- <option v-for="state in states" :key="state">{{
- state
- }}</option>
- </select>
- </div>
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-map"></span>
- </span>
- </div>
- </div>
- <p class="help">
- If you are located outside of the United States, please
- <a href="mailto:liz@theglassyladies.com"
- >contact us directly regarding your order</a
- >
- </p>
-
- <div class="field">
- <label class="label">Address</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.address1"
- class="input is-rounded"
- type="text"
- required
- />
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-road-variant"
- ></span>
- </span>
- </div>
- </div>
- <div class="field">
- <label class="label">Address 2 (Optional)</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.address2"
- class="input is-rounded"
- type="text"
- />
- <span class="icon is-left">
- <span
- class="iconify-inline"
- data-icon="mdi-format-list-numbered"
- ></span>
- </span>
- </div>
- </div>
-
- <div class="field">
- <label class="label">City</label>
- <div class="control has-icons-left">
- <input
- v-model="formData.city"
- class="input is-rounded"
- type="text"
- required
- />
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-city"></span>
- </span>
- </div>
- </div>
-
- <div class="field">
- <label class="label">Zip Code</label>
-
- <div class="control has-icons-left">
- <input
- v-model="formData.zip"
- class="input is-rounded"
- type="text"
- pattern="[0-9]{5}"
- required
- />
- <span class="icon is-left">
- <span class="iconify-inline" data-icon="mdi-mailbox"></span>
- </span>
- </div>
- </div>
- </div>
- </div>
- </section>
-
- <section class="section">
- <h1 class="title">Payment & Delivery</h1>
- <hr />
-
- <div class="content">
- <p>
- You will be contacted directly regarding payment and delivery
- options.
- </p>
- </div>
- </section>
-
- <section class="section">
- <h1 class="title">Finish</h1>
- <hr />
- <h1 class="subtitle">Confirm your order of {{ cartTotal }}?</h1>
- <button class="button is-success is-rounded is-medium">
- Place Order
- </button>
- </section>
- </form>
- </div>
-</template>
-
-<script>
-export default {
- name: "CheckoutForm",
- data() {
- return {
- states: [
- "Virginia",
- "Alabama",
- "Alaska",
- "Arizona",
- "Arkansas",
- "California",
- "Colorado",
- "Connecticut",
- "Delaware",
- "Florida",
- "Georgia",
- "Hawaii",
- "Idaho",
- "Illinois",
- "Indiana",
- "Iowa",
- "Kansas",
- "Kentucky",
- "Louisiana",
- "Maine",
- "Maryland",
- "Massachusetts",
- "Michigan",
- "Minnesota",
- "Mississippi",
- "Missouri",
- "Montana",
- "Nebraska",
- "Nevada",
- "New Hampshire",
- "New Jersey",
- "New Mexico",
- "New York",
- "North Carolina",
- "North Dakota",
- "Ohio",
- "Oklahoma",
- "Oregon",
- "Pennsylvania",
- "Rhode Island",
- "South Carolina",
- "South Dakota",
- "Tennessee",
- "Texas",
- "Utah",
- "Vermont",
- "Washington",
- "West Virginia",
- "Wisconsin",
- "Wyoming"
- ],
- formData: {
- firstName: "",
- lastName: "",
- email: "",
- phone: "",
- address1: "",
- address2: "",
- city: "",
- state: "Virginia",
- country: "USA",
- zip: "",
- sms: false
- }
- };
- },
- computed: {
- cartTotal() {
- return this.$store.getters.cartTotal;
- }
- }
-};
-</script>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 16:23:24 +0000