ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2025-04-17 23:46:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update DiscussionsView.vue for Import Dropdown

Browse Source 
Convert the existing import button into a dropdown menu with both "LOLLMS" and "ChatGPT" options:

1. Replace the button with a `<div>` that will become the dropdown trigger. Add a click listener to toggle the menu open/closed:

```html
<div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
  <i data-feather="log-in"></i>  
</div>
```

2. Add `toggleDropdown` method and `isOpen` data property:

```js
data() {
  return {
    isOpen: false
  }
},

methods: {
  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }  
}
```

3. Add the actual dropdown menu markup that shows conditionally based on `isOpen`:

```html
<div v-if="isOpen" class="dropdown">
  <button @click="importDiscussions">LOLLMS</button>
  <button @click="importChatGPT">ChatGPT</button> 
</div>
```

4. Implement the `importChatGPT` method:

```js
methods: {
  importChatGPT() {
    // handle ChatGPT import
  }  
}
```
This commit is contained in:
signalprime 2023-07-15 07:39:53 -05:00 committed by GitHub
parent 967b9dc416
commit d81e76b58f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/views/DiscussionsView.vue
View File

@ -51,10 +51,17 @@
<i data-feather="database"></i>
</button>
<input type="file" ref="fileDialog" style="display: none" @change="importDiscussions" />
<button class="text-2xl hover:text-secondary duration-75 active:scale-90 rotate-90"
title="Import discussions" type="button" @click.stop="$refs.fileDialog.click()">
<i data-feather="log-in"></i>
</button>
<div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
<i data-feather="import"></i>
</div>
<div @click="toggleDropdown" class="text-2xl hover:text-secondary duration-75">
<i data-feather="log-in"></i>
</div>
<div v-if="isOpen" class="dropdown">
<button @click="importDiscussions">LOLLMS</button>
<button @click="importChatGPT">ChatGPT</button>
</div>
<button class="text-2xl hover:text-secondary duration-75 active:scale-90" title="Filter discussions"
type="button" @click="isSearch = !isSearch" :class="isSearch ? 'text-secondary' : ''">
<i data-feather="search"></i>
@ -348,10 +355,21 @@ export default {
panelCollapsed: false // left panel collapse
}
},
data() {
return {
isOpen: false
}
},
methods: {
togglePanel() {
this.panelCollapsed = !this.panelCollapsed;
},
toggleDropdown() {
this.isOpen = !this.isOpen;
},
importChatGPT() {
// handle ChatGPT import
},
async api_get_req(endpoint) {
try {
const res = await axios.get("/" + endpoint);
@ -365,8 +383,6 @@ export default {
console.log(error.message, 'api_get_req')
return
}
},
async list_discussions() {
try {