Skip to content

Commit aacdd27

Browse files
AndrewKostkaAndrewKostka
authored
Add profile card to wiki dashboard (#976)
1 parent 7900c71 commit aacdd27

2 files changed

Lines changed: 189 additions & 1 deletion

File tree

‎src/components/Pages/ManageWiki/Cards/Profile.vue‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<template>
2+
<v-form ref="form">
3+
<v-card>
4+
<v-card-title class="card-title">
5+
<span>Intended use</span>
6+
<v-tooltip top>
7+
<template v-slot:activator="{ on }">
8+
<v-icon v-on="on">mdi-information-outline</v-icon>
9+
</template>
10+
<span>The information provided here will allow potential contributors and data re-users to identify instances that are intended for broader use.</span>
11+
</v-tooltip>
12+
</v-card-title>
13+
<v-card-text>
14+
This information describes how you intend to use this Wikibase. Please update it when it changes. It will be visible to all users exploring Wikibases in the ecosystem.
15+
</v-card-text>
16+
<v-card-text v-if="!hasProfile">
17+
<div class="no-profile-banner">
18+
<v-icon>mdi-information-outline</v-icon>
19+
<div>No intended use selected for this instance. Please provide information on intended use.</div>
20+
</div>
21+
</v-card-text>
22+
<v-card-text>
23+
<div class="profile">
24+
<div>
25+
<div class="question">What best describes how you intend to use this Wikibase?</div>
26+
<div class="response">{{ getQuestionResponse('purpose') }}</div>
27+
</div>
28+
<div v-if="hasAudience">
29+
<div class="question">Who is the intended audience for this data?</div>
30+
<div class="response">{{ getQuestionResponse('audience') }}</div>
31+
</div>
32+
<div>
33+
<div class="question">How long do you plan to use this Wikibase?</div>
34+
<div class="response">{{ getQuestionResponse('temporality') }}</div>
35+
<div v-if="isWikiTemporary" class="delete-wiki">
36+
Please make sure to delete this Wikibase when you no longer need it.
37+
</div>
38+
</div>
39+
</div>
40+
<span v-if="updatedAt" class="updated-at">{{ updatedAt }}</span>
41+
</v-card-text>
42+
<Message ref="message" />
43+
</v-card>
44+
</v-form>
45+
</template>
46+
47+
<script>
48+
import Message from '../Features/Message.vue'
49+
50+
const providedResponses = {
51+
purpose: {
52+
data_hub: 'To publish potentially useful data.',
53+
data_lab: 'To refine, back up, or experiment with data in an isolated environment.',
54+
tool_lab: 'To build tools, write documentation, or contribute to the Wikidata & Wikibase ecosystem in ways other than data.',
55+
test_drive: 'To learn about the tool, or evaluate whether it works for my use case.',
56+
decide_later: 'I will decide later.'
57+
},
58+
audience: {
59+
wide: 'Anyone interested.',
60+
narrow: 'Myself or my organization.'
61+
},
62+
temporality: {
63+
permanent: 'I would prefer to keep it on a permanent basis.',
64+
temporary: 'It is temporary/disposable. I will no longer need it after it served its purpose.',
65+
decide_later: 'I will decide later.'
66+
}
67+
}
68+
69+
export default {
70+
name: 'Profile',
71+
components: {
72+
Message
73+
},
74+
props: [
75+
'wikiId'
76+
],
77+
data () {
78+
return {
79+
profile: {}
80+
}
81+
},
82+
computed: {
83+
hasProfile: function () {
84+
return !!this.profile.updated_at
85+
},
86+
hasAudience: function () {
87+
return !!this.profile.audience
88+
},
89+
isWikiTemporary: function () {
90+
return this.profile.temporality === 'temporary'
91+
},
92+
updatedAt: function () {
93+
if (this.profile.updated_at) {
94+
return `Last updated on ${new Date(this.profile.updated_at).toLocaleString()}`
95+
}
96+
return false
97+
}
98+
},
99+
methods: {
100+
getQuestionResponse (question) {
101+
const customResponse = this.profile[question + '_other']
102+
if (customResponse) {
103+
return `Other: ${customResponse}`
104+
}
105+
const providedResponse = this.profile[question]
106+
if (providedResponse) {
107+
return providedResponses[question][providedResponse]
108+
}
109+
return 'No answer selected.'
110+
}
111+
},
112+
async created () {
113+
try {
114+
const details = await this.$api.wikiDetails({ wiki: this.wikiId })
115+
this.profile = details.wiki_latest_profile ?? {}
116+
} catch (error) {
117+
console.log(error)
118+
this.$refs.message.show('error', 'Something went wrong with fetching your intended use.')
119+
}
120+
}
121+
}
122+
</script>
123+
124+
<style lang="css" scoped>
125+
.card-title {
126+
display: flex;
127+
flex-wrap: wrap-reverse;
128+
gap: 0 24px;
129+
}
130+
.card-title > span {
131+
flex-grow: 1;
132+
}
133+
.card-title .v-icon {
134+
cursor: pointer;
135+
}
136+
.v-card > .v-card__text {
137+
padding-top: 0;
138+
}
139+
.no-profile-banner {
140+
background-color: rgba(255, 236, 179, 1);
141+
border-radius: 4px;
142+
padding: 8px 16px;
143+
font-size: 16px;
144+
}
145+
.no-profile-banner > .v-icon {
146+
float: left;
147+
margin-right: 16px;
148+
}
149+
.profile {
150+
border-radius: 4px;
151+
background-color: rgba(238, 238, 238, 1);
152+
padding: 16px;
153+
color: rgba(0, 0, 0, 0.87);
154+
}
155+
.profile > :first-child {
156+
margin-top: 0;
157+
}
158+
.profile > :not(:first-child) {
159+
margin-top: 16px;
160+
margin-bottom: 16px;
161+
}
162+
.profile > :last-child {
163+
margin-bottom: 0;
164+
}
165+
.profile .question {
166+
font-size: 16px;
167+
font-weight: 400;
168+
}
169+
.profile .response {
170+
font-size: 16px;
171+
font-weight: 700;
172+
}
173+
.delete-wiki {
174+
color: rgba(191, 54, 12, 1);
175+
font-size: 14px;
176+
}
177+
.updated-at {
178+
font-size: 12px;
179+
font-style: italic;
180+
}
181+
</style>

‎src/components/Pages/ManageWiki/Tabs/ManageProfile.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,24 @@
66
<Details :wikiId="this.wikiId"/>
77
</v-col>
88
</v-row>
9+
<v-row>
10+
<v-col class="card-column">
11+
<Profile :wikiId="this.wikiId"/>
12+
</v-col>
13+
</v-row>
914
</v-container>
1015
</v-main>
1116
</template>
1217

1318
<script>
1419
import Details from '~/components/Pages/ManageWiki/Cards/Details'
20+
import Profile from '~/components/Pages/ManageWiki/Cards/Profile'
1521
1622
export default {
1723
name: 'ManageWiki',
1824
components: {
19-
Details
25+
Details,
26+
Profile
2027
},
2128
computed: {
2229
wikiId: function () {

0 commit comments

Comments
 (0)