@mixd-id/web-scaffold 0.1.240411023 → 0.1.240411024

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.240411023",
+  "version": "0.1.240411024",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -37,6 +37,7 @@
       "require": "./src/utils/preset-selector.cjs",
       "import": "./src/utils/preset-selector.mjs"
     },
+    "./hooks/*": "./src/hooks/*",
     "./preset-selector.cjs": "./src/utils/preset-selector.cjs",
     "./preset-selector.js": "./src/utils/preset-selector.js",
     "./preset-selector.mjs": "./src/utils/preset-selector.mjs",
@@ -70,6 +71,7 @@
     "redis": "^4.6.13",
     "sequelize": "^6.37.6",
     "tailwindcss": "^3.2.4",
+    "tinycolor2": "^1.6.0",
     "vue": "^3.2.25",
     "vue-chartjs": "^5.2.0",
     "vue-router": "^4.0.14",

package/src/components/404.vue

@@ -0,0 +1,61 @@
+<template>
+	<div :class="$style.el">
+
+    <div>
+      <h1>{{ title }}</h1>
+      <p>{{ description }}</p>
+    </div>
+
+    <slot>
+      <component v-if="items?.length > 0"
+                 v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+
+      <router-link v-else :to="{ path:'/' }" class="text-primary">
+        Back to Home
+      </router-link>
+    </slot>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  props: {
+
+    description: {
+      type: String,
+      default: 'The page you are looking for does not exist.'
+    },
+
+    title: {
+      type: String,
+      default: 'Page Not Found'
+    },
+
+    items: Array
+
+  },
+
+  methods: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply w-full max-w-[600px] mx-auto;
+  @apply flex flex-col gap-8 items-center justify-center;
+  @apply min-h-[60vh]
+}
+
+</style>

package/src/components/AccountIcon.vue

@@ -0,0 +1,19 @@
+<template>
+	<button type="button">
+
+  </button>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/Cart.vue

@@ -0,0 +1,192 @@
+<template>
+	<div :class="$style.el">
+
+    <div v-if="readyState === 2" class="flex justify-center items-center min-h-[80vh]">
+      Loading...
+    </div>
+
+    <div v-else-if="!cart" class="flex flex-col gap-4 justify-center items-center min-h-[80vh]">
+      <div class="text-center">
+        <h1>Cart is Empty</h1>
+        <p class="max-w-[480px]">Your cart is empty, if you're interested in our products, browse products from our catalog by clicking button below.</p>
+      </div>
+      <router-link to="/" class="text-primary">Browse Catalog</router-link>
+    </div>
+
+    <div v-else class="flex flex-col">
+
+      <div class="p-5">
+        <h3>Cart</h3>
+      </div>
+
+      <div class="divide-y divide-text-50 px-3 bg-base-300 min-h-[80vh]">
+        <div v-for="item in cart.items" class="flex flex-row gap-2 p-2">
+          <Checkbox v-model="item.checked" />
+          <Image :src="item.imageUrl" class="w-[56px] aspect-square rounded-lg" />
+          <div class="flex-1 flex flex-col">
+            <small>{{ item.code }}</small>
+            <label>{{ item.name }}</label>
+            <div class="flex flex-row gap-2">
+              <strong>Rp. {{ item.price.toLocaleString() }}</strong>
+              <button type="button" class="text-primary text-xs" @click="remove(item)">
+                <svg width="11" height="11" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 80h-82.38l-34-56.75C306.1 8.827 291.4 0 274.6 0H173.4C156.6 0 141 8.827 132.4 23.25L98.38 80H16C7.125 80 0 87.13 0 96v16C0 120.9 7.125 128 16 128H32v320c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V128h16C440.9 128 448 120.9 448 112V96C448 87.13 440.9 80 432 80zM171.9 50.88C172.9 49.13 174.9 48 177 48h94c2.125 0 4.125 1.125 5.125 2.875L293.6 80H154.4L171.9 50.88zM352 464H96c-8.837 0-16-7.163-16-16V128h288v320C368 456.8 360.8 464 352 464zM224 416c8.844 0 16-7.156 16-16V192c0-8.844-7.156-16-16-16S208 183.2 208 192v208C208 408.8 215.2 416 224 416zM144 416C152.8 416 160 408.8 160 400V192c0-8.844-7.156-16-16-16S128 183.2 128 192v208C128 408.8 135.2 416 144 416zM304 416c8.844 0 16-7.156 16-16V192c0-8.844-7.156-16-16-16S288 183.2 288 192v208C288 408.8 295.2 416 304 416z"/></svg>
+              </button>
+            </div>
+          </div>
+          <div class="flex flex-col items-end gap-1">
+            <Textbox class="w-[100px]"
+                     v-model="item.qty"
+                     item-class="text-center p-1">
+              <template #start>
+                <button type="button"
+                        class="p-2"
+                        @click="item.qty = (res => res < 1 ? 1 : res)(item.qty - 1)">
+                  <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280H40c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h368C421.3 232 432 242.8 432 256z"/></svg>
+                </button>
+              </template>
+              <template #end>
+                <button type="button"
+                        class="p-2"
+                        @click="item.qty = (res => res > 5 ? 5 : res)(item.qty + 1)">
+                  <svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256C432 269.3 421.3 280 408 280h-160v160c0 13.25-10.75 24.01-24 24.01S200 453.3 200 440v-160h-160c-13.25 0-24-10.74-24-23.99C16 242.8 26.75 232 40 232h160v-160c0-13.25 10.75-23.99 24-23.99S248 58.75 248 72v160h160C421.3 232 432 242.8 432 256z"/></svg>
+                </button>
+              </template>
+            </Textbox>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-5 py-3 bg-base-300 flex flex-row sticky bottom-0 border-t-[1px] border-text-50">
+        <div v-if="cart?.total > 0" class="flex flex-col flex-1 leading-3">
+          <small>Total</small>
+          <h5>Rp. {{ cart.total.toLocaleString() }}</h5>
+        </div>
+        <div v-else class="flex-1"></div>
+        <Button ref="checkoutBtn"
+                class="px-3"
+                :state="canCheckout ? 1 : -1"
+                @click="checkout">
+          Checkout
+        </Button>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+import {invokeAfterIdle} from "../utils/helpers.mjs";
+
+export default {
+
+  inject: [ 'alert' ],
+
+  computed: {
+
+    canCheckout(){
+      return this.apiUrl &&
+          this.cart && (this.cart.items ?? []).some(item => item.checked)
+    }
+
+  },
+
+  props: {
+
+    apiUrl: String
+
+  },
+
+  methods: {
+
+    calculate(){
+      if(!this.cart) return
+
+      let subtotal = 0;
+      for(let item of this.cart.items){
+        if(!item.checked) continue
+
+        subtotal += item.qty * item.price
+      }
+
+      this.cart.total = subtotal
+
+      this.update()
+    },
+
+    checkout(){
+      this.$refs.checkoutBtn.setState(2)
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        action: 'checkout',
+        cart: this.cart
+      })
+        .then(res => {
+          if(res.data.target)
+            this.$router.push(res.data.target)
+        })
+        .catch(err => this.alert(err))
+        .finally(_ => this.$refs.checkoutBtn.resetState())
+    },
+
+    load(){
+      this.readyState = 2
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl)
+        .then(res => {
+          this.cart = res.data
+          this.readyState = 1
+        })
+        .catch(err => {
+          this.readyState = -1
+          this.error = err
+        })
+    },
+
+    remove(item){
+      this.cart.items.splice(this.cart.items.indexOf(item), 1)
+    },
+
+    update: invokeAfterIdle(function(){
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        action: 'update',
+        cart: this.cart
+      })
+    }, 1000),
+
+  },
+
+  data(){
+    return {
+      cart: null,
+      readyState: 1,
+      error: null,
+    }
+  },
+
+  mounted() {
+    this.load()
+  },
+
+  watch: {
+
+    cart: {
+      deep: true,
+      handler(){
+        this.calculate()
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply flex flex-col;
+}
+
+</style>

package/src/components/CartIcon.vue

@@ -0,0 +1,89 @@
+<template>
+	<button type="button"
+          :class="$style.comp"
+          @click="$refs.contextMenu.open($el)">
+
+    <div :class="$style.badge">3</div>
+
+    <slot name="icon">
+      <component v-if="items?.length > 0"
+                 v-for="item in items"
+                 :is="item.type"
+                 :key="item.key"
+                 :="item" />
+
+      <svg v-else
+           width="16"
+           height="16px"
+           class="fill-text"
+           xmlns="http://www.w3.org/2000/svg"
+           viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M416 160h-72V120C344 53.83 290.2 0 224 0S104 53.83 104 120V160H32C14.33 160 0 174.3 0 192v240C0 476.2 35.82 512 80 512h288c44.18 0 80-35.82 80-80V192C448 174.3 433.7 160 416 160zM152 120C152 80.3 184.3 48 224 48s72 32.3 72 72V160h-144V120zM400 432c0 17.64-14.36 32-32 32h-288c-17.64 0-32-14.36-32-32v-224h56v56C104 277.3 114.8 288 128 288s24-10.75 24-24V208h144v56C296 277.3 306.8 288 320 288s24-10.75 24-24V208h56V432z"/></svg>
+    </slot>
+
+    <ContextMenu ref="contextMenu"
+                 position="bottom-right"
+                 class="border-transparent">
+      <div class="flex flex-col min-w-[300px] divide-y divide-text-50">
+
+        <div class="" @click.stop>
+          <div class="p-5 py-3 flex flex-row items-center">
+            <div class="flex-1">
+              <h5>Shopping Cart</h5>
+            </div>
+          </div>
+
+          <div>
+            <div class="min-h-[160px] flex items-center justify-center">
+              <label class="text-text-400">
+                No item in cart
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="text-center p-3">
+          <router-link to="/cart" type="button" class="text-primary">Open Cart</router-link>
+        </div>
+
+      </div>
+    </ContextMenu>
+
+  </button>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default {
+
+  mixins: [ componentMixin ],
+
+  props: {
+
+    items: Array
+
+  },
+
+  methods: {
+
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+  @apply relative;
+}
+
+.badge{
+  @apply rounded-full w-[16px] h-[16px] bg-text text-white pointer-events-none;
+  @apply absolute bottom-[-6px] right-[-12px];
+  @apply flex items-center justify-center text-xs;
+}
+
+</style>

package/src/components/Checkout.vue

@@ -0,0 +1,257 @@
+<template>
+	<div :class="$style.el">
+
+    <div v-if="readyState === 2" class="flex justify-center items-center min-h-[80vh]">
+      Loading...
+    </div>
+
+    <div v-else-if="!order" class="flex flex-col gap-4 justify-center items-center min-h-[80vh] p-8">
+      <div class="text-center">
+        <h1>Cart is Empty</h1>
+        <p class="max-w-[480px]">Your order is empty, if you're interested in our products, browse products from our catalog by clicking button below.</p>
+      </div>
+      <router-link to="/" class="text-primary">Browse Catalog</router-link>
+    </div>
+
+    <div v-else class="flex flex-col md:flex-row md:gap-8 min-h-[100vh]">
+
+      <div class="flex-1 flex flex-col gap-5">
+        <div v-if="order.customerId">
+          <div class="px-5">
+            <small class="text-text-400">Customer</small>
+          </div>
+          <div class="bg-base-300 flex flex-col p-5 py-3">
+            <strong>{{ order.customerName }}</strong>
+            <label>{{ order.mobileNumber }}</label>
+            <small>{{ order.email }}</small>
+          </div>
+        </div>
+
+        <div v-else>
+          <div class="px-5">
+            <small class="text-text-400">Customer</small>
+          </div>
+          <div class="bg-base-300 flex flex-col gap-3 p-5 py-3">
+            <div>
+              <small>Name</small>
+              <Textbox v-model="order.customerName" />
+            </div>
+            <div>
+              <small>Mobile Number</small>
+              <Textbox v-model="order.mobileNumber" maxlength="20" />
+            </div>
+            <div>
+              <small>Email</small>
+              <Textbox v-model="order.email" maxlength="50" />
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="text-text-400 flex-1">Delivery</small>
+            <button type="button" class="text-primary text-sm"
+                    @click="$refs.deliveryAddress.open()">
+              Choose Address
+            </button>
+          </div>
+          <div class="bg-base-300 flex flex-col p-5 py-3">
+
+            <div v-if="order.deliveryAddressId">
+              <p>{{ order.deliveryAddress }}</p>
+              <p>
+                {{ order.deliveryProvinceName }}
+                -
+                {{ order.deliveryCityName}}
+              </p>
+              <p>
+                {{ order.deliveryDistrictName }}
+                -
+                {{ order.deliverySubdistrictName }}
+                -
+                {{ order.deliveryPostalCode }}
+              </p>
+            </div>
+
+          </div>
+        </div>
+
+        <div>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="text-text-400">Payment</small>
+          </div>
+          <div class="bg-base-300 p-5 py-3 grid grid-cols-2 gap-3">
+
+            <Radio v-for="paymentType of paymentTypes"
+                   :class="`${$style.paymentType}${paymentType.id === order.paymentTypeId ? ' ' + $style.paymentTypeSelected : ''}`"
+                   v-model.number="order.paymentTypeId"
+                   :value="paymentType.id"
+                   :custom="true">
+              {{ paymentType.name }}
+            </Radio>
+
+          </div>
+        </div>
+      </div>
+
+      <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-text-50">
+        <div v-if="order?.total > 0" class="flex flex-col flex-1 leading-3">
+          <small>Total</small>
+          <h5>Rp. {{ order.total.toLocaleString() }}</h5>
+        </div>
+        <div v-else class="flex-1"></div>
+        <Button ref="paymentBtn"
+                class="px-3"
+                :state="canPayment ? 1 : -1"
+                @click="payment">
+          Payment
+        </Button>
+      </div>
+
+      <div class="hidden md:flex flex-col w-[300px]">
+
+        <div class="flex flex-row gap-2 px-3">
+          <small class="text-text-400 flex-1">Summary</small>
+        </div>
+        <div class="bg-base-300 min-h-[200px]">
+
+        </div>
+
+      </div>
+
+    </div>
+
+    <Modal ref="deliveryAddress" width="480" height="600">
+      <template v-slot:head>
+        <div class="relative p-5">
+          <h3>Select Address</h3>
+          <div class="absolute top-0 right-0 p-2">
+            <button type="button" class="p-2" @click="$refs.deliveryAddress.close()">
+              <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+                <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </template>
+
+      <template #default="{ context }">
+        <div class="flex-1 p-5 flex flex-col">
+
+          <div v-for="deliveryAddress in deliveryAddresses">
+            {{ deliveryAddress }}
+          </div>
+
+          <button type="button" class="p-3 text-center">
+            New Address
+          </button>
+
+        </div>
+      </template>
+
+      <template v-slot:foot>
+        <div class="p-5">
+
+        </div>
+      </template>
+    </Modal>
+
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default {
+
+  computed: {
+
+    canPayment(){
+      return this.apiUrl &&
+          this.order
+    }
+
+  },
+
+  props: {
+
+    apiUrl: String
+
+  },
+
+  methods: {
+
+    load(uid){
+      this.readyState = 2
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          uid
+        }
+      })
+          .then(res => {
+            this.order = res.data.order
+            this.deliveryAddresses = res.data.deliveryAddresses
+            this.paymentTypes = res.data.paymentTypes
+            this.readyState = 1
+          })
+          .catch(err => {
+            this.readyState = -1
+            this.error = err
+          })
+    },
+
+    payment(){
+
+    }
+
+  },
+
+  data(){
+    return {
+      order: null,
+      paymentTypes: null,
+      deliveryAddresses: null,
+      readyState: 1,
+      error: null
+    }
+  },
+
+  mounted() {
+    if(this.$editMode.value > 0){
+      this.load('dummy')
+    }
+  },
+
+  watch: {
+
+    '$route.query.uid': {
+      immediate: true,
+      handler(uid){
+        if(uid){
+          this.load(uid)
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply max-w-[900px] mx-auto;
+}
+
+.paymentType{
+  @apply border-[1px] border-text-50 rounded-lg;
+  @apply p-2 text-sm;
+}
+.paymentTypeSelected{
+  @apply border-primary;
+}
+
+</style>

package/src/components/ColorPicker.vue

@@ -1,8 +1,10 @@
 <template>
 	<div :class="$style.comp">
+
 		<div :class="circleClass" :style="circleStyle"
 				 @click="mode === 'hex' ? $refs.inputColor.click() : $refs.contextMenu.open($refs.btn)"
 				 ref="btn"></div>
+
 		<input type="color" :class="$style.inputColor" ref="inputColor"
 			@change="select($refs.inputColor.value)"/>
 
@@ -71,6 +73,8 @@ export default{
 
     valueType: String,
 
+    itemClass: String
+
 	},
 
 	methods: {
@@ -104,6 +108,7 @@ export default{
 		circleClass(){
 			return [
 				this.$style.circle,
+        this.itemClass,
 				this.mode === 'class' ?
 					(this.modelValue ?? '').replace('text-', 'bg-').replace('border-', 'bg-') :
 					''