Initialize VUE project with WS connection, main pages, and various small features

This commit is contained in:
Andy-Ruda 2023-10-25 18:43:44 -05:00
parent 444f0226e6
commit 9cd6f83bec
38 changed files with 5624 additions and 1224 deletions

34
cista-front/components.d.ts vendored Normal file
View 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']
}
}

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<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>
</head>
<body>

File diff suppressed because it is too large Load Diff

View File

@ -1,27 +1,49 @@
{
"name": "cista-front",
"name": "front",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"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": {
"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-router": "^4.2.5"
"vue-router": "^4.2.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@vitejs/plugin-vue": "^4.4.0",
"@types/jsdom": "^21.1.3",
"@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",
"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",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
"vite": "^4.4.9",
"vitest": "^0.34.4",
"vue-tsc": "^1.8.11"
}
}

View File

@ -1,85 +1,65 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { RouterView } from 'vue-router'
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>
<template>
<header>
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
<header class="wrapper">
<HeaderMain WS="WS"></HeaderMain>
<AppNavigation :path="path.pathList"></AppNavigation>
</header>
<RouterView />
<RouterView class="page-container" />
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.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 {
.wrapper{
background-color: var(--primary-background);
padding: 0.2em 0.5em;
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
flex-direction: column;
gap: 10px;
}
.logo {
margin: 0 2rem 0 0;
.page-container{
flex-grow: 2;
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>

View File

@ -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;
}

View File

@ -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

View File

@ -1,35 +1,86 @@
@import './base.css';
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
font-weight: normal;
:root {
--primary-background: #181818;
--secondary-background: #ffffff;
--font-color: #333333;
--table-background: #535353;
--primary-color: #ffffff;
--secondary-color: #ccc;
--blue-color: #66ffeb
}
a,
.green {
text-decoration: none;
color: hsla(160, 100%, 37%, 1);
transition: 0.4s;
@media (prefers-color-scheme: dark) {
:root {
--primary-background: #181818;
--secondary-background: #333333;
--font-color: #ffffff;
--table-background: #535353;
--primary-color: #ffffff;
--secondary-color: #ccc;
--blue-color: #66ffeb
}
}
@media (hover: hover) {
a:hover {
background-color: hsla(160, 100%, 37%, 0.2);
}
body {
background-color: var(--table-background);
}
@media (min-width: 1024px) {
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;
place-items: center;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
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);
}
.ant-table-wrapper .ant-table-thead th.ant-table-column-has-sorters:hover {
background-color: var(--table-background);
}
.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);
}
}

View 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>

View 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>

View 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>

View 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>

View 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>

View File

@ -1,41 +0,0 @@
<script setup lang="ts">
defineProps<{
msg: string
}>()
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
Youve 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>

View 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>

View File

@ -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>
Vues
<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>

View 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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -1,14 +1,21 @@
import 'ant-design-vue/dist/reset.css';
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue';
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.config.errorHandler = (err) => {
/* handle error */
console.log(err)
}
app.use(createPinia())
app.use(Antd);
app.use(router)
app.mount('#app')
app.mount('#app')

View 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

View 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)
}
}

View 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

View File

@ -1,22 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import ExplorerView from '../views/ExplorerView.vue'
import LoginView from '../views/LoginView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
path: '/#/:location',
name: 'explorer',
component: ExplorerView,
},
{
path: '/about',
name: 'about',
// route level code-splitting
// 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')
}
path: '/login',
name: 'login',
component: LoginView,
},
]
})

View File

@ -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 }
})

View 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
}
},
});

View 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";
}
}

View File

@ -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>

View 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>

View File

@ -1,9 +0,0 @@
<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>

View 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>

View File

@ -6,6 +6,9 @@
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}

View File

@ -0,0 +1,9 @@
{
"extends": "./tsconfig.app.json",
"exclude": [],
"compilerOptions": {
"composite": true,
"lib": [],
"types": ["node", "jsdom"]
}
}

View File

@ -3,11 +3,32 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
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/
export default defineConfig({
plugins: [
vue(),
pluginRewriteAll(),
// Ant Design configuration
Components({
resolvers: [
AntDesignVueResolver({ importStyle:"less" })
],
}),
],
css: {
preprocessorOptions: {
less: {
modifyVars: {},
javascriptEnabled: true,
},
},
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))