Skip to content

Commit 78a25e0

Browse files
ndasanayakandasanayaka
committed
[FEATURE]-New page added for web resources
1 parent f3cbedb commit 78a25e0

4 files changed

Lines changed: 327 additions & 4 deletions

File tree

‎src/api/PreferenceAPI.js‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,24 @@ export default {
328328
const { data }= await request.get(`${Vue.prototype.$Config.endpoints.pref}/preferences/configuration`)
329329
return data
330330
},
331-
331+
332+
// web resources page
333+
async get_resources() {
334+
const {data} = await request.get(`${Vue.prototype.$Config.endpoints.pref}/preferences/resources`)
335+
return data
336+
},
337+
async create_resource(payload) {
338+
const {data} = await request.post(`${Vue.prototype.$Config.endpoints.pref}/preferences/resources`, payload)
339+
return data
340+
},
341+
async update_resource(record_id, payload){
342+
const { data } = await request.put(`${Vue.prototype.$Config.endpoints.pref}/preferences/resources/${record_id}`, payload)
343+
return data
344+
},
345+
async delete_resource(record_id){
346+
await request.delete(`${Vue.prototype.$Config.endpoints.pref}/preferences/resources/${record_id}`)
347+
}
348+
332349

333350
}
334351

‎src/components/Navbar.vue‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,11 +213,14 @@
213213
</v-list-group>
214214

215215

216-
<v-list-item href="https://uq-rcc.github.io/ipp-docs" target="_blank">
216+
217+
218+
219+
<v-list-item to="/resources" >
217220
<v-list-item-icon>
218-
<v-icon>mdi-help-circle-outline</v-icon>
221+
<v-icon>mdi-link</v-icon>
219222
</v-list-item-icon>
220-
<v-list-item-title class="ml-n5">Documentation</v-list-item-title>
223+
<v-list-item-title class="ml-n5">Resources</v-list-item-title>
221224
</v-list-item>
222225

223226
</v-list>

‎src/router.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import Macros from './views/Macros.vue'
1414
import Particlecounting from './views/Particlecounting.vue'
1515
import Desktop from './views/Desktop.vue'
1616
import Virtualdesktopmanager from './views/Virtualdesktopmanager.vue'
17+
import WebResources from './views/WebResources.vue'
1718

1819
Vue.use(Router)
1920

@@ -72,6 +73,12 @@ export default new Router({
7273
name: 'Configuration',
7374
component: Configuration
7475

76+
},
77+
{
78+
path: '/resources',
79+
name: 'WebResources',
80+
component: WebResources
81+
7582
},
7683
// {
7784
// path: '/release',

‎src/views/WebResources.vue‎

Lines changed: 296 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,296 @@
1+
<template>
2+
<div>
3+
<v-row align="center" justify="center">
4+
<v-col cols="12" sm="8" md="10" lg="12">
5+
<v-card max-height="100%" max-width="99%">
6+
<br />
7+
8+
<div>
9+
<v-card-title align="start" justify="center">Web Resources</v-card-title>
10+
<v-card-text>
11+
12+
<v-row align="center" justify="center" class="mx-3">
13+
<v-col cols="12" sm="4" md="6" lg="8">
14+
15+
<!-- <v-table fixed-header height="300px" >
16+
17+
<tbody>
18+
<tr v-if="is_admin">
19+
<td></td>
20+
21+
<td >
22+
<v-tooltip bottom>
23+
24+
<template v-slot:activator="{ on, attrs }">
25+
<v-btn class="my-1" @click="add()" v-bind="attrs" v-on="on">
26+
<v-icon >
27+
mdi-plus
28+
</v-icon> Add New
29+
</v-btn>
30+
</template>
31+
<span>Add a new resource</span>
32+
</v-tooltip>
33+
</td>
34+
35+
</tr>
36+
<tr v-if="!links || links.length === 0">
37+
<td> No Resources </td>
38+
39+
</tr>
40+
<tr v-else v-for="link in links"
41+
v-bind:key="link.id">
42+
<td class="text-left" style="padding-right: 100px;">
43+
<v-list-item
44+
:href="link.link"
45+
target="_blank">
46+
<v-list-item-icon>
47+
<v-icon>mdi-file-document</v-icon>
48+
</v-list-item-icon>
49+
<v-list-item-title class="ml-n5" style="padding-right: 30px;" title="Click to open">{{link.title}}</v-list-item-title>
50+
</v-list-item>
51+
</td>
52+
<td v-if="is_admin">
53+
<v-tooltip bottom>
54+
55+
<template v-slot:activator="{ on, attrs }">
56+
<v-btn fab small class="ma-2" color="primary" @click.stop="edit(link.id)" v-bind="attrs" v-on="on" variant="text">
57+
<v-icon >
58+
mdi-pencil
59+
</v-icon>
60+
61+
</v-btn>
62+
</template>
63+
<span>Edit</span>
64+
</v-tooltip>
65+
<v-tooltip bottom>
66+
67+
<template v-slot:activator="{ on, attrs }">
68+
<v-btn fab small class="ma-2" color="error" @click.stop="remove(link.id)" v-bind="attrs" v-on="on">
69+
<v-icon >
70+
mdi-delete
71+
</v-icon>
72+
</v-btn>
73+
</template>
74+
<span>Delete</span>
75+
</v-tooltip>
76+
77+
</td>
78+
79+
</tr>
80+
81+
</tbody>
82+
83+
</v-table> -->
84+
<v-list two-line>
85+
<v-list-item v-if="!links || links.length === 0">
86+
<h5>No Resources</h5>
87+
</v-list-item>
88+
<v-list-item v-else
89+
v-for="link in links"
90+
:key="link.id"
91+
class="d-flex align-center justify-space-between"
92+
>
93+
<v-list-item-content>
94+
<v-list-item-title :title="'Click to open'" class="font-weight-medium">
95+
<a :href="link.link" target="_blank" class="text-decoration-none text--primary">
96+
<v-icon left class="mr-2">mdi-file-document</v-icon> {{ link.title }}
97+
</a>
98+
</v-list-item-title>
99+
</v-list-item-content>
100+
101+
<v-list-item-action v-if="is_admin" class="d-flex align-center">
102+
<div class="d-flex flex-row align-center" style="gap: 8px;">
103+
104+
<v-tooltip top>
105+
<template #activator="{ on, attrs }">
106+
<v-btn icon color="primary" v-bind="attrs" v-on="on" @click.stop="edit(link.id)" >
107+
<v-icon>mdi-pencil</v-icon>
108+
</v-btn>
109+
</template>
110+
<span>Edit</span>
111+
</v-tooltip>
112+
113+
<v-tooltip top>
114+
<template #activator="{ on, attrs }">
115+
<v-btn icon color="error" v-bind="attrs" v-on="on" @click.stop="remove(link.id)">
116+
<v-icon>mdi-delete</v-icon>
117+
</v-btn>
118+
</template>
119+
<span>Delete</span>
120+
</v-tooltip>
121+
</div>
122+
</v-list-item-action>
123+
</v-list-item>
124+
</v-list>
125+
126+
<!-- Add New Button -->
127+
<v-btn v-if="is_admin" color="primary" class="mt-4" @click="add()" outlined>
128+
<v-icon left>mdi-plus</v-icon>
129+
Add New
130+
</v-btn>
131+
132+
</v-col>
133+
</v-row>
134+
135+
</v-card-text>
136+
</div>
137+
</v-card>
138+
</v-col>
139+
</v-row>
140+
141+
<v-dialog v-model="dialog" max-width="500">
142+
<v-card max-height="100%" max-width="99%">
143+
<v-card-title>
144+
{{ isEditing ? 'Edit' : 'Add' }} a resource
145+
</v-card-title>
146+
147+
<v-card-text>
148+
149+
<v-row align="center" justify="center" class="mx-3">
150+
<!-- <v-col cols="12" sm="12" md="4" lg="4" xl="4"> -->
151+
152+
<v-text-field label="Title" v-model="record.title" regular></v-text-field>
153+
<!-- </v-col> -->
154+
155+
</v-row>
156+
157+
<v-row align="center" justify="center" class="mx-3">
158+
159+
160+
<v-text-field label="Link" v-model="record.link" regular ></v-text-field>
161+
162+
</v-row>
163+
</v-card-text>
164+
165+
<v-divider></v-divider>
166+
167+
<v-card-actions class="bg-surface-light">
168+
<v-btn class="my-1" color="warning" rounded dark large @click="dialog = false">Cancel</v-btn>
169+
170+
<v-spacer></v-spacer>
171+
172+
<v-btn class="my-1" color="success" rounded dark large @click="save">Save</v-btn>
173+
</v-card-actions>
174+
</v-card>
175+
</v-dialog>
176+
<v-dialog v-model="deletedialog" max-width="500">
177+
<v-card max-height="100%" max-width="99%">
178+
<v-card-title>
179+
Confirm Delete
180+
</v-card-title>
181+
182+
<v-card-text>
183+
184+
<v-alert
185+
border="bottom"
186+
type="error"
187+
outlined
188+
>
189+
This will delete the record. Please consider carefully!
190+
</v-alert>
191+
</v-card-text>
192+
193+
<v-divider></v-divider>
194+
195+
<v-card-actions class="bg-surface-light">
196+
<v-btn class="my-1" color="warning" rounded dark large @click="deletedialog = false">Cancel</v-btn>
197+
<v-spacer></v-spacer>
198+
199+
<v-btn class="my-1" color="success" rounded dark large @click="agree()">Confirm</v-btn>
200+
</v-card-actions>
201+
</v-card>
202+
</v-dialog>
203+
204+
205+
206+
</div>
207+
</template>
208+
209+
<script>
210+
211+
import Vue from 'vue'
212+
import PreferenceAPI from "@/api/PreferenceAPI"
213+
//import axios from 'axios'
214+
215+
216+
export default {
217+
name: 'Resources',
218+
data() {
219+
return {
220+
links: [],
221+
isEditing: false,
222+
dialog: false,
223+
deletedialog: false,
224+
deleteId:null,
225+
record:[]
226+
227+
228+
229+
}
230+
},
231+
computed:{
232+
is_admin: function() {
233+
let admin = Vue.prototype.$Config.keycloak.admin
234+
console.log(admin)
235+
return this.$keycloak.hasRealmRole(admin)
236+
}
237+
},
238+
mounted: async function() {
239+
this.links = await PreferenceAPI.get_resources()
240+
console.log(this.links)
241+
},
242+
methods: {
243+
async save(){
244+
245+
const payload = {
246+
title: this.record.title,
247+
link: this.record.link
248+
}
249+
if(!this.isEditing) {
250+
console.log("adding new record")
251+
let response= await PreferenceAPI.create_resource(payload)
252+
console.log(response)
253+
}else {
254+
console.log("update a record")
255+
console.log(payload)
256+
console.log(this.record.id)
257+
await PreferenceAPI.update_resource(this.record.id,payload)
258+
}
259+
this.links = await PreferenceAPI.get_resources()
260+
this.dialog = false
261+
262+
},
263+
async edit(id){
264+
console.log(id)
265+
this.record = this.links.find(link => link.id === id)
266+
this.dialog = true
267+
this.isEditing = true
268+
},
269+
async add() {
270+
this.record =[]
271+
this.dialog = true
272+
this.isEditing = false
273+
console.log(this.record)
274+
275+
//this.dialog = false
276+
},
277+
async remove(id){
278+
console.log(id)
279+
this.deleteId = id
280+
this.deletedialog = true
281+
this.isEditing = false
282+
283+
},
284+
async agree(){
285+
console.log( this.deleteId)
286+
let index = this.links.findIndex(link => link.id === this.deleteId)
287+
this.links.splice(index, 1)
288+
await PreferenceAPI.delete_resource(this.deleteId)
289+
this.deletedialog = false
290+
}
291+
}
292+
293+
}
294+
295+
</script>
296+
<style></style>

0 commit comments

Comments
 (0)