Select Git revision
FilesViewHeader.vue

Benedikt Heinrichs authored and
Petar Hristov
committed
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
FilesViewHeader.vue 9.25 KiB
<template>
<b-row class="headerRow">
<div class="col-sm-7 file-view-header">
<span>
<p
class="h4"
v-if="
resource &&
resource.type &&
resource.type.displayName &&
resource.displayName
"
>
{{
$parent.$parent.$parent.$t(
"ResourceTypes." + resource.type.displayName + ".displayName"
)
}}: {{ resource.displayName }}
</p>
</span>
<b-icon
id="resourceDetails"
icon="info-circle"
:title="$parent.$parent.$parent.$t('page.resource.info')"
/>
<b-popover
v-if="resource"
over
custom-class="b-popover"
target="resourceDetails"
triggers="hover focus"
placement="bottom"
>
<template v-slot:title
><b>{{ resource.displayName }}</b></template
>
<div v-if="resource.displayName">
<span
><b
>{{ $parent.$parent.$parent.$t("page.resource.displayName") }}:
</b> </span
><span>{{ resource.displayName }}</span>
</div>
<div v-if="resource.pid">
<span
><b
>{{ $parent.$parent.$parent.$t("page.resource.PID") }}:
</b> </span
><span>{{ resource.pid }}</span>
</div>
<div v-if="resource.description">
<span
><b
>{{ $parent.$parent.$parent.$t("page.resource.description") }}:
</b> </span
><span>{{ resource.description }}</span
><br />
</div>
<div v-if="resource.disciplines && resource.disciplines.length > 0">
<span
><b
>{{ $parent.$parent.$parent.$t("page.resource.disciplines") }}:
</b>
</span>
<ul>
<li
v-for="discipline in resource.disciplines"
v-bind:key="discipline.id"
>
<div v-if="$i18n.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
>{{ $parent.$parent.$parent.$t("page.resource.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
>{{ $parent.$parent.$parent.$t("page.resource.visibility") }}:
</b> </span
><span>{{ resource.visibility.displayName }}</span
><br />
</div>
<div v-if="resource.license">
<span
><b
>{{
$parent.$parent.$parent.$t("page.resource.resourceLicense")
}}:
</b> </span
><span>{{ resource.license.displayName }}</span
><br />
</div>
<div v-if="resource.usageRights">
<span
><b
>{{ $parent.$parent.$parent.$t("page.resource.usageRights") }}:
</b> </span
><span>{{ resource.usageRights }}</span
><br />
</div>
</b-popover>
<b-button
@click="edit"
:title="$parent.$parent.$parent.$t('page.resource.edit')"
class="btn btn-sm"
v-if="canEditResource"
>
<b-icon
icon="pencil-fill"
:title="$parent.$parent.$parent.$t('page.resource.edit')"
/>
</b-button>
<b-button
@click="upload"
:title="$parent.$parent.$parent.$t('page.resource.upload')"
class="btn btn-sm"
:disabled="isUploading || readOnly || (resource && resource.archived)"
>
<b-icon
icon="plus"
:title="$parent.$parent.$parent.$t('page.resource.upload')"
/>
</b-button>
<span v-if="resource && resource.archived" class="badgeWrap">
<b-badge pill variant="warning">{{ $t("default.archived") }}</b-badge>
</span>
</div>
<div class="col-sm-3">
<div
v-if="maxSize !== undefined && used !== undefined"
class="progressContainer"
>
<b-progress :max="maxSize">
<b-progress-bar :value="used">
<span v-if="used / maxSize >= 0.5">
<strong
>{{ formatBytes(used) }} / {{ formatBytes(maxSize) }}</strong
>
</span>
</b-progress-bar>
<b-progress-bar :value="maxSize - used" variant="secondary">
<span v-if="used / maxSize < 0.5">
<strong
>{{ formatBytes(used) }} / {{ formatBytes(maxSize) }}</strong
>
</span>
</b-progress-bar>
</b-progress>
</div>
</div>
<div class="col-sm-2 searchColumn">
<b-input-group>
<b-form-input
type="search"
id="filterInput"
:placeholder="
$parent.$parent.$parent.$t('page.resource.typeToSearch')
"
:value="value"
@input="$emit('input', $event)"
></b-form-input>
</b-input-group>
</div>
</b-row>
</template>
<script lang="ts">
import { defineComponent } from "vue-demi";
// import the store for current module
import { useResourceStore } from "../store";
import { useProjectStore } from "@/modules/project/store";
// import the user store
import { useUserStore } from "@/modules/user/store";
// import the main store
import { useMainStore } from "@/store/index";
import { FileUtil } from "../utils/FileUtil";
import {
ProjectObject,
ProjectQuotaReturnObject,
UserObject,
} from "@coscine/api-client/dist/types/Coscine.Api.Project";
import router from "@/router";
import type { ResourceTypeInformation } from "@coscine/api-client/dist/types/Coscine.Api.Resources";
import type { VisitedResourceObject } from "../types";
export default defineComponent({
setup() {
const mainStore = useMainStore();
const resourceStore = useResourceStore();
const projectStore = useProjectStore();
const userStore = useUserStore();
return { mainStore, resourceStore, projectStore, userStore };
},
computed: {
isOwner(): boolean | undefined {
return this.projectStore.currentUserRoleIsOwner;
},
project(): null | ProjectObject {
return this.projectStore.currentProject;
},
quotas(): ProjectQuotaReturnObject[] | null {
return this.projectStore.currentQuotas;
},
resource(): null | VisitedResourceObject {
return this.resourceStore.currentResource;
},
resourceTypeInformation(): null | undefined | ResourceTypeInformation {
if (this.resourceStore.resourceTypes && this.resource) {
return this.resourceStore.resourceTypes.find(
(resourceType) => resourceType.id === this.resource?.type?.id
);
}
return null;
},
user(): null | UserObject {
return this.userStore.user;
},
canEditResource(): boolean {
if (this.resource && this.user) {
return this.resource.creator === this.user.id || this.isOwner === true;
}
return false;
},
readOnly(): boolean {
return this.resourceTypeInformation?.resourceContent?.readOnly === true;
},
maxSize(): number | undefined {
if (
this.resource &&
this.resource.resourceTypeOption &&
this.resource.resourceTypeOption.Size !== undefined
) {
return this.resource.resourceTypeOption.Size * 1024 * 1024 * 1024;
}
return undefined;
},
used(): number | undefined {
if (this.resourceStore.currentUsedQuota) {
return this.resourceStore.currentUsedQuota;
}
return undefined;
},
},
name: "Header",
props: {
isUploading: Boolean,
value: String,
},
methods: {
edit() {
if (
this.resource &&
this.resource.id &&
this.project &&
this.project.slug
) {
router.push({
name: "resource-settings",
params: {
slug: this.project.slug,
guid: this.resource.id,
},
});
}
},
upload() {
this.$emit("clickFileSelect");
},
formatBytes(bytes: number) {
return FileUtil.formatBytes(bytes);
},
},
});
</script>
<style scoped>
.file-view-header {
padding-left: 25px;
}
.searchColumn {
padding-right: 25px;
}
.file-view-header >>> p.h4 {
display: inline-block;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 11rem);
}
.file-view-header >>> svg {
vertical-align: top;
margin-left: 3px;
margin-right: 3px;
}
.file-view-header >>> button {
vertical-align: top;
margin: 0 4px 0px 4px;
}
.btn-sm {
min-width: 0;
width: 30px;
padding: 2px;
}
#resourceDetails:hover {
cursor: pointer;
}
.progress {
height: 1.15rem;
max-width: 15rem;
margin: 5px auto;
}
.progressContainer {
margin: 0 auto;
}
.b-popover {
max-width: 100%;
}
.badgeWrap >>> .badge {
vertical-align: top;
height: 1.3rem;
}
#filterInput {
max-height: 30px;
}
</style>