diff --git a/src/components/pages/PanelAdministrator.vue b/src/components/pages/PanelAdministrator.vue
index 3553636ba8c01a87f07576e68f0d22c9d0198fc8..5ceb31856a306d00446e2c603222fa4087b2212f 100644
--- a/src/components/pages/PanelAdministrator.vue
+++ b/src/components/pages/PanelAdministrator.vue
@@ -5,18 +5,18 @@
<b-tabs card>
<b-tab title="Komentar" active>
<b-card no-body>
- <b-tabs pills vertical card>
+ <b-tabs v-model="tabIndex" pills vertical card>
<b-tab title="Entri Komentar" disabled/>
<b-tab
- v-for="item in pageList"
+ v-for="(item, index) in pageList"
:key=item._id.$oid
v-bind:title="item.name">
- <b-tabs content-class="mt-3">
+ <b-tabs v-model="tabIndexInner" content-class="mt-3">
<b-tab title="Belum dibalas" active>
- <comments :id="item._id.$oid" replyable unreplied/>
+ <comments :id="item._id.$oid" :ref="index+'-0'" replyable unreplied/>
</b-tab>
<b-tab title="Semua">
- <comments :id="item._id.$oid" replyable/>
+ <comments :id="item._id.$oid" :ref="index+'-1'" replyable/>
</b-tab>
</b-tabs>
</b-tab>
@@ -58,6 +58,8 @@ export default {
perPage: 15,
filter: null,
selected: 'urusan',
+ tabIndex: 1,
+ tabIndexInner: 0,
fields: ['urusan', 'admin', 'aksi'],
urusan : [
{ judul: "Pendapatan", url: "" },
@@ -154,6 +156,14 @@ export default {
this.fillAdmin()
this.fillDataTable('top')
},
+ watch : {
+ tabIndex() {
+ this['$refs'][(this.tabIndex-1) + '-' + this.tabIndexInner][0]['refreshContent']()
+ },
+ tabIndexInner() {
+ this['$refs'][(this.tabIndex-1) + '-' + this.tabIndexInner][0]['refreshContent']()
+ }
+ },
methods: {
assignAdmin : function(row) {
row.item.admin = this.options[this.selected].text
diff --git a/src/components/pages/SettingsPage.vue b/src/components/pages/SettingsPage.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4f67f2573ebe247c075032e65a2a1ada05feebfa
--- /dev/null
+++ b/src/components/pages/SettingsPage.vue
@@ -0,0 +1,148 @@
+<template>
+ <div id="placeholder">
+ <div id="container">
+ <b-card no-body>
+ <b-tabs card>
+ <b-tab title="Ubah Kata Sandi" active>
+ <b-alert
+ :show="dismissCountDown"
+ dismissible
+ :variant="alertVariant"
+ @dismissed="dismissCountDown=0"
+ @dismiss-count-down="countdownCallback"
+ >
+ {{ message }}
+ </b-alert>
+ <b-form @submit.prevent="submitChangePassword">
+ <b-form-group label="Kata sandi lama:">
+ <b-form-input
+ type="password"
+ v-model="changePass.oldPassword"
+ required
+ placeholder="Masukkan kata sandi lama" />
+ </b-form-group>
+
+ <b-form-group label="Kata sandi baru:">
+ <b-form-input
+ type="password"
+ v-model="changePass.newPassword"
+ required
+ placeholder="Masukkan kata sandi baru" />
+ </b-form-group>
+
+ <b-form-group label="Konfirmasi kata sandi baru:">
+ <b-form-input
+ type="password"
+ v-model="changePass.confirmPassword"
+ required
+ placeholder="Masukkan kata sandi baru" />
+ </b-form-group>
+ <b-button @click="submitChangePassword" type="submit" variant="primary">Ubah Kata Sandi</b-button>
+ </b-form>
+ </b-tab>
+ </b-tabs>
+ </b-card>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'UserSettings',
+ components: {
+
+ },
+ data() {
+ return {
+ changePass: {
+ oldPassword: '',
+ newPassword: '',
+ confirmPassword: ''
+ },
+ message: '',
+ dismissSecs: 15,
+ dismissCountDown: 0,
+ alertVariant: 'danger'
+ }
+ },
+ created : function() {
+ this.$store.commit('changed','Jenis Anggaran')
+ },
+ methods: {
+ submitChangePassword() {
+ if (this.changePass.oldPassword.length === 0) {
+ this.setMessage("Kata sandi lama wajib diisi", 'warning')
+ return
+ }
+ if (this.changePass.newPassword.length === 0) {
+ this.setMessage("Kata sandi baru wajib diisi", 'warning')
+ return
+ }
+ if (this.changePass.newPassword !== this.changePass.confirmPassword) {
+ this.setMessage("Kata sandi baru tidak cocok", 'warning')
+ return
+ }
+
+ let fetchData = {
+ method: 'POST',
+ body: JSON.stringify(
+ {
+ current_password: this.changePass.oldPassword,
+ new_password: this.changePass.newPassword
+ }
+ ),
+ headers: {
+ "Content-Type": "application/json",
+ "Authorization": this.$store.state.user.token
+ }
+ };
+
+ fetch(`${this.$store.state.baseUrl}/api/change-password`, fetchData)
+ .then(response => response.json())
+ .then(response => {
+ if(response.status === 200) {
+ this.setMessage('Kata sandi berhasil diubah!', 'success')
+ } else if (response.status === 401) {
+ this.setMessage('Kata sandi lama Anda salah. Silakan masukkan kembali kata sandi lama yang benar.', 'danger')
+ } else {
+ this.setMessage('Terjadi kesalahan. Kesalahan: ' + response.message, 'danger')
+ }
+ })
+ .catch(error => {
+ this.setMessage('Tidak dapat terhubung dengan server. Mohon periksa koneksi internet dan cobalah beberapa saat lagi.', 'danger')
+ })
+ },
+ countdownCallback(dismissCountDown) {
+ this.dismissCountDown = dismissCountDown
+ },
+ setMessage(message, variant) {
+ this.message = message
+ this.alertVariant = variant
+ this.dismissCountDown = this.dismissSecs
+ }
+ }
+}
+</script>
+
+
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
+#placeholder {
+ display: flex;
+ padding: 30px 20px;
+
+ #container {
+ height: auto;
+ width: 100%;
+ min-width: 250px;
+ max-width: 500px;
+ margin: auto;
+ border-radius: 5px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+ }
+}
+
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/partials/Navbar.vue b/src/components/partials/Navbar.vue
index 8ae46fd39db578c1653ac587062dc94d11c3ce1a..f6782aa113f7b76c3f520c10f13e881d6695718b 100644
--- a/src/components/partials/Navbar.vue
+++ b/src/components/partials/Navbar.vue
@@ -45,7 +45,7 @@
>
Panel Admin
</b-dropdown-item>
- <b-dropdown-item v-on:click="gotoPage('SemuaAnggaran')">
+ <b-dropdown-item v-on:click="gotoPage('UserSettings')">
Pengaturan
</b-dropdown-item>
<b-dropdown-item v-on:click="logOut()">
diff --git a/src/router/index.js b/src/router/index.js
index 4a95d4e3b7e87d2b2707f93df09e368f37f38c9b..fa7d7fa16d106bfe81577a6be161ff45f59a2f61 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,6 +9,7 @@ import BiayaLangsung from '@/components/pages/BiayaLangsungPage'
import SemuaAnggaran from '@/components/pages/SemuaAnggaran'
import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
import PanelAdministrator from '@/components/pages/PanelAdministrator'
+import UserSettings from '@/components/pages/SettingsPage'
Vue.use(Router)
export default new Router({
@@ -63,6 +64,11 @@ export default new Router({
name: 'PanelAdministrator',
component: PanelAdministrator
},
+ {
+ path: '/pengaturan',
+ name: 'UserSettings',
+ component: UserSettings
+ },
],
mode: 'history',
})