|
|
@@ -0,0 +1,195 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <DefaultHeaderPage title="Cadastro de Usuário" />
|
|
|
+
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div class="column justify-center items-center q-mb-lg">
|
|
|
+ <div class="q-mb-md">
|
|
|
+ <q-avatar size="80px" color="grey-3">
|
|
|
+ <q-icon name="mdi-account" size="48px" color="grey-6" />
|
|
|
+ <q-btn
|
|
|
+ round
|
|
|
+ dense
|
|
|
+ color="primary"
|
|
|
+ icon="mdi-camera"
|
|
|
+ size="xs"
|
|
|
+ style="position: absolute; bottom: 0; right: 0"
|
|
|
+ @click="triggerFileInput"
|
|
|
+ />
|
|
|
+ </q-avatar>
|
|
|
+ <input
|
|
|
+ ref="fileInputRef"
|
|
|
+ type="file"
|
|
|
+ accept="image/*"
|
|
|
+ style="display: none"
|
|
|
+ @change="onAvatarChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row full-width q-mt-md q-col-gutter-sm">
|
|
|
+ <DefaultSelect
|
|
|
+ v-model="form.state"
|
|
|
+ label="Estado / UF"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ :options="stateOptions"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultSelect
|
|
|
+ v-model="form.unit"
|
|
|
+ label="Unidade"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ :options="unitOptions"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultSelect
|
|
|
+ v-model="form.role"
|
|
|
+ label="Tipo de Usuário"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ emit-value
|
|
|
+ map-options
|
|
|
+ :options="roleOptions"
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInput
|
|
|
+ v-model="form.cpf"
|
|
|
+ label="CPF"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInput
|
|
|
+ v-model="form.name"
|
|
|
+ label="Nome"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultPasswordInput
|
|
|
+ v-model="form.password"
|
|
|
+ label="Senha"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInput
|
|
|
+ v-model="form.surname"
|
|
|
+ label="Sobrenome"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultPasswordInput
|
|
|
+ v-model="form.password_confirmation"
|
|
|
+ label="Repetir Senha"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ />
|
|
|
+
|
|
|
+ <DefaultInput
|
|
|
+ v-model="form.email"
|
|
|
+ label="E-mail"
|
|
|
+ class="col-6"
|
|
|
+ outlined
|
|
|
+ type="email"
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="col-6 flex items-center">
|
|
|
+ <q-btn
|
|
|
+ label="Gerar senha segura"
|
|
|
+ icon="mdi-thumb-up-outline"
|
|
|
+ color="primary"
|
|
|
+ @click="generatePassword"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="row justify-end q-mt-md full-width">
|
|
|
+ <q-btn
|
|
|
+ label="SALVAR"
|
|
|
+ icon-right="mdi-check"
|
|
|
+ color="primary"
|
|
|
+ @click="onSave"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, useTemplateRef } from "vue";
|
|
|
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
|
|
|
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
|
|
|
+import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
|
|
|
+import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
|
|
|
+
|
|
|
+const fileInputRef = useTemplateRef("fileInputRef");
|
|
|
+
|
|
|
+const form = ref({
|
|
|
+ state: null,
|
|
|
+ unit: null,
|
|
|
+ role: null,
|
|
|
+ cpf: null,
|
|
|
+ name: null,
|
|
|
+ surname: null,
|
|
|
+ email: null,
|
|
|
+ password: null,
|
|
|
+ password_confirmation: null,
|
|
|
+});
|
|
|
+
|
|
|
+const stateOptions = ref([
|
|
|
+ { label: "Paraná", value: "PR" },
|
|
|
+ { label: "São Paulo", value: "SP" },
|
|
|
+ { label: "Santa Catarina", value: "SC" },
|
|
|
+]);
|
|
|
+
|
|
|
+const unitOptions = ref([
|
|
|
+ { label: "Toledo-PR", value: "toledo" },
|
|
|
+ { label: "Arapongas-PR", value: "arapongas" },
|
|
|
+ { label: "Curitiba-PR", value: "curitiba" },
|
|
|
+ { label: "Londrina-PR", value: "londrina" },
|
|
|
+ { label: "Ponta Grossa-PR", value: "ponta_grossa" },
|
|
|
+ { label: "Maringá-PR", value: "maringa" },
|
|
|
+ { label: "Cascavel-PR", value: "cascavel" },
|
|
|
+]);
|
|
|
+
|
|
|
+const roleOptions = ref([
|
|
|
+ { label: "Neurotainer", value: "neurotainer" },
|
|
|
+ { label: "Assessor", value: "assessor" },
|
|
|
+ { label: "Marketing", value: "marketing" },
|
|
|
+ { label: "Comercial", value: "comercial" },
|
|
|
+ { label: "Gestor", value: "gestor" },
|
|
|
+ { label: "Administrativo", value: "administrativo" },
|
|
|
+ { label: "Recepção", value: "recepcao" },
|
|
|
+]);
|
|
|
+
|
|
|
+function triggerFileInput() {
|
|
|
+ fileInputRef.value?.click();
|
|
|
+}
|
|
|
+
|
|
|
+function onAvatarChange(event) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ console.log("Avatar file selected:", file);
|
|
|
+}
|
|
|
+
|
|
|
+function generatePassword() {
|
|
|
+ const chars =
|
|
|
+ "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%";
|
|
|
+ const password = Array.from({ length: 12 }, () =>
|
|
|
+ chars.charAt(Math.floor(Math.random() * chars.length)),
|
|
|
+ ).join("");
|
|
|
+ form.value.password = password;
|
|
|
+ form.value.password_confirmation = password;
|
|
|
+}
|
|
|
+
|
|
|
+function onSave() {
|
|
|
+ console.log("Saving user:", form.value);
|
|
|
+}
|
|
|
+</script>
|
ebagabee