Explorer

home / zoteqbgb / public_html / resources / js / components / admin / administrators / address

Location: /home/zoteqbgb/public_html/resources/js/components/admin/administrators/address
Root path: /home/zoteqbgb/public_html/config/676626

Editing: AdministratorAddressList.vue

<template>
    <LoadingComponent :props="loading" />
    <div class="db-card db-tab-div active">
        <div class="db-card-header border-none">
            <h3 class="db-card-title">{{ $t("label.address") }}</h3>
            <div class="db-card-filter">
                <TableLimitComponent :method="list" :search="address.search" :page="paginationPage" />
                <AdministratorAddressCreateComponent :props="address" />
            </div>
        </div>

<div class="db-table-responsive">
            <table class="db-table stripe">
                <thead class="db-table-head">
                    <tr class="db-table-head-tr">
                        <th class="db-table-head-th">
                            {{ $t("label.name") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.email") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.phone") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.address") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.country") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.state") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.city") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.zip_code") }}
                        </th>
                        <th class="db-table-head-th">
                            {{ $t("label.action") }}
                        </th>
                    </tr>
                </thead>
                <tbody class="db-table-body" v-if="addresses.length > 0">
                    <tr class="db-table-body-tr" v-for="address in addresses" :key="address">
                        <td class="db-table-body-td">
                            {{ address.full_name }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.email }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.country_code }} {{ address.phone }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.address }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.country }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.state }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.city }}
                        </td>
                        <td class="db-table-body-td">
                            {{ address.zip_code }}
                        </td>
                        <td class="db-table-body-td">
                            <div class="flex justify-start items-center sm:items-start sm:justify-start gap-1.5">
                                <SmIconSidebarModalEditComponent @click="edit(address)" />
                                <SmIconDeleteComponent @click="destroy(address.id)" />
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-6">
            <PaginationSMBox :pagination="pagination" :method="list" />
            <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                <PaginationTextComponent :props="{ page: paginationPage }" />
                <PaginationBox :pagination="pagination" :method="list" />
            </div>
        </div>
    </div>
</template>

export default {
    name: "AdministratorAddressList",
    components: {
        LoadingComponent,
        AdministratorAddressCreateComponent,
        TableLimitComponent,
        SmIconDeleteComponent,
        SmIconSidebarModalEditComponent,
        PaginationSMBox,
        PaginationBox,
        PaginationTextComponent
    },
    props: ["props"],
    data() {
        return {
            loading: {
                isActive: false,
            },
            address: {
                form: {
                    full_name: "",
                    email: "",
                    country_code: null,
                    phone: "",
                    country: null,
                    state: null,
                    city: null,
                    zip_code: "",
                    address: "",
                },
                search: {
                    paginate: 1,
                    page: 1,
                    per_page: 10,
                    order_column: "id",
                    order_type: "desc",
                },
                status: false,
                isMap: false,
                flag: "",
                states: [],
                cities: []
            },
        }
    },
    mounted() {
        this.list();
    },
    computed: {
        addresses: function () {
            return this.$store.getters["administratorAddress/lists"];
        },
        pagination: function () {
            return this.$store.getters["administratorAddress/pagination"];
        },
        paginationPage: function () {
            return this.$store.getters["administratorAddress/page"];
        },
    },
    methods: {
        list: function (page = 1) {
            this.loading.isActive = true;
            this.address.search.page = page;
            this.$store.dispatch("administratorAddress/lists", {
                id: this.props,
                search: this.address.search
            }).then((res) => {
                this.loading.isActive = false;
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
        edit: function (address) {
            appService.modalShow();
            this.loading.isActive = true;
            this.$store.dispatch("administratorAddress/edit", address.id).then((res) => {
                this.loading.isActive = false;
                this.address.isMap = true;

setTimeout(() => {
                    this.address.form = {
                        full_name: address.full_name,
                        email: address.email,
                        country_code: address.country_code,
                        phone: address.phone,
                        country: address.country,
                        state: address.state,
                        city: address.city,
                        zip_code: address.zip_code,
                        address: address.address,
                    };

if (address.state === "") {
                        this.address.form.state = null;
                        this.address.form.city = null;
                    }

if (address.city === "") {
                        this.address.form.city = null;
                    }

}, 200);

this.$store.dispatch('countryCode/callingCode', address.country_code).then(res => {
                    this.address.flag = res.data.data.flag_emoji;
                    this.loading.isActive = false;
                }).catch((err) => {
                    this.loading.isActive = false;
                });
            }).catch((err) => {
                alertService.error(err.response.data.message);
            });
        },
        destroy: function (addressId) {
            appService.destroyConfirmation().then((res) => {
                try {
                    this.loading.isActive = true;
                    this.$store.dispatch("administratorAddress/destroy", {
                        id: this.props,
                        addressId: addressId,
                        search: this.address.search
                    }).then((res) => {
                        this.loading.isActive = false;
                        alertService.successFlip(null, this.$t("label.address"));
                    }).catch((err) => {
                        this.loading.isActive = false;
                        alertService.error(err.response.data.message);
                    });
                } catch (err) {
                    this.loading.isActive = false;
                    alertService.error(err.response.data.message);
                }
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
    }

}
</script>

Directory Contents

Name	Size	Perms	Modified	Actions
AdministratorAddressCreateComponent.vue	13,538 bytes	0644	2025-04-25 02:11	âï¸
AdministratorAddressList.vue	10,633 bytes	0644	2025-04-25 02:11	âï¸