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

Re-added the draggable button component to the variables UI component

Browse Source
This commit is contained in:
Jason Casareno
2022-08-01 18:02:32 -07:00
parent 8663934075
commit 551dfd1e20
1 changed files with 57 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/hoppscotch-app/components/http/Variables.vue
View File

@@ -14,43 +14,64 @@
</div> </div>
</div> </div>
<div> <div>
<div <draggable
v-for="(variable, index) in workingVars" v-model="workingVars"
:key="`vari-${variable.id}-${index}`" animation="250"
class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group" handle=".draggable-handle"
draggable=".draggable-content"
ghost-class="cursor-move"
chosen-class="bg-primaryLight"
drag-class="cursor-grabbing"
> >
<SmartEnvInput <div
v-model="variable.key" v-for="(variable, index) in workingVars"
:placeholder="`${t('count.variable', { count: index + 1 })}`" :key="`vari-${variable.id}-${index}`"
@change=" class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
updateVar(index, { >
id: variable.id, <span>
key: $event, <ButtonSecondary
value: variable.value, svg="grip-vertical"
}) class="cursor-auto text-primary hover:text-primary"
" :class="{
/> 'draggable-handle group-hover:text-secondaryLight !cursor-grab':
<SmartEnvInput index !== workingVars?.length - 1,
v-model="variable.value" }"
:placeholder="`${t('count.value', { count: index + 1 })}`" tabindex="-1"
@change=" />
updateVar(index, { </span>
id: variable.id, <SmartEnvInput
key: variable.key, v-model="variable.key"
value: $event, :placeholder="`${t('count.variable', { count: index + 1 })}`"
}) @change="
" updateVar(index, {
/> id: variable.id,
<span> key: $event,
<ButtonSecondary value: variable.value,
v-tippy="{ theme: 'tooltip' }" })
:title="t('action.remove')" "
svg="trash"
color="red"
@click.native="deleteVar(index)"
/> />
</span> <SmartEnvInput
</div> v-model="variable.value"
:placeholder="`${t('count.value', { count: index + 1 })}`"
@change="
updateVar(index, {
id: variable.id,
key: variable.key,
value: $event,
})
"
/>
<span>
<ButtonSecondary
v-tippy="{ theme: 'tooltip' }"
:title="t('action.remove')"
svg="trash"
color="red"
@click.native="deleteVar(index)"
/>
</span>
</div>
</draggable>
<div <div
v-if="workingVars.length === 0" v-if="workingVars.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight" class="flex flex-col items-center justify-center p-4 text-secondaryLight"
@@ -80,6 +101,7 @@ import { flow, pipe } from "fp-ts/function"
import * as O from "fp-ts/Option" import * as O from "fp-ts/Option"
import * as A from "fp-ts/Array" import * as A from "fp-ts/Array"
import { HoppRESTVar } from "@hoppscotch/data" import { HoppRESTVar } from "@hoppscotch/data"
import draggable from "vuedraggable"
import cloneDeep from "lodash/cloneDeep" import cloneDeep from "lodash/cloneDeep"
import isEqual from "lodash/isEqual" import isEqual from "lodash/isEqual"
import { useI18n, useStream, useToast } from "~/helpers/utils/composables" import { useI18n, useStream, useToast } from "~/helpers/utils/composables"