Frontend created and rewritten a few times, with some backend fixes #1
34
cista-front/components.d.ts
vendored
Normal file
34
cista-front/components.d.ts
vendored
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
|
||||||
|
ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
|
||||||
|
AButton: typeof import('ant-design-vue/es')['Button']
|
||||||
|
ACol: typeof import('ant-design-vue/es')['Col']
|
||||||
|
AForm: typeof import('ant-design-vue/es')['Form']
|
||||||
|
AFormItem: typeof import('ant-design-vue/es')['FormItem']
|
||||||
|
AImage: typeof import('ant-design-vue/es')['Image']
|
||||||
|
AInput: typeof import('ant-design-vue/es')['Input']
|
||||||
|
APageHeader: typeof import('ant-design-vue/es')['PageHeader']
|
||||||
|
APopover: typeof import('ant-design-vue/es')['Popover']
|
||||||
|
AppNavigation: typeof import('./src/components/AppNavigation.vue')['default']
|
||||||
|
AProgress: typeof import('ant-design-vue/es')['Progress']
|
||||||
|
ARow: typeof import('ant-design-vue/es')['Row']
|
||||||
|
ATable: typeof import('ant-design-vue/es')['Table']
|
||||||
|
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
|
||||||
|
FileCarousel: typeof import('./src/components/FileCarousel.vue')['default']
|
||||||
|
FileExplorer: typeof import('./src/components/FileExplorer.vue')['default']
|
||||||
|
FileViewer: typeof import('./src/components/FileViewer.vue')['default']
|
||||||
|
HeaderMain: typeof import('./src/components/HeaderMain.vue')['default']
|
||||||
|
NotificationLoading: typeof import('./src/components/NotificationLoading.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
UploadButton: typeof import('./src/components/UploadButton.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
5010
cista-front/package-lock.json
generated
5010
cista-front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -1,27 +1,49 @@
|
||||||
{
|
{
|
||||||
"name": "cista-front",
|
"name": "front",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "run-p type-check \"build-only {@}\" --",
|
"build": "run-p type-check \"build-only {@}\" --",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
|
"test:unit": "vitest",
|
||||||
"build-only": "vite build",
|
"build-only": "vite build",
|
||||||
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
|
"type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||||
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
||||||
|
"format": "prettier --write src/"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"pinia": "^2.1.7",
|
"@ant-design/icons-vue": "^7.0.0",
|
||||||
|
"@vueuse/core": "^10.4.1",
|
||||||
|
"ant-design-vue": "^4.0.3",
|
||||||
|
"axios": "^1.5.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"pinia": "^2.1.6",
|
||||||
|
"unplugin-vue-components": "^0.25.2",
|
||||||
|
"vite-plugin-rewrite-all": "^1.0.1",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-router": "^4.2.5"
|
"vue-router": "^4.2.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@rushstack/eslint-patch": "^1.3.3",
|
||||||
"@tsconfig/node18": "^18.2.2",
|
"@tsconfig/node18": "^18.2.2",
|
||||||
"@types/node": "^18.18.5",
|
"@types/jsdom": "^21.1.3",
|
||||||
"@vitejs/plugin-vue": "^4.4.0",
|
"@types/lodash-es": "^4.17.10",
|
||||||
|
"@types/node": "^18.17.17",
|
||||||
|
"@vitejs/plugin-vue": "^4.3.4",
|
||||||
|
"@vue/eslint-config-prettier": "^8.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^12.0.0",
|
||||||
|
"@vue/test-utils": "^2.4.1",
|
||||||
"@vue/tsconfig": "^0.4.0",
|
"@vue/tsconfig": "^0.4.0",
|
||||||
"npm-run-all2": "^6.1.1",
|
"eslint": "^8.49.0",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"jsdom": "^22.1.0",
|
||||||
|
"npm-run-all2": "^6.0.6",
|
||||||
|
"prettier": "^3.0.3",
|
||||||
"typescript": "~5.2.0",
|
"typescript": "~5.2.0",
|
||||||
"vite": "^4.4.11",
|
"vite": "^4.4.9",
|
||||||
"vue-tsc": "^1.8.19"
|
"vitest": "^0.34.4",
|
||||||
|
"vue-tsc": "^1.8.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,85 +1,65 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { RouterLink, RouterView } from 'vue-router'
|
import { RouterView } from 'vue-router'
|
||||||
import HelloWorld from './components/HelloWorld.vue'
|
import type { ComputedRef } from 'vue'
|
||||||
|
import { watchEffect } from 'vue'
|
||||||
|
import createWebSocket from '@/repositories/WS'
|
||||||
|
import { url_document_watch_ws, url_document_upload_ws, DocumentHandler, DocumentUploadHandler } from '@/repositories/Document'
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import HeaderMain from './components/HeaderMain.vue'
|
||||||
|
import AppNavigation from './components/AppNavigation.vue'
|
||||||
|
import Router from './router/index';
|
||||||
|
|
||||||
|
interface Path {
|
||||||
|
path: string;
|
||||||
|
pathList: string[];
|
||||||
|
}
|
||||||
|
const documentStore = useDocumentStore()
|
||||||
|
const path: ComputedRef<Path> = computed( () => {
|
||||||
|
const pathList = Router.currentRoute.value.path
|
||||||
|
.split('/')
|
||||||
|
.filter( value => value !== '')
|
||||||
|
|
||||||
|
return {
|
||||||
|
path: Router.currentRoute.value.path,
|
||||||
|
pathList
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
const documentHandler = new DocumentHandler()
|
||||||
|
const documentUploadHandler = new DocumentUploadHandler()
|
||||||
|
|
||||||
|
const wsWatch = createWebSocket(url_document_watch_ws, documentHandler.handleWebSocketMessage)
|
||||||
|
const wsUpload = createWebSocket(url_document_upload_ws, documentUploadHandler.handleWebSocketMessage)
|
||||||
|
|
||||||
|
documentStore.wsWatch = wsWatch;
|
||||||
|
documentStore.wsUpload = wsUpload;
|
||||||
|
})
|
||||||
|
|
||||||
|
export type { Path }
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header>
|
<header class="wrapper">
|
||||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
<HeaderMain WS="WS"></HeaderMain>
|
||||||
|
<AppNavigation :path="path.pathList"></AppNavigation>
|
||||||
<div class="wrapper">
|
|
||||||
<HelloWorld msg="You did it!" />
|
|
||||||
|
|
||||||
<nav>
|
|
||||||
<RouterLink to="/">Home</RouterLink>
|
|
||||||
<RouterLink to="/about">About</RouterLink>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<RouterView />
|
<RouterView class="page-container" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
header {
|
.wrapper{
|
||||||
line-height: 1.5;
|
background-color: var(--primary-background);
|
||||||
max-height: 100vh;
|
padding: 0.2em 0.5em;
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.router-link-exact-active {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a.router-link-exact-active:hover {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 1rem;
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:first-of-type {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
header {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
flex-direction: column;
|
||||||
padding-right: calc(var(--section-gap) / 2);
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
.page-container{
|
||||||
.logo {
|
flex-grow: 2;
|
||||||
margin: 0 2rem 0 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .wrapper {
|
|
||||||
display: flex;
|
|
||||||
place-items: flex-start;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
text-align: left;
|
|
||||||
margin-left: -1rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
|
|
||||||
padding: 1rem 0;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,86 +0,0 @@
|
||||||
/* color palette from <https://github.com/vuejs/theme> */
|
|
||||||
:root {
|
|
||||||
--vt-c-white: #ffffff;
|
|
||||||
--vt-c-white-soft: #f8f8f8;
|
|
||||||
--vt-c-white-mute: #f2f2f2;
|
|
||||||
|
|
||||||
--vt-c-black: #181818;
|
|
||||||
--vt-c-black-soft: #222222;
|
|
||||||
--vt-c-black-mute: #282828;
|
|
||||||
|
|
||||||
--vt-c-indigo: #2c3e50;
|
|
||||||
|
|
||||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
|
||||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
|
||||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
|
||||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
|
||||||
|
|
||||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
|
||||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
|
||||||
--vt-c-text-dark-1: var(--vt-c-white);
|
|
||||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* semantic color variables for this project */
|
|
||||||
:root {
|
|
||||||
--color-background: var(--vt-c-white);
|
|
||||||
--color-background-soft: var(--vt-c-white-soft);
|
|
||||||
--color-background-mute: var(--vt-c-white-mute);
|
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-light-2);
|
|
||||||
--color-border-hover: var(--vt-c-divider-light-1);
|
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-light-1);
|
|
||||||
--color-text: var(--vt-c-text-light-1);
|
|
||||||
|
|
||||||
--section-gap: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-background: var(--vt-c-black);
|
|
||||||
--color-background-soft: var(--vt-c-black-soft);
|
|
||||||
--color-background-mute: var(--vt-c-black-mute);
|
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-dark-2);
|
|
||||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-dark-1);
|
|
||||||
--color-text: var(--vt-c-text-dark-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-background);
|
|
||||||
transition:
|
|
||||||
color 0.5s,
|
|
||||||
background-color 0.5s;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-family:
|
|
||||||
Inter,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
'Segoe UI',
|
|
||||||
Roboto,
|
|
||||||
Oxygen,
|
|
||||||
Ubuntu,
|
|
||||||
Cantarell,
|
|
||||||
'Fira Sans',
|
|
||||||
'Droid Sans',
|
|
||||||
'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
font-size: 15px;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
|
||||||
|
Before Width: | Height: | Size: 276 B |
|
|
@ -1,35 +1,86 @@
|
||||||
@import './base.css';
|
:root {
|
||||||
|
--primary-background: #181818;
|
||||||
#app {
|
--secondary-background: #ffffff;
|
||||||
max-width: 1280px;
|
--font-color: #333333;
|
||||||
margin: 0 auto;
|
--table-background: #535353;
|
||||||
padding: 2rem;
|
--primary-color: #ffffff;
|
||||||
|
--secondary-color: #ccc;
|
||||||
font-weight: normal;
|
--blue-color: #66ffeb
|
||||||
}
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
a,
|
:root {
|
||||||
.green {
|
--primary-background: #181818;
|
||||||
text-decoration: none;
|
--secondary-background: #333333;
|
||||||
color: hsla(160, 100%, 37%, 1);
|
--font-color: #ffffff;
|
||||||
transition: 0.4s;
|
--table-background: #535353;
|
||||||
}
|
--primary-color: #ffffff;
|
||||||
|
--secondary-color: #ccc;
|
||||||
@media (hover: hover) {
|
--blue-color: #66ffeb
|
||||||
a:hover {
|
|
||||||
background-color: hsla(160, 100%, 37%, 0.2);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
body {
|
||||||
@media (min-width: 1024px) {
|
background-color: var(--table-background);
|
||||||
body {
|
}
|
||||||
|
.ant-breadcrumb-separator, .ant-breadcrumb-link, .ant-breadcrumb .anticon {
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
font-size: 1.2em !important;
|
||||||
|
}
|
||||||
|
#app{
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
place-items: center;
|
flex-direction: column;
|
||||||
|
background-color: var(--secondary-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-image-preview-mask{
|
||||||
|
background-color: rgba(0, 0, 0, 0.6) !important;
|
||||||
|
backdrop-filter: blur(15px) !important;
|
||||||
|
}
|
||||||
|
.ant-table-cell:hover{
|
||||||
|
background-color: initial !important;
|
||||||
|
}
|
||||||
|
.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected >td,
|
||||||
|
.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected:hover>td {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.ant-form-item .ant-form-item-label >label{
|
||||||
|
color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|
||||||
|
.ant-table-wrapper .ant-table-thead>tr>th {
|
||||||
|
background-color: var(--table-background);
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover {
|
||||||
display: grid;
|
background-color: var(--table-background);
|
||||||
grid-template-columns: 1fr 1fr;
|
}
|
||||||
padding: 0 2rem;
|
|
||||||
|
.ant-table-content {
|
||||||
|
background-color: var(--secondary-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-cell-row-hover,
|
||||||
|
.ant-table-wrapper .ant-table-tbody>tr.ant-table-row:hover>td {
|
||||||
|
background-color: var(--primary-background) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-table-column-title,
|
||||||
|
.ant-table-column-sorter,
|
||||||
|
.ant-table-column-sort,
|
||||||
|
.ant-table-cell,
|
||||||
|
a {
|
||||||
|
color: var(--primary-color) !important;
|
||||||
|
}
|
||||||
|
.ant-table-cell>button>.anticon {
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
.ant-notification-close-x{
|
||||||
|
color: var(--secondary-background);
|
||||||
|
}
|
||||||
|
.ant-empty-description{
|
||||||
|
color: var(--primary-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
43
cista-front/src/components/AppNavigation.vue
Normal file
43
cista-front/src/components/AppNavigation.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { HomeOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
|
||||||
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
path: Array<string>
|
||||||
|
}>(),
|
||||||
|
{},
|
||||||
|
)
|
||||||
|
|
||||||
|
function generateUrl(pathIndex: number) {
|
||||||
|
return "/" + props.path.slice(0, pathIndex + 1).join('/')
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav>
|
||||||
|
<a-breadcrumb>
|
||||||
|
<a-breadcrumb-item>
|
||||||
|
<RouterLink to="/">
|
||||||
|
<home-outlined />
|
||||||
|
</RouterLink>
|
||||||
|
</a-breadcrumb-item>
|
||||||
|
|
||||||
|
<a-breadcrumb-item v-for="(location, index) in path" :key="index">
|
||||||
|
<RouterLink :to ="generateUrl(index)">
|
||||||
|
<span :class="(index === path.length - 1) && 'last' ">{{ decodeURIComponent(location) }}</span>
|
||||||
|
</RouterLink>
|
||||||
|
</a-breadcrumb-item>
|
||||||
|
</a-breadcrumb>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
nav, span{
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
span:hover, .last{
|
||||||
|
color: var(--blue-color)
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
136
cista-front/src/components/FileCarousel.vue
Normal file
136
cista-front/src/components/FileCarousel.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
<template>
|
||||||
|
<div class="carousel" ref="fileCarousel">
|
||||||
|
<a-page-header :style="{ visibility: idle ? 'hidden' : 'visible' }">
|
||||||
|
<template #extra>
|
||||||
|
<a-button type="text" class="action-button" :onclick="toggle" :icon="h(isFullscreen? FullscreenExitOutlined: FullscreenOutlined)" />
|
||||||
|
<a-button type="text" class="action-button" :onclick="redirectBack" :icon="h(CloseOutlined)" />
|
||||||
|
</template>
|
||||||
|
</a-page-header>
|
||||||
|
<a-row class="slider">
|
||||||
|
<a-col :span="2" class="centered-vertically">
|
||||||
|
<div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(-1)" style="left: 10px; z-index: 1">
|
||||||
|
<LeftOutlined v-show="!idle" />
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="20" class="centered">
|
||||||
|
<FileViewer v-if="!documentStore.loading" :visibleImg="visible" @visibleImg="setVisible" :type="fileType"></FileViewer>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="2" class="centered-vertically right">
|
||||||
|
<div class="custom-slick-arrow slick-arrow slick-prev centered" @click="next(1)" style="right: 10px">
|
||||||
|
<RightOutlined v-show="!idle" />
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { h, ref, watchEffect } from 'vue'
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import { useIdle, useFullscreen } from '@vueuse/core'
|
||||||
|
import { LeftOutlined, RightOutlined, FullscreenOutlined, FullscreenExitOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { getFileType } from '@/utils'
|
||||||
|
import Router from '@/router/index';
|
||||||
|
import FileViewer from './FileViewer.vue';
|
||||||
|
|
||||||
|
const fileCarousel = ref<HTMLElement | null>(null)
|
||||||
|
const { isFullscreen, toggle } = useFullscreen(fileCarousel)
|
||||||
|
const visible = ref<boolean>(false);
|
||||||
|
const documentStore = useDocumentStore()
|
||||||
|
const fileType = ref<string| undefined>(undefined);
|
||||||
|
watchEffect(() => {
|
||||||
|
if(documentStore.mainDocument[0] && documentStore.mainDocument[0].type === 'file'){
|
||||||
|
const fileExt = documentStore.mainDocument[0].ext
|
||||||
|
fileType.value = getFileType(fileExt)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
function setVisible(value: boolean) {
|
||||||
|
visible.value = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { idle } = useIdle(2000)
|
||||||
|
|
||||||
|
function redirectBack() {
|
||||||
|
const currentPath = Router.currentRoute.value.path;
|
||||||
|
const pathParts = currentPath.split('/').filter(part => part); // Remove empty parts
|
||||||
|
// Ensure there's always at least one part in the path
|
||||||
|
if (pathParts.length <= 1) {
|
||||||
|
// If it's empty, set it to the base URL
|
||||||
|
pathParts[0] = '/';
|
||||||
|
} else {
|
||||||
|
pathParts.pop();
|
||||||
|
}
|
||||||
|
const newPath = pathParts.join('/');
|
||||||
|
Router.push(newPath);
|
||||||
|
}
|
||||||
|
function next(direction: number){
|
||||||
|
const path = decodeURIComponent(new String(Router.currentRoute.value.path) as string)
|
||||||
|
const name = documentStore.getNextDocumentInRoute(direction, path)
|
||||||
|
let nextFileLocation : string[] | string = path.split('/')
|
||||||
|
nextFileLocation.pop()
|
||||||
|
nextFileLocation.push(name)
|
||||||
|
nextFileLocation = nextFileLocation.join('/')
|
||||||
|
Router.push(nextFileLocation)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow) {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
font-size: 60px;
|
||||||
|
color: var(--primary-color);
|
||||||
|
transition: ease-in all 0.3s;
|
||||||
|
opacity: 0.3;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow:before) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.slick-arrow.custom-slick-arrow:hover) {
|
||||||
|
color: var(--primary-color);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
height: 80vh;
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.centered-vertically {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.5em;
|
||||||
|
opacity: 0.5;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--blue-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-page-header {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.carousel{
|
||||||
|
margin: 0;
|
||||||
|
height: inherit;
|
||||||
|
background-color: var(--table-background);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
175
cista-front/src/components/FileExplorer.vue
Normal file
175
cista-front/src/components/FileExplorer.vue
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<!-- <h2 v-if="!documentStore.loading && documentStore.error"> {{ documentStore.error }} </h2> -->
|
||||||
|
<div class="carousel-container" v-if="!documentStore.loading && documentStore.document[0] &&documentStore.document[0].type === 'file'">
|
||||||
|
<FileCarousel></FileCarousel>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
v-else-if="!documentStore.loading && documentStore.mainDocument"
|
||||||
|
:pagination=false
|
||||||
|
:row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
|
||||||
|
:columns="columns"
|
||||||
|
:data-source="documentStore.mainDocument"
|
||||||
|
>
|
||||||
|
<template #headerCell="{column}"></template>
|
||||||
|
<template #bodyCell="{ column, record }">
|
||||||
|
<template v-if="column.key === 'name'">
|
||||||
|
<div class="editable-cell">
|
||||||
|
<div v-if="editableData[record.key]" class="editable-cell-input-wrapper">
|
||||||
|
<a-input v-model:value="editableData[record.key].name" @pressEnter="save(record.key)" />
|
||||||
|
<CheckOutlined class="editable-cell-icon-check" @click="save(record.key)" />
|
||||||
|
</div>
|
||||||
|
<div v-else class="editable-cell-text-wrapper">
|
||||||
|
<a :href="`#${linkBasePath}/${record.name}`">{{record.name}}</a>
|
||||||
|
<edit-outlined class="editable-cell-icon" @click="edit(record.key)" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-if="column.key === 'action'">
|
||||||
|
<a-popover trigger="click">
|
||||||
|
<template #content>
|
||||||
|
<div class="more-action">
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(ImportOutlined)"/>Open
|
||||||
|
</div>
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(EditOutlined)"/> Rename
|
||||||
|
</div>
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(LinkOutlined)"/> Share
|
||||||
|
</div>
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(CopyOutlined)"/> Copy
|
||||||
|
</div>
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(ScissorOutlined)"/> Cut
|
||||||
|
</div>
|
||||||
|
<div class="action-container">
|
||||||
|
<a-button type="text" class="action-button" :icon="h(DeleteOutlined)"/> Delete
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<a-button type="text" class="action-button" :icon="h(EllipsisOutlined)" />
|
||||||
|
</a-popover>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, h, computed, reactive } from 'vue'
|
||||||
|
import type { UnwrapRef } from 'vue'
|
||||||
|
import { cloneDeep } from 'lodash';
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import { EditOutlined, ImportOutlined, CheckOutlined,CopyOutlined, ScissorOutlined, LinkOutlined, DownloadOutlined, DeleteOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
|
||||||
|
import type { TableColumnsType } from 'ant-design-vue';
|
||||||
|
import Router from '@/router/index';
|
||||||
|
import type { Document, FolderDocument } from '@/repositories/Document';
|
||||||
|
import FileCarousel from './FileCarousel.vue';
|
||||||
|
|
||||||
|
type Key = string | number;
|
||||||
|
const documentStore = useDocumentStore()
|
||||||
|
const editableData: UnwrapRef<Record<string, Document>> = reactive({});
|
||||||
|
const state = reactive<{
|
||||||
|
selectedRowKeys: Key[];
|
||||||
|
}>({
|
||||||
|
selectedRowKeys: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
const linkBasePath = computed(()=>{
|
||||||
|
if(Router.currentRoute.value.path === '/') return ''
|
||||||
|
return Router.currentRoute.value.path
|
||||||
|
})
|
||||||
|
|
||||||
|
const columns = ref<TableColumnsType>([
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
width: '70%',
|
||||||
|
key: 'name',
|
||||||
|
sortDirections: ['ascend', 'descend'],
|
||||||
|
sorter: (a: Document, b: Document, sortOrder) => {
|
||||||
|
return b.name.localeCompare(a.name)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Modified',
|
||||||
|
dataIndex: 'modified',
|
||||||
|
responsive: ['lg'],
|
||||||
|
sortDirections: ['ascend', 'descend'],
|
||||||
|
defaultSortOrder: 'descend',
|
||||||
|
sorter: (a: FolderDocument, b: FolderDocument) => {
|
||||||
|
const dateA = new Date(a.modified),
|
||||||
|
dateB = new Date(b.modified);
|
||||||
|
if (dateA < dateB) return -1
|
||||||
|
if (dateA > dateB) return 1
|
||||||
|
return 0
|
||||||
|
},
|
||||||
|
key: 'modified',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
// TODO BETTER SORT FOR MULTPLE SIZE OR CUSTOM PIPE TO kB to MB / GB
|
||||||
|
title: 'Size',
|
||||||
|
dataIndex: 'size',
|
||||||
|
responsive: ['lg'],
|
||||||
|
sortDirections: ['ascend', 'descend'],
|
||||||
|
sorter: (a: FolderDocument, b: FolderDocument) => {
|
||||||
|
return a.size - b.size
|
||||||
|
},
|
||||||
|
key: 'size',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
width: '5%',
|
||||||
|
key: 'action',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const onSelectChange = (selectedRowKeys: Key[]) => {
|
||||||
|
const newSelectedRowKeys: Document[] = []
|
||||||
|
selectedRowKeys.forEach( key => {
|
||||||
|
if(documentStore.mainDocument){
|
||||||
|
const found = documentStore.mainDocument.find( e=> e.key === key )
|
||||||
|
if(found) newSelectedRowKeys.push(found)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
documentStore.setSelectedDocuments(newSelectedRowKeys)
|
||||||
|
state.selectedRowKeys = selectedRowKeys;
|
||||||
|
};
|
||||||
|
const edit = (key: number) => {
|
||||||
|
editableData[key] = cloneDeep(documentStore.mainDocument.filter(item => key === item.key)[0]);
|
||||||
|
};
|
||||||
|
const save = (key: number) => {
|
||||||
|
Object.assign(documentStore.mainDocument.filter(item => key === item.key)[0], editableData[key]);
|
||||||
|
delete editableData[key];
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
main {
|
||||||
|
padding: 5px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.more-action{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
.action-container{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.carousel-container{
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
.editable-cell-text-wrapper .editable-cell-icon {
|
||||||
|
visibility: hidden; /* Oculta el ícono de manera predeterminada */
|
||||||
|
}
|
||||||
|
|
||||||
|
.editable-cell-text-wrapper:hover .editable-cell-icon {
|
||||||
|
visibility: visible; /* Muestra el ícono al hacer hover en el contenedor */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
52
cista-front/src/components/FileViewer.vue
Normal file
52
cista-front/src/components/FileViewer.vue
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
<template>
|
||||||
|
<object
|
||||||
|
v-if="props.type === 'pdf'"
|
||||||
|
:data= "dataURL"
|
||||||
|
type="application/pdf" width="100%"
|
||||||
|
height="100%"
|
||||||
|
>
|
||||||
|
</object>
|
||||||
|
<a-image
|
||||||
|
v-else-if="props.type === 'image'"
|
||||||
|
width="50%"
|
||||||
|
:src="dataURL"
|
||||||
|
@click="() => setVisible(true)"
|
||||||
|
:previewMask=false
|
||||||
|
:preview="{
|
||||||
|
visibleImg,
|
||||||
|
onVisibleChange: setVisible,
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- Unknown case -->
|
||||||
|
<h1 v-else>
|
||||||
|
Unsupported file type
|
||||||
|
</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { watchEffect, ref } from 'vue'
|
||||||
|
import Router from '@/router/index';
|
||||||
|
import { url_document_get } from '@/repositories/Document';
|
||||||
|
|
||||||
|
const dataURL = ref('')
|
||||||
|
watchEffect(()=>{
|
||||||
|
dataURL.value = url_document_get + Router.currentRoute.value.path
|
||||||
|
})
|
||||||
|
const emit = defineEmits({
|
||||||
|
visibleImg(value: boolean){
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function setVisible(value: boolean) {
|
||||||
|
emit('visibleImg', value)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const props = defineProps < {
|
||||||
|
type?: string
|
||||||
|
visibleImg: boolean
|
||||||
|
} > ()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
127
cista-front/src/components/HeaderMain.vue
Normal file
127
cista-front/src/components/HeaderMain.vue
Normal file
|
|
@ -0,0 +1,127 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import UploadButton from '@/components/UploadButton.vue'
|
||||||
|
import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
|
||||||
|
import { h } from 'vue';
|
||||||
|
import Keyframe from 'ant-design-vue/es/_util/cssinjs/Keyframes';
|
||||||
|
|
||||||
|
const documentStore = useDocumentStore()
|
||||||
|
|
||||||
|
function createFileHandler() {
|
||||||
|
console.log("Creating file")
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadFolderHandler() {
|
||||||
|
console.log("Uploading Folder")
|
||||||
|
}
|
||||||
|
function createFolderHandler() {
|
||||||
|
console.log("Uploading Folder")
|
||||||
|
}
|
||||||
|
function searchHandler() {
|
||||||
|
console.log("Searching ...")
|
||||||
|
}
|
||||||
|
function newViewHandler() {
|
||||||
|
console.log("Creating new view ...")
|
||||||
|
}
|
||||||
|
function preferencesHandler() {
|
||||||
|
console.log("Preferences ...")
|
||||||
|
}
|
||||||
|
function about() {
|
||||||
|
console.log("About ...")
|
||||||
|
}
|
||||||
|
function deleteHandler(){
|
||||||
|
if(documentStore.selectedDocuments){
|
||||||
|
documentStore.selectedDocuments.forEach(document => {
|
||||||
|
documentStore.deleteDocument(document)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function share(){
|
||||||
|
console.log("Share ...")
|
||||||
|
}
|
||||||
|
function download(){
|
||||||
|
console.log("Download ...")
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="actions-container">
|
||||||
|
<div class="actions-list">
|
||||||
|
<UploadButton />
|
||||||
|
|
||||||
|
<a-tooltip title="Upload folder from disk">
|
||||||
|
<a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
|
||||||
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-tooltip title="Create file">
|
||||||
|
<a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
|
||||||
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-tooltip title="Create folder">
|
||||||
|
<a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
|
||||||
|
</a-tooltip>
|
||||||
|
<!-- TODO ADD CONDITIONAL RENDER -->
|
||||||
|
<template v-if="documentStore.selectedDocuments && documentStore.selectedDocuments.length > 0">
|
||||||
|
<a-tooltip title="Share">
|
||||||
|
<a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip title="Download Zip">
|
||||||
|
<a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
<a-tooltip title="Delete">
|
||||||
|
<a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-list">
|
||||||
|
<a-tooltip title="Search">
|
||||||
|
<a-button @click="searchHandler" type="text" class="action-button" :icon="h(SearchOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-tooltip title="Create new view">
|
||||||
|
<a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-tooltip title="Preferences">
|
||||||
|
<a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
|
||||||
|
<a-tooltip title="About">
|
||||||
|
<a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.actions-container,
|
||||||
|
.actions-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-container {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-button {
|
||||||
|
padding: 0;
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: var(--secondary-color);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--blue-color) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
|
||||||
|
.actions-container,
|
||||||
|
.actions-list {
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
defineProps<{
|
|
||||||
msg: string
|
|
||||||
}>()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="greetings">
|
|
||||||
<h1 class="green">{{ msg }}</h1>
|
|
||||||
<h3>
|
|
||||||
You’ve successfully created a project with
|
|
||||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h1 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.6rem;
|
|
||||||
position: relative;
|
|
||||||
top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
28
cista-front/src/components/NotificationLoading.vue
Normal file
28
cista-front/src/components/NotificationLoading.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
<template>
|
||||||
|
<template v-for="upload in documentStore.uploadingDocuments" :key="upload.key">
|
||||||
|
<span>{{ upload.name }}</span>
|
||||||
|
<div class="progress-container">
|
||||||
|
<a-progress :percent="upload.progress" />
|
||||||
|
<CloseCircleOutlined class="close-button" @click="dismissUpload(upload.key)" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { CloseCircleOutlined } from '@ant-design/icons-vue';
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
const documentStore = useDocumentStore();
|
||||||
|
|
||||||
|
function dismissUpload(key: number){
|
||||||
|
documentStore.deleteUploadingDocument(key)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.progress-container{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.close-button:hover{
|
||||||
|
color: #b81414;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,88 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import WelcomeItem from './WelcomeItem.vue'
|
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
|
||||||
import ToolingIcon from './icons/IconTooling.vue'
|
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'
|
|
||||||
import SupportIcon from './icons/IconSupport.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<DocumentationIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Documentation</template>
|
|
||||||
|
|
||||||
Vue’s
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
|
||||||
provides you with all information you need to get started.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<ToolingIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Tooling</template>
|
|
||||||
|
|
||||||
This project is served and bundled with
|
|
||||||
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
|
||||||
recommended IDE setup is
|
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
|
||||||
you need to test your components and web pages, check out
|
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
|
||||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
|
||||||
>Cypress Component Testing</a
|
|
||||||
>.
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<EcosystemIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Ecosystem</template>
|
|
||||||
|
|
||||||
Get official tools and libraries for your project:
|
|
||||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
|
||||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
|
||||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
|
||||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
|
||||||
you need more resources, we suggest paying
|
|
||||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
|
||||||
a visit.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<CommunityIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Community</template>
|
|
||||||
|
|
||||||
Got stuck? Ask your question on
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
|
||||||
Discord server, or
|
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
|
||||||
>StackOverflow</a
|
|
||||||
>. You should also subscribe to
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
|
||||||
the official
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
|
||||||
twitter account for latest news in the Vue world.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<SupportIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Support Vue</template>
|
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
|
||||||
us by
|
|
||||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
|
||||||
</WelcomeItem>
|
|
||||||
</template>
|
|
||||||
89
cista-front/src/components/UploadButton.vue
Normal file
89
cista-front/src/components/UploadButton.vue
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import NotificationLoading from '@/components/NotificationLoading.vue'
|
||||||
|
import { FileAddFilled } from '@ant-design/icons-vue'
|
||||||
|
import { notification } from 'ant-design-vue';
|
||||||
|
import type { NotificationPlacement } from 'ant-design-vue';
|
||||||
|
import { h, ref } from 'vue';
|
||||||
|
|
||||||
|
const [api, contextHolder] = notification.useNotification();
|
||||||
|
|
||||||
|
const fileUploadButton = ref()
|
||||||
|
const documentStore = useDocumentStore();
|
||||||
|
const open = (placement: NotificationPlacement) => openNotification(placement);
|
||||||
|
|
||||||
|
const isNotificationOpen = ref(false);
|
||||||
|
const openNotification = (placement: NotificationPlacement) => {
|
||||||
|
if(!isNotificationOpen.value){
|
||||||
|
api.open({
|
||||||
|
message: `Uploading documents`,
|
||||||
|
description: h(NotificationLoading),
|
||||||
|
placement,
|
||||||
|
duration: 0,
|
||||||
|
onClose: () => { isNotificationOpen.value = false }
|
||||||
|
});
|
||||||
|
isNotificationOpen.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
function uploadFileHandler() {
|
||||||
|
fileUploadButton.value.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
async function load(file: File, start: number, end: number): Promise<ArrayBuffer> {
|
||||||
|
const reader = new FileReader();
|
||||||
|
const load = new Promise<Event>((resolve) => (reader.onload = resolve));
|
||||||
|
reader.readAsArrayBuffer(file.slice(start, end));
|
||||||
|
const event = await load;
|
||||||
|
if (event.target && event.target instanceof FileReader) {
|
||||||
|
return event.target.result as ArrayBuffer;
|
||||||
|
} else {
|
||||||
|
throw new Error('Error loading file' );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function sendChunk(file :File, start: number, end: number) {
|
||||||
|
const ws = documentStore.wsUpload;
|
||||||
|
if(ws){
|
||||||
|
const chunk = await load(file, start, end)
|
||||||
|
|
||||||
|
ws.send(JSON.stringify({
|
||||||
|
name: file.name,
|
||||||
|
size: file.size,
|
||||||
|
start: start,
|
||||||
|
end: end
|
||||||
|
}))
|
||||||
|
ws.send(chunk)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uploadFileChangeHandler(event: Event) {
|
||||||
|
const target = event.target as HTMLInputElement;
|
||||||
|
const chunkSize = 1 << 20
|
||||||
|
if (target && target.files && target.files.length > 0) {
|
||||||
|
const file = target.files[0];
|
||||||
|
const numChunks = Math.ceil(file.size / chunkSize)
|
||||||
|
const document = documentStore.pushUploadingDocuments(file.name)
|
||||||
|
open('bottomRight')
|
||||||
|
for (let i = 0; i < numChunks; i++) {
|
||||||
|
const start = i * chunkSize
|
||||||
|
const end = Math.min(file.size, start + chunkSize)
|
||||||
|
// const res = await sendChunk(file, start, end)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<a-tooltip title="Upload files from disk">
|
||||||
|
<a-button @click="uploadFileHandler" type="text" class="action-button" :icon="h(FileAddFilled)" />
|
||||||
|
<input ref="fileUploadButton" @change="uploadFileChangeHandler" class="upload-input" type="file" onclick="this.value=null;" />
|
||||||
|
</a-tooltip>
|
||||||
|
<contextHolder />
|
||||||
|
</template>
|
||||||
|
<style scoped>
|
||||||
|
/* Extends styles from HeaderMain.vue too */
|
||||||
|
.upload-input{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,87 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="item">
|
|
||||||
<i>
|
|
||||||
<slot name="icon"></slot>
|
|
||||||
</i>
|
|
||||||
<div class="details">
|
|
||||||
<h3>
|
|
||||||
<slot name="heading"></slot>
|
|
||||||
</h3>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: var(--color-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
top: calc(50% - 25px);
|
|
||||||
left: -26px;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
background: var(--color-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:before {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:first-of-type:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-of-type:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
|
||||||
<template>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
class="iconify iconify--mdi"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
|
||||||
fill="currentColor"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,14 +1,21 @@
|
||||||
|
import 'ant-design-vue/dist/reset.css';
|
||||||
import './assets/main.css'
|
import './assets/main.css'
|
||||||
|
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
|
import Antd from 'ant-design-vue';
|
||||||
|
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
app.config.errorHandler = (err) => {
|
||||||
|
/* handle error */
|
||||||
|
console.log(err)
|
||||||
|
}
|
||||||
app.use(createPinia())
|
app.use(createPinia())
|
||||||
|
|
||||||
|
app.use(Antd);
|
||||||
app.use(router)
|
app.use(router)
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
41
cista-front/src/repositories/Client.ts
Normal file
41
cista-front/src/repositories/Client.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
/* Base domain for all request */
|
||||||
|
export const baseURL = import.meta.env.VITE_URL_DOCUMENT_GET
|
||||||
|
|
||||||
|
/* Config Client*/
|
||||||
|
const Client = axios.create({
|
||||||
|
baseURL: baseURL,
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
Client.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
// Any status code that lie within the range of 2xx cause this function to trigger
|
||||||
|
// Do something with response data
|
||||||
|
return response
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
const msg = error.response?.data.message ?? 'Unexpected error'
|
||||||
|
const code = error.code ? Number(error.code) : 500
|
||||||
|
const standardizedError = new SimpleError(code, msg)
|
||||||
|
|
||||||
|
return Promise.reject(standardizedError)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ISimpleError extends Error {
|
||||||
|
code : number
|
||||||
|
}
|
||||||
|
|
||||||
|
class SimpleError extends Error implements ISimpleError {
|
||||||
|
code : number
|
||||||
|
constructor(code: number, message:string) {
|
||||||
|
super(message)
|
||||||
|
this.code = code
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Client
|
||||||
87
cista-front/src/repositories/Document.ts
Normal file
87
cista-front/src/repositories/Document.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
import type { FileStructure, DocumentStore } from '@/stores/documents'
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import { getFileExtension } from '@/utils'
|
||||||
|
import Client from '@/repositories/Client'
|
||||||
|
|
||||||
|
|
||||||
|
type BaseDocument = {
|
||||||
|
name: string;
|
||||||
|
key?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FolderDocument = BaseDocument & {
|
||||||
|
size: number;
|
||||||
|
modified: string;
|
||||||
|
type: 'folder';
|
||||||
|
};
|
||||||
|
|
||||||
|
export type FileDocument = BaseDocument & {
|
||||||
|
type: 'file';
|
||||||
|
ext: string;
|
||||||
|
data: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Document = FolderDocument | FileDocument;
|
||||||
|
|
||||||
|
|
||||||
|
export const url_document_watch_ws = import.meta.env.VITE_URL_DOCUMENT_WATCH_WS
|
||||||
|
export const url_document_upload_ws = import.meta.env.VITE_URL_DOCUMENT_UPLOAD_WS
|
||||||
|
export const url_document_get = import.meta.env.VITE_URL_DOCUMENT_GET
|
||||||
|
|
||||||
|
export class DocumentHandler {
|
||||||
|
constructor( private store: DocumentStore = useDocumentStore() ) {
|
||||||
|
this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleWebSocketMessage(event: MessageEvent) {
|
||||||
|
const msg = JSON.parse(event.data);
|
||||||
|
switch (true) {
|
||||||
|
case !!msg.root:
|
||||||
|
this.handleRootMessage(msg);
|
||||||
|
break;
|
||||||
|
case !!msg.update:
|
||||||
|
this.handleUpdateMessage(msg);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleRootMessage({ root }: { root: FileStructure }) {
|
||||||
|
if (this.store && this.store.root) this.store.root = root;
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleUpdateMessage(updateData: { update: FileStructure[] }) {
|
||||||
|
const root = updateData.update[0]
|
||||||
|
if(root) this.store.root = root
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export class DocumentUploadHandler {
|
||||||
|
constructor( private store: DocumentStore = useDocumentStore() ) {
|
||||||
|
this.handleWebSocketMessage = this.handleWebSocketMessage.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
handleWebSocketMessage(event: MessageEvent) {
|
||||||
|
const msg = JSON.parse(event.data);
|
||||||
|
switch (true) {
|
||||||
|
case !!msg.written:
|
||||||
|
this.handleWrittenMessage(msg);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private handleWrittenMessage(msg : { written : number}) {
|
||||||
|
// if (this.store && this.store.root) this.store.root = root;
|
||||||
|
console.log('Written message', msg.written)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export async function fetchFile(path: string): Promise<FileDocument>{
|
||||||
|
const file = await Client.get(path)
|
||||||
|
const name = path.substring(1 , path.length)
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
data: file.data,
|
||||||
|
type: 'file',
|
||||||
|
ext: getFileExtension(name)
|
||||||
|
}
|
||||||
|
}
|
||||||
8
cista-front/src/repositories/WS.ts
Normal file
8
cista-front/src/repositories/WS.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
function createWebSocket(url: string, eventHandler: (event: MessageEvent) => void) {
|
||||||
|
const urlObject = new URL(url);
|
||||||
|
const webSocket = new WebSocket(urlObject);
|
||||||
|
webSocket.onmessage = eventHandler;
|
||||||
|
return webSocket;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default createWebSocket
|
||||||
|
|
@ -1,22 +1,20 @@
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
|
||||||
import HomeView from '../views/HomeView.vue'
|
import ExplorerView from '../views/ExplorerView.vue'
|
||||||
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(import.meta.env.BASE_URL),
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/#/:location',
|
||||||
name: 'home',
|
name: 'explorer',
|
||||||
component: HomeView
|
component: ExplorerView,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/login',
|
||||||
name: 'about',
|
name: 'login',
|
||||||
// route level code-splitting
|
component: LoginView,
|
||||||
// this generates a separate chunk (About.[hash].js) for this route
|
},
|
||||||
// which is lazy-loaded when the route is visited.
|
|
||||||
component: () => import('../views/AboutView.vue')
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { ref, computed } from 'vue'
|
|
||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
export const useCounterStore = defineStore('counter', () => {
|
|
||||||
const count = ref(0)
|
|
||||||
const doubleCount = computed(() => count.value * 2)
|
|
||||||
function increment() {
|
|
||||||
count.value++
|
|
||||||
}
|
|
||||||
|
|
||||||
return { count, doubleCount, increment }
|
|
||||||
})
|
|
||||||
144
cista-front/src/stores/documents.ts
Normal file
144
cista-front/src/stores/documents.ts
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
import type { Document } from '@/repositories/Document';
|
||||||
|
import type { ISimpleError } from '@/repositories/Client';
|
||||||
|
import { fetchFile } from '@/repositories/Document'
|
||||||
|
import { formatUnixDate } from '@/utils';
|
||||||
|
import { defineStore } from 'pinia';
|
||||||
|
|
||||||
|
|
||||||
|
type FileData = { mtime: number, size: number, dir: DirectoryData};
|
||||||
|
type DirectoryData = {
|
||||||
|
[filename: string]: FileData;
|
||||||
|
};
|
||||||
|
export type FileStructure = {mtime: number, size: number, dir: DirectoryData};
|
||||||
|
|
||||||
|
export type DocumentStore = {
|
||||||
|
root: FileStructure,
|
||||||
|
document: Document[],
|
||||||
|
loading: boolean,
|
||||||
|
uploadingDocuments: Array<{key: number, name: string, progress: number}>,
|
||||||
|
uploadCount: number,
|
||||||
|
wsWatch: WebSocket | undefined,
|
||||||
|
wsUpload: WebSocket | undefined,
|
||||||
|
selectedDocuments: Document[],
|
||||||
|
error: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useDocumentStore = defineStore({
|
||||||
|
id: 'documents',
|
||||||
|
state: (): DocumentStore => ({
|
||||||
|
root: {} as FileStructure,
|
||||||
|
document: [] as Document[],
|
||||||
|
loading: true as boolean,
|
||||||
|
uploadingDocuments: [],
|
||||||
|
uploadCount: 0 as number,
|
||||||
|
wsWatch: undefined,
|
||||||
|
wsUpload: undefined,
|
||||||
|
selectedDocuments: [] as Document[],
|
||||||
|
error: '' as string,
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
setActualDocument(location: string){
|
||||||
|
this.loading = true;
|
||||||
|
let data = this.root
|
||||||
|
const dataMapped = [];
|
||||||
|
const locations = location.split('/').slice(1)
|
||||||
|
// Get data target location
|
||||||
|
locations.forEach(location => {
|
||||||
|
location = decodeURIComponent(location)
|
||||||
|
if(data && data.dir){
|
||||||
|
for (const key in data.dir) {
|
||||||
|
if(key === location) data = data.dir[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Transform data
|
||||||
|
let count = 0
|
||||||
|
for (const key in data.dir) {
|
||||||
|
const element: Document = {
|
||||||
|
name: key,
|
||||||
|
key: count,
|
||||||
|
size: data.dir[key].size,
|
||||||
|
modified: formatUnixDate(data.dir[key].mtime),
|
||||||
|
type: 'folder',
|
||||||
|
}
|
||||||
|
count++
|
||||||
|
dataMapped.push(element)
|
||||||
|
}
|
||||||
|
this.document = dataMapped
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
async setActualDocumentFile(path: string){
|
||||||
|
this.loading = true;
|
||||||
|
const file = await fetchFile(path)
|
||||||
|
this.document = [file];
|
||||||
|
this.loading = false;
|
||||||
|
},
|
||||||
|
setSelectedDocuments(document: Document[]){
|
||||||
|
this.selectedDocuments = document
|
||||||
|
},
|
||||||
|
deleteDocument(document: Document){
|
||||||
|
this.document = this.document.filter(e => document.key !== e.key)
|
||||||
|
this.selectedDocuments = this.selectedDocuments.filter(e => document.key !== e.key)
|
||||||
|
},
|
||||||
|
pushUploadingDocuments(name: string){
|
||||||
|
this.uploadCount++;
|
||||||
|
const document = {
|
||||||
|
key: this.uploadCount,
|
||||||
|
name: name,
|
||||||
|
progress: 0
|
||||||
|
}
|
||||||
|
this.uploadingDocuments.push(document)
|
||||||
|
return document
|
||||||
|
},
|
||||||
|
deleteUploadingDocument(key: number){
|
||||||
|
this.uploadingDocuments = this.uploadingDocuments.filter((e)=> e.key !== key)
|
||||||
|
},
|
||||||
|
getNextDocumentInRoute(direction: number, path: string){
|
||||||
|
const locations = path.split('/').slice(1)
|
||||||
|
locations.pop()
|
||||||
|
let data = this.root
|
||||||
|
const actualDirArr = []
|
||||||
|
// Get data target location
|
||||||
|
locations.forEach(location => {
|
||||||
|
// location = decodeURIComponent(location)
|
||||||
|
if(data && data.dir){
|
||||||
|
for (const key in data.dir) {
|
||||||
|
if(key === location) data = data.dir[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//Store in a temporary array
|
||||||
|
for (const key in data.dir) {
|
||||||
|
actualDirArr.push({
|
||||||
|
name: key,
|
||||||
|
content: data.dir[key]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const actualFileName = decodeURIComponent(this.mainDocument[0].name).split('/').pop()
|
||||||
|
let index = actualDirArr.findIndex(e => e.name === actualFileName)
|
||||||
|
|
||||||
|
if(index < 1 && direction === -1 ){
|
||||||
|
index = actualDirArr.length -1
|
||||||
|
}else if(index >= actualDirArr.length - 1 && direction === 1){
|
||||||
|
index = 0
|
||||||
|
}else {
|
||||||
|
index = index + direction
|
||||||
|
}
|
||||||
|
return actualDirArr[index].name
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getters: {
|
||||||
|
mainDocument(): Document[] {
|
||||||
|
return this.document;
|
||||||
|
},
|
||||||
|
rootSize(): number | undefined {
|
||||||
|
if(this.root) return this.root.size
|
||||||
|
},
|
||||||
|
rootMain(): DirectoryData | undefined {
|
||||||
|
if(this.root) return this.root.dir
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
57
cista-front/src/utils/index.ts
Normal file
57
cista-front/src/utils/index.ts
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
export function determineFileType(inputString: string): "file" | "folder" {
|
||||||
|
if (inputString.includes('.') && !inputString.endsWith('.')) {
|
||||||
|
return 'file';
|
||||||
|
} else {
|
||||||
|
return 'folder';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatUnixDate(t: number) {
|
||||||
|
const date = new Date(t * 1000)
|
||||||
|
const now = new Date()
|
||||||
|
const diff = date.getTime() - now.getTime()
|
||||||
|
const formatter = new Intl.RelativeTimeFormat('en', { numeric:
|
||||||
|
'auto' })
|
||||||
|
|
||||||
|
if (Math.abs(diff) <= 60000) {
|
||||||
|
return formatter.format(Math.round(diff / 1000), 'second')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(diff) <= 3600000) {
|
||||||
|
return formatter.format(Math.round(diff / 60000), 'minute')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(diff) <= 86400000) {
|
||||||
|
return formatter.format(Math.round(diff / 3600000), 'hour')
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Math.abs(diff) <= 604800000) {
|
||||||
|
return formatter.format(Math.round(diff / 86400000), 'day')
|
||||||
|
}
|
||||||
|
|
||||||
|
return date.toLocaleDateString()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getFileExtension(filename: string) {
|
||||||
|
const parts = filename.split(".");
|
||||||
|
if (parts.length > 1) {
|
||||||
|
return parts[parts.length - 1];
|
||||||
|
} else {
|
||||||
|
return ""; // No hay extensión
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export function getFileType(extension: string): string {
|
||||||
|
const videoExtensions = ["mp4", "avi", "mkv", "mov"];
|
||||||
|
const imageExtensions = ["jpg", "jpeg", "png", "gif"];
|
||||||
|
const pdfExtensions = ["pdf"];
|
||||||
|
|
||||||
|
if (videoExtensions.includes(extension)) {
|
||||||
|
return "video";
|
||||||
|
} else if (imageExtensions.includes(extension)) {
|
||||||
|
return "image";
|
||||||
|
} else if (pdfExtensions.includes(extension)) {
|
||||||
|
return "pdf";
|
||||||
|
} else {
|
||||||
|
return "unknown";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.about {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
36
cista-front/src/views/ExplorerView.vue
Normal file
36
cista-front/src/views/ExplorerView.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<template>
|
||||||
|
<FileExplorer></FileExplorer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { watchEffect } from 'vue'
|
||||||
|
import { useDocumentStore } from '@/stores/documents'
|
||||||
|
import Router from '@/router/index';
|
||||||
|
import FileExplorer from '@/components/FileExplorer.vue';
|
||||||
|
|
||||||
|
const documentStore = useDocumentStore()
|
||||||
|
|
||||||
|
function isFile(path: string) {
|
||||||
|
if (path.includes('.') && !path.endsWith('.')) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watchEffect(async () => {
|
||||||
|
const path = new String(Router.currentRoute.value.path) as string
|
||||||
|
const file = isFile(path)
|
||||||
|
if(!file){
|
||||||
|
documentStore.setActualDocument(path.toString())
|
||||||
|
}else {
|
||||||
|
documentStore.setActualDocumentFile(path)
|
||||||
|
}
|
||||||
|
setTimeout( () => {
|
||||||
|
documentStore.loading = false
|
||||||
|
}, 2000)
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<main>
|
|
||||||
<TheWelcome />
|
|
||||||
</main>
|
|
||||||
</template>
|
|
||||||
46
cista-front/src/views/LoginView.vue
Normal file
46
cista-front/src/views/LoginView.vue
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
<template>
|
||||||
|
<div class="login-container">
|
||||||
|
<a-form :model="loginForm">
|
||||||
|
<a-form-item label="Username" prop="username" :rules="[{ required: true, message: 'Please input your username!' }]">
|
||||||
|
<a-input v-model:value="loginForm.username" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="Password" prop="password" :rules="[{ required: true, message: 'Please input your password!' }]">
|
||||||
|
<a-input type="password" v-model:value="loginForm.password" />
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item>
|
||||||
|
<a-button type="primary" @click="login" class="button-login">Login</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
const loginForm = ref({
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const login = () => {
|
||||||
|
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.login-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.button-login {
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
color: var(--secondary-background);
|
||||||
|
}
|
||||||
|
.ant-btn-primary:not(:disabled):hover{
|
||||||
|
background-color: var(--blue-color);
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
@ -6,6 +6,9 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "./tsconfig.app.json"
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.vitest.json"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
9
cista-front/tsconfig.vitest.json
Normal file
9
cista-front/tsconfig.vitest.json
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.app.json",
|
||||||
|
"exclude": [],
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"lib": [],
|
||||||
|
"types": ["node", "jsdom"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -3,11 +3,32 @@ import { fileURLToPath, URL } from 'node:url'
|
||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
import Components from "unplugin-vue-components/vite";
|
||||||
|
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
|
||||||
|
|
||||||
|
// @ts-ignore
|
||||||
|
import pluginRewriteAll from 'vite-plugin-rewrite-all';
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
vue(),
|
vue(),
|
||||||
|
pluginRewriteAll(),
|
||||||
|
// Ant Design configuration
|
||||||
|
Components({
|
||||||
|
resolvers: [
|
||||||
|
AntDesignVueResolver({ importStyle:"less" })
|
||||||
],
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
css: {
|
||||||
|
preprocessorOptions: {
|
||||||
|
less: {
|
||||||
|
modifyVars: {},
|
||||||
|
javascriptEnabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user