Skip to content

Commit fc7c51b

Browse files
akinseyakinsey
committed
feat: implement logic for adding and removing from lists, implement save, fix some css
1 parent cf2719a commit fc7c51b

File tree

1 file changed

+69
-34
lines changed

1 file changed

+69
-34
lines changed

‎src/components/trust/TrustList.vue‎

Lines changed: 69 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,48 @@
33
<h5 v-if="admin" class="thin-underline section-header-top-spacing">Manage Default Trust Lists
44
<span class="info-tooltip" data-balloon="Manages the trust list which all users will inherit for their default trust settings. Trust is important to prevent scamming when there are forums for selling goods and services" data-balloon-pos="down" data-balloon-length="large" data-balloon-break><i class="fa fa-info-circle"></i></span>
55
</h5>
6-
7-
<Multiselect v-model="trustUserInput.value" v-bind="trustUserInput" />
8-
6+
<div class="trust-section">
7+
<Multiselect v-model="trustUserInput.value" v-bind="trustUserInput" />
8+
</div>
99
<!-- <autocomplete-user-id admin="admin" user-id="vm.userToTrust.user_id_trusted" username="vm.userToTrust.username_trusted" input-placeholder="Type username to add to trust/untrust list"></autocomplete-user-id>
1010
-->
11-
<div class="trust-section">
12-
<div class="half-column">
13-
<button class="fill-row" @click="addToTrustList()" :disabled="trustedUserExists()">Add to Trusted Users</button>
14-
</div>
15-
<div class="half-column">
16-
<button class="fill-row" @click="addToUntrustList()" :disabled="untrustedUserExists()">Add to Untrusted Users</button>
17-
</div>
11+
<div class="trust-section split-column">
12+
<button class="fill-row" @click="addToTrustList()" :disabled="trustedUserExists()">Add to Trusted Users</button>
13+
<button class="fill-row" @click="addToUntrustList()" :disabled="untrustedUserExists()">Add to Untrusted Users</button>
1814
</div>
19-
<div class="trust-section">
20-
<div class="half-column">
15+
<div class="trust-section split-column">
16+
<div>
2117
<h5 class="inline-block">Trusted Users
2218
<span class="info-tooltip" data-balloon="Users that you believe are trusted members to deal with" data-balloon-pos="down" data-balloon-length="large" data-balloon-break><i class="fa fa-info-circle"></i></span>
2319
</h5>
2420
<a v-if="selectedTrustedUsers.length" class="remove-active right" href="#" @click.prevent="removeSelectedTrust()"><i class="fa fa-times"></i> Remove Selected</a>
2521
<span v-if="!selectedTrustedUsers.length" class="remove-inactive right"><i class="fa fa-times"></i> Remove Selected</span>
2622
<select id="trustList" class="trust-select" v-model="selectedTrustedUsers" multiple="multiple">
27-
<option :value="user.username_trusted" v-for="user in trustList" :key="user.username_trusted">
23+
<option :value="user" v-for="user in trustListReactive" :key="user.username_trusted">
2824
{{ user.username_trusted }}
2925
</option>
3026
</select>
31-
<!-- <select ng-options="u.username_trusted for u in vm.trustList track by u.username_trusted" ng-model="vm.selectedTrustedUsers" multiple="multiple">
32-
</select> -->
3327
</div>
34-
<div class="half-column">
28+
<div>
3529
<h5 class="inline-block">Untrusted Users
3630
<span class="info-tooltip" data-balloon="Users that are known or are suspected scammers" data-balloon-pos="down" data-balloon-length="large" data-balloon-break><i class="fa fa-info-circle"></i></span>
3731
</h5>
3832
<a v-if="selectedUntrustedUsers.length" class="remove-active right" href="#" @click.prevent="removeSelectedUntrust()"><i class="fa fa-times"></i> Remove Selected</a>
3933
<span v-if="!selectedUntrustedUsers.length" class="remove-inactive right"><i class="fa fa-times"></i> Remove Selected</span>
4034
<select id="untrustList" class="trust-select" v-model="selectedUntrustedUsers" multiple="multiple">
41-
<option :value="user.username_trusted" v-for="user in untrustList" :key="user.username_trusted">
35+
<option :value="user" v-for="user in untrustListReactive" :key="user.username_trusted">
4236
{{ user.username_trusted }}
4337
</option>
4438
</select>
4539
</div>
4640
</div>
47-
<div class="trust-section">
48-
<div class="half-column">
41+
<div class="trust-section split-column">
42+
<div>
4943
<label v-if="!admin" for="maxdepth">Trust Depth (max 4): </label>
5044
<input v-if="!admin" id="maxdepth" name="maxdepth" placeholder="Trust Depth (max 4)" type="number" min="0" max="4" v-model="maxDepth" />
5145
<span v-if="admin">&nbsp;</span>
5246
</div>
53-
<div class="half-column">
47+
<div>
5448
<button class="right trust-button" @click="editTrustList()"><i class="fa fa-save"></i> Save Trust Settings</button>
5549
</div>
5650
</div>
@@ -67,27 +61,55 @@ export default {
6761
props: [ 'admin', 'trustList', 'untrustList', 'max' ],
6862
emits: ['success'],
6963
components: { Multiselect },
70-
setup(props) {
64+
setup(props, { emit }) {
65+
const editTrustList = () => {
66+
let params = {
67+
max_depth: v.maxDepth >= 0 && v.maxDepth <= 4 ? v.maxDepth : 2,
68+
list: v.trustListReactive.concat(v.untrustListReactive)
69+
}
70+
let editTrustListPromise = v.admin ? usersApi.trust.editDefaultTrustList(params) : usersApi.trust.editTrustList(params)
71+
editTrustListPromise.then(updatedLists => {
72+
v.trustListReactive = updatedLists.trustList;
73+
v.untrustListReactive = updatedLists.untrustList;
74+
v.maxDepth = updatedLists.maxDepth;
75+
emit('success')
76+
})
77+
}
78+
79+
const addToTrustList = () => {
80+
v.trustUserInput.value.forEach(u => {
81+
if (!u.user_id_trusted || !u.username_trusted) return
82+
v.untrustListReactive = v.untrustListReactive.filter(ul => ul.user_id_trusted !== u.user_id_trusted)
83+
v.trustListReactive.push({ ...u, type: 0})
84+
})
85+
v.trustUserInput.value = []
86+
}
87+
const addToUntrustList = () => {
88+
v.trustUserInput.value.forEach(u => {
89+
if (!u.user_id_trusted || !u.username_trusted) return
90+
v.trustListReactive = v.trustListReactive.filter(ul => ul.user_id_trusted !== u.user_id_trusted)
91+
v.untrustListReactive.push({ ...u, type: 1})
92+
})
93+
v.trustUserInput.value = []
94+
}
95+
const removeSelectedTrust = () => v.trustListReactive = v.trustListReactive.filter(user => v.selectedTrustedUsers.filter(u => u.user_id_trusted === user.user_id_trusted).length === 0)
96+
97+
const removeSelectedUntrust = () => v.untrustListReactive = v.untrustListReactive.filter(user => v.selectedUntrustedUsers.filter(u => u.user_id_trusted === user.user_id_trusted).length === 0)
7198
72-
const editTrustList = () => console.log('editTrustList')
73-
const addToTrustList = () => console.log('addToTrustList')
74-
const addToUntrustList = () => console.log('addToUntrustList')
75-
const removeSelectedTrust = () => console.log('removeSelectedTrust')
76-
const removeSelectedUntrust = () => console.log('removeSelectedUntrust')
7799
const trustedUserExists = () => {
78100
if (v.trustUserInput.value.length < 1) return true
79-
return v.trustUserInput.value.length !== v.trustUserInput.value.filter(u => !v.trustList.find(o => o.username_trusted === u)).length
101+
return v.trustUserInput.value.length !== v.trustUserInput.value.filter(u => !v.trustListReactive.find(o => o.username_trusted === u.username_trusted)).length
80102
}
81103
const untrustedUserExists = () => {
82104
if (v.trustUserInput.value.length < 1) return true
83-
return v.trustUserInput.value.length !== v.trustUserInput.value.filter(u => !v.untrustList.find(o => o.username_trusted === u)).length
105+
return v.trustUserInput.value.length !== v.trustUserInput.value.filter(u => !v.untrustListReactive.find(o => o.username_trusted === u.username_trusted)).length
84106
}
85107
86108
let v = reactive({
87109
admin: props.admin,
88110
userToTrust: {},
89-
trustList: props?.trustList || [],
90-
untrustList: props?.untrustList || [],
111+
trustListReactive: props?.trustList || [],
112+
untrustListReactive: props?.untrustList || [],
91113
maxDepth: props.max,
92114
selectedTrustedUsers: [],
93115
selectedUntrustedUsers: [],
@@ -102,22 +124,35 @@ export default {
102124
searchable: true,
103125
maxHeight: 100,
104126
options: async q => {
105-
return await usersApi.search(q)
127+
return await usersApi.lookup(q, { restricted: true })
106128
// convert array into array of objects
107-
.then(d => d.reduce((o, k) => (o[k] = k, o), {}))
129+
.then(d => d.map(u =>{ return { label: u.username, value: { username_trusted: u.username, user_id_trusted: u.id } } }))
130+
.catch(() => { return [] })
108131
}
109132
}
110133
})
111134
112135
watch(() => props.max, m => v.maxDepth = m)
113-
watch(() => props.trustList, l => v.trustList = l)
114-
watch(() => props.untrustList, l => v.untrustList = l)
136+
watch(() => props.trustList, l => v.trustListReactive = l)
137+
watch(() => props.untrustList, l => v.untrustListReactive = l)
115138
116139
return { ...toRefs(v), editTrustList, addToTrustList, addToUntrustList, removeSelectedTrust, removeSelectedUntrust, trustedUserExists, untrustedUserExists }
117140
}
118141
}
119142
</script>
120143

121144
<style scoped lang="scss">
145+
.trust-section { margin-bottom: .5rem; }
146+
.split-column {
147+
display: grid;
148+
grid-template-columns: 1fr 1fr;
149+
column-gap: .5rem;
150+
@include break-mobile-sm {
151+
grid-template-columns: 1fr;
152+
}
153+
}
122154
155+
.trust-button {
156+
margin-top: 1rem;
157+
}
123158
</style>

0 commit comments

Comments
 (0)