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

95
components/http/BodyParameters.vue
View File

@@ -6,9 +6,9 @@
<label for="reqParamList">{{ $t("request_body") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent('bodyParams', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -34,9 +34,9 @@
:placeholder="`key ${index + 1}`"
:name="`bparam ${index}`"
:value="param.key"
autofocus
@change="updateBodyParams($event, index, `setKeyBodyParams`)"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
@@ -66,8 +66,6 @@
<div>
<li>
<button
class="icon"
@click="toggleActive(index, param)"
v-tooltip.bottom="{
content: param.hasOwnProperty('active')
? param.active
@@ -75,6 +73,8 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon"
@click="toggleActive(index, param)"
>
<i class="material-icons">
{{
@@ -91,7 +91,10 @@
<div v-if="contentType === 'multipart/form-data'">
<li>
<label for="attachment" class="p-0">
<button class="w-full icon" @click="$refs.attachment[index].click()">
<button
class="w-full icon"
@click="$refs.attachment[index].click()"
>
<i class="material-icons">attach_file</i>
</button>
</label>
@@ -99,17 +102,17 @@
ref="attachment"
name="attachment"
type="file"
@change="setRequestAttachment($event, index)"
multiple
@change="setRequestAttachment($event, index)"
/>
</li>
</div>
<div>
<li>
<button
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeRequestBodyParam(index)"
v-tooltip.bottom="$t('delete')"
>
<i class="material-icons">delete</i>
</button>
@@ -118,7 +121,7 @@
</ul>
<ul>
<li>
<button class="icon" @click="addRequestBodyParam" name="addrequest">
<button class="icon" name="addrequest" @click="addRequestBodyParam">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
@@ -127,26 +130,16 @@
</div>
</template>
<style scoped lang="scss">
.file-chips-container {
@apply flex;
@apply flex-1;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;
.file-chips-wrapper {
@apply flex;
@apply w-0;
}
}
</style>
<script>
export default {
props: {
bodyParams: { type: Array, default: () => [] },
},
computed: {
contentType() {
return this.$store.state.request.contentType
},
},
methods: {
clearContent(bodyParams, $event) {
this.$emit("clear-content", bodyParams, $event)
@@ -157,7 +150,10 @@ export default {
removeRequestBodyParam(index) {
const paramArr = this.$store.state.request.bodyParams.filter(
(item, itemIndex) =>
itemIndex !== index && (item.hasOwnProperty("active") ? item.active == true : true)
itemIndex !== index &&
(Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true)
)
this.setRawParams(paramArr)
this.$emit("remove-request-body-param", index)
@@ -188,26 +184,34 @@ export default {
index,
value: event.target.value,
})
let paramArr = this.$store.state.request.bodyParams.filter((item) =>
item.hasOwnProperty("active") ? item.active == true : true
const paramArr = this.$store.state.request.bodyParams.filter((item) =>
Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true
)
this.setRawParams(paramArr)
},
toggleActive(index, param) {
let paramArr = this.$store.state.request.bodyParams.filter((item, itemIndex) => {
if (index === itemIndex) {
return !param.active
} else {
return item.hasOwnProperty("active") ? item.active == true : true
const paramArr = this.$store.state.request.bodyParams.filter(
(item, itemIndex) => {
if (index === itemIndex) {
return !param.active
} else {
return Object.prototype.hasOwnProperty.call(item, "active")
? item.active === true
: true
}
}
})
)
this.setRawParams(paramArr)
this.$store.commit("setActiveBodyParams", {
index,
value: param.hasOwnProperty("active") ? !param.active : false,
value: Object.prototype.hasOwnProperty.call(param, "active")
? !param.active
: false,
})
},
setRawParams(filteredParamArr) {
@@ -219,13 +223,26 @@ export default {
}
})
const rawParamsStr = JSON.stringify(rawParams, null, 2)
this.$store.commit("setState", { value: rawParamsStr, attribute: "rawParams" })
},
},
computed: {
contentType() {
return this.$store.state.request.contentType
this.$store.commit("setState", {
value: rawParamsStr,
attribute: "rawParams",
})
},
},
}
</script>
<style scoped lang="scss">
.file-chips-container {
@apply flex;
@apply flex-1;
@apply whitespace-nowrap;
@apply overflow-auto;
@apply bg-bgDarkColor;
.file-chips-wrapper {
@apply flex;
@apply w-0;
}
}
</style>

23
components/http/CodegenModal.vue
View File

@@ -14,7 +14,9 @@
<label for="requestType">{{ $t("choose_language") }}</label>
<span class="select-wrapper">
<v-popover>
<pre v-if="requestType">{{ codegens.find((x) => x.id === requestType).name }}</pre>
<pre v-if="requestType">{{
codegens.find((x) => x.id === requestType).name
}}</pre>
<input
v-else
id="requestType"
@@ -26,7 +28,11 @@
/>
<template slot="popover">
<div v-for="gen in codegens" :key="gen.id">
<button class="icon" @click="requestType = gen.id" v-close-popover>
<button
v-close-popover
class="icon"
@click="requestType = gen.id"
>
{{ gen.name }}
</button>
</div>
@@ -37,10 +43,10 @@
<label for="generatedCode">{{ $t("generated_code") }}</label>
<div>
<button
class="icon"
@click="copyRequestCode"
ref="copyRequestCode"
v-tooltip="$t('copy_code')"
class="icon"
@click="copyRequestCode"
>
<i class="material-icons">content_copy</i>
</button>
@@ -48,6 +54,7 @@
</div>
<SmartAceEditor
v-if="requestType"
ref="generatedCode"
:value="requestCode"
:lang="codegens.find((x) => x.id === requestType).language"
:options="{
@@ -60,7 +67,6 @@
useWorker: false,
}"
styles="rounded-b-lg"
ref="generatedCode"
/>
</div>
</SmartModal>
@@ -72,7 +78,7 @@ import { codegens } from "~/helpers/codegen/codegen"
export default {
props: {
show: Boolean,
requestCode: String,
requestCode: { type: String, default: "" },
requestTypeProp: { type: String, default: "curl" },
},
data() {
@@ -107,7 +113,10 @@ export default {
this.$refs.generatedCode.editor.selectAll()
this.$refs.generatedCode.editor.focus()
document.execCommand("copy")
setTimeout(() => (this.$refs.copyRequestCode.innerHTML = this.copyButton), 1000)
setTimeout(
() => (this.$refs.copyRequestCode.innerHTML = this.copyButton),
1000
)
},
},
}

26
components/http/Headers.vue
View File

@@ -1,14 +1,14 @@
<template>
<AppSection label="Headers" ref="headers" no-legend>
<AppSection ref="headers" label="Headers" no-legend>
<ul v-if="headers.length !== 0">
<li>
<div class="row-wrapper">
<label for="headerList">{{ $t("header_list") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent('headers', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -35,6 +35,7 @@
:source="commonHeaders"
:spellcheck="false"
:value="header.key"
autofocus
@input="
$store.commit('setKeyHeader', {
index,
@@ -42,7 +43,6 @@
})
"
@keyup.prevent="setRouteQueryState"
autofocus
/>
</li>
<li>
@@ -62,13 +62,6 @@
<div>
<li>
<button
class="icon"
@click="
$store.commit('setActiveHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
v-tooltip.bottom="{
content: header.hasOwnProperty('active')
? header.active
@@ -76,6 +69,13 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon"
@click="
$store.commit('setActiveHeader', {
index,
value: header.hasOwnProperty('active') ? !header.active : false,
})
"
>
<i class="material-icons">
{{
@@ -91,7 +91,11 @@
</div>
<div>
<li>
<button class="icon" @click="removeRequestHeader(index)" v-tooltip.bottom="$t('delete')">
<button
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeRequestHeader(index)"
>
<i class="material-icons">delete</i>
</button>
</li>

7
components/http/ImportCurl.vue
View File

@@ -11,7 +11,12 @@
</div>
</div>
<div slot="body" class="flex flex-col">
<textarea id="import-curl" autofocus rows="8" :placeholder="$t('enter_curl')"></textarea>
<textarea
id="import-curl"
autofocus
rows="8"
:placeholder="$t('enter_curl')"
></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">

2
components/http/Notes.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection :label="$t('notes')" ref="sync" no-legend>
<AppSection ref="sync" :label="$t('notes')" no-legend>
<div v-if="fb.currentUser">
<FirebaseInputform />
<FirebaseFeeds />

26
components/http/Parameters.vue
View File

@@ -1,14 +1,14 @@
<template>
<AppSection label="Parameters" ref="parameters" no-legend>
<AppSection ref="parameters" label="Parameters" no-legend>
<ul v-if="params.length !== 0">
<li>
<div class="row-wrapper">
<label for="paramList">{{ $t("parameter_list") }}</label>
<div>
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent('parameters', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -34,13 +34,13 @@
:placeholder="$t('parameter_count', { count: index + 1 })"
:name="'param' + index"
:value="param.key"
autofocus
@change="
$store.commit('setKeyParams', {
index,
value: $event.target.value,
})
"
autofocus
/>
</li>
<li>
@@ -79,13 +79,6 @@
<div>
<li>
<button
class="icon"
@click="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
v-tooltip.bottom="{
content: param.hasOwnProperty('active')
? param.active
@@ -93,6 +86,13 @@
: $t('turn_on')
: $t('turn_off'),
}"
class="icon"
@click="
$store.commit('setActiveParams', {
index,
value: param.hasOwnProperty('active') ? !param.active : false,
})
"
>
<i class="material-icons">
{{
@@ -108,7 +108,11 @@
</div>
<div>
<li>
<button class="icon" @click="removeRequestParam(index)" v-tooltip.bottom="$t('delete')">
<button
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeRequestParam(index)"
>
<i class="material-icons">delete</i>
</button>
</li>

25
components/http/RawBody.vue
View File

@@ -6,24 +6,33 @@
<label for="rawBody">{{ $t("raw_request_body") }}</label>
<div>
<button
class="icon"
ref="prettifyRequest"
@click="prettifyRequestBody"
v-tooltip="$t('prettify_body')"
v-if="rawInput && contentType.endsWith('json')"
ref="prettifyRequest"
v-tooltip="$t('prettify_body')"
class="icon"
@click="prettifyRequestBody"
>
<i class="material-icons">photo_filter</i>
</button>
<label for="payload" class="p-0">
<button class="icon" @click="$refs.payload.click()" v-tooltip="$t('import_json')">
<button
v-tooltip="$t('import_json')"
class="icon"
@click="$refs.payload.click()"
>
<i class="material-icons">post_add</i>
</button>
</label>
<input ref="payload" name="payload" type="file" @change="uploadPayload" />
<input
ref="payload"
name="payload"
type="file"
@change="uploadPayload"
/>
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent('rawParams', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -102,7 +111,7 @@ export default {
try {
const jsonObj = JSON.parse(this.rawParamsBody)
this.rawParamsBody = JSON.stringify(jsonObj, null, 2)
let oldIcon = this.$refs.prettifyRequest.innerHTML
const oldIcon = this.$refs.prettifyRequest.innerHTML
this.$refs.prettifyRequest.innerHTML = this.doneButton
setTimeout(() => (this.$refs.prettifyRequest.innerHTML = oldIcon), 1000)
} catch (e) {

4
components/http/Response.vue
View File

@@ -1,5 +1,5 @@
<template>
<AppSection id="response" :label="$t('response')" ref="response" no-legend>
<AppSection id="response" ref="response" :label="$t('response')" no-legend>
<HttpResponseMeta :response="response" :active="active" />
<div v-if="response.body && response.body !== $t('loading')">
<LensesResponseBodyRenderer :response="response" />
@@ -12,7 +12,7 @@ export default {
props: {
response: {
type: Object,
default: {},
default: () => {},
},
active: {
type: Boolean,

6
components/http/ResponseMeta.vue
View File

@@ -2,7 +2,9 @@
<div class="flex flex-col">
<div class="flex items-center justify-between">
<label>{{ $t("response") }}</label>
<label v-if="active"><i class="animate-spin material-icons">refresh</i></label>
<label v-if="active"
><i class="animate-spin material-icons">refresh</i></label
>
<label v-else :class="statusCategory ? statusCategory.className : ''">
<i class="material-icons">fiber_manual_record</i>
</label>
@@ -31,7 +33,7 @@ export default {
props: {
response: {
type: Object,
default: {},
default: () => {},
},
active: {
type: Boolean,

10
components/http/TokenList.vue
View File

@@ -15,9 +15,9 @@
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
<button
v-tooltip.bottom="$t('clear')"
class="icon"
@click="clearContent('tokens', $event)"
v-tooltip.bottom="$t('clear')"
>
<i class="material-icons">clear_all</i>
</button>
@@ -42,15 +42,19 @@
<div class="row-wrapper">
<li>
<button
v-tooltip.bottom="$t('use_token')"
class="icon"
@click="useOAuthToken(token.value)"
v-tooltip.bottom="$t('use_token')"
>
<i class="material-icons">input</i>
</button>
</li>
<li>
<button class="icon" @click="removeOAuthToken(index)" v-tooltip.bottom="$t('delete')">
<button
v-tooltip.bottom="$t('delete')"
class="icon"
@click="removeOAuthToken(index)"
>
<i class="material-icons">delete</i>
</button>
</li>

15
components/smart/AccentModePicker.vue
View File

@@ -1,6 +1,9 @@
<template>
<div class="flex flex-col">
<label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
<label
>{{ $t("color") }}:
{{ active.charAt(0).toUpperCase() + active.slice(1) }}</label
>
<div>
<!-- text-blue-400 -->
<!-- text-green-400 -->
@@ -56,16 +59,16 @@ export default {
],
}
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
methods: {
setActiveColor(color) {
document.documentElement.setAttribute("data-accent", color)
this.active = color
},
},
watch: {
active(color) {
localStorage.setItem("THEME_COLOR", color)
},
},
}
</script>

442
components/smart/AceEditor.vue
View File

@@ -1,18 +1,25 @@
<template>
<div class="show-if-initialized" :class="{ initialized }">
<div class="outline" v-if="lang == 'json'">
<div class="block" v-for="(p, index) in currPath" :key="index">
<div v-if="lang == 'json'" class="outline">
<div v-for="(p, index) in currPath" :key="index" class="block">
<div class="label" @click="onBlockClick(index)">
{{ p }}
</div>
<i v-if="index + 1 !== currPath.length" class="material-icons">chevron_right</i>
<div
class="siblings"
v-if="sibDropDownIndex == index"
@mouseleave="clearSibList"
:ref="`sibling-${index}`"
<i v-if="index + 1 !== currPath.length" class="material-icons"
>chevron_right</i
>
<div class="sib" v-for="(sib, i) in currSib" :key="i" @click="goToSib(sib)">
<div
v-if="sibDropDownIndex == index"
:ref="`sibling-${index}`"
class="siblings"
@mouseleave="clearSibList"
>
<div
v-for="(sib, i) in currSib"
:key="i"
class="sib"
@click="goToSib(sib)"
>
{{ sib.key ? sib.key.value : i }}
</div>
</div>
@@ -22,6 +29,220 @@
</div>
</template>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
import debounce from "~/helpers/utils/debounce"
import outline from "~/helpers/outline"
export default {
props: {
provideJSONOutline: {
type: Boolean,
default: false,
required: false,
},
value: {
type: String,
default: "",
},
theme: {
type: String,
required: false,
default: null,
},
lang: {
type: String,
default: "json",
},
lint: {
type: Boolean,
default: true,
required: false,
},
options: {
type: Object,
default: () => {},
},
styles: {
type: String,
default: "",
},
},
data() {
return {
initialized: false,
editor: null,
cacheValue: "",
outline: outline(),
currPath: [],
currSib: [],
sibDropDownIndex: null,
}
},
watch: {
value(value) {
if (value !== this.cacheValue) {
this.editor.session.setValue(value, 1)
this.cacheValue = value
if (this.lint) this.provideLinting(value)
}
},
theme() {
this.initialized = false
this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
},
lang(value) {
this.editor.getSession().setMode(`ace/mode/${value}`)
},
options(value) {
this.editor.setOptions(value)
},
},
mounted() {
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/${this.lang}`,
...this.options,
})
// Set the theme and show the editor only after it's been set to prevent FOUC.
editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
if (this.value) editor.setValue(this.value, 1)
this.editor = editor
this.cacheValue = this.value
if (this.lang === "json" && this.provideJSONOutline)
this.initOutline(this.value)
editor.on("change", () => {
const content = editor.getValue()
this.$emit("input", content)
this.cacheValue = content
if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
if (this.lint) this.provideLinting(content)
})
if (this.lang === "json" && this.provideJSONOutline) {
editor.session.selection.on("changeCursor", () => {
const index = editor.session.doc.positionToIndex(
editor.selection.getCursor(),
0
)
const path = this.outline.genPath(index)
if (path.success) {
this.currPath = path.res
}
})
document.addEventListener("touchstart", this.onTouchStart)
}
// Disable linting, if lint prop is false
if (this.lint) this.provideLinting(this.value)
},
destroyed() {
this.editor.destroy()
document.removeEventListener("touchstart", this.onTouchStart)
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {
if (this.lang === "json") {
try {
jsonParse(code)
this.editor.session.setAnnotations([])
} catch (e) {
const pos = this.editor.session
.getDocument()
.indexToPosition(e.start, 0)
this.editor.session.setAnnotations([
{
row: pos.row,
column: pos.column,
text: e.message,
type: "error",
},
])
}
}
}, 2000),
onBlockClick(index) {
if (this.sibDropDownIndex === index) {
this.clearSibList()
} else {
this.currSib = this.outline.getSiblings(index)
if (this.currSib.length) this.sibDropDownIndex = index
}
},
clearSibList() {
this.currSib = []
this.sibDropDownIndex = null
},
goToSib(obj) {
this.clearSibList()
if (obj.start) {
const pos = this.editor.session.doc.indexToPosition(obj.start, 0)
if (pos) {
this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
this.editor.session.selection.clearSelection()
this.editor.scrollToLine(pos.row, false, true, null)
}
}
},
initOutline: debounce(function (content) {
if (this.lang === "json") {
try {
this.outline.init(content)
if (content[0] === "[") this.currPath.push("[]")
else this.currPath.push("{}")
} catch (e) {
console.log("Outline error: ", e)
}
}
}),
onTouchStart(e) {
if (
this.sibDropDownIndex !== null &&
e.target.parentElement !==
this.$refs[`sibling-${this.sibDropDownIndex}`][0]
) {
this.clearSibList()
}
},
},
}
</script>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
@@ -90,206 +311,3 @@
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import jsonParse from "~/helpers/jsonParse"
import debounce from "~/helpers/utils/debounce"
import outline from "~/helpers/outline"
export default {
props: {
provideJSONOutline: {
type: Boolean,
default: false,
required: false,
},
value: {
type: String,
default: "",
},
theme: {
type: String,
required: false,
default: null,
},
lang: {
type: String,
default: "json",
},
lint: {
type: Boolean,
default: true,
required: false,
},
options: {
type: Object,
default: {},
},
styles: {
type: String,
default: "",
},
},
data() {
return {
initialized: false,
editor: null,
cacheValue: "",
outline: outline(),
currPath: [],
currSib: [],
sibDropDownIndex: null,
}
},
watch: {
value(value) {
if (value !== this.cacheValue) {
this.editor.session.setValue(value, 1)
this.cacheValue = value
if (this.lint) this.provideLinting(value)
}
},
theme() {
this.initialized = false
this.editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
},
lang(value) {
this.editor.getSession().setMode(`ace/mode/${value}`)
},
options(value) {
this.editor.setOptions(value)
},
},
mounted() {
const editor = ace.edit(this.$refs.editor, {
mode: `ace/mode/${this.lang}`,
...this.options,
})
// Set the theme and show the editor only after it's been set to prevent FOUC.
editor.setTheme(`ace/theme/${this.defineTheme()}`, () => {
this.$nextTick().then(() => {
this.initialized = true
})
})
if (this.value) editor.setValue(this.value, 1)
this.editor = editor
this.cacheValue = this.value
if (this.lang === "json" && this.provideJSONOutline) this.initOutline(this.value)
editor.on("change", () => {
const content = editor.getValue()
this.$emit("input", content)
this.cacheValue = content
if (this.provideJSONOutline) debounce(this.initOutline(content), 500)
if (this.lint) this.provideLinting(content)
})
if (this.lang === "json" && this.provideJSONOutline) {
editor.session.selection.on("changeCursor", (e) => {
const index = editor.session.doc.positionToIndex(editor.selection.getCursor(), 0)
const path = this.outline.genPath(index)
if (path.success) {
this.currPath = path.res
}
})
document.addEventListener("touchstart", this.onTouchStart)
}
// Disable linting, if lint prop is false
if (this.lint) this.provideLinting(this.value)
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
)
},
provideLinting: debounce(function (code) {
if (this.lang === "json") {
try {
jsonParse(code)
this.editor.session.setAnnotations([])
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.start, 0)
this.editor.session.setAnnotations([
{
row: pos.row,
column: pos.column,
text: e.message,
type: "error",
},
])
}
}
}, 2000),
onBlockClick(index) {
if (this.sibDropDownIndex == index) {
this.clearSibList()
} else {
this.currSib = this.outline.getSiblings(index)
if (this.currSib.length) this.sibDropDownIndex = index
}
},
clearSibList() {
this.currSib = []
this.sibDropDownIndex = null
},
goToSib(obj) {
this.clearSibList()
if (obj.start) {
let pos = this.editor.session.doc.indexToPosition(obj.start, 0)
if (pos) {
this.editor.session.selection.moveCursorTo(pos.row, pos.column, true)
this.editor.session.selection.clearSelection()
this.editor.scrollToLine(pos.row, false, true, null)
}
}
},
initOutline: debounce(function (content) {
if (this.lang == "json") {
try {
this.outline.init(content)
if (content[0] == "[") this.currPath.push("[]")
else this.currPath.push("{}")
} catch (e) {
console.log("Outline error: ", e)
}
}
}),
onTouchStart(e) {
if (this.sibDropDownIndex == null) return
else {
if (e.target.parentElement != this.$refs[`sibling-${this.sibDropDownIndex}`][0]) {
this.clearSibList()
}
}
},
},
destroyed() {
this.editor.destroy()
document.removeEventListener("touchstart", this.onTouchStart)
},
}
</script>

311
components/smart/AutoComplete.vue
View File

@@ -1,29 +1,29 @@
<template>
<div class="autocomplete-wrapper">
<input
ref="acInput"
v-model="text"
type="text"
:placeholder="placeholder"
v-model="text"
@input="updateSuggestions"
@keyup="updateSuggestions"
@click="updateSuggestions"
@keydown="handleKeystroke"
ref="acInput"
:spellcheck="spellcheck"
:autocapitalize="autocapitalize"
:autocorrect="spellcheck"
:class="styles"
@input="updateSuggestions"
@keyup="updateSuggestions"
@click="updateSuggestions"
@keydown="handleKeystroke"
/>
<ul
class="suggestions"
v-if="suggestions.length > 0 && suggestionsVisible"
class="suggestions"
:style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
>
<li
v-for="(suggestion, index) in suggestions"
@click.prevent="forceSuggestion(suggestion)"
:class="{ active: currentSuggestionIndex === index }"
:key="index"
:class="{ active: currentSuggestionIndex === index }"
@click.prevent="forceSuggestion(suggestion)"
>
{{ suggestion }}
</li>
@@ -31,6 +31,155 @@
</div>
</template>
<script>
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false,
},
autocapitalize: {
type: String,
default: "off",
required: false,
},
placeholder: {
type: String,
default: "",
required: false,
},
source: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
},
data() {
return {
text: this.value,
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false,
}
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
const input = this.text.substring(0, this.selectionStart)
return (
this.source
.filter(
(entry) =>
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
)
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 6 suggestions.
.slice(0, 6)
)
},
},
watch: {
text() {
this.$emit("input", this.text)
},
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput,
})
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.code && event.code === "Escape") {
event.preventDefault()
this.suggestionsVisible = false
this.currentSuggestionIndex = -1
return
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart
this.suggestionsOffsetLeft = 12 * this.selectionStart
this.suggestionsVisible = true
},
forceSuggestion(text) {
const input = this.text.substring(0, this.selectionStart)
this.text = input + text
this.selectionStart = this.text.length
this.suggestionsVisible = true
this.currentSuggestionIndex = -1
},
handleKeystroke(event) {
switch (event.code) {
case "ArrowUp":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0
? this.currentSuggestionIndex - 1
: 0
break
case "ArrowDown":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1
break
case "Tab": {
const activeSuggestion =
this.suggestions[
this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
]
if (!activeSuggestion) {
return
}
event.preventDefault()
const input = this.text.substring(0, this.selectionStart)
this.text = input + activeSuggestion
break
}
}
},
},
}
</script>
<style scoped lang="scss">
.autocomplete-wrapper {
@apply relative;
@@ -78,147 +227,3 @@
}
}
</style>
<script>
export default {
props: {
spellcheck: {
type: Boolean,
default: true,
required: false,
},
autocapitalize: {
type: String,
default: "off",
required: false,
},
placeholder: {
type: String,
default: "",
required: false,
},
source: {
type: Array,
required: true,
},
value: {
type: String,
default: "",
required: false,
},
styles: {
type: String,
default: "",
},
},
watch: {
text() {
this.$emit("input", this.text)
},
},
data() {
return {
text: this.value,
selectionStart: 0,
suggestionsOffsetLeft: 0,
currentSuggestionIndex: -1,
suggestionsVisible: false,
}
},
methods: {
updateSuggestions(event) {
// Hide suggestions if ESC pressed.
if (event.code && event.code === "Escape") {
event.preventDefault()
this.suggestionsVisible = false
this.currentSuggestionIndex = -1
return
}
// As suggestions is a reactive property, this implicitly
// causes suggestions to update.
this.selectionStart = this.$refs.acInput.selectionStart
this.suggestionsOffsetLeft = 12 * this.selectionStart
this.suggestionsVisible = true
},
forceSuggestion(text) {
let input = this.text.substring(0, this.selectionStart)
this.text = input + text
this.selectionStart = this.text.length
this.suggestionsVisible = true
this.currentSuggestionIndex = -1
},
handleKeystroke(event) {
switch (event.code) {
case "ArrowUp":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0
break
case "ArrowDown":
event.preventDefault()
this.currentSuggestionIndex =
this.currentSuggestionIndex < this.suggestions.length - 1
? this.currentSuggestionIndex + 1
: this.suggestions.length - 1
break
case "Tab":
let activeSuggestion =
this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
if (!activeSuggestion) {
return
}
event.preventDefault()
let input = this.text.substring(0, this.selectionStart)
this.text = input + activeSuggestion
break
}
},
},
computed: {
/**
* Gets the suggestions list to be displayed under the input box.
*
* @returns {default.props.source|{type, required}}
*/
suggestions() {
let input = this.text.substring(0, this.selectionStart)
return (
this.source
.filter(
(entry) =>
entry.toLowerCase().startsWith(input.toLowerCase()) &&
input.toLowerCase() !== entry.toLowerCase()
)
// Cut off the part that's already been typed.
.map((entry) => entry.substring(this.selectionStart))
// We only want the top 6 suggestions.
.slice(0, 6)
)
},
},
mounted() {
this.updateSuggestions({
target: this.$refs.acInput,
})
},
}
</script>

5
components/smart/ColorModePicker.vue
View File

@@ -3,7 +3,10 @@
<label>
<ColorScheme placeholder="..." tag="span">
{{ $t("background") }}:
{{ $colorMode.preference.charAt(0).toUpperCase() + $colorMode.preference.slice(1) }}
{{
$colorMode.preference.charAt(0).toUpperCase() +
$colorMode.preference.slice(1)
}}
<span v-if="$colorMode.preference === 'system'">
({{ $colorMode.value }} mode detected)
</span>

14
components/smart/ConfirmModal.vue
View File

@@ -33,21 +33,21 @@
export default {
props: {
show: Boolean,
title: "",
title: { type: String, default: "" },
yes: {
type: String,
default: function () {
default() {
return this.$t("yes")
},
},
no: {
type: String,
default: function () {
default() {
return this.$t("no")
},
},
},
async mounted() {
mounted() {
this._keyListener = function (e) {
if (e.key === "Escape") {
e.preventDefault()
@@ -56,6 +56,9 @@ export default {
}
document.addEventListener("keydown", this._keyListener.bind(this))
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
methods: {
hideModal() {
this.$emit("hide-modal")
@@ -64,8 +67,5 @@ export default {
this.$emit("resolve")
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

2
components/smart/Intersection.vue
View File

@@ -1,6 +1,6 @@
<template>
<div ref="container">
<slot />
<slot></slot>
</div>
</template>
<script lang="ts">

72
components/smart/JsEditor.vue
View File

@@ -4,25 +4,12 @@
</div>
</template>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>
<script>
import ace from "ace-builds"
import "ace-builds/webpack-resolver"
import "ace-builds/src-noconflict/ext-language_tools"
import "ace-builds/src-noconflict/mode-graphqlschema"
import * as esprima from "esprima"
import debounce from "~/helpers/utils/debounce"
import {
getPreRequestScriptCompletions,
@@ -30,8 +17,6 @@ import {
performPreRequestLinting,
} from "~/helpers/tern"
import * as esprima from "esprima"
export default {
props: {
value: {
@@ -45,7 +30,7 @@ export default {
},
options: {
type: Object,
default: {},
default: () => {},
},
styles: {
type: String,
@@ -115,7 +100,13 @@ export default {
})
const completer = {
getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
getCompletions: (
editor,
_session,
{ row, column },
_prefix,
callback
) => {
if (this.completeMode === "pre") {
getPreRequestScriptCompletions(editor.getValue(), row, column)
.then((res) => {
@@ -165,14 +156,21 @@ export default {
this.provideLinting(this.value)
},
destroyed() {
this.editor.destroy()
},
methods: {
defineTheme() {
if (this.theme) {
return this.theme
}
const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
const strip = (str) =>
str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
return strip(
window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
window
.getComputedStyle(document.documentElement)
.getPropertyValue("--editor-theme")
)
},
@@ -195,7 +193,9 @@ export default {
if (res.errors && res.errors.length > 0) {
results = results.concat(
res.errors.map((err) => {
const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(err.index, 0)
return {
row: pos.row,
@@ -207,7 +207,9 @@ export default {
)
}
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(e.index, 0)
results = results.concat([
{
row: pos.row,
@@ -226,7 +228,9 @@ export default {
if (res.errors && res.errors.length > 0) {
results = results.concat(
res.errors.map((err) => {
const pos = this.editor.session.getDocument().indexToPosition(err.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(err.index, 0)
return {
row: pos.row,
@@ -238,7 +242,9 @@ export default {
)
}
} catch (e) {
const pos = this.editor.session.getDocument().indexToPosition(e.index, 0)
const pos = this.editor.session
.getDocument()
.indexToPosition(e.index, 0)
results = results.concat([
{
row: pos.row,
@@ -253,9 +259,19 @@ export default {
})
}, 2000),
},
destroyed() {
this.editor.destroy()
},
}
</script>
<style lang="scss">
.show-if-initialized {
@apply opacity-0;
&.initialized {
@apply opacity-100;
}
& > * {
@apply transition-none;
}
}
</style>

20
components/smart/Modal.vue
View File

@@ -20,6 +20,16 @@
</transition>
</template>
<script>
export default {
computed: {
hasFooterSlot() {
return !!this.$slots.footer
},
},
}
</script>
<style scoped lang="scss">
.modal-backdrop {
@apply fixed;
@@ -118,13 +128,3 @@
}
}
</style>
<script>
export default {
computed: {
hasFooterSlot() {
return !!this.$slots.footer
},
},
}
</script>

2
components/smart/Tab.vue
View File

@@ -9,7 +9,7 @@ export default {
props: {
label: { type: String, default: "" },
icon: { type: String, default: "" },
id: { required: true },
id: { type: String, default: "", required: true },
selected: {
type: Boolean,
default: false,

64
components/smart/Tabs.vue
View File

@@ -4,8 +4,8 @@
<ul>
<li
v-for="(tab, index) in tabs"
:class="{ 'is-active': tab.isActive }"
:key="index"
:class="{ 'is-active': tab.isActive }"
:tabindex="0"
@keyup.enter="selectTab(tab)"
>
@@ -24,6 +24,36 @@
</section>
</template>
<script>
export default {
props: {
styles: {
type: String,
default: "",
},
},
data() {
return {
tabs: [],
}
},
created() {
this.tabs = this.$children
},
methods: {
selectTab({ id }) {
this.tabs.forEach((tab) => {
tab.isActive = tab.id === id
})
this.$emit("tab-changed", id)
},
},
}
</script>
<style scoped lang="scss">
.tabs-wrapper {
@apply flex;
@@ -90,35 +120,3 @@
}
}
</style>
<script>
import Section from "../app/Section.vue"
export default {
components: { Section },
props: {
styles: {
type: String,
default: "",
},
},
data() {
return {
tabs: [],
}
},
created() {
this.tabs = this.$children
},
methods: {
selectTab({ id }) {
this.tabs.forEach((tab) => {
tab.isActive = tab.id == id
})
this.$emit("tab-changed", id)
},
},
}
</script>

42
components/smart/Toggle.vue
View File

@@ -1,14 +1,32 @@
<template>
<div @click="toggle()" class="inline-block cursor-pointer">
<label class="toggle" :class="{ on: on }" ref="toggle">
<div class="inline-block cursor-pointer" @click="toggle()">
<label ref="toggle" class="toggle" :class="{ on: on }">
<span class="handle"></span>
</label>
<label class="pl-0 align-middle cursor-pointer">
<slot />
<slot></slot>
</label>
</div>
</template>
<script>
export default {
props: {
on: {
type: Boolean,
default: false,
},
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on")
this.$emit("change", containsOnClass)
},
},
}
</script>
<style scoped lang="scss">
$useBorder: false;
$borderColor: var(--fg-light-color);
@@ -63,21 +81,3 @@ $transition: all 0.2s ease-in-out;
}
}
</style>
<script>
export default {
props: {
on: {
type: Boolean,
default: false,
},
},
methods: {
toggle() {
const containsOnClass = this.$refs.toggle.classList.toggle("on")
this.$emit("change", containsOnClass)
},
},
}
</script>

72
components/smart/UrlField.vue
View File

@@ -1,31 +1,7 @@
<template>
<div contenteditable class="url-field" ref="editor" spellcheck="false"></div>
<div ref="editor" contenteditable class="url-field" spellcheck="false"></div>
</template>
<style lang="scss">
.url-field {
@apply border-dashed;
@apply md:border-l;
@apply border-brdColor;
}
.highlight-VAR {
@apply font-bold;
@apply text-acColor;
}
.highlight-TEXT {
@apply overflow-auto;
@apply break-all;
height: 22px;
}
.highlight-TEXT::-webkit-scrollbar {
@apply hidden;
}
</style>
<script>
export default {
props: {
@@ -80,7 +56,11 @@ export default {
let index = 0
while ((match = text.substring(index).match(regex))) {
map.push([index, index + (match.index - 1), "TEXT"])
map.push([index + match.index, index + match.index + match[0].length - 1, "VAR"])
map.push([
index + match.index,
index + match.index + match[0].length - 1,
"VAR",
])
index += match.index + match[0].length
if (index >= text.length - 1) break
@@ -101,7 +81,11 @@ export default {
break
case Node.ELEMENT_NODE:
textSegments.splice(textSegments.length, 0, ...this.getTextSegments(node))
textSegments.splice(
textSegments.length,
0,
...this.getTextSegments(node)
)
break
}
})
@@ -118,11 +102,17 @@ export default {
textSegments.forEach(({ text, node }) => {
const startIndexOfNode = currentIndex
const endIndexOfNode = startIndexOfNode + text.length
if (startIndexOfNode <= absoluteAnchorIndex && absoluteAnchorIndex <= endIndexOfNode) {
if (
startIndexOfNode <= absoluteAnchorIndex &&
absoluteAnchorIndex <= endIndexOfNode
) {
anchorNode = node
anchorIndex = absoluteAnchorIndex - startIndexOfNode
}
if (startIndexOfNode <= absoluteFocusIndex && absoluteFocusIndex <= endIndexOfNode) {
if (
startIndexOfNode <= absoluteFocusIndex &&
absoluteFocusIndex <= endIndexOfNode
) {
focusNode = node
focusIndex = absoluteFocusIndex - startIndexOfNode
}
@@ -161,3 +151,27 @@ export default {
},
}
</script>
<style lang="scss">
.url-field {
@apply border-dashed;
@apply md:border-l;
@apply border-brdColor;
}
.highlight-VAR {
@apply font-bold;
@apply text-acColor;
}
.highlight-TEXT {
@apply overflow-auto;
@apply break-all;
height: 22px;
}
.highlight-TEXT::-webkit-scrollbar {
@apply hidden;
}
</style>

38
components/smart/__tests__/AutoComplete.spec.js
View File

@@ -1,5 +1,5 @@
import autocomplete from "../AutoComplete"
import { mount } from "@vue/test-utils"
import autocomplete from "../AutoComplete"
const props = {
placeholder: "",
@@ -9,7 +9,9 @@ const props = {
}
// ["pp", "pple", "ppliance", "lice"]
const suggestionStr = props.source.filter((str) => str.startsWith("a")).map((str) => str.slice(1))
const suggestionStr = props.source
.filter((str) => str.startsWith("a"))
.map((str) => str.slice(1))
const factory = (props) =>
mount(autocomplete, {
@@ -118,7 +120,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow when nothing is selected selects the first in the list", async () => {
@@ -134,7 +138,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow moves down the selection list", async () => {
@@ -154,7 +160,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
})
test("pressing up arrow moves up the selection list", async () => {
@@ -179,7 +187,9 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing down arrow at the end of the list doesn't update the selection", async () => {
@@ -199,14 +209,18 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
await input.trigger("keydown", {
code: "ArrowDown",
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(1).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(1).element.classList.contains("active")
).toEqual(true)
})
test("pressing up arrow at the top of the list doesn't update the selection", async () => {
@@ -226,14 +240,18 @@ describe("autocomplete", () => {
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
await input.trigger("keydown", {
code: "ArrowUp",
})
await wrapper.vm.$nextTick()
expect(wrapper.findAll("li").at(0).element.classList.contains("active")).toEqual(true)
expect(
wrapper.findAll("li").at(0).element.classList.contains("active")
).toEqual(true)
})
test("pressing tab performs the current completion", async () => {

2
components/smart/__tests__/Tab.spec.js
View File

@@ -1,5 +1,5 @@
import tab from "../Tab"
import { mount } from "@vue/test-utils"
import tab from "../Tab"
const factory = (props, data) => {
if (data) {

5
components/smart/__tests__/Tabs.spec.js
View File

@@ -1,8 +1,7 @@
import { mount } from "@vue/test-utils"
import tabs from "../Tabs"
import tab from "../Tab"
import { mount } from "@vue/test-utils"
const factory = () =>
mount(tabs, {
slots: {
@@ -13,7 +12,7 @@ const factory = () =>
],
},
stubs: {
"Tab": tab,
Tab: tab,
},
})

2
components/smart/__tests__/Toggle.spec.js
View File

@@ -1,5 +1,5 @@
import pwToggle from "../Toggle"
import { mount } from "@vue/test-utils"
import pwToggle from "../Toggle"
const factory = (props, slot) =>
mount(pwToggle, {

2
components/smart/__tests__/UrlField.spec.js
View File

@@ -1,5 +1,5 @@
import urlField from "../UrlField"
import { mount } from "@vue/test-utils"
import urlField from "../UrlField"
const factory = (props) =>
mount(urlField, {

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>