Untitled
unknown
plain_text
2 years ago
14 kB
4
Indexable
<template>
<div class="my-2">
<div>
<!-- <v-card v-if="user.disabled" class="warning mb-4" light>
<v-card-title>User Disabled</v-card-title>
<v-card-subtitle>This user has been disabled! Login accesss has been revoked.</v-card-subtitle>
<v-card-text>
<v-btn dark @click="user.disabled = false">
<v-icon left small>mdi-account-check</v-icon>Enable User
</v-btn>
</v-card-text>
</v-card> -->
<v-card>
<v-card-title>Basic Information</v-card-title>
<v-card-text>
<div class="d-flex flex-column flex-sm-row">
<div>
<v-img
:src="user.avatar"
aspect-ratio="1"
class="blue-grey lighten-4 rounded elevation-3"
max-width="90"
max-height="90"
></v-img>
<v-btn class="mt-1" small>Edit Avatar</v-btn>
</div>
<div class="flex-grow-1 pt-2 pa-sm-2">
<!-- <v-text-field v-model="user.name" label="Display name" value="John" placeholder="name"></v-text-field> -->
<v-text-field label="Display name" :value="dataUser.User.name" placeholder="name"></v-text-field>
<!-- <v-text-field v-model="user.email" label="Email" hide-details></v-text-field> -->
<v-text-field label="Email" :value="dataUser.User.email" hide-details></v-text-field>
<!-- <div class="d-flex flex-column">
<v-checkbox v-model="user.verified" dense label="Email Verified"></v-checkbox>
<div>
<v-btn
v-if="!user.verified"
>
<v-icon left small>mdi-email</v-icon>Send Verification Email
</v-btn>
</div>
</div> -->
<div class="mt-2">
<!-- <v-btn color="primary" @click>Save</v-btn> -->
</div>
</div>
</div>
</v-card-text>
</v-card>
<v-expansion-panels v-model="panel" multiple class="mt-3">
<v-expansion-panel>
<!-- <v-expansion-panel-header class="title">Actions</v-expansion-panel-header> -->
<v-expansion-panel-content>
<div class="mb-2">
<div class="title">Reset User Password</div>
<div class="subtitle mb-2">Sends a reset password email to the user.</div>
<!-- <v-btn
class="mb-2"
@click
> -->
<!-- <v-icon left small>mdi-email</v-icon>Send Reset Password Email
</v-btn> -->
</div>
<v-divider></v-divider>
<div class="my-2">
<div class="title">Export Account Data</div>
<div class="subtitle mb-2">Export all the platform metadata for this user.</div>
<v-btn class="mb-2">
<v-icon left small>mdi-clipboard-account</v-icon>Export User Data
</v-btn>
</div>
<v-divider></v-divider>
<div class="my-2">
<div class="error--text title">Danger Zone</div>
<div class="subtitle mb-2">Full administrator with access to this dashboard.</div>
<div class="my-2">
<v-btn
v-if="user.role === 'ADMIN'"
color="primary"
@click="user.role = 'USER'"
>
<v-icon left small>mdi-security</v-icon>Remove admin access
</v-btn>
<v-btn v-else color="primary" @click="user.role = 'ADMIN'">
<v-icon left small>mdi-security</v-icon>Set User as Admin
</v-btn>
</div>
<v-divider></v-divider>
<div class="subtitle mt-3 mb-2">Prevent the user from signing in on the platform.</div>
<div class="my-2">
<v-btn
v-if="user.disabled"
color="warning"
@click="user.disabled = false"
>
<v-icon left small>mdi-account-check</v-icon>Enable User
</v-btn>
<v-btn
v-else
color="warning"
@click="disableDialog = true"
>
<v-icon left small>mdi-cancel</v-icon>Disable User
</v-btn>
</div>
<v-divider></v-divider>
<div
class="subtitle mt-3 mb-2"
>To delete the user please transfer ownership or delete user's subscriptions.</div>
<v-btn color="error" @click="deleteDialog = true">
<v-icon left small>mdi-delete</v-icon>Delete User
</v-btn>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
<!-- <v-expansion-panel>
<v-expansion-panel-header class="title">Metadata</v-expansion-panel-header>
<v-expansion-panel-content class="body-2">
<span class="font-weight-bold">Created</span>
{{ user.created | formatDate('lll') }}
<br />
<span class="font-weight-bold">Last Sign In</span>
{{ user.lastSignIn | formatDate('lll') }}
</v-expansion-panel-content>
</v-expansion-panel> -->
<v-expansion-panel>
<v-expansion-panel-header class="title">Document Information</v-expansion-panel-header>
<v-expansion-panel-content>
<pre class="body-2">
<div class="flex-grow-1 pt-1 pa-sm-2">
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="editedItem.date"
persistent
width="290px"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="date"
label="Picker in dialog"
prepend-icon="mdi-calendar"
readonly
v-bind="attrs"
v-on="on"
class="px-4"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
<v-text-field label="Event Date" :value="dataUser.Schedule.scheduleDate.date" v-model="sendData.date" placeholder="name"></v-text-field>
<v-text-field label="Location" :value="dataUser.Schedule.location.name" v-model="sendData.name" placeholder="name"></v-text-field>
<v-text-field label="Title Session" :value="dataUser.Schedule.title" v-model="sendData.title" placeholder="name"></v-text-field>
<v-text-field label="As" :disabled=true value="Speaker" hide-details></v-text-field>
<input type="file" id="files" ref="files" multiple v-on:change="handleFilesUpload()" />
<div class="d-flex">
<!-- <v-btn>Reset</v-btn> -->
<v-spacer></v-spacer>
<v-btn color="primary" @click="senddocument()">Save</v-btn>
</div>
</div>
</pre>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header class=" title">QR CODE</v-expansion-panel-header>
<v-expansion-panel-content>
<pre class="body-2">
<v-card max-height="700" max-width="700" class="ma-auto ">
<v-row>
<v-col class="">
<v-img class="qr-image"
v-bind:src="'https://chart.googleapis.com/chart?chs=200x200&cht=qr&chl='+user.user_id"
max-height="1000"
max-width="1000"
contains
></v-img>
</v-col>
<v-col class="mr-4 ml-0 mt-5" >
<v-row>
<v-col class="pt-3 py-0">id :{{ dataUser.ID }}</v-col>
</v-row>
<v-row>
<!-- <v-col class="pt-3 py-0">NIM : {{ user.nim }}</v-col> -->
</v-row>
<v-row>
<!-- <v-col class="pt-3 py-0">Name : John</v-col> -->
<v-col class="pt-3 py-0">Name : {{ dataUser.User.name }}</v-col>
</v-row>
<v-row>
<v-col class="pt-3 py-0">Email : {{ dataUser.User.email }}</v-col>
<!-- <v-col class="pt-3 py-0">Name : {{ user.name }}</v-col> -->
</v-row>
</v-col>
<!-- <v-col>
<v-btn @click="downloadQR()">download</v-btn>
</v-col> -->
</v-row>
</v-card>
</pre>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
<!-- disable modal -->
<v-dialog v-model="disableDialog" max-width="290">
<v-card>
<v-card-title class="headline">Disable User</v-card-title>
<v-card-text>Are you sure you want to disable this user?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="disableDialog = false">Cancel</v-btn>
<v-btn color="warning" @click="user.disabled = true; disableDialog = false">Disable</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- delete modal -->
<v-dialog v-model="deleteDialog" max-width="290">
<v-card>
<v-card-title class="headline">Delete User</v-card-title>
<v-card-text>Are you sure you want to delete this user?</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn @click="deleteDialog = false">Cancel</v-btn>
<v-btn color="error" @click="deleteDialog = false">Delete</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
import Vue from "vue"
import authHeader from '../../../configs/auth-header/auth-header'
import axios from 'axios'
import apiUrl from '../../../configs/environment/apiUrl'
export default {
props: {
user: {
type: Object,
default: () => ({})
}
},
data() {
return {
user_id: localStorage.getItem('user_id'),
panel: [1],
dataUser:[],
deleteDialog: false,
disableDialog: false,
files : '',
token: {},
sendData : {
date : 'aa',
name : 'ss',
title : '',
document : '',
}
}
},
mounted() {
this.load()
},
methods: {
load() {
axios
.create(
{ headers: authHeader() }
)
.get(apiUrl('profile')+this.user_id).then(res => {
this.dataUser = res.data[0]
console.log(this.dataUser)
this.sendData.date = this.dataUser.Schedule.scheduleDate.date
this.sendData.name = this.dataUser.User.name
this.sendData.title = this.dataUser.Schedule.title
})
},
senddocument(){
console.log(this.sendData)
},
handleFilesUpload() {
this.files = this.$refs.files.files;
console.log(this.files)
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.list[this.editedIndex], this.form)
this.form.numcode = parseInt(this.form.numcode)
this.form.phonecode = parseInt(this.form.phonecode)
axios.put(apiUrl('product') + this.form.id, this.form)
.then((res) => {
console.log(res.statusText);
console.log('sukses');
this.close
})
.catch((error) => {
console.log(error);
}).finally(() => {
});
} else {
var lastRowIndex = this.list.length - 1;
let formData = new FormData();
for (var i = 0; i < this.files.length; i++) {
let file = this.files[i];
formData.append('file', file);
}
formData.append('name', this.form.name);
formData.append('stock', parseInt(this.form.stock));
formData.append('price', parseInt(this.form.price));
console.log(formData)
axios
.create({
headers: authHeader()
})
.post(apiUrl('product'),
formData,
).then(function () {
console.log('SUCCESS!!');
})
.catch(function () {
console.log('FAILURE!!');
});
}
this.close()
},
}
}
</script>
Editor is loading...