@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/components/Checkout.vue

@@ -0,0 +1,373 @@
+<template>
+	<div :class="$style.el">
+
+    <div v-if="order === 'loading'" class="flex justify-center items-center min-h-[80vh]">
+      Loading...
+    </div>
+
+    <div v-else-if="order instanceof Error"
+         class="flex flex-col gap-4 justify-center items-center min-h-[80vh] p-8">
+      <slot name="error" :error="order">
+        <component v-if="items"
+                   v-for="component in items"
+                   :is="component"
+                   :key="component"
+                   :="component" />
+        <div v-else class="flex flex-col gap-3 items-center justify-center">
+          <h1>Error</h1>
+          <p class="max-w-[480px]">{{ order.message }}</p>
+        </div>
+      </slot>
+    </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 class="p-5">
+          <h3>Checkout</h3>
+        </div>
+
+        <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 flex flex-row gap-2">
+            <small class="flex-1 text-text-400">Customer</small>
+          </div>
+          <div class="mt-1 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">
+            <small class="text-text-400">Products</small>
+          </div>
+
+          <div class="mt-1 p-5 bg-base-300 flex flex-col gap-3">
+            <div v-for="item in order.items" class="flex flex-row gap-3">
+              <Image :src="item.imageSrc" class="w-[60px] aspect-square rounded-lg bg-base-300" />
+              <div class="flex-1 flex flex-col gap1">
+                <small>{{ item.code }}</small>
+                <strong>{{ item.name }}</strong>
+                <label>{{ item.qty }}x {{ item.price.toLocaleString() }}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="text-text-400 flex-1">Delivery Address</small>
+            <button type="button" class="text-primary text-sm"
+                    @click="$router.push({ query:$route.query, hash:'#select-delivery' })">
+              Choose Address
+            </button>
+          </div>
+          <div class="bg-base-300 flex flex-col gap-5 p-5 py-3 mt-1">
+
+            <div class="flex flex-col gap-1">
+              <small>{{ order.deliveryType }}</small>
+              <strong>{{ order.deliveryContactName }}</strong>
+              <p>{{ order.deliveryAddress }}</p>
+              <p>
+                {{ order.deliveryProvinceName }}
+                -
+                {{ order.deliveryCityName}}
+              </p>
+              <p>
+                {{ order.deliveryDistrictName }}
+                -
+                {{ order.deliverySubdistrictName }}
+                -
+                {{ order.deliveryPostalCode }}
+              </p>
+            </div>
+
+            <div class="h-[1px] bg-text-50"></div>
+
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <small>Courier</small>
+                <Dropdown v-model.number="order.deliveryCourierId">
+                  <option disabled selected>Select Courier</option>
+                  <option v-for="courier in couriers" :value="courier.id">
+                    {{ courier.name }}
+                  </option>
+                </Dropdown>
+              </div>
+
+              <div>
+                <small>Package</small>
+                <Dropdown v-model.number="order.deliveryPackageId">
+                  <option disabled selected>Select Package</option>
+                  <option v-for="obj in courierPackages" :value="obj.id">
+                    {{ obj.name }}
+                  </option>
+                </Dropdown>
+              </div>
+            </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 md: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">
+              {{ paymentType.name }}
+            </Radio>
+
+          </div>
+        </div>
+
+        <div>
+          <div class="px-5 flex flex-row gap-2">
+            <small class="text-text-400">Summary</small>
+          </div>
+          <div class="bg-base-300 mt-1 p-5 flex flex-col gap-3">
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Total Products</label>
+              <strong>{{ (order.subTotal ?? 0).toLocaleString() }}</strong>
+            </div>
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Discount</label>
+              <strong>{{ (order.discountAmount ?? 0).toLocaleString() }}</strong>
+            </div>
+
+            <div class="flex flex-row gap-2">
+              <label class="flex-1">Delivery Charge</label>
+              <strong>{{ (order.deliveryCharge ?? 0).toLocaleString() }}</strong>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+
+      <div class="flex md:hidden p-5 py-3 bg-base-300 flex-row sticky bottom-0 border-t-[1px] border-border-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-8 font-bold"
+                :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 hash="#select-delivery"
+           width="400"
+           height="640"
+           :dismissable="true">
+      <template #default="{ context }">
+        <div class="flex-1 flex flex-col">
+          <div class="absolute top-0 right-0">
+            <button type="button"
+                    class="p-5"
+                    @click="$router.replace({ query:$route.query, hash:'' })">
+              <svg width="19" height="19" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+            </button>
+          </div>
+
+          <CheckoutDelivery class="flex-1"
+                            :api-url="apiUrl"
+                            ref="checkoutDelivery"
+                            :items="deliveryAddresses"
+                            @apply="setDelivery" />
+        </div>
+      </template>
+    </Modal>
+
+  </div>
+</template>
+
+<script>
+
+import axios from "axios";
+import CheckoutDelivery from "./CheckoutDelivery.vue";
+
+export default {
+
+  components: {CheckoutDelivery},
+
+  inject: [ 'toast' ],
+
+  computed: {
+
+    canPayment(){
+      return this.apiUrl &&
+          this.order
+    },
+
+    courierPackages(){
+      const courier = (this.couriers ?? [])
+          .find(_ => _.id === this.order.deliveryCourierId)
+
+      return courier?.packages
+    }
+
+  },
+
+  props: {
+
+    apiUrl: {
+      type: String,
+      required: true
+    },
+
+    items: Array
+
+  },
+
+  methods: {
+
+    load(uid){
+      this.order = 'loading'
+      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
+          })
+          .catch(err => this.order = err)
+    },
+
+    loadCouriers(){
+      if(!this.apiUrl)
+        return console.warn('Unable to load couriers, apiUrl not set')
+
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-couriers'
+        }
+      })
+        .then(res => this.couriers = res.data)
+        .catch(err => this.toast(err))
+    },
+
+    payment(){
+
+    },
+
+    update(){
+      axios.post(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        _action: 'update',
+        order: this.order
+      })
+        .then(res => Object.assign(this.order, res.data))
+        .catch(err => this.toast(err))
+    },
+
+    setDelivery(address){
+      Object.assign(this.order, address)
+      this.$router.replace({ query:this.$route.query, hash:'' })
+    }
+
+  },
+
+  data(){
+    return {
+      order: null,
+      paymentTypes: null,
+      deliveryAddresses: null,
+
+      couriers: null
+    }
+  },
+
+  mounted() {
+    if(this.$editMode.value > 0){
+      this.order = {}
+    }
+  },
+
+  watch: {
+
+    '$route.query.uid': {
+      immediate: true,
+      handler(uid){
+        if(uid){
+          this.load(uid)
+        }
+      }
+    },
+
+    'order.deliveryAddress': {
+      immediate: true,
+      handler(deliveryAddress){
+        if(deliveryAddress){
+          this.loadCouriers()
+        }
+      }
+    }
+
+  }
+
+}
+
+</script>
+
+<style module>
+
+.el{
+  @apply max-w-[900px] mx-auto;
+}
+
+.paymentType{
+  @apply rounded-lg;
+  @apply p-2 text-sm;
+}
+.paymentTypeSelected{
+  @apply border-primary;
+}
+
+</style>

package/src/components/CheckoutDelivery.vue

@@ -0,0 +1,267 @@
+<template>
+	<div class="flex-1 flex flex-col">
+
+    <div class="p-5">
+      <h3>Select Delivery</h3>
+    </div>
+
+    <div v-if="!newItem" class="flex flex-col divide-y divide-border-50">
+      <div v-for="item in items"
+           class="p-5 py-3 flex flex-col cursor-pointer"
+           @click="apply(item)">
+        <small>{{ item.deliveryType }}</small>
+        <strong>{{ item.deliveryContactName }}</strong>
+        <p>{{ item.deliveryAddress }}</p>
+      </div>
+
+      <button type="button" class="p-6 text-primary" @click="addNew">
+        New Address
+      </button>
+    </div>
+
+    <div v-else class="flex-1 flex flex-col gap-5">
+
+      <div class="flex-1 overflow-y-auto flex flex-col gap-5 p-5">
+        <div>
+          <small>Type</small>
+          <Dropdown v-model="newItem.deliveryType">
+            <option>Home</option>
+            <option>Office</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Contact Name</small>
+          <Textbox v-model="newItem.deliveryContactName" />
+        </div>
+
+        <div>
+          <small>Address</small>
+          <Textarea v-model="newItem.deliveryAddress" rows="3" />
+        </div>
+
+        <div>
+          <small>Province</small>
+          <Dropdown v-model="newItem.deliveryProvinceName">
+            <option disabled selected>Choose Province</option>
+            <option v-for="province in provinces" :value="province.name">
+              {{ province.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>City</small>
+          <Dropdown v-model="newItem.deliveryCityName">
+            <option disabled selected>Choose City</option>
+            <option v-for="city in cities" :value="city.name">
+              {{ city.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>District</small>
+          <Dropdown v-model="newItem.deliveryDistrictName">
+            <option disabled selected>Choose District</option>
+            <option v-for="district in districts" :value="district.name">
+              {{ district.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Sub District</small>
+          <Dropdown v-model="newItem.deliverySubDistrictName"
+                    @change="setPostalCode(newItem.deliverySubDistrictName)">
+            <option disabled selected>Choose Sub District</option>
+            <option v-for="subDistrict in subDistricts" :value="subDistrict.name">
+              {{ subDistrict.name }}
+            </option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <small>Postal Code</small>
+          <Textbox v-model="newItem.deliveryPostalCode" />
+        </div>
+      </div>
+
+      <div class="p-5">
+        <Button class="w-full"
+                :state="canSave ? 1 : -1"
+                @click="apply(newItem)">Set Address</Button>
+      </div>
+
+    </div>
+
+	</div>
+</template>
+
+<script>
+
+import axios from "axios";
+
+export default{
+
+  emits: [ 'apply' ],
+
+  computed: {
+
+    canSave(){
+      return this.newItem &&
+          this.newItem.deliveryType &&
+          this.newItem.deliveryContactName &&
+          this.newItem.deliveryAddress &&
+          this.newItem.deliveryProvinceName &&
+          this.newItem.deliveryCityName &&
+          this.newItem.deliveryDistrictName &&
+          this.newItem.deliverySubDistrictName &&
+          this.newItem.deliveryPostalCode
+    }
+
+  },
+
+  props: {
+
+    apiUrl: {
+      type: String,
+      required: true
+    },
+
+    items: Array
+
+  },
+
+  data(){
+    return {
+      newItem: null,
+
+      provinces: null,
+      cities: null,
+      districts: null,
+      subDistricts: null
+    }
+  },
+
+  methods: {
+
+    addNew(){
+      this.newItem = {}
+      this.loadProvinces()
+    },
+
+    apply(item){
+      this.$emit('apply', JSON.parse(JSON.stringify(item)))
+    },
+
+    loadProvinces(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-provinces'
+        }
+      })
+        .then(res => {
+          this.provinces = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadCities(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-cities',
+          province: this.newItem.deliveryProvinceName
+        }
+      })
+        .then(res => {
+          this.cities = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadDistricts(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-districts',
+          province: this.newItem.deliveryProvinceName,
+          city: this.newItem.deliveryCityName
+        }
+      })
+        .then(res => {
+          this.districts = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    loadSubDistricts(){
+      axios.get(import.meta.env.VITE_API_HOST + this.apiUrl, {
+        params: {
+          _action: 'load-sub-districts',
+          province: this.newItem.deliveryProvinceName,
+          city: this.newItem.deliveryCityName,
+          district: this.newItem.deliveryDistrictName
+        }
+      })
+        .then(res => {
+          this.subDistricts = res.data
+        })
+        .catch(err => {
+          console.error(err)
+        })
+    },
+
+    setPostalCode(subDistrictName){
+      const subDistrict = (this.subDistricts ?? []).find(item => item.name === subDistrictName)
+      this.newItem.deliveryPostalCode = subDistrict?.postalCode ?? ''
+    },
+
+  },
+
+  watch: {
+
+    'newItem.deliveryProvinceName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadCities()
+      }
+    },
+
+    'newItem.deliveryCityName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadDistricts()
+      }
+    },
+
+    'newItem.deliveryDistrictName': {
+      immediate: true,
+      handler(to){
+        if(to)
+          this.loadSubDistricts()
+      }
+    }
+
+  }
+
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/CodeEditor.vue

@@ -1,10 +1,9 @@
 <template>
 	<div :class="$style.comp">
-		<div class="flex flex-row bg-text-50 p-2">
-			<div class="flex-1">&nbsp;</div>
-		</div>
-		<code v-html="modelValue" contenteditable="true" spellcheck="false"
-					@paste="onPaste"></code>
+		<code contenteditable="true" spellcheck="false"
+					@paste="onPaste">
+      {{ modelValue }}
+    </code>
 	</div>
 </template>
 
@@ -20,19 +19,9 @@ export default{
 
 	methods: {
 
-		beautify(){
-			const html = JSON.parse(JSON.stringify(this.modelValue, null, 2))
-			this.$emit('update:modelValue', html)
-		},
-
 		onPaste(e) {
 			e.preventDefault()
-
 			let text = (e.clipboardData || window.clipboardData).getData("text");
-			const el = document.createElement('div')
-			el.innerHTML = text
-			text = el.innerText
-
 			this.$emit('update:modelValue', text)
 		}
 
@@ -45,7 +34,7 @@ export default{
 <style module>
 
 .comp{
-	@apply border-text-50 border-[1px] rounded-lg overflow-hidden flex flex-col;
+  @apply border-[1px] border-border-200 bg-base-300 rounded-lg flex flex-col overflow-hidden;
 }
 
 .comp code{