Skip to content
Commits on Source (3)
Expand all Hide whitespace changes
Inline Side-by-side
.eslintrc.js 0 → 100644
View file @ fa31eb0a
module.exports = {
root: true,
env: {
node: true,
},
extends: [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint",
],
parserOptions: {
ecmaVersion: 2020,
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"@typescript-eslint/no-this-alias": [
"error",
{
allowDestructuring: false,
allowedNames: ["app", "me"],
},
],
},
};
package.json
View file @ fa31eb0a
{
"name": "@coscine/resourcecontentview",
"version": "1.10.2",
"version": "1.11.0",
"private": true,
"directories": {
"doc": "docs"
......@@ -11,9 +11,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@coscine/api-connection": "^1.30.0",
"@coscine/api-connection": "^1.31.0",
"@coscine/app-util": "^1.9.0",
"@coscine/component-library": "^1.8.1",
"@coscine/component-library": "^1.9.0",
"@coscine/form-generator": "^1.14.0",
"@coscine/vuex-store": "^1.2.0",
"@types/jquery": "^3.5.2",
......@@ -35,18 +35,34 @@
"@semantic-release/npm": "^7.0.6",
"@semantic-release/release-notes-generator": "^9.0.1",
"@types/node": "^14.14.20",
"@typescript-eslint/eslint-plugin": "^4.12.0",
"@typescript-eslint/parser": "^4.12.0",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "^4.5.12",
"@vue/cli-service": "^4.5.7",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"conventional-changelog-eslint": "3.0.9",
"core-js": "^3.8.2",
"eslint": "^7.17.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"semantic-release": "^17.3.1",
"tslib": "^2.3.0",
"typescript": "~4.3.3",
"vue-template-compiler": "^2.6.12"
},
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
]
},
"repository": {
"type": "git",
"url": "https://git.rwth-aachen.de/coscine/frontend/apps/resourcecontentview.git"
......
src/ResourceContentView.vue
View file @ fa31eb0a
......@@ -7,11 +7,24 @@
@dragover.prevent=""
@drop.prevent="uploadDrop"
>
<div class="droppable" v-if="showDroppable && !resourceContentSettings.readOnly && !resourceContentSettings.metadataView.editableDataUrl">
<p class="droppableText">{{ $t('canDropFile') }}</p>
<div
class="droppable"
v-if="
showDroppable &&
!resourceContentSettings.readOnly &&
!resourceContentSettings.metadataView.editableDataUrl
"
>
<p class="droppableText">{{ $t("canDropFile") }}</p>
</div>
<coscine-headline v-show="!isFullscreen" :headline="$t('resources')"/>
<b-form-file ref="fileTrigger" multiple v-model="fileListUploadSelect" class="mt-3" plain></b-form-file>
<coscine-headline v-show="!isFullscreen" :headline="$t('resources')" />
<b-form-file
ref="fileTrigger"
multiple
v-model="fileListUploadSelect"
class="mt-3"
plain
></b-form-file>
<span id="filesViewSpan">
<div id="filesViewCard" :class="isFullscreen == false ? 'card' : ''">
<div :class="isFullscreen == false ? 'card-body' : ''">
......@@ -41,14 +54,22 @@
</div>
</div>
</span>
<div id="metadataManagerDiv" :class="isMetadataManagerHidden == true ? 'hiddenMetadataManager' : ''">
<b-button v-show="isFullscreen" squared id="metadataManagerToggleFullscreen" @click="toggleMenu()"
><span>{{ $t('metadataManager') }}</span></b-button
<div
id="metadataManagerDiv"
:class="isMetadataManagerHidden == true ? 'hiddenMetadataManager' : ''"
>
<b-button
v-show="isFullscreen"
squared
id="metadataManagerToggleFullscreen"
@click="toggleMenu()"
><span>{{ $t("metadataManager") }}</span></b-button
>
<div class="card">
<div class="card-body">
<MetadataManager
:resourceId="resourceId"
:resource="resource"
:projectId="projectId"
:fileInfo="fileInfo"
:showDetail="showDetail"
......@@ -67,7 +88,12 @@
@fileListEdit="setFileListEdit"
@clickFileSelect="clickFileSelect"
/>
<div id="toggleFullscreenButton" :class="isMetadataManagerHidden == true ? '' : 'hiddenMetadataManager'">
<div
id="toggleFullscreenButton"
:class="
isMetadataManagerHidden == true ? '' : 'hiddenMetadataManager'
"
>
<button
v-if="isFullscreen"
class="material-icons btn btn-secondary"
......@@ -76,75 +102,99 @@
>
fullscreen_exit
</button>
<button v-else type="button" class="material-icons btn btn-secondary" @click="toggleFullscreen">
<button
v-else
type="button"
class="material-icons btn btn-secondary"
@click="toggleFullscreen"
>
fullscreen
</button>
</div>
</div>
</div>
</div>
<coscine-loading-spinner :isWaitingForResponse="isWaitingForResponse"></coscine-loading-spinner>
<coscine-loading-spinner
:isWaitingForResponse="isWaitingForResponse"
></coscine-loading-spinner>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import FilesView from './components/FilesView.vue';
import MetadataManager from './components/MetadataManager.vue';
import URLSearchParams from '@ungap/url-search-params';
import Vue from "vue";
import FilesView from "./components/FilesView.vue";
import MetadataManager from "./components/MetadataManager.vue";
import URLSearchParams from "@ungap/url-search-params";
import MetadataManagerUtil from './utils/MetadataManagerUtil';
import MetadataManagerUtil from "./utils/MetadataManagerUtil";
import { LanguageUtil, GuidUtil, MergeUtil } from '@coscine/app-util';
import { ResourceApi, ResourceTypeApi, BlobApi, ProjectRoleApi, MetadataApi, UserApi } from '@coscine/api-connection';
import { CoscineLoadingSpinner, CoscineHeadline } from '@coscine/component-library';
import '@coscine/component-library/dist/index.css';
import { LanguageUtil, GuidUtil, MergeUtil } from "@coscine/app-util";
import {
ResourceApi,
ResourceTypeApi,
BlobApi,
ProjectRoleApi,
MetadataApi,
UserApi,
} from "@coscine/api-connection";
import {
CoscineLoadingSpinner,
CoscineHeadline,
} from "@coscine/component-library";
import "@coscine/component-library/dist/index.css";
import { DefaultResourceContentSettings } from './utils/DefaultResourceContentSettings';
import { DefaultResourceContentSettings } from "./utils/DefaultResourceContentSettings";
import ResourceContentSettings from "@/global";
export default Vue.extend({
name: 'resourcecontentview',
name: "resourcecontentview",
data() {
return {
locale: 'en',
resourceId: '',
projectId: '',
locale: "en",
resourceId: "",
projectId: "",
resource: {
ResourceName: '',
DisplayName: '',
Description: '',
PID: '',
Disciplines: [] as object[],
Keywords: [] as object[],
//---add flag for archived resources---
Archived: false,
//--------------------------------------
ResourceName: "",
DisplayName: "",
Description: "",
PID: "",
Disciplines: [] as Array<unknown>,
Keywords: [] as Array<unknown>,
Visibility: {
id: '',
displayName: '',
id: "",
displayName: "",
},
License: null,
UsageRights: '',
UsageRights: "",
type: {
id: '',
displayName: '',
id: "",
displayName: "",
enabled: true,
},
applicationProfile: '',
applicationProfile: "",
fixedValues: {},
resourceTypeOption: {},
},
resourceName: '',
resourceName: "",
isWaitingForResponse: false,
fileInfo: {},
fileListEdit: [] as object[],
fileListEdit: [] as Array<unknown>,
showDetail: false,
fileListUpload: [] as object[],
fileListUploadSelect: [] as object[],
folder: [] as object[],
currentFolder: window.location.hash.indexOf('#') !== -1 ? window.location.hash.substring(1) : '/',
applicationProfileId: '',
fileListUpload: [] as Array<unknown>,
fileListUploadSelect: [] as Array<unknown>,
folder: [] as Array<unknown>,
currentFolder:
window.location.hash.indexOf("#") !== -1
? window.location.hash.substring(1)
: "/",
applicationProfileId: "",
showDroppable: false,
dragCounter: 0,
applicationProfile: [] as any[],
userId: '',
userId: "",
progressbarOccupied: 0,
windowWidth: 0,
windowHeight: 0,
......@@ -152,7 +202,8 @@ export default Vue.extend({
isFullscreen: false,
isMetadataManagerHidden: false,
isUploading: false,
resourceContentSettings: new DefaultResourceContentSettings() as ResourceContentSettings,
resourceContentSettings:
new DefaultResourceContentSettings() as ResourceContentSettings,
};
},
watch: {
......@@ -162,7 +213,7 @@ export default Vue.extend({
(loadedMetadata: any) => {
this.fileListUpload.push({
path: this.currentFolder,
version: '1.0.0',
version: "1.0.0",
uploading: false,
info: file,
name: (file as any).name,
......@@ -170,7 +221,7 @@ export default Vue.extend({
});
},
file,
this.resourceId,
this.resourceId
);
}
(this.$refs.filesView as any).$refs.adaptTable.clearSelected();
......@@ -194,10 +245,11 @@ export default Vue.extend({
this.resource.DisplayName = data.displayName;
this.resource.Description = data.description;
this.resource.UsageRights = data.usageRights;
this.resource.Keywords = [] as object[];
const keywords = data.keywords ? data.keywords.split(';') : [];
this.resource.Archived = data.archived;
this.resource.Keywords = [] as Array<unknown>;
const keywords = data.keywords ? data.keywords.split(";") : [];
this.resource.Keywords = keywords;
this.resource.Disciplines = [] as object[];
this.resource.Disciplines = [] as Array<unknown>;
for (const discipline of Object.keys(data.disciplines)) {
this.resource.Disciplines.push(data.disciplines[discipline]);
}
......@@ -213,39 +265,50 @@ export default Vue.extend({
(this.resource.resourceTypeOption as any).Size =
(this.resource.resourceTypeOption as any).Size * 1024 * 1024 * 1024;
}
this.resource.applicationProfile = data.applicationProfile !== null ? data.applicationProfile : '';
this.resource.fixedValues = data.fixedValues !== null ? data.fixedValues : {};
this.resource.applicationProfile =
data.applicationProfile !== null ? data.applicationProfile : "";
this.resource.fixedValues =
data.fixedValues !== null ? data.fixedValues : {};
ResourceTypeApi.getResourceType(
(this.resource.type as any).id,
(resourceTypeResponse: any) => {
this.resourceContentSettings = resourceTypeResponse.data.resourceContent as ResourceContentSettings;
const languageStrings = (coscine.i18n.resourcecontentview as any)[LanguageUtil.getLanguage()];
this.resourceContentSettings = resourceTypeResponse.data
.resourceContent as ResourceContentSettings;
const languageStrings = (
(window as any).coscine.i18n.resourcecontentview as any
)[LanguageUtil.getLanguage()];
// depending on the resource type information merge the appropriate strings
if (languageStrings[resourceTypeResponse.data.displayName] !== undefined) {
(coscine.i18n.resourcecontentview as any)[LanguageUtil.getLanguage()] =
MergeUtil.merge(
MergeUtil.merge({}, languageStrings),
languageStrings[resourceTypeResponse.data.displayName]);
if (
languageStrings[resourceTypeResponse.data.displayName] !==
undefined
) {
((window as any).coscine.i18n.resourcecontentview as any)[
LanguageUtil.getLanguage()
] = MergeUtil.merge(
MergeUtil.merge({}, languageStrings),
languageStrings[resourceTypeResponse.data.displayName]
);
}
},
}
);
MetadataApi.getProfileComplete(
this.applicationProfileId,
this.resourceId,
(responseApplicationProfile: any) => {
this.applicationProfile = responseApplicationProfile.data;
},
}
);
});
// should get the free/occupied space for the reasource here and hand it to the other templates?
ResourceApi.isUserResourceCreator(
this.resourceId,
(response: any) => (this.canEditResource = response.data.isResourceCreator),
(response: any) =>
(this.canEditResource = response.data.isResourceCreator)
);
ProjectRoleApi.getUserRoles(this.projectId, (response: any) => {
const app = this;
response.data.forEach((userRole: any) => {
if (userRole.role.displayName.toLowerCase() === 'owner') {
if (userRole.role.displayName.toLowerCase() === "owner") {
app.canEditResource = true;
}
});
......@@ -253,9 +316,9 @@ export default Vue.extend({
}
},
mounted() {
this.$nextTick(function() {
window.addEventListener('resize', this.getWindowWidth);
window.addEventListener('resize', this.getWindowHeight);
this.$nextTick(function () {
window.addEventListener("resize", this.getWindowWidth);
window.addEventListener("resize", this.getWindowHeight);
this.getWindowWidth();
this.getWindowHeight();
......@@ -267,13 +330,13 @@ export default Vue.extend({
if (this.resourceContentSettings.metadataView.editableDataUrl) {
this.fileListUpload.length = 0;
const file = {
name: '',
name: "",
};
MetadataManagerUtil.loadMetadata(
(loadedMetadata: any) => {
this.fileListUpload.push({
path: this.currentFolder,
version: '1.0.0',
version: "1.0.0",
uploading: false,
info: file,
name: (file as any).name,
......@@ -281,7 +344,7 @@ export default Vue.extend({
});
},
file,
this.resourceId,
this.resourceId
);
} else {
(this.$refs.fileTrigger as any).$el.click();
......@@ -298,18 +361,21 @@ export default Vue.extend({
}
},
uploadDrop(ev: any) {
if (!this.resourceContentSettings.readOnly && !this.resourceContentSettings.metadataView.editableDataUrl) {
if (
!this.resourceContentSettings.readOnly &&
!this.resourceContentSettings.metadataView.editableDataUrl
) {
this.dragCounter = 0;
this.showDroppable = false;
if (ev.dataTransfer.items) {
for (const item of ev.dataTransfer.items) {
if (item.kind === 'file') {
if (item.kind === "file") {
const file = item.getAsFile();
MetadataManagerUtil.loadMetadata(
(loadedMetadata: any) => {
this.fileListUpload.push({
path: this.currentFolder,
version: '1.0.0',
version: "1.0.0",
uploading: false,
info: file,
name: (file as any).name,
......@@ -317,7 +383,7 @@ export default Vue.extend({
});
},
file,
this.resourceId,
this.resourceId
);
}
}
......@@ -347,11 +413,14 @@ export default Vue.extend({
setFileListEdit(newFileListEdit: any) {
this.fileListEdit = newFileListEdit;
},
removeSelection(selectionRemovable: object[]) {
removeSelection(selectionRemovable: Array<unknown>) {
const table = (this.$refs.filesView as any).$refs.adaptTable;
for (let i = 0; i < table.items.length; i++) {
const item = table.items[i];
if (selectionRemovable.filter((entry: any) => entry.name === item.name).length > 0) {
if (
selectionRemovable.filter((entry: any) => entry.name === item.name)
.length > 0
) {
table.unselectRow(i);
}
}
......@@ -359,13 +428,13 @@ export default Vue.extend({
setFullscreen(newIsFullscreen: boolean) {
this.isFullscreen = newIsFullscreen;
if (newIsFullscreen) {
document.body.classList.add('fullscreen');
document.body.classList.remove('show-menu');
document.body.classList.add("fullscreen");
document.body.classList.remove("show-menu");
} else {
document.body.classList.remove('fullscreen');
document.body.classList.remove("fullscreen");
this.isMetadataManagerHidden = false;
if (localStorage.getItem('isSidebarVisible') === '1') {
document.body.classList.add('show-menu');
if (localStorage.getItem("isSidebarVisible") === "1") {
document.body.classList.add("show-menu");
}
}
},
......@@ -373,7 +442,7 @@ export default Vue.extend({
this.setFullscreen(!this.isFullscreen);
},
toggleMenu() {
this.$set(this, 'isMetadataManagerHidden', !this.isMetadataManagerHidden);
this.$set(this, "isMetadataManagerHidden", !this.isMetadataManagerHidden);
},
getWindowWidth() {
this.windowWidth = document.documentElement.clientWidth;
......@@ -414,14 +483,14 @@ body.fullscreen #resourcecontentview .DataSource .headerRow {
margin-left: 0px;
margin-right: 0px;
}
#resourcecontentview #filesViewSpan {
#resourcecontentview #filesViewSpan {
position: absolute;
right: 620px;
left: 0px;
}
#resourceview h4 {
color: #000;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
font-family: "Avenir", Helvetica, Arial, sans-serif;
}
body.fullscreen #footer {
display: none;
......@@ -499,7 +568,7 @@ body:not(.fullscreen) #resourcecontentview #metadataManagerDiv,
</style>
<style scoped>
input[type='file'] {
input[type="file"] {
display: none;
font-size: 0px;
position: absolute;
......
src/components/FilesView.vue
View file @ fa31eb0a
This diff is collapsed.
src/components/FilesViewHeader.vue
View file @ fa31eb0a
<template>
<!-- <b-input-group> -->
<!-- <b-button-toolbar> -->
<div class="row">
<div class="col-sm-6 file-view-header">
<div class="col-sm-10 file-view-header">
<span>
<h4>{{ resource.type.displayName }}: {{ resourceName }}</h4>
</span>
<InfoOutlineIcon id="resourceDetails" class="icon-tiny" :title="$t('info')" />
<b-popover over custom-class="b-popover" target="resourceDetails" triggers="hover focus" placement="bottom">
<template v-slot:title
><b>{{ resourceName }}</b></template
<InfoOutlineIcon
id="resourceDetails"
class="icon-tiny"
:title="$t('info')"
/>
<b-popover
over
custom-class="b-popover"
target="resourceDetails"
triggers="hover focus"
placement="bottom"
>
<div v-if="resource.DisplayName">
<span
><b>{{ $t('displayName') }}: </b> </span
><span>{{ resource.DisplayName }}</span>
</div>
<div v-if="resource.PID">
<span
><b>{{ $t('PID') }}: </b> </span
><span>{{ resource.PID }}</span>
</div>
<div v-if="resource.Description">
<span
><b>{{ $t('description') }}: </b> </span
><span>{{ resource.Description }}</span
><br />
</div>
<div v-if="resource.Disciplines && resource.Disciplines.length > 0">
<span
><b>{{ $t('disciplines') }}: </b>
</span>
<ul>
<li v-for="discipline in resource.Disciplines" v-bind:key="discipline.id">
<div v-if="locale === 'de'">
{{ discipline.displayNameDe }}
</div>
<div v-else>
{{ discipline.displayNameEn }}
</div>
</li>
</ul>
</div>
<div v-if="resource.Keywords && resource.Keywords.length > 0">
<span
><b>{{ $t('keywords') }}: </b> </span
><br />
<ul>
<li v-for="keyword in resource.Keywords" v-bind:key="keyword">
{{ keyword }}
</li>
</ul>
</div>
<div v-if="resource.Visibility">
<span
><b>{{ $t('visibility') }}: </b> </span
><span>{{ resource.Visibility.displayName }}</span
><br />
</div>
<div v-if="resource.resourceLicense">
<span
><b>{{ $t('resourceLicense') }}: </b> </span
><span>{{ resource.resourceLicense }}</span
><br />
</div>
<div v-if="resource.UsageRights">
<span
><b>{{ $t('usageRights') }}: </b> </span
><span>{{ resource.UsageRights }}</span
><br />
</div>
<template v-slot:title
><b>{{ resourceName }}</b></template
>
<div v-if="resource.DisplayName">
<span
><b>{{ $t("displayName") }}: </b> </span
><span>{{ resource.DisplayName }}</span>
</div>
<div v-if="resource.PID">
<span
><b>{{ $t("PID") }}: </b> </span
><span>{{ resource.PID }}</span>
</div>
<div v-if="resource.Description">
<span
><b>{{ $t("description") }}: </b> </span
><span>{{ resource.Description }}</span
><br />
</div>
<div v-if="resource.Disciplines && resource.Disciplines.length > 0">
<span
><b>{{ $t("disciplines") }}: </b>
</span>
<ul>
<li
v-for="discipline in resource.Disciplines"
v-bind:key="discipline.id"
>
<div v-if="locale === 'de'">
{{ discipline.displayNameDe }}
</div>
<div v-else>
{{ discipline.displayNameEn }}
</div>
</li>
</ul>
</div>
<div v-if="resource.Keywords && resource.Keywords.length > 0">
<span
><b>{{ $t("keywords") }}: </b> </span
><br />
<ul>
<li v-for="keyword in resource.Keywords" v-bind:key="keyword">
{{ keyword }}
</li>
</ul>
</div>
<div v-if="resource.Visibility">
<span
><b>{{ $t("visibility") }}: </b> </span
><span>{{ resource.Visibility.displayName }}</span
><br />
</div>
<div v-if="resource.resourceLicense">
<span
><b>{{ $t("resourceLicense") }}: </b> </span
><span>{{ resource.resourceLicense }}</span
><br />
</div>
<div v-if="resource.UsageRights">
<span
><b>{{ $t("usageRights") }}: </b> </span
><span>{{ resource.UsageRights }}</span
><br />
</div>
</b-popover>
<span v-if="canEditResource">
<b-button @click="edit" :title="$t('edit')" class="btn btn-sm">
<b-button
@click="edit"
:title="$t('edit')"
class="btn btn-sm"
>
<PencilIcon :title="$t('edit')" />
</b-button>
</span>
<span>
<b-button @click="upload" :title="$t('upload')" class="btn btn-sm" :disabled="isUploading || resourceContentSettings.readOnly">
<b-button
@click="upload"
:title="$t('upload')"
class="btn btn-sm"
:disabled="
isUploading || resourceContentSettings.readOnly || resource.Archived
"
>
<PlusThickIcon :title="$t('upload')" />
</b-button>
</span>
<span v-if="resource.Archived">
<b-badge pill variant="warning">{{ $t("archive.archived") }}</b-badge>
</span>
</div>
<div class="col-sm-6">
<div v-if="resource.resourceTypeOption.Size !== undefined" class="progressContainer">
<div class="col-sm-2">
<div
v-if="resource.resourceTypeOption.Size !== undefined"
class="progressContainer"
>
<b-progress :max="resource.resourceTypeOption.Size">
<b-progress-bar :value="progressbarOccupied">
<span v-if="progressbarOccupied / resource.resourceTypeOption.Size >= 0.5">
<span
v-if="
progressbarOccupied / resource.resourceTypeOption.Size >= 0.5
"
>
<strong
>{{ formatBytes(progressbarOccupied) }} / {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
>{{ formatBytes(progressbarOccupied) }} /
{{ formatBytes(resource.resourceTypeOption.Size) }}</strong
>
</span>
</b-progress-bar>
<b-progress-bar :value="resource.resourceTypeOption.Size - progressbarOccupied" variant="secondary">
<span v-if="progressbarOccupied / resource.resourceTypeOption.Size < 0.5">
<b-progress-bar
:value="resource.resourceTypeOption.Size - progressbarOccupied"
variant="secondary"
>
<span
v-if="
progressbarOccupied / resource.resourceTypeOption.Size < 0.5
"
>
<strong
>{{ formatBytes(progressbarOccupied) }} / {{ formatBytes(resource.resourceTypeOption.Size) }}</strong
>{{ formatBytes(progressbarOccupied) }} /
{{ formatBytes(resource.resourceTypeOption.Size) }}</strong
>
</span>
</b-progress-bar>
......@@ -107,16 +148,17 @@
</template>
<script lang="ts">
import Vue from 'vue';
import Vue from "vue";
import { FileUtil } from '@coscine/app-util';
import { FileUtil } from "@coscine/app-util";
import InfoOutlineIcon from 'vue-material-design-icons/InformationOutline.vue';
import PencilIcon from 'vue-material-design-icons/Pencil.vue';
import PlusThickIcon from 'vue-material-design-icons/PlusThick.vue';
import InfoOutlineIcon from "vue-material-design-icons/InformationOutline.vue";
import PencilIcon from "vue-material-design-icons/Pencil.vue";
import PlusThickIcon from "vue-material-design-icons/PlusThick.vue";
import ResourceContentSettings from "@/global";
export default Vue.extend({
name: 'Header',
name: "Header",
props: {
resource: Object,
resourceId: String,
......@@ -129,11 +171,12 @@ export default Vue.extend({
},
methods: {
edit() {
const baseUrl = (_spPageContextInfo as any).siteAbsoluteUrl;
window.location.href = baseUrl + '/SitePages/EditResource.aspx?resource_id=' + this.resourceId;
const baseUrl = (window as any)._spPageContextInfo.siteAbsoluteUrl;
window.location.href =
baseUrl + "/SitePages/EditResource.aspx?resource_id=" + this.resourceId;
},
upload() {
this.$emit('clickFileSelect');
this.$emit("clickFileSelect");
},
formatBytes(bytes: any) {
return FileUtil.formatBytes(bytes);
......@@ -157,7 +200,7 @@ export default Vue.extend({
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 100px);
max-width: calc(100% - 11rem);
}
.file-view-header > span > svg {
margin-top: 0;
......@@ -201,4 +244,10 @@ b-progress {
.b-popover {
max-width: 100%;
}
.badge {
vertical-align: super;
font-size: 100%;
width: 5rem;
height: 1.3rem;
}
</style>
src/components/MetadataManager.vue
View file @ fa31eb0a
This diff is collapsed.
src/coscine.d.ts deleted 100644 → 0
View file @ d47b1a9d
declare var coscine: {
i18n: {
resourcecontentview: {},
},
};
declare var _spPageContextInfo: any;
interface ResourceContentSettings {
readOnly: boolean;
metadataView: {
editableDataUrl: boolean,
editableKey: boolean,
};
entriesView: {
columns: {
always: Array<string>
},
};
}
src/global.d.ts 0 → 100644
View file @ fa31eb0a
declare global {
let coscine: {
i18n: {
resourcecontentview: Record<string, unknown> = {};
};
};
}
declare let _spPageContextInfo: any;
export default interface ResourceContentSettings {
readOnly: boolean;
metadataView: {
editableDataUrl: boolean;
editableKey: boolean;
};
entriesView: {
columns: {
always: Array<string>;
};
};
}
src/main.ts
View file @ fa31eb0a
import jQuery from 'jquery';
import BootstrapVue from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import ResourceContentView from './ResourceContentView.vue';
import VueI18n from 'vue-i18n';
import { LanguageUtil } from '@coscine/app-util';
import VueRouter from 'vue-router';
import jQuery from "jquery";
import BootstrapVue from "bootstrap-vue";
import "bootstrap-vue/dist/bootstrap-vue.css";
import Vue from "vue";
import ResourceContentView from "./ResourceContentView.vue";
import VueI18n from "vue-i18n";
import { LanguageUtil } from "@coscine/app-util";
import VueRouter from "vue-router";
import Vuex from 'vuex';
import store from '@coscine/vuex-store';
import Vuex from "vuex";
import store from "@coscine/vuex-store";
Vue.config.productionTip = false;
Vue.use(BootstrapVue);
......@@ -19,7 +19,7 @@ Vue.use(Vuex);
jQuery(() => {
const i18n = new VueI18n({
locale: LanguageUtil.getLanguage(),
messages: coscine.i18n.resourcecontentview,
messages: (window as any).coscine.i18n.resourcecontentview,
silentFallbackWarn: true,
});
......@@ -27,5 +27,5 @@ jQuery(() => {
store,
render: (h) => h(ResourceContentView),
i18n,
}).$mount('resourcecontentview');
}).$mount("resourcecontentview");
});
src/shims-tsx.d.ts
View file @ fa31eb0a
import Vue, { VNode } from 'vue';
import Vue, { VNode } from "vue";
declare global {
namespace JSX {
......
src/shims-vue.d.ts
View file @ fa31eb0a
declare module '*.vue' {
import Vue from 'vue';
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
declare module '@coscine/api-connection';
declare module '@coscine/app-util';
declare module '@coscine/vuex-store';
declare module '@coscine/form-generator';
declare module '@coscine/component-library';
declare module '@ungap/url-search-params';
declare module "@coscine/api-connection";
declare module "@coscine/app-util";
declare module "@coscine/vuex-store";
declare module "@coscine/form-generator";
declare module "@coscine/component-library";
declare module "@ungap/url-search-params";
declare module 'vue-loading-overlay';
declare module "vue-loading-overlay";
declare module 'vue2-dropzone';
declare module "vue2-dropzone";
declare module "*.png" {
const value: any;
export default value;
}
src/utils/DefaultResourceContentSettings.ts
View file @ fa31eb0a
import ResourceContentSettings from "@/global";
export class DefaultResourceContentSettings implements ResourceContentSettings {
public readOnly: boolean = false;
public metadataView = {
editableDataUrl: false,
editableKey: false,
};
public entriesView = {
columns: {
always: [],
},
};
public readOnly = false;
public metadataView = {
editableDataUrl: false,
editableKey: false,
};
public entriesView = {
columns: {
always: [],
},
};
}
src/utils/MetadataManagerUtil.ts
View file @ fa31eb0a
import { TreeApi } from '@coscine/api-connection';
import { TreeApi } from "@coscine/api-connection";
export default {
filterMetadataStorage(metadataStorage: any, filterPath: string) {
return metadataStorage.filter(
(x: any) => {
if (Object.keys(x).length > 0) {
const graphName = Object.keys(x)[0];
const pathQueryString = 'path=';
if (graphName.indexOf(pathQueryString) !== -1) {
let path = graphName.substr(graphName.indexOf(pathQueryString) + pathQueryString.length);
if (path.indexOf('&') !== -1) {
path = path.substr(0, path.indexOf('&'));
}
if (decodeURIComponent(path) === filterPath) {
return true;
}
return metadataStorage.filter((x: any) => {
if (Object.keys(x).length > 0) {
const graphName = Object.keys(x)[0];
const pathQueryString = "path=";
if (graphName.indexOf(pathQueryString) !== -1) {
let path = graphName.substr(
graphName.indexOf(pathQueryString) + pathQueryString.length
);
if (path.indexOf("&") !== -1) {
path = path.substr(0, path.indexOf("&"));
}
if (decodeURIComponent(path) === filterPath) {
return true;
}
}
return false;
}
return false;
});
},
loadMetadata(callback: (response: any) => void, fileInfo: any, resourceId: any) {
loadMetadata(
callback: (response: any) => void,
fileInfo: any,
resourceId: any
) {
if (fileInfo !== undefined && fileInfo.absolutepath !== undefined) {
const folder = fileInfo.absolutepath.substring(0, fileInfo.absolutepath.indexOf('/') + 1);
TreeApi.getMetadata(resourceId, folder + fileInfo.name, (response: any) => {
const folder = fileInfo.absolutepath.substring(
0,
fileInfo.absolutepath.indexOf("/") + 1
);
TreeApi.getMetadata(
resourceId,
folder + fileInfo.name,
(response: any) => {
const metadataStorage = response.data.data.metadataStorage;
const metadataStorage = response.data.data.metadataStorage;
if (metadataStorage.length === 0) {
return callback({});
}
if (metadataStorage.length === 0) {
return callback({});
}
const filterPath = folder + fileInfo.name;
let result = this.filterMetadataStorage(metadataStorage, filterPath);
const filterPath = folder + fileInfo.name;
let result = this.filterMetadataStorage(metadataStorage, filterPath);
if (result.length === 0) {
return callback({});
}
if (result.length === 0) {
return callback({});
}
result = result[0];
result = result[0];
const objectKeys = Object.keys(result);
if (response.data.data.metadataStorage !== undefined && objectKeys.length === 1) {
return callback(result[objectKeys[0]]);
} else if (response.data.data.metadataStorage !== undefined && objectKeys.length > 1) {
return callback(result);
const objectKeys = Object.keys(result);
if (
response.data.data.metadataStorage !== undefined &&
objectKeys.length === 1
) {
return callback(result[objectKeys[0]]);
} else if (
response.data.data.metadataStorage !== undefined &&
objectKeys.length > 1
) {
return callback(result);
}
}
});
);
} else {
return callback({});
}
},
copyMetadata(source: any, target: any, copyStructure: boolean = true, createNode: boolean = false) {
copyMetadata(
source: any,
target: any,
copyStructure = true,
createNode = false
) {
let copyTarget = target;
if (createNode) {
target.metadata = {};
......@@ -69,8 +91,9 @@ export default {
const innerObjectKeys = Object.keys(source[objectKey][i]);
for (const innerObjectKey of innerObjectKeys) {
if (copyStructure) {
copyTarget[objectKey][i][innerObjectKey] = source[objectKey][i][innerObjectKey];
} else if (innerObjectKey === 'value') {
copyTarget[objectKey][i][innerObjectKey] =
source[objectKey][i][innerObjectKey];
} else if (innerObjectKey === "value") {
copyTarget[objectKey] = source[objectKey][i][innerObjectKey];
}
}
......
vue.config.js
View file @ fa31eb0a
module.exports = {
devServer: {
disableHostCheck: true,
},
publicPath: "./",
configureWebpack: {
devtool: "source-map",
devServer: {
disableHostCheck: true,
port: 9777,
},
publicPath: './',
configureWebpack: {
devtool: 'source-map',
devServer: {
port: 9777,
}
},
filenameHashing: false,
chainWebpack: config => {
config.optimization.delete('splitChunks')
},
css: {
extract: false,
},
}
\ No newline at end of file
},
filenameHashing: false,
chainWebpack: (config) => {
config.optimization.delete("splitChunks");
},
css: {
extract: false,
},
};
yarn.lock-workspace
View file @ fa31eb0a
This diff is collapsed.