FilesViewHeader.vue

<template>
  <b-row class="headerRow" align-v="center" no-gutters>
    <b-col class="file-view-header">
      <b-row no-gutters align-v="center">
        <p v-if="resource && resource.displayName" class="h4">
          {{ resource.displayName }}
        </p>

        <!-- Info Circle -->
        <b-icon
          id="resourceDetails"
          icon="info-circle"
          :title="$t('page.resource.info')"
          class="mx-1"
        />

        <!-- Resource Settings Button -->
        <b-button
          v-if="canEditResource"
          :title="$t('page.resource.edit')"
          size="sm"
          class="btn-sm mx-1"
          @click="edit"
        >
          <b-icon icon="pencil-fill" :title="$t('page.resource.edit')" />
        </b-button>

        <!-- Upload Button -->
        <b-button
          :title="$t('page.resource.upload')"
          size="sm"
          class="btn-sm mx-1"
          :disabled="isUploading || readOnly || (resource && resource.archived)"
          @click="upload"
        >
          <b-icon icon="plus" :title="$t('page.resource.upload')" />
        </b-button>

        <!-- Archived badge -->
        <span v-if="resource && resource.archived">
          <b-badge pill variant="warning">{{ $t("default.archived") }}</b-badge>
        </span>
      </b-row>
    </b-col>

    <!-- Quota Progress Bar -->
    <b-col id="quotaBar" sm="2" class="mx-2">
      <div v-if="maxSize !== undefined && used !== undefined">
        <b-progress
          v-b-popover.hover.bottom="{
            content: $t('page.resource.quotaPopover', {
              used: formatBytes(used),
              reserved: formatBytes(maxSize),
            }),
          }"
          :max="maxSize"
          class="w-100 border-1"
          style="background-color: var(--secondary)"
        >
          <b-progress-bar
            :value="used"
            :variant="used / maxSize >= 0.8 ? 'danger' : 'primary'"
          >
            <strong
              :class="
                used / maxSize < 0.5
                  ? 'justify-content-center d-flex position-absolute w-100'
                  : ''
              "
              class="text-white"
            >
              {{ formatBytes(used) }} /
              {{ formatBytes(maxSize) }}
            </strong>
          </b-progress-bar>
        </b-progress>
      </div>
    </b-col>

    <!-- Search Bar -->
    <b-col sm="2">
      <b-input-group>
        <b-form-input
          id="filterInput"
          type="search"
          size="sm"
          :placeholder="$t('page.resource.typeToSearch')"
          :value="value"
          @input="$emit('input', $event)"
        >
        </b-form-input>
      </b-input-group>
    </b-col>

    <!-- Info Popover -->
    <b-popover
      v-if="resource"
      over
      custom-class="b-popover"
      target="resourceDetails"
      triggers="hover focus"
      placement="bottom"
    >
      <template #title>
        <b>{{ resource.displayName }}</b>
      </template>
      <ul>
        <li v-if="resource.type && resource.type.displayName">
          <b>{{ `${$t("page.resource.resourceType")}: ` }}</b>
          {{
            $t("resourceTypes." + resource.type.displayName + ".displayName")
          }}
        </li>
        <li v-if="resource.displayName">
          <b>{{ `${$t("page.resource.displayName")}: ` }}</b>
          {{ resource.displayName }}
        </li>
        <li v-if="resource.pid">
          <b>{{ `${$t("page.resource.PID")}: ` }}</b>
          {{ resource.pid }}
        </li>
        <li v-if="resource.description">
          <b>{{ `${$t("page.resource.description")}: ` }}</b>
          {{ resource.description }}
        </li>
        <li v-if="resource.disciplines && resource.disciplines.length > 0">
          <b>{{ `${$t("page.resource.disciplines")}: ` }}</b>
          <ul>
            <li v-for="discipline in resource.disciplines" :key="discipline.id">
              <span v-if="$i18n.locale === 'de'">
                {{ discipline.displayNameDe }}
              </span>
              <span v-else>
                {{ discipline.displayNameEn }}
              </span>
            </li>
          </ul>
        </li>
        <li v-if="resource.keywords && resource.keywords.length > 0">
          <b>{{ `${$t("page.resource.keywords")}: ` }}</b>
          {{ resource.keywords.replace(";", "; ") }}
        </li>
        <li v-if="resource.visibility">
          <b>{{ `${$t("page.resource.visibility")}: ` }}</b>
          {{ resource.visibility.displayName }}
        </li>
        <li v-if="resource.license">
          <b>{{ `${$t("page.resource.license")}: ` }}</b>
          {{ resource.license.displayName }}
        </li>
        <li v-if="resource.usageRights">
          <b>{{ `${$t("page.resource.usageRights")}: ` }}</b>
          {{ resource.usageRights }}
        </li>
        <li v-if="resource.resourceTypeOption.RepoUrl">
          <b>{{ `${$t("resourceType.gitlab.domainLabel")} ` }}</b>
          {{ resource.resourceTypeOption.RepoUrl }}
        </li>
        <li v-if="resource.resourceTypeOption.ProjectId">
          <b>{{ `${$t("resourceType.gitlab.projectLabel")} ` }}</b>
          {{ gitlabInformation.project ? gitlabInformation.project.name : "" }}
        </li>
        <li v-if="resource.resourceTypeOption.Branch">
          <b>{{ `${$t("resourceType.gitlab.referenceLabel")} ` }}</b>
          {{ resource.resourceTypeOption.Branch }}
        </li>
      </ul>
    </b-popover>
  </b-row>
</template>

<script lang="ts">
import { defineComponent } from "vue";

// 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 { FileUtil, QuotaUnits } from "../../utils/FileUtil";
import router from "@/router";
import type {
  ProjectObject,
  ProjectQuotaReturnObject,
  UserObject,
} from "@coscine/api-client/dist/types/Coscine.Api.Project";
import type {
  Project,
  ResourceTypeInformation,
} from "@coscine/api-client/dist/types/Coscine.Api.Resources";
import type { VisitedResourceObject } from "../../types";
import type { GitlabInformation } from "@/modules/resource/types";

export default defineComponent({
  name: "FilesViewHeader",
  props: {
    isUploading: Boolean,
    value: {
      default: "",
      type: String,
    },
  },

  setup() {
    const resourceStore = useResourceStore();
    const projectStore = useProjectStore();
    const userStore = useUserStore();

    return { resourceStore, projectStore, userStore };
  },

  data() {
    return {
      gitlabInformation: {
        domain: "",
        accessToken: "",
        project: null,
        reference: null,
      } as GitlabInformation,
      gitlabProjects: [] as Project[] | null,
    };
  },

  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 FileUtil.convertCapacityUnits(
          this.resourceStore.currentUsedQuota,
          QuotaUnits.BYTE
        ); // Bytes
      }
      return undefined;
    },
  },

  async mounted() {
    await this.getGitlabProjectName();
  },

  methods: {
    async getGitlabProjectName() {
      this.gitlabProjects = await this.resourceStore.getGitlabAllProjects(
        this.resource?.resourceTypeOption.RepoUrl,
        this.resource?.resourceTypeOption.AccessToken
      );
      if (this.gitlabProjects) {
        this.gitlabInformation.project =
          this.gitlabProjects.find(
            (p) => p.id === this.resource?.resourceTypeOption.ProjectId
          ) ?? null;
      }
    },
    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>
.headerRow {
  padding: 0px 10px;
}
.file-view-header :deep(p.h4) {
  display: inline-block;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 11rem);
}
.btn-sm {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}
#resourceDetails:hover {
  cursor: pointer;
}
.progress {
  height: 1.15rem;
}
.b-popover {
  max-width: 100%;
}
@media (max-width: 1500px) {
  .file-view-header {
    width: calc(100% - 11rem);
  }
  .file-view-header :deep(svg) {
    margin-left: 3px;
    margin-right: 2px;
  }
  .sidebar-active .file-view-header :deep(button) {
    margin: 0 2px 0px 2px;
  }
  .sidebar-active .btn-sm {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
  }
  .sidebar-active .btn-sm :deep(svg) {
    width: 1rem;
    height: 1rem;
    text-align: center;
  }
  #quotaBar {
    display: none;
  }
  .sidebar-active .col-sm {
    max-width: 65%;
    padding-right: 0;
  }
  .sidebar-inactive .file-view-header :deep(p.h4) {
    max-width: calc(100% - 11rem);
  }
  .sidebar-inactive .col-sm {
    max-width: 65%;
    padding-right: 0px;
  }
}
</style>