Gecko [ gandhischool.edu.np ]

Name	Size	Permission
FiscalYears.vue	9.49 KB	-rw-rw-r--
ManageCategory.vue	11.68 KB	-rw-rw-r--
ManageSifaris.vue	18.06 KB	-rw-rw-r--
Offices.vue	11.13 KB	-rw-rw-r--
SifarisForms.vue	10.84 KB	-rw-rw-r--

Code Editor : Offices.vue

<template>
    <div>
        <div v-if="ui.error_message" class="alert alert-danger">
            {{ ui.error_message }}
        </div>

<div class="row">
            <div class="col-md-8">
                <table class="table">
                    <thead>
                        <th>Office Name</th>
                        <th>Office Number</th>
                        <th>Is Head Office</th>
                        <th>Address Line 1</th>
                        <th>Address Line 2</th>
                        <th>Active</th>
                        <th></th>
                    </thead>
                    <tbody>
                        <tr v-for="(item, key) in page.offices" :key="key">
                            <td>
                                <div><i>{{ item.name }}</i></div>
                                <div>{{ item.name_en }}</div>
                            </td>
                            <td>
                                <div>{{ item.office_number }}</div>
                            </td>
                            <td>
                                <span v-if="item.is_head_office">
                                    <i class="fas fa-check text-success"></i>
                                </span>
                                <span v-else="item.is_head_office">
                                    <i class="fas fa-times text-danger"></i>
                                </span>
                            </td>
                            <td>
                                <div>{{ item.address_line_1 }}</div>
                                <div>{{ item.address_line_1_en }}</div>
                            </td>
                            <td>
                                <div>{{ item.address_line_2 }}</div>
                                <div>{{ item.address_line_2_en }}</div>
                            </td>
                            <td>
                                <span v-if="item.is_active">
                                    <i class="fas fa-check text-success"></i>
                                </span>
                                <span v-else="item.is_active">
                                    <i class="fas fa-times text-danger"></i>
                                </span>
                            </td>
                            <td>
                                <a href="#" @click="editItem(item)"><i class="fas fa-pen text-primary me-3"></i></a>
                                <a href="#" @click="deleteItem(item.id)"><i class="fas fa-trash text-danger"></i></a>
                            </td>
                        </tr>
                        <tr v-if="!page.offices.length">
                            <td colspan="100%" class="text-danger">No record found. You may consider adding one.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-md-4">
                <div class="card p-3">
                    <div v-if="has_errors" class="alert alert-danger">
                        <ul>
                            <li v-for="(item_e, key_e) in ui.errors">{{ item_e[0] }}</li>
                        </ul>
                    </div>

<h4>{{ add_edit_title }}</h4>
                    <div class="mb-1">
                        <input id="chkIsActive" type="checkbox" v-model="item.is_active" />
                        <label for="chkIsActive" class="ms-1">Make this office active</label>
                    </div>
                    <div class="mb-1">
                        <input id="chkIsHeadOffice" type="checkbox" v-model="item.is_head_office" />
                        <label for="chkIsHeadOffice" class="ms-1">Make this head office</label>
                    </div>
                    <div class="mb-1">
                        <label class="my-1">Display Position *</label>
                        <input class="form-control" type="text" v-model="item.seq" />
                    </div>
                    <div class="mb-1">
                        <label class="my-1">Office Number * <small>(e.g. 5 for ward 05. Any unique number for head
                                office.)</small></label>
                        <input class="form-control" type="text" v-model="item.office_number" />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Office Name *</label>
                        <input type="text" class="form-control" v-model="item.name_en" required />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Office Name (नेपालीमा) *</label>
                        <input type="text" class="form-control" v-model="item.name" required />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Address Line 1 *</label>
                        <input type="text" class="form-control" v-model="item.address_line_1_en" required />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Address Line 1 (नेपालीमा) *</label>
                        <input type="text" class="form-control" v-model="item.address_line_1" required />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Address Line 2 *</label>
                        <input type="text" class="form-control" v-model="item.address_line_2_en" required />
                    </div>
                    <div class="my-1">
                        <label class="my-1">Address Line 2 (नेपालीमा) *</label>
                        <input type="text" class="form-control" v-model="item.address_line_2" required />
                    </div>
                    <div class="mt-2">
                        <button class="btn btn-primary my-1" @click="save()">{{ add_update_title }}</button>
                        <button class="btn btn-muted" @click="resetItem()">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

});
        },
        resetItem: function () {
            this.item.id = null;
            this.item.office_number = null;
            this.item.name = '';
            this.item.name_en = '';
            this.item.address_line_1_en = '';
            this.item.address_line_1 = '';
            this.item.address_line_2_en = '';
            this.item.address_line_2 = '';
            this.item.is_active = false;
            this.item.is_head_office = false;
            this.item.seq = '';
            this.ui.add_edit_mode = 'add';
        },
        deleteItem: function (id) {
            this.resetItem();
            if (!confirm('Sure to delete this office?')) return;
            axios
                .post('/admin/settings/offices/delete', { id: id })
                .then((response) => {
                    if (response.data.success === true) {
                        alert(
                            'Office deleted successfully!'
                        );
                        this.get();
                    } else {
                        this.ui.error_message = response.data.msg;
                        alert('Deleting office failed.');
                    }
                })
                .catch((error) => {
                    alert('There has been error. Please reload page to see latest changes.');
                })
                .finally(() => {

});
        },
        editItem: function (item) {
            this.item.id = item.id;
            this.item.office_number = item.office_number;
            this.item.name = item.name;
            this.item.name_en = item.name_en;
            this.item.address_line_1_en = item.address_line_1_en;
            this.item.address_line_1 = item.address_line_1;
            this.item.address_line_2_en = item.address_line_2_en;
            this.item.address_line_2 = item.address_line_2;
            this.item.is_active = item.is_active;
            this.item.is_head_office = item.is_head_office;
            this.item.seq = item.seq;
            this.ui.add_edit_mode = 'edit';
        }
    },
    created() {
        this.get();
    },
    mounted() {

},
    computed: {
        has_errors: function (params) {
            return Object.keys(this.ui.errors).length > 0;
        },
        add_edit_title: function () {
            return this.ui.add_edit_mode == 'add' ? 'Add Office' : 'Edit Office';
        },
        add_update_title: function () {
            if (this.ui.sending) return 'Sending...';
            return this.ui.add_edit_mode == 'add' ? 'Add ' : 'Update ';
        }
    },
    watch: {},
};
</script>

${this.title}

Code Editor : Offices.vue