marfino3028

thanks

https://i.imgur.com/VFSSvva.png

this is it

i generate from vue https://i.imgur.com/Y0x8vP2.png (like this), and i'm sorry , i forgot to remake the request hahaha i'll change that return

When i use vue for post my json but i have this eror 'order_status of non object'

this is my json

id_buyer: 1, buyer_address: 1, buyer_email: "[email protected]", buyer_telephone: "skh",
buyer_address: 1
buyer_email: "[email protected]"
buyer_telephone: "skh"
id_business: "BS1"
id_buyer: 1
id_customer: 1
id_order_payments: ""
id_seller: 3
note: ""
op_bank: ""
op_diskon_payments: ""
op_invoice: "121"
op_kode_kupon: ""
op_nama_diskon: ""
op_order_time: "1"
op_pay_metode: "Cash"
op_pay_total: 120000
op_ship_time: "2"
op_sub_total: 40000
op_tax: ""
op_tipe_diskon: ""
op_value_diskon: ""
order_status: ""
order_type: "Pesan Antar"
seller_address: "Baluwarti, Kec. Ps. Kliwon, Kota Surakarta, Jawa Tengah 57144"
seller_email: "[email protected]"
seller_name: "Cashier Toko A"
seller_phone: "085357951258"
status_type: ""
transactions: [{order_name_product: "Varian 1 (Product 2)", order_name_variant: "Varian 1 (Product 2)",…}]```


this my transactionController

```public function pushTransactionCashier(Request $request, $idbs) {
        $dt = Carbon::now();
        $today = $dt->toDateString();
        $data = $request->item;
        tb_sales_transactions::create([
            'order_status' => $data->order_status,
            'order_type' => $data->order_type,
            'status_type' => $data->status_type,
            'id_buyer' => $data->id_buyer,// id_buyer === id_customer
            'detail_buyer' => $data->detail_buyer, // true jika onlen false jika dr cashier
            'id_customer' => $data->id_customer,
            'id_business' => $data->id_business,
            'note' => $data->note,
            'created_at' => $today,
            'updated_at' => $today,
        ]);
        if($data->status_type === 'online' && $data->has('buyer_telephone')) {
            tb_buyer_details::create([
                'id_buyer' => $data->id_buyer, // id_buyer === id_customer
                'buyer_name' => $data->buyer_name,
                'buyer_address' => $data->buyer_address,
                'buyer_email' => $data->buyer_email,
                'buyer_telephone' => $data->buyer_telephone,
                // 'created_at' => $today,
                // 'updated_at' => $today,
            ]);
            // udah semua
        }

        tb_seller_details::create([
            'seller_name' => $data->business_name,
            'seller_address' => $data->address_1,
            'seller_email' => $data->email_business,
            'seller_phone' => $data->whatsapp_num,
            // 'created_at' => $today,
        ]);


        foreach ($data->transactions as $key => $a) {
            Tb_order_detail::create([
                'order_name_product' => $a->product_name[$key],
                'order_name_variant' => $a->variant_name[$key],
                'product_sku' => $a->product_sku[$key],
                'product_category' => $a->product_category[$key],
                // 'order_description' => $a->description[$key],
                'order_total_item' => $a->total_item[$key],
                'order_unit_price' => $a->unit_price[$key],
                'order_unit_price_diskon' => $a->unit_price_diskon[$key],
                'order_total_price' => $a->total_price[$key],
                // 'tb_sales_transactions_id' => $a->id_transactions,
                // 'created_at' => $today,
                // 'updated_at' => $today,
            ]);
        }
        Tb_order_payment::create([
            // 'id_order_payments' => $data->id_order_payments,
            // 'id_order_p/ayments' => $lastOrderPaymentsId+1,
            'op_invoice' => $data->invoice,
            'op_sub_total' => $data->sub_total,
            'op_status_diskon' => $data->op_status_diskon,
            'op_nama_diskon' => $data->nama_diskon,
            'op_kode_kupon' => $data->kode_kupon,
            'op_tipe_diskon' => $data->tipe_diskon,
            'op_diskon_payments' => $data->diskon_payments,
            'op_value_diskon' => $data->value_diskon,
            'op_tax' => $data->tax,
            'op_bank' => $data->bank,
            'op_pay_total' => $data->pay_total,
            'op_pay_metode' => $data->pay_metode,
            'op_order_time' => $data->order_time,
            'op_ship_time' => $data->ship_time,
            // 'created_at' => $today,
            // 'updated_at' => $today,
        ]);
        return $request;
    }
}

dashboard.vue (html)

      <div class="vx-row justify-between flex mt-5">
        <div class="vx-col w-full flex">
          <div class="w-full p-2">
            <vx-card :title="`${ item.invoice }`" class="mr-12">
              <div class="w-full">
                <div class="flex justify-between">
                  <div class="w-1/2">
                    <p class="text-xs text-grey">Nama</p>
                    <b class="truncate font-semibold mb-1 hover:text-primary cursor-pointer" @click="OpenMap(item.latitude, item.longitude)">{{ item.name }}</b>
                  </div>
                  <div class="w-1/2 text-right">
                    <p class="text-xs text-grey">Nomor HP</p>
                    <b @click="Whatsapp(item.phone)">{{item.phone}}</b>
                  </div>
                </div>

dashboard.vue (js)

import moduledataCourier from '@/store/courier/moduleCourier.js' computed: { courier () { return this.$store.state.dataCourier } }, ArrivedOrder (item) { const obj = { idTransaksion : item, idbs : this.$store.state.AppActiveUser.id_business } // this.$vs.loading() window.location.reload() this.$store.dispatch('dataCourier/fetchDataDashboardConfirm', obj)

created () { if (!moduledataCourier.isRegistered) { this.$store.registerModule('dataCourier', moduledataCourier) //dataSupplier ganti dengan dataNamamenu moduledataCourier.isRegistered = true } const obj = { idbs : this.$store.state.AppActiveUser.id_business } // this.$vs.loading() this.$store.dispatch('dataCourier/fetchDataDashboard', obj, { root: true })

moduleCourierActions.js

export default {

fetchDataDashboard ({ commit }, item) { return new Promise((resolve, reject) => {

  axios.get(`/api/v1/courier/${item.idbs}/show`, accessToken)
    .then((response) => {
      commit('SET_DATA_COURIER', response.data)
      resolve(response)
    })
    .catch((error) => { reject(error) })
})

}, fetchDataDashboardConfirm ({ commit }, item) { return new Promise((resolve, reject) => {

  axios.get(`/api/v1/courier/${item.idTransaksion}/shipping/${item.idbs}/confirm`, accessToken)
    .then((response) => {
      commit('DATA_CONFIRM', item)
      resolve(response)
    })
    .catch((error) => { reject(error) })
})

},

moduleCourier

import state from './moduleCourierState.js' import mutations from './moduleCourierMutations.js' import actions from './moduleCourierActions.js' import getters from './moduleCourierGetters.js'

export default { isRegistered: false, namespaced: true, state, mutations, actions, getters }

no , i mean in Forms & HTML laravel at input number

how to create number format in this code

{{ Form::number('harga[]', old('harga'), array('id' => 'harga_0')) }}

I Do in my computed :

activeUserInfo () { return this.$store.state.AppActiveUser }

I Do in my methods :

countDate () { return (this.activeUserInfo.expiration_date.getTime() - this.activeUserInfo.start_date.getTime()) / (1000 * 3600 * 24) }

even though the data is there

one again, how to i access from computed to methods ?? coz i will count that

and then ,how to put it in html / data?

my html

<vx-card title="Perbandingan Tipe Pemesanan">
          <!-- CHART -->
          <div slot="no-body">
            <vue-apex-charts
              type="donut"
              height="340"
              class="mb-12 mt-4"
              :options="sessionsByDeviceDonut.chartOptions"
              :series="subscribers_gained.series"
            />
          </div>

          <!-- CHART DATA -->
          <ul>
            <li
              v-for="deviceData in subscribers_gained.analyticsData"
              :key="deviceData.device"
              class="flex mb-3"
            >
              <span
                  class="inline-block h-4 w-4 rounded-full bg-white border-3 border-solid"
                  :class="`border-${deviceData.color}`"
                ></span>
              <span class="ml-2 inline-block font-semibold">{{ deviceData.device }}</span>
              <span class="mx-2">-</span>
              <span class="mr-4">{{ deviceData.sessionsPercentage }}%</span>
              <div class="ml-auto flex -mr-1">
                <span class="mr-1">{{ deviceData.comparedResultPercentage }}%</span>
                <feather-icon
                  :icon=" deviceData.comparedResultPercentage < 0 ? 'ArrowDownIcon' : 'ArrowUpIcon'"
                  :svgClasses="[deviceData.comparedResultPercentage < 0 ? 'text-danger' : 'text-success'  ,'stroke-current h-4 w-4 mb-1 mr-1']"
                ></feather-icon>
              </div>
            </li>
          </ul>
        </vx-card>

<vx-card title="Perbandingan Status Transaksi">
          <!-- CHART -->
          <div slot="no-body">
            <vue-apex-charts
              type="radialBar"
              height="420"
              :options="productOrdersRadialBar.chartOptions"
              :series="productsOrder.series"
            />
          </div>

          <!-- CHART DATA -->
          <ul>
            <li
              v-for="orderData in productsOrder.analyticsData"
              :key="orderData.orderType"
              class="flex mb-3 justify-between"
            >
              <span class="flex items-center">
                <feather-icon
                  :icon="orderData.icon"
                  :svgClasses="[`h-5 w-5 stroke-current`]"
                  :style="`color:${orderData.color}`"
                ></feather-icon>
                <span class="font-semibold ml-2">{{ orderData.orderType }}</span>
              </span>
              <span>{{ orderData.counts }}</span>
            </li>
          </ul>
        </vx-card>

my vue

data () {
    return {
subscribers_gained: [
        {
          analyticsData: this.$store.state.dataReportModule.comparison.analyticsData,
          series: this.$store.state.dataReportModule.comparison.series
        }
      ],
      productsOrder: [
        {
          analyticsData: this.$store.state.dataReportModule.comparisonStatus.analyticsData,
          series: this.$store.state.dataReportModule.comparisonStatus.series
        }
      ]
created () {
if (!moduleReportData.isRegistered) {
      this.$store.registerModule('dataReportModule', moduleReportData)
      moduleReportData.isRegistered = true
    }
    const obj = {
      idbs : this.$store.state.AppActiveUser.id_business
    }
    this.$store.dispatch('dataReportModule/fetchComparison', obj)
    this.$store.dispatch('dataReportModule/fetchComparisonStatus', obj)

My Actions

fetchComparison ({ commit }, item) {
    new Promise((resolve, reject) => {
      axios.get(`/api/v1/report/${item.idbs}/comparison/data/show`, config)
        .then((response) => {
          commit('SET_COMPARISON', response.data)
          resolve(response)
        })
        .catch((error) => { reject(error) })
    })
  },
  fetchComparisonStatus ({ commit }, item) {
    new Promise((resolve, reject) => {
      axios.get(`/api/v1/report/${item.idbs}/comparison/status/data/show`, config)
        .then((response) => {
          commit('SET_COMPARISON_STATUS', response.data)
          resolve(response)
        })
        .catch((error) => { reject(error) })
    })
  },

My Mutations

fetchComparison ({ commit }, item) {
    new Promise((resolve, reject) => {
      axios.get(`/api/v1/report/${item.idbs}/comparison/data/show`, config)
        .then((response) => {
          commit('SET_COMPARISON', response.data)
          resolve(response)
        })
        .catch((error) => { reject(error) })
    })
  },
  fetchComparisonStatus ({ commit }, item) {
    new Promise((resolve, reject) => {
      axios.get(`/api/v1/report/${item.idbs}/comparison/status/data/show`, config)
        .then((response) => {
          commit('SET_COMPARISON_STATUS', response.data)
          resolve(response)
        })
        .catch((error) => { reject(error) })
    })
  },

I Need to get my product_varians with v-for

This Is My JSON

products: [

{

  id_product: 1,

  name_product: 'data A',

  description: 'satu satu satu satu satu satu satu satu satu satu satu satu satu satu satu',

  product_barcode: '423253432424',

  status: 'ready',

  featured: 'aktif',

  id_business: 'BS1',

  product_varians: [

    {

      id_product_option: 1,

      variant_name: 'dsdghsd',

      product_price_normal: '50000',

      product_price_promo: '46000',

      product_hpp: '45000',

      product_sku: 'dashgd2323',

      use_stock: 'aktif',

      use_wholesaler: 'aktif',

      stock: '15',

      wholesaler: '45500',
    }
  ]
},

this my vue with v-for and getters

My getters

getProducts (state) {

return state.products

},

My Computed

...mapGetters('dataCashier', {

  dataProduct: 'getProducts'

})

My Method

varianData (data) {

  this.initValues(data)

  this.id_product = `${data.id_product}`

  this.name_product = `${data.name_product}`

  this.description = `${data.description}`

  this.url_images = `${data.url_images}`

  this.id_product_option = `${data.product_varians.id_product_option}`

  this.variant_name = `${data.product_varians.variant_name}`

  this.product_price_normal = `${data.product_varians.product_price_normal}`

  this.product_price_promo = `${data.product_varians.product_price_promo}`

  this.popupActivo = true
},

my template

  <div :data="product_varians">

  <vs-card v-for="(varian, index) in data" :key="index" class="cardx grid vs-lg='6' vs-sm='6' vs-xs='6' ">

        <div slot="header">                

            <div :data="data[index].variant_name">{{ data[index].variant_name }}</div>

            {{ variant_name }}

        </div>

      </vs-card>

      </div>

</vs-popup>

  <vs-row justify= "space-between">

    <vs-col v-for="product in dataProduct" :key="product.id"  class="pl-1 pr-1" type="flex" vs-justify="center" vs-w="4" >

      <div @click.stop="varianData(product)">

      <vs-card class="cardx grid vs-lg='6' vs-sm='6' vs-xs='6' ">

        <div slot="header">                

            <div class="item-img-container img-container mb-4 bg-white h-64 flex items-center justify-center mb-4 cursor-pointer" >

                    <img :src="`${product.url_images}`" class="rounded w-full">

                </div>

        </div>

        <table>

          <tr>

            <td><p class="text-lg font-bold text-primary mt-5 mb-2">{{ product.name_product }}</p></td>

            </tr>

            <tr>

            <td><p class="text-lg font-semibold text-grey">{{ product.description }}</p></td>

          </tr>

        </table>

      </vs-card>

      </div>

    </vs-col>

  </vs-row>

I want to look for cards by letter but on all pages not on the page that was clicked on, as in datatables

like an example https://imgur.com/a/hXvZEFd

this is my php and bootstrap

Products

          

Add Products

<p class="card-text">

<?php

$batas = 6;

$halaman = isset($_GET['halaman'])?(int)$_GET['halaman'] : 1;

$halaman_awal = ($halaman>1) ? ($halaman * $batas) - $batas : 0;	

$Previous = $halaman - 1;

$next = $halaman + 1;

$data = $db_handle->runQuery("SELECT * FROM tblproduct");

$jumlah_data = count($data);

$total_halaman = ceil($jumlah_data / $batas);

$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC limit $halaman_awal, $batas");

if (!empty($product_array)) { 

	foreach($product_array as $key=>$value){
?>

	<div class="product-item ml-3 mb-5 cardz" data-string="<?php echo $product_array[$key]["name"]; ?>">

		<form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>">

		<?php

		$setting = array(

		'directory' => 'product-images', // directory file compressed output

		'file_type' => array( // file format allowed

			'image/jpeg',

			'image/png',

			'image/gif'

		)

		);

		$ImgCompressor = new ImgCompressor($setting);

		?>

		<div class="product-image " ><img src="<?php $result = $ImgCompressor->run('product-

images/'.$product_array[$key]["image"], 'jpg', 5); echo 'product-images/comp_'.$product_array[$key]["image"]; ?>" width="150px" height="150px">

		<div class="product-tile-footer">

		<div class="product-title " ><?php echo $product_array[$key]["name"]; ?></div>

		<div class="product-price"><?php echo "Rp. ".number_format($product_array[$key]

["price"],0,',','.');?>

		<div class="cart-action">

		<input type="text" class="product-quantity" name="quantity" value="1" size="1" />		

	</div>

	<input type="submit" value="Add to Cart" class="btn btn-primary btn-block waves-effect waves-light btn-block" />

</div>

		</form>
		
	</div>

<?php

	}

}

?>

		<ul class="pagination justify-content-center">

			<li class="page-item">

				<a class="page-link" <?php if($halaman > 1){ echo "href='?halaman=$Previous'"; } ?>>Previous</a>

			</li>

			<?php 

			for($x=1;$x<=$total_halaman;$x++){

				?> 

				<li class="page-item"><a class="page-link" href="?halaman=<?php echo $x ?>"><?php echo $x; ?></a></li>

				<?php

			}

			?>				

			<li class="page-item">

				<a  class="page-link" <?php if($halaman < $total_halaman) { echo 

"href='?halaman=$next'"; } ?>>Next

			</li>

		</ul>

	</nav>

</p>

this is my javascript

$(".filter").on("keyup", function() { var input = $(this).val().toUpperCase(); $(".cardz").each(function() {

if ($(this).data("string").toUpperCase().indexOf(input) < 0) {

  $(this).hide();

} else {

  $(this).show();

}

})

});

Thank you, yes, I wrote it wrong on the model

SQLSTATE[42S22]: Column not found: 1054 Unknown column 'companies.companies_id' in 'where clause' (SQL: select * from companies where companies.companies_id = 4 and companies.companies_id is not null) (View: C:\xampp\htdocs\transisi\laravel-transisi\resources\views\livewire\employees\index.blade.php) (View: C:\xampp\htdocs\transisi\laravel-transisi\resources\views\livewire\employees\index.blade.php)

index.php

class Index extends Component

{

public function destroy($employeesId)

{

$employees = Employees::find($employeesId);

if($employees) {

    $employees->delete();

}

session()->flash('message', 'Data Berhasil Dihapus.');

return redirect()->route('employees.index');

}

public function render()

{
    $employees = Employees::join('companies', 'employees.companies_id', '=', 'companies.id')

    ->select('employees.*', 'companies.nama AS companies')->get(); //MEMBUAT QUERY UNTUK MENGAMBIL 

DATA return view('livewire.employees.index', [

        'employees' => Employees::latest()->paginate(5)
    ]);

}

}

edit.php

public function mount($id)

{

    $employees = Employees::find($id);
    
    if($employees) {

        $this->employeesId   = $employees->id;

        $this->nama    = $employees->nama;

        $this->email  = $employees->email;

        $this->companies  = $employees->companies_id;

    }

}

public function update()
{

    $this->validate([

        'nama'   => 'required',

        'email' => 'required',

        'companies_id' => 'required',

    ]);

    if($this->employeesId) {

        $employees = Employees::find($this->employeesId);

        if($employees) {

            $employees->update([

                'nama'     => $this->nama,

                'email'   => $this->email,

                'companies_id'   => $this->companies,
            ]);

        }

    }


    session()->flash('message', 'Data Berhasil Diupdate.');

    return redirect()->route('employees.index');
}

public function render()

{

    return view('livewire.employees.edit');

}

}

create.php

public function render()

{

    $this->employees = Employees::join('companies', 'employees.companies_id', '=', 'companies.id')

    ->select('employees.*', 'companies.nama AS companies')->get(); //MEMBUAT QUERY UNTUK MENGAMBIL DATA  

    return view('livewire.employees.create');

}
public function store()

{

    $this->validate([
        'nama'   => 'required|string',

        'email' => 'required|string',

        'companies_id' => 'required|string'

        ]);
    
    $employees = Employees::create([

        'nama'     => $this->nama,

        'email'   => $this->email,

        'companies_id'   => $this->companies

    ]);

    session()->flash('message', 'Data Berhasil Disimpan.');

    return redirect()->route('companies.index');

}

index.blade.php

        @foreach($employees as $employeess)

        <tr>

            <td>{{ $employeess->nama }}</td>

            <td>{{ $employeess->companies }}</td>

            <td>{{ $employeess->email }}</td>

            <td class="text-center">

                <a href="{{ route('employees.edit', $employeess->id) }}" class="btn btn-sm btn-primary">EDIT</a>

                <button wire:click="destroy({{ $employeess->id }})" class="btn btn-sm btn-

danger">DELETE

            </td>

        </tr>

        @endforeach

    </tbody>

</table>

{{ $employees->links() }}

sort the answer

transactions: [

{
  id: 1,

  //pemilik

  namecom: 'Pesanyuk.id',

  addresscom: 'Jl Cawas Gayam Rt 1 Rw 9 Gayam Sukoharjo',

  mailcom: '[email protected]',

  mobilecom: '+6285730277132',

  //pembeli

  nameRecipient: 'Marfino Hamzah',

  addressRecipient: 'Jl Arjuna 2 no 4 rt 03 rw 04 serengan solo 57155',

  mailRecipient: '[email protected]',

  mobileRecipient: '+6289626312680',

  //invoice

  invoice: 'INV000110',

  ordertime: '30 Sep 2020, 20.32 WIB',

  shiptime: '30 Sep 2020, 20.50 WIB',

  shipVia: 'JNE',

  order: [

    {

      item: 'Es Teh',

      itemDesc: 'Manis Murah Meriah',

      qty: 2,

      unitPrice: 9000,

      amount: 18000

    },

    {

      item: 'Es Teler',

      itemDesc: 'Enak Murah Meriah',

      qty: 3,

      unitPrice: 7000,

      amount: 21000

    }

  ],

  metode: 'Go Food',

  status: 'done',

  bank: 'BCA',

  subtotal: 39000,

  discountPercentage: 5,

  discountedAmount: 1950,

  total: 37050

},

when i make the code i get 3 errors

1. Uncaught (in promise)

Object { message: "initMap is not a function", name: "InvalidValueError", stack: "[email protected]https://maps.googleapis.com/maps/api/js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs& callback=initMap&libraries=&v=weekly:70:347\[email protected]https://maps.googleapis.com/maps/api /js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs&callback=initMap&libraries=&v=weekly:70:457\[email protected]https://maps.googleapis.com/maps/api /js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs&callback=initMap&libraries=&v=weekly:141:233\nJj/<@https://maps.googleapis.com/maps/api/js?key=AIzaSyD028aZa3qI77oP8kUQKV2kHk4uBiW0mOs& callback=initMap&libraries=&v=weekly:141:120\n" }

1. [Vue warn]: data functions should return an object:

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

1. Uncaught TypeError: google_maps__WEBPACK_IMPORTED_MODULE_0__.default is undefined

Enviar a esta dirección

import google from 'google-maps'

export default {

data () {

let map

let latLng = {}

  const onUbicacionConcedida = ubicacion => {

      latLng.lat = ubicacion.coords.latitude

      latLng.lng = ubicacion.coords.longitude

      initMap()

  }

  const onErrorDeUbicacion = err => {

      console.log("Error obteniendo ubicación: ", err);

  }

  const opcionesDeSolicitud = {

      enableHighAccuracy: true, // Alta precisión

      maximumAge: 0, // No queremos caché

      timeout: 5000 // Esperar solo 5 segundos

  };

    navigator.geolocation.getCurrentPosition(onUbicacionConcedida, onErrorDeUbicacion, 

opcionesDeSolicitud);

    function initMap() {

        map = new google.maps.Map(document.getElementById("map"), {

            center: latLng,

            zoom: 15,

            zoomControl: false,

            fullscreenControl: false,

            mapTypeControl: false,

            streetViewControl: false

        });

        const marker = new google.maps.Marker({ map,

            draggable: true,

            animation: google.maps.Animation.DROP,

            title: "Click to zoom",

        });

        function handleChangePosition(data) {

            const lat = data.latLng.lat()

            const lng = data.latLng.lng()

            const geocoder = new google.maps.Geocoder()

            console.log(marker)

            marker.setPosition({ lat, lng })

            map.panTo({ lat, lng })

            geocoder.geocode({ location: { lat, lng } }, (results, status) => {

                if (status === 'OK') {

                    const address = results[0].formatted_address

                    const input = document.querySelector('#address')

                    input.value = address

                }

            })

        }

        marker.addListener('dragend', (data) => {

            handleChangePosition(data)

        })

        map.addListener('click', (data) => {

            handleChangePosition(data)

        })

    }

}

}

with that conditioning why not work ??

<vs-button @click="deleteMultiple()" v-if="selected === 0 || selected > 0" class="p-3 mb-4 mr-4 rounded-lg cursor-pointer shadow-md flex items-center justify-between text-lg font-medium text-base text-white bg-danger">Hapus Pelanggan

i do php artisan storage:link and success but cant display images , and my images in storage/app/public/beasiswa/image.jpg

index.blade.php

                @forelse($beasiswas as $row)

                    <tr>

                        <td class="border px-4 py-2">{{ $row->nama }}</td>

                        <td class="border px-4 py-2">{{ $row->deskripsi }}</td>

                        <td class="border px-4 py-2"><img src="{{ asset('storage/app/public/beasiswa'.$row->foto) }}"></td>

                        <td class="border px-4 py-2">{{ $row->semester}}</td>
                        <td class="border px-4 py-2">

                            <div class="vx-row mb-6">

                            <div class="vx-col sm:w-1/2 w-full">

                            <button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-black 

font-bold py-2 px-4 rounded">Edit

                            </div>
                            <div class="vx-col sm:w-1/2 w-full">

                            <button wire:click="delete({{ $row->id }})" class="mt-6 bg-red-500 hover:bg-red-700 text-

black font-bold py-2 px-4 rounded">Hapus

                            </div>

                        </td>

                    </tr>

filesystem.php

'public' => [

        'driver' => 'local',

        'root' => storage_path('app/public'),

        'url' => env('').'/storage',

        'visibility' => 'public',

    ],

thanks solved

Models/Beasiswa.php

protected $fillable = [
    'id','deskripsi', 'foto', 'nama','semester_id','users_id'
];

protected $casts = [
    'id' => 'integer',
    'deskripsi' => 'string',
    'foto' => 'string',
    'nama' => 'string',
    'semester_id' => 'integer',
    'users_id' => 'integer'
];

public function users(){
    return $this->hasMany(\App\User::class, 'users_id');
}
public function semester(){
    return $this->hasMany(\App\Semester::class, 'semester_id');
}

Livewire/Beasiswa/Index.php

public function store()

{

    $validatedData =  $this->validate([
        'nama' => 'required|string',

        'deskripsi' => 'required|string',

        'foto' => 'required|mimes:jpeg,png,jpg,gif,svg,pdf,docx|max:10048',

        'semester' => 'required'
    ]);

    $validatedData['nama'] = $this->foto->store('files', 'public');

    $foto = md5($this->foto . microtime()).'.'.$this->foto->extension();

    $this->foto->storeAs('beasiswa', $foto);

    Beasiswa::updateOrCreate(['id' => $this->id], [    
        'nama' => $this->nama,
        'deskripsi' => $this->deskripsi,
        'foto' => $foto,
        'semester' => $this->semester,
        'user_id' => $this->id
        
    ]);

migrations/create_beasiswa_table.php

public function up()

{

    Schema::create('beasiswa', function (Blueprint $table) {

        $table->id();

        $table->string('deskripsi');

        $table->string('foto');

        $table->string('nama');

        $table->foreignId('semester_id');

        $table->foreignId('users_id');

        $table->foreign('users_id')->references('id')->on('users')->nullable();

        $table->foreign('semester_id')->references('id')->on('semester')->nullable();

        $table->timestamps();

    });

}

livewire/beasiswa/index.php

{

public $beasiswas,$nama,$deskripsi, $foto, $semester_id, $users_id;

public $isModal = 0;

public function render()

{

    $this->beasiswas = Beasiswa::join('semester', 'beasiswa.semester_id', '=', 'semester.id')

    ->join('users', 'beasiswa.users_id', '=', 'users.id')

    ->select('beasiswa.*', 'semester.nama AS semester', 'users.*')

    ->orderBy('created_at', 'DESC')->Auth::user()->get();

    return view('livewire.beasiswa.index');

}

public function create()

{

    $this->resetFields();

    $this->openModal();

}
public function closeModal()

{

    $this->isModal = false;

}

public function openModal()

{
    $this->isModal = true;
}
public function resetFields()
{
    $this->nama = '';
    $this->deskripsi = '';
    $this->foto = '';
    $this->semester_id = '';
    $this->users_id = '';
}
public function store()
{

    //MEMBUAT VALIDASI

    $validatedData =  $this->validate([

        'nama' => 'required|string',

        'deskripsi' => 'required|string',

        'foto' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',

        'semester' => 'required'

    ]);

    $validatedData['nama'] = $this->file->store('files', 'public');

    //QUERY UNTUK MENYIMPAN / MEMPERBAHARUI DATA MENGGUNAKAN UPDATEORCREATE

    //DIMANA ID MENJADI UNIQUE ID, JIKA IDNYA TERSEDIA, MAKA UPDATE DATANYA

    //JIKA TIDAK, MAKA TAMBAHKAN DATA BARU

    Beasiswa::updateOrCreate(['id' => $this->users_id], [

        'nama' => $this->nama,

        'deskripsi' => $this->deskripsi,

        'foto' => $this->foto,

        'semester' => $this->semester,

        'id' => $this->id,

    ]);

    //BUAT FLASH SESSION UNTUK MENAMPILKAN ALERT NOTIFIKASI

    session()->flash('message', $this->users_id ? $this->nama . ' Diperbaharui': $this->nama . ' Ditambahkan');

    $this->closeModal(); //TUTUP MODAL

    $this->resetFields(); //DAN BERSIHKAN FIELD

}

//FUNGSI INI UNTUK MENGAMBIL DATA DARI DATABASE BERDASARKAN ID MEMBER

public function edit($id)

{

    $beasiswa = Beasiswa::find($id); //BUAT QUERY UTK PENGAMBILAN DATA

    //LALU ASSIGN KE DALAM MASING-MASING PROPERTI DATANYA

    $this->users_id = $id;

    $this->nama = $beasiswa->nama;

    $this->deskripsi = $beasiswa->deskripsi;

    $this->foto = $beasiswa->foto;

    $this->semester_id = $beasiswa->semester_id;

    $this->openModal(); //LALU BUKA MODAL

}

//FUNGSI INI UNTUK MENGHAPUS DATA

public function delete($id)

{

    $beasiswa = Beasiswa::find($id); //BUAT QUERY UNTUK MENGAMBIL DATA BERDASARKAN ID

    $beasiswa->delete(); //LALU HAPUS DATA

    session()->flash('message', $beasiswa->nama . ' Dihapus'); 
}

}

index.blade.php

Data Anggota

@if (session()->has('message'))

{{ session('message') }}

@endif

 <button wire:click="create()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded 

my-3">Tambah Anggota

    @if($isModal)

        @include('livewire.beasiswa.create')

    @endif

    <table class="table-fixed w-full">

        <thead>

            <tr class="bg-gray-100">

                <th class="px-4 py-2">Nama</th>

                <th class="px-4 py-2">Deskripsi</th>

                <th class="px-4 py-2">Foto</th>

                <th class="px-4 py-2 w-20">Semester</th>

                <th class="px-4 py-2">Action</th>

            </tr>

        </thead>

        <tbody>

            @forelse($members as $row)

                <tr>

                    <td class="border px-4 py-2">{{ $row->nama }}</td>

                    <td class="border px-4 py-2">{{ $row->eskripsi }}</td>

                    <td class="border px-4 py-2">{{ $row->foto }}</td>

                    <td class="border px-4 py-2">{{ $row->semester}}</td>

                    <td class="border px-4 py-2">

                        <button wire:click="edit({{ $row->id }})" class="bg-blue-500 hover:bg-blue-700 text-white font-

bold py-2 px-4 rounded">Edit

                        <button wire:click="delete({{ $row->id }})" class="bg-red-500 hover:bg-red-700 text-white font-

bold py-2 px-4 rounded">Hapus

                    </td>

                </tr>

            @empty

                <tr>

                    <td class="border px-4 py-2 text-center" colspan="5">Tidak ada data</td>

                </tr>

            @endforelse

        </tbody>

    </table>

</div>

how to i separate and resupply that code ??

What can i do ??

use App\Models\Semester; use App\Models\Nilai; $this->nilai = Nilai::join('semester', 'beasiswa.semester_id', '=', 'semester.id') ->join('users', 'beasiswa.users_id', '=', 'users.id') ->select('nilai.', 'semester.nama AS semester', 'users.') ->orderBy('created_at', 'DESC')->get(); $this->validate([ 'form.email' => 'required|email', 'form.name' => 'required', 'form.nim' => 'required', 'form.angkatan' => 'required', 'form.alamat' => 'required', 'form.hp' => 'required|max:13', 'form.beasiswa' => 'required', 'form.password' => 'required|confirmed', ]); User::create($this->form); return redirect(route('login')); }

this is my relation https://imgur.com/dmmrqDh

My script on template

<div class="here-map">
    <div ref="map" v-bind:style="{ width: width + '%', height: height }" style="float: left"></div>
    <ol v-bind:style="{ width: (100 - width - 5) + '%'}" style="float: right; min-height: 530px; margin-left: 20px; margin-top: 0">
        <li v-bind="directions in directions">
            <p v-html="directions.instruction"></p>
        </li>
    </ol>
</div>

My script js on HereMap.vue

import H from 'here-maps/mapsjs-core' import 'here-maps/mapsjs-service' import 'here-maps/mapsjs-ui' import 'here-maps/mapsjs-mapevents' export default { name: 'HereMap', data () { return { map: {}, platform: {}, geocoder: {}, directions: [] } }, props: { appId: String, appCode: String, lat: String, lng: String, width: String, height: String }, created () { this.platform = new H.service.Platform({ 'app_id': this.appId, 'app_code': this.appCode }) this.router = this.platform.getRoutingService() this.geocoder = this.platform.getGeocodingService() }, mounted () { this.map = new H.Map( this.$refs.map, this.platform.createDefaultLayers().normal.map, { zoom: 10, center: { lng: this.lng, lat: this.lat } } ) }, methods: { route (start, finish) { const params = { 'mode': 'fastest;car', 'representation': 'display' } let waypoints = [] this.map.removeObjects(this.map.getObjects()) this.directions = [] waypoints = [this.geocode(start), this.geocode(finish)] Promise.all(waypoints).then(result => { const markers = [] for (let i = 0; i < result.length; ++i) { params[`waypoint, ${i}`] = `${result[i][0].lat },${ result[i][0].lng}` markers.push(new H.map.Marker(result[i][0])) } this.router.calculateRoute(params, data => { if (data.response) { for (let i = 0; i < data.response.route[0].leg.length; ++i) { this.directions = this.directions.concat(data.response.route[0].leg[i].maneuver) } data = data.response.route[0] const lineString = new H.geo.LineString() data.shape.forEach(point => { const parts = point.split(',') lineString.pushLatLngAlt(parts[0], parts[1]) }) const routeLine = new H.map.Polyline(lineString, { style: { strokeColor: 'blue', lineWidth: 5 } }) this.map.addObjects([routeLine, ...markers]) this.map.setViewBounds(routeLine.getBounds()) } }, error => { console.error(error) }) }) }, geocode (query) { return new Promise((resolve, reject) => { this.geocoder.geocode({ searchText: query }, data => { if (data.Response.View[0].Result.length> 0) { data = data.Response.View[0].Result.map(location => { return { lat: location.Location.DisplayPosition.Latitude, lng: location.Location.DisplayPosition.Longitude } }) resolve(data) } else { reject({ 'message': 'No data found' }) } }, error => { reject(error) }) }) } } }

thanks solved :)

what's wrong ?? and what will i do ??

HereMap.vue

let waypoints = [] this.map.removeObjects(this.map.getObjects()) this.directions = [] waypoints = [this.geocode(start), this.geocode(finish)] Promise.all(waypoints).then(result => { const markers = [] for (let i = 0; i < result.length; ++i) { params[waypoint, ${i}] = ${result[i][0].lat },${ result[i][0].lng} markers.push(new H.map.Marker(result[i][0])) }

login.blade.php

        <div>
            <x-jet-label for="email" value="{{ __('Email') }}" />
            <x-jet-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
        </div>
        <div class="mt-4">
            <x-jet-label for="password" value="{{ __('Password') }}" />
            <x-jet-input id="password" class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
        </div>
        <div class="block mt-4">
            <label for="remember_me" class="flex items-center">
                <input id="remember_me" type="checkbox" class="form-checkbox" name="remember">
                <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
            </label>
        </div>
        <div class="flex items-center justify-end mt-4">
            @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif

            <x-jet-button class="ml-4">
                {{ __('Login') }}
            </x-jet-button>
        </div>
    </form>

web.php

Route::get('/', function () { return view('auth.register'); }); Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () { return view('dashboard'); })->name('dashboard');

http/livewire/login.php

class Login extends Component { public $form = [ 'email' => '', 'password'=> '', ]; public function submit() { $this->validate([ 'email' => 'required|email', 'password' => 'required', ]); Auth::attempt($this->form); return redirect(route('home')); } public function render() { return view('auth.login'); } }

[Vue warn]: Error in render: "TypeError: _vm.manage is undefined"

found in

---> at src/views/pages/owner/Kelola.vue at src/layouts/main/Main.vue at src/App.vue vue.runtime.esm.js:619 TypeError: _vm.manage is undefined render Kelola.vue:237

Kelola.Vue manage () { //ganti suppliers dengan menu yang baru return this.$store.state.dataManage.manage //ganti suppliers dengan menu yang baru | dataSupplier wajib sama dengan bagian created > register module | ganti nama supplierswajib sama dengan state.js nya }, queriedItems () { return this.$refs.table ? this.$refs.table.queriedResults.length : this.manage.length //ganti suppliers dengan menu yang baru } },