fixed article modal

public/plugins/vue/tt-components/css/tt-position-manager.css

@@ -28,8 +28,7 @@
 
 .positions-manager .form-container [class*="tt-input"],
 .positions-manager .form-container [class*="tt-checkbox"] {
-    flex: 1 1 200px; /* Flexible width with a minimum of 200px */
-    min-width: 200px;
+    flex: 1 1; /* Flexible width with a minimum of 200px */
 }
 
 .positions-manager .form-container .btn {

public/plugins/vue/tt-components/css/tt-table.css

@@ -225,6 +225,7 @@ td {
 .width-80 {
     width: 80px;
 }
+
 .width-120 {
     width: 120px;
 }
@@ -254,7 +255,6 @@ td {
 }
 
 
-
 /*TODO: remove this*/
 /* Styles for the component */
 .tt-expandable-shopping-cart {
@@ -313,7 +313,7 @@ td {
 }
 
 .tt-expandable-shopping-cart.expanded .cart-content {
- padding-top: 8px;
+    padding-top: 8px;
 }
 
 .tt-expandable-shopping-cart.expanded .cart-content h3 {
@@ -359,10 +359,21 @@ td {
 }
 
 @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 .btn-loading {
     cursor: not-allowed;
     opacity: 0.7;
 }
+
+/* tt-input-article */
+.tt-input-article-wrapper .autocomplete {
+    display: flex;
+}
+
+.tt-input-article-wrapper button[type=button].btn-link.position-absolute {
+    right: 30px !important;
+}

public/plugins/vue/tt-components/tt-input-article.js

@@ -252,3 +252,112 @@ Vue.component('warehouse-article-modal', {
         }
     }
 })
+
+
+
+Vue.component('tt-input-article', {
+    template: `
+        <div class="tt-input-article-wrapper" :style="wrapperStyle">
+            <tt-autocomplete
+                :value="value"
+                :label="label"
+                :api-url="fullApiUrl"
+                :placeholder="placeholder"
+                :items="items"
+                :sm="sm"
+                :row="row"
+                :return-text="returnText"
+                :emit-display-value="emitDisplayValue"
+                :case-insensitive="caseInsensitive"
+                ref="autocomplete"
+                @input="updateValue"
+                @displayValue="updateDisplayValue"
+            >
+                <template v-slot:append>
+                    <tt-button
+                        style="max-width: 32px; margin-left: 5px;" 
+                        sm
+                        text="" 
+                        @click="openArticleModal" 
+                        additional-class="btn-outline-primary" 
+                        icon="fa fa-search"/>
+                </template>
+            </tt-autocomplete>
+            
+            <!-- Article Search Modal -->
+            <warehouse-article-modal 
+                v-if="showArticleModal" 
+                @close="showArticleModal = false"
+                @article-selected="handleArticleSelected"
+            ></warehouse-article-modal>
+        </div>
+    `,
+    props: {
+        value: { type: [String, Number] },
+        label: { type: String, required: false },
+        apiUrl: { type: String, default: '/WarehouseArticle/autoComplete' },
+        placeholder: { type: String, default: '' },
+        items: { type: Array, default: () => [] },
+        sm: { type: Boolean, default: true },
+        row: { type: Boolean, default: false },
+        returnText: { type: Boolean, default: false },
+        emitDisplayValue: { type: Boolean, default: true },
+        caseInsensitive: { type: Boolean, default: false },
+        field: { type: Object, default: () => ({}) },
+    },
+    data() {
+        return {
+            window,
+            showArticleModal: false
+        };
+    },
+    computed: {
+        fullApiUrl() {
+            // Ensure the API URL has the base path
+            return this.apiUrl.startsWith('/') ?
+                window.TT_CONFIG.BASE_PATH + this.apiUrl :
+                this.apiUrl;
+        },
+        wrapperStyle() {
+            return this.field && this.field.style ? this.field.style : '';
+        }
+    },
+    methods: {
+        openArticleModal() {
+            this.showArticleModal = true;
+        },
+
+        handleArticleSelected(article) {
+            if (!article) return;
+
+            // Update the value (article ID)
+            this.$emit('input', article.id);
+
+            // Update the display text (article title)
+            if (this.emitDisplayValue) {
+                this.$emit('displayValue', article.title);
+            }
+
+            // Force the autocomplete component to update
+            if (this.$refs.autocomplete && typeof this.$refs.autocomplete.updateDisplayValue === 'function') {
+                this.$refs.autocomplete.displayValue = article.title;
+            }
+        },
+
+        updateValue(val) {
+            this.$emit('input', val);
+        },
+
+        updateDisplayValue(val) {
+            if (this.emitDisplayValue) {
+                this.$emit('displayValue', val);
+            }
+        },
+
+        clear() {
+            if (this.$refs.autocomplete && typeof this.$refs.autocomplete.clear === 'function') {
+                this.$refs.autocomplete.clear();
+            }
+        }
+    }
+});

public/plugins/vue/tt-components/tt-position-manager.js

@@ -76,7 +76,19 @@ Vue.component('tt-positions-manager',
                                 :api-url="window.TT_CONFIG['BASE_PATH'] + field.apiUrl"
                                 sm
                             />
-                            <tt-textarea
+                            <tt-input-article
+                                v-if="field.type === 'input-article'"
+                                :label="field.label"
+                                :emit-display-value="field.emitDisplayValue || false"
+                                v-model="formData[key]"
+                                @input="$emit('updateField-' + key, $event)"
+                                @displayValue="$emit('updateField-' + key + '_text', $event)"
+                                :ref="'article-' + key"
+                                :api-url="field.apiUrl"
+                                :field="field"
+                                sm
+                              />
+                              <tt-textarea
                                 v-else-if="field.type === 'textarea'"
                                 :label="field.label"
                                 v-model="formData[key]"