Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
14 kB
1
Indexable
Never
<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>