From 9f3098e80c6b6c87e9bfbfe36239a39e5cafb29f Mon Sep 17 00:00:00 2001
From: "Adam T. Carpenter" <atc@53hor.net>
Date: Wed, 26 Oct 2022 21:02:31 -0400
Subject: init: add some stories and personas and begin layout out domain

---
 iridescence/src/components/admin/NewProduct.vue    |  58 -----
 .../src/components/admin/ProductEditCard.vue       | 282 ---------------------
 .../src/components/admin/ProductEditList.vue       |  32 ---
 3 files changed, 372 deletions(-)
 delete mode 100644 iridescence/src/components/admin/NewProduct.vue
 delete mode 100644 iridescence/src/components/admin/ProductEditCard.vue
 delete mode 100644 iridescence/src/components/admin/ProductEditList.vue

(limited to 'iridescence/src/components/admin')

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>
-- 
cgit v1.2.3