admin/32644
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated via schema editor on 2025-07-06 20:08

Browse Source
This commit is contained in:
Flatlogic Bot 2025-07-06 20:09:22 +00:00
parent c43a09e9e6
commit a3f902faaf
68 changed files with 4241 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.gitignore vendored
View File

@ -1,3 +1,8 @@
node_modules/
*/node_modules/
*/build/
**/node_modules/
**/build/
.DS_Store
.env

7
app-shell/src/_schema.json
View File

File diff suppressed because one or more lines are too long

60
backend/src/db/api/field_visits.js
View File

@ -34,6 +34,10 @@ module.exports = class Field_visitsDBApi {
transaction,
});
await field_visits.setOrganizations(data.organizations || null, {
transaction,
});
return field_visits;
}
@ -114,6 +118,14 @@ module.exports = class Field_visitsDBApi {
);
}
if (data.organizations !== undefined) {
await field_visits.setOrganizations(
data.organizations,
{ transaction },
);
}
return field_visits;
}
@ -182,6 +194,10 @@ module.exports = class Field_visitsDBApi {
transaction,
});
output.organizations = await field_visits.getOrganizations({
transaction,
});
return output;
}
@ -223,6 +239,32 @@ module.exports = class Field_visitsDBApi {
}
: {},
},
{
model: db.organizations,
as: 'organizations',
where: filter.organizations
? {
[Op.or]: [
{
id: {
[Op.in]: filter.organizations
.split('|')
.map((term) => Utils.uuid(term)),
},
},
{
id: {
[Op.or]: filter.organizations
.split('|')
.map((term) => ({ [Op.iLike]: `%${term}%` })),
},
},
],
}
: {},
},
];
if (filter) {
@ -258,24 +300,6 @@ module.exports = class Field_visitsDBApi {
};
}
if (filter.calendarStart && filter.calendarEnd) {
where = {
...where,
[Op.or]: [
{
start_date: {
[Op.between]: [filter.calendarStart, filter.calendarEnd],
},
},
{
return_date: {
[Op.between]: [filter.calendarStart, filter.calendarEnd],
},
},
],
};
}
if (filter.start_dateRange) {
const [start, end] = filter.start_dateRange;

276
backend/src/db/api/organizations.js Normal file
View File

@ -0,0 +1,276 @@
const db = require('../models');
const FileDBApi = require('./file');
const crypto = require('crypto');
const Utils = require('../utils');
const Sequelize = db.Sequelize;
const Op = Sequelize.Op;
module.exports = class OrganizationsDBApi {
static async create(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.create(
{
id: data.id || undefined,
name: data.name || null,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
},
{ transaction },
);
return organizations;
}
static async bulkImport(data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
// Prepare data - wrapping individual data transformations in a map() method
const organizationsData = data.map((item, index) => ({
id: item.id || undefined,
name: item.name || null,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
createdAt: new Date(Date.now() + index * 1000),
}));
// Bulk create items
const organizations = await db.organizations.bulkCreate(organizationsData, {
transaction,
});
// For each item created, replace relation files
return organizations;
}
static async update(id, data, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.findByPk(
id,
{},
{ transaction },
);
const updatePayload = {};
if (data.name !== undefined) updatePayload.name = data.name;
updatePayload.updatedById = currentUser.id;
await organizations.update(updatePayload, { transaction });
return organizations;
}
static async deleteByIds(ids, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.findAll({
where: {
id: {
[Op.in]: ids,
},
},
transaction,
});
await db.sequelize.transaction(async (transaction) => {
for (const record of organizations) {
await record.update({ deletedBy: currentUser.id }, { transaction });
}
for (const record of organizations) {
await record.destroy({ transaction });
}
});
return organizations;
}
static async remove(id, options) {
const currentUser = (options && options.currentUser) || { id: null };
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.findByPk(id, options);
await organizations.update(
{
deletedBy: currentUser.id,
},
{
transaction,
},
);
await organizations.destroy({
transaction,
});
return organizations;
}
static async findBy(where, options) {
const transaction = (options && options.transaction) || undefined;
const organizations = await db.organizations.findOne(
{ where },
{ transaction },
);
if (!organizations) {
return organizations;
}
const output = organizations.get({ plain: true });
output.users_organizations = await organizations.getUsers_organizations({
transaction,
});
output.field_visits_organizations =
await organizations.getField_visits_organizations({
transaction,
});
output.payments_organizations =
await organizations.getPayments_organizations({
transaction,
});
output.projects_organizations =
await organizations.getProjects_organizations({
transaction,
});
return output;
}
static async findAll(filter, options) {
const limit = filter.limit || 0;
let offset = 0;
let where = {};
const currentPage = +filter.page;
offset = currentPage * limit;
const orderBy = null;
const transaction = (options && options.transaction) || undefined;
let include = [];
if (filter) {
if (filter.id) {
where = {
...where,
['id']: Utils.uuid(filter.id),
};
}
if (filter.name) {
where = {
...where,
[Op.and]: Utils.ilike('organizations', 'name', filter.name),
};
}
if (filter.active !== undefined) {
where = {
...where,
active: filter.active === true || filter.active === 'true',
};
}
if (filter.createdAtRange) {
const [start, end] = filter.createdAtRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
['createdAt']: {
...where.createdAt,
[Op.lte]: end,
},
};
}
}
}
const queryOptions = {
where,
include,
distinct: true,
order:
filter.field && filter.sort
? [[filter.field, filter.sort]]
: [['createdAt', 'desc']],
transaction: options?.transaction,
logging: console.log,
};
if (!options?.countOnly) {
queryOptions.limit = limit ? Number(limit) : undefined;
queryOptions.offset = offset ? Number(offset) : undefined;
}
try {
const { rows, count } = await db.organizations.findAndCountAll(
queryOptions,
);
return {
rows: options?.countOnly ? [] : rows,
count: count,
};
} catch (error) {
console.error('Error executing query:', error);
throw error;
}
}
static async findAllAutocomplete(query, limit, offset) {
let where = {};
if (query) {
where = {
[Op.or]: [
{ ['id']: Utils.uuid(query) },
Utils.ilike('organizations', 'id', query),
],
};
}
const records = await db.organizations.findAll({
attributes: ['id', 'id'],
where,
limit: limit ? Number(limit) : undefined,
offset: offset ? Number(offset) : undefined,
orderBy: [['id', 'ASC']],
});
return records.map((record) => ({
id: record.id,
label: record.id,
}));
}
};

42
backend/src/db/api/payments.js
View File

@ -34,6 +34,10 @@ module.exports = class PaymentsDBApi {
transaction,
});
await payments.setOrganizations(data.organizations || null, {
transaction,
});
return payments;
}
@ -109,6 +113,14 @@ module.exports = class PaymentsDBApi {
);
}
if (data.organizations !== undefined) {
await payments.setOrganizations(
data.organizations,
{ transaction },
);
}
return payments;
}
@ -174,6 +186,10 @@ module.exports = class PaymentsDBApi {
transaction,
});
output.organizations = await payments.getOrganizations({
transaction,
});
return output;
}
@ -215,6 +231,32 @@ module.exports = class PaymentsDBApi {
}
: {},
},
{
model: db.organizations,
as: 'organizations',
where: filter.organizations
? {
[Op.or]: [
{
id: {
[Op.in]: filter.organizations
.split('|')
.map((term) => Utils.uuid(term)),
},
},
{
id: {
[Op.or]: filter.organizations
.split('|')
.map((term) => ({ [Op.iLike]: `%${term}%` })),
},
},
],
}
: {},
},
];
if (filter) {

73
backend/src/db/api/projects.js
View File

@ -21,6 +21,7 @@ module.exports = class ProjectsDBApi {
start_date: data.start_date || null,
end_date: data.end_date || null,
status: data.status || null,
cash_at_bank: data.cash_at_bank || null,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
@ -28,6 +29,10 @@ module.exports = class ProjectsDBApi {
{ transaction },
);
await projects.setOrganizations(data.organizations || null, {
transaction,
});
return projects;
}
@ -45,6 +50,7 @@ module.exports = class ProjectsDBApi {
start_date: item.start_date || null,
end_date: item.end_date || null,
status: item.status || null,
cash_at_bank: item.cash_at_bank || null,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
@ -83,10 +89,21 @@ module.exports = class ProjectsDBApi {
if (data.status !== undefined) updatePayload.status = data.status;
if (data.cash_at_bank !== undefined)
updatePayload.cash_at_bank = data.cash_at_bank;
updatePayload.updatedById = currentUser.id;
await projects.update(updatePayload, { transaction });
if (data.organizations !== undefined) {
await projects.setOrganizations(
data.organizations,
{ transaction },
);
}
return projects;
}
@ -156,6 +173,10 @@ module.exports = class ProjectsDBApi {
transaction,
});
output.organizations = await projects.getOrganizations({
transaction,
});
return output;
}
@ -171,7 +192,33 @@ module.exports = class ProjectsDBApi {
const transaction = (options && options.transaction) || undefined;
let include = [];
let include = [
{
model: db.organizations,
as: 'organizations',
where: filter.organizations
? {
[Op.or]: [
{
id: {
[Op.in]: filter.organizations
.split('|')
.map((term) => Utils.uuid(term)),
},
},
{
id: {
[Op.or]: filter.organizations
.split('|')
.map((term) => ({ [Op.iLike]: `%${term}%` })),
},
},
],
}
: {},
},
];
if (filter) {
if (filter.id) {
@ -272,6 +319,30 @@ module.exports = class ProjectsDBApi {
}
}
if (filter.cash_at_bankRange) {
const [start, end] = filter.cash_at_bankRange;
if (start !== undefined && start !== null && start !== '') {
where = {
...where,
cash_at_bank: {
...where.cash_at_bank,
[Op.gte]: start,
},
};
}
if (end !== undefined && end !== null && end !== '') {
where = {
...where,
cash_at_bank: {
...where.cash_at_bank,
[Op.lte]: end,
},
};
}
}
if (filter.active !== undefined) {
where = {
...where,

14
backend/src/db/api/roles.js
View File

@ -17,6 +17,8 @@ module.exports = class RolesDBApi {
name: data.name || null,
role_customization: data.role_customization || null,
globalAccess: data.globalAccess || false,
importHash: data.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
@ -41,6 +43,8 @@ module.exports = class RolesDBApi {
name: item.name || null,
role_customization: item.role_customization || null,
globalAccess: item.globalAccess || false,
importHash: item.importHash || null,
createdById: currentUser.id,
updatedById: currentUser.id,
@ -68,6 +72,9 @@ module.exports = class RolesDBApi {
if (data.role_customization !== undefined)
updatePayload.role_customization = data.role_customization;
if (data.globalAccess !== undefined)
updatePayload.globalAccess = data.globalAccess;
updatePayload.updatedById = currentUser.id;
await roles.update(updatePayload, { transaction });
@ -201,6 +208,13 @@ module.exports = class RolesDBApi {
};
}
if (filter.globalAccess) {
where = {
...where,
globalAccess: filter.globalAccess,
};
}
if (filter.permissions) {
const searchTerms = filter.permissions.split('|');

42
backend/src/db/api/users.js
View File

@ -56,6 +56,10 @@ module.exports = class UsersDBApi {
});
}
await users.setOrganizations(data.data.organizations || null, {
transaction,
});
await users.setCustom_permissions(data.data.custom_permissions || [], {
transaction,
});
@ -190,6 +194,14 @@ module.exports = class UsersDBApi {
);
}
if (data.organizations !== undefined) {
await users.setOrganizations(
data.organizations,
{ transaction },
);
}
if (data.custom_permissions !== undefined) {
await users.setCustom_permissions(data.custom_permissions, {
transaction,
@ -285,6 +297,10 @@ module.exports = class UsersDBApi {
transaction,
});
output.organizations = await users.getOrganizations({
transaction,
});
return output;
}
@ -327,6 +343,32 @@ module.exports = class UsersDBApi {
: {},
},
{
model: db.organizations,
as: 'organizations',
where: filter.organizations
? {
[Op.or]: [
{
id: {
[Op.in]: filter.organizations
.split('|')
.map((term) => Utils.uuid(term)),
},
},
{
id: {
[Op.or]: filter.organizations
.split('|')
.map((term) => ({ [Op.iLike]: `%${term}%` })),
},
},
],
}
: {},
},
{
model: db.permissions,
as: 'custom_permissions',

173
backend/src/db/migrations/1751832486825.js Normal file
View File

@ -0,0 +1,173 @@
module.exports = {
/**
* @param {QueryInterface} queryInterface
* @param {Sequelize} Sequelize
* @returns {Promise<void>}
*/
async up(queryInterface, Sequelize) {
/**
* @type {Transaction}
*/
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.createTable(
'organizations',
{
id: {
type: Sequelize.DataTypes.UUID,
defaultValue: Sequelize.DataTypes.UUIDV4,
primaryKey: true,
},
createdById: {
type: Sequelize.DataTypes.UUID,
references: {
key: 'id',
model: 'users',
},
},
updatedById: {
type: Sequelize.DataTypes.UUID,
references: {
key: 'id',
model: 'users',
},
},
createdAt: { type: Sequelize.DataTypes.DATE },
updatedAt: { type: Sequelize.DataTypes.DATE },
deletedAt: { type: Sequelize.DataTypes.DATE },
importHash: {
type: Sequelize.DataTypes.STRING(255),
allowNull: true,
unique: true,
},
},
{ transaction },
);
await queryInterface.addColumn(
'users',
'organizationsId',
{
type: Sequelize.DataTypes.UUID,
references: {
model: 'organizations',
key: 'id',
},
},
{ transaction },
);
await queryInterface.addColumn(
'field_visits',
'organizationsId',
{
type: Sequelize.DataTypes.UUID,
references: {
model: 'organizations',
key: 'id',
},
},
{ transaction },
);
await queryInterface.addColumn(
'payments',
'organizationsId',
{
type: Sequelize.DataTypes.UUID,
references: {
model: 'organizations',
key: 'id',
},
},
{ transaction },
);
await queryInterface.addColumn(
'projects',
'organizationsId',
{
type: Sequelize.DataTypes.UUID,
references: {
model: 'organizations',
key: 'id',
},
},
{ transaction },
);
await queryInterface.addColumn(
'organizations',
'name',
{
type: Sequelize.DataTypes.TEXT,
},
{ transaction },
);
await queryInterface.addColumn(
'roles',
'globalAccess',
{
type: Sequelize.DataTypes.BOOLEAN,
defaultValue: false,
allowNull: false,
},
{ transaction },
);
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
/**
* @param {QueryInterface} queryInterface
* @param {Sequelize} Sequelize
* @returns {Promise<void>}
*/
async down(queryInterface, Sequelize) {
/**
* @type {Transaction}
*/
const transaction = await queryInterface.sequelize.transaction();
try {
await queryInterface.removeColumn('roles', 'globalAccess', {
transaction,
});
await queryInterface.removeColumn('organizations', 'name', {
transaction,
});
await queryInterface.removeColumn('projects', 'organizationsId', {
transaction,
});
await queryInterface.removeColumn('payments', 'organizationsId', {
transaction,
});
await queryInterface.removeColumn('field_visits', 'organizationsId', {
transaction,
});
await queryInterface.removeColumn('users', 'organizationsId', {
transaction,
});
await queryInterface.dropTable('organizations', { transaction });
await transaction.commit();
} catch (err) {
await transaction.rollback();
throw err;
}
},
};

8
backend/src/db/models/field_visits.js
View File

@ -74,6 +74,14 @@ module.exports = function (sequelize, DataTypes) {
constraints: false,
});
db.field_visits.belongsTo(db.organizations, {
as: 'organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.field_visits.belongsTo(db.users, {
as: 'createdBy',
});

81
backend/src/db/models/organizations.js Normal file
View File

@ -0,0 +1,81 @@
const config = require('../../config');
const providers = config.providers;
const crypto = require('crypto');
const bcrypt = require('bcrypt');
const moment = require('moment');
module.exports = function (sequelize, DataTypes) {
const organizations = sequelize.define(
'organizations',
{
id: {
type: DataTypes.UUID,
defaultValue: DataTypes.UUIDV4,
primaryKey: true,
},
name: {
type: DataTypes.TEXT,
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,
unique: true,
},
},
{
timestamps: true,
paranoid: true,
freezeTableName: true,
},
);
organizations.associate = (db) => {
/// loop through entities and it's fields, and if ref === current e[name] and create relation has many on parent entity
db.organizations.hasMany(db.users, {
as: 'users_organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.organizations.hasMany(db.field_visits, {
as: 'field_visits_organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.organizations.hasMany(db.payments, {
as: 'payments_organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.organizations.hasMany(db.projects, {
as: 'projects_organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
//end loop
db.organizations.belongsTo(db.users, {
as: 'createdBy',
});
db.organizations.belongsTo(db.users, {
as: 'updatedBy',
});
};
return organizations;
};

8
backend/src/db/models/payments.js
View File

@ -76,6 +76,14 @@ module.exports = function (sequelize, DataTypes) {
constraints: false,
});
db.payments.belongsTo(db.organizations, {
as: 'organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.payments.belongsTo(db.users, {
as: 'createdBy',
});

12
backend/src/db/models/projects.js
View File

@ -40,6 +40,10 @@ module.exports = function (sequelize, DataTypes) {
values: ['InProgress', 'Completed'],
},
cash_at_bank: {
type: DataTypes.DECIMAL,
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,
@ -74,6 +78,14 @@ module.exports = function (sequelize, DataTypes) {
//end loop
db.projects.belongsTo(db.organizations, {
as: 'organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.projects.belongsTo(db.users, {
as: 'createdBy',
});

7
backend/src/db/models/roles.js
View File

@ -22,6 +22,13 @@ module.exports = function (sequelize, DataTypes) {
type: DataTypes.TEXT,
},
globalAccess: {
type: DataTypes.BOOLEAN,
allowNull: false,
defaultValue: false,
},
importHash: {
type: DataTypes.STRING(255),
allowNull: true,

8
backend/src/db/models/users.js
View File

@ -112,6 +112,14 @@ module.exports = function (sequelize, DataTypes) {
constraints: false,
});
db.users.belongsTo(db.organizations, {
as: 'organizations',
foreignKey: {
name: 'organizationsId',
},
constraints: false,
});
db.users.hasMany(db.file, {
as: 'avatar',
foreignKey: 'belongsToId',

26
backend/src/db/seeders/20200430130760-user-roles.js
View File

@ -95,6 +95,7 @@ module.exports = {
'projects',
'roles',
'permissions',
'organizations',
,
];
await queryInterface.bulkInsert(
@ -678,6 +679,31 @@ primary key ("roles_permissionsId", "permissionId")
permissionId: getId('DELETE_PERMISSIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('CREATE_ORGANIZATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('READ_ORGANIZATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('UPDATE_ORGANIZATIONS'),
},
{
createdAt,
updatedAt,
roles_permissionsId: getId('Administrator'),
permissionId: getId('DELETE_ORGANIZATIONS'),
},
{
createdAt,
updatedAt,

332
backend/src/db/seeders/20231127130745-sample-data.js
View File

@ -7,6 +7,8 @@ const Payments = db.payments;
const Projects = db.projects;
const Organizations = db.organizations;
const FieldVisitsData = [
{
employee_name: 'Alice Johnson',
@ -26,6 +28,8 @@ const FieldVisitsData = [
amount: 200,
purpose: 'Site Inspection',
// type code here for "relation_one" field
},
{
@ -41,11 +45,13 @@ const FieldVisitsData = [
return_date: new Date('2023-06-22T00:00:00Z'),
payment_type: 'Transport',
payment_type: 'Fuel',
amount: 150,
purpose: 'Equipment Setup',
// type code here for "relation_one" field
},
{
@ -61,11 +67,13 @@ const FieldVisitsData = [
return_date: new Date('2023-07-07T00:00:00Z'),
payment_type: 'PerDiem',
payment_type: 'Fuel',
amount: 100,
purpose: 'Nutritional Workshop',
// type code here for "relation_one" field
},
{
@ -81,11 +89,13 @@ const FieldVisitsData = [
return_date: new Date('2023-07-18T00:00:00Z'),
payment_type: 'Fuel',
payment_type: 'Transport',
amount: 250,
purpose: 'Community Meeting',
// type code here for "relation_one" field
},
{
@ -106,6 +116,8 @@ const FieldVisitsData = [
amount: 180,
purpose: 'Educational Seminar',
// type code here for "relation_one" field
},
];
@ -128,6 +140,8 @@ const PaymentsData = [
status: 'Filled',
shelf_no: 'A1',
// type code here for "relation_one" field
},
{
@ -141,13 +155,15 @@ const PaymentsData = [
amount: 12000,
document_type: 'RV',
document_type: 'JV',
auto_generated_document_no: 'CDC002-JV-002',
status: 'InProgress',
status: 'Filled',
shelf_no: 'B2',
// type code here for "relation_one" field
},
{
@ -161,13 +177,15 @@ const PaymentsData = [
amount: 8000,
document_type: 'JV',
document_type: 'BPV',
auto_generated_document_no: 'NNP003-RV-003',
status: 'InProgress',
shelf_no: 'C3',
// type code here for "relation_one" field
},
{
@ -181,13 +199,15 @@ const PaymentsData = [
amount: 15000,
document_type: 'RV',
document_type: 'JV',
auto_generated_document_no: 'ACDC004-BPV-004',
status: 'Filled',
status: 'InProgress',
shelf_no: 'D4',
// type code here for "relation_one" field
},
{
@ -201,13 +221,15 @@ const PaymentsData = [
amount: 3000,
document_type: 'BPV',
document_type: 'JV',
auto_generated_document_no: 'EDU005-JV-005',
status: 'Filled',
status: 'InProgress',
shelf_no: 'E5',
// type code here for "relation_one" field
},
];
@ -223,7 +245,11 @@ const ProjectsData = [
end_date: new Date('2023-12-31T00:00:00Z'),
status: 'Completed',
status: 'InProgress',
cash_at_bank: 96.92,
// type code here for "relation_one" field
},
{
@ -238,6 +264,10 @@ const ProjectsData = [
end_date: new Date('2023-11-30T00:00:00Z'),
status: 'Completed',
cash_at_bank: 85.37,
// type code here for "relation_one" field
},
{
@ -251,7 +281,11 @@ const ProjectsData = [
end_date: new Date('2023-10-15T00:00:00Z'),
status: 'Completed',
status: 'InProgress',
cash_at_bank: 62.46,
// type code here for "relation_one" field
},
{
@ -265,7 +299,11 @@ const ProjectsData = [
end_date: new Date('2023-09-20T00:00:00Z'),
status: 'Completed',
status: 'InProgress',
cash_at_bank: 52.87,
// type code here for "relation_one" field
},
{
@ -279,12 +317,95 @@ const ProjectsData = [
end_date: new Date('2023-12-01T00:00:00Z'),
status: 'Completed',
status: 'InProgress',
cash_at_bank: 52.87,
// type code here for "relation_one" field
},
];
const OrganizationsData = [
{
name: 'Albrecht von Haller',
},
{
name: 'Louis Pasteur',
},
{
name: 'Ernst Haeckel',
},
{
name: 'John von Neumann',
},
{
name: 'Comte de Buffon',
},
];
// Similar logic for "relation_many"
async function associateUserWithOrganization() {
const relatedOrganization0 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const User0 = await Users.findOne({
order: [['id', 'ASC']],
offset: 0,
});
if (User0?.setOrganization) {
await User0.setOrganization(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const User1 = await Users.findOne({
order: [['id', 'ASC']],
offset: 1,
});
if (User1?.setOrganization) {
await User1.setOrganization(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const User2 = await Users.findOne({
order: [['id', 'ASC']],
offset: 2,
});
if (User2?.setOrganization) {
await User2.setOrganization(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const User3 = await Users.findOne({
order: [['id', 'ASC']],
offset: 3,
});
if (User3?.setOrganization) {
await User3.setOrganization(relatedOrganization3);
}
const relatedOrganization4 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const User4 = await Users.findOne({
order: [['id', 'ASC']],
offset: 4,
});
if (User4?.setOrganization) {
await User4.setOrganization(relatedOrganization4);
}
}
async function associateFieldVisitWithProject() {
const relatedProject0 = await Projects.findOne({
offset: Math.floor(Math.random() * (await Projects.count())),
@ -342,6 +463,63 @@ async function associateFieldVisitWithProject() {
}
}
async function associateFieldVisitWithOrganization() {
const relatedOrganization0 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const FieldVisit0 = await FieldVisits.findOne({
order: [['id', 'ASC']],
offset: 0,
});
if (FieldVisit0?.setOrganization) {
await FieldVisit0.setOrganization(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const FieldVisit1 = await FieldVisits.findOne({
order: [['id', 'ASC']],
offset: 1,
});
if (FieldVisit1?.setOrganization) {
await FieldVisit1.setOrganization(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const FieldVisit2 = await FieldVisits.findOne({
order: [['id', 'ASC']],
offset: 2,
});
if (FieldVisit2?.setOrganization) {
await FieldVisit2.setOrganization(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const FieldVisit3 = await FieldVisits.findOne({
order: [['id', 'ASC']],
offset: 3,
});
if (FieldVisit3?.setOrganization) {
await FieldVisit3.setOrganization(relatedOrganization3);
}
const relatedOrganization4 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const FieldVisit4 = await FieldVisits.findOne({
order: [['id', 'ASC']],
offset: 4,
});
if (FieldVisit4?.setOrganization) {
await FieldVisit4.setOrganization(relatedOrganization4);
}
}
async function associatePaymentWithProject() {
const relatedProject0 = await Projects.findOne({
offset: Math.floor(Math.random() * (await Projects.count())),
@ -399,6 +577,120 @@ async function associatePaymentWithProject() {
}
}
async function associatePaymentWithOrganization() {
const relatedOrganization0 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Payment0 = await Payments.findOne({
order: [['id', 'ASC']],
offset: 0,
});
if (Payment0?.setOrganization) {
await Payment0.setOrganization(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Payment1 = await Payments.findOne({
order: [['id', 'ASC']],
offset: 1,
});
if (Payment1?.setOrganization) {
await Payment1.setOrganization(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Payment2 = await Payments.findOne({
order: [['id', 'ASC']],
offset: 2,
});
if (Payment2?.setOrganization) {
await Payment2.setOrganization(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Payment3 = await Payments.findOne({
order: [['id', 'ASC']],
offset: 3,
});
if (Payment3?.setOrganization) {
await Payment3.setOrganization(relatedOrganization3);
}
const relatedOrganization4 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Payment4 = await Payments.findOne({
order: [['id', 'ASC']],
offset: 4,
});
if (Payment4?.setOrganization) {
await Payment4.setOrganization(relatedOrganization4);
}
}
async function associateProjectWithOrganization() {
const relatedOrganization0 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Project0 = await Projects.findOne({
order: [['id', 'ASC']],
offset: 0,
});
if (Project0?.setOrganization) {
await Project0.setOrganization(relatedOrganization0);
}
const relatedOrganization1 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Project1 = await Projects.findOne({
order: [['id', 'ASC']],
offset: 1,
});
if (Project1?.setOrganization) {
await Project1.setOrganization(relatedOrganization1);
}
const relatedOrganization2 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Project2 = await Projects.findOne({
order: [['id', 'ASC']],
offset: 2,
});
if (Project2?.setOrganization) {
await Project2.setOrganization(relatedOrganization2);
}
const relatedOrganization3 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Project3 = await Projects.findOne({
order: [['id', 'ASC']],
offset: 3,
});
if (Project3?.setOrganization) {
await Project3.setOrganization(relatedOrganization3);
}
const relatedOrganization4 = await Organizations.findOne({
offset: Math.floor(Math.random() * (await Organizations.count())),
});
const Project4 = await Projects.findOne({
order: [['id', 'ASC']],
offset: 4,
});
if (Project4?.setOrganization) {
await Project4.setOrganization(relatedOrganization4);
}
}
module.exports = {
up: async (queryInterface, Sequelize) => {
await FieldVisits.bulkCreate(FieldVisitsData);
@ -407,12 +699,22 @@ module.exports = {
await Projects.bulkCreate(ProjectsData);
await Organizations.bulkCreate(OrganizationsData);
await Promise.all([
// Similar logic for "relation_many"
await associateUserWithOrganization(),
await associateFieldVisitWithProject(),
await associateFieldVisitWithOrganization(),
await associatePaymentWithProject(),
await associatePaymentWithOrganization(),
await associateProjectWithOrganization(),
]);
},
@ -422,5 +724,7 @@ module.exports = {
await queryInterface.bulkDelete('payments', null, {});
await queryInterface.bulkDelete('projects', null, {});
await queryInterface.bulkDelete('organizations', null, {});
},
};

87
backend/src/db/seeders/20250706200806.js Normal file
View File

@ -0,0 +1,87 @@
const { v4: uuid } = require('uuid');
const db = require('../models');
const Sequelize = require('sequelize');
const config = require('../../config');
module.exports = {
/**
* @param{import("sequelize").QueryInterface} queryInterface
* @return {Promise<void>}
*/
async up(queryInterface) {
const createdAt = new Date();
const updatedAt = new Date();
/** @type {Map<string, string>} */
const idMap = new Map();
/**
* @param {string} key
* @return {string}
*/
function getId(key) {
if (idMap.has(key)) {
return idMap.get(key);
}
const id = uuid();
idMap.set(key, id);
return id;
}
/**
* @param {string} name
*/
function createPermissions(name) {
return [
{
id: getId(`CREATE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `CREATE_${name.toUpperCase()}`,
},
{
id: getId(`READ_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `READ_${name.toUpperCase()}`,
},
{
id: getId(`UPDATE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `UPDATE_${name.toUpperCase()}`,
},
{
id: getId(`DELETE_${name.toUpperCase()}`),
createdAt,
updatedAt,
name: `DELETE_${name.toUpperCase()}`,
},
];
}
const entities = ['organizations'];
const createdPermissions = entities.flatMap(createPermissions);
// Add permissions to database
await queryInterface.bulkInsert('permissions', createdPermissions);
// Get permissions ids
const permissionsIds = createdPermissions.map((p) => p.id);
// Get admin role
const adminRole = await db.roles.findOne({
where: { name: config.roles.admin },
});
if (adminRole) {
// Add permissions to admin role if it exists
await adminRole.addPermissions(permissionsIds);
}
},
down: async (queryInterface, Sequelize) => {
await queryInterface.bulkDelete(
'permissions',
entities.flatMap(createPermissions),
);
},
};

8
backend/src/index.js
View File

@ -29,6 +29,8 @@ const rolesRoutes = require('./routes/roles');
const permissionsRoutes = require('./routes/permissions');
const organizationsRoutes = require('./routes/organizations');
const getBaseUrl = (url) => {
if (!url) return '';
return url.endsWith('/api') ? url.slice(0, -4) : url;
@ -130,6 +132,12 @@ app.use(
permissionsRoutes,
);
app.use(
'/api/organizations',
passport.authenticate('jwt', { session: false }),
organizationsRoutes,
);
app.use(
'/api/openai',
passport.authenticate('jwt', { session: false }),

444
backend/src/routes/organizations.js Normal file
View File

@ -0,0 +1,444 @@
const express = require('express');
const OrganizationsService = require('../services/organizations');
const OrganizationsDBApi = require('../db/api/organizations');
const wrapAsync = require('../helpers').wrapAsync;
const router = express.Router();
const { parse } = require('json2csv');
const { checkCrudPermissions } = require('../middlewares/check-permissions');
router.use(checkCrudPermissions('organizations'));
/**
* @swagger
* components:
* schemas:
* Organizations:
* type: object
* properties:
* name:
* type: string
* default: name
*/
/**
* @swagger
* tags:
* name: Organizations
* description: The Organizations managing API
*/
/**
* @swagger
* /api/organizations:
* post:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Add new item
* description: Add new item
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Organizations"
* responses:
* 200:
* description: The item was successfully added
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*/
router.post(
'/',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await OrganizationsService.create(
req.body.data,
req.currentUser,
true,
link.host,
);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/budgets/bulk-import:
* post:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Bulk import items
* description: Bulk import items
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* data:
* description: Data of the updated items
* type: array
* items:
* $ref: "#/components/schemas/Organizations"
* responses:
* 200:
* description: The items were successfully imported
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 405:
* description: Invalid input data
* 500:
* description: Some server error
*
*/
router.post(
'/bulk-import',
wrapAsync(async (req, res) => {
const referer =
req.headers.referer ||
`${req.protocol}://${req.hostname}${req.originalUrl}`;
const link = new URL(referer);
await OrganizationsService.bulkImport(req, res, true, link.host);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/organizations/{id}:
* put:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Update the data of the selected item
* description: Update the data of the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to update
* required: true
* schema:
* type: string
* requestBody:
* description: Set new item data
* required: true
* content:
* application/json:
* schema:
* properties:
* id:
* description: ID of the updated item
* type: string
* data:
* description: Data of the updated item
* type: object
* $ref: "#/components/schemas/Organizations"
* required:
* - id
* responses:
* 200:
* description: The item data was successfully updated
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.put(
'/:id',
wrapAsync(async (req, res) => {
await OrganizationsService.update(
req.body.data,
req.body.id,
req.currentUser,
);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/organizations/{id}:
* delete:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Delete the selected item
* description: Delete the selected item
* parameters:
* - in: path
* name: id
* description: Item ID to delete
* required: true
* schema:
* type: string
* responses:
* 200:
* description: The item was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.delete(
'/:id',
wrapAsync(async (req, res) => {
await OrganizationsService.remove(req.params.id, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/organizations/deleteByIds:
* post:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Delete the selected item list
* description: Delete the selected item list
* requestBody:
* required: true
* content:
* application/json:
* schema:
* properties:
* ids:
* description: IDs of the updated items
* type: array
* responses:
* 200:
* description: The items was successfully deleted
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Items not found
* 500:
* description: Some server error
*/
router.post(
'/deleteByIds',
wrapAsync(async (req, res) => {
await OrganizationsService.deleteByIds(req.body.data, req.currentUser);
const payload = true;
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/organizations:
* get:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Get all organizations
* description: Get all organizations
* responses:
* 200:
* description: Organizations list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/',
wrapAsync(async (req, res) => {
const filetype = req.query.filetype;
const currentUser = req.currentUser;
const payload = await OrganizationsDBApi.findAll(req.query, {
currentUser,
});
if (filetype && filetype === 'csv') {
const fields = ['id', 'name'];
const opts = { fields };
try {
const csv = parse(payload.rows, opts);
res.status(200).attachment(csv);
res.send(csv);
} catch (err) {
console.error(err);
}
} else {
res.status(200).send(payload);
}
}),
);
/**
* @swagger
* /api/organizations/count:
* get:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Count all organizations
* description: Count all organizations
* responses:
* 200:
* description: Organizations count successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get(
'/count',
wrapAsync(async (req, res) => {
const currentUser = req.currentUser;
const payload = await OrganizationsDBApi.findAll(req.query, null, {
countOnly: true,
currentUser,
});
res.status(200).send(payload);
}),
);
/**
* @swagger
* /api/organizations/autocomplete:
* get:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Find all organizations that match search criteria
* description: Find all organizations that match search criteria
* responses:
* 200:
* description: Organizations list successfully received
* content:
* application/json:
* schema:
* type: array
* items:
* $ref: "#/components/schemas/Organizations"
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Data not found
* 500:
* description: Some server error
*/
router.get('/autocomplete', async (req, res) => {
const payload = await OrganizationsDBApi.findAllAutocomplete(
req.query.query,
req.query.limit,
req.query.offset,
);
res.status(200).send(payload);
});
/**
* @swagger
* /api/organizations/{id}:
* get:
* security:
* - bearerAuth: []
* tags: [Organizations]
* summary: Get selected item
* description: Get selected item
* parameters:
* - in: path
* name: id
* description: ID of item to get
* required: true
* schema:
* type: string
* responses:
* 200:
* description: Selected item successfully received
* content:
* application/json:
* schema:
* $ref: "#/components/schemas/Organizations"
* 400:
* description: Invalid ID supplied
* 401:
* $ref: "#/components/responses/UnauthorizedError"
* 404:
* description: Item not found
* 500:
* description: Some server error
*/
router.get(
'/:id',
wrapAsync(async (req, res) => {
const payload = await OrganizationsDBApi.findBy({ id: req.params.id });
res.status(200).send(payload);
}),
);
router.use('/', require('../helpers').commonErrorHandler);
module.exports = router;

117
backend/src/services/organizations.js Normal file
View File

@ -0,0 +1,117 @@
const db = require('../db/models');
const OrganizationsDBApi = require('../db/api/organizations');
const processFile = require('../middlewares/upload');
const ValidationError = require('./notifications/errors/validation');
const csv = require('csv-parser');
const axios = require('axios');
const config = require('../config');
const stream = require('stream');
module.exports = class OrganizationsService {
static async create(data, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await OrganizationsDBApi.create(data, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async bulkImport(req, res, sendInvitationEmails = true, host) {
const transaction = await db.sequelize.transaction();
try {
await processFile(req, res);
const bufferStream = new stream.PassThrough();
const results = [];
await bufferStream.end(Buffer.from(req.file.buffer, 'utf-8')); // convert Buffer to Stream
await new Promise((resolve, reject) => {
bufferStream
.pipe(csv())
.on('data', (data) => results.push(data))
.on('end', async () => {
console.log('CSV results', results);
resolve();
})
.on('error', (error) => reject(error));
});
await OrganizationsDBApi.bulkImport(results, {
transaction,
ignoreDuplicates: true,
validate: true,
currentUser: req.currentUser,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async update(data, id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
let organizations = await OrganizationsDBApi.findBy(
{ id },
{ transaction },
);
if (!organizations) {
throw new ValidationError('organizationsNotFound');
}
const updatedOrganizations = await OrganizationsDBApi.update(id, data, {
currentUser,
transaction,
});
await transaction.commit();
return updatedOrganizations;
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async deleteByIds(ids, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await OrganizationsDBApi.deleteByIds(ids, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
static async remove(id, currentUser) {
const transaction = await db.sequelize.transaction();
try {
await OrganizationsDBApi.remove(id, {
currentUser,
transaction,
});
await transaction.commit();
} catch (error) {
await transaction.rollback();
throw error;
}
}
};

4
backend/src/services/search.js
View File

@ -56,11 +56,15 @@ module.exports = class SearchService {
],
projects: ['name', 'code', 'source_of_funds'],
organizations: ['name'],
};
const columnsInt = {
field_visits: ['amount'],
payments: ['amount'],
projects: ['cash_at_bank'],
};
let allFoundRecords = [];

1
frontend/json/runtimeError.json Normal file
View File

@ -0,0 +1 @@
{}

31
frontend/src/components/Field_visits/TableField_visits.tsx
View File

@ -20,10 +20,7 @@ import _ from 'lodash';
import dataFormatter from '../../helpers/dataFormatter';
import { dataGridStyles } from '../../styles';
import BigCalendar from '../BigCalendar';
import { SlotInfo } from 'react-big-calendar';
const perPage = 100;
const perPage = 10;
const TableSampleField_visits = ({
filterItems,
@ -104,12 +101,6 @@ const TableSampleField_visits = ({
setIsModalTrashActive(false);
};
const handleCreateEventAction = ({ start, end }: SlotInfo) => {
router.push(
`/field_visits/field_visits-new?dateRangeStart=${start.toISOString()}&dateRangeEnd=${end.toISOString()}`,
);
};
const handleDeleteModalAction = (id: string) => {
setId(id);
setIsModalTrashActive(true);
@ -473,25 +464,7 @@ const TableSampleField_visits = ({
<p>Are you sure you want to delete this item?</p>
</CardBoxModal>
{!showGrid && (
<BigCalendar
events={field_visits}
showField={'employee_name'}
start-data-key={'start_date'}
end-data-key={'return_date'}
handleDeleteAction={handleDeleteModalAction}
pathEdit={`/field_visits/field_visits-edit/?id=`}
pathView={`/field_visits/field_visits-view/?id=`}
handleCreateEventAction={handleCreateEventAction}
onDateRangeChange={(range) => {
loadData(
0,
`&calendarStart=${range.start}&calendarEnd=${range.end}`,
);
}}
entityName={'field_visits'}
/>
)}
{dataGrid}
{showGrid && dataGrid}

108
frontend/src/components/Organizations/CardOrganizations.tsx Normal file
View File

@ -0,0 +1,108 @@
import React from 'react';
import ImageField from '../ImageField';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import dataFormatter from '../../helpers/dataFormatter';
import { Pagination } from '../Pagination';
import { saveFile } from '../../helpers/fileSaver';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
organizations: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const CardOrganizations = ({
organizations,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const asideScrollbarsStyle = useAppSelector(
(state) => state.style.asideScrollbarsStyle,
);
const bgColor = useAppSelector((state) => state.style.cardsColor);
const darkMode = useAppSelector((state) => state.style.darkMode);
const corners = useAppSelector((state) => state.style.corners);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(
currentUser,
'UPDATE_ORGANIZATIONS',
);
return (
<div className={'p-4'}>
{loading && <LoadingSpinner />}
<ul
role='list'
className='grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8'
>
{!loading &&
organizations.map((item, index) => (
<li
key={item.id}
className={`overflow-hidden ${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} border ${focusRing} border-gray-200 dark:border-dark-700 ${
darkMode ? 'aside-scrollbars-[slate]' : asideScrollbarsStyle
}`}
>
<div
className={`flex items-center ${bgColor} p-6 gap-x-4 border-b border-gray-900/5 bg-gray-50 dark:bg-dark-800 relative`}
>
<Link
href={`/organizations/organizations-view/?id=${item.id}`}
className='text-lg font-bold leading-6 line-clamp-1'
>
{item.id}
</Link>
<div className='ml-auto '>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/organizations/organizations-edit/?id=${item.id}`}
pathView={`/organizations/organizations-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</div>
<dl className='divide-y divide-stone-300 dark:divide-dark-700 px-6 py-4 text-sm leading-6 h-64 overflow-y-auto'>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>Name</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>{item.name}</div>
</dd>
</div>
</dl>
</li>
))}
{!loading && organizations.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</ul>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</div>
);
};
export default CardOrganizations;

90
frontend/src/components/Organizations/ListOrganizations.tsx Normal file
View File

@ -0,0 +1,90 @@
import React from 'react';
import CardBox from '../CardBox';
import ImageField from '../ImageField';
import dataFormatter from '../../helpers/dataFormatter';
import { saveFile } from '../../helpers/fileSaver';
import ListActionsPopover from '../ListActionsPopover';
import { useAppSelector } from '../../stores/hooks';
import { Pagination } from '../Pagination';
import LoadingSpinner from '../LoadingSpinner';
import Link from 'next/link';
import { hasPermission } from '../../helpers/userPermissions';
type Props = {
organizations: any[];
loading: boolean;
onDelete: (id: string) => void;
currentPage: number;
numPages: number;
onPageChange: (page: number) => void;
};
const ListOrganizations = ({
organizations,
loading,
onDelete,
currentPage,
numPages,
onPageChange,
}: Props) => {
const currentUser = useAppSelector((state) => state.auth.currentUser);
const hasUpdatePermission = hasPermission(
currentUser,
'UPDATE_ORGANIZATIONS',
);
const corners = useAppSelector((state) => state.style.corners);
const bgColor = useAppSelector((state) => state.style.cardsColor);
return (
<>
<div className='relative overflow-x-auto p-4 space-y-4'>
{loading && <LoadingSpinner />}
{!loading &&
organizations.map((item) => (
<div key={item.id}>
<CardBox hasTable isList className={'rounded shadow-none'}>
<div
className={`flex rounded dark:bg-dark-900 border border-stone-300 items-center overflow-hidden`}
>
<Link
href={`/organizations/organizations-view/?id=${item.id}`}
className={
'flex-1 px-4 py-6 h-24 flex divide-x-2 divide-stone-300 items-center overflow-hidden`}> dark:divide-dark-700 overflow-x-auto'
}
>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>Name</p>
<p className={'line-clamp-2'}>{item.name}</p>
</div>
</Link>
<ListActionsPopover
onDelete={onDelete}
itemId={item.id}
pathEdit={`/organizations/organizations-edit/?id=${item.id}`}
pathView={`/organizations/organizations-view/?id=${item.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>
</CardBox>
</div>
))}
{!loading && organizations.length === 0 && (
<div className='col-span-full flex items-center justify-center h-40'>
<p className=''>No data to display</p>
</div>
)}
</div>
<div className={'flex items-center justify-center my-6'}>
<Pagination
currentPage={currentPage}
numPages={numPages}
setCurrentPage={onPageChange}
/>
</div>
</>
);
};
export default ListOrganizations;

484
frontend/src/components/Organizations/TableOrganizations.tsx Normal file
View File

@ -0,0 +1,484 @@
import React, { useEffect, useState, useMemo } from 'react';
import { createPortal } from 'react-dom';
import { ToastContainer, toast } from 'react-toastify';
import BaseButton from '../BaseButton';
import CardBoxModal from '../CardBoxModal';
import CardBox from '../CardBox';
import {
fetch,
update,
deleteItem,
setRefetch,
deleteItemsByIds,
} from '../../stores/organizations/organizationsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { Field, Form, Formik } from 'formik';
import { DataGrid, GridColDef } from '@mui/x-data-grid';
import { loadColumns } from './configureOrganizationsCols';
import _ from 'lodash';
import dataFormatter from '../../helpers/dataFormatter';
import { dataGridStyles } from '../../styles';
const perPage = 10;
const TableSampleOrganizations = ({
filterItems,
setFilterItems,
filters,
showGrid,
}) => {
const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
const dispatch = useAppDispatch();
const router = useRouter();
const pagesList = [];
const [id, setId] = useState(null);
const [currentPage, setCurrentPage] = useState(0);
const [filterRequest, setFilterRequest] = React.useState('');
const [columns, setColumns] = useState<GridColDef[]>([]);
const [selectedRows, setSelectedRows] = useState([]);
const [sortModel, setSortModel] = useState([
{
field: '',
sort: 'desc',
},
]);
const {
organizations,
loading,
count,
notify: organizationsNotify,
refetch,
} = useAppSelector((state) => state.organizations);
const { currentUser } = useAppSelector((state) => state.auth);
const focusRing = useAppSelector((state) => state.style.focusRingColor);
const bgColor = useAppSelector((state) => state.style.bgLayoutColor);
const corners = useAppSelector((state) => state.style.corners);
const numPages =
Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage);
for (let i = 0; i < numPages; i++) {
pagesList.push(i);
}
const loadData = async (page = currentPage, request = filterRequest) => {
if (page !== currentPage) setCurrentPage(page);
if (request !== filterRequest) setFilterRequest(request);
const { sort, field } = sortModel[0];
const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`;
dispatch(fetch({ limit: perPage, page, query }));
};
useEffect(() => {
if (organizationsNotify.showNotification) {
notify(
organizationsNotify.typeNotification,
organizationsNotify.textNotification,
);
}
}, [organizationsNotify.showNotification]);
useEffect(() => {
if (!currentUser) return;
loadData();
}, [sortModel, currentUser]);
useEffect(() => {
if (refetch) {
loadData(0);
dispatch(setRefetch(false));
}
}, [refetch, dispatch]);
const [isModalInfoActive, setIsModalInfoActive] = useState(false);
const [isModalTrashActive, setIsModalTrashActive] = useState(false);
const handleModalAction = () => {
setIsModalInfoActive(false);
setIsModalTrashActive(false);
};
const handleDeleteModalAction = (id: string) => {
setId(id);
setIsModalTrashActive(true);
};
const handleDeleteAction = async () => {
if (id) {
await dispatch(deleteItem(id));
await loadData(0);
setIsModalTrashActive(false);
}
};
const generateFilterRequests = useMemo(() => {
let request = '&';
filterItems.forEach((item) => {
const isRangeFilter = filters.find(
(filter) =>
filter.title === item.fields.selectedField &&
(filter.number || filter.date),
);
if (isRangeFilter) {
const from = item.fields.filterValueFrom;
const to = item.fields.filterValueTo;
if (from) {
request += `${item.fields.selectedField}Range=${from}&`;
}
if (to) {
request += `${item.fields.selectedField}Range=${to}&`;
}
} else {
const value = item.fields.filterValue;
if (value) {
request += `${item.fields.selectedField}=${value}&`;
}
}
});
return request;
}, [filterItems, filters]);
const deleteFilter = (value) => {
const newItems = filterItems.filter((item) => item.id !== value);
if (newItems.length) {
setFilterItems(newItems);
} else {
loadData(0, '');
setFilterItems(newItems);
}
};
const handleSubmit = () => {
loadData(0, generateFilterRequests);
};
const handleChange = (id) => (e) => {
const value = e.target.value;
const name = e.target.name;
setFilterItems(
filterItems.map((item) => {
if (item.id !== id) return item;
if (name === 'selectedField') return { id, fields: { [name]: value } };
return { id, fields: { ...item.fields, [name]: value } };
}),
);
};
const handleReset = () => {
setFilterItems([]);
loadData(0, '');
};
const onPageChange = (page: number) => {
loadData(page);
setCurrentPage(page);
};
useEffect(() => {
if (!currentUser) return;
loadColumns(handleDeleteModalAction, `organizations`, currentUser).then(
(newCols) => setColumns(newCols),
);
}, [currentUser]);
const handleTableSubmit = async (id: string, data) => {
if (!_.isEmpty(data)) {
await dispatch(update({ id, data }))
.unwrap()
.then((res) => res)
.catch((err) => {
throw new Error(err);
});
}
};
const onDeleteRows = async (selectedRows) => {
await dispatch(deleteItemsByIds(selectedRows));
await loadData(0);
};
const controlClasses =
'w-full py-2 px-2 my-2 rounded dark:placeholder-gray-400 ' +
` ${bgColor} ${focusRing} ${corners} ` +
'dark:bg-slate-800 border';
const dataGrid = (
<div className='relative overflow-x-auto'>
<DataGrid
autoHeight
rowHeight={64}
sx={dataGridStyles}
className={'datagrid--table'}
getRowClassName={() => `datagrid--row`}
rows={organizations ?? []}
columns={columns}
initialState={{
pagination: {
paginationModel: {
pageSize: 10,
},
},
}}
disableRowSelectionOnClick
onProcessRowUpdateError={(params) => {
console.log('Error', params);
}}
processRowUpdate={async (newRow, oldRow) => {
const data = dataFormatter.dataGridEditFormatter(newRow);
try {
await handleTableSubmit(newRow.id, data);
return newRow;
} catch {
return oldRow;
}
}}
sortingMode={'server'}
checkboxSelection
onRowSelectionModelChange={(ids) => {
setSelectedRows(ids);
}}
onSortModelChange={(params) => {
params.length
? setSortModel(params)
: setSortModel([{ field: '', sort: 'desc' }]);
}}
rowCount={count}
pageSizeOptions={[10]}
paginationMode={'server'}
loading={loading}
onPaginationModelChange={(params) => {
onPageChange(params.page);
}}
/>
</div>
);
return (
<>
{filterItems && Array.isArray(filterItems) && filterItems.length ? (
<CardBox>
<Formik
initialValues={{
checkboxes: ['lorem'],
switches: ['lorem'],
radio: 'lorem',
}}
onSubmit={() => null}
>
<Form>
<>
{filterItems &&
filterItems.map((filterItem) => {
return (
<div key={filterItem.id} className='flex mb-4'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Filter
</div>
<Field
className={controlClasses}
name='selectedField'
id='selectedField'
component='select'
value={filterItem?.fields?.selectedField || ''}
onChange={handleChange(filterItem.id)}
>
{filters.map((selectOption) => (
<option
key={selectOption.title}
value={`${selectOption.title}`}
>
{selectOption.label}
</option>
))}
</Field>
</div>
{filters.find(
(filter) =>
filter.title === filterItem?.fields?.selectedField,
)?.type === 'enum' ? (
<div className='flex flex-col w-full mr-3'>
<div className='text-gray-500 font-bold'>Value</div>
<Field
className={controlClasses}
name='filterValue'
id='filterValue'
component='select'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
>
<option value=''>Select Value</option>
{filters
.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)
?.options?.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</Field>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.number ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : filters.find(
(filter) =>
filter.title ===
filterItem?.fields?.selectedField,
)?.date ? (
<div className='flex flex-row w-full mr-3'>
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
From
</div>
<Field
className={controlClasses}
name='filterValueFrom'
placeholder='From'
id='filterValueFrom'
type='datetime-local'
value={
filterItem?.fields?.filterValueFrom || ''
}
onChange={handleChange(filterItem.id)}
/>
</div>
<div className='flex flex-col w-full'>
<div className=' text-gray-500 font-bold'>
To
</div>
<Field
className={controlClasses}
name='filterValueTo'
placeholder='to'
id='filterValueTo'
type='datetime-local'
value={filterItem?.fields?.filterValueTo || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
</div>
) : (
<div className='flex flex-col w-full mr-3'>
<div className=' text-gray-500 font-bold'>
Contains
</div>
<Field
className={controlClasses}
name='filterValue'
placeholder='Contained'
id='filterValue'
value={filterItem?.fields?.filterValue || ''}
onChange={handleChange(filterItem.id)}
/>
</div>
)}
<div className='flex flex-col'>
<div className=' text-gray-500 font-bold'>
Action
</div>
<BaseButton
className='my-2'
type='reset'
color='danger'
label='Delete'
onClick={() => {
deleteFilter(filterItem.id);
}}
/>
</div>
</div>
);
})}
<div className='flex'>
<BaseButton
className='my-2 mr-3'
color='success'
label='Apply'
onClick={handleSubmit}
/>
<BaseButton
className='my-2'
color='info'
label='Cancel'
onClick={handleReset}
/>
</div>
</>
</Form>
</Formik>
</CardBox>
) : null}
<CardBoxModal
title='Please confirm'
buttonColor='info'
buttonLabel={loading ? 'Deleting...' : 'Confirm'}
isActive={isModalTrashActive}
onConfirm={handleDeleteAction}
onCancel={handleModalAction}
>
<p>Are you sure you want to delete this item?</p>
</CardBoxModal>
{dataGrid}
{selectedRows.length > 0 &&
createPortal(
<BaseButton
className='me-4'
color='danger'
label={`Delete ${selectedRows.length === 1 ? 'Row' : 'Rows'}`}
onClick={() => onDeleteRows(selectedRows)}
/>,
document.getElementById('delete-rows-button'),
)}
<ToastContainer />
</>
);
};
export default TableSampleOrganizations;

74
frontend/src/components/Organizations/configureOrganizationsCols.tsx Normal file
View File

@ -0,0 +1,74 @@
import React from 'react';
import BaseIcon from '../BaseIcon';
import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js';
import axios from 'axios';
import {
GridActionsCellItem,
GridRowParams,
GridValueGetterParams,
} from '@mui/x-data-grid';
import ImageField from '../ImageField';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import DataGridMultiSelect from '../DataGridMultiSelect';
import ListActionsPopover from '../ListActionsPopover';
import { hasPermission } from '../../helpers/userPermissions';
type Params = (id: string) => void;
export const loadColumns = async (
onDelete: Params,
entityName: string,
user,
) => {
async function callOptionsApi(entityName: string) {
if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return [];
try {
const data = await axios(`/${entityName}/autocomplete?limit=100`);
return data.data;
} catch (error) {
console.log(error);
return [];
}
}
const hasUpdatePermission = hasPermission(user, 'UPDATE_ORGANIZATIONS');
return [
{
field: 'name',
headerName: 'Name',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
},
{
field: 'actions',
type: 'actions',
minWidth: 30,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
getActions: (params: GridRowParams) => {
return [
<div key={params?.row?.id}>
<ListActionsPopover
onDelete={onDelete}
itemId={params?.row?.id}
pathEdit={`/organizations/organizations-edit/?id=${params?.row?.id}`}
pathView={`/organizations/organizations-view/?id=${params?.row?.id}`}
hasUpdatePermission={hasUpdatePermission}
/>
</div>,
];
},
},
];
};

11
frontend/src/components/Roles/CardRoles.tsx
View File

@ -95,6 +95,17 @@ const CardRoles = ({
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Global Access
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{dataFormatter.booleanFormatter(item.globalAccess)}
</div>
</dd>
</div>
</dl>
</li>
))}

9
frontend/src/components/Roles/ListRoles.tsx
View File

@ -64,6 +64,15 @@ const ListRoles = ({
.join(', ')}
</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
Global Access
</p>
<p className={'line-clamp-2'}>
{dataFormatter.booleanFormatter(item.globalAccess)}
</p>
</div>
</Link>
<ListActionsPopover
onDelete={onDelete}

14
frontend/src/components/Roles/configureRolesCols.tsx
View File

@ -69,6 +69,20 @@ export const loadColumns = async (
),
},
{
field: 'globalAccess',
headerName: 'Global Access',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
type: 'boolean',
},
{
field: 'actions',
type: 'actions',

13
frontend/src/components/Users/CardUsers.tsx
View File

@ -173,6 +173,19 @@ const CardUsers = ({
</div>
</dd>
</div>
<div className='flex justify-between gap-x-4 py-3'>
<dt className=' text-gray-500 dark:text-dark-600'>
Organizations
</dt>
<dd className='flex items-start gap-x-2'>
<div className='font-medium line-clamp-4'>
{dataFormatter.organizationsOneListFormatter(
item.organizations,
)}
</div>
</dd>
</div>
</dl>
</li>
))}

11
frontend/src/components/Users/ListUsers.tsx
View File

@ -113,6 +113,17 @@ const ListUsers = ({
.join(', ')}
</p>
</div>
<div className={'flex-1 px-3'}>
<p className={'text-xs text-gray-500 '}>
Organizations
</p>
<p className={'line-clamp-2'}>
{dataFormatter.organizationsOneListFormatter(
item.organizations,
)}
</p>
</div>
</Link>
<ListActionsPopover
onDelete={onDelete}

20
frontend/src/components/Users/configureUsersCols.tsx
View File

@ -159,6 +159,26 @@ export const loadColumns = async (
),
},
{
field: 'organizations',
headerName: 'Organizations',
flex: 1,
minWidth: 120,
filterable: false,
headerClassName: 'datagrid--header',
cellClassName: 'datagrid--cell',
editable: hasUpdatePermission,
sortable: false,
type: 'singleSelect',
getOptionValue: (value: any) => value?.id,
getOptionLabel: (value: any) => value?.label,
valueOptions: await callOptionsApi('organizations'),
valueGetter: (params: GridValueGetterParams) =>
params?.value?.id ?? params?.value,
},
{
field: 'actions',
type: 'actions',

19
frontend/src/helpers/dataFormatter.js
View File

@ -95,4 +95,23 @@ export default {
if (!val) return '';
return { label: val.name, id: val.id };
},
organizationsManyListFormatter(val) {
if (!val || !val.length) return [];
return val.map((item) => item.id);
},
organizationsOneListFormatter(val) {
if (!val) return '';
return val.id;
},
organizationsManyListFormatterEdit(val) {
if (!val || !val.length) return [];
return val.map((item) => {
return { id: item.id, label: item.id };
});
},
organizationsOneListFormatterEdit(val) {
if (!val) return '';
return { label: val.id, id: val.id };
},
};

8
frontend/src/menuAside.ts
View File

@ -65,6 +65,14 @@ const menuAside: MenuAsideItem[] = [
icon: icon.mdiShieldAccountOutline ?? icon.mdiTable,
permissions: 'READ_PERMISSIONS',
},
{
href: '/organizations/organizations-list',
label: 'Organizations',
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
icon: icon.mdiTable ?? icon.mdiTable,
permissions: 'READ_ORGANIZATIONS',
},
{
href: '/profile',
label: 'Profile',

35
frontend/src/pages/dashboard.tsx
View File

@ -34,6 +34,7 @@ const Dashboard = () => {
const [projects, setProjects] = React.useState(loadingMessage);
const [roles, setRoles] = React.useState(loadingMessage);
const [permissions, setPermissions] = React.useState(loadingMessage);
const [organizations, setOrganizations] = React.useState(loadingMessage);
const [widgetsRole, setWidgetsRole] = React.useState({
role: { value: '', label: '' },
@ -51,6 +52,7 @@ const Dashboard = () => {
'projects',
'roles',
'permissions',
'organizations',
];
const fns = [
setUsers,
@ -59,6 +61,7 @@ const Dashboard = () => {
setProjects,
setRoles,
setPermissions,
setOrganizations,
];
const requests = entities.map((entity, index) => {
@ -376,6 +379,38 @@ const Dashboard = () => {
</div>
</Link>
)}
{hasPermission(currentUser, 'READ_ORGANIZATIONS') && (
<Link href={'/organizations/organizations-list'}>
<div
className={`${
corners !== 'rounded-full' ? corners : 'rounded-3xl'
} dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
>
<div className='flex justify-between align-center'>
<div>
<div className='text-lg leading-tight text-gray-500 dark:text-gray-400'>
Organizations
</div>
<div className='text-3xl leading-tight font-semibold'>
{organizations}
</div>
</div>
<div>
<BaseIcon
className={`${iconsColor}`}
w='w-16'
h='h-16'
size={48}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
path={icon.mdiTable || icon.mdiTable}
/>
</div>
</div>
</div>
</Link>
)}
</div>
</SectionMain>
</>

13
frontend/src/pages/field_visits/[field_visitsId].tsx
View File

@ -53,6 +53,8 @@ const EditField_visits = () => {
amount: '',
purpose: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -201,6 +203,17 @@ const EditField_visits = () => {
<Field name='purpose' placeholder='Purpose' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

13
frontend/src/pages/field_visits/field_visits-edit.tsx
View File

@ -53,6 +53,8 @@ const EditField_visitsPage = () => {
amount: '',
purpose: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -199,6 +201,17 @@ const EditField_visitsPage = () => {
<Field name='purpose' placeholder='Purpose' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

27
frontend/src/pages/field_visits/field_visits-new.tsx
View File

@ -50,15 +50,14 @@ const initialValues = {
amount: '',
purpose: '',
organizations: '',
};
const Field_visitsNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
// get from url params
const { dateRangeStart, dateRangeEnd } = router.query;
const handleSubmit = async (data) => {
await dispatch(create(data));
await router.push('/field_visits/field_visits-list');
@ -78,17 +77,7 @@ const Field_visitsNew = () => {
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={
dateRangeStart && dateRangeEnd
? {
...initialValues,
start_date:
moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
return_date:
moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
}
: initialValues
}
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
@ -152,6 +141,16 @@ const Field_visitsNew = () => {
<Field name='purpose' placeholder='Purpose' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={[]}
itemRef={'organizations'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

2
frontend/src/pages/field_visits/field_visits-table.tsx
View File

@ -143,7 +143,7 @@ const Field_visitsTablesPage = () => {
<div id='delete-rows-button'></div>
<Link href={'/field_visits/field_visits-list'}>
Back to <span className='capitalize'>calendar</span>
Back to <span className='capitalize'></span>
</Link>
</div>
</CardBox>

6
frontend/src/pages/field_visits/field_visits-view.tsx
View File

@ -148,6 +148,12 @@ const Field_visitsView = () => {
<p>{field_visits?.purpose}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>organizations</p>
<p>{field_visits?.organizations?.id ?? 'No data'}</p>
</div>
<BaseDivider />
<BaseButton

128
frontend/src/pages/organizations/[organizationsId].tsx Normal file
View File

@ -0,0 +1,128 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/organizations/organizationsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditOrganizations = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
name: '',
};
const [initialValues, setInitialValues] = useState(initVals);
const { organizations } = useAppSelector((state) => state.organizations);
const { organizationsId } = router.query;
useEffect(() => {
dispatch(fetch({ id: organizationsId }));
}, [organizationsId]);
useEffect(() => {
if (typeof organizations === 'object') {
setInitialValues(organizations);
}
}, [organizations]);
useEffect(() => {
if (typeof organizations === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach(
(el) => (newInitialVal[el] = organizations[el]),
);
setInitialValues(newInitialVal);
}
}, [organizations]);
const handleSubmit = async (data) => {
await dispatch(update({ id: organizationsId, data }));
await router.push('/organizations/organizations-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit organizations')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit organizations'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Name'>
<Field name='name' placeholder='Name' />
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() =>
router.push('/organizations/organizations-list')
}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditOrganizations.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditOrganizations;

126
frontend/src/pages/organizations/organizations-edit.tsx Normal file
View File

@ -0,0 +1,126 @@
import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement, useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { SwitchField } from '../../components/SwitchField';
import { RichTextField } from '../../components/RichTextField';
import { update, fetch } from '../../stores/organizations/organizationsSlice';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
const EditOrganizationsPage = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const initVals = {
name: '',
};
const [initialValues, setInitialValues] = useState(initVals);
const { organizations } = useAppSelector((state) => state.organizations);
const { id } = router.query;
useEffect(() => {
dispatch(fetch({ id: id }));
}, [id]);
useEffect(() => {
if (typeof organizations === 'object') {
setInitialValues(organizations);
}
}, [organizations]);
useEffect(() => {
if (typeof organizations === 'object') {
const newInitialVal = { ...initVals };
Object.keys(initVals).forEach(
(el) => (newInitialVal[el] = organizations[el]),
);
setInitialValues(newInitialVal);
}
}, [organizations]);
const handleSubmit = async (data) => {
await dispatch(update({ id: id, data }));
await router.push('/organizations/organizations-list');
};
return (
<>
<Head>
<title>{getPageTitle('Edit organizations')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={'Edit organizations'}
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
enableReinitialize
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Name'>
<Field name='name' placeholder='Name' />
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() =>
router.push('/organizations/organizations-list')
}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
EditOrganizationsPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'UPDATE_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default EditOrganizationsPage;

165
frontend/src/pages/organizations/organizations-list.tsx Normal file
View File

@ -0,0 +1,165 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableOrganizations from '../../components/Organizations/TableOrganizations';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import {
setRefetch,
uploadCsv,
} from '../../stores/organizations/organizationsSlice';
import { hasPermission } from '../../helpers/userPermissions';
const OrganizationsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([{ label: 'Name', title: 'name' }]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_ORGANIZATIONS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getOrganizationsCSV = async () => {
const response = await axios({
url: '/organizations?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'organizationsCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Organizations')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Organizations'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/organizations/organizations-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getOrganizationsCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableOrganizations
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={false}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default OrganizationsTablesPage;

100
frontend/src/pages/organizations/organizations-new.tsx Normal file
View File

@ -0,0 +1,100 @@
import {
mdiAccount,
mdiChartTimelineVariant,
mdiMail,
mdiUpload,
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import { Field, Form, Formik } from 'formik';
import FormField from '../../components/FormField';
import BaseDivider from '../../components/BaseDivider';
import BaseButtons from '../../components/BaseButtons';
import BaseButton from '../../components/BaseButton';
import FormCheckRadio from '../../components/FormCheckRadio';
import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
import FormFilePicker from '../../components/FormFilePicker';
import FormImagePicker from '../../components/FormImagePicker';
import { SwitchField } from '../../components/SwitchField';
import { SelectField } from '../../components/SelectField';
import { SelectFieldMany } from '../../components/SelectFieldMany';
import { RichTextField } from '../../components/RichTextField';
import { create } from '../../stores/organizations/organizationsSlice';
import { useAppDispatch } from '../../stores/hooks';
import { useRouter } from 'next/router';
import moment from 'moment';
const initialValues = {
name: '',
};
const OrganizationsNew = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const handleSubmit = async (data) => {
await dispatch(create(data));
await router.push('/organizations/organizations-list');
};
return (
<>
<Head>
<title>{getPageTitle('New Item')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='New Item'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox>
<Formik
initialValues={initialValues}
onSubmit={(values) => handleSubmit(values)}
>
<Form>
<FormField label='Name'>
<Field name='name' placeholder='Name' />
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />
<BaseButton type='reset' color='info' outline label='Reset' />
<BaseButton
type='reset'
color='danger'
outline
label='Cancel'
onClick={() =>
router.push('/organizations/organizations-list')
}
/>
</BaseButtons>
</Form>
</Formik>
</CardBox>
</SectionMain>
</>
);
};
OrganizationsNew.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'CREATE_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default OrganizationsNew;

164
frontend/src/pages/organizations/organizations-table.tsx Normal file
View File

@ -0,0 +1,164 @@
import { mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import { uniqueId } from 'lodash';
import React, { ReactElement, useState } from 'react';
import CardBox from '../../components/CardBox';
import LayoutAuthenticated from '../../layouts/Authenticated';
import SectionMain from '../../components/SectionMain';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import { getPageTitle } from '../../config';
import TableOrganizations from '../../components/Organizations/TableOrganizations';
import BaseButton from '../../components/BaseButton';
import axios from 'axios';
import Link from 'next/link';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import CardBoxModal from '../../components/CardBoxModal';
import DragDropFilePicker from '../../components/DragDropFilePicker';
import {
setRefetch,
uploadCsv,
} from '../../stores/organizations/organizationsSlice';
import { hasPermission } from '../../helpers/userPermissions';
const OrganizationsTablesPage = () => {
const [filterItems, setFilterItems] = useState([]);
const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false);
const { currentUser } = useAppSelector((state) => state.auth);
const dispatch = useAppDispatch();
const [filters] = useState([{ label: 'Name', title: 'name' }]);
const hasCreatePermission =
currentUser && hasPermission(currentUser, 'CREATE_ORGANIZATIONS');
const addFilter = () => {
const newItem = {
id: uniqueId(),
fields: {
filterValue: '',
filterValueFrom: '',
filterValueTo: '',
selectedField: '',
},
};
newItem.fields.selectedField = filters[0].title;
setFilterItems([...filterItems, newItem]);
};
const getOrganizationsCSV = async () => {
const response = await axios({
url: '/organizations?filetype=csv',
method: 'GET',
responseType: 'blob',
});
const type = response.headers['content-type'];
const blob = new Blob([response.data], { type: type });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'organizationsCSV.csv';
link.click();
};
const onModalConfirm = async () => {
if (!csvFile) return;
await dispatch(uploadCsv(csvFile));
dispatch(setRefetch(true));
setCsvFile(null);
setIsModalActive(false);
};
const onModalCancel = () => {
setCsvFile(null);
setIsModalActive(false);
};
return (
<>
<Head>
<title>{getPageTitle('Organizations')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title='Organizations'
main
>
{''}
</SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
{hasCreatePermission && (
<BaseButton
className={'mr-3'}
href={'/organizations/organizations-new'}
color='info'
label='New Item'
/>
)}
<BaseButton
className={'mr-3'}
color='info'
label='Filter'
onClick={addFilter}
/>
<BaseButton
className={'mr-3'}
color='info'
label='Download CSV'
onClick={getOrganizationsCSV}
/>
{hasCreatePermission && (
<BaseButton
color='info'
label='Upload CSV'
onClick={() => setIsModalActive(true)}
/>
)}
<div className='md:inline-flex items-center ms-auto'>
<div id='delete-rows-button'></div>
</div>
</CardBox>
<CardBox className='mb-6' hasTable>
<TableOrganizations
filterItems={filterItems}
setFilterItems={setFilterItems}
filters={filters}
showGrid={true}
/>
</CardBox>
</SectionMain>
<CardBoxModal
title='Upload CSV'
buttonColor='info'
buttonLabel={'Confirm'}
// buttonLabel={false ? 'Deleting...' : 'Confirm'}
isActive={isModalActive}
onConfirm={onModalConfirm}
onCancel={onModalCancel}
>
<DragDropFilePicker
file={csvFile}
setFile={setCsvFile}
formats={'.csv'}
/>
</CardBoxModal>
</>
);
};
OrganizationsTablesPage.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default OrganizationsTablesPage;

355
frontend/src/pages/organizations/organizations-view.tsx Normal file
View File

@ -0,0 +1,355 @@
import React, { ReactElement, useEffect } from 'react';
import Head from 'next/head';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import dayjs from 'dayjs';
import { useAppDispatch, useAppSelector } from '../../stores/hooks';
import { useRouter } from 'next/router';
import { fetch } from '../../stores/organizations/organizationsSlice';
import { saveFile } from '../../helpers/fileSaver';
import dataFormatter from '../../helpers/dataFormatter';
import ImageField from '../../components/ImageField';
import LayoutAuthenticated from '../../layouts/Authenticated';
import { getPageTitle } from '../../config';
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
import SectionMain from '../../components/SectionMain';
import CardBox from '../../components/CardBox';
import BaseButton from '../../components/BaseButton';
import BaseDivider from '../../components/BaseDivider';
import { mdiChartTimelineVariant } from '@mdi/js';
import { SwitchField } from '../../components/SwitchField';
import FormField from '../../components/FormField';
const OrganizationsView = () => {
const router = useRouter();
const dispatch = useAppDispatch();
const { organizations } = useAppSelector((state) => state.organizations);
const { id } = router.query;
function removeLastCharacter(str) {
console.log(str, `str`);
return str.slice(0, -1);
}
useEffect(() => {
dispatch(fetch({ id }));
}, [dispatch, id]);
return (
<>
<Head>
<title>{getPageTitle('View organizations')}</title>
</Head>
<SectionMain>
<SectionTitleLineWithButton
icon={mdiChartTimelineVariant}
title={removeLastCharacter('View organizations')}
main
>
<BaseButton
color='info'
label='Edit'
href={`/organizations/organizations-edit/?id=${id}`}
/>
</SectionTitleLineWithButton>
<CardBox>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Name</p>
<p>{organizations?.name}</p>
</div>
<>
<p className={'block font-bold mb-2'}>Users Organizations</p>
<CardBox
className='mb-6 border border-gray-300 rounded overflow-hidden'
hasTable
>
<div className='overflow-x-auto'>
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>E-Mail</th>
<th>Disabled</th>
</tr>
</thead>
<tbody>
{organizations.users_organizations &&
Array.isArray(organizations.users_organizations) &&
organizations.users_organizations.map((item: any) => (
<tr
key={item.id}
onClick={() =>
router.push(`/users/users-view/?id=${item.id}`)
}
>
<td data-label='firstName'>{item.firstName}</td>
<td data-label='lastName'>{item.lastName}</td>
<td data-label='phoneNumber'>{item.phoneNumber}</td>
<td data-label='email'>{item.email}</td>
<td data-label='disabled'>
{dataFormatter.booleanFormatter(item.disabled)}
</td>
</tr>
))}
</tbody>
</table>
</div>
{!organizations?.users_organizations?.length && (
<div className={'text-center py-4'}>No data</div>
)}
</CardBox>
</>
<>
<p className={'block font-bold mb-2'}>Field_visits organizations</p>
<CardBox
className='mb-6 border border-gray-300 rounded overflow-hidden'
hasTable
>
<div className='overflow-x-auto'>
<table>
<thead>
<tr>
<th>EmployeeName</th>
<th>Site/PlaceName</th>
<th>StartDate</th>
<th>DepartureDate</th>
<th>ReturnDate</th>
<th>PaymentType</th>
<th>Amount</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
{organizations.field_visits_organizations &&
Array.isArray(organizations.field_visits_organizations) &&
organizations.field_visits_organizations.map(
(item: any) => (
<tr
key={item.id}
onClick={() =>
router.push(
`/field_visits/field_visits-view/?id=${item.id}`,
)
}
>
<td data-label='employee_name'>
{item.employee_name}
</td>
<td data-label='site_name'>{item.site_name}</td>
<td data-label='start_date'>
{dataFormatter.dateTimeFormatter(item.start_date)}
</td>
<td data-label='departure_date'>
{dataFormatter.dateTimeFormatter(
item.departure_date,
)}
</td>
<td data-label='return_date'>
{dataFormatter.dateTimeFormatter(
item.return_date,
)}
</td>
<td data-label='payment_type'>
{item.payment_type}
</td>
<td data-label='amount'>{item.amount}</td>
<td data-label='purpose'>{item.purpose}</td>
</tr>
),
)}
</tbody>
</table>
</div>
{!organizations?.field_visits_organizations?.length && (
<div className={'text-center py-4'}>No data</div>
)}
</CardBox>
</>
<>
<p className={'block font-bold mb-2'}>Payments organizations</p>
<CardBox
className='mb-6 border border-gray-300 rounded overflow-hidden'
hasTable
>
<div className='overflow-x-auto'>
<table>
<thead>
<tr>
<th>Payee</th>
<th>PaymentDate</th>
<th>Purpose</th>
<th>Amount</th>
<th>DocumentType</th>
<th>Auto-generatedDocumentNo.</th>
<th>Status</th>
<th>ShelfNo.</th>
</tr>
</thead>
<tbody>
{organizations.payments_organizations &&
Array.isArray(organizations.payments_organizations) &&
organizations.payments_organizations.map((item: any) => (
<tr
key={item.id}
onClick={() =>
router.push(
`/payments/payments-view/?id=${item.id}`,
)
}
>
<td data-label='payee'>{item.payee}</td>
<td data-label='payment_date'>
{dataFormatter.dateTimeFormatter(item.payment_date)}
</td>
<td data-label='purpose'>{item.purpose}</td>
<td data-label='amount'>{item.amount}</td>
<td data-label='document_type'>
{item.document_type}
</td>
<td data-label='auto_generated_document_no'>
{item.auto_generated_document_no}
</td>
<td data-label='status'>{item.status}</td>
<td data-label='shelf_no'>{item.shelf_no}</td>
</tr>
))}
</tbody>
</table>
</div>
{!organizations?.payments_organizations?.length && (
<div className={'text-center py-4'}>No data</div>
)}
</CardBox>
</>
<>
<p className={'block font-bold mb-2'}>Projects organizations</p>
<CardBox
className='mb-6 border border-gray-300 rounded overflow-hidden'
hasTable
>
<div className='overflow-x-auto'>
<table>
<thead>
<tr>
<th>ProjectName</th>
<th>ProjectCode</th>
<th>SourceofFunds</th>
<th>StartDate</th>
<th>EndDate</th>
<th>Status</th>
<th>Cash at bank</th>
</tr>
</thead>
<tbody>
{organizations.projects_organizations &&
Array.isArray(organizations.projects_organizations) &&
organizations.projects_organizations.map((item: any) => (
<tr
key={item.id}
onClick={() =>
router.push(
`/projects/projects-view/?id=${item.id}`,
)
}
>
<td data-label='name'>{item.name}</td>
<td data-label='code'>{item.code}</td>
<td data-label='source_of_funds'>
{item.source_of_funds}
</td>
<td data-label='start_date'>
{dataFormatter.dateTimeFormatter(item.start_date)}
</td>
<td data-label='end_date'>
{dataFormatter.dateTimeFormatter(item.end_date)}
</td>
<td data-label='status'>{item.status}</td>
<td data-label='cash_at_bank'>{item.cash_at_bank}</td>
</tr>
))}
</tbody>
</table>
</div>
{!organizations?.projects_organizations?.length && (
<div className={'text-center py-4'}>No data</div>
)}
</CardBox>
</>
<BaseDivider />
<BaseButton
color='info'
label='Back'
onClick={() => router.push('/organizations/organizations-list')}
/>
</CardBox>
</SectionMain>
</>
);
};
OrganizationsView.getLayout = function getLayout(page: ReactElement) {
return (
<LayoutAuthenticated permission={'READ_ORGANIZATIONS'}>
{page}
</LayoutAuthenticated>
);
};
export default OrganizationsView;

13
frontend/src/pages/payments/[paymentsId].tsx
View File

@ -53,6 +53,8 @@ const EditPayments = () => {
status: '',
shelf_no: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -180,6 +182,17 @@ const EditPayments = () => {
<Field name='shelf_no' placeholder='ShelfNo.' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

13
frontend/src/pages/payments/payments-edit.tsx
View File

@ -53,6 +53,8 @@ const EditPaymentsPage = () => {
status: '',
shelf_no: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -178,6 +180,17 @@ const EditPaymentsPage = () => {
<Field name='shelf_no' placeholder='ShelfNo.' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

12
frontend/src/pages/payments/payments-new.tsx
View File

@ -50,6 +50,8 @@ const initialValues = {
status: 'InProgress',
shelf_no: '',
organizations: '',
};
const PaymentsNew = () => {
@ -142,6 +144,16 @@ const PaymentsNew = () => {
<Field name='shelf_no' placeholder='ShelfNo.' />
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={[]}
itemRef={'organizations'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

6
frontend/src/pages/payments/payments-view.tsx
View File

@ -114,6 +114,12 @@ const PaymentsView = () => {
<p>{payments?.shelf_no}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>organizations</p>
<p>{payments?.organizations?.id ?? 'No data'}</p>
</div>
<BaseDivider />
<BaseButton

23
frontend/src/pages/projects/[projectsId].tsx
View File

@ -47,6 +47,10 @@ const EditProjects = () => {
end_date: new Date(),
status: '',
cash_at_bank: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -157,6 +161,25 @@ const EditProjects = () => {
</Field>
</FormField>
<FormField label='Cash at bank'>
<Field
type='number'
name='cash_at_bank'
placeholder='Cash at bank'
/>
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

23
frontend/src/pages/projects/projects-edit.tsx
View File

@ -47,6 +47,10 @@ const EditProjectsPage = () => {
end_date: new Date(),
status: '',
cash_at_bank: '',
organizations: null,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -155,6 +159,25 @@ const EditProjectsPage = () => {
</Field>
</FormField>
<FormField label='Cash at bank'>
<Field
type='number'
name='cash_at_bank'
placeholder='Cash at bank'
/>
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

22
frontend/src/pages/projects/projects-new.tsx
View File

@ -44,6 +44,10 @@ const initialValues = {
end_date: '',
status: 'InProgress',
cash_at_bank: '',
organizations: '',
};
const ProjectsNew = () => {
@ -121,6 +125,24 @@ const ProjectsNew = () => {
</Field>
</FormField>
<FormField label='Cash at bank'>
<Field
type='number'
name='cash_at_bank'
placeholder='Cash at bank'
/>
</FormField>
<FormField label='organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={[]}
itemRef={'organizations'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

11
frontend/src/pages/projects/projects-view.tsx
View File

@ -112,6 +112,17 @@ const ProjectsView = () => {
<p>{projects?.status ?? 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Cash at bank</p>
<p>{projects?.cash_at_bank || 'No data'}</p>
</div>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>organizations</p>
<p>{projects?.organizations?.id ?? 'No data'}</p>
</div>
<>
<p className={'block font-bold mb-2'}>Field_visits Project</p>
<CardBox

10
frontend/src/pages/roles/[rolesId].tsx
View File

@ -39,6 +39,8 @@ const EditRoles = () => {
name: '',
permissions: [],
globalAccess: false,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -106,6 +108,14 @@ const EditRoles = () => {
></Field>
</FormField>
<FormField label='Global Access' labelFor='globalAccess'>
<Field
name='globalAccess'
id='globalAccess'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

10
frontend/src/pages/roles/roles-edit.tsx
View File

@ -39,6 +39,8 @@ const EditRolesPage = () => {
name: '',
permissions: [],
globalAccess: false,
};
const [initialValues, setInitialValues] = useState(initVals);
@ -104,6 +106,14 @@ const EditRolesPage = () => {
></Field>
</FormField>
<FormField label='Global Access' labelFor='globalAccess'>
<Field
name='globalAccess'
id='globalAccess'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

10
frontend/src/pages/roles/roles-new.tsx
View File

@ -36,6 +36,8 @@ const initialValues = {
name: '',
permissions: [],
globalAccess: false,
};
const RolesNew = () => {
@ -79,6 +81,14 @@ const RolesNew = () => {
></Field>
</FormField>
<FormField label='Global Access' labelFor='globalAccess'>
<Field
name='globalAccess'
id='globalAccess'
component={SwitchField}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

8
frontend/src/pages/roles/roles-view.tsx
View File

@ -96,6 +96,14 @@ const RolesView = () => {
</CardBox>
</>
<FormField label='Global Access'>
<SwitchField
field={{ name: 'globalAccess', value: roles?.globalAccess }}
form={{ setFieldValue: () => null }}
disabled
/>
</FormField>
<>
<p className={'block font-bold mb-2'}>Users App Role</p>
<CardBox

13
frontend/src/pages/users/[usersId].tsx
View File

@ -52,6 +52,8 @@ const EditUsers = () => {
custom_permissions: [],
organizations: null,
password: '',
};
const [initialValues, setInitialValues] = useState(initVals);
@ -170,6 +172,17 @@ const EditUsers = () => {
></Field>
</FormField>
<FormField label='Organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<FormField label='Password'>
<Field name='password' placeholder='password' />
</FormField>

13
frontend/src/pages/users/users-edit.tsx
View File

@ -52,6 +52,8 @@ const EditUsersPage = () => {
custom_permissions: [],
organizations: null,
password: '',
};
const [initialValues, setInitialValues] = useState(initVals);
@ -168,6 +170,17 @@ const EditUsersPage = () => {
></Field>
</FormField>
<FormField label='Organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={initialValues.organizations}
itemRef={'organizations'}
showField={'id'}
></Field>
</FormField>
<FormField label='Password'>
<Field name='password' placeholder='password' />
</FormField>

2
frontend/src/pages/users/users-list.tsx
View File

@ -36,6 +36,8 @@ const UsersTablesPage = () => {
{ label: 'App Role', title: 'app_role' },
{ label: 'Organizations', title: 'organizations' },
{ label: 'Custom Permissions', title: 'custom_permissions' },
]);

12
frontend/src/pages/users/users-new.tsx
View File

@ -48,6 +48,8 @@ const initialValues = {
app_role: '',
custom_permissions: [],
organizations: '',
};
const UsersNew = () => {
@ -140,6 +142,16 @@ const UsersNew = () => {
></Field>
</FormField>
<FormField label='Organizations' labelFor='organizations'>
<Field
name='organizations'
id='organizations'
component={SelectField}
options={[]}
itemRef={'organizations'}
></Field>
</FormField>
<BaseDivider />
<BaseButtons>
<BaseButton type='submit' color='info' label='Submit' />

2
frontend/src/pages/users/users-table.tsx
View File

@ -36,6 +36,8 @@ const UsersTablesPage = () => {
{ label: 'App Role', title: 'app_role' },
{ label: 'Organizations', title: 'organizations' },
{ label: 'Custom Permissions', title: 'custom_permissions' },
]);

6
frontend/src/pages/users/users-view.tsx
View File

@ -138,6 +138,12 @@ const UsersView = () => {
</CardBox>
</>
<div className={'mb-4'}>
<p className={'block font-bold mb-2'}>Organizations</p>
<p>{users?.organizations?.id ?? 'No data'}</p>
</div>
<BaseDivider />
<BaseButton

250
frontend/src/stores/organizations/organizationsSlice.ts Normal file
View File

@ -0,0 +1,250 @@
import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
import axios from 'axios';
import {
fulfilledNotify,
rejectNotify,
resetNotify,
} from '../../helpers/notifyStateHandler';
interface MainState {
organizations: any;
loading: boolean;
count: number;
refetch: boolean;
rolesWidgets: any[];
notify: {
showNotification: boolean;
textNotification: string;
typeNotification: string;
};
}
const initialState: MainState = {
organizations: [],
loading: false,
count: 0,
refetch: false,
rolesWidgets: [],
notify: {
showNotification: false,
textNotification: '',
typeNotification: 'warn',
},
};
export const fetch = createAsyncThunk(
'organizations/fetch',
async (data: any) => {
const { id, query } = data;
const result = await axios.get(
`organizations${query || (id ? `/${id}` : '')}`,
);
return id
? result.data
: { rows: result.data.rows, count: result.data.count };
},
);
export const deleteItemsByIds = createAsyncThunk(
'organizations/deleteByIds',
async (data: any, { rejectWithValue }) => {
try {
await axios.post('organizations/deleteByIds', { data });
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const deleteItem = createAsyncThunk(
'organizations/deleteOrganizations',
async (id: string, { rejectWithValue }) => {
try {
await axios.delete(`organizations/${id}`);
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const create = createAsyncThunk(
'organizations/createOrganizations',
async (data: any, { rejectWithValue }) => {
try {
const result = await axios.post('organizations', { data });
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const uploadCsv = createAsyncThunk(
'organizations/uploadCsv',
async (file: File, { rejectWithValue }) => {
try {
const data = new FormData();
data.append('file', file);
data.append('filename', file.name);
const result = await axios.post('organizations/bulk-import', data, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const update = createAsyncThunk(
'organizations/updateOrganizations',
async (payload: any, { rejectWithValue }) => {
try {
const result = await axios.put(`organizations/${payload.id}`, {
id: payload.id,
data: payload.data,
});
return result.data;
} catch (error) {
if (!error.response) {
throw error;
}
return rejectWithValue(error.response.data);
}
},
);
export const organizationsSlice = createSlice({
name: 'organizations',
initialState,
reducers: {
setRefetch: (state, action: PayloadAction<boolean>) => {
state.refetch = action.payload;
},
},
extraReducers: (builder) => {
builder.addCase(fetch.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(fetch.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(fetch.fulfilled, (state, action) => {
if (action.payload.rows && action.payload.count >= 0) {
state.organizations = action.payload.rows;
state.count = action.payload.count;
} else {
state.organizations = action.payload;
}
state.loading = false;
});
builder.addCase(deleteItemsByIds.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItemsByIds.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Organizations has been deleted');
});
builder.addCase(deleteItemsByIds.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(deleteItem.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(deleteItem.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(
state,
`${'Organizations'.slice(0, -1)} has been deleted`,
);
});
builder.addCase(deleteItem.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(create.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(create.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(
state,
`${'Organizations'.slice(0, -1)} has been created`,
);
});
builder.addCase(update.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(update.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(
state,
`${'Organizations'.slice(0, -1)} has been updated`,
);
});
builder.addCase(update.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
builder.addCase(uploadCsv.pending, (state) => {
state.loading = true;
resetNotify(state);
});
builder.addCase(uploadCsv.fulfilled, (state) => {
state.loading = false;
fulfilledNotify(state, 'Organizations has been uploaded');
});
builder.addCase(uploadCsv.rejected, (state, action) => {
state.loading = false;
rejectNotify(state, action);
});
},
});
// Action creators are generated for each case reducer function
export const { setRefetch } = organizationsSlice.actions;
export default organizationsSlice.reducer;

2
frontend/src/stores/store.ts
View File

@ -10,6 +10,7 @@ import paymentsSlice from './payments/paymentsSlice';
import projectsSlice from './projects/projectsSlice';
import rolesSlice from './roles/rolesSlice';
import permissionsSlice from './permissions/permissionsSlice';
import organizationsSlice from './organizations/organizationsSlice';
export const store = configureStore({
reducer: {
@ -24,6 +25,7 @@ export const store = configureStore({
projects: projectsSlice,
roles: rolesSlice,
permissions: permissionsSlice,
organizations: organizationsSlice,
},
});