|
| 1 | +import { Button } from '@/component-library/Button/Button' |
| 2 | +import { Collapsible } from '@/component-library/Helpers/Collapsible' |
| 3 | +import { TextInput } from '@/component-library/Input/TextInput' |
| 4 | +import { Tabs } from '@/component-library/Misc/Tabs' |
| 5 | +import { Label } from '@/component-library/Text/Content/Label' |
| 6 | +import { P } from '@/component-library/Text/Content/P' |
| 7 | +import { |
| 8 | + DIDName, |
| 9 | + TypedDIDValidationResponse, |
| 10 | + TypedDIDValidationQuery, |
| 11 | +} from '@/lib/infrastructure/data/view-model/create-rule' |
| 12 | +import { ListDIDsViewModel } from '@/lib/infrastructure/data/view-model/list-did' |
| 13 | +import { CreateRuleDIDTable } from './CreateRuleDIDTable' |
| 14 | +import { Dispatch, SetStateAction, useEffect, useState } from 'react' |
| 15 | +import { HTTPRequest } from '@/lib/sdk/http' |
| 16 | +import { DIDType } from '@/lib/core/entity/rucio' |
| 17 | +import { RulePage } from '../RulePage' |
| 18 | +import { CreateRulePageProps } from '../CreateRule' |
| 19 | + |
| 20 | +interface PageDIDsStateType { |
| 21 | + page0progressBlocked: boolean |
| 22 | + |
| 23 | + // Subpage 0: DID Search Pattern |
| 24 | + selectDIDMethod: number |
| 25 | + // selection by search |
| 26 | + selectDIDDataPattern: string |
| 27 | + searchDIDSelection: Array<ListDIDsViewModel> |
| 28 | + |
| 29 | + // Subpage 1: List of DIDs |
| 30 | + // selection via typing |
| 31 | + typedDIDs: Array<DIDName> |
| 32 | + errorDIDs: TypedDIDValidationResponse // validation of typed DIDs |
| 33 | +} |
| 34 | + |
| 35 | +export const CreateRuleDIDsPage = (props: { |
| 36 | + setDIDS: any |
| 37 | + activePage: number |
| 38 | + setActivePage: Dispatch<SetStateAction<number>> |
| 39 | + CreateRulePageProps: CreateRulePageProps |
| 40 | + pagePrevFunction: (event: any) => void |
| 41 | +}) => { |
| 42 | + // set state to store the DID page information |
| 43 | + const [PageDIDsState, setPageDIDsState] = useState<PageDIDsStateType>({ |
| 44 | + selectDIDMethod: 0, |
| 45 | + selectDIDDataPattern: '', |
| 46 | + searchDIDSelection: [], |
| 47 | + typedDIDs: [], |
| 48 | + errorDIDs: { ErrorList: [] }, |
| 49 | + page0progressBlocked: true, |
| 50 | + }) |
| 51 | + |
| 52 | + useEffect(() => { |
| 53 | + // set page0progressblocked to true if DID selections are empty |
| 54 | + if ( |
| 55 | + PageDIDsState.searchDIDSelection.length === 0 && |
| 56 | + PageDIDsState.typedDIDs.length === 0 |
| 57 | + ) { |
| 58 | + setPageDIDsState({ ...PageDIDsState, page0progressBlocked: true }) |
| 59 | + } else { |
| 60 | + setPageDIDsState({ ...PageDIDsState, page0progressBlocked: false }) |
| 61 | + } |
| 62 | + }, [PageDIDsState.typedDIDs, PageDIDsState.searchDIDSelection]) |
| 63 | + |
| 64 | + const pageDIDsSearch = async ( |
| 65 | + event: any, |
| 66 | + explicitDIDSearchExpression?: string, |
| 67 | + ) => { |
| 68 | + let DIDSearchString = explicitDIDSearchExpression |
| 69 | + ? explicitDIDSearchExpression |
| 70 | + : PageDIDsState.selectDIDDataPattern |
| 71 | + // build request for comdom |
| 72 | + const request: HTTPRequest = { |
| 73 | + url: new URL( |
| 74 | + `${process.env.NEXT_PUBLIC_WEBUI_HOST}/api/feature/list-dids`, |
| 75 | + ), |
| 76 | + method: 'GET', |
| 77 | + headers: new Headers({ |
| 78 | + 'Content-Type': 'application/json', |
| 79 | + } as HeadersInit), |
| 80 | + params: { |
| 81 | + query: DIDSearchString, |
| 82 | + type: DIDType.ALL, |
| 83 | + }, |
| 84 | + } |
| 85 | + // run query |
| 86 | + await props.CreateRulePageProps.didListComDOM.setRequest(request) |
| 87 | + await props.CreateRulePageProps.didListComDOM.start() |
| 88 | + } |
| 89 | + |
| 90 | + const pageDIDsnextFunction = (event: any) => { |
| 91 | + if (PageDIDsState.typedDIDs.length === 0) { |
| 92 | + // no validation, just next page |
| 93 | + props.setDIDS(PageDIDsState.searchDIDSelection) |
| 94 | + props.setActivePage(props.activePage + 1) |
| 95 | + return |
| 96 | + } |
| 97 | + // if typedDIDs is not empty, then we need to validate the DIDs |
| 98 | + var splitDIDs = PageDIDsState.typedDIDs |
| 99 | + const TypedDIDValidationQuery: TypedDIDValidationQuery = { |
| 100 | + DIDList: splitDIDs, |
| 101 | + } |
| 102 | + |
| 103 | + // execute query |
| 104 | + const typedDIDValidationResponse = |
| 105 | + props.CreateRulePageProps.didValidation(TypedDIDValidationQuery) |
| 106 | + typedDIDValidationResponse.then(response => { |
| 107 | + setPageDIDsState({ ...PageDIDsState, errorDIDs: response }) |
| 108 | + // need to implement a transformation to list of long dids to set in the props.setDIDS() |
| 109 | + props.setActivePage(props.activePage + 1) |
| 110 | + }) |
| 111 | + typedDIDValidationResponse.catch(error => { |
| 112 | + setPageDIDsState({ ...PageDIDsState, errorDIDs: error }) |
| 113 | + }) |
| 114 | + } |
| 115 | + |
| 116 | + return ( |
| 117 | + <> |
| 118 | + <RulePage |
| 119 | + pagenum={0} |
| 120 | + allowNext={true} |
| 121 | + allowPrev={false} |
| 122 | + activePage={props.activePage} |
| 123 | + progressBlocked={PageDIDsState.page0progressBlocked} |
| 124 | + onNext={(event: any) => { |
| 125 | + pageDIDsnextFunction(event) |
| 126 | + }} |
| 127 | + onPrev={props.pagePrevFunction} |
| 128 | + > |
| 129 | + <Tabs |
| 130 | + tabs={['DID Search Pattern', 'List of DIDs']} |
| 131 | + active={PageDIDsState.selectDIDMethod} |
| 132 | + updateActive={(active: number) => { |
| 133 | + setPageDIDsState({ |
| 134 | + ...PageDIDsState, |
| 135 | + selectDIDMethod: active, |
| 136 | + }) |
| 137 | + }} |
| 138 | + /> |
| 139 | + <Collapsible showIf={PageDIDsState.selectDIDMethod === 0}> |
| 140 | + <div className="flex flex-col space-y-2 m-2"> |
| 141 | + <div className="flex flex-col sm:flex-row sm:items-end w-full space-y-2 sm:space-x-2"> |
| 142 | + <label |
| 143 | + className="w-fit" |
| 144 | + htmlFor="did-search-pattern" |
| 145 | + > |
| 146 | + <P>DID Search Pattern</P> |
| 147 | + </label> |
| 148 | + <div className="grow"> |
| 149 | + <TextInput |
| 150 | + onBlur={(event: any) => { |
| 151 | + setPageDIDsState({ |
| 152 | + ...PageDIDsState, |
| 153 | + selectDIDDataPattern: |
| 154 | + event.target.value, |
| 155 | + }) |
| 156 | + }} |
| 157 | + onEnterkey={(event: any) => { |
| 158 | + setPageDIDsState({ |
| 159 | + ...PageDIDsState, |
| 160 | + selectDIDDataPattern: |
| 161 | + event.target.value, |
| 162 | + }) |
| 163 | + pageDIDsSearch( |
| 164 | + event.target.value, |
| 165 | + event.target.value, |
| 166 | + ) |
| 167 | + }} |
| 168 | + id="did-search-pattern" |
| 169 | + /> |
| 170 | + </div> |
| 171 | + <div className="w-full sm:w-24 sm:grow-0"> |
| 172 | + <Button |
| 173 | + type="submit" |
| 174 | + label="Search" |
| 175 | + onClick={pageDIDsSearch} |
| 176 | + id="page0-search" |
| 177 | + /> |
| 178 | + </div> |
| 179 | + </div> |
| 180 | + <CreateRuleDIDTable |
| 181 | + comdom={props.CreateRulePageProps.didListComDOM} |
| 182 | + handleChange={(data: ListDIDsViewModel[]) => { |
| 183 | + setPageDIDsState({ |
| 184 | + ...PageDIDsState, |
| 185 | + searchDIDSelection: data, |
| 186 | + }) |
| 187 | + }} |
| 188 | + /> |
| 189 | + </div> |
| 190 | + </Collapsible> |
| 191 | + <Collapsible showIf={PageDIDsState.selectDIDMethod === 1}> |
| 192 | + {/* TODO: Beta */} |
| 193 | + <div className="flex flex-col space-y-2 m-2"> |
| 194 | + <Label label="dids"> |
| 195 | + This feature will be released soon! |
| 196 | + </Label> |
| 197 | + {/* <Label label="dids">Data Identifiers to select:</Label> |
| 198 | + <ListInput |
| 199 | + id="dids" |
| 200 | + onAdd={(value: string) => { |
| 201 | + setPage0State({ ...Page0State, typedDIDs: Page0State.typedDIDs.concat(value) }) |
| 202 | + }} |
| 203 | + onRemove={(value: string) => { |
| 204 | + setPage0State({ ...Page0State, typedDIDs: Page0State.typedDIDs.filter((item) => item !== value) }) |
| 205 | + }} |
| 206 | + value={Page0State.typedDIDs} |
| 207 | + placeholder="Type your DIDs here" |
| 208 | + /> |
| 209 | + <label htmlFor="didErrors">Errors:</label> |
| 210 | + <div |
| 211 | + id="didErrors" |
| 212 | + className="h-24 overflow-y-auto w-full border rounded-md p-2 dark:text-white dark:border-2" |
| 213 | + > |
| 214 | + <Collapsible showIf={Page0State.errorDIDs.ErrorList.length === 0}> |
| 215 | + <p className="font-mono">{"Validate DIDs by pressing \"Next\"."}</p> |
| 216 | + </Collapsible> |
| 217 | + {Page0State.errorDIDs.ErrorList.map((element, index) => { |
| 218 | + return ( |
| 219 | + <P mono key={index}>DID {element.DID} has Errorcodes {element.ErrorCodes}</P> |
| 220 | + ) |
| 221 | + })} |
| 222 | + </div> */} |
| 223 | + </div> |
| 224 | + </Collapsible> |
| 225 | + </RulePage> |
| 226 | + </> |
| 227 | + ) |
| 228 | +} |
0 commit comments