added up-down button to areea

pull/44/head
A1Gard 6 months ago
parent 8ed804f615
commit 3be0a8c4e8

@ -50,7 +50,7 @@ class AreaController extends Controller
public function update(Request $request, Area $area) public function update(Request $request, Area $area)
{ {
// return $request->all(); // return $request->all();
foreach ($request->input('parts',[]) as $item) { foreach ($request->input('parts',[]) as $i => $item) {
$data = json_decode($item); $data = json_decode($item);
if ($data == null){ if ($data == null){
continue; continue;
@ -61,11 +61,13 @@ class AreaController extends Controller
$part->area_id = $area->id; $part->area_id = $area->id;
$part->segment = $data->segment; $part->segment = $data->segment;
$part->part = $data->part; $part->part = $data->part;
$part->sort = $i;
$part->save(); $part->save();
}else{ }else{
$part = Part::whereId($data->id)->first(); $part = Part::whereId($data->id)->first();
$part->segment = $data->segment; $part->segment = $data->segment;
$part->part = $data->part; $part->part = $data->part;
$part->sort = $i;
$part->save(); $part->save();
} }
} }

@ -5,3 +5,4 @@ import "./client-custom/confirm.js";
import "../views/segments/preloader/PreloaderCircle/PreloaderCircle.js"; import "../views/segments/preloader/PreloaderCircle/PreloaderCircle.js";
import "../views/segments/top/TopSimple/TopSimple.js"; import "../views/segments/top/TopSimple/TopSimple.js";
import "../views/segments/slider/SliderSimple/SliderSimple.js"; import "../views/segments/slider/SliderSimple/SliderSimple.js";
import "../views/segments/top/TopSimple/TopSimple.js";

@ -3,12 +3,20 @@
<div class="card mt-2" v-for="(part,p) in partsData"> <div class="card mt-2" v-for="(part,p) in partsData">
<div class="card-header"> <div class="card-header">
Part {{ p + 1 }} Part {{ p + 1 }}
<span v-if="p !== 0" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,-1)">
<i class="ri-arrow-up-line"></i>
</span>
<span v-if="p != partsData.length - 1" class="btn btn-secondary btn-sm float-end mx-1" @click="shiftArray(p,1)">
<i class="ri-arrow-down-line"></i>
</span>
</div> </div>
<div class="part-body"> <div class="part-body">
<div class="row"> <div class="row">
<template v-for="(valid,i) in valids"> <template v-for="(valid,i) in valids">
<div @click="changePart(p,valid.segment,valid.part)" :class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')" > <div @click="changePart(p,valid.segment,valid.part)"
<img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part" alt="screeshot"> :class="`col-md-3 `+(valid.data.name == part.part?'selected-part':'can-select')">
<img class="img-fluid mt-2" :src="imageLink+'/'+valid.segment+'/'+valid.part"
alt="screeshot">
{{ valid.part }} [v{{ valid.data.version }}] {{ valid.part }} [v{{ valid.data.version }}]
</div> </div>
</template> </template>
@ -79,8 +87,28 @@ export default {
} }
this.removed.push(this.partsData[i].id); this.removed.push(this.partsData[i].id);
this.partsData.splice(i, 1); this.partsData.splice(i, 1);
},
shiftArray(index, offset) {
console.log(index,offset);
if (index < 0 || index >= this.partsData.length) {
return "Index out of bounds";
} }
const removed = this.partsData.splice(index, 1)[0];
const newIndex = index + offset;
if (newIndex < 0) {
this.partsData.unshift(removed);
} else if (newIndex >= this.partsData.length) {
this.partsData.push(removed);
} else {
this.partsData.splice(newIndex, 0, removed);
}
} }
},
} }
</script> </script>
@ -88,9 +116,11 @@ export default {
#area-designer { #area-designer {
} }
.selected-part { .selected-part {
background: #32CD3233; background: #32CD3233;
} }
.can-select { .can-select {
cursor: pointer; cursor: pointer;
} }

@ -15,3 +15,4 @@
@import "../views/segments/preloader/PreloaderCircle/PreloaderCircle"; @import "../views/segments/preloader/PreloaderCircle/PreloaderCircle";
@import "../views/segments/top/TopSimple/TopSimple"; @import "../views/segments/top/TopSimple/TopSimple";
@import "../views/segments/slider/SliderSimple/SliderSimple"; @import "../views/segments/slider/SliderSimple/SliderSimple";
@import "../views/segments/top/TopSimple/TopSimple";

Loading…
Cancel
Save