feat: revamp collections ui
This commit is contained in:
liyasthomas
@@ -20,6 +20,7 @@
|
||||
<tippy
|
||||
v-else
|
||||
ref="user"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
@@ -63,6 +64,7 @@
|
||||
<span tabindex="-1">
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"
|
||||
:class="[
|
||||
color
|
||||
? `text-${color}-500 hover:text-${color}-600 focus:text-${color}-600`
|
||||
? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
|
||||
: 'text-secondaryLight hover:text-secondary focus:text-secondary',
|
||||
label ? 'px-3 rounded-lg' : 'px-2 rounded-full',
|
||||
rounded ? 'rounded-full' : 'rounded-lg',
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div v-if="show">
|
||||
<SmartTabs
|
||||
:id="'collections_tab'"
|
||||
styles="m-4"
|
||||
@tab-changed="updateCollectionsType"
|
||||
>
|
||||
<SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
|
||||
<SmartTab
|
||||
:id="'my-collections'"
|
||||
:label="'My Collections'"
|
||||
@@ -15,38 +11,40 @@
|
||||
:id="'team-collections'"
|
||||
:label="'Team Collections'"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<span class="select-wrapper">
|
||||
<SmartIntersection @intersecting="onTeamSelectIntersect">
|
||||
<select
|
||||
id="team"
|
||||
type="text"
|
||||
class="team select"
|
||||
autofocus
|
||||
@change="updateSelectedTeam(myTeams[$event.target.value])"
|
||||
>
|
||||
<option
|
||||
:key="undefined"
|
||||
:value="undefined"
|
||||
hidden
|
||||
disabled
|
||||
selected
|
||||
>
|
||||
Select team
|
||||
</option>
|
||||
<option
|
||||
v-for="(team, index) in myTeams"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
{{ team.name }}
|
||||
</option>
|
||||
</select>
|
||||
</SmartIntersection>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
<SmartIntersection @intersecting="onTeamSelectIntersect">
|
||||
<select
|
||||
id="team"
|
||||
type="text"
|
||||
autofocus
|
||||
class="
|
||||
flex
|
||||
w-full
|
||||
px-4
|
||||
text-xs
|
||||
py-2
|
||||
focus:outline-none
|
||||
border-b border-dividerLight
|
||||
"
|
||||
@change="updateSelectedTeam(myTeams[$event.target.value])"
|
||||
>
|
||||
<option
|
||||
:key="undefined"
|
||||
:value="undefined"
|
||||
hidden
|
||||
disabled
|
||||
selected
|
||||
>
|
||||
Select team
|
||||
</option>
|
||||
<option
|
||||
v-for="(team, index) in myTeams"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
{{ team.name }}
|
||||
</option>
|
||||
</select>
|
||||
</SmartIntersection>
|
||||
</SmartTab>
|
||||
</SmartTabs>
|
||||
</div>
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
mode == 'import_export' && collectionsType.type == 'my-collections'
|
||||
"
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -33,13 +33,14 @@
|
||||
/>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
@@ -79,7 +80,7 @@
|
||||
<li
|
||||
v-for="(folder, index) in collection.folders"
|
||||
:key="folder.name"
|
||||
class="ml-8 border-l border-divider"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
>
|
||||
<CollectionsGraphqlFolder
|
||||
:picked="picked"
|
||||
@@ -101,7 +102,7 @@
|
||||
<li
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-8 border-l border-divider"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
>
|
||||
<CollectionsGraphqlRequest
|
||||
:picked="picked"
|
||||
@@ -123,7 +124,12 @@
|
||||
v-if="
|
||||
collection.folders.length === 0 && collection.requests.length === 0
|
||||
"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
class="
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
|
||||
@@ -23,9 +23,16 @@
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
<span>{{ folder.name }}</span>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
@@ -62,7 +69,7 @@
|
||||
<li
|
||||
v-for="(subFolder, subFolderIndex) in folder.folders"
|
||||
:key="subFolder.name"
|
||||
class="ml-8 border-l border-divider"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
>
|
||||
<CollectionsGraphqlFolder
|
||||
:picked="picked"
|
||||
@@ -84,7 +91,7 @@
|
||||
<li
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
>
|
||||
<CollectionsGraphqlRequest
|
||||
:picked="picked"
|
||||
@@ -109,7 +116,14 @@
|
||||
folder.requests.length === 0
|
||||
"
|
||||
>
|
||||
<li class="flex ml-8 border-l border-divider">
|
||||
<li
|
||||
class="
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("folder_empty") }}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
<div>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -10,17 +10,22 @@
|
||||
>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
:class="{ 'mx-3 text-green-400': isSelected }"
|
||||
:icon="isSelected ? 'check_circle' : 'description'"
|
||||
:label="request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<AppSection label="collections">
|
||||
<div class="flex">
|
||||
<div class="flex sticky top-10 border-b border-dividerLight">
|
||||
<input
|
||||
v-if="!saveRequest"
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
type="search"
|
||||
:placeholder="$t('search')"
|
||||
class="px-4 py-2 text-xs flex flex-1"
|
||||
class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<CollectionsChooseType
|
||||
@@ -53,7 +53,7 @@
|
||||
@hide-modal="displayModalImportExport(false)"
|
||||
@update-team-collections="updateTeamCollections"
|
||||
/>
|
||||
<div class="border-b flex flex-1 border-divider">
|
||||
<div class="border-b flex justify-between flex-1 border-dividerLight">
|
||||
<ButtonSecondary
|
||||
v-if="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
@@ -75,58 +75,65 @@
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="!saveRequest"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:disabled="
|
||||
collectionsType.type == 'team-collections' &&
|
||||
collectionsType.selectedTeam == undefined
|
||||
"
|
||||
:label="$t('import_export')"
|
||||
icon="import_export"
|
||||
:title="$t('import_export')"
|
||||
@click.native="displayModalImportExport(true)"
|
||||
/>
|
||||
</div>
|
||||
<p v-if="collections.length === 0">
|
||||
<i class="material-icons">help_outline</i>
|
||||
{{ $t("create_new_collection") }}
|
||||
</p>
|
||||
<div class="overflow-auto">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
:key="collection.name"
|
||||
>
|
||||
<component
|
||||
:is="
|
||||
collectionsType.type == 'my-collections'
|
||||
? 'CollectionsMyCollection'
|
||||
: 'CollectionsTeamsCollection'
|
||||
"
|
||||
:name="collection.name"
|
||||
:collection-index="index"
|
||||
:collection="collection"
|
||||
:doc="doc"
|
||||
:is-filtered="filterText.length > 0"
|
||||
:selected="selected.some((coll) => coll == collection)"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-collection="editCollection(collection, index)"
|
||||
@add-folder="addFolder($event)"
|
||||
@edit-folder="editFolder($event)"
|
||||
@edit-request="editRequest($event)"
|
||||
@update-team-collections="updateTeamCollections"
|
||||
@select-collection="$emit('use-collection', collection)"
|
||||
@unselect-collection="$emit('remove-collection', collection)"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-collection="removeCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
v-if="collections.length === 0"
|
||||
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">create_new_folder</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("create_new_collection") }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<component
|
||||
:is="
|
||||
collectionsType.type == 'my-collections'
|
||||
? 'CollectionsMyCollection'
|
||||
: 'CollectionsTeamsCollection'
|
||||
"
|
||||
v-for="(collection, index) in filteredCollections"
|
||||
:key="collection.name"
|
||||
:name="collection.name"
|
||||
:collection-index="index"
|
||||
:collection="collection"
|
||||
:doc="doc"
|
||||
:is-filtered="filterText.length > 0"
|
||||
:selected="selected.some((coll) => coll == collection)"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-collection="editCollection(collection, index)"
|
||||
@add-folder="addFolder($event)"
|
||||
@edit-folder="editFolder($event)"
|
||||
@edit-request="editRequest($event)"
|
||||
@update-team-collections="updateTeamCollections"
|
||||
@select-collection="$emit('use-collection', collection)"
|
||||
@unselect-collection="$emit('remove-collection', collection)"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-collection="removeCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="filterText && filteredCollections.length === 0"
|
||||
class="flex items-center text-secondaryLight flex-col p-4 justify-center"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">manage_search</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("nothing_found") }} "{{ filterText }}"
|
||||
</span>
|
||||
</div>
|
||||
<p v-if="filterText && filteredCollections.length === 0">
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("nothing_found") }} "{{ filterText }}"
|
||||
</p>
|
||||
</AppSection>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||
<div
|
||||
:class="[{ 'bg-primaryDark': dragging }]"
|
||||
class="flex items-center group"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -9,143 +9,165 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-10
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<i class="material-icons">{{ getCollectionIcon }}</i>
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<span class="truncate"> {{ collection.name }} </span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
:label="collection.name"
|
||||
@click.native="toggleShowChildren"
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
icon="check_box_outline_blank"
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="check_box"
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="create_new_folder"
|
||||
:title="$t('new_folder')"
|
||||
class="group-hover:inline-flex hidden"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
icon="check_box_outline_blank"
|
||||
@click.native="$emit('select-collection')"
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="create_new_folder"
|
||||
:label="$t('new_folder')"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="check_box"
|
||||
@click.native="$emit('unselect-collection')"
|
||||
<SmartItem
|
||||
icon="create"
|
||||
:label="$t('edit')"
|
||||
@click.native="
|
||||
$emit('edit-collection')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<tippy
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
icon="create_new_folder"
|
||||
:label="$t('new_folder')"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="create"
|
||||
:label="$t('edit')"
|
||||
@click.native="
|
||||
$emit('edit-collection')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
icon="delete"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
<SmartItem
|
||||
icon="delete"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
<div v-show="showChildren || isFiltered">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(folder, index) in collection.folders"
|
||||
:key="index"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsMyFolder
|
||||
:folder="folder"
|
||||
:folder-index="index"
|
||||
:folder-path="`${collectionIndex}/${index}`"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:is-filtered="isFiltered"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="$emit('remove-request', $event)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsMyRequest
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="-1"
|
||||
:folder-name="collection.name"
|
||||
:folder-path="collectionIndex.toString()"
|
||||
:request-index="index"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="editRequest($event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="$emit('remove-request', $event)"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li
|
||||
v-if="
|
||||
(collection.folders == undefined ||
|
||||
collection.folders.length === 0) &&
|
||||
(collection.requests == undefined ||
|
||||
collection.requests.length === 0)
|
||||
"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
>
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("collection_empty") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<CollectionsMyFolder
|
||||
v-for="(folder, index) in collection.folders"
|
||||
:key="index"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:folder="folder"
|
||||
:folder-index="index"
|
||||
:folder-path="`${collectionIndex}/${index}`"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:is-filtered="isFiltered"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="$emit('remove-request', $event)"
|
||||
/>
|
||||
<CollectionsMyRequest
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="-1"
|
||||
:folder-name="collection.name"
|
||||
:folder-path="collectionIndex.toString()"
|
||||
:request-index="index"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="editRequest($event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="$emit('remove-request', $event)"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
(collection.folders == undefined ||
|
||||
collection.folders.length === 0) &&
|
||||
(collection.requests == undefined || collection.requests.length === 0)
|
||||
"
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
text-secondaryLight
|
||||
flex-col
|
||||
p-4
|
||||
justify-center
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">folder_open</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("collection_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
@@ -189,6 +211,12 @@ export default {
|
||||
this.picked.collectionIndex === this.collectionIndex
|
||||
)
|
||||
},
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check_circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
|
||||
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
editRequest(event) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||
<div
|
||||
:class="[{ 'bg-primaryDark': dragging }]"
|
||||
class="flex items-center group"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropEvent"
|
||||
@dragover="dragging = true"
|
||||
@@ -9,25 +9,54 @@
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
:label="folder.name ? folder.name : folder.title"
|
||||
@click.native="toggleShowChildren"
|
||||
/>
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-10
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<i class="material-icons">{{ getCollectionIcon }}</i>
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<span class="truncate">
|
||||
{{ folder.name ? folder.name : folder.title }}
|
||||
</span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="create_new_folder"
|
||||
:title="$t('new_folder')"
|
||||
class="group-hover:inline-flex hidden"
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
@@ -56,7 +85,7 @@
|
||||
/>
|
||||
<SmartItem
|
||||
icon="delete"
|
||||
:labl="$t('delete')"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
@@ -65,68 +94,66 @@
|
||||
</tippy>
|
||||
</div>
|
||||
<div v-show="showChildren || isFiltered">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(subFolder, subFolderIndex) in folder.folders"
|
||||
:key="subFolder.name"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsMyFolder
|
||||
:folder="subFolder"
|
||||
:folder-index="subFolderIndex"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:folder-path="`${folderPath}/${subFolderIndex}`"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@update-team-collections="$emit('update-team-collections')"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsMyRequest
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="folderIndex"
|
||||
:folder-name="folder.name"
|
||||
:folder-path="folderPath"
|
||||
:request-index="index"
|
||||
:doc="doc"
|
||||
:picked="picked"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<CollectionsMyFolder
|
||||
v-for="(subFolder, subFolderIndex) in folder.folders"
|
||||
:key="subFolder.name"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:folder="subFolder"
|
||||
:folder-index="subFolderIndex"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:folder-path="`${folderPath}/${subFolderIndex}`"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@update-team-collections="$emit('update-team-collections')"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<CollectionsMyRequest
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:request="request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="folderIndex"
|
||||
:folder-name="folder.name"
|
||||
:folder-path="folderPath"
|
||||
:request-index="index"
|
||||
:doc="doc"
|
||||
:picked="picked"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
folder.folders &&
|
||||
folder.folders.length === 0 &&
|
||||
folder.requests &&
|
||||
folder.requests.length === 0
|
||||
"
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
text-secondaryLight
|
||||
flex-col
|
||||
p-4
|
||||
justify-center
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<li class="flex ml-8 border-l border-divider">
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("folder_empty") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<i class="material-icons opacity-50 pb-2">folder_open</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("folder_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
@@ -174,6 +201,12 @@ export default {
|
||||
this.picked.folderPath === this.folderPath
|
||||
)
|
||||
},
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check_circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
|
||||
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleShowChildren() {
|
||||
|
||||
@@ -1,29 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
|
||||
<div
|
||||
:class="[{ 'bg-primaryDark': dragging }]"
|
||||
class="flex items-center group"
|
||||
draggable="true"
|
||||
@dragstart="dragStart"
|
||||
@dragover.stop
|
||||
@dragleave="dragging = false"
|
||||
@dragend="dragging = false"
|
||||
>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
:class="[
|
||||
getRequestLabelColor(request.method),
|
||||
{ 'mx-3 text-green-400': isSelected },
|
||||
]"
|
||||
:icon="isSelected ? 'check_circle' : ''"
|
||||
:label="request.method + request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<span
|
||||
class="
|
||||
font-mono font-bold
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-12
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
:class="[
|
||||
getRequestLabelColor(request.method),
|
||||
{ 'mx-3 text-green-400': isSelected },
|
||||
]"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="material-icons">check_circle</i>
|
||||
{{ request.method }}
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<span class="truncate"> {{ request.name }} </span>
|
||||
</span>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
|
||||
@@ -1,147 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center group">
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-10
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<i class="material-icons">{{ getCollectionIcon }}</i>
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<span class="truncate"> {{ collection.title }} </span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
:label="collection.title"
|
||||
@click.native="toggleShowChildren"
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
icon="check_box_outline_blank"
|
||||
@click.native="$emit('select-collection')"
|
||||
/>
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="check_box"
|
||||
@click.native="$emit('unselect-collection')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="create_new_folder"
|
||||
:title="$t('new_folder')"
|
||||
class="group-hover:inline-flex hidden"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
"
|
||||
/>
|
||||
<tippy
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder</i>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-if="doc && !selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('import')"
|
||||
icon="check_box_outline_blank"
|
||||
@click.native="$emit('select-collection')"
|
||||
<template #trigger>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="create_new_folder"
|
||||
:label="$t('new_folder')"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
v-if="doc && selected"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('delete')"
|
||||
icon="check_box"
|
||||
@click.native="$emit('unselect-collection')"
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="create"
|
||||
:label="$t('edit')"
|
||||
@click.native="
|
||||
$emit('edit-collection')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<tippy
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
/>
|
||||
</template>
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="create_new_folder"
|
||||
:label="$t('new_folder')"
|
||||
@click.native="
|
||||
$emit('add-folder', {
|
||||
folder: collection,
|
||||
path: `${collectionIndex}`,
|
||||
})
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="create"
|
||||
:label="$t('edit')"
|
||||
@click.native="
|
||||
$emit('edit-collection')
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="delete"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
<SmartItem
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
icon="delete"
|
||||
:label="$t('delete')"
|
||||
@click.native="
|
||||
confirmRemove = true
|
||||
$refs.options.tippy().hide()
|
||||
"
|
||||
/>
|
||||
</tippy>
|
||||
</div>
|
||||
<div v-show="showChildren || isFiltered">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(folder, index) in collection.children"
|
||||
:key="folder.title"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsTeamsFolder
|
||||
:folder="folder"
|
||||
:folder-index="index"
|
||||
:folder-path="`${collectionIndex}/${index}`"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:is-filtered="isFiltered"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsTeamsRequest
|
||||
:request="request.request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="-1"
|
||||
:folder-name="collection.name"
|
||||
:request-index="request.id"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="editRequest($event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li
|
||||
v-if="
|
||||
(collection.children == undefined ||
|
||||
collection.children.length === 0) &&
|
||||
(collection.requests == undefined ||
|
||||
collection.requests.length === 0)
|
||||
"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
>
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("collection_empty") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<CollectionsTeamsFolder
|
||||
v-for="(folder, index) in collection.children"
|
||||
:key="folder.title"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:folder="folder"
|
||||
:folder-index="index"
|
||||
:folder-path="`${collectionIndex}/${index}`"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:is-filtered="isFiltered"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<CollectionsTeamsRequest
|
||||
v-for="(request, index) in collection.requests"
|
||||
:key="index"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:request="request.request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="-1"
|
||||
:folder-name="collection.name"
|
||||
:request-index="request.id"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="editRequest($event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
(collection.children == undefined ||
|
||||
collection.children.length === 0) &&
|
||||
(collection.requests == undefined || collection.requests.length === 0)
|
||||
"
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
text-secondaryLight
|
||||
flex-col
|
||||
p-4
|
||||
justify-center
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<i class="material-icons opacity-50 pb-2">folder_open</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("collection_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
@@ -167,7 +190,6 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
showChildren: false,
|
||||
dragging: false,
|
||||
selectedFolder: {},
|
||||
confirmRemove: false,
|
||||
prevCursor: "",
|
||||
@@ -183,6 +205,12 @@ export default {
|
||||
this.picked.collectionID === this.collection.id
|
||||
)
|
||||
},
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check_circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
|
||||
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
editRequest(event) {
|
||||
|
||||
@@ -1,26 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
:label="folder.name ? folder.name : folder.title"
|
||||
@click.native="toggleShowChildren"
|
||||
/>
|
||||
<i v-show="!showChildren && !isFiltered" class="material-icons"
|
||||
>arrow_right</i
|
||||
>
|
||||
<i v-show="showChildren || isFiltered" class="material-icons"
|
||||
>arrow_drop_down</i
|
||||
>
|
||||
<i v-if="isSelected" class="text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<i v-else class="material-icons">folder_open</i>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center group">
|
||||
<span
|
||||
class="
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-10
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<i class="material-icons">{{ getCollectionIcon }}</i>
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="toggleShowChildren()"
|
||||
>
|
||||
<span class="truncate">
|
||||
{{ folder.name ? folder.name : folder.title }}
|
||||
</span>
|
||||
</span>
|
||||
<ButtonSecondary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
icon="create_new_folder"
|
||||
:title="$t('new_folder')"
|
||||
class="group-hover:inline-flex hidden"
|
||||
@click.native="$emit('add-folder', { folder, path: folderPath })"
|
||||
/>
|
||||
<tippy
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
@@ -61,66 +91,64 @@
|
||||
</tippy>
|
||||
</div>
|
||||
<div v-show="showChildren || isFiltered">
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(subFolder, subFolderIndex) in folder.children"
|
||||
:key="subFolder.name"
|
||||
class="ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsTeamsFolder
|
||||
:folder="subFolder"
|
||||
:folder-index="subFolderIndex"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:folder-path="`${folderPath}/${subFolderIndex}`"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@update-team-collections="$emit('update-team-collections')"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex-col">
|
||||
<li
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="flex ml-8 border-l border-divider"
|
||||
>
|
||||
<CollectionsTeamsRequest
|
||||
:request="request.request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="folderIndex"
|
||||
:folder-name="folder.name"
|
||||
:request-index="request.id"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
<CollectionsTeamsFolder
|
||||
v-for="(subFolder, subFolderIndex) in folder.children"
|
||||
:key="subFolder.name"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:folder="subFolder"
|
||||
:folder-index="subFolderIndex"
|
||||
:collection-index="collectionIndex"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:folder-path="`${folderPath}/${subFolderIndex}`"
|
||||
:picked="picked"
|
||||
@add-folder="$emit('add-folder', $event)"
|
||||
@edit-folder="$emit('edit-folder', $event)"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@update-team-collections="$emit('update-team-collections')"
|
||||
@select="$emit('select', $event)"
|
||||
@expand-collection="expandCollection"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<CollectionsTeamsRequest
|
||||
v-for="(request, index) in folder.requests"
|
||||
:key="index"
|
||||
class="ml-5 border-l border-dividerLight"
|
||||
:request="request.request"
|
||||
:collection-index="collectionIndex"
|
||||
:folder-index="folderIndex"
|
||||
:folder-name="folder.name"
|
||||
:request-index="request.id"
|
||||
:doc="doc"
|
||||
:save-request="saveRequest"
|
||||
:collections-type="collectionsType"
|
||||
:picked="picked"
|
||||
@edit-request="$emit('edit-request', $event)"
|
||||
@select="$emit('select', $event)"
|
||||
@remove-request="removeRequest"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
(folder.children == undefined || folder.children.length === 0) &&
|
||||
(folder.requests == undefined || folder.requests.length === 0)
|
||||
"
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
text-secondaryLight
|
||||
flex-col
|
||||
p-4
|
||||
justify-center
|
||||
ml-5
|
||||
border-l border-dividerLight
|
||||
"
|
||||
>
|
||||
<li class="flex ml-8 border-l border-divider">
|
||||
<p>
|
||||
<i class="material-icons">not_interested</i>
|
||||
{{ $t("folder_empty") }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<i class="material-icons opacity-50 pb-2">folder_open</i>
|
||||
<span class="text-xs">
|
||||
{{ $t("folder_empty") }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<SmartConfirmModal
|
||||
:show="confirmRemove"
|
||||
@@ -163,6 +191,12 @@ export default {
|
||||
this.picked.folderID === this.folder.id
|
||||
)
|
||||
},
|
||||
getCollectionIcon() {
|
||||
if (this.isSelected) return "check_circle"
|
||||
else if (!this.showChildren && !this.isFiltered) return "arrow_right"
|
||||
else if (this.showChildren || this.isFiltered) return "arrow_drop_down"
|
||||
else return "folder"
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleShowChildren() {
|
||||
|
||||
@@ -1,24 +1,52 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="!doc ? $t('use_request') : ''"
|
||||
:label="request.name"
|
||||
@click.native="!doc ? selectRequest() : {}"
|
||||
/>
|
||||
<i v-if="isSelected" class="mx-3 text-green-400 material-icons"
|
||||
>check_circle</i
|
||||
>
|
||||
<span v-else :class="getRequestLabelColor(request.method)">{{
|
||||
request.method
|
||||
}}</span>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center group">
|
||||
<span
|
||||
class="
|
||||
font-mono font-bold
|
||||
flex
|
||||
justify-center
|
||||
items-center
|
||||
text-xs
|
||||
w-12
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
:class="[
|
||||
getRequestLabelColor(request.method),
|
||||
{ 'mx-3 text-green-400': isSelected },
|
||||
]"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<i v-if="isSelected" class="material-icons">check_circle</i>
|
||||
{{ request.method }}
|
||||
</span>
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-xs
|
||||
group-hover:text-secondaryDark
|
||||
transition
|
||||
"
|
||||
@click="!doc ? selectRequest() : {}"
|
||||
>
|
||||
<span class="truncate"> {{ request.name }} </span>
|
||||
</span>
|
||||
<tippy
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
|
||||
<ButtonSecondary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
:title="$t('more')"
|
||||
icon="more_vert"
|
||||
@@ -73,7 +101,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dragging: false,
|
||||
requestMethodLabels: {
|
||||
get: "text-green-400",
|
||||
post: "text-yellow-400",
|
||||
|
||||
@@ -8,7 +8,14 @@
|
||||
@click.native="$emit('edit-environment')"
|
||||
/>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<div>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -28,7 +28,14 @@
|
||||
:icon="expand ? 'unfold_less' : 'unfold_more'"
|
||||
@click.native="expand = !expand"
|
||||
/>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<AppSection label="history">
|
||||
<div class="flex sticky top-10 shadow-sm">
|
||||
<div class="flex sticky top-10 border-b border-dividerLight">
|
||||
<input
|
||||
v-model="filterText"
|
||||
aria-label="Search"
|
||||
type="search"
|
||||
class="px-4 py-2 text-xs flex flex-1 focus:outline-none border-divider"
|
||||
class="px-4 py-3 text-xs flex flex-1 bg-primary focus:outline-none"
|
||||
:placeholder="$t('search')"
|
||||
/>
|
||||
<ButtonSecondary
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex group">
|
||||
<div class="flex items-center group">
|
||||
<span
|
||||
class="
|
||||
font-mono font-bold
|
||||
@@ -10,14 +10,26 @@
|
||||
w-12
|
||||
mx-2
|
||||
truncate
|
||||
cursor-pointer
|
||||
"
|
||||
:class="entryStatus.className"
|
||||
:style="{ '--status-code': entry.status }"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
{{ entry.method }}
|
||||
</span>
|
||||
<span class="py-3 pr-3 flex flex-1 min-w-0 text-secondaryLight text-xs">
|
||||
<span
|
||||
class="
|
||||
py-3
|
||||
cursor-pointer
|
||||
pr-3
|
||||
flex flex-1
|
||||
min-w-0
|
||||
text-secondaryLight text-xs
|
||||
group-hover:text-secondary
|
||||
transition
|
||||
"
|
||||
@click="$emit('use-entry')"
|
||||
>
|
||||
<span class="truncate">
|
||||
{{ `${entry.url}${entry.path}` }}
|
||||
</span>
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<span>
|
||||
<tippy
|
||||
ref="language"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-nowrap relative flex-1">
|
||||
<div class="tabs hide-scrollbar" :class="styles">
|
||||
<div class="flex flex-col flex-nowrap flex-1">
|
||||
<div class="tabs hide-scrollbar relative" :class="styles">
|
||||
<div class="flex w-0">
|
||||
<div class="inline-flex">
|
||||
<button
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="inline-block cursor-pointer" @click="toggle()">
|
||||
<div class="inline-block cursor-pointer" @click="$emit('change')">
|
||||
<label ref="toggle" class="toggle" :class="{ on: on }">
|
||||
<span class="handle"></span>
|
||||
</label>
|
||||
@@ -17,13 +17,6 @@ export default {
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
toggle() {
|
||||
const containsOnClass = this.$refs.toggle.classList.toggle("on")
|
||||
this.$emit("change", containsOnClass)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -57,6 +57,7 @@
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
@@ -136,6 +137,7 @@
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
ref="memberOptions"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
|
||||
@@ -9,7 +9,14 @@
|
||||
@click.native="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
|
||||
/>
|
||||
</div>
|
||||
<tippy ref="options" tabindex="-1" trigger="click" theme="popover" arrow>
|
||||
<tippy
|
||||
ref="options"
|
||||
interactive
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
theme="popover"
|
||||
arrow
|
||||
>
|
||||
<template #trigger>
|
||||
<TabPrimary
|
||||
v-tippy="{ theme: 'tooltip' }"
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
<li class="shrink">
|
||||
<label for="method">{{ $t("method") }}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
<tippy interactive
|
||||
ref="options"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
@@ -104,7 +104,7 @@
|
||||
$t("content_type")
|
||||
}}</label>
|
||||
<span class="select-wrapper">
|
||||
<tippy
|
||||
<tippy interactive
|
||||
ref="contentTypeOptions"
|
||||
tabindex="-1"
|
||||
trigger="click"
|
||||
@@ -599,7 +599,7 @@
|
||||
</Pane>
|
||||
</Splitpanes>
|
||||
</Pane>
|
||||
<Pane max-size="35" min-size="20" class="overflow-auto hide-scrollbar">
|
||||
<Pane max-size="30" size="25" min-size="20" class="overflow-auto hide-scrollbar">
|
||||
<aside class="h-full">
|
||||
<SmartTabs styles="sticky top-0">
|
||||
<SmartTab :id="'history'" :label="$t('history')" :selected="true">
|
||||
|
||||
@@ -3,6 +3,5 @@ import VueTippy, { TippyComponent } from "vue-tippy"
|
||||
|
||||
Vue.use(VueTippy, {
|
||||
animateFill: false,
|
||||
interactive: true,
|
||||
})
|
||||
Vue.component("Tippy", TippyComponent)
|
||||
|
||||
@@ -33,5 +33,4 @@ export default defineConfig({
|
||||
icon: "var(--font-icon)",
|
||||
},
|
||||
},
|
||||
safelist: "text-red-500 text-red-600",
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user