-
-
+
+
Part number
+
+ {{ partNumber }}
+
+
+
+
+
+
+
Description
+
+ {{ description }}
+
+
+
+
+
@@ -88,6 +87,10 @@ export default {
openSelectDirect: {
type: Boolean,
default: false,
+ },
+ responsive: {
+ type: Boolean,
+ default: true,
}
},
computed: {
@@ -164,16 +167,63 @@ export default {
display: flex;
align-items: center;
gap: 0.8rem;
+ width: 100%;
}
.container {
display: grid;
grid-template-columns: auto 1fr;
- grid-template-rows: repeat(3, fit-content(0));
+ grid-template-rows: repeat(4, fit-content(0));
gap: 1.6rem;
flex: 1 1 auto;
}
+/* Responsive Layout für Breiten unter 1500px - nur wenn responsive aktiviert ist */
+@media (max-width: 1500px) {
+ .container.responsive {
+ grid-template-columns:
+ minmax(auto, max-content) /* Spalte 1: Label */
+ minmax(120px, 1fr) /* Spalte 2: Input */
+ minmax(auto, max-content) /* Spalte 3: Label */
+ minmax(120px, 1fr) /* Spalte 4: Input/Dropdown */
+ minmax(auto, max-content) /* Spalte 5: Label */
+ minmax(120px, 1fr) /* Spalte 6: Input */
+ minmax(auto, max-content) /* Spalte 7: Label */
+ minmax(120px, 1fr); /* Spalte 8: Input/Dropdown */
+ grid-template-rows: auto;
+ gap: 1.2rem 1rem;
+ align-items: center;
+ }
+
+ .container.responsive .field-group {
+ display: contents;
+ }
+
+ .container.responsive .caption-column {
+ justify-self: start;
+ }
+
+ .container.responsive .input-column {
+ min-width: 0;
+ }
+
+ .container.responsive .field-group {
+ display: contents;
+ }
+
+ .container.responsive .caption-column {
+ justify-self: start;
+ }
+
+ .container.responsive .input-column {
+ min-width: 0;
+ }
+}
+
+.field-group {
+ display: contents;
+}
+
.input-column {
display: flex;
justify-content: space-between;
@@ -201,7 +251,6 @@ export default {
background: white;
border-radius: 0.4rem;
padding: 0.6rem 1.2rem;
- /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
border: 0.2rem solid #E3EDFF;
transition: all 0.1s ease;
flex: 1 1 auto;
@@ -210,7 +259,6 @@ export default {
.text-container:hover {
background: #EEF4FF;
border: 0.2rem solid #8DB3FE;
- /*transform: translateY(2px);*/
transform: scale(1.01);
}
@@ -224,8 +272,16 @@ export default {
}
.input-field-tariffrate {
- min-width: 10rem;
+ min-width: 20rem;
flex: 0 1 10rem;
}
+/* Optimierung für kleinere Bildschirme unter 1500px - nur wenn responsive aktiviert ist */
+@media (max-width: 1500px) {
+ .container.responsive .input-field-tariffrate {
+ min-width: auto;
+ flex: 1 1 auto;
+ }
+}
+
\ No newline at end of file
diff --git a/src/frontend/src/components/layout/edit/PackagingEdit.vue b/src/frontend/src/components/layout/edit/PackagingEdit.vue
index 1df58c0..b319ecf 100644
--- a/src/frontend/src/components/layout/edit/PackagingEdit.vue
+++ b/src/frontend/src/components/layout/edit/PackagingEdit.vue
@@ -1,22 +1,25 @@
-
-
Length
+
+
+
HU length
-
Dimension unit
-
+
Dimension unit
+
-
Width
+
HU width
@@ -24,10 +27,11 @@
-
Height
+
HU height
@@ -35,10 +39,11 @@
-
Weight
+
HU weight
@@ -50,7 +55,8 @@
Pieces per HU
@@ -115,6 +121,10 @@ export default {
stackable: {
type: Boolean,
required: true,
+ },
+ responsive: {
+ type: Boolean,
+ default: true,
}
},
computed: {
@@ -153,14 +163,14 @@ export default {
const unitType = this.huDimensionUnits.find(unit => unit.id === value)?.value;
const decimals = (unitType === 'cm') ? 2 : ((unitType === 'm') ? 3 : 0);
- const parsedLength = (this.length ?? null) === null ? null : parseFloat(this.length.toFixed(decimals));
- this.$emit('update:length', parsedLength);
+ const parsedLength = (this.length ?? null) === null ? null : parseFloat(this.length.toFixed(decimals));
+ this.$emit('update:length', parsedLength);
- const parsedHeight = (this.height ?? null) === null ? null : parseFloat(this.height.toFixed(decimals));
- this.$emit('update:height', parsedHeight);
+ const parsedHeight = (this.height ?? null) === null ? null : parseFloat(this.height.toFixed(decimals));
+ this.$emit('update:height', parsedHeight);
- const parsedWidth = (this.width ?? null) === null ? null : parseFloat(this.width.toFixed(decimals));
- this.$emit('update:width', parsedWidth);
+ const parsedWidth = (this.width ?? null) === null ? null : parseFloat(this.width.toFixed(decimals));
+ this.$emit('update:width', parsedWidth);
this.$emit('update:dimensionUnit', unitType);
@@ -187,6 +197,23 @@ export default {
}
},
methods: {
+ handleEnter(currentRef, event) {
+ event.preventDefault();
+
+ // Define the navigation order
+ const inputOrder = ['lengthInput', 'widthInput', 'heightInput', 'weightInput', 'unitCountInput'];
+
+ const currentIndex = inputOrder.indexOf(currentRef);
+ if (currentIndex !== -1 && currentIndex < inputOrder.length - 1) {
+ const nextRef = inputOrder[currentIndex + 1];
+ this.$nextTick(() => {
+ if (this.$refs[nextRef]) {
+ this.$refs[nextRef].focus();
+ this.$refs[nextRef].select();
+ }
+ });
+ }
+ },
focusLost(event) {
if (!this.$el.contains(event.relatedTarget)) {
this.$emit('save', 'packaging');
@@ -252,10 +279,127 @@ export default {
\ No newline at end of file
diff --git a/src/frontend/src/pages/CalculationMassEdit.vue b/src/frontend/src/pages/CalculationMassEdit.vue
index 9490923..d89e788 100644
--- a/src/frontend/src/pages/CalculationMassEdit.vue
+++ b/src/frontend/src/pages/CalculationMassEdit.vue
@@ -86,6 +86,7 @@
v-model:stackable="componentProps.stackable"
v-model:preSelectedNode="componentProps.preSelectedNode"
v-model:openSelectDirect="componentProps.openSelectDirect"
+ :responsive="false"
@update-material="updateMaterial"
@update-supplier="updateSupplier"
@close="closeEditModalAction('cancel')"
@@ -318,7 +319,7 @@ export default {
if (id === -1) {
// clear
this.componentsData = {
- price: {props: {price: 0, overSeaShare: 0.0, includeFcaFee: true}},
+ price: {props: {price: 0, overSeaShare: 0.0, includeFcaFee: false}},
material: {props: {partNumber: "", hsCode: "", tariffRate: 0.00, description: "", openSelectDirect: true}},
packaging: {
props: {
diff --git a/src/frontend/src/pages/CalculationSingleEdit.vue b/src/frontend/src/pages/CalculationSingleEdit.vue
index 66aa6c2..9e2ff29 100644
--- a/src/frontend/src/pages/CalculationSingleEdit.vue
+++ b/src/frontend/src/pages/CalculationSingleEdit.vue
@@ -3,7 +3,8 @@