Skip to content
Snippets Groups Projects
Select Git revision
  • cb2db0e8bcbe36faa9970296cc6b2b6b60f53d02
  • main default protected
  • Issue/3141-rdsNoLonga
  • Issue/3180-fixMetadataNotLoading
  • dev protected
  • Issue/3177-resourceTypeDescriptionTexts
  • Issue/3090-tosProblems
  • Issue/3178-iconColorBug
  • Issue/3160-deactivateDownloadForFolders
  • Issue/3111-fixLoadingGitLabResource
  • Issue/3133-subProjectsChanges
  • Issue/3139-dsnrw
  • Issue/3167-changeTextAndAddLink
  • Issue/3070-newIconsForResourceTypes
  • Issue/3145-redesignLoginPage
  • Issue/3093-moreInformationInTheDeletionEmails
  • Issue/3040-closeTokenWindowWithXButton
  • Issue/3152-fixResourceStore
  • Issue/xxxx-DuckDBTest
  • Issue/3152-fixUpdateRequestPayload
  • Issue/2489-addNotificationManagement
  • v3.19.1
  • v3.19.0
  • v3.18.0
  • v3.17.2
  • v3.17.1
  • v3.17.0
  • v3.16.1
  • v3.16.0
  • v3.15.6
  • v3.15.5
  • v3.15.4
  • v3.15.3
  • v3.15.2
  • v3.15.1
  • v3.15.0
  • v3.14.0
  • v3.13.1
  • v3.13.0
  • v3.12.0
  • v3.11.0
41 results

FilesViewHeader.vue

Blame
  • Benedikt Heinrichs's avatar
    Benedikt Heinrichs authored and Petar Hristov committed
    7b0ffd7a
    History
    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>