proje-react-panel 1.4.1 → 1.6.0-test-1

package/src/components/list/cells/LinkCell.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CellConfiguration } from '../../../decorators/list/Cell';
+import { LinkCellConfiguration } from '../../../decorators/list/cells/LinkCell';
+import { Link } from 'react-router';
+
+interface LinkCellProps<T> {
+  item: T;
+  configuration: CellConfiguration;
+}
+
+export function LinkCell<T>({ item, configuration }: LinkCellProps<T>) {
+  const linkConfiguration = configuration as LinkCellConfiguration<T>;
+  const value = item[configuration.name as keyof T] ?? 'Link';
+
+  return (
+    <Link to={linkConfiguration.path ?? linkConfiguration.url ?? ''}>
+      {linkConfiguration.onClick ? (
+        <a
+          className="util-cell-link"
+          onClick={() => {
+            linkConfiguration.onClick?.(item as T);
+          }}
+        >
+          {value?.toString()}
+        </a>
+      ) : (
+        value?.toString() || linkConfiguration.placeHolder
+      )}
+    </Link>
+  );
+}

package/src/components/list/cells/UUIDCell.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import { AnyClass } from '../../../types/AnyClass';
+import { CellConfiguration } from '../../../decorators/list/Cell';
 
 interface UUIDCellProps {
-  value: string;
+  item: AnyClass;
+  configuration: CellConfiguration;
 }
 
-export function UUIDCell({ value }: UUIDCellProps) {
+export function UUIDCell({ item, configuration }: UUIDCellProps) {
+  const value = item[configuration.name];
   if (!value || typeof value !== 'string' || value.length < 6) return <>-</>;
 
   return <>{`${value.slice(0, 3)}...${value.slice(-3)}`}</>;

package/src/decorators/auth/DefaultLoginForm.ts

@@ -0,0 +1,32 @@
+import { MinLength } from 'class-validator';
+import { Form } from '../form/Form';
+import { Input } from '../form/Input';
+import { LoginForm as LoginFormInterface, LoginResponse } from '../../types/Login';
+import { setAuthToken } from '../../api/ApiConfig';
+import { login } from '../../utils/login';
+import { User } from '../../types/User';
+import { authLogin } from '../..';
+
+@Form<LoginFormInterface, LoginResponse<User>>({
+  onSubmit: authLogin,
+  onSubmitSuccess: (data: LoginResponse<User>) => {
+    setAuthToken(data.access_token);
+    login(data.admin as User, data.access_token, () => {
+      window.location.href = '/';
+    });
+  },
+  type: 'formData',
+})
+export class DefaultLoginForm {
+  @MinLength(3)
+  @Input({
+    label: 'Username',
+  })
+  username: string;
+
+  @Input({
+    label: 'Password',
+    inputType: 'password',
+  })
+  password: string;
+}

package/src/decorators/details/Details.ts

@@ -7,7 +7,7 @@ export type GetDetailsDataFN<T> = (param: Record<string, string>) => Promise<T>;
 interface DetailsOptions<T extends AnyClass> {
   getDetailsData: GetDetailsDataFN<T>;
   key?: string;
-  primaryId: keyof T;
+  primaryId?: keyof T;
 }
 
 export type DetailsConfiguration<T extends AnyClass> = DetailsOptions<T> & {

package/src/decorators/list/Cell.ts

@@ -14,7 +14,7 @@ export interface StaticSelectFilter extends Filter {
 }
 
 export type CellTypes = 'string' | 'date' | 'number' | 'boolean' | 'uuid';
-export type ExtendedCellTypes = CellTypes | 'image' | 'download';
+export type ExtendedCellTypes = CellTypes | 'image' | 'download' | 'link';
 
 export interface CellOptions {
   name?: string;
@@ -22,6 +22,10 @@ export interface CellOptions {
   type?: CellTypes;
   placeHolder?: string;
   filter?: Filter | StaticSelectFilter;
+  style?: {
+    minWidth?: string;
+    width?: string;
+  };
 }
 
 export interface CellConfiguration extends Omit<CellOptions, 'type'> {

package/src/decorators/list/List.ts

@@ -25,7 +25,8 @@ export interface ListHeaderOptions {
   create?: { path: string; label: string };
 }
 
-export interface ListCellOptions<T> {
+export interface ListActionOptions<T> {
+  customActions?: { label: string; onClick: (item: T) => void; icon?: string }[];
   details?: { path: string; label: string };
   edit?: { path: string; label: string };
   delete?: { label: string; onRemoveItem?: (item: T) => Promise<void> };
@@ -34,13 +35,12 @@ export interface ListCellOptions<T> {
 export interface ListOptions<T> {
   getData: GetDataForList<T>;
   headers?: ListHeaderOptions;
-  cells?: ((item: T) => ListCellOptions<T>) | ListCellOptions<T>;
-  primaryId: string;
+  actions?: ((item: T) => ListActionOptions<T>) | ListActionOptions<T>;
+  primaryId?: string;
   key?: string;
 }
 
 export type ListConfiguration<T> = ListOptions<T> & {
-  primaryId: string;
   key: string;
 };
 

package/src/decorators/list/cells/LinkCell.ts

@@ -0,0 +1,22 @@
+import { CellConfiguration, CellOptions } from '../Cell';
+import { ExtendedCell } from '../ExtendedCell';
+
+export interface LinkCellOptions<T> extends Omit<CellOptions, 'type'> {
+  url?: string;
+  path?: string;
+  onClick?: (data: T) => void;
+}
+
+export interface LinkCellConfiguration<T> extends CellConfiguration {
+  type: 'link';
+  url?: string;
+  path?: string;
+  onClick?: (data: T) => void;
+}
+
+export function LinkCell<T>(options?: LinkCellOptions<T>): PropertyDecorator {
+  return ExtendedCell(options, (_, options) => ({
+    ...options,
+    type: 'link',
+  }));
+}

package/src/index.ts

@@ -13,13 +13,14 @@ export {
 } from './decorators/list/List';
 export { ImageCell } from './decorators/list/cells/ImageCell';
 export { Cell } from './decorators/list/Cell';
+export { DownloadCell } from './decorators/list/cells/DownloadCell';
+export { LinkCell } from './decorators/list/cells/LinkCell';
 
 //FORM
 export { FormPage } from './components/form/FormPage';
 export { Form, type OnSubmitFN } from './decorators/form/Form';
 export { Input } from './decorators/form/Input';
 export { SelectInput } from './decorators/form/inputs/SelectInput';
-export { DownloadCell } from './decorators/list/cells/DownloadCell';
 //for nested form fields
 export { getInputFields } from './decorators/form/Input';
 
@@ -36,6 +37,31 @@ export { Layout } from './components/layout';
 export { Login } from './components/Login';
 export { login } from './utils/login';
 export { logout } from './utils/logout';
+export { DefaultLoginForm } from './decorators/auth/DefaultLoginForm';
+
+//API
+export {
+  initApi,
+  initAuthToken,
+  setAuthToken,
+  setAuthLogout,
+  getAxiosInstance,
+  axiosInstance,
+} from './api/ApiConfig';
+export {
+  getAll,
+  getOne,
+  create,
+  createFormData,
+  update,
+  updateFormData,
+  updateSimple,
+  remove,
+} from './api/CrudApi';
+export { login as authLogin } from './api/AuthApi';
+
+//TYPES
+export type { LoginForm, LoginResponse } from './types/Login';
 
 //SERVICES
 export { updateDetailsData } from './services/DataService';

package/src/services/DataService.ts

@@ -9,13 +9,15 @@ export function updateDetailsData<T extends AnyClass>(
 ) {
   const { class: detailsClass } = getDetailsPageMeta(model);
   const key = detailsClass.key;
-  const id = detailsClass.primaryId;
-  console.log('updateDetailsData', model, data, detailsClass);
-  if (!data[id]) {
-    throw new Error(`Id ${id} not found in data`);
+  if (!detailsClass.primaryId) {
+    throw new Error('Primary id is required to use this utility function');
   }
 
-  useAppStore.getState().updateDetailsData(key, data[id]?.toString(), data);
+  if (!data[detailsClass.primaryId]) {
+    throw new Error(`Id ${detailsClass.primaryId} not found in data`);
+  }
+
+  useAppStore.getState().updateDetailsData(key, data[detailsClass.primaryId]?.toString(), data);
 }
 
 export function updateListData<T extends AnyClass>(
@@ -24,11 +26,13 @@ export function updateListData<T extends AnyClass>(
 ) {
   const { class: listClass } = getListPageMeta(model);
   const key = listClass.key;
-  const id = listClass.primaryId;
-  console.log('updateListData', model, data, listClass);
-  if (!data[id]) {
-    throw new Error(`Id ${id} not found in data`);
+  if (!listClass.primaryId) {
+    throw new Error('Primary id is required to use this utility function');
+  }
+
+  if (!data[listClass.primaryId]) {
+    throw new Error(`Id ${listClass.primaryId} not found in data`);
   }
 
-  useAppStore.getState().updateListData(key, data[id]?.toString(), data);
+  useAppStore.getState().updateListData(key, data[listClass.primaryId]?.toString(), data);
 }

package/src/store/store.ts

@@ -34,7 +34,7 @@ export const useAppStore = createWithEqualityFn<AppState>()(
         }),
     }),
     {
-      name: 'app-store-1',
+      name: 'proje-panel-store',
       storage: createJSONStorage(() => localStorage),
       partialize: state => ({
         user: state.user,

package/src/styles/components/button.scss

@@ -0,0 +1,14 @@
+.panel-button {
+  padding: 0.5rem 1rem;
+  border: 1px solid #444444;
+  border-radius: 4px;
+  background-color: cornflowerblue;
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  &:hover {
+    transform: scale(1.01);
+  }
+}

package/src/styles/index.scss

@@ -11,8 +11,8 @@
 @import './components/uploader.scss';
 @import './components/checkbox';
 @import './components/form-header';
+@import './components/button';
 @import './details';
-
 //TODO: import deprecated
 .layout {
   display: flex;

package/src/styles/list.scss

@@ -64,10 +64,16 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     align-items: center;
     height: $footer-height;
     font-size: 24px;
+    padding-right: 12px;
     font-weight: bold;
     text-align: center;
     color: #ffffff;
   }
+  .list-footer-total {
+    font-size: 12px;
+    font-weight: 500;
+    color: #ffffff;
+  }
   .datagrid {
     padding: 0 0 0 8px;
     height: $datagrid-height;
@@ -80,14 +86,18 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
   }
 
   .datagrid-table {
-    width: 100%;
+    min-width: 100%;
+    table-layout: fixed;
     border-collapse: collapse;
+    position: relative;
 
     th,
     td {
       padding: 12px 16px;
       text-align: left;
       border-bottom: 1px solid #444444;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     th {
@@ -158,6 +168,11 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
       fill: #ff0000;
       stroke: none;
     }
+    &.icon-down {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+    }
   }
 
   .util-cell-label {
@@ -209,3 +224,51 @@ $datagrid-height: calc(100vh - #{$header-height} - #{$footer-height});
     transition: background-color 0.2s ease;
   }
 }
+.util-cell-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  position: relative;
+  &:hover {
+    .util-cell-actions-list {
+      display: flex;
+    }
+  }
+}
+.util-cell-actions-label {
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: underline;
+}
+.util-cell-actions-list {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  display: none;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background-color: #2b2b2b;
+  border: 1px solid #444444;
+  border-radius: 4px;
+  z-index: 1000;
+  > li {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid #444444;
+    cursor: pointer;
+    &:hover {
+      background-color: #444444;
+    }
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+.util-cell-link {
+  cursor: pointer;
+}

package/src/types/Login.ts

@@ -0,0 +1,9 @@
+export interface LoginResponse<T> {
+  access_token: string;
+  admin: T;
+}
+
+export interface LoginForm {
+  username: string;
+  password: string;
+}

package/src/utils/logout.ts

@@ -1,6 +1,8 @@
+import { setAuthLogout } from '../api/ApiConfig';
 import { useAppStore } from '../store/store';
 
 export function logout(navigate: () => void) {
+  setAuthLogout();
   localStorage.removeItem('token');
   useAppStore.getState().logout();
   navigate();