summaryrefslogtreecommitdiff
path: root/iridescence/src/components/admin
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2022-10-26 21:02:31 -0400
committerAdam T. Carpenter <atc@53hor.net>2022-10-26 21:02:31 -0400
commit9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f (patch)
treedb9ca419266117facecdff6d30460669f3148efb /iridescence/src/components/admin
parentf243a3b7341012227d6e8342a65f9c5d7784256f (diff)
downloadtheglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.tar.xz
theglassyladies-9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f.zip
init: add some stories and personas and begin layout out domain
Diffstat (limited to 'iridescence/src/components/admin')
-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
3 files changed, 0 insertions, 372 deletions
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>