cssd-front/src/views/Label/AddEdit.vue

<template>
    <v-form ref="form">
        <v-container grid-list-xs fluid>
            <material-card color="black" title="Add Label on Set ">
                <v-layout wrap class="px-3 my-3">
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                        <v-text-field name="sterilizerId" label="Sterilizer ID" color="black"
                                      v-model="formData.sterilizer_id" class="py-3 pr-3"/>
                    </v-flex>
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                        <v-text-field name="cycle_number" label="Preferred Cycle Number" color="black"
                                      v-model="formData.cycle_number"
                                      class="py-3 pr-3"/>
                    </v-flex>
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                        <v-text-field name="lot_number" label="Lot Number" color="black" readonly v-model="lotNumber"
                                      class="py-3 pr-3"/>
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter">
                        <v-icon class="fas fa-check mr-2 WM-Margin-B-8"/>
                        <v-autocomplete color="black" :items="items" item-text="name" v-model="formData.package_id"
                                        item-value="id" label="Package ID" class="py-3 pr-3" :filter="customFilter">
                            <template v-slot:chip="{ item }">
                                {{ item.name }} - {{ item.id }}
                            </template>

                            <template v-slot:item="{ item }">
                                {{ item.name }} - {{ item.id }}
                            </template>
                        </v-autocomplete>
                    </v-flex>
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
                        <v-icon class="far fa-calendar-alt mr-2"/>
                        <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
                                v-model="fromMenuSterile" style="width: 100%">
                            <v-text-field required slot="activator" label="Sterile Date" color="black" class="pr-3"
                                          v-model="formData.sterile_date"/>
                            <v-date-picker color="pink" :min="today" no-title v-model="formData.sterile_date"
                                           :date-format="date => new Date(date).toDateString()"/>
                        </v-menu>
                    </v-flex>
                    <v-flex xs12 sm6 md4 lg3 class="WM-FlexCenter pl-3">
                        <v-icon class="far fa-calendar-alt mr-2"/>
                        <v-menu lazy :close-on-content-click="true" transition="v-scale-transition" offset-y
                                v-model="fromMenuExpire" style="width: 100%">
                            <v-text-field required slot="activator" label="Expire Date" color="black" class="pr-3"
                                          v-model="formData.expire_date"/>
                            <v-date-picker :show-current="showCurrent" :min="formData.sterile_date" color="pink"
                                           no-title
                                           v-model="formData.expire_date"
                                           :date-format="date => new Date(date).toDateString()"/>
                        </v-menu>
                    </v-flex>
                </v-layout>

                <v-layout row wrap justify-center align-center class="px-3">

                    <router-link :to="{ name: 'AllLabels' }">
                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
                            <v-icon class="black--text">keyboard_arrow_left</v-icon>
                            <span class="black--text">Back</span>
                        </v-btn>
                    </router-link>
                    <v-spacer/>
                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
                        <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
                        <span class="white--text">SAVE</span>
                    </v-btn>
                </v-layout>
            </material-card>
        </v-container>
    </v-form>
</template>

<script>
import {ApiService} from "@/services";
import {urls} from "@/config/urls";

export default {
    metaInfo() {
        return {
            title: this.$route.meta.title,
            meta: this.$route.meta.metaTags || []
        }
    },
    data() {
        return {
            showCurrent: false,
            fromMenuSterile: false,
            fromMenuExpire: false,
            today: new Date().toISOString().split("T")[0],
            formData: {
                result: "",
                package_id: "",
                expire_date: null,
                sterilizer_id: '',
                cycle_number: '',
                sterile_date: new Date().toISOString().substr(0, 10)
            },
            items: [],
            rules: {
                required: value => !!value || "Required.",
                counter: value => !value || value.length == 0 || value.length >= 5 || "Min 5 characters"
            }
        };
    },
    created() {
        this.loadItems();
        if (this.$route.params.label) {
            this.load(this.$route.params.label);
        }
    },
    computed: {
        lotNumber() {
            return this.formData.sterilizer_id + ' - ' + this.formData.cycle_number;
        }
    },
    methods: {
        customFilter(item, queryText) {
            const name = item.name.toLowerCase();
            const udi = item.udi ? item.udi.toLowerCase() : null;
            const searchText = queryText.toLowerCase();
            if (udi) {
                return name.indexOf(searchText) > -1 ||
                        udi.indexOf(searchText) > -1
            }
            return name.indexOf(searchText) > -1
        },
        async load(id) {
            const result = await ApiService.get(urls.editLabel(id));
            if (result && result.status == 200) {
                this.formData = result.data.data;

                const existingIds = this.items.map(i => i.id);
                if (!existingIds.includes(this.formData.package_id)) {
                    this.items.push(this.formData.package);
                }
                console.log()
            }
        },
        async loadItems() {
            const result = await ApiService.get(urls.listAllPackage());
            if (result && result.status == 200) {
                this.items = result.data.data;
            }
        },
        async submitForm() {
            let result;
            this.formData['lot_number'] = this.lotNumber;
            if (this.$route.params.label) {
                result = await ApiService.put(urls.updateLabel(this.$route.params.label), this.formData);
            } else {
                result = await ApiService.post(urls.storeLabel, this.formData);
            }

            if (result && result.status == 200) {
                this.$router.push({name: 'AllLabels'});
            }
        }
    }
};
</script>
<style>
.v-btn--floating {
    padding: 0 !important;
}

.theme--light.v-btn.v-btn--flat {
    color: rgba(0, 0, 0, .87) !important;
}

.v-btn--floating,
.v-btn--icon:before {
    border-radius: 50% !important;
}
</style>