Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add user role/permission to module fd2_example #690

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

add user role/permission to module fd2_example #690

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9316a59
add user role/permission to module fd2_example
nguyenbanhducA1K51 Dec 3, 2023
a8a69e2
add illustration
nguyenbanhducA1K51 Dec 11, 2023
9626167
add variable test and move illustration to var subtab
nguyenbanhducA1K51 Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion farmdata2/farmdata2_modules/fd2_example/fd2_example.module
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,22 @@ function fd2_example_preprocess_page() {
// Define some useful variables in the JavaScript for page.
// the @ symbol surpresses the warning when a user attempts to access a page without being logged in
global $user;
@$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."';";


$account = user_load($user->uid);
// Map from roleID to role name
$roleMap = user_roles();
// Get the roles assigned to the user.
$roles = array();
foreach ($account->roles as $role => $roleName) {
$roles[] = $roleMap[$role];
}

@$cmd="var fd2UserID=".$user->uid."; var fd2UserName='".$user->name."'; ;";
drupal_add_js($cmd,'inline');
$roleCMD = "var fd2Role = " . json_encode($roles) . ";"; // JSON encode roles array
drupal_add_js($roleCMD, 'inline');


}
};
118 changes: 65 additions & 53 deletions farmdata2/farmdata2_modules/fd2_example/maps/maps.html
View file
Open in desktop
braughtg marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,37 +1,49 @@
<!-- define a div to wrap around the app. -->
<!-- apply v-cloak so that app is not visible until after being rendered -->
<div id="maps" v-cloak>
<div id="maps" v-cloak>

<p>The farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js file provide a library of JavaScript convenience functions for accessing the FarmOS API. This page gives examples of how to use these functions for loading maps from farmOS id numbers to textual names and vice versa (E.g. from user id to user name or crop id to crop name). The js library is include in the page by the fd2_example.info file.</p>
<p>The farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js file provide a library of JavaScript convenience
functions for accessing the FarmOS API. This page gives examples of how to use these functions for loading maps
from farmOS id numbers to textual names and vice versa (E.g. from user id to user name or crop id to crop name).
The js library is include in the page by the fd2_example.info file.</p>

<p>This page specifcially demonstrates the maps for going from user id to username and vice versa. The use of other
maps is similar. The documentation for the maps can be viewed by opening
farmdata2_modules/fd2_tabs/resources/doc/index.html from the repo in your browser. You can find the full source
for the library in farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js.</p>

<p>This page specifcially demonstrates the maps for going from user id to username and vice versa. The use of other maps is similar. The documentation for the maps can be viewed by opening farmdata2_modules/fd2_tabs/resources/doc/index.html from the repo in your browser. You can find the full source for the library in farmdata2_modules/FarmData2/fd2_tabs/resources/FarmOSAPI.js.</p>

<p>Examples of how to use Cypress to test the elements on this page can be found in the maps.spec.js file.</p>

<p>The userToIDMap map can be used to go from a username to a user id:</p>
<UL>
<LI>The logged in user is {{ userName }}.</LI>
<LI>That user's ID in the map is:
<LI>That user's ID in the map is:
<span data-cy="mapped-id">{{ userToIDMap.get(userName) }}</span>
<LI> <span>The user's roles could be get using fd2Role property defined in tab module : {{userRole}}</span></LI>
</UL>

<p>The IDToUserMap map can be used to go from a user id to a username:</p>
<UL>
<LI>The logged in user id is {{ userID }}.</LI>
<LI>That user's name in the map is:
<LI>That user's name in the map is:
<!-- Need to convert userID to a string here because the map keys are strings -->
<span data-cy="mapped-name">{{ idToUserMap.get(userID.toString()) }}</span>
<span data-cy="mapped-name"> {{ idToUserMap.get(userID.toString()) }}</span>
</UL>

<p>The full list of users known to the sustem is:</p>
<UL>
<table border=1px>
<tr><th>User ID</th><th>User Name</th></tr>
<tr>
<th>User ID</th>
<th>User Name</th>
</tr>
<!-- Use the computed property sortedIDs here to order the output -->
<!-- Also bind the data-cy attribute into the v-for index -->
<!-- That gives each element in the table a unique data-cy for testing. -->
<tr v-for='(id,i) in sortedIDs'>
<td :data-cy=i+'id'>{{ id }}</td><td :data-cy=i+'name'>{{ idToUserMap.get(id) }}</td></tr>
<td :data-cy=i+'id'>{{ id }}</td>
<td :data-cy=i+'name'>{{ idToUserMap.get(id) }}</td>
</tr>
</table>
</UL>

Expand All @@ -50,51 +62,51 @@
</div>

<script>
// Define the Vue instance for the app.
new Vue({
el: '#maps', // el: must match the id of the <div> for the app above.
data: {
// Provide easy access to the FarmDat2 variables in vue.
userID: fd2UserID,
userName: fd2UserName,
// Define the Vue instance for the app.
new Vue({
el: '#maps', // el: must match the id of the <div> for the app above.
data: {
// Provide easy access to the FarmDat2 variables in vue.
userID: fd2UserID,
userName: fd2UserName,
userRole: fd2Role,

// Vue variables to hold the maps that are loaded from farmOS
// Note: Making a new map here prevents null reference exceptions if the
// map has not been retrieved yet when the page is rendered.
userToIDMap: new Map(),
idToUserMap: new Map(),
createdCount: 0, // used in created and pageLoaded
},
computed: {
sortedIDs() {
keys = Array.from(this.idToUserMap.keys());
keys.sort(function(a,b) {
return Number(a) - Number(b);
})
return keys
// Vue variables to hold the maps that are loaded from farmOS
// Note: Making a new map here prevents null reference exceptions if the
// map has not been retrieved yet when the page is rendered.
userToIDMap: new Map(),
idToUserMap: new Map(),
createdCount: 0, // used in created and pageLoaded
},
pageLoaded() {
// Check here that the correct number of API calls have completed.
return this.createdCount == 2
computed: {
sortedIDs() {
keys = Array.from(this.idToUserMap.keys());
keys.sort(function (a, b) {
return Number(a) - Number(b);
})
return keys
},
pageLoaded() {
// Check here that the correct number of API calls have completed.
return this.createdCount == 2
},
},
},
created() {
// Use the FarmData2 library functions to load the maps into the
// Vue variables when this page is created.
getUserToIDMap().then((response) => {
this.userToIDMap = response
// Increment this in the then() of each API call.
this.createdCount++
})
getIDToUserMap().then((response) => {
this.idToUserMap = response
// Increment this in the then() of each API call.
this.createdCount++
})
}
})
created() {
// Use the FarmData2 library functions to load the maps into the
// Vue variables when this page is created.
getUserToIDMap().then((response) => {
this.userToIDMap = response
// Increment this in the then() of each API call.
this.createdCount++
})
getIDToUserMap().then((response) => {
this.idToUserMap = response
// Increment this in the then() of each API call.
this.createdCount++
})
}
})

//Allows Vue to be accessed in Dev Tools
Vue.config.devtools = true;
</script>

//Allows Vue to be accessed in Dev Tools
Vue.config.devtools = true;
</script>