|
@@ -5,115 +5,73 @@
|
|
|
import { addUser } from '$lib/apis/auths';
|
|
|
|
|
|
import Modal from '../common/Modal.svelte';
|
|
|
- import { WEBUI_BASE_URL } from '$lib/constants';
|
|
|
+ import {
|
|
|
+ getFunctionValvesById,
|
|
|
+ getFunctionValvesSpecById,
|
|
|
+ updateFunctionValvesById
|
|
|
+ } from '$lib/apis/functions';
|
|
|
+ import { getToolValvesById, getToolValvesSpecById, updateToolValvesById } from '$lib/apis/tools';
|
|
|
+ import Spinner from '../common/Spinner.svelte';
|
|
|
|
|
|
const i18n = getContext('i18n');
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
|
|
export let show = false;
|
|
|
|
|
|
- let loading = false;
|
|
|
- let tab = '';
|
|
|
- let inputFiles;
|
|
|
+ export let type = 'tool';
|
|
|
+ export let id = null;
|
|
|
|
|
|
- let _user = {
|
|
|
- name: '',
|
|
|
- email: '',
|
|
|
- password: '',
|
|
|
- role: 'user'
|
|
|
- };
|
|
|
+ let saving = false;
|
|
|
+ let loading = false;
|
|
|
|
|
|
- $: if (show) {
|
|
|
- _user = {
|
|
|
- name: '',
|
|
|
- email: '',
|
|
|
- password: '',
|
|
|
- role: 'user'
|
|
|
- };
|
|
|
- }
|
|
|
+ let valvesSpec = null;
|
|
|
+ let valves = {};
|
|
|
|
|
|
const submitHandler = async () => {
|
|
|
- const stopLoading = () => {
|
|
|
- dispatch('save');
|
|
|
- loading = false;
|
|
|
- };
|
|
|
+ saving = true;
|
|
|
|
|
|
- if (tab === '') {
|
|
|
- loading = true;
|
|
|
+ let res = null;
|
|
|
|
|
|
- const res = await addUser(
|
|
|
- localStorage.token,
|
|
|
- _user.name,
|
|
|
- _user.email,
|
|
|
- _user.password,
|
|
|
- _user.role
|
|
|
- ).catch((error) => {
|
|
|
+ if (type === 'tool') {
|
|
|
+ res = await updateToolValvesById(localStorage.token, id, valves).catch((error) => {
|
|
|
toast.error(error);
|
|
|
});
|
|
|
+ } else if (type === 'function') {
|
|
|
+ res = await updateFunctionValvesById(localStorage.token, id, valves).catch((error) => {
|
|
|
+ toast.error(error);
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- if (res) {
|
|
|
- stopLoading();
|
|
|
- show = false;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (inputFiles) {
|
|
|
- loading = true;
|
|
|
-
|
|
|
- const file = inputFiles[0];
|
|
|
- const reader = new FileReader();
|
|
|
-
|
|
|
- reader.onload = async (e) => {
|
|
|
- const csv = e.target.result;
|
|
|
- const rows = csv.split('\n');
|
|
|
-
|
|
|
- let userCount = 0;
|
|
|
-
|
|
|
- for (const [idx, row] of rows.entries()) {
|
|
|
- const columns = row.split(',').map((col) => col.trim());
|
|
|
- console.log(idx, columns);
|
|
|
-
|
|
|
- if (idx > 0) {
|
|
|
- if (
|
|
|
- columns.length === 4 &&
|
|
|
- ['admin', 'user', 'pending'].includes(columns[3].toLowerCase())
|
|
|
- ) {
|
|
|
- const res = await addUser(
|
|
|
- localStorage.token,
|
|
|
- columns[0],
|
|
|
- columns[1],
|
|
|
- columns[2],
|
|
|
- columns[3].toLowerCase()
|
|
|
- ).catch((error) => {
|
|
|
- toast.error(`Row ${idx + 1}: ${error}`);
|
|
|
- return null;
|
|
|
- });
|
|
|
-
|
|
|
- if (res) {
|
|
|
- userCount = userCount + 1;
|
|
|
- }
|
|
|
- } else {
|
|
|
- toast.error(`Row ${idx + 1}: invalid format.`);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- toast.success(`Successfully imported ${userCount} users.`);
|
|
|
- inputFiles = null;
|
|
|
- const uploadInputElement = document.getElementById('upload-user-csv-input');
|
|
|
+ if (res) {
|
|
|
+ toast.success('Valves updated successfully');
|
|
|
+ }
|
|
|
|
|
|
- if (uploadInputElement) {
|
|
|
- uploadInputElement.value = null;
|
|
|
- }
|
|
|
+ saving = false;
|
|
|
+ };
|
|
|
|
|
|
- stopLoading();
|
|
|
- };
|
|
|
+ const initHandler = async () => {
|
|
|
+ loading = true;
|
|
|
+ valves = {};
|
|
|
+ valvesSpec = null;
|
|
|
+
|
|
|
+ if (type === 'tool') {
|
|
|
+ valves = await getToolValvesById(localStorage.token, id);
|
|
|
+ valvesSpec = await getToolValvesSpecById(localStorage.token, id);
|
|
|
+ } else if (type === 'function') {
|
|
|
+ valves = await getFunctionValvesById(localStorage.token, id);
|
|
|
+ valvesSpec = await getFunctionValvesSpecById(localStorage.token, id);
|
|
|
+ }
|
|
|
|
|
|
- reader.readAsText(file);
|
|
|
- } else {
|
|
|
- toast.error($i18n.t('File not found.'));
|
|
|
- }
|
|
|
+ if (!valves) {
|
|
|
+ valves = {};
|
|
|
}
|
|
|
+
|
|
|
+ loading = false;
|
|
|
};
|
|
|
+
|
|
|
+ $: if (show) {
|
|
|
+ initHandler();
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<Modal size="sm" bind:show>
|
|
@@ -147,139 +105,82 @@
|
|
|
submitHandler();
|
|
|
}}
|
|
|
>
|
|
|
- <div class="flex text-center text-sm font-medium rounded-xl bg-transparent/10 p-1 mb-2">
|
|
|
- <button
|
|
|
- class="w-full rounded-lg p-1.5 {tab === '' ? 'bg-gray-50 dark:bg-gray-850' : ''}"
|
|
|
- type="button"
|
|
|
- on:click={() => {
|
|
|
- tab = '';
|
|
|
- }}>{$i18n.t('Form')}</button
|
|
|
- >
|
|
|
-
|
|
|
- <button
|
|
|
- class="w-full rounded-lg p-1 {tab === 'import' ? 'bg-gray-50 dark:bg-gray-850' : ''}"
|
|
|
- type="button"
|
|
|
- on:click={() => {
|
|
|
- tab = 'import';
|
|
|
- }}>{$i18n.t('CSV Import')}</button
|
|
|
- >
|
|
|
- </div>
|
|
|
<div class="px-1">
|
|
|
- {#if tab === ''}
|
|
|
- <div class="flex flex-col w-full">
|
|
|
- <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Role')}</div>
|
|
|
-
|
|
|
- <div class="flex-1">
|
|
|
- <select
|
|
|
- class="w-full capitalize rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none"
|
|
|
- bind:value={_user.role}
|
|
|
- placeholder={$i18n.t('Enter Your Role')}
|
|
|
- required
|
|
|
- >
|
|
|
- <option value="pending"> {$i18n.t('pending')} </option>
|
|
|
- <option value="user"> {$i18n.t('user')} </option>
|
|
|
- <option value="admin"> {$i18n.t('admin')} </option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex flex-col w-full mt-2">
|
|
|
- <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
|
|
|
-
|
|
|
- <div class="flex-1">
|
|
|
- <input
|
|
|
- class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none"
|
|
|
- type="text"
|
|
|
- bind:value={_user.name}
|
|
|
- placeholder={$i18n.t('Enter Your Full Name')}
|
|
|
- autocomplete="off"
|
|
|
- required
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <hr class=" dark:border-gray-800 my-3 w-full" />
|
|
|
-
|
|
|
- <div class="flex flex-col w-full">
|
|
|
- <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div>
|
|
|
-
|
|
|
- <div class="flex-1">
|
|
|
- <input
|
|
|
- class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none"
|
|
|
- type="email"
|
|
|
- bind:value={_user.email}
|
|
|
- placeholder={$i18n.t('Enter Your Email')}
|
|
|
- autocomplete="off"
|
|
|
- required
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="flex flex-col w-full mt-2">
|
|
|
- <div class=" mb-1 text-xs text-gray-500">{$i18n.t('Password')}</div>
|
|
|
-
|
|
|
- <div class="flex-1">
|
|
|
- <input
|
|
|
- class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 disabled:text-gray-500 dark:disabled:text-gray-500 outline-none"
|
|
|
- type="password"
|
|
|
- bind:value={_user.password}
|
|
|
- placeholder={$i18n.t('Enter Your Password')}
|
|
|
- autocomplete="off"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {:else if tab === 'import'}
|
|
|
- <div>
|
|
|
- <div class="mb-3 w-full">
|
|
|
- <input
|
|
|
- id="upload-user-csv-input"
|
|
|
- hidden
|
|
|
- bind:files={inputFiles}
|
|
|
- type="file"
|
|
|
- accept=".csv"
|
|
|
- />
|
|
|
-
|
|
|
- <button
|
|
|
- class="w-full text-sm font-medium py-3 bg-transparent hover:bg-gray-100 border border-dashed dark:border-gray-800 dark:hover:bg-gray-850 text-center rounded-xl"
|
|
|
- type="button"
|
|
|
- on:click={() => {
|
|
|
- document.getElementById('upload-user-csv-input')?.click();
|
|
|
- }}
|
|
|
- >
|
|
|
- {#if inputFiles}
|
|
|
- {inputFiles.length > 0 ? `${inputFiles.length}` : ''} document(s) selected.
|
|
|
- {:else}
|
|
|
- {$i18n.t('Click here to select a csv file.')}
|
|
|
+ {#if !loading}
|
|
|
+ {#if valvesSpec}
|
|
|
+ {#each Object.keys(valvesSpec.properties) as property, idx}
|
|
|
+ <div class=" py-0.5 w-full justify-between">
|
|
|
+ <div class="flex w-full justify-between">
|
|
|
+ <div class=" self-center text-xs font-medium">
|
|
|
+ {valvesSpec.properties[property].title}
|
|
|
+
|
|
|
+ {#if (valvesSpec?.required ?? []).includes(property)}
|
|
|
+ <span class=" text-gray-500">*required</span>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <button
|
|
|
+ class="p-1 px-3 text-xs flex rounded transition"
|
|
|
+ type="button"
|
|
|
+ on:click={() => {
|
|
|
+ valves[property] = (valves[property] ?? null) === null ? '' : null;
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {#if (valves[property] ?? null) === null}
|
|
|
+ <span class="ml-2 self-center">
|
|
|
+ {#if (valvesSpec?.required ?? []).includes(property)}
|
|
|
+ {$i18n.t('None')}
|
|
|
+ {:else}
|
|
|
+ {$i18n.t('Default')}
|
|
|
+ {/if}
|
|
|
+ </span>
|
|
|
+ {:else}
|
|
|
+ <span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {#if (valves[property] ?? null) !== null}
|
|
|
+ <div class="flex mt-0.5 mb-1.5 space-x-2">
|
|
|
+ <div class=" flex-1">
|
|
|
+ <input
|
|
|
+ class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
|
|
|
+ type="text"
|
|
|
+ placeholder={valvesSpec.properties[property].title}
|
|
|
+ bind:value={valves[property]}
|
|
|
+ autocomplete="off"
|
|
|
+ required={(valvesSpec?.required ?? []).includes(property)}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
{/if}
|
|
|
- </button>
|
|
|
- </div>
|
|
|
|
|
|
- <div class=" text-xs text-gray-500">
|
|
|
- ⓘ {$i18n.t(
|
|
|
- 'Ensure your CSV file includes 4 columns in this order: Name, Email, Password, Role.'
|
|
|
- )}
|
|
|
- <a
|
|
|
- class="underline dark:text-gray-200"
|
|
|
- href="{WEBUI_BASE_URL}/static/user-import.csv"
|
|
|
- >
|
|
|
- {$i18n.t('Click here to download user import template file.')}
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ {#if (valvesSpec.properties[property]?.description ?? null) !== null}
|
|
|
+ <div class="text-xs text-gray-500">
|
|
|
+ {valvesSpec.properties[property].description}
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ {/each}
|
|
|
+ {:else}
|
|
|
+ <div>No valves</div>
|
|
|
+ {/if}
|
|
|
+ {:else}
|
|
|
+ <Spinner className="size-5" />
|
|
|
{/if}
|
|
|
</div>
|
|
|
|
|
|
<div class="flex justify-end pt-3 text-sm font-medium">
|
|
|
<button
|
|
|
- class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg flex flex-row space-x-1 items-center {loading
|
|
|
+ class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg flex flex-row space-x-1 items-center {saving
|
|
|
? ' cursor-not-allowed'
|
|
|
: ''}"
|
|
|
type="submit"
|
|
|
- disabled={loading}
|
|
|
+ disabled={saving}
|
|
|
>
|
|
|
- {$i18n.t('Submit')}
|
|
|
+ {$i18n.t('Save')}
|
|
|
|
|
|
- {#if loading}
|
|
|
+ {#if saving}
|
|
|
<div class="ml-2 self-center">
|
|
|
<svg
|
|
|
class=" w-4 h-4"
|