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

<template>
    <v-form ref="form">
        <v-container grid-list-xs fluid>
            <material-card color="black" title="Add Cycle">
                <v-layout wrap class="px-3 my-3">
                    <v-flex xs12 sm6 md4 class="WM-FlexCenter ">
                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                        <v-text-field
                                name="sterilizer_id"
                                label="Sterilizer ID"
                                color="black"
                                v-model="formData.sterilizer_id"
                                class="py-3 pr-3"/>
                    </v-flex>
                    <v-flex xs12 sm6 md4 class="WM-FlexCenter ">
                        <v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"/>
                        <v-text-field
                                name="cycle_number"
                                label="Cycle Number"
                                color="black"
                                v-model="formData.cycle_number"
                                class="py-3 pr-3"/>
                    </v-flex>
                    <v-flex xs12 sm6 md4 class="WM-FlexCenter">
                        <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="fromMenuDate">
                            <v-text-field required
                                          slot="activator"
                                          label="Date"
                                          color="black"
                                          class="pr-3"
                                          v-model="formData.date"/>
                            <v-date-picker
                                    color="pink"
                                    no-title
                                    v-model="formData.date"
                                    :date-format="date => new Date(date).toDateString()"/>
                        </v-menu>
                    </v-flex>
                    <v-flex xs12></v-flex>
                    <v-flex xs12 sm6 md4 class="WM-FlexCenter WM-DuplicateInput" style="position: relative"
                            v-for="(label, key) in formData.labels" :key="key">
                        <div class="Inner">
                            <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
                            <v-autocomplete
                                    color="black"
                                    :items="labels"
                                    item-text="id"
                                    item-value="id"
                                    v-model="label.id"
                                    label="Select Label For Cycle"/>
                            <!-- <v-text-field
                                name="labels"
                                label="Label ID"
                                color="black"
                                v-model="label.id"
                                class="py-3 pr-3"  />-->

                            <v-btn absolute small right bottom color="cyan" @click="duplicateForm(key)">
                                <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
                                ADD
                            </v-btn>
                            <v-btn v-if="key > 0" absolute small right top color="pink" @click="removeForm(key)">
                                <v-icon class="white--text mr-2 caption">fas fa-remove</v-icon>
                                REMOVE
                            </v-btn>
                        </div>
                    </v-flex>
                    <v-spacer/>
                    <v-flex xs12>
                        <hr class="v-divider theme--light" style="margin:30px 0 0 0 !important">
                    </v-flex>
                    <v-flex xs12 sm12 md12 class="WM-FlexCenter">
                        <!-- <v-icon class="fa fa-sort-amount-desc mr-2"></v-icon> -->
                        <v-textarea color="black" v-model="formData.note" class="py-3 pr-3" name="address">
                            <template v-slot:label>
                                <div>Description</div>
                            </template>
                        </v-textarea>
                    </v-flex>
                </v-layout>
                <v-layout row wrap justify-center align-center>
                    <router-link :to="{name: 'AllCycle'}">
                        <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";
import {mapMutations} from "vuex";

export default {
    metaInfo() {
        return {
            title: this.$route.meta.title,
            meta: this.$route.meta.metaTags || []
        }
    },
    data() {
        return {
            fromMenuDate: false,
            formData: {
                note: "",
                labels: [
                    {name: ''}
                ]
            },
            labels: [],
            rules: {
                required: value => !!value || "Required.",
                counter: value => !value || value.length == 0 || value.length >= 5 || "Min 5 characters"
            }
        };
    },
    created() {
        this.loadLabels();
        if (this.$route.params.cycle) {
            this.load(this.$route.params.cycle);
        }
    },
    methods: {
        async load(id) {
            const result = await ApiService.get(urls.editCycle(id));
            if (result && result.status == 200) {
                this.formData = result.data.data;

                const usedLabels = this.formData.labels.filter(i => i.id );
                const existingIds = this.labels.map(i => i.id);
                usedLabels.forEach(ui => {
                    if (!existingIds.includes(ui.id)) {
                        this.labels.push(ui);
                    }
                });
                console.log()
            }
        },
        async loadLabels() {
            const result = await ApiService.get(urls.listAllLabel());
            if (result && result.status == 200) {
                this.labels = result.data.data;
            }
        },
        async submitForm() {
            let result;
            if (this.$route.params.cycle) {
                result = await ApiService.put(urls.updateCycle(this.$route.params.cycle), this.formData);
            } else {
                result = await ApiService.post(urls.storeCycle, this.formData);
            }

            if (result && result.status == 200) {
                this.$router.push({name: "AllCycle"});
            }
        },
        duplicateForm(infoIndex) {
            this.formData.labels.push({name: "",});
        },
        removeForm(infoIndex) {
            this.formData.labels.splice(infoIndex, 1);
        },
    }
};
</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;
}

.WM-DuplicateInput {
    margin: 15px 0;
}

.WM-DuplicateInput .Inner {
    padding: 15px 20px !important;
    margin: 0 10px 0 0;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .2);
}
</style>