Started Order productchange

public/js/pages/OrderProductchange/OrderProductchange.js

@@ -0,0 +1,55 @@
+Vue.component('OrderProductchange', {
+    //language=Vue
+    template: `
+      <tt-card style="min-height:50vh;">
+        
+        <tt-autocomplete :api-url="window['TT_CONFIG']['ADDRESS_API_URL'] + '?do=findAddress'"
+                         v-model="owner_id" sm label="Vertragsinhaber auswählen"></tt-autocomplete>
+
+        <tt-table v-if="owner_id !== ''"
+                  :fetch-url="\`\${window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=\${owner_id}\`"
+                  :config="OrderProductchangeTableConfig"
+                  small  ref="contractTable">
+          
+          <template v-slot:actions="{ row }">
+            <a  :href="window['TT_CONFIG']['BASE_URL'] + '/Contract/productchange?contract_id=' + row.id" class="btn btn-primary">Produktwechsel erstellen
+            </a>
+          </template>
+          
+        </tt-table>
+      </tt-card>
+    `, data() {
+        return {
+            window: window,
+            OrderProductchangeTableConfig: {
+                headers: [
+                    {text: "Contract ID", key: "id", filter: false, order: false},
+                    {text: "Produkt", key: "product_id", filter: false, order: false},
+                    {text: "Matchcode", key: "matchcode", filter: false, order: false},
+                    {text: "Preis p.P.", key: "price", filter: false, order: false},
+                    {text: "Herstellungskosten", key: "price_setup", filter: false, order: false},
+                    {text: "Fertigstellung", key: "finish_date", filter: false, order: false},
+                    {text: "Kündigung", key: "cancel_date", filter: false, order: false},
+                    {text: "Aktion", key: "actions", filter: false, order: false}
+                ],
+                tableHeader: 'Aktive Produkte',
+                key: 'OrderProductchange',
+            },
+            owner_id: "",
+        }
+    },
+    methods: {
+
+    },
+    watch: {
+        owner_id: {
+            async handler() {
+                console.log(this.owner_id);
+                //this.$refs.contractTable.$set(this.$refs.contractTable.fetchUrl, `${this.window['TT_CONFIG']['CONTRACT_API_URL']}?do=findContracts&owner_id=${this.owner_id}`);
+                //this.$refs.contractTable.$set(this.$refs.contractTable.filters, 'owner_id', this.owner_id);
+                //await this.$refs.contractTable.fetchData();
+            }
+        }
+    }
+})
+