Khmer Web | Reading Category

After creating categories, the next step is to read those categories by pulling them from MongoDB database and display them on the dashboard footer. It can be done by writing the codes as below:

// route/admin/category.js
import express from "express"
const categoryRoute = express.Router()
import category from '../../controller/admin/category.js'

categoryRoute.get('/',async (req,res,next) => {
    if(req.session.user){
        category.getItem(req,res)
    }else{
        res.redirect('/login')
    }
})

categoryRoute.post('/',async (req,res,next) => {
    if(req.session.user){
        category.postItem(req,res)
    }else{
        res.redirect('/login')
    }
})

export default categoryRoute

// controller/admin/category.js
import config from '../../config.js'
import categoryDB from '../../model/category.js'

class Category{
    constructor(){
        (async () => {
            this.config = await config()
        })()
    }

    async getItem(req,res){
        this.config.pageTitle = 'ទំព័រជំពូក'
        this.config.route = '/admin/category'
        this.config.type = 'category'

        this.config.count = await categoryDB.count(req)
        this.config.items = await categoryDB.getItem(req,this.config.maxPosts)

        res.render('base',{data:this.config})
    }

    async postItem(req,res){
        await categoryDB.insertItem(req,res)
        res.redirect('/admin/category')
    }
}

export default await new Category()

// model/category.js

class Category{
    async count(req){
        const count = await req.mydb.collection('categories').countDocuments()
        return count
    }

    async insertItem(req,res){
        const id = Date.now() + Math.round(Math.random() * 1E9).toString()
 
        let myCategory = {
            id: id, 
            title: req.body.title,
            thumb: req.body.thumb,
            date: req.body.datetime
        }
 
        await req.mydb.collection("categories").insertOne(myCategory)
    }

    async getItem(req,amount){
        return await req.mydb.collection("categories").find().sort({date:-1,_id:-1}).limit(amount).toArray()
    }
}

export default await new Category()

<!--view/admin/index.ejs-->
<link rel="stylesheet" href="/styles/admin/index.css" />

<section class="Header">
    <div class="menu region">
        <div class="logo"><%= data.pageTitle %></div>
        <form>
            <select name="adminSearch">
                <option>ការងារ</option>
            </select>
            <input type="text" name="q" required placeholder="Search" />
            <input type="submit" value="ស្វែងរក" />
        </form>
        <div class="logout"><a href="/">ទំព័រមុខ</a> | <a href="/login/logout">ចេញក្រៅ</a></div>
    </div>
</section>

<section class="Main">
    <div class="main region">
        <div class="sidebar">
            <div class="wrapper">
                <a href="/admin/job"><img src="/images/jobs.png" /></a>
                <a href="/admin/job">ការងារ</a>

                <a href="/admin/category"><img src="/images/category.png" /></a>
                <a href="/admin/category">ជំពូក</a>

                <a href="/admin/upload"><img src="/images/upload.png" /></a>
                <a href="/admin/upload">Upload</a>

                <a href="/admin/user"><img src="/images/users.png" /></a>
                <a href="/admin/user">អ្នកប្រើប្រាស់</a>

                <a href="/admin/setting"><img src="/images/setting.png" /></a>
                <a href="/admin/setting">Settings</a>
            </div>
        </div>
        <div class="content">
            <% if(data.route === '/admin/category'){ %>
                <%- include('category.ejs') %>
            <% } %>
        </div>
    </div>
</section>

<section class="Footer">
    <div class="footer region">
        <% if(data.count){ %>
        <div class="info">សរុបទាំងអស់មានចំនួនៈ <%= data.count %></div>
        <% }else{ %>
        <div class="info">សរុបទាំងអស់មានចំនួនៈ </div>
        <% } %>
        <ul class="list">
        <% if(data.items){ %>
            <% for(let item of data.items) { %>
            <li>
                <div class='thumb'>
                    <a href='/<%= data.type %>/<%= item.id %>'><img src='<%= item.thumb %>'/></a>  
                </div>
                <div class="title">
                    <a href="/<%= data.type %>/<%= item.id %>"><%= item.title %></a>
                    <div><%= (new Date(item.date)).toLocaleDateString('it-IT') %></div>
                </div>
                <div class="edit">
                    <a href="<%= data.route %>/edit/<%= item.id %>"><img src="/images/edit.png"/></a>
                    <a href="<%= data.route %>/delete/<%= item.id %>"><img src="/images/delete.png"/></a>
                </div> 
            </li>
            <% } %>
        <% } %>
        </ul>

        <% if(data.route === '/admin/user'){ %>
            <script>
            $('.Listing .list li').css({'grid-template-columns':'13% auto 25%'})
            $('.Listing .list li .thumb').css({'padding-top':'100%'})
            $('.Listing .list li .thumb img').css({'border-radius':'50%'})
            </script>
        <% } %>

        <div class="paginate region">
            <img onclick="paginate('<%= data.route %>')" src="/images/load-more.png"/>
        </div>
    </div>
</section>

/* static/styles/admin/index.css */
.Header{
    background: var(--background-dark);
    border-bottom: 7px solid white;
    margin-bottom: 20px;
}

.Header .menu{
    display: grid;
    grid-template-columns: 25% auto 25%;
    align-items: center;
    padding: 5px 0;
}

.Header .logo{
    font: 26px/1.5 Oswald, Limonf3;
}

.Header form{
    display: grid;
    grid-template-columns: 20% auto 20%;
}

.Header form input, .Header form select{
    font: var(--body-font);
    padding: 2px 5px 2px 10px;
}

.Header .logout{
    text-align: right;
}

.Main .main{
    display: grid;
    grid-template-columns: 25% auto;
}

.Main .main .sidebar{
    background: var(--background);
    margin-right: 10px;
    padding: 20px;
}

.Main .main .sidebar .wrapper{
    display: grid;
    grid-template-columns: 25% auto;
    grid-gap: 15px;
    align-items: center;
    height: 380px;
}

.Main .main .sidebar .wrapper a{
    font: 20px/1.5 Oswald, Bayon;
}

.Main .main .sidebar .wrapper a img{
    width: 100%;
}

.Footer .footer .info{
    text-align: center;
    background: var(--background);
    padding: 10px;
}

.Footer{
    padding-top: 10px;
}

.Footer ul{
    display: grid;
    grid-template-columns: calc(50% - 5px ) calc(50% - 5px );
    grid-gap: 10px;
    padding-top: 10px;
}

.Footer ul li{
    display: grid;
    grid-template-columns: 25% auto 20%;
    align-items: center;
    background: var(--background);
}

.Footer ul li .thumb{
    position: relative;
    padding-top: 56.25%;
}

.Footer ul li .thumb a{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Footer ul li .thumb img{
    width: 100%;
    height: 100%;
}

.Footer ul li .thumb .play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: auto;
    transform: translate(-50%,-50%);
}

.Footer ul li .title{
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Footer ul li .edit{
    text-align: right;
    padding-right: 10px;
    visibility: hidden;
}

.Footer ul li:hover .edit{
    visibility: visible;
}

.Footer ul li .edit img{
    width: 45px;
}

.Footer .paginate{
    text-align: center;
    background: var(--item-Footer);
    margin: 10px 0 20px;
    padding: 10px 0 5px;
}

.Footer .paginate img:hover{
    cursor: pointer;
}

.Footer .paginate{
    text-align: center;
    background: var(--background);
    margin: 10px 0 20px;
    padding: 5px 0 0;
}

.Footer .paginate img:hover{
    cursor: pointer;
    opacity: .7;
}

GitHub: https://github.com/Sokhavuth/khmerweb-job

Heroku: https://khmerweb-job.herokuapp.com