models table improvements

react-admin/src/App.tsx

@@ -31,6 +31,7 @@ import {ComponentTablePage} from "./pages/component/ComponentTablePage";
 import {CollectionTable} from "./pages/collection/CollectionTable";
 import {CollectionEdit} from "./pages/collection/CollectionEdit";
 import {CollectionCreate} from "./pages/collection/CollectionCreate";
+import {ModelNew} from "./pages/models/ModelNew";
 
 function App() {
     return (
@@ -54,7 +55,7 @@ function App() {
                     <Route path="/admin/role"   element={<RoleTable />} />
                     <Route path="/admin/role-create"   element={<RoleCreate />} />
                     <Route path="/admin/role-edit/:role_id"   element={<RoleEdit />} />
-                    <Route path="/admin/model"   element={<ModelTablePage />} />
+                    <Route path="/admin/models"   element={<ModelNew />} />
                     <Route path="/admin/model-create"   element={<ModelCreatePage />} />
                     <Route path="/admin/model-edit/:model_id"   element={<ModelEditPage />} />
                     <Route path="/admin/collection"   element={<CollectionTable />} />

react-admin/src/layouts/partials/AppSidebar.tsx

@@ -79,12 +79,12 @@ function AppSidebar() {
 
                             <Link
                                 className="flex items-center w-full py-1 px-2 mt-3 rounded relative hover:text-white hover:bg-gray-700"
-                                to={`/admin/model`}
+                                to={`/admin/models`}
                             >
                                 <div className="pr-2">
                                     <DeviceTabletIcon className="h-6 w-6"/>
                                 </div>
-                                <div className="ml-2">{t("model")}</div>
+                                <div className="ml-2">{t("models")}</div>
                             </Link>
 
                         </li>

react-admin/src/locales/en.json

@@ -91,7 +91,7 @@
   "loading": "Loading...",
   "component_information": "Component information",
   "page_information": "Page Information",
-  "model": "Model",
+  "models": "Models",
   "model_information": "Model Information",
   "collection_information": "Collection Information",
   "components": "Components",

react-admin/src/pages/collection/CollectionCreate.tsx

@@ -7,13 +7,16 @@ import ErrorMessage from "../../components/ErrorMessage";
 import {CreatableCollectionType} from "../../types/collection/CreatableCollectionType";
 import {useStoreCollection} from "./hooks/useStoreCollection";
 import {useCollectionCreateSchema} from "./schemas/CollectionCreateSchema";
+import React from "react";
+import slug from "slug";
 
 export const CollectionCreate = () => {
     const [t] = useTranslation("global")
     const {mutate, error} = useStoreCollection()
     const {
         register,
         handleSubmit,
+        setValue,
         formState: {errors},
     } = useForm<CreatableCollectionType>({
         resolver: joiResolver(useCollectionCreateSchema(), {allowUnknown: true}),
@@ -22,6 +25,11 @@ export const CollectionCreate = () => {
     const submitHandler = ((data: CreatableCollectionType) => {
         mutate(data)
     })
+
+    const onNameChange = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        setValue('identifier', slug(e.currentTarget.value || ''))
+    }
+
     return (
         <>
             <div className="px-5">
@@ -38,6 +46,7 @@ export const CollectionCreate = () => {
                                     placeholder={t("name")}
                                     name="name"
                                     register={register("name")}
+                                    onKeyUp={e => onNameChange(e)}
                                     autoFocus={true}
                                 />
                                 <ErrorMessage

react-admin/src/pages/models/ModelNew.tsx

@@ -0,0 +1,20 @@
+import {useTranslation} from "react-i18next";
+import {ModelSidebar} from "./ModelSidebar";
+
+export const ModelNew = (() => {
+
+    const [t] = useTranslation("global")
+
+    return (
+            <div className="overflow-x-auto">
+                <div className="flex w-full">
+                    <div className="w-64 px-5 bg-gray-100 min-h-screen bor border-gray-200">
+                        <ModelSidebar />
+                    </div>
+                    <div className="px-3 mt-5">
+                        please select a model from sidebar to see the models entries.
+                    </div>
+                </div>
+            </div>
+    )
+})

react-admin/src/pages/models/ModelSidebar.tsx

@@ -0,0 +1,27 @@
+import {useTranslation} from "react-i18next";
+import {useModelAll} from "./hooks/useModelAll";
+import {ModelType} from "../../types/model/ModelType";
+import _ from 'lodash';
+
+export const ModelSidebar = (() => {
+    const [t] = useTranslation("global")
+    const models_api_response = useModelAll()
+    console.log(models_api_response)
+    const models: Array<ModelType> = _.get(models_api_response, 'data.data.data', [])
+    return (
+        <>
+            <div className="py-5 text-xl font-semibold text-primary-500">
+                {t("models")}
+            </div>
+            <div className="mt-5">
+                {models.map((model: ModelType) => {
+                    return (
+                        <div className="mt-3 text-sm cursor-pointer text-primary-600 overflow-x-hidden font-semibold bg-gray-300 p-3">
+                            {model.name}
+                        </div>
+                    )
+                })}
+            </div>
+        </>
+    )
+})

react-admin/src/pages/models/hooks/useModelAll.ts

@@ -0,0 +1,25 @@
+import {useQuery} from '@tanstack/react-query'
+import { useAxios } from '../../../hooks/useAxios'
+import _ from 'lodash'
+import {useNavigate} from 'react-router-dom'
+
+export const useModelAll = () => {
+
+    const client = useAxios();
+    const redirect = useNavigate();
+    return useQuery({
+        queryKey: ['model-all'],
+        queryFn: (async () => {
+            try {
+                return await client.get("/model-all")
+            } catch (error) {
+                if (_.get(error, 'response.status') === 401) {
+                    localStorage.removeItem('AUTH_TOKEN')
+                    redirect("/admin/login")
+                }
+
+                console.error(error)
+            }
+        })
+    })
+}

react-admin/src/pages/models/hooks/useModelTable.ts

@@ -29,6 +29,8 @@ export const useModelTable = (query: PaginateType) => {
                     localStorage.removeItem('AUTH_TOKEN')
                     redirect("/admin/login")
                 }
+
+                console.error(error)
             }
         })
     })

src/api/handlers/model/mod.rs

@@ -4,3 +4,4 @@ pub mod put_model_identifier_api_handler;
 mod request;
 pub mod store_model_api_handler;
 pub mod update_model_api_handler;
+pub mod model_all_api_handler;

src/api/handlers/model/model_all_api_handler.rs

@@ -0,0 +1,36 @@
+use crate::avored_state::AvoRedState;
+use crate::error::{Error, Result};
+use crate::models::model_model::ModelModel;
+use crate::models::token_claim_model::LoggedInUser;
+use axum::extract::State;
+use axum::{Extension, Json};
+use std::sync::Arc;
+use crate::responses::ApiResponse;
+
+pub async fn model_all_api_handler(
+    state: State<Arc<AvoRedState>>,
+    Extension(logged_in_user): Extension<LoggedInUser>
+) -> Result<Json<ApiResponse<Vec<ModelModel>>>> {
+    println!("->> {:<12} - model_all_api_handler", "HANDLER");
+
+    let has_permission_bool = state
+        .admin_user_service
+        .has_permission(logged_in_user, String::from("model_all"))
+        .await?;
+    if !has_permission_bool {
+        return Err(Error::Forbidden);
+    }
+
+
+    let models = state
+        .model_service
+        .all_models(&state.db)
+        .await?;
+
+    let response = ApiResponse {
+        status: true,
+        data: models,
+    };
+
+    Ok(Json(response))
+}

src/api/rest_api_routes.rs

@@ -67,6 +67,7 @@ use juniper::{EmptyMutation, EmptySubscription};
 use std::sync::Arc;
 use tower_http::cors::CorsLayer;
 use crate::api::handlers::collection::put_collection_identifier_api_handler::put_collection_identifier_api_handler;
+use crate::api::handlers::model::model_all_api_handler::model_all_api_handler;
 
 pub fn rest_api_routes(state: Arc<AvoRedState>) -> Router {
     Router::new()
@@ -162,6 +163,7 @@ fn admin_api_routes(state: Arc<AvoRedState>) -> Router {
             "/api/put-collection-identifier/:collection_id",
             put(put_collection_identifier_api_handler),
         )
+        .route("/api/model-all", get(model_all_api_handler))
         .route("/api/model", get(model_table_api_handler))
         .route("/api/model", post(store_model_api_handler))
         .route("/api/model/:model_id", put(update_model_api_handler))

src/repositories/model_repository.rs

@@ -10,6 +10,7 @@ use crate::PER_PAGE;
 use surrealdb::dbs::Session;
 use surrealdb::kvs::Datastore;
 use surrealdb::sql::{Datetime, Value};
+use crate::models::component_model::ComponentModel;
 
 #[derive(Clone)]
 pub struct ModelRepository {}
@@ -230,4 +231,24 @@ impl ModelRepository {
 
         model_model
     }
+
+    pub async fn all_models(
+        &self,
+        datastore: &Datastore,
+        database_session: &Session,
+    ) -> Result<Vec<ModelModel>> {
+        let sql = "SELECT * FROM models";
+
+        let responses = datastore.execute(sql, database_session, None).await?;
+
+        let mut model_list: Vec<ModelModel> = Vec::new();
+
+        for object in into_iter_objects(responses)? {
+            let model_object = object?;
+
+            let model_model: Result<ModelModel> = model_object.try_into();
+            model_list.push(model_model?);
+        }
+        Ok(model_list)
+    }
 }

src/services/model_service.rs

@@ -127,4 +127,10 @@ impl ModelService {
             .update_model(datastore, database_session, updatable_model_model)
             .await
     }
+
+    pub async fn all_models(&self, (datastore, database_session): &DB) -> Result<Vec<ModelModel>> {
+        self.model_repository
+            .all_models(datastore, database_session)
+            .await
+    }
 }