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

refactor: better implimentation for slots

Browse Source
This commit is contained in:
liyasthomas
2021-06-30 14:16:02 +05:30
parent 0dd0d262d6
commit b750ccd46f
46 changed files with 1144 additions and 758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/app/Extensions.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("extensions") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<p class="info">
{{ $t("extensions_info1") }}
</p>
@@ -70,8 +68,7 @@
</button>
</a>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

2
components/app/Footer.vue
View File

@@ -57,7 +57,7 @@
<button v-tooltip="$t('choose_language')" class="icon button">
<i class="material-icons">translate</i>
</button>
<template slot="popover">
<template #popover>
<div v-for="locale in availableLocales" :key="locale.code">
<nuxt-link :to="switchLocalePath(locale.code)">
<button v-close-popover class="icon button">

6
components/app/Header.vue
View File

@@ -71,7 +71,7 @@
<button v-tooltip="$t('login_with')" class="icon button">
<i class="material-icons">login</i>
</button>
<template slot="popover">
<template #popover>
<FirebaseLogin @show-email="showEmail = true" />
</template>
</v-popover>
@@ -94,7 +94,7 @@
/>
<i v-else class="material-icons">account_circle</i>
</button>
<template slot="popover">
<template #popover>
<div>
<nuxt-link v-close-popover :to="localePath('settings')">
<button class="icon button">
@@ -114,7 +114,7 @@
<button v-tooltip="$t('more')" class="icon button">
<i class="material-icons">drag_indicator</i>
</button>
<template slot="popover">
<template #popover>
<button
v-close-popover
class="icon button"

21
components/app/Shortcuts.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("shortcuts") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="p-2">
<div>
<kbd>{{ getSpecialKey() }}</kbd>
@@ -68,8 +66,7 @@
<label>{{ $t("select_delete_method") }}</label>
</div>
</div>
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

21
components/app/Support.vue
View File

@@ -1,19 +1,16 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("support_us") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<AppContributors />
</div>
<div slot="footer"></div>
</template>
</SmartModal>
</template>

44
components/collections/Add.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/AddFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/Edit.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/EditFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -19,20 +17,18 @@
type="text"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/EditRequest.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="placeholderReqName"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

159
components/collections/ImportExport.vue
View File

@@ -1,76 +1,74 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("collections") }}
</h3>
<div>
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<button
v-if="mode == 'import_from_my_collections'"
v-tooltip.left="'Back'"
class="tooltip-target icon button"
@click="
mode = 'import_export'
mySelectedCollectionID = undefined
"
>
<i class="material-icons">arrow_back</i>
</button>
<v-popover
v-if="
mode == 'import_export' && collectionsType.type == 'my-collections'
"
>
<button
v-if="mode != 'import_export'"
v-tooltip.left="'Back'"
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
@click="mode = 'import_export'"
>
<i class="material-icons">arrow_back</i>
<i class="material-icons">more_vert</i>
</button>
<v-popover
v-if="
mode == 'import_export' &&
collectionsType.type == 'my-collections'
"
>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div v-if="mode == 'import_export'" class="flex flex-col p-2 items-start">
<button
v-tooltip="$t('replace_current')"
@@ -154,22 +152,23 @@
</option>
</select>
</span>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button
class="m-2 icon button primary"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
{{ $t("import") }}
</button>
</span>
</div>
</div>
</div>
</div>
</template>
<template #footer>
<div v-if="mode == 'import_from_my_collections'">
<span></span>
<span>
<button
class="m-2 icon button"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("import") }}</span>
</button>
</span>
</div>
</template>
</SmartModal>
</template>

44
components/collections/SaveRequest.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("save_request_as") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input
id="selectLabel"
@@ -39,20 +37,18 @@
@update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequestAs">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequestAs">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/graphql/Add.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_collection')"
@keyup.enter="addNewCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/graphql/AddFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_folder')"
@keyup.enter="addFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/collections/graphql/Collection.vue
View File

@@ -43,7 +43,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

44
components/collections/graphql/Edit.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_collection") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="editingCollection.name"
@keyup.enter="saveCollection"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveCollection">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/graphql/EditFolder.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="$emit('hide-modal')">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_folder") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="editFolder">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/collections/graphql/EditRequest.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_request") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="request.name"
@keyup.enter="saveRequest"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveRequest">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/collections/graphql/Folder.vue
View File

@@ -32,7 +32,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

110
components/collections/graphql/ImportExport.vue
View File

@@ -1,63 +1,59 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("collections") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
<template #header>
<h3 class="heading">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</div>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readCollectionGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createCollectionGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
@@ -102,7 +98,7 @@
</span>
</button>
</div>
</div>
</template>
</SmartModal>
</template>

2
components/collections/graphql/Request.vue
View File

@@ -29,7 +29,7 @@
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

1
components/collections/index.vue
View File

@@ -25,6 +25,7 @@
<CollectionsEdit
:show="showModalEdit"
:editing-coll-name="editingCollection ? editingCollection.name : ''"
:placeholder-coll-name="editingCollection ? editingCollection.name : ''"
@hide-modal="displayModalEdit(false)"
@submit="updateEditingCollection"
/>

2
components/collections/my/Collection.vue
View File

@@ -51,7 +51,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

2
components/collections/my/Folder.vue
View File

@@ -31,7 +31,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

2
components/collections/my/Request.vue
View File

@@ -31,7 +31,7 @@
<button v-tooltip="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

2
components/collections/teams/Collection.vue
View File

@@ -41,7 +41,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"

2
components/collections/teams/Folder.vue
View File

@@ -26,7 +26,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"

2
components/collections/teams/Request.vue
View File

@@ -25,7 +25,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

44
components/environments/Add.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("new_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -20,20 +18,18 @@
:placeholder="$t('my_new_environment')"
@keyup.enter="addNewEnvironment"
/>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewEnvironment">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewEnvironment">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

44
components/environments/Edit.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("edit_environment") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="selectLabel">{{ $t("label") }}</label>
<input
id="selectLabel"
@@ -82,20 +80,18 @@
</button>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveEnvironment">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveEnvironment">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/environments/Environment.vue
View File

@@ -11,7 +11,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

112
components/environments/ImportExport.vue
View File

@@ -1,63 +1,61 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-close-popover
class="icon button"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
<template #header>
<h3 class="heading">
{{ $t("import_export") }} {{ $t("environments") }}
</h3>
<div>
<v-popover>
<button
v-tooltip.left="$t('more')"
class="tooltip-target icon button"
>
<i class="material-icons">more_vert</i>
</button>
</div>
<template #popover>
<div>
<button
v-close-popover
class="icon button"
@click="readEnvironmentGist"
>
<i class="material-icons">assignment_returned</i>
<span>{{ $t("import_from_gist") }}</span>
</button>
</div>
<div
v-tooltip.bottom="{
content: !currentUser
? $t('login_with_github_to') + $t('create_secret_gist')
: currentUser.provider !== 'github.com'
? $t('login_with_github_to') + $t('create_secret_gist')
: null,
}"
>
<button
v-close-popover
:disabled="
!currentUser
? true
: currentUser.provider !== 'github.com'
? true
: false
"
class="icon button"
@click="createEnvironmentGist"
>
<i class="material-icons">assignment_turned_in</i>
<span>{{ $t("create_secret_gist") }}</span>
</button>
</div>
</template>
</v-popover>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="flex flex-col items-start p-2">
<button
v-tooltip="$t('replace_current')"
@@ -102,7 +100,7 @@
</span>
</button>
</div>
</div>
</template>
</SmartModal>
</template>

96
components/firebase/Email.vue
View File

@@ -1,16 +1,12 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="body" class="flex flex-col">
<template #header>
<h3 class="heading">{{ $t("login_with") }} {{ $t("email") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template v-if="mode === 'sign-in'" #body>
<label for="email"> E-mail </label>
<input
id="email"
@@ -25,47 +21,47 @@
autofocus
@keyup.enter="signInWithEmail"
/>
</div>
<div v-else slot="body" class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</template>
<template v-else #body>
<div class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">
{{ $t("we_sent_magic_link") }}
</h3>
<p class="text-center">
{{ $t("we_sent_magic_link_description", { email: form.email }) }}
</p>
<p class="info">{{ $t("check_your_inbox") }}</p>
</div>
</div>
</div>
<div v-if="mode === 'sign-in'" slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
</template>
<template v-if="mode === 'sign-in'" #footer>
<span></span>
<span>
<button v-if="signingInWithEmail" class="icon button" type="button">
{{ $t("loading") }}
</button>
<button
v-else
class="rounded-md button"
:disabled="
form.email.length !== 0
? emailRegex.test(form.email)
? false
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</div>
</div>
: true
"
type="button"
tabindex="-1"
@click="signInWithEmail"
>
{{ $t("send_magic_link") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/history/graphql/Card.vue
View File

@@ -46,7 +46,7 @@
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

2
components/history/rest/Card.vue
View File

@@ -53,7 +53,7 @@
<button v-tooltip="$t('options')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover

22
components/http/CodegenModal.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("generate_code") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label for="requestType">{{ $t("choose_language") }}</label>
<span class="select-wrapper">
<v-popover>
@@ -26,7 +24,7 @@
readonly
autofocus
/>
<template slot="popover">
<template #popover>
<div v-for="gen in codegens" :key="gen.id">
<button
v-close-popover
@@ -68,7 +66,7 @@
}"
styles="rounded-b-lg"
/>
</div>
</template>
</SmartModal>
</template>

44
components/http/ImportCurl.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("import_curl") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("import_curl") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<textarea
id="import-curl"
class="textarea"
@@ -18,20 +16,18 @@
rows="8"
:placeholder="$t('enter_curl')"
></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="handleImport">
{{ $t("import") }}
</button>
</span>
</template>
</SmartModal>
</template>

20
components/http/TokenList.vue
View File

@@ -1,16 +1,14 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("manage_token") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("manage_token") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="row-wrapper">
<label>{{ $t("token_list") }}</label>
<div v-if="tokens.length != 0">
@@ -64,7 +62,7 @@
<p v-if="tokens.length === 0" class="info">
{{ $t("empty") }}
</p>
</div>
</template>
</SmartModal>
</template>

44
components/smart/ConfirmModal.vue
View File

@@ -1,31 +1,27 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("confirm") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<label>{{ title }}</label>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ no }}
</button>
<button class="icon button primary" @click="resolve">
{{ yes }}
</button>
</span>
</template>
</SmartModal>
</template>

14
components/smart/Modal.vue
View File

@@ -11,15 +11,21 @@
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"></slot>
<div class="row-wrapper">
<slot name="header"></slot>
</div>
</div>
<div class="modal-body">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="flex flex-col">
<slot name="body"></slot>
<!-- <div class="top fade"></div>
<div class="bottom fade"></div> -->
</div>
</div>
<div v-if="hasFooterSlot" class="modal-footer">
<slot name="footer"></slot>
<div class="row-wrapper">
<slot name="footer"></slot>
</div>
</div>
</div>
</div>

45
components/teams/Add.vue
View File

@@ -1,20 +1,17 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<template #header>
<h3 class="heading">{{ $t("new_team") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template #body>
<ul>
<li>
<div class="row-wrapper">
<h3 class="heading">{{ $t("new_team") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<label>{{ $t("label") }}</label>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input
@@ -26,20 +23,18 @@
/>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="addNewTeam">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

47
components/teams/Edit.vue
View File

@@ -1,20 +1,19 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<template #header>
<h3 class="heading">{{ $t("edit_team") }}</h3>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</template>
<template #body>
<ul>
<li>
<div class="row-wrapper">
<h3 class="heading">{{ $t("edit_team") }}</h3>
<div>
<button class="icon button" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
<label>{{ $t("label") }}</label>
</div>
</li>
</ul>
</div>
<div slot="body">
<ul>
<li>
<input
@@ -70,7 +69,7 @@
"
readonly
/>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover
@@ -150,7 +149,7 @@
"
readonly
/>
<template slot="popover">
<template #popover>
<div>
<button
v-close-popover
@@ -203,20 +202,18 @@
</button>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon button primary" @click="saveTeam">
{{ $t("save") }}
</button>
</span>
</template>
</SmartModal>
</template>

2
components/teams/Team.vue
View File

@@ -14,7 +14,7 @@
<button v-tooltip.left="$t('more')" class="tooltip-target icon button">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<template #popover>
<div v-if="team.myRole === 'OWNER'">
<button
v-close-popover

12
pages/graphql.vue
View File

@@ -530,6 +530,9 @@ export default {
}
},
computed: {
selectedRequest() {
return this.$store.state.postwoman.selectedGraphqlRequest
},
filteredQueryFields() {
return this.getFilteredGraphqlFields({
filterText: this.graphqlFieldsFilterText,
@@ -606,6 +609,15 @@ export default {
},
},
},
watch: {
selectedRequest(newValue) {
if (!newValue) return
this.url = newValue.url
this.gqlQueryString = newValue.query
this.headers = newValue.headers
this.variableString = newValue.variables
},
},
mounted() {
if (
this.$store.state.gql.schemaIntrospection &&

47
pages/index.vue
View File

@@ -16,7 +16,7 @@
:readonly="!customMethod"
autofocus
/>
<template slot="popover">
<template #popover>
<div
v-for="(methodMenuItem, index) in methodMenuItems"
:key="`method-${index}`"
@@ -114,7 +114,7 @@
v-model="contentType"
readonly
/>
<template slot="popover">
<template #popover>
<div
v-for="(
contentTypeMenuItem, index
@@ -680,17 +680,15 @@
v-if="showTokenRequestList"
@close="showTokenRequestList = false"
>
<div slot="header">
<div class="row-wrapper">
<h3 class="heading">{{ $t("manage_token_req") }}</h3>
<div>
<button class="icon button" @click="showTokenRequestList = false">
<i class="material-icons">close</i>
</button>
</div>
<template #header>
<h3 class="heading">{{ $t("manage_token_req") }}</h3>
<div>
<button class="icon button" @click="showTokenRequestList = false">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div slot="body" class="flex flex-col">
</template>
<template #body>
<div class="row-wrapper">
<label for="token-req-list">{{ $t("token_req_list") }}</label>
<div>
@@ -745,17 +743,15 @@
rows="7"
v-model="tokenReqDetails"
></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon button primary" @click="addOAuthTokenReq">
{{ $t("save_token_req") }}
</button>
</span>
</div>
</div>
</template>
<template #footer>
<span></span>
<span>
<button class="icon button primary" @click="addOAuthTokenReq">
{{ $t("save_token_req") }}
</button>
</span>
</template>
</SmartModal>
</div>
</template>
@@ -898,7 +894,7 @@ export default {
},
deep: true,
},
selectedRequest(newValue, oldValue) {
selectedRequest(newValue) {
// @TODO: Convert all variables to single request variable
if (!newValue) return
this.uri = newValue.url + newValue.path
@@ -1216,6 +1212,9 @@ export default {
})
},
},
selectedRequest() {
return this.$store.state.postwoman.selectedRequest
},
requestName() {
return this.name
},

460
store/postwoman.js Normal file
View File

@@ -0,0 +1,460 @@
import Vue from "vue"
export const SETTINGS_KEYS = [
/**
* Whether or not to enable scrolling to a specified element, when certain
* actions are triggered.
*/
"SCROLL_INTO_ENABLED",
/**
* Whether or not requests should be proxied.
*/
"PROXY_ENABLED",
/**
* The URL of the proxy to connect to for requests.
*/
"PROXY_URL",
/**
* The security key of the proxy.
*/
"PROXY_KEY",
/**
* An array of properties to exclude from the URL.
* e.g. 'auth'
*/
"URL_EXCLUDES",
/**
* A boolean value indicating whether to use the browser extensions
* to run the requests
*/
"EXTENSIONS_ENABLED",
/**
* A boolean value indicating whether to use the URL bar experiments
*/
"EXPERIMENTAL_URL_BAR_ENABLED",
]
export const state = () => ({
settings: {},
editingEnvironment: {},
selectedRequest: {},
selectedGraphqlRequest: {},
editingRequest: {},
})
export const mutations = {
applySetting({ settings }, setting) {
if (
setting === null ||
!(setting instanceof Array) ||
setting.length !== 2
) {
throw new Error(
"You must provide a setting (array in the form [key, value])"
)
}
const [key, value] = setting
// Do not just remove this check.
// Add your settings key to the SETTINGS_KEYS array at the
// top of the file.
// This is to ensure that application settings remain documented.
if (!SETTINGS_KEYS.includes(key)) {
throw new Error(`The settings structure does not include the key ${key}`)
}
settings[key] = value
},
removeVariables({ editingEnvironment }, value) {
editingEnvironment.variables = value
},
setEditingEnvironment(state, value) {
state.editingEnvironment = { ...value }
},
setVariableKey({ editingEnvironment }, { index, value }) {
editingEnvironment.variables[index].key = value
},
setVariableValue({ editingEnvironment }, { index, value }) {
editingEnvironment.variables[index].value = testValue(value)
},
removeVariable({ editingEnvironment }, variables) {
editingEnvironment.variables = variables
},
addVariable({ editingEnvironment }, value) {
editingEnvironment.variables.push(value)
},
replaceEnvironments(state, environments) {
state.environments = environments
},
importAddEnvironments(state, { environments, confirmation }) {
const duplicateEnvironment = environments.some((item) => {
return state.environments.some((item2) => {
return item.name.toLowerCase() === item2.name.toLowerCase()
})
})
if (duplicateEnvironment) {
this.$toast.info("Duplicate environment")
return
}
state.environments = [...state.environments, ...environments]
let index = 0
for (const environment of state.environments) {
environment.environmentIndex = index
index += 1
}
this.$toast.info(confirmation, {
icon: "folder_shared",
})
},
removeEnvironment({ environments }, environmentIndex) {
environments.splice(environmentIndex, 1)
},
saveEnvironment({ environments }, payload) {
const { environment, environmentIndex } = payload
const { name } = environment
const duplicateEnvironment =
environments.length === 1
? false
: environments.some(
(item) =>
item.environmentIndex !== environmentIndex &&
item.name.toLowerCase() === name.toLowerCase()
)
if (duplicateEnvironment) {
this.$toast.info("Duplicate environment")
return
}
environments[environmentIndex] = environment
},
replaceCollections(state, item) {
const collections = item.data
const flag = item.flag
if (flag === "rest") state.collections = collections
else state.collectionsGraphql = collections
},
importCollections(state, item) {
const collections = item.data
const flag = item.flag
if (flag === "rest")
state.collections = [...state.collections, ...collections]
else
state.collectionsGraphql = [...state.collectionsGraphql, ...collections]
let index = 0
for (const collection of collections) {
collection.collectionIndex = index
index += 1
}
},
addNewCollection({ collections, collectionsGraphql }, collection) {
const name = collection.name
const flag = collection.flag
let duplicateCollection = null
if (flag === "rest") {
duplicateCollection = collections.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
} else {
duplicateCollection = collectionsGraphql.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
}
if (duplicateCollection) {
this.$toast.info("Duplicate collection")
return
}
if (flag === "rest") {
collections.push({
name: "",
folders: [],
requests: [],
...collection,
})
} else {
collectionsGraphql.push({
name: "",
folders: [],
requests: [],
...collection,
})
}
},
removeCollection({ collections, collectionsGraphql }, payload) {
const { collectionIndex, flag } = payload
if (flag === "rest") collections.splice(collectionIndex, 1)
else collectionsGraphql.splice(collectionIndex, 1)
},
editCollection({ collections, collectionsGraphql }, payload) {
const { collection, collectionIndex, flag } = payload
const { name } = collection
let duplicateCollection = null
if (flag === "rest") {
duplicateCollection = collections.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
} else {
duplicateCollection = collectionsGraphql.some(
(item) => item.name.toLowerCase() === name.toLowerCase()
)
}
if (duplicateCollection) {
this.$toast.info("Duplicate collection")
return
}
if (flag === "rest") collections[collectionIndex] = collection
else collectionsGraphql[collectionIndex] = collection
},
addFolder({ collections, collectionsGraphql }, payload) {
const { name, path, flag } = payload
const newFolder = {
name,
requests: [],
folders: [],
}
// Walk from collections to destination with the path
const indexPaths = path.split("/").map((x) => parseInt(x))
let target = null
if (flag === "rest") target = collections[indexPaths.shift()]
else target = collectionsGraphql[indexPaths.shift()]
while (indexPaths.length > 0) target = target.folders[indexPaths.shift()]
target.folders.push(newFolder)
},
editFolder({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folder, folderIndex, folderName, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
const parentFolder = findFolder(folderName, collection, true)
if (parentFolder && parentFolder.folders) {
Vue.set(parentFolder.folders, folderIndex, folder)
}
},
removeFolder({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folderIndex, folderName, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
const parentFolder = findFolder(folderName, collection, true)
if (parentFolder && parentFolder.folders) {
parentFolder.folders.splice(folderIndex, 1)
}
},
editRequest({ collections, collectionsGraphql }, payload) {
const {
requestCollectionIndex,
requestFolderName,
requestFolderIndex,
requestNew,
requestIndex,
flag,
} = payload
let collection = null
if (flag === "rest") collection = collections[requestCollectionIndex]
else collection = collectionsGraphql[requestCollectionIndex]
if (requestFolderIndex === -1) {
Vue.set(collection.requests, requestIndex, requestNew)
return
}
const folder = findFolder(requestFolderName, collection, false)
Vue.set(folder.requests, requestIndex, requestNew)
},
saveRequestAs({ collections, collectionsGraphql }, payload) {
let { request } = payload
const { collectionIndex, folderName, requestIndex, flag } = payload
if (flag === "rest") {
// Filter out all file inputs
request = {
...request,
bodyParams: request.bodyParams.map((param) =>
param?.value?.[0] instanceof File ? { ...param, value: "" } : param
),
}
}
const specifiedCollection = collectionIndex !== undefined
const specifiedFolder = folderName !== undefined
const specifiedRequest = requestIndex !== undefined
if (specifiedCollection && specifiedFolder && specifiedRequest) {
const folder = findFolder(
folderName,
flag === "rest"
? collections[collectionIndex]
: collectionsGraphql[collectionIndex]
)
Vue.set(folder.requests, requestIndex, request)
} else if (specifiedCollection && specifiedFolder && !specifiedRequest) {
const folder = findFolder(
folderName,
flag === "rest"
? collections[collectionIndex]
: collectionsGraphql[collectionIndex]
)
const requests = folder.requests
const lastRequestIndex = requests.length - 1
Vue.set(requests, lastRequestIndex + 1, request)
} else if (specifiedCollection && !specifiedFolder && specifiedRequest) {
const requests =
flag === "rest"
? collections[collectionIndex].requests
: collectionsGraphql[collectionIndex].requests
Vue.set(requests, requestIndex, request)
} else if (specifiedCollection && !specifiedFolder && !specifiedRequest) {
const requests =
flag === "rest"
? collections[collectionIndex].requests
: collectionsGraphql[collectionIndex].requests
const lastRequestIndex = requests.length - 1
Vue.set(requests, lastRequestIndex + 1, request)
}
},
removeRequest({ collections, collectionsGraphql }, payload) {
const { collectionIndex, folderName, requestIndex, flag } = payload
let collection = null
if (flag === "rest") collection = collections[collectionIndex]
else collection = collectionsGraphql[collectionIndex]
if (collection.name === folderName) {
collection.requests.splice(requestIndex, 1)
return
}
const folder = findFolder(folderName, collection, false)
if (folder) {
folder.requests.splice(requestIndex, 1)
}
},
selectRequest(state, { request }) {
state.selectedRequest = Object.assign({}, request)
},
selectGraphqlRequest(state, { request }) {
state.selectedGraphqlRequest = Object.assign({}, request)
},
moveRequest({ collections, collectionsGraphql }, payload) {
const {
oldCollectionIndex,
newCollectionIndex,
newFolderIndex,
newFolderName,
oldFolderName,
requestIndex,
flag,
} = payload
const isCollection = newFolderIndex === -1
let oldCollection = null
if (flag === "rest") oldCollection = collections[oldCollectionIndex]
else oldCollection = collectionsGraphql[oldCollectionIndex]
let newCollection = null
if (flag === "rest") newCollection = collections[newCollectionIndex]
else newCollection = collectionsGraphql[newCollectionIndex]
const request = findRequest(oldFolderName, oldCollection, requestIndex)
if (isCollection) {
newCollection.requests.push(request)
return
}
if (!isCollection) {
const folder = findFolder(newFolderName, newCollection, false)
if (folder) {
folder.requests.push(request)
}
}
},
}
function testValue(myValue) {
try {
return JSON.parse(myValue)
} catch (ex) {
// Now we know it's a string just leave it as a string value.
return myValue
}
}
function findRequest(folderName, currentFolder, requestIndex) {
let selectedFolder, result
if (folderName === currentFolder.name) {
const request = currentFolder.requests[requestIndex]
currentFolder.requests.splice(requestIndex, 1)
return request
} else {
for (let i = 0; i < currentFolder.folders.length; i += 1) {
selectedFolder = currentFolder.folders[i]
result = findRequest(folderName, selectedFolder, requestIndex)
if (result !== false) {
return result
}
}
return false
}
}
function findFolder(folderName, currentFolder, returnParent, parentFolder) {
let selectedFolder, result
if (folderName === currentFolder.name && returnParent) {
return parentFolder
} else if (folderName === currentFolder.name && !returnParent) {
return currentFolder
} else {
for (let i = 0; i < currentFolder.folders.length; i++) {
selectedFolder = currentFolder.folders[i]
result = findFolder(
folderName,
selectedFolder,
returnParent,
currentFolder
)
if (result !== false) {
return result
}
}
return false
}
}