Skip to content

Commit 40165d1

Browse files
AndrewKostkaAndrewKostka
committed
Add profile card to wiki dashboard
1 parent 7900c71 commit 40165d1

2 files changed

Lines changed: 186 additions & 1 deletion

File tree

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

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
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+
},
57+
audience: {
58+
wide: 'Anyone interested.',
59+
narrow: 'Myself or my organization.'
60+
},
61+
temporality: {
62+
permanent: 'I would prefer to keep it on a permanent basis.',
63+
temporary: 'It is temporary/disposable. I will no longer need it after it served its purpose.'
64+
}
65+
}
66+
67+
export default {
68+
name: 'Profile',
69+
components: {
70+
Message
71+
},
72+
props: [
73+
'wikiId'
74+
],
75+
data () {
76+
return {
77+
profile: {}
78+
}
79+
},
80+
computed: {
81+
hasProfile: function () {
82+
return !!this.profile.updated_at
83+
},
84+
hasAudience: function () {
85+
return !!this.profile.audience
86+
},
87+
isWikiTemporary: function () {
88+
return this.profile.temporality === 'temporary'
89+
},
90+
updatedAt: function () {
91+
if (this.profile.updated_at) {
92+
return `Last updated on ${new Date(this.profile.updated_at).toLocaleString()}`
93+
}
94+
}
95+
},
96+
methods: {
97+
getQuestionResponse(question) {
98+
const customResponse = this.profile[question + '_other']
99+
if (customResponse) {
100+
return `Other: ${customResponse}`
101+
}
102+
const providedResponse = this.profile[question]
103+
if (providedResponse) {
104+
return providedResponses[question][providedResponse]
105+
}
106+
return 'No answer selected'
107+
}
108+
},
109+
async created () {
110+
try {
111+
const details = await this.$api.wikiDetails({ wiki: this.wikiId })
112+
this.profile = details.wiki_latest_profile ?? {}
113+
} catch (error) {
114+
console.log(error)
115+
this.$refs.message.show('error', 'Something went wrong with fetching your intended use.')
116+
}
117+
}
118+
}
119+
</script>
120+
121+
<style lang="css" scoped>
122+
.card-title {
123+
display: flex;
124+
flex-wrap: wrap-reverse;
125+
gap: 0 24px;
126+
}
127+
.card-title > span {
128+
flex-grow: 1;
129+
}
130+
.card-title .v-icon {
131+
cursor: pointer;
132+
}
133+
.v-card > .v-card__text {
134+
padding-top: 0;
135+
}
136+
.no-profile-banner {
137+
background-color: rgba(255, 236, 179, 1);
138+
border-radius: 4px;
139+
padding: 8px 16px;
140+
font-size: 16px;
141+
}
142+
.no-profile-banner > .v-icon {
143+
float: left;
144+
margin-right: 16px;
145+
}
146+
.profile {
147+
border-radius: 4px;
148+
background-color: rgba(238, 238, 238, 1);
149+
padding: 16px;
150+
color: rgba(0, 0, 0, 0.87);
151+
}
152+
.profile > :first-child {
153+
margin-top: 0;
154+
}
155+
.profile > :not(:first-child) {
156+
margin-top: 16px;
157+
margin-bottom: 16px;
158+
}
159+
.profile > :last-child {
160+
margin-bottom: 0;
161+
}
162+
.profile .question {
163+
font-size: 16px;
164+
font-weight: 500;
165+
}
166+
.profile .response {
167+
font-size: 16px;
168+
font-weight: 700;
169+
}
170+
.delete-wiki {
171+
color: rgba(191, 54, 12, 1);
172+
font-size: 14px;
173+
}
174+
.updated-at {
175+
font-size: 12px;
176+
font-style: italic;
177+
}
178+
</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)