@ynput/ayon-frontend-shared 0.2.2 → 0.2.4

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["useDetailsPanelContext","useState","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAAM;;AACJ,QAAM,EAAE,QAAQ,SAAS,IAAIA,2CAAuB;AAEpD,QAAM,SAAS,iCAAQ;AACvB,QAAM,WAAW,iCAAQ;AAGzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAIC,MAAAA,SAAS,KAAK;AAE1D,QAAM,CAAC,WAAW,UAAU,IAAIA,MAAAA,SAAkD,CAAA,CAAE;AAE9E,QAAA,qBAAqB,CAAC,SAAiB;AAC3C,eAAW,CAAC,YAAa;;AAAA;AAAA,QACvB,GAAG;AAAA,QACH,CAAC,SAAS,KAAGC,MAAA,QAAQ,SAAS,MAAjB,gBAAAA,IAAoB,OAAO,CAAC,WAAW,OAAO,SAAS,UAAS,CAAA;AAAA,MAAC;AAAA,KAC9E;AAAA,EACJ;AAEM,QAAA,mBAAmB,OAAO,UAAoB;AAClD,UAAM,iBAAiB,MAAM,KAAK,KAAK,EAAE,IAAI,CAAC,UAAU;AAAA,MACtD,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,MACX,UAAU;AAAA,IAAA,EACV;AAEI,UAAA,uBAAuB,CAAC,GAAI,UAAU,SAAS,KAAK,CAAA,GAAK,GAAG,cAAc;AAEhF,eAAW,EAAE,GAAG,WAAW,CAAC,SAAS,GAAG,sBAAsB;AAE9D,UAAM,iBAAiB,CAAC,SAAe,CAAC,aAA4B;AAElE,cAAQ,IAAI,yBAAyB,KAAK,IAAI,EAAE;AAEhD,YAAM,OAAO,SAAS;AAEtB,UAAI,CAAC,YAAa;AAElB;AAAA;AAAA,QAEEC,gCAAmB,KAAK;AAAA,UACtB;AAAA,UACA,EAAE,aAAa,UAAU;AAAA,UACzB,CAAC,UAAU;AACL,gBAAA,CAAC,MAAM,aAAa;AACtB,oBAAM,cAAc,CAAC;AAAA,YAAA;AAGjB,kBAAA,YAAY,KAAK,IAAI;AAAA,UAAA;AAAA,QAC7B;AAAA,MAEJ;AAGA,mBAAa,SAASC,WAAI,KAAK,eAAe,CAAC,EAAE,MAAM,UAAU,IAAI,UAAA,CAAW,CAAC,CAAC;AACzE,eAAAA,OAAA,IAAI,KAAK,eAAe,CAAC,EAAE,MAAM,UAAU,IAAI,UAAW,CAAA,CAAC,CAAC;AAC5D,eAAAA,OAAA,IAAI,KAAK,eAAe,CAAC,EAAE,MAAM,UAAU,IAAI,SAAU,CAAA,CAAC,CAAC;AAC3D,eAAAA,OAAA,IAAI,KAAK,eAAe,CAAC,EAAE,MAAM,UAAU,IAAI,OAAQ,CAAA,CAAC,CAAC;AAElE,yBAAmB,KAAK,IAAI;AAAA,IAC9B;AAEA,UAAM,eAAe,CAAC,SAAe,CAAC,UAAe;AACnD,cAAQ,MAAM,qBAAqB,KAAK,IAAI,KAAK,KAAK,EAAE;AACxDC,oBAAA,MAAM,MAAM,0BAA0B,KAAK,IAAI,EAAE;AAEjD,iBAAW,CAAC,YAAY;AAEtB,cAAM,iBAAiB,QAAQ,SAAS,KAAK,CAAC;AAC9C,cAAM,iBAAiB,eAAe,IAAI,CAAC,WAAW;AACpD,cAAI,OAAO,SAAS,KAAK,KAAa,QAAA;AAC/B,iBAAA;AAAA,YACL,GAAG;AAAA,YACH,OAAO,MAAM,SAAS,KAAK,UAAU,MAAM;AAAA,UAC7C;AAAA,QAAA,CACD;AAGM,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,SAAS,GAAG;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IACH;AAEM,UAAA,kBAAkB,CAAC,SAAe;AACtC,aAAO,CAAC,kBACN,WAAW,CAAC,YAAY;AAEtB,cAAM,iBAAiB,QAAQ,SAAS,KAAK,CAAC;AAC9C,cAAM,iBAAiB,eAAe,IAAI,CAAC,WAAW;AACpD,cAAI,OAAO,SAAS,KAAK,KAAa,QAAA;AAC/B,iBAAA;AAAA,YACL,GAAG;AAAA,YACH,UAAU,cAAc,QACpB,KAAK,MAAO,cAAc,SAAS,cAAc,QAAS,GAAG,IAC7D;AAAA,UACN;AAAA,QAAA,CACD;AAGM,eAAA;AAAA,UACL,GAAG;AAAA,UACH,CAAC,SAAS,GAAG;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IACL;AAEI,QAAA;AAEF,iBAAW,QAAQ,OAAO;AAClB,cAAA,YAAY,KAAK,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,KAAK,GAAG;AAE5D,cAAM,MAAM,iBAAiB,WAAW,aAAa,SAAS,sBAAsB,SAAS;AAC7F,cAAM,UAAU,EAAE,gBAAgB,KAAK,MAAM,eAAe,KAAK,KAAK;AACtE,cACG,KAAK,KAAK,MAAM,EAAE,SAAS,kBAAkB,gBAAgB,IAAI,EAAG,CAAA,EACpE,KAAK,eAAe,IAAI,CAAC,EACzB,MAAM,aAAa,IAAI,CAAC;AAAA,MAAA;AAG7B,kBAAY,SAAS;AAAA,aACd,OAAO;AAEd,cAAQ,MAAM,KAAK;AACnBA,oBAAA,MAAM,MAAM,yBAAyB;AAAA,IAAA;AAAA,EAEzC;AAEM,QAAA,oBAAoB,CAAC,UAAyC;AAC5D,UAAA,QAAQ,MAAM,OAAO;AAE3B,QAAI,OAAO;AACT,uBAAiB,KAAK;AAAA,IAAA;AAAA,EAE1B;AAGM,QAAA,iBAAiB,CAAC,UAAqC;AAC3D,UAAM,eAAe;AACrB,sBAAkB,KAAK;AAEjB,UAAA,QAAQ,MAAM,aAAa;AAEjC,QAAI,OAAO;AACT,uBAAiB,KAAK;AAAA,IAAA;AAAA,EAE1B;AACM,QAAA,gBACJ,YAAY,UAAU,EAAE,UAAU,SAAS,UAAU,SAAS,WAAW,SAAS,IAAI,CAAC;AAEzF,SAEKC,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,IAAA,CAAC,kBACAC,2BAAA,kBAAA;AAAA,MAACC,yBAAO;AAAA,MAAP;AAAA,QACC,aAAa,MAAM,kBAAkB,IAAI;AAAA,QACzC,WAAW,KAAK,OAAO;AAAA,QAEvB,UACGH,2BAAA,kBAAA,KAAAC,uCAAA,EAAA,UAAA;AAAA,UAAA;AAAA,WAEA,eAAU,SAAS,MAAnB,mBAAsB,IAAI,CAAC,SAC1BC,2BAAA,kBAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cAEE,GAAG;AAAA,cACJ,MAAM;AAAA,cACN,UAAU,MAAM,mBAAmB,KAAK,IAAI;AAAA,YAAA;AAAA,YAHvC,KAAK;AAAA,UAAA;AAAA,UAQbJ,2BAAAA,kBAAAA,KAAAK,yBAAA,QAAA,EAAc,IAAG,UAAS,WAAW,KAAK,UAAU,OAAO,GAAG,OAAO,eACpE,UAAA;AAAA,YAAAH,2BAAAA,kBAAAA,IAAC,UAAK,UAAuB,0BAAA,CAAA;AAAA,6DAC5B,SAAM,EAAA,MAAK,QAAO,UAAQ,MAAC,UAAU,kBAAmB,CAAA;AAAA,UAAA,EAC3D,CAAA;AAAA,QAAA,EACF,CAAA;AAAA,MAAA;AAAA,IACF;AAAA,IAGD,kBACCF,2BAAA,kBAAA;AAAA,MAACM,yBAAO;AAAA,MAAP;AAAA,QACC,YAAY,CAAC,MAAM,EAAE,eAAe;AAAA,QACpC,aAAa,MAAM,kBAAkB,KAAK;AAAA,QAC1C,QAAQ;AAAA,QAER,UAAA;AAAA,UAACJ,2BAAAA,kBAAAA,IAAAK,oBAAA,MAAA,EAAK,MAAK,SAAS,CAAA;AAAA,UACpBL,2BAAAA,kBAAAA,IAAC,UAAK,UAAiB,oBAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACzB,GAEJ;AAEJ;;;"}
+{"version":3,"file":"ReviewablesUpload.cjs.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["useDetailsPanelContext","useState","_a","reviewablesQueries","api","toast","jsxs","Fragment","jsx","Styled.ReviewablesList","ReviewableProgressCard","Styled.Upload","Styled.Dropzone","Icon"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js

@@ -52,6 +52,10 @@ import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../api/queries/folders/getFolders.es.js";
 import "../../api/queries/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
@@ -72,12 +76,13 @@ import "@dnd-kit/sortable";
 import "./ReviewablesList.styled.es.js";
 import "../../containers/ContextMenu/ContextMenuContext.es.js";
 /* empty css                                               */
-import "../../../../_virtual/lodash.es.js";
+import "lodash";
 import "../../util/pubsub.es.js";
 import { ReviewablesList, Upload, Dropzone } from "./ReviewablesUpload.styled.es.js";
 import "../../context/RemoteModulesContext.es.js";
 import { useDetailsPanelContext } from "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
@@ -123,6 +128,18 @@ import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "@tanstack/react-table";
+import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
+import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
@@ -142,6 +159,11 @@ import "../EntityPath/EntityPath.styled.es.js";
 import "../EntityPath/SegmentProvider.es.js";
 import "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
 import "../Watchers/Watchers.es.js";
+import "../ProjectTableSettings/ProjectTableSettings.es.js";
+import "../SettingsPanel/SettingsPanel.es.js";
+import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import "../AttributeEditor/components/MinMaxField.es.js";
+import "../EnumEditor/EnumEditor.styled.es.js";
 const ReviewableUpload = ({
   projectName,
   versionId,

package/dist/shared/src/components/ReviewablesList/ReviewablesUpload.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}
+{"version":3,"file":"ReviewablesUpload.es.js","sources":["../../../../../src/components/ReviewablesList/ReviewablesUpload.tsx"],"sourcesContent":["import axios, { AxiosProgressEvent, AxiosResponse } from 'axios'\nimport { toast } from 'react-toastify'\nimport { FC, useState, DragEvent, ChangeEvent } from 'react'\nimport clsx from 'clsx'\n\nimport { Icon } from '@ynput/ayon-react-components'\n\nimport api, { reviewablesQueries } from '@shared/api'\nimport type { UploadReviewableApiResponse } from '@shared/api'\n\n// components\nimport { ReviewableProgress, ReviewableProgressCard } from '@shared/components'\nimport * as Styled from './ReviewablesUpload.styled'\nimport { useDetailsPanelContext } from '@shared/context'\n\nexport interface ReviewableUploadProps {\n  projectName: string | null\n  versionId: string\n  productId: string | null\n  variant?: 'normal' | 'large'\n  onUpload?: () => void\n  children?: any\n}\n\nexport const ReviewableUpload: FC<ReviewableUploadProps> = ({\n  projectName,\n  versionId,\n  productId,\n  onUpload,\n  children,\n  variant = 'normal',\n}) => {\n  const { viewer, dispatch } = useDetailsPanelContext()\n\n  const taskId = viewer?.taskId\n  const folderId = viewer?.folderId\n\n  // are we dragging a file over?\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n\n  const [uploading, setUploads] = useState<{ [key: string]: ReviewableProgress[] }>({})\n\n  const handleRemoveUpload = (name: string) => {\n    setUploads((uploads) => ({\n      ...uploads,\n      [versionId]: uploads[versionId]?.filter((upload) => upload.name !== name) || [],\n    }))\n  }\n\n  const handleFileUpload = async (files: FileList) => {\n    const uploadingFiles = Array.from(files).map((file) => ({\n      name: file.name,\n      size: file.size,\n      progress: 0,\n    }))\n\n    const newUploadsForVersion = [...(uploading[versionId] || []), ...uploadingFiles]\n\n    setUploads({ ...uploading, [versionId]: newUploadsForVersion })\n\n    const successHandler = (file: File) => (response: AxiosResponse) => {\n      // Handle successful upload\n      console.log(`Upload successful for ${file.name}`)\n      // patch the new data into the reviewables cache\n      const data = response.data as UploadReviewableApiResponse\n\n      if (!projectName) return\n\n      dispatch(\n        // @ts-ignore\n        reviewablesQueries.util.updateQueryData(\n          'getReviewablesForVersion',\n          { projectName, versionId },\n          (draft) => {\n            if (!draft.reviewables) {\n              draft.reviewables = []\n            }\n            // @ts-ignore\n            draft.reviewables.push(data)\n          },\n        ),\n      )\n\n      // also invalidate the viewer cache\n      productId && dispatch(api.util.invalidateTags([{ type: 'viewer', id: productId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: versionId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: folderId }]))\n      dispatch(api.util.invalidateTags([{ type: 'viewer', id: taskId }]))\n      // remove the file from the list\n      handleRemoveUpload(file.name)\n    }\n\n    const errorHandler = (file: File) => (error: any) => {\n      console.error(`Upload failed for ${file.name}: ${error}`)\n      toast.error(`Failed to upload file: ${file.name}`)\n      // add error to the file\n      setUploads((uploads) => {\n        // current uploads for versionId\n        const currentUploads = uploads[versionId] || []\n        const updatedUploads = currentUploads.map((upload) => {\n          if (upload.name !== file.name) return upload\n          return {\n            ...upload,\n            error: error.response.data.detail || error.message,\n          }\n        })\n\n        // update state\n        return {\n          ...uploads,\n          [versionId]: updatedUploads,\n        }\n      })\n    }\n\n    const progressHandler = (file: File) => {\n      return (progressEvent: AxiosProgressEvent) =>\n        setUploads((uploads) => {\n          // current uploads for versionId\n          const currentUploads = uploads[versionId] || []\n          const updatedUploads = currentUploads.map((upload) => {\n            if (upload.name !== file.name) return upload\n            return {\n              ...upload,\n              progress: progressEvent.total\n                ? Math.round((progressEvent.loaded / progressEvent.total) * 100)\n                : 0,\n            }\n          })\n\n          // update state\n          return {\n            ...uploads,\n            [versionId]: updatedUploads,\n          }\n        })\n    }\n\n    try {\n      // upload the files\n      for (const file of files) {\n        const autoLabel = file.name.split('.').slice(0, -1).join('.')\n\n        const url = `/api/projects/${projectName}/versions/${versionId}/reviewables?label=${autoLabel}`\n        const headers = { 'content-type': file.type, 'x-file-name': file.name }\n        axios\n          .post(url, file, { headers, onUploadProgress: progressHandler(file) })\n          .then(successHandler(file))\n          .catch(errorHandler(file))\n      }\n      // Callback after successful uploads\n      onUpload && onUpload()\n    } catch (error) {\n      // something went wrong with everything, EEEEK!\n      console.error(error)\n      toast.error('Failed to upload file/s')\n    }\n  }\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const files = event.target.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n\n  //   when the user drops a file\n  const handleFileDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDraggingFile(false)\n\n    const files = event.dataTransfer.files\n\n    if (files) {\n      handleFileUpload(files)\n    }\n  }\n  const variantStyles =\n    variant === 'large' ? { minWidth: '360px', maxWidth: '480px', alignSelf: 'center' } : {}\n\n  return (\n    <>\n      {!isDraggingFile && (\n        <Styled.ReviewablesList\n          onDragEnter={() => setIsDraggingFile(true)}\n          className={clsx(variant)}\n        >\n          <>\n            {children}\n            {/* uploading items */}\n            {uploading[versionId]?.map((file) => (\n              <ReviewableProgressCard\n                key={file.name}\n                {...file}\n                type={'upload'}\n                onRemove={() => handleRemoveUpload(file.name)}\n              />\n            ))}\n\n            {/* upload button */}\n            <Styled.Upload id=\"upload\" className={clsx('upload', variant)} style={variantStyles}>\n              <span>Drop or click to upload</span>\n              <input type=\"file\" multiple onChange={handleInputChange} />\n            </Styled.Upload>\n          </>\n        </Styled.ReviewablesList>\n      )}\n\n      {isDraggingFile && (\n        <Styled.Dropzone\n          onDragOver={(e) => e.preventDefault()}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDrop={handleFileDrop}\n        >\n          <Icon icon=\"upload\" />\n          <span>Upload reviewable</span>\n        </Styled.Dropzone>\n      )}\n    </>\n  )\n}\n\nexport default ReviewableUpload\n"],"names":["_a","reviewablesQueries","jsxs","Fragment","jsx","Styled.ReviewablesList","Styled.Upload","Styled.Dropzone"],"mappings":"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"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js

@@ -56,6 +56,10 @@ require("../../api/queries/authentication/getAuthentication.cjs.js");
 require("../../api/queries/entities/getEntity.cjs.js");
 require("../../api/queries/entities/getEntityPanel.cjs.js");
 require("../../api/queries/entities/updateEntity.cjs.js");
+require("../../api/queries/entityLists/getLists.cjs.js");
+require("../../api/queries/entityLists/updateLists.cjs.js");
+require("../../api/queries/entityLists/getListsAttributes.cjs.js");
+require("../../api/queries/entityLists/updateListsAttributes.cjs.js");
 require("../../api/queries/folders/getFolders.cjs.js");
 require("../../api/queries/overview/getOverview.cjs.js");
 require("../../api/queries/overview/updateOverview.cjs.js");
@@ -73,13 +77,14 @@ require("@dnd-kit/core");
 require("./ReviewablesList.styled.cjs.js");
 require("../../containers/ContextMenu/ContextMenuContext.cjs.js");
 ;/* empty css                                                 */
-require("../../../../_virtual/lodash.cjs.js");
+require("lodash");
 require("../../util/pubsub.cjs.js");
 require("axios");
 require("./ReviewablesUpload.styled.cjs.js");
 require("../../context/RemoteModulesContext.cjs.js");
 require("../../context/DetailsPanelContext.cjs.js");
 require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
 require("../../context/pip/PiPProvider.cjs.js");
 require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
@@ -125,6 +130,18 @@ require("../../containers/ProjectTreeTable/context/ColumnSettingsContext.cjs.js"
 require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
+require("@tanstack/react-table");
+require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/EnumWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/CellWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
+require("../../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
+require("../../containers/ProjectTreeTable/components/SelectionCell.cjs.js");
+require("../../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");
 require("../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
 require("../../../../_virtual/semver.cjs.js");
@@ -144,6 +161,11 @@ require("../EntityPath/EntityPath.styled.cjs.js");
 require("../EntityPath/SegmentProvider.cjs.js");
 require("../DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
 require("../Watchers/Watchers.cjs.js");
+require("../ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../SettingsPanel/SettingsPanel.cjs.js");
+require("../SettingsPanel/SettingsPanelItemTemplate.cjs.js");
+require("../AttributeEditor/components/MinMaxField.cjs.js");
+require("../EnumEditor/EnumEditor.styled.cjs.js");
 const SortableReviewableCard = ({ ...props }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({
     id: props.fileId,

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}
+{"version":3,"file":"SortableReviewableCard.cjs.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["useSortable","CSS","jsx","ReviewableCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAeA,qBAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAWC,cAAA,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGC,2BAAAA,kBAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,2BAAA,kBAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;;"}

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js

@@ -55,6 +55,10 @@ import "../../api/queries/authentication/getAuthentication.es.js";
 import "../../api/queries/entities/getEntity.es.js";
 import "../../api/queries/entities/getEntityPanel.es.js";
 import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/updateListsAttributes.es.js";
 import "../../api/queries/folders/getFolders.es.js";
 import "../../api/queries/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
@@ -72,13 +76,14 @@ import "@dnd-kit/core";
 import "./ReviewablesList.styled.es.js";
 import "../../containers/ContextMenu/ContextMenuContext.es.js";
 /* empty css                                               */
-import "../../../../_virtual/lodash.es.js";
+import "lodash";
 import "../../util/pubsub.es.js";
 import "axios";
 import "./ReviewablesUpload.styled.es.js";
 import "../../context/RemoteModulesContext.es.js";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
 import "../../context/pip/PiPProvider.es.js";
 import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
@@ -124,6 +129,18 @@ import "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
+import "@tanstack/react-table";
+import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
+import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
 import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
@@ -143,6 +160,11 @@ import "../EntityPath/EntityPath.styled.es.js";
 import "../EntityPath/SegmentProvider.es.js";
 import "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
 import "../Watchers/Watchers.es.js";
+import "../ProjectTableSettings/ProjectTableSettings.es.js";
+import "../SettingsPanel/SettingsPanel.es.js";
+import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import "../AttributeEditor/components/MinMaxField.es.js";
+import "../EnumEditor/EnumEditor.styled.es.js";
 const SortableReviewableCard = ({ ...props }) => {
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: props.fileId,

package/dist/shared/src/components/ReviewablesList/SortableReviewableCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}
+{"version":3,"file":"SortableReviewableCard.es.js","sources":["../../../../../src/components/ReviewablesList/SortableReviewableCard.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { useSortable } from '@dnd-kit/sortable'\nimport { CSS } from '@dnd-kit/utilities'\nimport { ReviewableCardProps, ReviewableCard } from '@shared/components'\n\ntype SortableReviewableCardProps = ReviewableCardProps\n\nconst SortableReviewableCard: FC<SortableReviewableCardProps> = ({ ...props }) => {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id: props.fileId,\n    animateLayoutChanges: () => false,\n  })\n\n  const style = {\n    transform: CSS.Transform.toString(transform),\n    transition,\n  }\n\n  return (\n    <div ref={setNodeRef} style={style}>\n      <ReviewableCard\n        isDropPlaceholder={isDragging}\n        dragProps={{ ...attributes, ...listeners }}\n        disabled={props.sortingDisabled}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport default SortableReviewableCard\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,yBAA0D,CAAC,EAAE,GAAG,YAAY;AAC1E,QAAA,EAAE,YAAY,WAAW,YAAY,WAAW,YAAY,eAAe,YAAY;AAAA,IAC3F,IAAI,MAAM;AAAA,IACV,sBAAsB,MAAM;AAAA,EAAA,CAC7B;AAED,QAAM,QAAQ;AAAA,IACZ,WAAW,IAAI,UAAU,SAAS,SAAS;AAAA,IAC3C;AAAA,EACF;AAEA,SACGA,kCAAAA,IAAA,OAAA,EAAI,KAAK,YAAY,OACpB,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,mBAAmB;AAAA,MACnB,WAAW,EAAE,GAAG,YAAY,GAAG,UAAU;AAAA,MACzC,UAAU,MAAM;AAAA,MACf,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+require("../../context/RemoteModulesContext.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+const SettingsPanelContext = require("../../context/SettingsPanelContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
+const SidePanel = styled.div`
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--md-sys-color-surface-container-low);
+  border-radius: 4px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+`;
+const PanelHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  height: 34px;
+  padding: 0px 4px;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+
+  h3 {
+    margin-left: 4px;
+    padding: 0;
+  }
+`;
+const ToolButton = styled(ayonReactComponents.Button)`
+  padding: 4px !important;
+`;
+const PanelTitle = styled.h3`
+  margin: 0;
+  flex: 1;
+`;
+const PanelContent = styled.div`
+  padding: 8px;
+  flex: 1;
+  overflow-y: auto;
+`;
+const SettingOption = styled(ayonReactComponents.Button)`
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 8px;
+  text-align: left;
+  display: flex;
+  gap: var(--base-gap-small);
+
+  .title {
+    flex: 1;
+  }
+
+  .preview {
+    color: var(--md-sys-color-outline);
+  }
+`;
+const SettingsPanel = ({ settings }) => {
+  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } = SettingsPanelContext.useSettingsPanel();
+  const getPanelTitle = () => {
+    if (!selectedSetting) return "Settings";
+    const setting = settings.find((s) => s.id === selectedSetting);
+    return (setting == null ? void 0 : setting.title) || "Settings";
+  };
+  const renderSettingContent = () => {
+    if (!selectedSetting) {
+      return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(jsxRuntime.jsxRuntimeExports.Fragment, { children: settings.map((setting2) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+          SettingOption,
+          {
+            onClick: () => selectSetting(setting2.id),
+            variant: "text",
+            children: [
+              setting2.icon && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: setting2.icon }),
+              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "title", children: setting2.title }),
+              !!((_a = setting2.preview) == null ? void 0 : _a.toString()) && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "preview", children: setting2.preview })
+            ]
+          },
+          setting2.id
+        );
+      }) });
+    }
+    const setting = settings.find((s) => s.id === selectedSetting);
+    return setting == null ? void 0 : setting.component;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(SidePanel, { open: isPanelOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(PanelHeader, { children: [
+      selectedSetting && settings.length > 1 && /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ToolButton, { variant: "text", icon: "arrow_back", onClick: backToMainMenu }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PanelTitle, { children: getPanelTitle() }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ToolButton, { variant: "text", icon: "close", onClick: closePanel })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PanelContent, { children: renderSettingContent() })
+  ] });
+};
+exports.SettingOption = SettingOption;
+exports.SettingsPanel = SettingsPanel;
+//# sourceMappingURL=SettingsPanel.cjs.js.map

package/dist/shared/src/components/SettingsPanel/SettingsPanel.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["Button","useSettingsPanel","jsx","Fragment","setting","jsxs","Icon"],"mappings":";;;;;;;;;;;;AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAOA,0BAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChEC,sCAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKC,2BAAAA,kBAAAA,IAAAC,WAAAA,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,0CAAA,kBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,iDAACI,oBAAAA,MAAK,EAAA,MAAMF,SAAQ,MAAM;AAAA,+DAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,2BAAA,kBAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,kDAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,2BAAA,kBAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,2BAAAA,kBAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,uDAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,2BAAAA,kBAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;;;"}

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js

@@ -0,0 +1,103 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { Button, Icon } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import { useSettingsPanel } from "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+const SidePanel = styled.div`
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--md-sys-color-surface-container-low);
+  border-radius: 4px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+`;
+const PanelHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--base-gap-small);
+  height: 34px;
+  padding: 0px 4px;
+  border-bottom: 1px solid var(--md-sys-color-outline-variant);
+
+  h3 {
+    margin-left: 4px;
+    padding: 0;
+  }
+`;
+const ToolButton = styled(Button)`
+  padding: 4px !important;
+`;
+const PanelTitle = styled.h3`
+  margin: 0;
+  flex: 1;
+`;
+const PanelContent = styled.div`
+  padding: 8px;
+  flex: 1;
+  overflow-y: auto;
+`;
+const SettingOption = styled(Button)`
+  width: 100%;
+  justify-content: flex-start;
+  margin-bottom: 8px;
+  text-align: left;
+  display: flex;
+  gap: var(--base-gap-small);
+
+  .title {
+    flex: 1;
+  }
+
+  .preview {
+    color: var(--md-sys-color-outline);
+  }
+`;
+const SettingsPanel = ({ settings }) => {
+  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } = useSettingsPanel();
+  const getPanelTitle = () => {
+    if (!selectedSetting) return "Settings";
+    const setting = settings.find((s) => s.id === selectedSetting);
+    return (setting == null ? void 0 : setting.title) || "Settings";
+  };
+  const renderSettingContent = () => {
+    if (!selectedSetting) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: settings.map((setting2) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          SettingOption,
+          {
+            onClick: () => selectSetting(setting2.id),
+            variant: "text",
+            children: [
+              setting2.icon && /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: setting2.icon }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "title", children: setting2.title }),
+              !!((_a = setting2.preview) == null ? void 0 : _a.toString()) && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "preview", children: setting2.preview })
+            ]
+          },
+          setting2.id
+        );
+      }) });
+    }
+    const setting = settings.find((s) => s.id === selectedSetting);
+    return setting == null ? void 0 : setting.component;
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SidePanel, { open: isPanelOpen, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(PanelHeader, { children: [
+      selectedSetting && settings.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolButton, { variant: "text", icon: "arrow_back", onClick: backToMainMenu }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(PanelTitle, { children: getPanelTitle() }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(ToolButton, { variant: "text", icon: "close", onClick: closePanel })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PanelContent, { children: renderSettingContent() })
+  ] });
+};
+export {
+  SettingOption,
+  SettingsPanel
+};
+//# sourceMappingURL=SettingsPanel.es.js.map

package/dist/shared/src/components/SettingsPanel/SettingsPanel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["jsx","Fragment","setting","jsxs"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,MAAM,aAAa,OAAO,MAAM;AAAA;AAAA;AAIhC,MAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAK1B,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAMf,MAAA,gBAAgB,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BnC,MAAM,gBAAwC,CAAC,EAAE,eAAe;AACrE,QAAM,EAAE,aAAa,iBAAiB,YAAY,gBAAgB,kBAChE,iBAAiB;AAEnB,QAAM,gBAAgB,MAAM;AACtB,QAAA,CAAC,gBAAwB,QAAA;AAC7B,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,YAAO,mCAAS,UAAS;AAAA,EAC3B;AAEA,QAAM,uBAAuB,MAAM;AACjC,QAAI,CAAC,iBAAiB;AAEpB,aAEKA,kCAAAA,IAAAC,kBAAAA,UAAA,EAAA,UAAA,SAAS,IAAI,CAACC;;AACbC,iDAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,SAAS,MAAM,cAAcD,SAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,SAAQ,QAAQF,sCAAC,MAAK,EAAA,MAAME,SAAQ,MAAM;AAAA,oDAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,SAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,cAAQ,YAARA,mBAAiB,eAAeF,kCAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAE,SAAQ,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UANxEA,SAAQ;AAAA,QAQhB;AAAA,OAAA,GACH;AAAA,IAAA;AAIJ,UAAM,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,eAAe;AAC7D,WAAO,mCAAS;AAAA,EAClB;AAGE,SAAAC,kCAAA,KAAC,WAAU,EAAA,MAAM,aACf,UAAA;AAAA,IAAAA,uCAAC,aACE,EAAA,UAAA;AAAA,MAAmB,mBAAA,SAAS,SAAS,KACnCH,kCAAA,IAAA,YAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAAS,eAAgB,CAAA;AAAA,MAExEA,kCAAAA,IAAC,YAAY,EAAA,UAAA,cAAgB,EAAA,CAAA;AAAA,4CAC5B,YAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAAS,WAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAA,kCAAAA,IAAC,cAAc,EAAA,UAAA,qBAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;"}