btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: lint

Browse Source
This commit is contained in:
liyasthomas
2021-05-18 14:57:29 +05:30
parent 7f248da0b3
commit cc27c552af
84 changed files with 1444 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/teams/Add.vue
View File

@@ -18,8 +18,8 @@
<ul>
<li>
<input
type="text"
v-model="name"
type="text"
:placeholder="$t('my_new_team')"
@keyup.enter="addNewTeam"
/>
@@ -43,7 +43,7 @@
</template>
<script>
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
@@ -67,9 +67,9 @@ export default {
return
}
// Call to the graphql mutation
team_utils
teamUtils
.createTeam(this.$apollo, name)
.then((data) => {
.then(() => {
// Result
this.hideModal()
})

131
components/teams/Edit.vue
View File

@@ -18,8 +18,8 @@
<ul>
<li>
<input
type="text"
v-model="name"
type="text"
:placeholder="editingTeam.name"
@keyup.enter="saveTeam"
/>
@@ -60,22 +60,38 @@
<input
:placeholder="$t('permissions')"
:name="'value' + index"
:value="typeof member.role === 'string' ? member.role : JSON.stringify(member.role)"
:value="
typeof member.role === 'string'
? member.role
: JSON.stringify(member.role)
"
readonly
/>
<template slot="popover">
<div>
<button class="icon" v-close-popover @click="updateRole(index, 'OWNER')">
<button
v-close-popover
class="icon"
@click="updateRole(index, 'OWNER')"
>
OWNER
</button>
</div>
<div>
<button class="icon" v-close-popover @click="updateRole(index, 'EDITOR')">
<button
v-close-popover
class="icon"
@click="updateRole(index, 'EDITOR')"
>
EDITOR
</button>
</div>
<div>
<button class="icon" v-close-popover @click="updateRole(index, 'VIEWER')">
<button
v-close-popover
class="icon"
@click="updateRole(index, 'VIEWER')"
>
VIEWER
</button>
</div>
@@ -86,10 +102,10 @@
<div>
<li>
<button
id="member"
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeExistingTeamMember(member.user.uid)"
v-tooltip.bottom="$t('delete')"
id="member"
>
<i class="material-icons">delete</i>
</button>
@@ -110,9 +126,9 @@
>
<li>
<input
v-model="member.key"
:placeholder="$t('email')"
:name="'param' + index"
v-model="member.key"
autofocus
/>
</li>
@@ -123,23 +139,37 @@
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string' ? member.value : JSON.stringify(member.value)
typeof member.value === 'string'
? member.value
: JSON.stringify(member.value)
"
readonly
/>
<template slot="popover">
<div>
<button class="icon" v-close-popover @click="member.value = 'OWNER'">
<button
v-close-popover
class="icon"
@click="member.value = 'OWNER'"
>
OWNER
</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.value = 'EDITOR'">
<button
v-close-popover
class="icon"
@click="member.value = 'EDITOR'"
>
EDITOR
</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.value = 'VIEWER'">
<button
v-close-popover
class="icon"
@click="member.value = 'VIEWER'"
>
VIEWER
</button>
</div>
@@ -150,10 +180,10 @@
<div>
<li>
<button
id="member"
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeTeamMember(index)"
v-tooltip.bottom="$t('delete')"
id="member"
>
<i class="material-icons">delete</i>
</button>
@@ -186,15 +216,15 @@
</template>
<script>
import * as team_utils from "~/helpers/teams/utils"
import cloneDeep from "lodash/cloneDeep"
import * as teamUtils from "~/helpers/teams/utils"
import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
export default {
props: {
show: Boolean,
editingTeam: Object,
editingteamID: String,
editingTeam: { type: Object, default: () => {} },
editingteamID: { type: String, default: null },
},
data() {
return {
@@ -205,16 +235,6 @@ export default {
membersAdapter: new TeamMemberAdapter(null),
}
},
mounted() {
this.membersAdapter.members$.subscribe((list) => {
this.members = cloneDeep(list)
})
},
watch: {
editingteamID(teamID) {
this.membersAdapter.changeTeamID(teamID)
},
},
computed: {
editingTeamCopy() {
return this.editingTeam
@@ -228,18 +248,28 @@ export default {
},
},
},
watch: {
editingteamID(teamID) {
this.membersAdapter.changeTeamID(teamID)
},
},
mounted() {
this.membersAdapter.members$.subscribe((list) => {
this.members = cloneDeep(list)
})
},
methods: {
updateRole(id, role) {
this.members[id].role = role
},
addTeamMember() {
let value = { key: "", value: "" }
const value = { key: "", value: "" }
this.newMembers.push(value)
},
removeExistingTeamMember(userID) {
team_utils
teamUtils
.removeTeamMember(this.$apollo, userID, this.editingteamID)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("user_removed"), {
icon: "done",
@@ -258,13 +288,20 @@ export default {
this.newMembers.splice(index, 1)
},
validateEmail(emailID) {
if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(emailID)) {
if (
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
emailID
)
) {
return true
}
return false
},
saveTeam() {
if (this.$data.rename !== null && this.$data.rename.replace(/\s/g, "").length < 6) {
if (
this.$data.rename !== null &&
this.$data.rename.replace(/\s/g, "").length < 6
) {
this.$toast.error(this.$t("string_length_insufficient"), {
icon: "error",
})
@@ -275,14 +312,18 @@ export default {
this.$toast.error(this.$t("invalid_emailID_format"), {
icon: "error",
})
return
}
})
this.$data.newMembers.forEach((element) => {
// Call to the graphql mutation
team_utils
.addTeamMemberByEmail(this.$apollo, element.value, element.key, this.editingteamID)
.then((data) => {
teamUtils
.addTeamMemberByEmail(
this.$apollo,
element.value,
element.key,
this.editingteamID
)
.then(() => {
// Result
this.$toast.success(this.$t("team_saved"), {
icon: "done",
@@ -299,9 +340,14 @@ export default {
})
let messageShown = true
this.members.forEach((element) => {
team_utils
.updateTeamMemberRole(this.$apollo, element.user.uid, element.role, this.editingteamID)
.then((data) => {
teamUtils
.updateTeamMemberRole(
this.$apollo,
element.user.uid,
element.role,
this.editingteamID
)
.then(() => {
// Result
if (messageShown) {
this.$toast.success(this.$t("role_updated"), {
@@ -323,16 +369,17 @@ export default {
})
})
if (this.$data.rename !== null) {
const newName = this.name === this.$data.rename ? this.name : this.$data.rename
const newName =
this.name === this.$data.rename ? this.name : this.$data.rename
if (!/\S/.test(newName))
return this.$toast.error(this.$t("team_name_empty"), {
icon: "error",
})
// Call to the graphql mutation
if (this.name !== this.rename)
team_utils
teamUtils
.renameTeam(this.$apollo, newName, this.editingteamID)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("team_saved"), {
icon: "done",

57
components/teams/Team.vue
View File

@@ -2,42 +2,45 @@
<div class="row-wrapper">
<div>
<button
v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
class="icon"
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
>
<i class="material-icons">group</i>
<span>{{ team.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<button v-tooltip.left="$t('more')" class="tooltip-target icon">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div v-if="team.myRole === 'OWNER'">
<button class="icon" @click="$emit('edit-team')" v-close-popover>
<button v-close-popover class="icon" @click="$emit('edit-team')">
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div v-if="team.myRole === 'OWNER'">
<button class="icon" @click="deleteTeam" v-close-popover>
<button v-close-popover class="icon" @click="deleteTeam">
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<div>
<button
class="icon"
@click="exitTeam"
v-close-popover
class="icon"
:disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
@click="exitTeam"
>
<i class="material-icons">remove</i>
<div
v-tooltip.left="{
content: team.myRole === 'OWNER' && team.ownersCount == 1 ? $t('disable_exit') : '',
content:
team.myRole === 'OWNER' && team.ownersCount == 1
? $t('disable_exit')
: '',
}"
>
<span>{{ $t("exit") }}</span>
@@ -49,34 +52,21 @@
</div>
</template>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>
<script>
import * as team_utils from "~/helpers/teams/utils"
import * as teamUtils from "~/helpers/teams/utils"
export default {
props: {
team: Object,
teamID: String,
team: { type: Object, default: () => {} },
teamID: { type: String, default: null },
},
methods: {
deleteTeam() {
if (!confirm("Are you sure you want to remove this team?")) return
// Call to the graphql mutation
team_utils
teamUtils
.deleteTeam(this.$apollo, this.teamID)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("new_team_created"), {
icon: "done",
@@ -92,9 +82,9 @@ export default {
},
exitTeam() {
if (!confirm("Are you sure you want to exit this team?")) return
team_utils
teamUtils
.exitTeam(this.$apollo, this.teamID)
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("team_exited"), {
icon: "done",
@@ -111,3 +101,16 @@ export default {
},
}
</script>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>

52
components/teams/index.vue
View File

@@ -1,5 +1,11 @@
<template>
<AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
<AppSection
ref="teams"
class="green"
icon="history"
:label="$t('teams')"
no-legend
>
<div class="flex flex-col">
<label>{{ $t("teams") }}</label>
<div v-if="fb.currentUser"></div>
@@ -15,8 +21,8 @@
<TeamsEdit
:team="myTeams[0]"
:show="showModalEdit"
:editingTeam="editingTeam"
:editingteamID="editingteamID"
:editing-team="editingTeam"
:editingteam-i-d="editingteamID"
@hide-modal="displayModalEdit(false)"
/>
<div class="row-wrapper">
@@ -27,31 +33,26 @@
</button>
</div>
</div>
<p v-if="$apollo.queries.myTeams.loading" class="info">{{ $t("loading") }}</p>
<p v-if="$apollo.queries.myTeams.loading" class="info">
{{ $t("loading") }}
</p>
<p v-if="myTeams.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
</p>
<div v-else class="virtual-list">
<ul class="flex-col">
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
<TeamsTeam :teamID="team.id" :team="team" @edit-team="editTeam(team, team.id)" />
<TeamsTeam
:team-i-d="team.id"
:team="team"
@edit-team="editTeam(team, team.id)"
/>
</li>
</ul>
</div>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 241px);
}
ul {
display: flex;
flex-direction: column;
}
</style>
<script>
import gql from "graphql-tag"
import { fb } from "~/helpers/fb"
@@ -102,6 +103,9 @@ export default {
pollInterval: 10000,
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
@@ -113,7 +117,7 @@ export default {
},
editTeam(team, teamID) {
this.editingTeam = team
this.editingteamID = team.id
this.editingteamID = teamID
this.displayModalEdit(true)
},
resetSelectedData() {
@@ -121,8 +125,16 @@ export default {
this.$data.editingteamID = undefined
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 241px);
}
ul {
display: flex;
flex-direction: column;
}
</style>