Skip to content

Commit

Permalink
search record done
Browse files Browse the repository at this point in the history
  • Loading branch information
shubhvjain committed Oct 16, 2024
1 parent 1bf209f commit 6db3c41
Show file tree
Hide file tree
Showing 4 changed files with 443 additions and 108 deletions.
141 changes: 90 additions & 51 deletions src/lib/WorkSpace.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script>
import { onMount } from "svelte";
import HelpDoc from "./helppage/HelpDoc.svelte";
import RecordSearch from "./beanbagdb/RecordSearch.svelte";
// This will hold our array of opened pages/components
let pages = [];
Expand All @@ -10,15 +10,22 @@
// Method to add a new page
function addPage(pageType, criteria={}, size = 'medium') {
console.log(pageType)
const singlePageTypes = ["dashboard"]
const existingPage = pages.find(page => page.pageType === pageType);
if (existingPage) {
existingPage.isMinimized = false;
} else {
pages = [...pages, { id: Date.now(), pageType, criteria, title: `Help page`, size }];
let add_new = true;
if(singlePageTypes.includes(singlePageTypes)){
const existingPage = pages.find(page => page.pageType === pageType & page.criteria == criteria );
if(existingPage){
add_new = false
}
}else{
add_new = true
}
if(add_new){
pages = [...pages, { id: Math.round(Math.random()*10000), pageType, criteria, title: `Help page`, size }];
}
console.log(pages)
}
const searchPage = (text)=>{
Expand All @@ -27,6 +34,11 @@
addPage("helpPage",{key:rest.join("")})
}
if(firstPart=="find"){
addPage("searchPage",{key:rest.join("")})
}
//addPage("Sample "+Math.round(Math.random()*1000))
Expand All @@ -47,9 +59,16 @@
page.size = newSize; // Update the size property
}
function handleKeydown(event) {
if (event.key === 'Enter') {
searchPage(searchTerm) // Trigger search on Enter
}
}
onMount(()=>{
if(pages.length==0){
// new workspace, open the dash board automatically
searchPage("find/search")
}
})
Expand All @@ -59,7 +78,7 @@
.workspace {
display: flex;
flex-direction: column;
gap: 1rem;
/* gap: 1rem; */
}
html, body, .workspace {
Expand Down Expand Up @@ -89,12 +108,14 @@
min-height: 100px;
display: flex;
flex-direction: column;
justify-content: space-between;
/* justify-content: space-between; */
/* background-color: #fff; */
/* padding: 1rem; */
border: 0px solid #ddd;
padding: 0.5rem;
/* border: 0px solid #ddd; */
position: relative;
margin-right: -14px;
overflow-y: scroll;
border-right: 5px solid #f8f9fa;
}
.card
{
Expand Down Expand Up @@ -123,7 +144,10 @@
}
.page-title {
font-weight: bold;
/* font-weight: bolder; */
/* padding-left:4px; */
font-size: large;
padding-left: 1.25rem;
}
/* Size classes */
.page.small {
Expand All @@ -140,55 +164,70 @@
.page.full {
width: 98%; /* Take up the full width of the container */
}
.card-header1{
padding: 2px;
margin: 3px;
}
.btn{
border-radius: 0;
}
.form-control{
border-radius: 0;
}
.small-dropdown {
font-size: 1rem; /* Reduce text size */
padding-left: 1.5rem; /* Smaller padding */
width: auto; /* Adjust width if needed */
padding-right: 1.35rem
}
</style>
<div class="container-fluid">

</div>
<div class="workspace">
<!-- Search Box -->
<div class="search-box">

<div class="input-group">
<input type="text" class="form-control" bind:value={searchTerm} placeholder="Search or open new page..." aria-label="Search term">
<button on:click={() => searchPage(searchTerm)} class="btn btn-outline-secondary" type="button">Search</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand">Workspace</a>
<form class="d-flex" role="search">
<input class="form-control" bind:value={searchTerm} placeholder="Search or open new page..." aria-label="Search term" type="text" >
<button class="btn btn-outline-success" type="button" on:click={() => searchPage(searchTerm)} >Search</button>
</form>
</div>

<!-- <input type="text" class="form-control" bind:value={searchTerm} placeholder="Search or open new page..." style="flex-grow: 1;" />
<button >Open Page</button> -->
</div>

</nav>
<!-- Pages Container -->
<div class="pages-container">
{#each pages as page}
<div class="page {page.isMinimized ? 'minimized' : ''} {page.size}">
<div class="card">

<div class="card-header d-flex justify-content-between align-items-center">
<!-- Page title on the left -->
<span class="page-title">{page.title}</span>

<!-- Dropdown and Close button on the right -->
<div class="d-flex align-items-center">
<!-- Size Dropdown -->
<select class="form-select form-select-sm me-2" style="width: auto;" on:change={(e) => changePageSize(page, e.target.value)} bind:value={page.size}>
<option value="small">25%</option>
<option value="medium">50%</option>
<option value="large">75%</option>
<option value="full">100%</option>
</select>

<!-- Close Button -->
<button class="btn btn-sm btn-danger" on:click={() => closePage(page.id)}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></button>
</div>
</div>
<div class="card-body">
{#if page.pageType == "helpPage"}
<HelpDoc key={page.criteria.key} ></HelpDoc>
{/if}
<div class="card-header1 d-flex justify-content-between align-items-center">
<!-- Page title on the left -->
<span class="page-title">{page.title}</span>

<!-- Dropdown and Close button on the right -->
<div class="d-flex align-items-center">
<!-- Size Dropdown -->
<select class="form-select form-select-sm me-2 small-dropdown" style="width: auto;" on:keydown={handleKeydown} on:change={(e) => changePageSize(page, e.target.value)} bind:value={page.size}>
<option value="small">25%</option>
<option value="medium">50%</option>
<option value="large">75%</option>
<option value="full">100%</option>
</select>

<!-- Close Button -->
<button class="btn btn-sm btn-danger" on:click={() => closePage(page.id)}><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></button>
</div>
</div>
{#if page.pageType == "helpPage"}
<HelpDoc key={page.criteria.key} ></HelpDoc>
{/if}

{#if page.pageType == "searchPage"}
<RecordSearch></RecordSearch>
<!-- <HelpDoc key={page.criteria.key} ></HelpDoc> -->
{/if}



Expand Down
12 changes: 12 additions & 0 deletions src/lib/beanbagdb/RecordSearch.stories.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<script context="module">
import {Story} from '@storybook/addon-svelte-csf'
import RecordSearch from './RecordSearch.svelte';
export const meta = {
title : "Record search",
component : RecordSearch
}
</script>

<Story name="Basic">
<RecordSearch></RecordSearch>
</Story>
Loading

0 comments on commit 6db3c41

Please sign in to comment.