Skip to content

Commit

Permalink
fix: ui issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@tikazyq
tikazyq committed Nov 18, 2024
1 parent fa2088a commit 2814ef0
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 131 deletions.
7 changes: 6 additions & 1 deletion src/components/ui/filter/FilterInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { debounce } from '@/utils';
defineProps<{
id?: string;
prefixIcon?: Icon;
label?: string;
placeholder?: string;
}>();
Expand Down Expand Up @@ -45,6 +46,10 @@ defineOptions({ name: 'ClFilterInput' });
@clear="onClear"
@input="onChange"
@keyup.enter="onEnter"
/>
>
<template v-if="prefixIcon" #prefix>
<cl-icon :icon="prefixIcon" />
</template>
</el-input>
</div>
</template>
1 change: 1 addition & 0 deletions src/interfaces/layout/content/list/ListLayout.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export declare global {
interface ListAction {
id?: string;
label?: string;
prefixIcon?: Icon;
action?: string;
className?: string;
size?: BasicSize;
Expand Down
21 changes: 14 additions & 7 deletions src/layouts/content/list/ListLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,8 +143,10 @@ defineOptions({ name: 'ClListLayout' });
>
<template v-if="item.action === ACTION_FILTER_SEARCH">
<cl-filter-input
:id="(item as ListActionFilter).id"
:id="item.id"
:label="item.label"
:placeholder="(item as ListActionFilter).placeholder"
:prefix-icon="(item as ListActionFilter).prefixIcon"
@change="
(value: any) => (item as ListActionFilter).onChange?.(value)
"
Expand All @@ -156,8 +158,8 @@ defineOptions({ name: 'ClListLayout' });
</template>
<template v-else-if="item.action === ACTION_FILTER_SELECT">
<cl-filter-select
:id="(item as ListActionFilter).id"
:label="(item as ListActionFilter).label"
:id="item.id"
:label="item.label"
:placeholder="(item as ListActionFilter).placeholder"
:options="(item as ListActionFilter).options"
:options-remote="(item as ListActionFilter).optionsRemote"
Expand All @@ -170,13 +172,13 @@ defineOptions({ name: 'ClListLayout' });
</template>
<template v-else>
<cl-nav-action-button
:id="(item as ListActionButton).id"
:class-name="(item as ListActionButton).className"
:id="item.id"
:class-name="item.className"
:label="item.label"
:size="item.size"
:button-type="(item as ListActionButton).buttonType"
:disabled="(item as ListActionButton).disabled"
:icon="(item as ListActionButton).icon"
:label="(item as ListActionButton).label"
:size="(item as ListActionButton).size"
:tooltip="(item as ListActionButton).tooltip"
:type="(item as ListActionButton).type"
@click="(item as ListActionButton).onClick"
Expand Down Expand Up @@ -286,6 +288,11 @@ defineOptions({ name: 'ClListLayout' });
#filter-search {
width: 200px;
}
&:deep(.label) {
margin-right: 5px;
font-size: 14px;
}
}
}
}
Expand Down
161 changes: 84 additions & 77 deletions src/views/dependency/list/useDependencyList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@ const useDependencyList = () => {
const store = getStore();
const { dependency: state, node: nodeState } = store.state as RootStoreState;

const { allDict: allNodeDict } = useNode(store);

const navActions = computed<ListActionGroup[]>(() => [
{
action: ACTION_FILTER,
Expand Down Expand Up @@ -68,6 +66,7 @@ const useDependencyList = () => {
action: ACTION_FILTER_SEARCH,
id: 'filter-search',
className: 'search',
prefixIcon: ['fa', 'search'],
placeholder: t('views.env.deps.navActions.filter.search.placeholder'),
onChange: async value => {
await updateSearchQuery(value);
Expand Down Expand Up @@ -192,91 +191,99 @@ const useDependencyList = () => {
label: t('views.env.deps.dependency.form.installedNodes'),
icon: ['fa', 'server'],
width: '580',
value: (row: DependencyRepo) =>
row.dependencies?.map(dep => {
const node = allNodeDict.value.get(dep.node_id!);
if (!node?.active) return;
return (
<ClNodeTag
node={node}
loading={isLoading(dep)}
hit={isLoading(dep)}
type={getTypeByDep(dep)}
clickable
onClick={() => {
store.commit(`${ns}/setActiveDependency`, dep);
store.commit(`${ns}/showDialog`, 'logs');
}}
>
{{
'extra-items': () => {
let color: string;
switch (dep.status) {
case 'installing':
case 'uninstalling':
color = 'var(--cl-warning-color)';
break;
case 'installed':
case 'uninstalled':
color = 'var(--cl-success-color)';
break;
case 'error':
case 'abnormal':
color = 'var(--cl-danger-color)';
break;
default:
color = 'inherit';
}
return (
<>
<div class="tooltip-title">
<label>
{t('layouts.routes.dependencies.list.title')}
</label>
</div>
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.status')}:
</label>
<span
style={{
color,
}}
>
{t(
`views.env.deps.dependency.status.${dep.status}`
)}
</span>
</div>
{dep.error && (
value: (row: DependencyRepo) => {
return nodeState.allList
.sort((a, b) =>
a.is_master ? -1 : (a.name || '').localeCompare(b.name || '')
)
.filter(n => n.active)
.map(node => {
const dep = row.dependencies?.find(
dep => dep.node_id === node._id
);
if (!dep) return;
return (
<ClNodeTag
node={node}
loading={isLoading(dep)}
hit={isLoading(dep)}
type={getTypeByDep(dep)}
clickable
onClick={() => {
store.commit(`${ns}/setActiveDependency`, dep);
store.commit(`${ns}/showDialog`, 'logs');
}}
>
{{
'extra-items': () => {
let color: string;
switch (dep.status) {
case 'installing':
case 'uninstalling':
color = 'var(--cl-warning-color)';
break;
case 'installed':
case 'uninstalled':
color = 'var(--cl-success-color)';
break;
case 'error':
case 'abnormal':
color = 'var(--cl-danger-color)';
break;
default:
color = 'inherit';
}
return (
<>
<div class="tooltip-title">
<label>
{t('layouts.routes.dependencies.list.title')}
</label>
</div>
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.error')}:
{t('views.env.deps.dependency.form.status')}:
</label>
<span
style={{
color,
}}
>
{dep.error}
{t(
`views.env.deps.dependency.status.${dep.status}`
)}
</span>
</div>
)}
{dep.version && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.version')}:
</label>
<span>{dep.version}</span>
</div>
)}
</>
);
},
}}
</ClNodeTag>
);
}),
{dep.error && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.error')}:
</label>
<span
style={{
color,
}}
>
{dep.error}
</span>
</div>
)}
{dep.version && (
<div class="tooltip-item">
<label>
{t('views.env.deps.dependency.form.version')}:
</label>
<span>{dep.version}</span>
</div>
)}
</>
);
},
}}
</ClNodeTag>
);
});
},
},
{
key: 'actions',
Expand Down
53 changes: 7 additions & 46 deletions src/views/task/list/useTaskList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,15 +113,16 @@ const useTaskList = () => {
name: 'filter',
children: [
{
action: ACTION_FILTER_SEARCH,
id: 'filter-search',
className: 'search',
placeholder: t('views.tasks.navActions.filter.search.placeholder'),
action: ACTION_FILTER_SELECT,
id: 'filter-select-status',
className: 'filter-select-status',
label: t('views.tasks.navActionsExtra.filter.select.status.label'),
options: getStatusOptions(),
onChange: onListFilterChangeByKey(
store,
ns,
'name',
FILTER_OP_CONTAINS
'status',
FILTER_OP_EQUAL
),
},
{
Expand Down Expand Up @@ -169,46 +170,6 @@ const useTaskList = () => {
FILTER_OP_EQUAL
),
},
{
action: ACTION_FILTER_SELECT,
id: 'filter-select-priority',
className: 'filter-select-priority',
label: t('views.tasks.navActionsExtra.filter.select.priority.label'),
options: priorityOptions,
onChange: onListFilterChangeByKey(
store,
ns,
'priority',
FILTER_OP_EQUAL
),
},
{
action: ACTION_FILTER_SEARCH,
id: 'filter-search-cmd',
className: 'search-cmd',
placeholder: t(
'views.tasks.navActionsExtra.filter.search.cmd.placeholder'
),
onChange: onListFilterChangeByKey(
store,
ns,
'cmd',
FILTER_OP_CONTAINS
),
},
{
action: ACTION_FILTER_SELECT,
id: 'filter-select-status',
className: 'filter-select-status',
label: t('views.tasks.navActionsExtra.filter.select.status.label'),
options: getStatusOptions(),
onChange: onListFilterChangeByKey(
store,
ns,
'status',
FILTER_OP_EQUAL
),
},
],
},
]);
Expand Down

0 comments on commit 2814ef0

Please sign in to comment.