LMartz/digitalpower_electron
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modal

Browse Source
This commit is contained in:
Lucas Sebastián Martínez
2024-09-22 23:45:44 -03:00
parent 9850887285
commit 1d66aaf7c5
12 changed files with 102 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/App.vue
View File

@@ -31,7 +31,7 @@ onMounted(() => {
:root {
--header-height: 150px !important;
--app-shadow: rgba(0, 0, 0, 0.45);
--navmenu-height: 200px;
--navmenu-height: 210px;
}
body {
@@ -69,6 +69,7 @@ body {
label {
text-align: left !important;
text-transform: capitalize;
}
.window-container {

5
src/components/app/Layout.vue
View File

@@ -1,14 +1,15 @@
<script setup>
import {useUserStore} from "@/pinia/user";
import {onBeforeMount} from "vue";
import {useRoute} from "vue-router";
import {useRoute, useRouter} from "vue-router";
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
onBeforeMount(async () => {
const user = await userStore.getUser();
if (!user && !["/#/login", "/#/register"].includes(route.fullPath)) {
location.href = ('/#/login');
location.href = "/#/login";
}
})
</script>

17
src/components/app/Nav.vue
View File

@@ -4,10 +4,12 @@ import {onMounted, ref} from "vue";
import {useUi} from "@/pinia/ui";
import {useRouter} from "vue-router";
import {useUserStore} from "@/pinia/user";
import {useProductStore} from "@/pinia/products";
const router = useRouter();
const ui = useUi();
const userStore = useUserStore();
const productStore = useProductStore();
const options = ref([
{
name: "Aplicacion", items: [
@@ -32,7 +34,12 @@ const options = ref([
},
{
name: "Productos", items: [
{name: "Agregar Producto"},
{
name: "Agregar Producto", callback: () => {
ui.reset()
productStore.product_modal = true;
}
},
{name: "Generar Venta"},
]
},
@@ -48,10 +55,18 @@ const options = ref([
items: [],
url: '/',
},
{
name: "Chat",
items: [],
url: '/',
},
]);
function openMenu(items, name, url) {
if (ui.selectedMenu === name) return;
ui.setCurrentMenu(null);
if (!items) return;
if (url) {

4
src/components/app/NavMenu.vue
View File

@@ -25,6 +25,10 @@ const ui = useUi();
animation: fade .2s ease-in-out forwards;
overflow-y: auto;
&::-webkit-scrollbar {
display: none;
}
}
.item {

8
src/components/productos/Filters.vue
View File

@@ -1,15 +1,22 @@
<script setup>
import {Input} from 'vuedigitalpowerui'
import {ref} from "vue";
import {useProductStore} from "@/pinia/products";
const emits = defineEmits(["search"]);
const props = defineProps(["filters"])
const filter = ref("");
const value = ref("");
const productStore = useProductStore()
function search() {
emits("search", {filter: filter.value, value: value.value})
}
async function update() {
await productStore.fetchProducts();
}
</script>
<template>
@@ -19,6 +26,7 @@ function search() {
<Input class="filter" placeholder="Busqueda" v-model="value"/>
<Input type="button" value="Buscar" background="var(--primary)" color="white" @click="search"/>
<Input type="button" value="Limpiar" background="var(--primary)" color="white"/>
<Input type="button" value="Actualizar" background="var(--primary)" color="white" @click="update"/>
</form>
</div>
</template>

35
src/components/productos/ProductModal.vue Normal file
View File

@@ -0,0 +1,35 @@
<script setup>
import {Modal, Input} from 'vuedigitalpowerui'
import {useProductStore} from "@/pinia/products";
const productStore = useProductStore()
const props = defineProps(["headers"])
const emits = defineEmits(["confirm"])
</script>
<template>
<Modal title="Producto" @close="() => {productStore.product_modal = false}">
<div class="entradas" gapped>
<div v-for="(item, key) in headers" class="entrada">
<Input class="mt-3" :key :label="item?.name" v-if="item?.name !== 'acciones'"/>
</div>
</div>
<div flex gapped class="mt-3">
<Input value="Guardar" type="button" background="var(--primary)" color="white"/>
<Input value="Cancelar" type="button" background="var(--red)" color="white"
@click="() => {productStore.product_modal = false}"/>
</div>
</Modal>
</template>
<style scoped lang="scss">
.entradas {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.entrada {
width: 47%;
}
</style>

7
src/components/productos/Table.vue
View File

@@ -2,6 +2,7 @@
import {useUi} from "@/pinia/ui";
import {onMounted} from "vue";
import {useProductStore} from "@/pinia/products";
import {limit} from "../../services/utils";
const props = defineProps(["items", "headers"])
const productStore = useProductStore();
@@ -20,7 +21,10 @@ onMounted(async () => {
</thead>
<tbody>
<tr v-for="(item, key) in productStore.productos">
<td noselect v-for="(head, key) in headers" :class="head">{{ item?.[head?.name?.toLowerCase()] }}</td>
<td noselect v-for="(head, key) in headers" :class="head">{{
limit(item?.[head?.name?.toLowerCase()], 30)
}}
</td>
</tr>
</tbody>
</table>
@@ -47,6 +51,7 @@ table {
thead > tr > th {
border-top: none;
text-transform: capitalize;
&:first-child {

3
src/pinia/products.js
View File

@@ -4,7 +4,8 @@ import {DBService, post} from "@/services/apiReq";
export const useProductStore = defineStore('products', {
state: () => ({
productos: [],
filter: {}
filter: {},
product_modal: false,
}),
actions: {
async fetchProducts() {

12
src/services/utils.js Normal file
View File

@@ -0,0 +1,12 @@
export const limit = (text, limit) => {
if (!text) return "";
if (text?.length <= limit) {
return text;
} else {
try {
return text?.slice(0, limit) + '...';
} catch (e) {
return text;
}
}
}

9
src/styles/digitalpower.css
View File

@@ -357,13 +357,14 @@ p {
[overlay] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
top: 2em !important;
left: 2em !important;
width: calc(100vw - 4.6em) !important;
height: calc(100vh - 4.2em) !important;
z-index: 15;
background: var(--gray);
border-radius: 15px;
}
[inside-verlay] {

29
src/views/HomeView.vue
View File

@@ -2,6 +2,7 @@
<Layout @click="handleClick">
<Table :headers :items="productos"></Table>
<Filters :filters="headers"></Filters>
<ProductModal v-if="productStore.product_modal" :headers/>
</Layout>
</template>
@@ -11,13 +12,14 @@ import Table from "@/components/productos/Table.vue";
import {computed, onMounted, ref} from "vue";
import Filters from "@/components/productos/Filters.vue";
import {useUi} from "@/pinia/ui";
import {show} from "@/services/notification";
import {useUserStore} from "@/pinia/user";
import ProductModal from "@/components/productos/ProductModal.vue";
import {useProductStore} from "@/pinia/products";
const ui = useUi();
const userStore = useUserStore()
const productStore = useProductStore()
const headers = computed(() => {
const producto = productos.value?.[0];
const producto = productStore.productos?.[0];
if (!producto) return [
{value: 'Nombre', name: 'Nombre'},
{value: 'Precio', name: 'Precio'},
@@ -26,32 +28,17 @@ const headers = computed(() => {
{value: 'Acciones', name: 'Acciones'},
];
delete producto.id;
producto.acciones = null;
return Object.keys(producto).map((x) => {
return {value: x, name: x};
})
})
const productos = ref([
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
{Nombre: "Producto de prueba de longitud", Precio: "Precio", Stock: "Stock", Vendidos: 0, Acciones: 0},
]);
onMounted(() => {
})
function handleClick() {
ui.setCurrentMenu(null)
}