+
Filters
{"count" in config && (
-
{
- onLocalFilterChange(data, "count")
- }}
- />
+ <>
+ {
+ onLocalFilterChange(data, "count")
+ }}
+ />
+
+
)}
-
{config.alphabet && (
)}
@@ -156,6 +170,13 @@ const Filters = (props: FiltersProps): JSX.Element => {
}
/>
)}
+
)
}
diff --git a/src/app/config/constants.ts b/src/app/config/constants.ts
index ab55ee3..ca2a3c4 100644
--- a/src/app/config/constants.ts
+++ b/src/app/config/constants.ts
@@ -7,20 +7,26 @@ export const ICON_ROOT = `${
export const SESSION_COOKIE_NAME = "x-access-token"
-export const DEFAULT_LOCALE = {
- direction: "ltr",
- format: moment.localeData().longDateFormat("L"),
- separator: " - ",
- applyLabel: "Apply",
- cancelLabel: "Cancel",
- weekLabel: "W",
- customRangeLabel: "Custom Range",
- daysOfWeek: moment.weekdaysMin(),
- monthNames: moment.monthsShort(),
- firstDay: moment.localeData().firstDayOfWeek(),
-}
+// export const DEFAULT_LOCALE = {
+// direction: "ltr",
+// format: moment.localeData().longDateFormat("L"),
+// separator: " - ",
+// applyLabel: "Apply",
+// cancelLabel: "Cancel",
+// weekLabel: "W",
+// customRangeLabel: "Custom Range",
+// daysOfWeek: moment.weekdaysMin(),
+// monthNames: moment.monthsShort(),
+// firstDay: moment.localeData().firstDayOfWeek(),
+// }
export const ENDPOINTS = {
+ STATIC: {
+ ICON: {
+ ROOT: "/icon",
+ PAGE: "/page",
+ },
+ },
USERS: {
ROOT: "/secure/users",
ADD: "/add",
diff --git a/src/app/pages/FontsPage/FontsPage.tsx b/src/app/pages/FontsPage/FontsPage.tsx
index cfdaeda..fe9edda 100755
--- a/src/app/pages/FontsPage/FontsPage.tsx
+++ b/src/app/pages/FontsPage/FontsPage.tsx
@@ -1,9 +1,28 @@
+import FontsList from "../../components/FontsList"
+import Main from "../../components/Main"
+import Footer from "../../components/Footer"
import "./FontsPage.page.scss"
interface FontsPageProps {}
const FontsPage = (props: FontsPageProps): JSX.Element => {
- return
Be Here Soon
+ return (
+
+ {}}
+ // searchString={searchText}
+ />
+ }
+ // rightPanelContent={rightPanelContent}
+ // rightPanelHeader="Favorites"
+ />
+
+
+ )
}
export default FontsPage
diff --git a/src/app/pages/IconsPage/IconsPage.slice.ts b/src/app/pages/IconsPage/IconsPage.slice.ts
index d12a56b..da041fb 100644
--- a/src/app/pages/IconsPage/IconsPage.slice.ts
+++ b/src/app/pages/IconsPage/IconsPage.slice.ts
@@ -4,6 +4,7 @@ import { IconTileProps } from "../../types/components.interface"
export interface IconsPageState {
favorites: Array
+ selectedTag?: string
}
const initialState: IconsPageState = {
@@ -20,11 +21,16 @@ export const iconsPageSlice = createSlice({
removeFavorite: (state, action: PayloadAction) => {
state.favorites.splice(state.favorites.indexOf(action.payload))
},
+ selectTag: (state, action: PayloadAction) => {
+ state.selectedTag = action.payload
+ },
},
})
-export const { setFavorites, removeFavorite } = iconsPageSlice.actions
+export const { selectTag, setFavorites, removeFavorite } =
+ iconsPageSlice.actions
export const getFavorites = (state: RootState) => state.iconsPage.favorites
+export const getSelectedTag = (state: RootState) => state.iconsPage.selectedTag
export default iconsPageSlice.reducer
diff --git a/src/app/pages/IconsPage/IconsPage.tsx b/src/app/pages/IconsPage/IconsPage.tsx
index dc46e3d..c08880d 100755
--- a/src/app/pages/IconsPage/IconsPage.tsx
+++ b/src/app/pages/IconsPage/IconsPage.tsx
@@ -6,21 +6,22 @@ import Footer from "../../components/Footer"
import Main from "../../components/Main"
import IconsList from "../../components/IconsList"
import { ObjectType } from "../../types/types"
+import { FilterState } from "../../types/filterconfig"
import Network from "../../utils/network"
-import Helper from "../../utils/helper"
import "./IconsPage.page.scss"
interface IconsPageProps {}
-const fetchData = async (setIcons: Function) => {
+const fetchData = async (api: string, cb: Function) => {
const response: { status: number; body: Array } =
- await Network.getStatic("/icon/all", null, null)
- setIcons(response.body)
+ await Network.getStatic(api, null, null)
+ cb && cb(response.body)
}
const IconsPage = (props: IconsPageProps): JSX.Element => {
- const [icons, setIcons] = useState | undefined>()
+ // const [icons, setIcons] = useState | undefined>()
const [searchText, setSearchText] = useState()
+ const [tags, setTags] = useState()
const [filteredIcons, setFilteredIcons] = useState<
Array | undefined
>()
@@ -34,62 +35,70 @@ const IconsPage = (props: IconsPageProps): JSX.Element => {
getRightPanelContent,
)
- useEffect(() => {
- !icons && fetchData(setIcons)
- }, [icons])
+ // useEffect(() => {
+ // !icons && fetchData("/icon/all", setIcons)
+ // }, [icons])
useEffect(() => {
- if (icons) {
- let finalFilteredIconList: Array | undefined = icons
- if (searchText) {
- finalFilteredIconList = Helper.recrusiveFilter(
- finalFilteredIconList,
- searchText,
- false,
- ["name"],
- )
- }
- if (filters && finalFilteredIconList) {
- const alphabet =
- filters.alphabet &&
- (filters.alphabet as Array).length > 0 &&
- (filters.alphabet as Array).map(
- (al: BasicFilterConfig) => al.value,
- )
- finalFilteredIconList = Helper.matchArrayFilters(
- finalFilteredIconList,
- alphabet,
- "name",
- "starts",
- )
-
- const categories = filters.categories && filters.categories
-
- if (categories) {
- Object.keys(categories).forEach((category) => {
- const categoryValue = categories[category as keyof BasicFilterType]
- if ((categoryValue as Array).length > 0) {
- finalFilteredIconList = Helper.matchArrayFilters(
- finalFilteredIconList,
- categoryValue,
- "group",
- )
- }
- })
- }
-
- const countFilter =
- filters.count && "data" in filters.count && filters.count.data
- if (countFilter) {
- finalFilteredIconList = finalFilteredIconList?.slice(
- "startIndex" in countFilter ? +countFilter.startIndex : 0,
- "endIndex" in countFilter ? +countFilter.endIndex : 0,
- )
- }
- }
- setFilteredIcons(finalFilteredIconList)
+ const variant = "gt100"
+ const parseTags = (tagReponse: ObjectType) => {
+ setTags(tagReponse[variant] as ObjectType)
}
- }, [filters, icons, searchText])
+ !tags && fetchData(`/icon/tag/all?variants=${variant}`, parseTags)
+ }, [tags])
+
+ // useEffect(() => {
+ // if (icons) {
+ // let finalFilteredIconList: Array | undefined = icons
+ // if (searchText) {
+ // finalFilteredIconList = Helper.recrusiveFilter(
+ // finalFilteredIconList,
+ // searchText,
+ // false,
+ // ["name"],
+ // )
+ // }
+ // if (filters && finalFilteredIconList) {
+ // const alphabet =
+ // filters.alphabet &&
+ // (filters.alphabet as Array).length > 0 &&
+ // (filters.alphabet as Array).map(
+ // (al: BasicFilterConfig) => al.value,
+ // )
+ // finalFilteredIconList = Helper.matchArrayFilters(
+ // finalFilteredIconList,
+ // alphabet,
+ // "name",
+ // "starts",
+ // )
+
+ // const categories = filters.categories && filters.categories
+
+ // if (categories) {
+ // Object.keys(categories).forEach((category) => {
+ // const categoryValue = categories[category as keyof BasicFilterType]
+ // if ((categoryValue as Array).length > 0) {
+ // finalFilteredIconList = Helper.matchArrayFilters(
+ // finalFilteredIconList,
+ // categoryValue,
+ // "group",
+ // )
+ // }
+ // })
+ // }
+
+ // const countFilter =
+ // filters.count && "data" in filters.count && filters.count.data
+ // if (countFilter) {
+ // finalFilteredIconList = finalFilteredIconList?.slice(
+ // "startIndex" in countFilter ? +countFilter.startIndex : 0,
+ // "endIndex" in countFilter ? +countFilter.endIndex : 0,
+ // )
+ // }
+ // }
+ // setFilteredIcons(finalFilteredIconList)
+ // }
+ // }, [filters, icons, searchText])
return (
@@ -97,15 +106,25 @@ const IconsPage = (props: IconsPageProps): JSX.Element => {
contentClasses="p-2"
drawerContent={
}
mainContent={
-
+
}
rightPanelContent={rightPanelContent}
// rightPanelHeader="Favorites"
diff --git a/src/app/static/styles/_global.scss b/src/app/static/styles/_global.scss
index 509bb0c..41615ea 100644
--- a/src/app/static/styles/_global.scss
+++ b/src/app/static/styles/_global.scss
@@ -169,4 +169,12 @@ label.required:after {
.bg {
background-color: var(--ar-bg);
+}
+
+.top-1 {
+ top: 1rem;
+}
+
+.end-1 {
+ right: 1rem;
}
\ No newline at end of file
diff --git a/src/app/types/components.interface.ts b/src/app/types/components.interface.ts
index 2bc3894..f4b93d2 100644
--- a/src/app/types/components.interface.ts
+++ b/src/app/types/components.interface.ts
@@ -15,6 +15,8 @@ import {
ArButtonVariants,
ArIconTileTypes,
ArLoaderTypes,
+ ArPageTriggers,
+ ArPillSizes,
ArPlacement,
ArPopoverPositions,
ArPopoverTriggers,
@@ -26,6 +28,7 @@ import {
FrameContentDefinition,
Locale,
Namespace,
+ PageInfoType,
Task,
ToolItemConfig,
TreeListData,
@@ -72,6 +75,14 @@ export interface FormInputProps extends BaseProps {
}
/* PLOP_INJECT_INTERFACE */
+export interface FontsListProps extends BaseProps {
+}
+
+export interface BubbleChartProps extends BaseProps {
+ clickHandler?: FunctionType
+ data: Array
+}
+
export interface CronTabProps extends BaseProps {
onChange: FunctionType
value?: ObjectType | string
@@ -224,6 +235,7 @@ export interface BubbleVizProps extends BaseProps {
}
export interface ArVizProps extends BaseProps {
+ clickHandler?: FunctionType
type: ArVisualizationTypes
data: ArrayType | ObjectType
}
@@ -242,7 +254,10 @@ export interface IconControllerProps extends BaseProps {
}
export interface TagsProps extends BaseProps {
+ clickHandler?: FunctionType
+ hideHeader?: boolean
label?: string
+ tags?: ObjectType
}
export interface ColorSelectorProps extends BaseProps {
@@ -423,12 +438,14 @@ export type SliderProps = { focussed?: boolean } & TextInputProps
export interface IconsListProps extends BaseProps {
icons?: Array
onSearchChanged: Function
+ searchString?: string
}
export interface IconTileProps extends BaseProps {
hideBorder?: boolean
hideFooter?: boolean
icon: IconResponse
+ iconSize?: string
onClick?: Function
tools?: Array
toolsPlacement?: string
@@ -448,9 +465,23 @@ export interface ButtonProps extends BaseProps {
splitTrigger?: ArPopoverTriggers
}
+export interface DrawerProps {
+ children?: ReactNode
+ classes?: string
+ isCollapsible?: boolean
+}
+
export interface PaginationProps extends BaseProps {
- data: Array<{ [key: string]: string | number }>
+ count: number
+ isHeadless?: boolean
+ load: number
+ trigger?: ArPageTriggers
maxPillsToShow?: number
+ pageSetter?: FunctionType
+ pageSize?: number
+ // data?: Array<{ [key: string]: string | number }>
+ data?: Array
+ dataFetcher?: FunctionType
}
export interface HeaderProps {
@@ -529,7 +560,7 @@ export interface DropdownProps extends FormInputProps {
id?: string
label?: string
onSelectionChanged: Function
- options: Array<{ [key: string]: string | number }>
+ options?: Array
}
export interface ModalProps {
@@ -639,3 +670,12 @@ export interface DateProps extends FormInputProps {
}
export interface CardProps extends BaseProps {}
+
+export interface SelectionPillProps extends BaseProps {
+ context?: string
+ data: PageInfoType
+ disabled?: boolean
+ onClick: Function
+ selected?: boolean
+ size?: ArPillSizes
+}
diff --git a/src/app/types/entity.interface.ts b/src/app/types/entity.interface.ts
index fedb0ca..f14de31 100644
--- a/src/app/types/entity.interface.ts
+++ b/src/app/types/entity.interface.ts
@@ -121,3 +121,11 @@ export interface CronType {
week: string
month: string
}
+
+export interface PageInfoType {
+ label: string | JSX.Element
+ name?: string
+ sliceIndex?: number
+ startIndex?: number
+ endIndex?: number
+}
diff --git a/src/app/types/enums.ts b/src/app/types/enums.ts
index af33483..82c1c85 100644
--- a/src/app/types/enums.ts
+++ b/src/app/types/enums.ts
@@ -115,3 +115,14 @@ export enum JobStatus {
SUSPENDED = "suspended",
ARCHIVED = "archived",
}
+
+export enum ArPageTriggers {
+ SELECTOR = "selector",
+ SCROLL = "scroll",
+}
+
+export enum ArPillSizes {
+ LARGE = "large",
+ MEDIUM = "medium",
+ SMALL = "small",
+}
diff --git a/src/app/types/filterconfig.d.ts b/src/app/types/filterconfig.d.ts
index 72acdd4..a9a118a 100644
--- a/src/app/types/filterconfig.d.ts
+++ b/src/app/types/filterconfig.d.ts
@@ -1,15 +1,18 @@
-interface BasicFilterConfig {
+import { ObjectType } from "./types"
+
+export interface BasicFilterConfig {
value: string
data?: { [key: string]: string | number }
}
-interface FilterConfig {
+export interface FilterConfig {
count?: number
alphabet?: boolean
categories?: Array
+ tags?: ObjectType
}
-interface FiltersProps {
+export interface FiltersProps {
data?: Array
filteredData?: Array
config: FilterConfig
@@ -17,13 +20,13 @@ interface FiltersProps {
onFilterChange: Function
}
-interface FilterState {
+export interface FilterState {
count?: BasicFilterType
alphabet?: BasicFilterType
categories?: BasicFilterType
}
-type BasicFilterType =
+export type BasicFilterType =
| { [key: string]: Array }
| BasicFilterConfig
| Array
diff --git a/src/app/types/iconresponse.d.ts b/src/app/types/iconresponse.d.ts
index 1e6800a..43108ad 100644
--- a/src/app/types/iconresponse.d.ts
+++ b/src/app/types/iconresponse.d.ts
@@ -1,7 +1,10 @@
-interface IconResponse {
+interface PageItem {}
+
+interface IconResponse extends PageItem {
name: string
group: string
svg: string
+ icon: string
tags?: Array
description?: string
message?: string
diff --git a/src/app/utils/helper.tsx b/src/app/utils/helper.tsx
index 19c4c21..810f45b 100644
--- a/src/app/utils/helper.tsx
+++ b/src/app/utils/helper.tsx
@@ -1,5 +1,6 @@
import { lazy } from "react"
import { FunctionType } from "../types/types"
+import { PageInfoType } from "../types/entity.interface"
class Helper {
static populatePagesInRoutes(routes: RouteConfig[]) {
@@ -87,7 +88,7 @@ class Helper {
) {
let i = 0,
j = 0
- const slices = []
+ const slices: Array = []
while (i < count) {
let addUp = sliceLength
if (i + sliceLength > count) {
diff --git a/src/app/utils/network.ts b/src/app/utils/network.ts
index ea7f1f2..3f07271 100644
--- a/src/app/utils/network.ts
+++ b/src/app/utils/network.ts
@@ -137,13 +137,17 @@ export default class Network {
}
static stringifyUrl(url: string, queryParams?: any) {
+ if (!queryParams) {
+ return url || ""
+ }
+ const arrLength = Object.keys(queryParams).length
return url
- ? queryParams
- ? Object.keys(queryParams).reduce(
- (acc, key) => acc.concat(`${key}=${queryParams[key]}`),
- url + "?",
- )
- : url
+ ? Object.keys(queryParams).reduce(
+ (acc, key, index) =>
+ acc.concat(`${key}=${queryParams[key]}`) +
+ (index < arrLength - 1 ? "&" : ""),
+ url + "?",
+ )
: ""
}
}