Explorer

home / zoteqbgb / public_html / resources / js / components / admin / settings / ProductCategory

Location: /home/zoteqbgb/public_html/resources/js/components/admin/settings/ProductCategory
Root path: /home/zoteqbgb/public_html/config/676626

Editing: ProductCategoryCreateComponent.vue

<div id="modal" class="modal">
        <div class="modal-dialog">
            <div class="modal-header">
                <h3 class="modal-title">{{ $t('menu.product_categories') }}</h3>
                <button class="modal-close fa-solid fa-xmark text-xl text-slate-400 hover:text-red-500"
                    @click="reset"></button>
            </div>
            <div class="modal-body">
                <form @submit.prevent="save">
                    <div class="form-row">
                        <div class="form-col-12">
                            <label for="name" class="db-field-title required">{{ $t("label.name") }}</label>
                            <input v-model="props.form.name" v-bind:class="errors.name ? 'invalid' : ''" type="text"
                                id="name" class="db-field-control">
                            <small class="db-field-alert" v-if="errors.name">{{ errors.name[0] }}</small>
                        </div>
                        <div class="form-col-12 sm:form-col-6">
                            <label for="parent_category" class="db-field-title">
                                {{ $t("label.parent_category") }}
                            </label>
                            <vue-select class="db-field-control f-b-custom-select" id="parent_category"
                                v-bind:class="errors.parent_id ? 'is-invalid' : ''" v-model="props.form.parent_id"
                                :options="productCategoryDepthTrees" label-by="option" value-by="id" :closeOnSelect="true"
                                :searchable="true" :clearOnClose="true" placeholder="--" search-placeholder="--" />
                            <small class="db-field-alert" v-if="errors.parent_id">
                                {{ errors.parent_id[0] }}
                            </small>
                        </div>

<div class="form-col-12 sm:form-col-6">
                            <label class="db-field-title required" for="active">{{ $t('label.status') }}</label>
                            <div class="db-field-radio-group">
                                <div class="db-field-radio">
                                    <div class="custom-radio">
                                        <input :value="enums.statusEnum.ACTIVE" v-model="props.form.status" id="active"
                                            type="radio" class="custom-radio-field">
                                        <span class="custom-radio-span"></span>
                                    </div>
                                    <label for="active" class="db-field-label">{{ $t('label.active') }}</label>
                                </div>
                                <div class="db-field-radio">
                                    <div class="custom-radio">
                                        <input :value="enums.statusEnum.INACTIVE" v-model="props.form.status" type="radio"
                                            id="inactive" class="custom-radio-field">
                                        <span class="custom-radio-span"></span>
                                    </div>
                                    <label for="inactive" class="db-field-label">{{ $t('label.inactive') }}</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-col-12 sm:form-col-12">
                            <label for="image" class="db-field-title">{{ $t('label.image') }} (640px,960px)</label>
                            <input @change="changeImage" v-bind:class="errors.image ? 'invalid' : ''" id="image" type="file"
                                class="db-field-control" ref="imageProperty" accept="image/png, image/jpeg, image/jpg">
                            <small class="db-field-alert" v-if="errors.image">{{ errors.image[0] }}</small>
                        </div>

<div class="form-col-12">
                            <label for="description" class="db-field-title">
                                {{ $t("label.description") }}
                            </label>
                            <textarea v-model="props.form.description" v-bind:class="errors.description ? 'invalid' : ''"
                                id="description" class="db-field-control"></textarea>
                            <small class="db-field-alert" v-if="errors.description">{{ errors.description[0] }}</small>
                        </div>

<div class="form-col-12">
                            <div class="modal-btns">
                                <button type="button" class="modal-btn-outline modal-close" @click="reset">
                                    <i class="lab lab-fill-close-circle"></i>
                                    <span>{{ $t('button.close') }}</span>
                                </button>

<button type="submit" class="db-btn py-2 text-white bg-primary">
                                    <i class="lab lab-fill-save"></i>
                                    <span>{{ $t('button.save') }}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
import SmModalCreateComponent from "../../components/buttons/SmModalCreateComponent";
import LoadingComponent from "../../components/LoadingComponent";
import statusEnum from "../../../../enums/modules/statusEnum";
import alertService from "../../../../services/alertService";
import appService from "../../../../services/appService";

export default {
    name: "ProductCategoryCreateComponent",
    components: { SmModalCreateComponent, LoadingComponent },
    props: ['props'],
    data() {
        return {
            loading: {
                isActive: false
            },
            enums: {
                statusEnum: statusEnum,
                statusEnumArray: {
                    [statusEnum.ACTIVE]: this.$t("label.active"),
                    [statusEnum.INACTIVE]: this.$t("label.inactive")
                }
            },
            search: {
                status: statusEnum.ACTIVE,
                parent_id: 0,
                order_column: 'id',
                order_type: 'desc'
            },
            image: "",
            errors: {},
        }
    },
    computed: {
        productCategoryDepthTrees: function () {
            return this.$store.getters['productCategory/depthTrees'];
        },
        addButton: function () {
              return {title: this.$t("button.add_product_category")}
        }

},
    mounted() {
        this.$store.dispatch('productCategory/depthTrees')
    },
    methods: {
        changeImage: function (e) {
            this.image = e.target.files[0];
        },
        reset: function () {
            appService.modalHide();
            this.$store.dispatch('productCategory/reset').then().catch();
            this.errors = {};
            this.$props.props.form = {
                name: "",
                parent_id: null,
                description: "",
                status: statusEnum.ACTIVE
            }
            if (this.image) {
                this.image = "";
                this.$refs.imageProperty.value = null;
            }
        },
        save: function () {
            try {
                const fd = new FormData();
                fd.append('name', this.props.form.name);
                fd.append('parent_id', (this.props.form.parent_id === null ? 'NULL' : this.props.form.parent_id));
                fd.append('status', this.props.form.status);
                fd.append('description', this.props.form.description);
                if (this.image) {
                    fd.append('image', this.image);
                }

Directory Contents

Name	Size	Perms	Modified	Actions
ProductCategoryComponent.vue	166 bytes	0644	2025-04-25 02:11	âï¸
ProductCategoryCreateComponent.vue	9,457 bytes	0644	2025-04-25 02:11	âï¸
ProductCategoryShowComponent.vue	2,378 bytes	0644	2025-04-25 02:11	âï¸
ProductCateogryListComponent.vue	7,493 bytes	0644	2025-04-25 02:11	âï¸