webfussel/propapier
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add: only delete swipe, edit on tap

Browse source 
Edit price cards on tap, only delete swipe exists, fixed dialogs, add ripple
This commit is contained in:
webfussel 2025-05-12 14:56:05 +02:00
parent 1a5dd102e0
commit 38cd37cf74
9 changed files with 145 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

84
app/components/Pp/PriceCardDialog.vue
View file

@ -1,6 +1,6 @@
<template>
<dialog ref="dialog" closedby="any">
<div class="wrapper">
<dialog ref="dialog" closedby="none">
<div class="wrapper" ref="wrapper">
<form method="dialog">
<header class="flex-row">
{{ currentCardIndex > -1 ? 'Bearbeiten' : 'Neues hinzufügen' }}
@ -81,38 +81,32 @@
</template>
<script setup lang="ts">
import type { Card } from '../../../shared/Card';
import type { Card } from '../../../shared/Card'
type Props = {
currentCardIndex: number;
currentCard?: Card;
};
currentCardIndex: number
currentCard?: Card
}
const { currentCardIndex, currentCard } = defineProps<Props>();
const emit = defineEmits(['update']);
const { currentCardIndex, currentCard } = defineProps<Props>()
const emit = defineEmits(['update'])
const dialog = useTemplateRef<HTMLDialogElement>("dialog");
const dialog = useTemplateRef<HTMLDialogElement>('dialog')
const wrapper = useTemplateRef<HTMLElement>('wrapper')
const checkPrice = () => {
if (!currentCard) {
return false;
}
if (currentCard.price.length === 0) {
return false;
}
const price = +replaceComma(currentCard.price);
return !isNaN(price);
};
if (!currentCard) return false
if (currentCard.price.length === 0) return false
const price = +replaceComma(currentCard.price)
return !isNaN(price)
}
const checkIfInteger = (toBeNumber: string) => {
if (toBeNumber.length === 0) {
return false;
}
if (toBeNumber.includes(",") || toBeNumber.includes(".")) {
return false;
}
return !isNaN(+toBeNumber);
};
if (toBeNumber.length === 0) return false
if (toBeNumber.includes(',') || toBeNumber.includes(',')) return false
return !isNaN(+toBeNumber)
}
const validFields = reactive({
name: true,
@ -120,32 +114,32 @@ const validFields = reactive({
roles: true,
sheets: true,
layers: true,
});
})
const validate = () => {
if (!currentCard) {
return;
}
if (!currentCard) return
validFields.name = currentCard.name.length > 0;
validFields.price = checkPrice();
validFields.roles = checkIfInteger(currentCard.roles);
validFields.sheets = checkIfInteger(currentCard.sheets);
validFields.layers = checkIfInteger(currentCard.layers);
validFields.name = currentCard.name.length > 0
validFields.price = checkPrice()
validFields.roles = checkIfInteger(currentCard.roles)
validFields.sheets = checkIfInteger(currentCard.sheets)
validFields.layers = checkIfInteger(currentCard.layers)
if (Object.values(validFields).every((value) => value)) {
emit('update');
dialog.value?.close();
emit('update')
dialog.value?.close()
}
};
}
onMounted(() => {
dialog.value?.addEventListener('close', () => {
validFields.name = true;
validFields.price = true;
validFields.roles = true;
validFields.sheets = true;
validFields.layers = true;
});
});
validFields.name = true
validFields.price = true
validFields.roles = true
validFields.sheets = true
validFields.layers = true
})
onClickOutside(wrapper, () => dialog.value?.close())
})
</script>