Skip to content
Snippets Groups Projects

Topic/1689 display allocated quota for admin page

Merged Topic/1689 display allocated quota for admin page
Topic/1689-DisplayAllocatedQuotaForAdminPage into Product/1623-allocatedQuotaForAdmin
Merged
Kimia Beheshtirequested to merge
Topic/1689-DisplayAllocatedQuotaForAdminPage into Product/1623-allocatedQuotaForAdmin
Compare
and
8 files
+ 263
− 185
Compare changes
  • Side-by-side
  • Inline

Files

src/SupportAdminApp.vue
+ 185
− 141
<template>
<div id="SupportAdmin" class="container">
<b-row>
<div class="col-sm-8">
<div>
<h4>{{ $t('headline') }}</h4>
</div>
<div id="SupportAdmin" class="container">
<b-row>
<div class="col-sm-8">
<div>
<h4>{{ $t("headline") }}</h4>
</div>
</b-row>
<b-row>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<b-form id="project_request_form" @submit.stop.prevent="onSubmit">
<b-input-group class="mt-3">
</div>
</b-row>
<b-row>
<div class="col-sm-2"></div>
<div class="col-sm-8">
<b-form id="project_request_form" @submit.stop.prevent="onSubmit">
<b-input-group class="mt-3">
<b-form-input
id="projectId"
ref="projectId"
v-model="form.projectId"
aria-describedby="projectHelp"
:placeholder="$t('projectInputTooltip')"
>
</b-form-input>
<b-input-group-append>
<b-button
variant="primary"
id="query_project_button"
@click="queryProject()"
>{{ $t("projectSelectButton") }}</b-button
>
</b-input-group-append>
</b-input-group>
</b-form>
<h5 id="project_query_status">{{ requestStatus }}</h5>
<b-container fluid>
<b-row class="my-1">
<b-col sm="2">
<label for="project_name">{{ $t("projectName") }}</label>
</b-col>
<b-col sm="10">
<b-form-input
id="projectId"
ref="projectId"
v-model="form.projectId"
aria-describedby="projectHelp"
:placeholder="$t('projectInputTooltip')">
</b-form-input>
<b-input-group-append>
<b-button variant="primary" id="query_project_button" @click="queryProject()">{{ $t('projectSelectButton') }}</b-button>
</b-input-group-append>
</b-input-group>
</b-form>
<h5 id='project_query_status'>{{ requestStatus }}</h5>
<b-container fluid>
<b-row class="my-1">
<b-col sm="2">
<label for="project_name">{{ $t('projectName') }}</label>
</b-col>
<b-col sm="10">
<b-form-input id="project_name" v-model="form.projectName" :readonly="true"></b-form-input>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="2">
<label for="project_short_name">{{ $t('projectShortName') }}</label>
</b-col>
<b-col sm="10">
<b-form-input id="project_short_name" v-model="form.projectShortName" :readonly="true"></b-form-input>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="2">
<label for="project_guid">{{ $t('projectGuid') }}</label>
</b-col>
<b-col sm="10">
<b-form-input id="project_guid" v-model="form.projectGuid" :readonly="true"></b-form-input>
</b-col>
</b-row>
</b-container>
<h5 style="text-align: left;">{{ $t('projectQuotaHeadline') }}:</h5>
<b-table
id="project_qouta_table"
:fields="headers"
:items="projectQuotas"
:busy="busy"
:locale="$i18n.locale"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:show-empty="true"
:empty-text="emptyText"
fixed
sticky-header="100%"
no-border-collapse
sort-icon-right
striped
bordered
outlined
hover
head-variant="dark">
<template #cell(newQuota)="row">
<b-form-input
id="data"
v-model="row.item.newQuota"
aria-describedby="projectHelp"
:placeholder="$t('newQuotaInputPlaceHolder')">
</b-form-input>
</template>
<template #cell(action)="row">
<button id=action v-on:click.stop.prevent="saveNewQuota(row.item)" class="btn btn-primary float-right">{{ $t('save') }}</button>
</template>
</b-table>
</div>
</b-row>
</div>
id="project_name"
v-model="form.projectName"
:readonly="true"
></b-form-input>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="2">
<label for="project_short_name">{{
$t("projectShortName")
}}</label>
</b-col>
<b-col sm="10">
<b-form-input
id="project_short_name"
v-model="form.projectShortName"
:readonly="true"
></b-form-input>
</b-col>
</b-row>
<b-row class="my-1">
<b-col sm="2">
<label for="project_guid">{{ $t("projectGuid") }}</label>
</b-col>
<b-col sm="10">
<b-form-input
id="project_guid"
v-model="form.projectGuid"
:readonly="true"
></b-form-input>
</b-col>
</b-row>
</b-container>
<h5 style="text-align: left">{{ $t("projectQuotaHeadline") }}:</h5>
<b-table
id="project_qouta_table"
:fields="headers"
:items="projectQuotas"
:busy="busy"
:locale="$i18n.locale"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:show-empty="true"
:empty-text="emptyText"
fixed
sticky-header="100%"
no-border-collapse
sort-icon-right
striped
bordered
outlined
hover
head-variant="dark"
>
<template #cell(newQuota)="row">
<b-form-input
id="data"
v-model="row.item.newQuota"
aria-describedby="projectHelp"
:placeholder="$t('newQuotaInputPlaceHolder')"
>
</b-form-input>
</template>
<template #cell(action)="row">
<button
id="action"
v-on:click.stop.prevent="saveNewQuota(row.item)"
class="btn btn-primary float-right"
>
{{ $t("save") }}
</button>
</template>
</b-table>
</div>
</b-row>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { GuidUtil } from '@coscine/app-util';
import { AdminApi } from '@coscine/api-connection';
import { ToastPlugin } from 'bootstrap-vue';
import { error } from 'jquery';
import Vue from "vue";
import { GuidUtil } from "@coscine/app-util";
import { AdminApi } from "@coscine/api-connection";
import { ToastPlugin } from "bootstrap-vue";
import { error } from "jquery";
Vue.use(ToastPlugin);
export default Vue.extend({
name: 'supportadmin',
components: {
},
name: "supportadmin",
components: {},
data() {
return {
requestStatus: this.$t('projectNotSelected'),
requestStatus: this.$t("projectNotSelected"),
form: {
projectId: '',
projectName: '',
projectShortName: '',
projectGuid: '',
projectId: "",
projectName: "",
projectShortName: "",
projectGuid: "",
},
projectQuotas: [] as any,
filter: String,
busy: false,
emptyText: 'No Quotas',
sortBy: 'resourceType',
emptyText: "No Quotas",
sortBy: "resourceType",
sortDesc: false,
filteredRows: 0,
headers: [
{
label: this.$t('resourceType'),
key: 'resourceType',
label: this.$t("resourceType"),
key: "resourceType",
sortable: true,
},
{
label: this.$t("currentQuota"),
key: "currentQuota",
sortable: true,
},
{
label: this.$t('currentQuota'),
key: 'currentQuota',
label: this.$t("allocatedQuota"),
key: "allocatedQuota",
sortable: true,
},
{
label: this.$t('newQuota'),
key: 'newQuota',
label: this.$t("newQuota"),
key: "newQuota",
sortable: true,
},
{
label: this.$t('action'),
key: 'action',
label: this.$t("action"),
key: "action",
sortable: true,
},
],
@@ -142,42 +174,51 @@ export default Vue.extend({
},
methods: {
getProjectQuotas() {
AdminApi.GetProject(this.form.projectId,
AdminApi.GetProject(
this.form.projectId,
(response: any) => {
this.clearResults('');
this.clearResults("");
if (response.data.guid) {
this.requestStatus = this.$t('projectFound');
this.requestStatus = this.$t("projectFound");
this.form.projectName = response.data.name;
this.form.projectShortName = response.data.shortName;
this.form.projectGuid = response.data.guid;
const quotas = response.data.quotas;
for (const d of quotas) {
this.projectQuotas.push({quotaId: d.quotaId, resourceType: d.resourceType, currentQuota: d.quota});
this.projectQuotas.push({
quotaId: d.quotaId,
resourceType: d.resourceType,
currentQuota: d.quota,
allocatedQuota: d.allocated,
});
}
} else {
this.clearResults('projectNotFound');
this.clearResults("projectNotFound");
}
},
(errorState: any) => {
const message = this.$t('queryProjectFailureText').toString();
this.makeToast(message, this.$t('queryProjectFailureHeadline').toString());
},
const message = this.$t("queryProjectFailureText").toString();
this.makeToast(
message,
this.$t("queryProjectFailureHeadline").toString()
);
}
);
},
queryProject() {
// if the field is empty:
if (!this.form.projectId.trim()) {
this.clearResults('projectNotSelected');
this.clearResults("projectNotSelected");
} else {
this.getProjectQuotas();
}
},
saveNewQuota(selectedQuota: any) {
let message: string = '' + this.$t('successNotificationText');
message = message.replace('{projectName}', this.form.projectShortName);
message = message.replace('{resourceType}', selectedQuota.resourceType);
let message: string = "" + this.$t("successNotificationText");
message = message.replace("{projectName}", this.form.projectShortName);
message = message.replace("{resourceType}", selectedQuota.resourceType);
if (selectedQuota.newQuota) {
message = message.replace('{newQuota}', '' + selectedQuota.newQuota);
message = message.replace("{newQuota}", "" + selectedQuota.newQuota);
}
const updatedQuota = {
@@ -186,42 +227,45 @@ export default Vue.extend({
};
if (updatedQuota.quota) {
AdminApi.UpdateQuota(updatedQuota,
AdminApi.UpdateQuota(
updatedQuota,
(response: any) => {
this.makeToast(message, this.$t('successNotificationHeadline').toString());
this.makeToast(
message,
this.$t("successNotificationHeadline").toString()
);
this.getProjectQuotas();
},
(errorState: any) => {
message = this.$t('failureNotificationText').toString();
this.makeToast(message, this.$t('failureNotificationHeadline').toString());
},
message = this.$t("failureNotificationText").toString();
this.makeToast(
message,
this.$t("failureNotificationHeadline").toString()
);
}
);
}
},
clearResults(headline: string) {
this.requestStatus = this.$t(headline);
this.projectQuotas = [];
this.form.projectName = '';
this.form.projectShortName = '';
this.form.projectGuid = '';
this.form.projectName = "";
this.form.projectShortName = "";
this.form.projectGuid = "";
},
makeToast(text: string = 'Message', givenTitle: string = 'Title') {
this.$bvToast.toast(
text,
{
title: givenTitle,
autoHideDelay: 5000,
toaster: 'b-toaster-bottom-right',
noCloseButton: true,
},
);
makeToast(text = "Message", givenTitle = "Title") {
this.$bvToast.toast(text, {
title: givenTitle,
autoHideDelay: 5000,
toaster: "b-toaster-bottom-right",
noCloseButton: true,
});
},
},
});
</script>
<style scoped>
h5 {
margin-top: 0.4em;
}
</style>
\ No newline at end of file
</style>