Repo for the search and displace core module including the interface to select files and search and displace operations to run on them.
https://searchanddisplace.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.1 KiB
97 lines
3.1 KiB
<template>
|
|
<div id="searchers-show">
|
|
<Panel :header="searcher.name">
|
|
<template #icons>
|
|
<a
|
|
class="p-panel-header-icon p-link"
|
|
v-if="editable"
|
|
:href="`/searchers/${searcher.id}/edit`"
|
|
>
|
|
<span class="pi pi-cog"></span>
|
|
</a>
|
|
</template>
|
|
|
|
<div class="p-d-flex p-jc-start">
|
|
<h5>{{ searcher.description }}</h5>
|
|
|
|
<Timeline :value="searcher.rows">
|
|
<template #opposite="slotProps">
|
|
<small class="p-text-secondary">
|
|
{{ slotProps.index + 1 }}
|
|
</small>
|
|
</template>
|
|
<template #content="slotProps">
|
|
<ScrollPanel
|
|
style="max-width: 90vw; height: 125px"
|
|
class="searcher-list"
|
|
>
|
|
<div
|
|
v-for="(
|
|
searcherItem, columnIndex
|
|
) in slotProps.item"
|
|
:key="`column-${columnIndex}`"
|
|
>
|
|
<div class="box is-plain p-shadow-5">
|
|
<template
|
|
v-if="
|
|
searcherItem.hasOwnProperty('name')
|
|
"
|
|
>
|
|
<searcher-show
|
|
:editable="false"
|
|
:searcher="searcherItem"
|
|
></searcher-show>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<b>{{ searcherItem.expression }}</b>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</ScrollPanel>
|
|
<Divider />
|
|
</template>
|
|
</Timeline>
|
|
</div>
|
|
</Panel>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
|
|
|
@Component({
|
|
name: "SearcherShow",
|
|
})
|
|
export default class Create extends Vue {
|
|
@Prop({ default: {} })
|
|
public readonly searcher!: Object;
|
|
|
|
@Prop({ default: true })
|
|
public readonly editable!: boolean;
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
::v-deep .p-timeline-event-opposite {
|
|
flex: 0 !important;
|
|
}
|
|
|
|
::v-deep .p-timeline-event-content {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
::v-deep .searcher-list {
|
|
.p-scrollpanel-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-top: 25px
|
|
}
|
|
|
|
.p-scrollpanel-bar {
|
|
background-color: #1976d2;
|
|
opacity: 1;
|
|
transition: background-color 0.3s;
|
|
}
|
|
}
|
|
</style>
|