JSFiddle - React, Tailwind, and code Playground

by schantanu

HTML

<p>
test
</p>
<!-- 
// TO DO
// -----------------------------------------------------------------------------------------------
// 1. Console
//    a. When a button is clicked on a Admin Console or User Console then disable other buttons
//    b. For Attribute Manager, fix the header and footer
//    c. In general, trim the values while being uploaded to SQL table
//
// 2. Reset Sheet
//    a. If Input or Data sheet is reset, do we need to remove notes as well???
//
// 3. Attribute Management
//    a. Make dates nullable as well
//    b. Fix form date formatting issue
//    c. Confirmation modal with changes and a note
//    d. Make dropdowns searchable
//    e. Limit width of dropdown to sidebar
//    f. Show collapsible section for inactive fields using CONFIG
//    g. Change notes to apply to whole Common ID and the Input tab
//    h. Show 'null' form fields in gray
//
// 4. Notes
//    a. When a new line/item is added to the Data, and if there are any notes in the Input tab, then realigning the notes
//
// Features for User
// ---------------------------------------------
// 1. Change Attributes
// 2. Add Common ID or Add Item ID
// 3. Update Dropdown Values

// Features for Admin
// ---------------------------------------------
// 1. Upload Changes
// 2. Get Data
// 3. Approve/Cancel User Requests
// 4. Reload Dropdown Values
// 5. Check Dropdown values duplication
// 6. Add/Remove Roles
// 7. Reset Sheet -->

JavaScript

/* config.gs

*
 * Sheet Configuration Constants
 * Contains all sheet-specific configurations and constants
// Sheet Names and Basic Configurations
const SHEET_CONFIG = {
  ADMIN: {
    NAME: 'Admin',
    POSITIONS: {
      SUBHEADER_ROW: 2,
      DATA_ROW_START: 3,
      USERS_TOTAL_COLS: 2
    },
    COLUMNS: {
      ADMINS: 1,
      USERS: 2
    },
    COLUMN_WIDTH: 200,
    RANGES: {
      USERS_HEADER: 'A1:B1',
      USERS_SUBHEADER: 'A2:B2'
    },
    HEADERS: {
      USERS_HEADER: 'Users List',
      USERS_SUBHEADER: [['Admins','Users']]
    },
    COLORS: {
      USERS_HEADER: '#FFFF00',
      USERS_SUBHEADER: '#C9DAF8'
    }
  },
  REQUESTS: {
    NAME: 'Requests',
    POSITIONS: {
      START_ROW: 1,
      START_COL: 1,
      HEADER_ROW: 1
    },
    HEADERS: [
      'TIMESTAMP', 'USER', 'STATUS', 'ID', 'ATTRIBUTE LEVEL',
      'ATTRIBUTE', 'CURRENT VALUE', 'REQUESTED VALUE', 'NOTES'
    ],
    COLUMN_WIDTHS: [160, 200, 70, 150, 130, 200, 200, 200, 300],
    COLORS: {
      HEADER: '#C9DAF8'
    }
  },
  DROPDOWNS: {
    NAME: 'Dropdowns',
    POSITIONS: {
      HEADER_ROW: 1,
      START_ROW: 1,
      START_COL: 1
    },
    COLUMNS: {
      INDEX: {
        VENDOR          : 1,
        GROUP_FUNCTION  : 2,
        FAMILY          : 3,
        SUBFAMILY       : 4,
        MATERIAL_GROUP  : 5,
        DP_HIERARCHY    : 6,
        TRACKED_SET     : 7,
        FREQ            : 8,
        POWER           : 9,
        INTEGRATED      : 10,
        TECH            : 11
      }
    },
    HEADERS: [
      'VENDOR','GROUP FUNCTION','FAMILY','SUBFAMILY','MATERIAL GROUP',
      'DP HIERARCHY','TRACKED SET','FREQ','POWER','INTEGRATED','TECH'
    ],
    COLUMN_WIDTHS: [150, 150, 150, 150, 130, 125, 125, 100, 100, 100, 100],
    COLORS: {
      HEADER: '#C9DAF8'
    }
  },
  DATA: {
    NAME: 'Data',
    POSITIONS: {
      HEADER_ROW: 1,
      START_ROW: 1,
      START_COL: 1,
      DATA_START_ROW: 2
    },
    COLUMNS: {
      INDEX: {
        ITEM_ID           ...