fix: purchase master

app/Http/Controllers/PurchaseController.php

@@ -56,7 +56,7 @@ class PurchaseController extends Controller
     {
         return inertia('Purchases/Create', [
             'number' => 'PBN' . now()->format('YmdHis'),
-            'ppn' => Ppn::first()->ppn,
+            'ppn' => Ppn::first()->getRawOriginal('ppn'),
             'productNumber' => Inertia::lazy(
                 fn() => 'PDK' . now()->format('YmdHis')
             ),

database/migrations/2022_06_16_091344_create_products_table.php

@@ -18,7 +18,7 @@ return new class extends Migration
             $table->string('number')->unique();
             $table->string('name');
             $table->string('unit');
-            $table->unsignedTinyInteger('profit');
+            $table->unsignedTinyInteger('profit')->default(0);
             $table->timestamps();
         });
     }

resources/js/assets/styles/sass/global.scss → resources/css/app.scss

@@ -105,11 +105,3 @@ p {
   padding: 0.25em 0.5rem;
   max-width: 12.5rem;
 }
-
-.p-message {
-  margin-top: 0px;
-}
-
-.p-component-overlay {
-  z-index: 997;
-}

resources/js/pages/Purchases/Components/Cart.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+  title: String,
+  headerTable: {
+    required: true,
+    type: Array,
+  },
+  value: {
+    required: true,
+    type: Array,
+  },
+})
+</script>
+
+<template>
+  <DataTable
+    responsiveLayout="scroll"
+    columnResizeMode="expand"
+    :value="value"
+    :rowHover="true"
+    :stripedRows="true"
+  >
+    <template #header>
+      <h2 class="text-2xl font-bold">{{ title }}</h2>
+    </template>
+
+    <Column
+      v-for="value in headerTable"
+      :field="value.field"
+      :header="value.header"
+      :key="value.field"
+    />
+
+    <Column>
+      <template #body="{ index }">
+        <Button
+          icon="pi pi-trash"
+          class="p-button-icon-only p-button-rounded p-button-text"
+          v-tooltip.bottom="'hapus'"
+          @click="$emit('delete', index)"
+        />
+      </template>
+    </Column>
+  </DataTable>
+</template>

resources/js/pages/Purchases/Components/Details.vue

@@ -1,16 +1,16 @@
 <script setup>
 import { IDRCurrencyFormat } from '@/utils/currencyFormat'
 
-defineProps([
-  'title',
-  'number',
-  'price',
-  'qty',
-  'ppn',
-  'status',
-  'person',
-  'product',
-])
+defineProps({
+  title: String,
+  number: String,
+  price: Number,
+  qty: String,
+  ppn: Number,
+  status: String,
+  person: Object,
+  disabled: Boolean,
+})
 </script>
 
 <template>
@@ -67,38 +67,12 @@ defineProps([
           </div>
         </div>
 
-        <div class="col-12">
-          <div
-            v-if="
-              product !== null &&
-              typeof product === 'object' &&
-              Object.keys(product).length
-            "
-            class="grid"
-          >
-            <div class="col">
-              <h3 class="text-base">Nomor Produk</h3>
-              <span>{{ product.number }}</span>
-            </div>
-
-            <div class="col">
-              <h3 class="text-base">Nama Produk</h3>
-              <span>{{ product.name }}</span>
-            </div>
-
-            <div class="col">
-              <h3 class="text-base">Satuan</h3>
-              <span>{{ product.unit }}</span>
-            </div>
-          </div>
-        </div>
-
         <Divider type="dashed" />
         <div class="col-12">
           <div class="grid">
             <div class="col">
               <h3 class="text-base">Harga</h3>
-              <span>{{ IDRCurrencyFormat(price) }}</span>
+              <span v-if="price">{{ IDRCurrencyFormat(price) }}</span>
             </div>
 
             <div class="col">
@@ -108,11 +82,23 @@ defineProps([
 
             <div class="col">
               <h3 class="text-base">PPN</h3>
-              <span>{{ ppn }}</span>
+              <span>{{ ppn }} %</span>
             </div>
           </div>
         </div>
       </div>
     </template>
+
+    <template #footer>
+      <div class="flex flex-column md:flex-row justify-content-end">
+        <Button
+          label="Simpan"
+          icon="pi pi-check"
+          class="p-button-outlined"
+          :disabled="disabled"
+          @click="$emit('click')"
+        />
+      </div>
+    </template>
   </Card>
 </template>

resources/js/pages/Purchases/Composables/useProductCart.js

@@ -0,0 +1,46 @@
+import { reactive } from 'vue'
+import FormValidationError from '@/utils/FormValidationError'
+
+export function useProductCart(form) {
+  const cartProduct = reactive([])
+
+  const productAddValidation = () => {
+    if (form.price) {
+      throw new FormValidationError('Nilai tidak boleh kosong', 'price')
+    } else if (form.qty) {
+      throw new FormValidationError('Nilai tidak boleh kosong', 'qty')
+    } else if (form.product) {
+      throw new FormValidationError('Nilai tidak boleh kosong', 'product')
+    }
+  }
+
+  const onAddProduct = () => {
+    try {
+      form.clearErrors(['price', 'qty', 'product'])
+
+      productAddValidation()
+
+      cartProduct.push({
+        number: form.product.number,
+        name: form.product.name,
+        price: form.price,
+        qty: form.qty,
+      })
+    } catch (e) {
+      form.setError(e.field, e.message)
+    }
+  }
+
+  const onDeleteProduct = (index) => {
+    cartProduct.splice(index)
+  }
+
+  const onClearProduct = () => {}
+
+  return {
+    cartProduct,
+    onAddProduct,
+    onDeleteProduct,
+    onClearProduct,
+  }
+}

resources/js/pages/Purchases/Create.vue

@@ -1,9 +1,12 @@
 <script setup>
 import { useDialog } from 'primevue/usedialog'
 import { optionStatus, dialogStyle } from './config'
-import SupplierCreate from './Components/Dialog/SupplierCreate.vue'
-import ProductCreate from './Components/Dialog/ProductCreate.vue'
+import { cartTable } from './config'
+import SupplierCreate from './Components/SupplierCreate.vue'
+import ProductCreate from './Components/ProductCreate.vue'
 import Details from './Components/Details.vue'
+import Cart from './Components/Cart.vue'
+import { useProductCart } from './Composables/useProductCart'
 import { useForm } from '@/composables/useForm'
 import AppInputText from '@/components/AppInputText.vue'
 import AppInputNumber from '@/components/AppInputNumber.vue'
@@ -13,7 +16,7 @@ import DashboardLayout from '@/layouts/Dashboard/DashboardLayout.vue'
 
 const props = defineProps({
   number: String,
-  ppn: String,
+  ppn: Number,
   suppliers: {
     type: Array,
     default: [],
@@ -48,9 +51,12 @@ const onSubmit = () => {
     })
 }
 
+const { cartProduct, onAddProduct, onDeleteProduct, onClearProduct } =
+  useProductCart(form)
+
 const dialog = useDialog()
 
-const showCreateSupplier = () => {
+const onShowCreateSupplier = () => {
   dialog.open(SupplierCreate, {
     props: {
       header: 'Tambah Supplier',
@@ -59,7 +65,7 @@ const showCreateSupplier = () => {
   })
 }
 
-const showCreateProduct = () => {
+const onShowCreateProduct = () => {
   dialog.open(ProductCreate, {
     props: {
       header: 'Tambah Produk',
@@ -67,14 +73,6 @@ const showCreateProduct = () => {
     },
   })
 }
-
-const checkBtnSubmit = () => {
-  if (form.price && form.qty && form.supplier && form.product) {
-    return false
-  } else {
-    return true
-  }
-}
 </script>
 
 <template>
@@ -82,9 +80,9 @@ const checkBtnSubmit = () => {
     <DynamicDialog />
 
     <div class="grid">
-      <div class="col-12 lg:col-8">
+      <div class="col-12 md:col-8 flex-order-1 md:flex-order-0">
         <Card>
-          <template #title> Tambah Pembelian </template>
+          <template #title> Pembeli </template>
           <template #content>
             <div class="grid">
               <div class="col-12 md:col-6">
@@ -130,14 +128,36 @@ const checkBtnSubmit = () => {
                     <span
                       class="cursor-pointer"
                       style="color: var(--primary-color)"
-                      @click="showCreateSupplier"
+                      @click="onShowCreateSupplier"
                     >
                       Tambah Supplier
                     </span>
                   </template>
                 </AppAutoComplete>
               </div>
+            </div>
+          </template>
+        </Card>
+      </div>
+
+      <div class="col-12 md:col-4 flex-order-4 md:flex-order-0">
+        <Details
+          title="Detail Pembelian"
+          :number="number"
+          :ppn="ppn"
+          :status="form.status"
+          :person="form.supplier"
+          :product="form.product"
+          :disabled="form.processing"
+          @click="onSubmit"
+        />
+      </div>
 
+      <div class="col-12 md:col-8 flex-order-2 md:flex-order-0">
+        <Card>
+          <template #title>Produk</template>
+          <template #content>
+            <div class="grid">
               <div class="col-12 md:col-6">
                 <AppAutoComplete
                   label="Produk"
@@ -161,7 +181,7 @@ const checkBtnSubmit = () => {
                     <span
                       class="cursor-pointer"
                       style="color: var(--primary-color)"
-                      @click="showCreateProduct"
+                      @click="onShowCreateProduct"
                     >
                       Tambah Produk
                     </span>
@@ -189,31 +209,27 @@ const checkBtnSubmit = () => {
               </div>
             </div>
           </template>
-
           <template #footer>
             <div class="flex flex-column md:flex-row justify-content-end">
               <Button
-                label="Simpan"
+                label="Tambah Produk"
                 icon="pi pi-check"
                 class="p-button-outlined"
-                :disabled="form.processing || checkBtnSubmit()"
-                @click="onSubmit"
+                :disabled="form.processing"
+                @click="onAddProduct"
               />
             </div>
           </template>
         </Card>
       </div>
 
-      <div class="col-12 lg:col-4">
-        <Details
-          title="Detail Pembelian"
-          :number="number"
-          :price="form.price"
-          :qty="form.qty"
-          :ppn="ppn"
-          :status="form.status"
-          :person="form.supplier"
-          :product="form.product"
+      <div class="col-12 md:col-8 flex-order-3 md:flex-order-0">
+        <Cart
+          title="Keranjang Produk"
+          :header-table="cartTable"
+          :form="form"
+          :value="cartProduct"
+          @delete="onDeleteProduct"
         />
       </div>
     </div>

resources/js/pages/Purchases/config.js

@@ -20,6 +20,13 @@ export const indexTable = [
   { field: 'productNumber', header: 'Nomor Produk' },
 ]
 
+export const cartTable = [
+  { field: 'number', header: 'Nomor Produk' },
+  { field: 'name', header: 'Produk' },
+  { field: 'price', header: 'Harga' },
+  { field: 'quantity', header: 'Kuantitas' },
+]
+
 export const dialogStyle = {
   style: {
     width: '50vw',

resources/js/vue.js

@@ -1,4 +1,5 @@
 import './bootstrap'
+import '../css/app.scss'
 import { createApp, h } from 'vue'
 import { createInertiaApp } from '@inertiajs/inertia-vue3'
 import { InertiaProgress } from '@inertiajs/progress'
@@ -8,7 +9,6 @@ import 'primevue/resources/themes/mdc-light-indigo/theme.css'
 import 'primevue/resources/primevue.min.css'
 import 'primeflex/primeflex.css'
 import 'primeicons/primeicons.css'
-import '@/assets/styles/sass/global.scss'
 import PrimeVue from 'primevue/config'
 import StyleClass from 'primevue/styleclass'
 import AutoComplete from 'primevue/autocomplete'
@@ -29,12 +29,9 @@ import Editor from 'primevue/editor'
 import InputNumber from 'primevue/inputnumber'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
-import Paginator from 'primevue/paginator'
 import Password from 'primevue/password'
-import Ripple from 'primevue/ripple'
 import TabView from 'primevue/tabview'
 import TabPanel from 'primevue/tabpanel'
-import Textarea from 'primevue/textarea'
 import Tooltip from 'primevue/tooltip'
 
 createInertiaApp({
@@ -47,12 +44,19 @@ createInertiaApp({
   setup({ el, App, props, plugin }) {
     createApp({ render: () => h(App, props) })
       .use(plugin)
-      .use(PrimeVue, { ripple: true })
+      .use(PrimeVue, {
+        ripple: true,
+        zIndex: {
+          modal: 1100,
+          overlay: 1000,
+          menu: 1000,
+          tooltip: 1100,
+        },
+      })
       .use(ConfirmationService)
       .use(DialogService)
       .mixin({ methods: { route } })
       .directive('styleclass', StyleClass)
-      .directive('ripple', Ripple)
       .directive('tooltip', Tooltip)
       .component('AutoComplete', AutoComplete)
       .component('Button', Button)
@@ -70,11 +74,9 @@ createInertiaApp({
       .component('InputNumber', InputNumber)
       .component('InputText', InputText)
       .component('Message', Message)
-      .component('Paginator', Paginator)
       .component('Password', Password)
       .component('TabView', TabView)
       .component('TabPanel', TabPanel)
-      .component('Textarea', Textarea)
       .mount(el)
   },
 })