refactor: monorepo+pnpm (removed husky)

This commit is contained in:
Andrew Bastin
2021-09-10 00:28:28 +05:30
parent 917550ff4d
commit b28f82a881
445 changed files with 81301 additions and 63752 deletions

View File

@@ -0,0 +1,254 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@drop="dragging = false"
@dragleave="dragging = false"
@dragend="dragging = false"
>
<span
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
cursor-pointer
flex flex-1
min-w-0
py-2
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
<span class="truncate"> {{ collection.name }} </span>
</span>
<div class="flex">
<ButtonSecondary
v-if="doc && !selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('import.title')"
svg="circle"
color="green"
@click.native="$emit('select-collection')"
/>
<ButtonSecondary
v-if="doc && selected"
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.remove')"
svg="check-circle"
color="green"
@click.native="$emit('unselect-collection')"
/>
<ButtonSecondary
v-if="!doc"
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
/>
<span>
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-collection')
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div>
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(folder, index) in collection.folders"
:key="`folder-${index}`"
class="border-l border-dividerLight ml-6"
: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="`request-${index}`"
class="border-l border-dividerLight ml-6"
: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="
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-6
p-4
items-center
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-center">
{{ $t("empty.collection") }}
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('confirm.remove_collection')"
@hide-modal="confirmRemove = false"
@resolve="removeCollection"
/>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import { moveRESTRequest } from "~/newstore/collections"
export default defineComponent({
props: {
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
showChildren: false,
dragging: false,
selectedFolder: {},
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-collection" &&
this.picked.collectionIndex === this.collectionIndex
)
},
getCollectionIcon() {
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},
methods: {
editRequest(event) {
this.$emit("edit-request", event)
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-collection",
collectionIndex: this.collectionIndex,
},
})
this.$emit("expand-collection", this.collection.id)
this.showChildren = !this.showChildren
},
removeCollection() {
this.$emit("remove-collection", {
collectionsType: this.collectionsType,
collectionIndex: this.collectionIndex,
collectionID: this.collection.id,
})
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging
const folderPath = dataTransfer.getData("folderPath")
const requestIndex = dataTransfer.getData("requestIndex")
moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
},
},
})
</script>

View File

@@ -0,0 +1,259 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
@dragover.prevent
@drop.prevent="dropEvent"
@dragover="dragging = true"
@drop="dragging = false"
@dragleave="dragging = false"
@dragend="dragging = false"
>
<span
class="cursor-pointer flex px-4 justify-center items-center"
@click="toggleShowChildren()"
>
<SmartIcon
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
:name="getCollectionIcon"
/>
</span>
<span
class="
cursor-pointer
flex flex-1
min-w-0
py-2
pr-2
transition
group-hover:text-secondaryDark
"
@click="toggleShowChildren()"
>
<span class="truncate">
{{ folder.name ? folder.name : folder.title }}
</span>
</span>
<div class="flex">
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
svg="folder-plus"
:title="$t('folder.new')"
class="hidden group-hover:inline-flex"
@click.native="$emit('add-folder', { folder, path: folderPath })"
/>
<span>
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
svg="folder-plus"
:label="$t('folder.new')"
@click.native="
$emit('add-folder', { folder, path: folderPath })
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-folder', {
folder,
folderIndex,
collectionIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div>
<div v-if="showChildren || isFiltered">
<CollectionsMyFolder
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="`subFolder-${subFolderIndex}`"
class="border-l border-dividerLight ml-6"
: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="`request-${index}`"
class="border-l border-dividerLight ml-6"
: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="
border-l border-dividerLight
flex flex-col
text-secondaryLight
ml-6
p-4
items-center
justify-center
"
>
<i class="opacity-75 pb-2 material-icons">folder_open</i>
<span class="text-center">
{{ $t("empty.folder") }}
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('confirm.remove_folder')"
@hide-modal="confirmRemove = false"
@resolve="removeFolder"
/>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import {
removeRESTFolder,
removeRESTRequest,
moveRESTRequest,
} from "~/newstore/collections"
export default defineComponent({
name: "Folder",
props: {
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
collectionIndex: { type: Number, default: null },
folderPath: { type: String, default: null },
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: { type: Object, default: () => {} },
picked: { type: Object, default: () => {} },
},
data() {
return {
showChildren: false,
dragging: false,
confirmRemove: false,
prevCursor: "",
cursor: "",
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-folder" &&
this.picked.folderPath === this.folderPath
)
},
getCollectionIcon() {
if (this.isSelected) return "check-circle"
else if (!this.showChildren && !this.isFiltered) return "folder"
else if (this.showChildren || this.isFiltered) return "folder-minus"
else return "folder"
},
},
methods: {
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-folder",
collectionIndex: this.collectionIndex,
folderName: this.folder.name,
folderPath: this.folderPath,
},
})
this.showChildren = !this.showChildren
},
removeFolder() {
// TODO: Bubble it up ?
// Cancel pick if picked folder was deleted
if (
this.picked &&
this.picked.pickedType === "my-folder" &&
this.picked.folderPath === this.folderPath
) {
this.$emit("select", { picked: null })
}
removeRESTFolder(this.folderPath)
this.$toast.success(this.$t("state.deleted"), {
icon: "delete",
})
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging
const folderPath = dataTransfer.getData("folderPath")
const requestIndex = dataTransfer.getData("requestIndex")
moveRESTRequest(folderPath, requestIndex, this.folderPath)
},
removeRequest({ requestIndex }) {
// TODO: Bubble it up to root ?
// Cancel pick if the picked item is being deleted
if (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === requestIndex
) {
this.$emit("select", { picked: null })
}
removeRESTRequest(this.folderPath, requestIndex)
},
},
})
</script>

View File

@@ -0,0 +1,222 @@
<template>
<div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
<div
class="flex items-center group"
draggable="true"
@dragstart="dragStart"
@dragover.stop
@dragleave="dragging = false"
@dragend="dragging = false"
>
<span
class="
cursor-pointer
flex
px-2
w-16
justify-center
items-center
truncate
"
:class="getRequestLabelColor(request.method)"
@click="!doc ? selectRequest() : {}"
>
<SmartIcon
v-if="isSelected"
class="svg-icons"
:class="{ 'text-green-500': isSelected }"
name="check-circle"
/>
<span v-else class="truncate">
{{ request.method }}
</span>
</span>
<span
class="
cursor-pointer
flex flex-1
min-w-0
py-2
pr-2
transition
items-center
group-hover:text-secondaryDark
"
@click="!doc ? selectRequest() : {}"
>
<span class="truncate"> {{ request.name }} </span>
<span
v-if="
active &&
active.originLocation === 'user-collection' &&
active.folderPath === folderPath &&
active.requestIndex === requestIndex
"
class="rounded-full bg-green-500 flex-shrink-0 h-1.5 mx-3 w-1.5"
></span>
</span>
<div class="flex">
<ButtonSecondary
v-if="!saveRequest && !doc"
v-tippy="{ theme: 'tooltip' }"
svg="rotate-ccw"
:title="$t('action.restore')"
class="hidden group-hover:inline-flex"
@click.native="!doc ? selectRequest() : {}"
/>
<span>
<tippy
ref="options"
interactive
trigger="click"
theme="popover"
arrow
>
<template #trigger>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="$t('action.more')"
svg="more-vertical"
/>
</template>
<SmartItem
svg="edit"
:label="$t('action.edit')"
@click.native="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
$refs.options.tippy().hide()
"
/>
<SmartItem
svg="trash-2"
color="red"
:label="$t('action.delete')"
@click.native="
confirmRemove = true
$refs.options.tippy().hide()
"
/>
</tippy>
</span>
</div>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('confirm.remove_request')"
@hide-modal="confirmRemove = false"
@resolve="removeRequest"
/>
</div>
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api"
import { translateToNewRequest } from "~/helpers/types/HoppRESTRequest"
import { useReadonlyStream } from "~/helpers/utils/composables"
import {
restSaveContext$,
setRESTRequest,
setRESTSaveContext,
} from "~/newstore/RESTSession"
export default defineComponent({
props: {
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
// eslint-disable-next-line vue/require-default-prop
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
picked: { type: Object, default: () => {} },
},
setup() {
const active = useReadonlyStream(restSaveContext$, null)
return {
active,
}
},
data() {
return {
dragging: false,
requestMethodLabels: {
get: "text-green-500",
post: "text-yellow-500",
put: "text-blue-500",
delete: "text-red-500",
default: "text-gray-500",
},
confirmRemove: false,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
},
methods: {
selectRequest() {
if (
this.active &&
this.active.originLocation === "user-collection" &&
this.active.folderPath === this.folderPath &&
this.active.requestIndex === this.requestIndex
) {
setRESTSaveContext(null)
return
}
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-request",
collectionIndex: this.collectionIndex,
folderPath: this.folderPath,
folderName: this.folderName,
requestIndex: this.requestIndex,
},
})
else {
setRESTRequest(translateToNewRequest(this.request), {
originLocation: "user-collection",
folderPath: this.folderPath,
requestIndex: this.requestIndex,
})
}
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging
dataTransfer.setData("folderPath", this.folderPath)
dataTransfer.setData("requestIndex", this.requestIndex)
},
removeRequest() {
this.$emit("remove-request", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folderName,
folderPath: this.folderPath,
requestIndex: this.$props.requestIndex,
})
},
getRequestLabelColor(method) {
return (
this.requestMethodLabels[method.toLowerCase()] ||
this.requestMethodLabels.default
)
},
},
})
</script>