Skip to content

Commit

Permalink
WIP: Methods and States
Browse files Browse the repository at this point in the history 
Signed-off-by: Jerrico Dela Cruz <[email protected]>
  • Loading branch information
@jerricotandelacruz
jerricotandelacruz committed Nov 22, 2024
1 parent 4ef2f10 commit 09a54d8
Showing 1 changed file with 152 additions and 20 deletions.
172 changes: 152 additions & 20 deletions src/goapp/templates/multiple-approvals.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ <h1 class="text-xl font-semibold text-gray-500">Pending Requests</h1>
<div class="grid grid-flow-row grid-cols-2 grid-rows-2 text-xs text-gray-500">
<div><p class="truncate">Application: GH Management Tool</p></div>
<div class="pl-3"><p class="truncate">Module: GitHubCopilot</p></div>
<div><p class="truncate">Request by: jerrico.jr.dela.cruz@accenture.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Oct 25, 2024, 2:51 PM</p></div>
<div><p class="truncate">Request by: juan.dela.cruz@email.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Dec 12, 2012, 12:12 PM</p></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -113,8 +113,8 @@ <h1 class="text-xl font-semibold text-gray-500">Selected Requests</h1>
<div class="grid grid-flow-row grid-cols-2 grid-rows-2 text-xs text-sm text-gray-500">
<div><p class="truncate">Application: GH Management Tool</p></div>
<div class="pl-3"><p class="truncate">Module: GitHubCopilot</p></div>
<div><p class="truncate">Request by: jerrico.jr.dela.cruz@accenture.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Oct 25, 2024, 2:51 PM</p></div>
<div><p class="truncate">Request by: juan.dela.cruz@email.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Dec 12, 2012, 12:12 PM</p></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -218,8 +218,8 @@ <h1 class="text-xl font-semibold text-gray-500">Selected Requests</h1>
</svg>
</div>
<div class="text-left">
<h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title">Request Details</h3>
<div class="mt-2">
<h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title">Request Details</h3>
<div class="mt-2">
<div class="flex items-center justify-between">
<div class="grow">
<div class="items-center justify-between">
Expand All @@ -228,9 +228,9 @@ <h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title"
<div class="grid grid-flow-row grid-cols-2 grid-rows-2 text-sm text-gray-500">
<div><p class="truncate">Application: GH Management Tool</p></div>
<div class="pl-3"><p class="truncate">Module: GitHubCopilot</p></div>
<div><p class="truncate">Request by: jerrico.jr.dela.cruz@accenture.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Oct 25, 2024, 2:51 PM</p></div>
<div class="col-span-2" title="jerrico.jr.dela.cruz@accenture.com, ismael.r.ibuan@accenture.com"><p class="truncate">Approvers: jerrico.jr.dela.cruz@accenture.com, ismael.r.ibuan@accenture.com</p></div>
<div><p class="truncate">Request by: juan.dela.cruz@email.com</p></div>
<div class="pl-3"><p class="truncate">Requested on Dec 12, 2012, 12:12 PM</p></div>
<div class="col-span-2" title="juan.dela.cruz@email.com, uncle.sam@email.com"><p class="truncate">Approvers: juan.dela.cruz@email.com, uncle.sam@email.com</p></div>
</div>
<!-- REQUEST EMAIL DETAILS -->
<div class="text-sm mt-3">
Expand Down Expand Up @@ -269,8 +269,9 @@ <h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title"
<tbody>
<tr style="background-color: #ff5800">
<td class="thead" style="width: 95px">
<img
src="data:image/png;base64,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">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10 text-white">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
</svg>
</td>
<td class="thead" style="
font-family: SegoeUI, sans-serif;
Expand Down Expand Up @@ -307,55 +308,55 @@ <h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title"
Region
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
avanade-group-octoUAT
silicon-group-valley
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
Client Name
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
Bistro
Sboj Evets
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
Project Name
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
TexasRoadhouse
Mansanas
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
WBS
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
DGX34R5
MBP16M3
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
Requested By
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
ismael.r.ibuan@accenture.com
juan.dela.cruz@email.com
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
GitHub Id
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
102030576
123456789
</td>
</tr>
<tr class="border-top">
<td style="font-size: 14px; padding-top: 15px; font-weight: 600;">
GitHub Username
</td>
<td style="font-size: 14px; padding-top: 15px; font-weight: 400;">
iibuan
juandelacruz
</td>
</tr>
</tbody>
Expand Down Expand Up @@ -388,6 +389,137 @@ <h3 class="text-base font-semibold text-gray-900 border-b pb-3" id="modal-title"
</div>
</div>
</div>



<script type="text/javascript">
const multipleApprovals = () => {
const defaultState = {
pendingRequests: {
requestTypes: [],
organizations: [],
filter: {
requestType: '',
organization: '',
},
isSelectedAll: false,
requests: [], // Array of pending request
total: 0, // Total number of pending request by filter
isInitLoading: false,
isViewMoreLoading: false,
},
selectedRequests: {
items: [
// { customRemarks: '', hasCustomRemarks: false, request: {} }
], // Array of selected request, custom remarks string, hasCustomRemarks boolean
generalRemarks: '', // General remarks string
total: 0 // Total number of selected request
},
requestDetailsModal: {
isShow: false,
request: {
subject: "",
application: "",
module: "",
requestedBy: "",
requestedOn: "",
approvers: [],
bodyHTML: "",
},
}
}
return {
pendingRequests: {
requestTypes: defaultState.pendingRequests.requestTypes,
organizations: defaultState.pendingRequests.organizations,
filter: {
requestType: defaultState.pendingRequests.filter.requestType,
organization: defaultState.pendingRequests.filter.organization,
},
isSelectedAll: defaultState.pendingRequests.isSelectedAll,
requests: defaultState.pendingRequests.requests,
total: defaultState.pendingRequests.total,
isInitLoading: defaultState.pendingRequests.isInitLoading,
isViewMoreLoading: defaultState.pendingRequests.isViewMoreLoading,
},
selectedRequests: {
items: defaultState.selectedRequests.items,
generalRemarks: defaultState.selectedRequests.generalRemarks,
total: defaultState.selectedRequests.total
},
async init() {
// Fetch request types
// Fetch organizations
// Fetch pending requests
},
async fetchPendingRequests() {
// Fetch pending requests
},
async fetchRequestTypes() {
// Fetch request types
},
async fetchOrganizations() {
// Fetch organizations
},

// Pending Requests Section
onSelectRequestType() {
// Filter pending requests by request type
},
onSelectOrganization() {
// Filter pending requests by organization
},
onToggleSelectAllPendingRequests() {
// Select/Unselect all pending requests
},
onClickRowPendingRequest() {
// Show request details modal
},
onClickViewMore() {
// Fetch more pending requests
},
onToggleSelectPendingRequest() {
// Select/Unselect pending request
},

// Request Details Modal Section
onModalOpen(subject, application, module, requestedBy, requestedOn, approvers, bodyHTML) {
// Open request details modal
this.requestDetailsModal.request.subject = subject
this.requestDetailsModal.request.application = application
this.requestDetailsModal.request.module = module
this.requestDetailsModal.request.requestedBy = requestedBy
this.requestDetailsModal.request.requestedOn = requestedOn
this.requestDetailsModal.request.approvers = approvers
this.requestDetailsModal.request.bodyHTML = bodyHTML

this.requestDetailsModal.isShow = true
},
onModalClose() {
// Close request details modal
this.requestDetailsModal.request.subject = defaultState.requestDetailsModal.request.subject
this.requestDetailsModal.request.application = defaultState.requestDetailsModal.request.application
this.requestDetailsModal.request.module = defaultState.requestDetailsModal.request.module
this.requestDetailsModal.request.requestedBy = defaultState.requestDetailsModal.request.requestedBy
this.requestDetailsModal.request.requestedOn = defaultState.requestDetailsModal.request.requestedOn
this.requestDetailsModal.request.approvers = defaultState.requestDetailsModal.request.approvers
this.requestDetailsModal.request.bodyHTML = defaultState.requestDetailsModal.request.bodyHTML

this.requestDetailsModal.isShow = false
},

// Selected Requests Section
onClickRowSelectedRequest() {
// Show request details modal
},
onToggleCustomRemarks() {
// Toggle custom remarks
},
onRemoveSelectedRequest() {
// Remove selected request
},
async onSubmit() {
// Submit selected requests
},
}
}
</script>
{{ end }}

0 comments on commit 09a54d8

Please sign in to comment.