dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify selected materials management in CuttingPosCombinationDialog; streamline removal logic and enhance layout for better responsiveness and user interaction
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (8.3) (push) Waiting to run
Details
tests / ci (8.4) (push) Waiting to run
Details
tests / ci (8.5) (push) Waiting to run
Details

Browse Source
This commit is contained in:
Yoga Pangestu 2026-07-05 14:53:41 +07:00
parent 2a49018c5e
commit 0f9865ffb3
1 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/js/pages/admin/manage/cuttings/form/CuttingPosCombinationDialog.vue
View File

@ -79,9 +79,7 @@ function toggleVariant(rawMaterial: CuttingRawMaterialCatalogItem, price: Cuttin
); );
if (index !== -1) { if (index !== -1) {
if (!selectedMaterials.value[index].is_initial) {
selectedMaterials.value.splice(index, 1); selectedMaterials.value.splice(index, 1);
}
} else { } else {
selectedMaterials.value.push({ selectedMaterials.value.push({
raw_material_price_id: price.id, raw_material_price_id: price.id,
@ -99,7 +97,7 @@ function toggleVariant(rawMaterial: CuttingRawMaterialCatalogItem, price: Cuttin
function removeSelected(priceId: number) { function removeSelected(priceId: number) {
selectedMaterials.value = selectedMaterials.value.filter( selectedMaterials.value = selectedMaterials.value.filter(
(item) => item.raw_material_price_id !== priceId || item.is_initial, (item) => item.raw_material_price_id !== priceId,
); );
} }
@ -183,8 +181,9 @@ watch(open, (value) => {
<p class="text-sm font-medium">Bahan Baku Terpilih ({{ selectedMaterials.length }})</p> <p class="text-sm font-medium">Bahan Baku Terpilih ({{ selectedMaterials.length }})</p>
<div class="space-y-2"> <div class="space-y-2">
<div v-for="item in selectedMaterials" :key="item.raw_material_price_id" <div v-for="item in selectedMaterials" :key="item.raw_material_price_id"
class="flex items-center gap-2 rounded-md border p-2" class="flex flex-col gap-2 rounded-md border p-2 sm:flex-row sm:items-center"
:class="item.is_initial ? 'border-primary bg-primary/5' : ''"> :class="item.is_initial ? 'border-primary bg-primary/5' : ''">
<div class="flex items-center gap-2 flex-1 min-w-0">
<PosCatalogVariantThumb :items="item.images" /> <PosCatalogVariantThumb :items="item.images" />
<div class="min-w-0 flex-1"> <div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium"> <p class="truncate text-sm font-medium">
@ -194,18 +193,23 @@ watch(open, (value) => {
Stok: {{ item.stock_formatted }} Stok: {{ item.stock_formatted }}
</Badge> </Badge>
</div> </div>
<div class="flex items-center gap-1" @click.stop> <Button type="button" variant="ghost" size="icon-sm"
class="text-destructive shrink-0 sm:hidden" @click="removeSelected(item.raw_material_price_id)">
<X class="size-3.5" />
</Button>
</div>
<div class="flex items-center gap-2 sm:gap-1">
<Label class="text-xs whitespace-nowrap">Pemakaian:</Label> <Label class="text-xs whitespace-nowrap">Pemakaian:</Label>
<DecimalInput v-model="item.material_usage" class="h-7 w-20" /> <DecimalInput v-model="item.material_usage" class="h-7 w-20" />
<span class="text-xs text-muted-foreground">{{ item.unit_abbreviation }}</span> <span class="text-xs text-muted-foreground">{{ item.unit_abbreviation }}</span>
</div> <Button type="button" variant="ghost" size="icon-sm"
<Button v-if="!item.is_initial" type="button" variant="ghost" size="icon-sm" class="text-destructive shrink-0 hidden sm:inline-flex" @click="removeSelected(item.raw_material_price_id)">
class="text-destructive" @click="removeSelected(item.raw_material_price_id)">
<X class="size-3.5" /> <X class="size-3.5" />
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="relative"> <div class="relative">
<Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" /> <Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
@ -255,8 +259,8 @@ watch(open, (value) => {
</div> </div>
</div> </div>
<div class="flex items-center justify-between border-t pt-4"> <div class="flex flex-col gap-3 border-t pt-4 sm:flex-row sm:items-center sm:justify-between">
<div class="flex items-center gap-3"> <div class="flex flex-wrap items-center gap-3">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Label class="text-sm whitespace-nowrap">Hasil:</Label> <Label class="text-sm whitespace-nowrap">Hasil:</Label>
<NumberInput v-model="combinationResult" class="h-8 w-20" placeholder="0" /> <NumberInput v-model="combinationResult" class="h-8 w-20" placeholder="0" />
@ -267,10 +271,10 @@ watch(open, (value) => {
</p> </p>
</div> </div>
<div class="flex gap-2"> <div class="flex gap-2">
<Button type="button" variant="outline" :disabled="loading" @click="open = false"> <Button type="button" variant="outline" class="flex-1 sm:flex-none" :disabled="loading" @click="open = false">
Batal Batal
</Button> </Button>
<Button type="button" :disabled="loading || selectedMaterials.length < 2" @click="submit"> <Button type="button" class="flex-1 sm:flex-none" :disabled="loading || selectedMaterials.length < 2" @click="submit">
<Layers class="size-4 mr-1" /> <Layers class="size-4 mr-1" />
{{ loading ? 'Menyimpan...' : 'Simpan Kombinasi' }} {{ loading ? 'Menyimpan...' : 'Simpan Kombinasi' }}
</Button> </Button>