forked from verdnatura/salix-front
refactor
This commit is contained in:
parent
ea9828328e
commit
75f0d53566
|
|
@ -3,28 +3,29 @@ import { ref } from 'vue';
|
|||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const $props = defineProps({
|
||||
const { t } = useI18n();
|
||||
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
default: null,
|
||||
},
|
||||
question: {
|
||||
type: String,
|
||||
default: 'Confirm',
|
||||
default: null,
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: 'Are you sure you want to continue?',
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
defineEmits(['confirm', ...useDialogPluginComponent.emits]);
|
||||
|
||||
const { dialogRef, onDialogOK } = useDialogPluginComponent();
|
||||
const { t } = useI18n();
|
||||
|
||||
const question = ref($props.question);
|
||||
const message = ref($props.message);
|
||||
const question = props.question || t('question');
|
||||
const message = props.message || t('message');
|
||||
const isLoading = ref(false);
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -36,8 +37,7 @@ const isLoading = ref(false);
|
|||
color="primary"
|
||||
text-color="white"
|
||||
size="xl"
|
||||
rounded
|
||||
v-if="icon != ''"
|
||||
v-if="icon"
|
||||
/>
|
||||
<span class="text-h6 text-grey">{{ message }}</span>
|
||||
<q-space />
|
||||
|
|
@ -64,3 +64,15 @@ const isLoading = ref(false);
|
|||
min-width: 350px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
"en": {
|
||||
"question": "Are you sure you want to continue?",
|
||||
"message": "Confirm"
|
||||
}
|
||||
|
||||
"es": {
|
||||
"question": "¿Seguro que quieres continuar?",
|
||||
"message": "Confirmar"
|
||||
}
|
||||
</i18n>
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@ import { useQuasar } from 'quasar';
|
|||
import VnConfirm from 'src/components/ui/VnConfirm.vue';
|
||||
|
||||
import { useRouter } from 'vue-router';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import FetchData from 'components/FetchData.vue';
|
||||
// import FormModel from 'components/FormModel.vue';
|
||||
|
||||
const router = useRouter();
|
||||
// const { t } = useI18n();
|
||||
const { t } = useI18n();
|
||||
const session = useSession();
|
||||
const token = session.getToken();
|
||||
const quasar = useQuasar();
|
||||
|
|
@ -50,8 +50,7 @@ function viewDeleteDms(dmsId) {
|
|||
.dialog({
|
||||
component: VnConfirm,
|
||||
componentProps: {
|
||||
question: 'Are you sure you want to continue?',
|
||||
message: 'This file will be deleted',
|
||||
message: t('message'),
|
||||
icon: 'delete',
|
||||
},
|
||||
})
|
||||
|
|
@ -83,22 +82,19 @@ function setMultimedia(data) {
|
|||
limit="20"
|
||||
auto-load
|
||||
/>
|
||||
<div class="container">
|
||||
<q-card class="row items-start q-mt-sm q-py-md q-pr-md">
|
||||
<div
|
||||
class="col-3 multimedia relative-position"
|
||||
v-for="(media, index) of multimedia"
|
||||
:key="index"
|
||||
>
|
||||
<q-btn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="md"
|
||||
class="all-pointer-events absolute"
|
||||
style="top: 7%; left: 7%; z-index: 1"
|
||||
@click.stop="viewDeleteDms(index)"
|
||||
/>
|
||||
<div class="multimediaParent bg-transparent">
|
||||
<div v-for="(media, index) of multimedia" :key="index" class="relative-position">
|
||||
<q-btn
|
||||
icon="delete"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
size="md"
|
||||
class="all-pointer-events absolute"
|
||||
style="top: 10px; left: 10px; z-index: 1"
|
||||
@click.stop="viewDeleteDms(index)"
|
||||
round
|
||||
/>
|
||||
<q-card class="multimedia relative-position">
|
||||
<q-img
|
||||
:src="getImagePath(media)"
|
||||
class="rounded-borders cursor-pointer"
|
||||
|
|
@ -110,12 +106,12 @@ function setMultimedia(data) {
|
|||
:src="getImagePath(media)"
|
||||
class="rounded-borders cursor-pointer"
|
||||
muted="muted"
|
||||
:poster="getImagePath(media)"
|
||||
style="pointer-events: none"
|
||||
v-if="media.isVideo"
|
||||
>
|
||||
</q-video>
|
||||
</div>
|
||||
</q-card>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MULTIMEDIA DIALOG START-->
|
||||
|
|
@ -180,19 +176,28 @@ function setMultimedia(data) {
|
|||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.container2 {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.q-card {
|
||||
width: 100%;
|
||||
.multimediaParent {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
|
||||
grid-auto-rows: auto;
|
||||
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
.multimedia {
|
||||
height: 250px;
|
||||
padding: 7px;
|
||||
margin-bottom: 14px;
|
||||
transition: all 0.5s;
|
||||
opacity: 1;
|
||||
|
||||
.q-img {
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
|
|
@ -204,4 +209,18 @@ function setMultimedia(data) {
|
|||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.multimedia:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<i18n>
|
||||
"en": {
|
||||
"message": "This file will be deleted"
|
||||
}
|
||||
|
||||
"es": {
|
||||
"message": "Este archivo va a ser borrado"
|
||||
}
|
||||
</i18n>
|
||||
|
|
|
|||
Loading…
Reference in New Issue