Skip to content

Commit 354b903

Browse files
benscobiebenscobie
authored
fix: Resolve various UI & UX issues (#1452)
* fix: Improve collection description overflow * fix: Reset test media result on new test * fix: Improve rule description wrap and 'undefined' flash * fix: Handle rule execution errors in test media * fix: Logo, favicon and spinner not working when using base path * fix: Allow showing negative days left * build: Fix typeorm CLI config
1 parent e8823b5 commit 354b903

File tree

12 files changed

+48
-39
lines changed

12 files changed

+48
-39
lines changed

Diff for: ‎server/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"test:e2e": "jest --config ./test/jest-e2e.json",
2525
"migration:run": "ts-node node_modules/typeorm/cli.js migration:run -d ./src/datasource-config.ts",
2626
"migration:revert": "ts-node node_modules/typeorm/cli.js migration:revert -d ./src/datasource-config.ts",
27-
"migration:generate": "ts-node node_modules/typeorm/cli.js migration:generate --dataSource ./src/datasource-config.ts -p"
27+
"migration:generate": "ts-node node_modules/typeorm/cli.js migration:generate --dataSource ./src/datasource-config.ts -p",
28+
"migration:show": "ts-node node_modules/typeorm/cli.js migration:show --dataSource ./src/datasource-config.ts"
2829
},
2930
"dependencies": {
3031
"@nestjs/common": "^10.4.15",

Diff for: ‎server/src/datasource-config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { DataSource } from 'typeorm';
22

33
const datasource = new DataSource({
44
type: 'sqlite',
5-
database: './data/maintainerr.sqlite',
5+
database: '../data/maintainerr.sqlite',
66
entities: ['./dist/**/*.entities{.ts,.js}'],
77
synchronize: false,
88
migrationsTableName: 'migrations',

Diff for: ‎server/src/modules/rules/rules.service.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -1001,8 +1001,14 @@ export class RulesService {
10011001
[mediaResp as unknown as PlexLibraryItem],
10021002
true,
10031003
);
1004-
return { code: 1, result: result.stats };
1004+
1005+
if (result) {
1006+
return { code: 1, result: result.stats };
1007+
} else {
1008+
return { code: 0, result: 'An error occurred executing rules' };
1009+
}
10051010
}
1011+
10061012
return { code: 0, result: 'Invalid input' };
10071013
}
10081014

Diff for: ‎typeorm_instructions.txt

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// After each new entity, generate migration
2-
yarn migration:generate server/src/database/migrations/<migr_name>
2+
yarn migration:generate src/database/migrations/<migr_name>
33

44
// Run migrations
55
yarn migration:run

Diff for: ‎ui/src/components/Collection/CollectionDetail/TestMediaItem/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,8 @@ const TestMediaItem = (props: ITestMediaItem) => {
135135
}, [selectedSeasons])
136136

137137
const onSubmit = async () => {
138+
setComparisonResult(undefined)
139+
138140
if (ruleGroup) {
139141
const result = await PostApiHandler(`/rules/test`, {
140142
rulegroupId: ruleGroup.id,
@@ -268,9 +270,9 @@ const TestMediaItem = (props: ITestMediaItem) => {
268270
options={{ readOnly: true, minimap: { enabled: false } }}
269271
defaultLanguage="yaml"
270272
theme="vs-dark"
271-
{...(comparisonResult
272-
? { value: YAML.stringify(comparisonResult.result) }
273-
: undefined)}
273+
value={
274+
comparisonResult ? YAML.stringify(comparisonResult.result) : ''
275+
}
274276
onMount={handleEditorDidMount}
275277
/>
276278
</div>

Diff for: ‎ui/src/components/Collection/CollectionItem/index.tsx

+8-15
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@ const CollectionItem = (props: ICollectionItem) => {
1515
<>
1616
<a
1717
className="hover:none hover:cursor-pointer"
18-
// onClick={() => props.onClick(props.collection)}
1918
{...(props.onClick
2019
? { onClick: () => props.onClick!(props.collection) }
2120
: {})}
2221
>
23-
{/* <div className="collection relative mb-5 flex h-fit w-full flex-col overflow-hidden rounded-xl bg-zinc-800 bg-cover bg-center p-4 text-zinc-400 shadow ring-1 ring-zinc-700 sm:mb-0 sm:mr-5 sm:w-1/3"> */}
2422
{props.collection.media && props.collection.media.length > 1 ? (
2523
<div className="z-1 absolute inset-0 flex flex-row overflow-hidden">
2624
<CachedImage
@@ -44,7 +42,6 @@ const CollectionItem = (props: ICollectionItem) => {
4442
<div className="overflow-hidden overflow-ellipsis whitespace-nowrap text-base font-bold text-white sm:text-lg">
4543
<a
4644
className="hover:cursor-pointer hover:underline"
47-
// onClick={() => props.onClick(props.collection)}
4845
{...(props.onClick
4946
? { onClick: () => props.onClick!(props.collection) }
5047
: {})}
@@ -54,7 +51,7 @@ const CollectionItem = (props: ICollectionItem) => {
5451
: props.collection.title}
5552
</a>
5653
</div>
57-
<div className="line-clamp-2 h-12 max-h-12 whitespace-normal text-base text-zinc-400 hover:overflow-y-scroll sm:h-14 sm:max-h-14 sm:text-lg">
54+
<div className="h-12 max-h-12 overflow-y-hidden whitespace-normal text-base text-zinc-400 hover:overflow-y-scroll">
5855
{props.collection.manualCollection
5956
? `Handled by rule: '${props.collection.title}'`
6057
: props.collection.description}
@@ -65,19 +62,16 @@ const CollectionItem = (props: ICollectionItem) => {
6562
<div className="mr-5 flex flex-row sm:mr-0 sm:mt-auto sm:flex-col">
6663
<div className="mb-5 mr-5 sm:mr-0">
6764
<p className="font-bold">Library</p>
68-
<p className="">
69-
{' '}
70-
{
71-
LibrariesCtx.libraries.find(
72-
(el) => +el.key === +props.collection.libraryId,
73-
)?.title
74-
}
65+
<p>
66+
{LibrariesCtx.libraries.find(
67+
(el) => +el.key === +props.collection.libraryId,
68+
)?.title ?? <>&nbsp;</>}
7569
</p>
7670
</div>
7771

7872
<div className="mr-5 sm:mr-0">
7973
<p className="font-bold">Items</p>
80-
<p className="">
74+
<p>
8175
{' '}
8276
{`${
8377
props.collection.media ? props.collection.media.length : 0
@@ -89,8 +83,7 @@ const CollectionItem = (props: ICollectionItem) => {
8983
<div className="ml-auto flex flex-row text-right sm:mt-auto sm:flex-col">
9084
<div className="mb-5 mr-5 sm:mr-0">
9185
<p className="font-bold">Status</p>
92-
<p className="">
93-
{' '}
86+
<p>
9487
{props.collection.isActive ? (
9588
<span className="text-green-900">Active</span>
9689
) : (
@@ -101,7 +94,7 @@ const CollectionItem = (props: ICollectionItem) => {
10194

10295
<div className="mr-0 sm:mr-0">
10396
<p className="font-bold">Delete</p>
104-
<p className="">{` After ${props.collection.deleteAfterDays} days`}</p>
97+
<p>{` After ${props.collection.deleteAfterDays} days`}</p>
10598
</div>
10699
</div>
107100
</div>

Diff for: ‎ui/src/components/Common/MediaCard/index.tsx

+13-11
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const MediaCard: React.FC<IMediaCard> = ({
4040
libraryId,
4141
type,
4242
collectionId = 0,
43-
daysLeft = 999,
43+
daysLeft = 9999,
4444
exclusionId = undefined,
4545
tmdbid = undefined,
4646
canExpand = false,
@@ -201,21 +201,23 @@ const MediaCard: React.FC<IMediaCard> = ({
201201
) : undefined}
202202

203203
{/* on collection page and for the media items */}
204-
{collectionPage && !exclusionType && daysLeft !== 999 ? (
204+
{collectionPage && !exclusionType && daysLeft !== 9999 ? (
205205
<div className="absolute right-0 flex items-center justify-between p-2">
206206
<div
207207
className={`pointer-events-none z-40 rounded-full shadow ${
208-
mediaType === 'movie'
209-
? 'bg-zinc-900'
210-
: mediaType === 'show'
211-
? 'bg-amber-900'
212-
: mediaType === 'season'
213-
? 'bg-yellow-700'
214-
: 'bg-rose-900'
215-
}`}
208+
daysLeft < 0
209+
? 'bg-red-700'
210+
: mediaType === 'movie'
211+
? 'bg-zinc-900'
212+
: mediaType === 'show'
213+
? 'bg-amber-900'
214+
: mediaType === 'season'
215+
? 'bg-yellow-700'
216+
: 'bg-rose-900'
217+
} `}
216218
>
217219
<div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-zinc-200 sm:h-5">
218-
{daysLeft > 0 ? daysLeft : 0}
220+
{daysLeft}
219221
</div>
220222
</div>
221223
</div>

Diff for: ‎ui/src/components/Layout/NavBar/index.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ interface NavBarProps {
5959
const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
6060
const navRef = useRef<HTMLDivElement>(null)
6161
const SearchCtx = useContext(SearchContext)
62+
const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
6263

6364
useEffect(() => {
6465
setTimeout(() => {
@@ -132,7 +133,7 @@ const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
132133
width={0}
133134
height={0}
134135
style={{ width: '100%', height: 'auto' }}
135-
src="/logo.svg"
136+
src={`${basePath}/logo.svg`}
136137
alt="Logo"
137138
priority
138139
/>
@@ -195,7 +196,7 @@ const NavBar: React.FC<NavBarProps> = ({ open, setClosed }) => {
195196
width={0}
196197
height={0}
197198
style={{ width: '100%', height: 'auto' }}
198-
src="/logo.svg"
199+
src={`${basePath}/logo.svg`}
199200
alt="Logo"
200201
priority
201202
/>

Diff for: ‎ui/src/components/Layout/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Layout: React.FC<{ children?: ReactNode }> = (props: {
1717
const [navBarOpen, setNavBarOpen] = useState(false)
1818
const SearchCtx = useContext(SearchContext)
1919
const SettingsCtx = useContext(SettingsContext)
20+
const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
2021

2122
const handleNavbar = () => {
2223
setNavBarOpen(!navBarOpen)
@@ -34,6 +35,7 @@ const Layout: React.FC<{ children?: ReactNode }> = (props: {
3435
<section>
3536
<Head>
3637
<title>Maintainerr</title>
38+
<link rel="icon" href={`${basePath}/favicon.ico`} />
3739
</Head>
3840
<div className="flex h-full min-h-full min-w-0 bg-zinc-900">
3941
<div className="pwa-only fixed inset-0 z-20 h-1 w-full border-zinc-700 md:border-t" />

Diff for: ‎ui/src/components/Overview/Content/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const OverviewContent = (props: IOverviewContent) => {
120120
date.getDate() + collectionData.collection.deleteAfterDays!,
121121
)
122122

123-
const diffTime = Math.abs(date.getTime() - today.getTime())
123+
const diffTime = date.getTime() - today.getTime()
124124
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
125125
return diffDays
126126
}

Diff for: ‎ui/src/components/Rules/RuleGroup/AddModal/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -378,9 +378,11 @@ const AddModal = (props: AddModal) => {
378378
}
379379

380380
if (isLoading) {
381+
const basePath = process.env.NEXT_PUBLIC_BASE_PATH ?? ''
382+
381383
return (
382384
<span>
383-
<CachedImage fill src="/spinner.svg" alt="Loading..." />
385+
<CachedImage fill src={`${basePath}/spinner.svg`} alt="Loading..." />
384386
</span>
385387
)
386388
}

Diff for: ‎ui/src/components/Rules/RuleGroup/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const RuleGroup = (props: {
5757
</div>
5858

5959
<div className="my-0.5 flex text-sm sm:my-1">
60-
<span className="mr-2 w-full overflow-hidden overflow-ellipsis font-bold">
60+
<span className="mr-2 w-full max-w-prose overflow-hidden overflow-ellipsis font-semibold">
6161
{props.group.description}
6262
</span>
6363
</div>
@@ -74,7 +74,7 @@ const RuleGroup = (props: {
7474
{`Library ${
7575
LibrariesCtx.libraries.find(
7676
(el) => +el.key === +props.group.libraryId,
77-
)?.title
77+
)?.title ?? ''
7878
}`}
7979
</div>
8080
{props.group.rules.length > 0 ? (

0 commit comments

Comments
 (0)