|
|
@@ -1,3 +1,157 @@
|
|
|
<template>
|
|
|
- <h1>Mídias</h1>
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div class="row q-col-gutter-md">
|
|
|
+ <div class="col-12 col-md-5">
|
|
|
+ <q-table
|
|
|
+ :rows="medias"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="title"
|
|
|
+ flat
|
|
|
+ hide-bottom
|
|
|
+ class="bg-transparent"
|
|
|
+ :row-class="
|
|
|
+ (_, index) =>
|
|
|
+ index === selectedIndex
|
|
|
+ ? 'media-item-active cursor-pointer'
|
|
|
+ : 'cursor-pointer'
|
|
|
+ "
|
|
|
+ @row-click="(_, __, index) => (selectedIndex = index)"
|
|
|
+ >
|
|
|
+ <template #body-cell-actions>
|
|
|
+ <q-td align="center">
|
|
|
+ <div class="flex items-center justify-center q-gutter-x-xs">
|
|
|
+ <q-icon
|
|
|
+ name="mdi-file-edit-outline"
|
|
|
+ size="sm"
|
|
|
+ color="grey-8"
|
|
|
+ class="cursor-pointer"
|
|
|
+ style="
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 4px;
|
|
|
+ "
|
|
|
+ @click.stop="console.log('edit')"
|
|
|
+ />
|
|
|
+ <q-icon
|
|
|
+ name="mdi-trash-can-outline"
|
|
|
+ size="sm"
|
|
|
+ color="grey-8"
|
|
|
+ class="cursor-pointer"
|
|
|
+ style="
|
|
|
+ border: 1px solid #c9c9c9;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 4px;
|
|
|
+ "
|
|
|
+ @click.stop="console.log('trash')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #body-cell-franchisee>
|
|
|
+ <q-td align="center">
|
|
|
+ <div class="flex items-center justify-center q-gutter-x-xs">
|
|
|
+ <q-icon
|
|
|
+ name="mdi-check"
|
|
|
+ size="sm"
|
|
|
+ color="suface"
|
|
|
+ class="cursor-pointer bg-approved"
|
|
|
+ style="border: 1px solid #c9c9c9; border-radius: 8px"
|
|
|
+ @click.stop="console.log('edit')"
|
|
|
+ />
|
|
|
+ <q-icon
|
|
|
+ name="mdi-close-circle-outline"
|
|
|
+ size="sm"
|
|
|
+ color="declined"
|
|
|
+ class="cursor-pointer"
|
|
|
+ style="border: 1px solid red; border-radius: 8px"
|
|
|
+ @click.stop="console.log('trash')"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+ </q-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="col-12 col-md-7">
|
|
|
+ <div class="row justify-end q-mb-sm">
|
|
|
+ <q-btn
|
|
|
+ icon="add"
|
|
|
+ color="primary-2"
|
|
|
+ style="height: 40px; width: 40px; border-radius: 8px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="preview-box q-pa-md">
|
|
|
+ <span v-if="selectedIndex === null" class="text-grey-5"
|
|
|
+ >Pré - Visualização</span
|
|
|
+ >
|
|
|
+ <div v-else>
|
|
|
+ <p class="text-weight-medium q-mb-sm">
|
|
|
+ {{ medias[selectedIndex].title }}
|
|
|
+ </p>
|
|
|
+ <img
|
|
|
+ v-if="medias[selectedIndex].url"
|
|
|
+ :src="medias[selectedIndex].url"
|
|
|
+ style="max-width: 100%; border-radius: 4px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref } from "vue";
|
|
|
+
|
|
|
+const selectedIndex = ref(null);
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ name: "date",
|
|
|
+ label: "Data",
|
|
|
+ field: "date",
|
|
|
+ align: "left",
|
|
|
+ style: "width: 90px",
|
|
|
+ },
|
|
|
+ { name: "title", label: "Título", field: "title", align: "left" },
|
|
|
+ {
|
|
|
+ name: "actions",
|
|
|
+ label: "Ações",
|
|
|
+ field: "actions",
|
|
|
+ align: "center",
|
|
|
+ style: "width: 90px",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "franchisee",
|
|
|
+ label: "Franqueado",
|
|
|
+ field: "franchisee",
|
|
|
+ align: "center",
|
|
|
+ style: "width: 100px",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const medias = ref([
|
|
|
+ {
|
|
|
+ date: "15/01/2026",
|
|
|
+ title: "Imagens Sede",
|
|
|
+ url: "",
|
|
|
+ },
|
|
|
+]);
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.preview-box {
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
+ border-radius: 8px;
|
|
|
+ min-height: 400px;
|
|
|
+}
|
|
|
+
|
|
|
+.media-item-active {
|
|
|
+ background-color: rgba(255, 131, 64, 0.08);
|
|
|
+}
|
|
|
+
|
|
|
+.transparent-header :deep(thead tr th) {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+</style>
|
ebagabee