update for warehouse

public/plugins/vue/tt-components/tt-table-crud.js

@@ -21,14 +21,15 @@ Vue.component('tt-table-crud', {
 
                          </slot>
                          <span v-else-if="column.modal?.type === 'select' && column.modal.items.find(item => item.value + '' === row[column.key] + '')">{{column.modal.items.find(item => item.value == row[column.key]).text}}</span>
-                            <span v-else-if="column.modal?.type === 'select'"
-                            :data-all-items="JSON.stringify(column.modal.items)"
-                            >Select not found for column {{column.key}} and value {{row[column.key]}}</span>
+                         <span v-else-if="column.modal?.type === 'select'"
+                               :data-all-items="JSON.stringify(column.modal.items)"
+                         >Select not found for column {{column.key}} and value {{row[column.key]}}</span>
                        </template>
 
                        <template v-slot:actions="{ row }">
                          <!-- calculate min width 1 + number of actions * 19 -->
-                         <div style="display: flex; justify-content: space-around; align-items: center;" :style="{minWidth: (1 + crudConfig?.additionalActions?.length || 0) * 19 + 'px'}">
+                         <div style="display: flex; justify-content: space-around; align-items: center;"
+                              :style="{minWidth: (1 + crudConfig?.additionalActions?.length || 0) * 19 + 'px'}">
                            <a style="cursor: pointer;" @click="openCrudModal(row)"><i class="far fa-edit text-primary"
                                                                                       title="Editieren"></i></a>
 
@@ -41,12 +42,12 @@ Vue.component('tt-table-crud', {
                          </div>
 
                        </template>
-                       
+
                        <template v-if="$scopedSlots.expandedRow" v-slot:expandedRow="{ row }">
-                            <slot name="expandedRow" :row="row"/>
-                      </template>
-                       
-                       
+                         <slot name="expandedRow" :row="row"/>
+                       </template>
+
+
                      </tt-table>
 
                      <tt-modal :show.sync="crudModal"
@@ -55,18 +56,18 @@ Vue.component('tt-table-crud', {
                                @delete="deleteCrudModal"
                                @close="resetCrudModalData">
 
-                       <template v-for="column in modalConfig.headers">
+                       <template v-for="column in modalConfig.headers.filter(column => column.visible !== false)">
                          <!-- @formatter:off -->
 <!--                         <slot v-if="$scopedSlots[column.key.toLowerCase() + '-modal'] && column.type !== false && 1 < 0" :name="column.key.toLowerCase() + '-modal'" slot-scope="{crudModalData}"></slot>-->
                          <slot :name="column.key.toLowerCase() + '-modal'" :crudModalData="crudModalData">
-                           <tt-input v-if="column.type === 'text'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                           <tt-input v-else-if="column.type === 'number'" v-model="crudModalData[column.key]" :label="column.text" type="number" sm row/>
-                           <tt-textarea v-else-if="column.type === 'textarea'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                           <tt-select v-else-if="column.type === 'select'" v-model="crudModalData[column.key]" :label="column.text" :options="column.items" sm row/>
-                           <tt-autocomplete v-else-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :items="column.items" sm row/>
-                           <tt-date-picker v-else-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                           <tt-icon-select v-else-if="column.type === 'icon-select'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
-                           <tt-checkbox v-else-if="column.type === 'checkbox'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-input v-show="crudModalColumnVisibility[column.key]" v-if="column.type === 'text'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-input v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'number'" v-model="crudModalData[column.key]" :label="column.text" type="number" sm row/>
+                           <tt-textarea v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'textarea'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-select v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'select'" v-model="crudModalData[column.key]" :label="column.text" :options="column.items" sm row/>
+                           <tt-autocomplete v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'autocomplete'" v-model="crudModalData[column.key]" :label="column.text" :api-url="column.apiUrl" :items="column.items" sm row/>
+                           <tt-date-picker v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'datepicker'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-icon-select v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'icon-select'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
+                           <tt-checkbox v-show="crudModalColumnVisibility[column.key]" v-else-if="column.type === 'checkbox'" v-model="crudModalData[column.key]" :label="column.text" sm row/>
                          </slot>
                          <!-- @formatter:on -->
                        </template>
@@ -74,14 +75,18 @@ Vue.component('tt-table-crud', {
                      </tt-modal>
                    </div>
                  `, props: {
-        crudConfig: {type: Object, required: false, default: () => (window['TT_CONFIG']['CRUD_CONFIG'])}
+        crudConfig: {type: Object, required: false, default: () => (window['TT_CONFIG']['CRUD_CONFIG'])},
+        emitEdit:   {type: Boolean, required: false, default: false}
     }, data() {
         return {
-            crudModal: false, crudModalData: {}, window: window
-
+            crudModal: false, crudModalData: {}, crudModalColumnVisibility: {}, crudModalColumnVisibilityCheck: {}, window: window
         }
     }, methods:  {
         openCrudModal(row = null) {
+            if (this.emitEdit) {
+                this.$emit('edit', row)
+                return
+            }
             this.crudModalData = row ? JSON.parse(JSON.stringify(row)) : {};
             this.crudModal = true;
         }, resetCrudModalData() {
@@ -97,8 +102,7 @@ Vue.component('tt-table-crud', {
                 this.window.notify('success', response.data.message || 'Erfolgreich gespeichert');
             } else {
                 this.window.notify('error',
-                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message ||
-                        'Ein Fehler ist aufgetreten');
+                    response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
             }
         }, async deleteCrudModal() {
 
@@ -108,6 +112,42 @@ Vue.component('tt-table-crud', {
                 this.resetCrudModalData();
             }
             this.window.notify(response.data.success ? 'success' : 'error', response.data.message);
+        },
+        async checkCrudModalColumnVisibility(val, oldVal) {
+            const crudModalColumnVisibility = {}
+            for (const column of this.modalConfig.headers) {
+                if (!column?.visible?.reference || typeof column.visible.reference !== 'string') {
+                    crudModalColumnVisibility[column.key] = true
+                    continue;
+                }
+
+                const localId = this.crudModalData[column.visible.use.split('=')[0]]
+
+                if (this.crudModalColumnVisibilityCheck[column.key] &&
+                    this.crudModalColumnVisibilityCheck[column.key][column.visible.reference] === localId) {
+                    crudModalColumnVisibility[column.key] = this.crudModalColumnVisibilityCheck[column.key]['visibility']
+                    continue;
+                }
+
+                if (!localId) {
+                    crudModalColumnVisibility[column.key] = false
+                    continue;
+                }
+
+                const reference = column.visible.reference
+
+                let referenceData = await axios.get(window['TT_CONFIG']['BASE_PATH'] + `/${reference}/getById?id=${localId}`)
+                referenceData = referenceData.data
+
+                // noinspection EqualityComparisonWithCoercionJS
+                crudModalColumnVisibility[column.key] = referenceData[column.visible.key] == column.visible.value
+                this.crudModalColumnVisibilityCheck[column.key] = {
+                    [column.visible.reference]: localId,
+                    visibility:                 crudModalColumnVisibility[column.key]
+                }
+            }
+
+            this.$set(this, 'crudModalColumnVisibility', crudModalColumnVisibility)
         }
     }, computed: {
         tableConfig() {
@@ -115,17 +155,23 @@ Vue.component('tt-table-crud', {
                 key:         this.crudConfig.key,
                 tableHeader: this.crudConfig.tableHeader,
                 headers:     this.crudConfig.columns.filter(column => column.table !== false).map(column => {
-                    return {text: column.text, key: column.key, ...column.table, filterOptions: column?.modal?.items}
+                    return {text: column.text, key: column.key, ...column.table, filterOptions: column?.modal?.items, priority: column.priority}
                 })
             }
         }, modalConfig() {
             return {
-                key:     this.crudConfig.key,
-                headers: this.crudConfig.columns.filter(column => column.modal !== false).map(column => {
+                key: this.crudConfig.key, headers: this.crudConfig.columns.filter(column => column.modal !== false).map(column => {
                     const type = column.modal?.type || "text"
                     return {text: column.text, key: column.key, type, ...column.modal}
                 }),
             }
         }
+    }, watch:    {
+        crudModalData: {
+            handler: async function (val, oldVal) {
+                if (!val) return
+                await this.checkCrudModalColumnVisibility(val, oldVal)
+            }, deep: true
+        }
     }
 })